/* ==========================================================================
   NEMEVORA — styles
   Brand colors are defined once below. Do not add new colors.
   Softer text, hairlines and glass surfaces use navy/cream at reduced opacity.

   Contents
   01 Tokens
   02 Base
   03 Background system
   04 Utilities
   05 Buttons
   06 Header
   07 Hero (scene, fallback, index, facts)
   08 Sections
   09 Services (compositions, specimens, quote)
   10 Process
   11 Portfolio and the reviews teaser
   12 About
   13 FAQ
   14 Contact
   15 Footer
   16 Motion system
   17 Responsive
   ========================================================================== */

/* 01 Tokens ---------------------------------------------------------------- */

:root {
  /* Brand accents retained; neutral whites approved by the owner, 2026-10-31. */
  --navy: #062445;
  --teal: #579292;
  --teal-light: #94B6B6;
  --gold: #AF8143;
  --bg-card: #FFFFFF;
  --bg-cream: #F7F8FA;

  /* Roles */
  --text: var(--navy);
  --text-soft: rgba(6, 36, 69, 0.8);
  --text-faint: rgba(6, 36, 69, 0.66);
  --line: rgba(6, 36, 69, 0.14);
  --line-soft: rgba(6, 36, 69, 0.08);
  --line-strong: var(--navy);
  --on-navy: var(--bg-cream);
  --on-navy-soft: rgba(247, 248, 250, 0.80);
  --on-navy-line: rgba(247, 248, 250, 0.16);

  /* Layered surfaces */
  --glass: rgba(255, 255, 255, 0.76);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --shadow-sm: 0 1px 2px rgba(6, 36, 69, 0.04), 0 8px 20px -18px rgba(6, 36, 69, 0.5);
  --shadow-md: 0 2px 4px rgba(6, 36, 69, 0.04), 0 26px 50px -34px rgba(6, 36, 69, 0.55);
  --shadow-lg: 0 4px 8px rgba(6, 36, 69, 0.04), 0 50px 80px -48px rgba(6, 36, 69, 0.6);

  /* Type */
  --font-display: "Markazi Text", "Noto Naskh Arabic", "Times New Roman", serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

  /* Layout */
  --container: 76rem;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --section-y: clamp(5rem, 9.5vw, 9.5rem);
  --header-h: 5rem;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --medium: 280ms;
  --slow: 620ms;

  --radius: 2px;
  --radius-md: 10px;
}

/* 02 Base ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  position: relative;
  margin: 0;
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.85;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

h1 { font-size: clamp(2.7rem, 1.6rem + 4.4vw, 5rem); line-height: 1.2; }
h2 { font-size: clamp(2.15rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1.28; }
h3 { font-size: clamp(1.55rem, 1.35rem + 0.8vw, 1.95rem); line-height: 1.4; }

p { margin: 0; }

a { color: inherit; }

::selection { background: var(--teal-light); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Launch offer: stated once, quietly, in the brand's own gold */
.offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(175, 129, 67, 0.07);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.offer-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Call to action inside a service composition */
.service-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.service-cta .btn { min-height: 3.1rem; }

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--navy);
  color: var(--on-navy);
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* 03 Background system ------------------------------------------------------
   One quiet, fixed layer: a faint measuring grid, two soft brand glows and a
   light grain. It sits behind everything and never animates.
   -------------------------------------------------------------------------- */

.bg-system {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 82% -8%, rgba(148, 182, 182, 0.28), transparent 62%),
    radial-gradient(44rem 34rem at 6% 12%, rgba(175, 129, 67, 0.09), transparent 60%),
    linear-gradient(transparent 0 calc(100% - 1px), rgba(6, 36, 69, 0.035) calc(100% - 1px)) 0 0 / 100% 5.5rem,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(6, 36, 69, 0.035) calc(100% - 1px)) 0 0 / 5.5rem 100%;
}

/* Fine grain keeps large flat areas from looking digital-flat.
   Plain opacity, no blend mode: a full-viewport blended layer is expensive to
   repaint while scrolling on phones. */
.bg-system::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

.site-header,
main,
.site-footer { position: relative; z-index: 1; }

/* 04 Utilities -------------------------------------------------------------- */

/* Underline that draws from the reading-start edge */
.draw-link,
.site-nav a,
.footer-nav a,
.footer-contact a,
.quote-options a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 100% 100%;
  transition: background-size var(--medium) var(--ease), color var(--fast) var(--ease);
}
[dir="ltr"] .site-nav a,
[dir="ltr"] .footer-nav a,
[dir="ltr"] .footer-contact a,
[dir="ltr"] .quote-options a { background-position: 0 100%; }

.site-nav a:hover,
.footer-nav a:hover,
.footer-contact a:hover,
.quote-options a:hover { background-size: 100% 1px; }

/* Arrow nudges forward in the reading direction */
.arrow {
  display: inline-block;
  transition: transform var(--medium) var(--ease);
}
[dir="rtl"] a:hover .arrow,
[dir="rtl"] .btn:hover .arrow { transform: translateX(-5px); }
[dir="ltr"] a:hover .arrow,
[dir="ltr"] .btn:hover .arrow { transform: translateX(5px); }

/* Brand mark used before small labels: a gold rule closed by a small square */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
}
.mark::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--gold);
}
.mark::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* 05 Buttons ---------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.4rem;
  padding-inline: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--fast) var(--ease),
    box-shadow var(--medium) var(--ease),
    color var(--fast) var(--ease),
    transform var(--medium) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.995); }

/* A soft sheen sweeps once across the primary button on hover */
.btn-primary {
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: var(--shadow-sm);
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-out);
}
.btn-primary:hover {
  box-shadow: inset 0 -3px 0 var(--gold), var(--shadow-md);
}
.btn-primary:hover::before { transform: translateX(120%); }

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: rgba(6, 36, 69, 0.45);
}
.btn-secondary:hover {
  background: rgba(6, 36, 69, 0.05);
  border-color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}

.btn-sm {
  min-height: 2.7rem;
  padding-inline: 1.15rem;
  font-size: 0.95rem;
}

/* 06 Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid transparent;
  transition: border-color var(--medium) var(--ease), box-shadow var(--medium) var(--ease),
    background-color var(--medium) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--line);
  box-shadow: 0 24px 40px -40px rgba(6, 36, 69, 0.8);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--navy);
}

/* Circular container keeps the logo round at every size */
.logo-mark {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  transition: transform var(--slow) var(--ease-out);
}
.brand:hover .logo-mark { transform: rotate(-8deg) scale(1.04); }

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  direction: ltr;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.1rem, 2.2vw, 2.1rem);
}

.site-nav a {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-soft);
  padding-block: 0.35rem;
}
.site-nav a:hover { color: var(--navy); }

/* The link for the section currently on screen keeps a gold underline */
.site-nav a.is-active {
  color: var(--navy);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1.5px;
}

/* 07 Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 6.5vw, 6rem) clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
}

/* Thin rings echoing the logo's circle */
.hero-ring {
  position: absolute;
  z-index: 0;
  width: clamp(30rem, 58vw, 54rem);
  aspect-ratio: 1;
  top: 50%;
  inset-inline-end: clamp(-22rem, -14vw, -8rem);
  transform: translateY(-55%);
  border: 1px solid rgba(148, 182, 182, 0.55);
  border-radius: 50%;
  pointer-events: none;
}
.hero-ring::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.32;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5.4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-soft);
}

.hero h1 {
  margin-block: 1.1rem 1.4rem;
  max-width: 14em;
}

.lead {
  max-width: 34em;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  line-height: 1.9;
  color: var(--text-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* --- Hero scene ------------------------------------------------------------
   A WebGL composition of floating document sheets, gold connection paths and
   a small data cluster. The CSS/SVG composition below it is the fallback and
   is what shows when WebGL is unavailable or motion is reduced.
   -------------------------------------------------------------------------- */

.hero-visual {
  position: relative;
  aspect-ratio: 1 / 0.92;
  width: 100%;
  isolation: isolate;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.hero-visual.scene-ready .hero-canvas { opacity: 1; }
.hero-visual.scene-ready .hero-fallback { opacity: 0; pointer-events: none; }

/* Fallback / baseline composition: layered document sheets in CSS 3D */
.hero-fallback {
  position: absolute;
  inset: 0;
  transition: opacity 600ms var(--ease-out);
  perspective: 1100px;
}

.hero-sheet {
  position: absolute;
  border-radius: 4px;
  background: linear-gradient(160deg, var(--bg-cream), rgba(247, 248, 250, 0.92));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.hero-sheet::before,
.hero-sheet::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  height: 1px;
  background: rgba(6, 36, 69, 0.16);
}
.hero-sheet::before { top: 26%; }
.hero-sheet::after { top: 40%; box-shadow: 0 10px 0 rgba(6, 36, 69, 0.1), 0 20px 0 rgba(6, 36, 69, 0.1); }

.hero-sheet-1 {
  inset-inline-start: 6%;
  top: 14%;
  width: 46%;
  aspect-ratio: 3 / 4;
  transform: rotate(-6deg);
}
.hero-sheet-2 {
  inset-inline-end: 8%;
  top: 6%;
  width: 40%;
  aspect-ratio: 4 / 3;
  transform: rotate(4deg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(148, 182, 182, 0.18));
}
.hero-sheet-3 {
  inset-inline-end: 16%;
  bottom: 8%;
  width: 44%;
  aspect-ratio: 5 / 4;
  transform: rotate(-3deg);
  border-color: rgba(175, 129, 67, 0.45);
}

.hero-fallback-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-fallback-lines path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.55;
}
.hero-fallback-lines circle { fill: var(--teal); opacity: 0.65; }

/* --- Contents strip -------------------------------------------------------- */

.hero-index {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-strong);
}

.index-title {
  margin-block: 0.9rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-faint);
}

.hero-index ol {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.hero-index li { border-inline-start: 1px solid var(--line); }
.hero-index li:first-child { border-inline-start: 0; }

.hero-index a {
  position: relative;
  display: block;
  height: 100%;
  padding: 1rem clamp(0.75rem, 1.4vw, 1.25rem) 1.15rem;
  text-decoration: none;
  color: var(--navy);
  transition: background-color var(--medium) var(--ease);
}
.hero-index a::after {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--origin, 100%) 50%;
  transition: transform var(--slow) var(--ease-out);
}
[dir="ltr"] .hero-index a::after { transform-origin: 0 50%; }
.hero-index a:hover { background: rgba(255, 255, 255, 0.7); }
.hero-index a:hover::after,
.hero-index a:focus-visible::after { transform: scaleX(1); }

.hero-index .num {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  transition: color var(--fast) var(--ease);
}
.hero-index a:hover .num { color: var(--teal); }

.hero-index .name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.45;
}

/* Facts line */
.facts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 1.25rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--text-soft);
}

.facts li { display: flex; align-items: center; }

.facts li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-inline: 1.25rem;
  background: var(--gold);
  transform: rotate(45deg);
}

/* 08 Sections ---------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section-cream { background: var(--bg-cream); }
.section-teal { background: var(--teal-light); }

/* Quiet depth: cream and teal sections fade in from the page ground */
.section-cream::before,
.section-teal::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10rem;
  background: linear-gradient(rgba(247, 248, 250, 0.6), transparent);
  pointer-events: none;
}

.section > .container { position: relative; }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* Section numbers count automatically, so hidden sections leave no gap */
main { counter-reset: section; }

.label-num {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.label-num::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
}
.label-num::after {
  content: "";
  width: 2.75rem;
  height: 1px;
  background: var(--gold);
}

.section-lead {
  max-width: 38em;
  margin-top: 1.1rem;
  color: var(--text-soft);
}

.detail-title {
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-faint);
}

/* 09 Services ---------------------------------------------------------------
   Each service is a composition, not a card: text on one side, a specimen of
   the deliverable on the other, alternating down the page.
   -------------------------------------------------------------------------- */

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.service {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

/* Gold rule grows along the top edge on hover */
.service::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 700ms var(--ease-out);
}
.service:hover::before,
.service:focus-within::before { width: 100%; }

.service:nth-child(even) .service-body { order: 2; }

.service-index {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6rem;
}

.service h3 { margin-bottom: 0.7rem; }

.service-body > p { color: var(--text-soft); }
.service-body > p + p { margin-top: 0.6rem; }

.service .for {
  margin-top: 1.1rem;
  font-size: 0.95rem;
}
.service .for span { font-weight: 600; color: var(--navy); }

/* Key selling point inside a service */
.service .highlight {
  margin-top: 1.25rem;
  padding: 0.15rem 1rem 0.15rem;
  border-inline-start: 2px solid var(--gold);
  color: var(--navy);
}
.service .highlight strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.45;
}

.service-detail { margin-top: 1.6rem; }

.service-detail ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail li {
  position: relative;
  margin-block: 0.4rem;
  padding-inline-start: 1.15rem;
  font-size: 0.98rem;
  line-height: 1.75;
}
.service-detail li::before {
  content: "";
  position: absolute;
  top: 0.9em;
  inset-inline-start: 0;
  width: 0.5rem;
  height: 1px;
  background: var(--gold);
}

/* Research: one introduction, nine clearly scoped tasks. */
.service-research {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  column-gap: clamp(2rem, 4vw, 4rem);
}
.service-research .research-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-block: 1.35rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.service-research h3 {
  font-size: clamp(2.55rem, 3.4vw, 3.65rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}
.service-research h3 span { color: var(--teal); }
.research-scope {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 1.8rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}
.research-scope-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--teal);
}
.research-scope p { margin: 0; font-size: 0.88rem; line-height: 1.8; }
.research-scope strong,
.research-scope p span { display: block; }
.research-scope p span { color: var(--text-soft); }
.research-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.research-contact {
  padding-block: 0.5rem;
  font-size: 0.88rem;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--line);
}
.research-contact:hover { text-decoration-color: var(--gold); }
.research-contact span { margin-inline-start: 0.3rem; color: var(--teal); }
.research-panel {
  min-width: 0;
  padding: clamp(1.1rem, 2vw, 1.7rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--teal);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.research-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.research-panel-label { margin: 0 0 0.15rem; font-size: 0.78rem; color: var(--text-faint); }
.research-panel-head h4 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 2.2vw, 2.1rem); font-weight: 500; line-height: 1.25; }
.research-emblem { width: 3rem; height: 3rem; flex-shrink: 0; stroke: var(--teal); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.research-emblem .research-emblem-accent { stroke: var(--gold); }
.research-tasks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.research-tasks li {
  min-width: 0;
  padding: 1rem 0.8rem;
  background: var(--bg-cream);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  transition: border-color var(--medium) var(--ease), transform var(--medium) var(--ease-out), box-shadow var(--medium) var(--ease);
}
.research-tasks li:hover {
  border-color: var(--teal-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.research-tasks svg { width: 1.5rem; height: 1.5rem; margin-bottom: 0.8rem; fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.research-tasks h5 { margin: 0 0 0.4rem; font: 600 0.87rem/1.7 var(--font-body); color: var(--navy); }
.research-tasks p { margin: 0; font-size: 0.76rem; line-height: 1.85; color: var(--text-soft); }
.research-panel-note { display: flex; align-items: baseline; gap: 0.6rem; margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.76rem; line-height: 1.8; color: var(--text-faint); }
.research-panel-note .mark { flex-shrink: 0; }

.tag {
  display: inline-block;
  margin-inline-end: 0.35rem;
  padding: 0 0.5rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--navy);
  white-space: nowrap;
}

/* --- Specimens ------------------------------------------------------------- */

.service-visual {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.specimen {
  position: relative;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--slow) var(--ease-out);
}
.section-cream .specimen { background: var(--bg-cream); }

/* Two sheets stacked behind give the specimen physical depth */
.specimen::before,
.specimen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  background: var(--bg-cream);
  transition: transform var(--slow) var(--ease-out);
}
.specimen::before { transform: translate(0, 0.75rem) scale(0.97); }
.specimen::after {
  transform: translate(0, 1.5rem) scale(0.94);
  border-color: rgba(175, 129, 67, 0.3);
}

.service-visual:hover .specimen { box-shadow: var(--shadow-lg); }
.service-visual:hover .specimen::before { transform: translate(0, 1rem) scale(0.975); }
.service-visual:hover .specimen::after { transform: translate(0, 2rem) scale(0.95); }

.specimen svg { width: 100%; height: auto; }

.specimen figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-faint);
}

/* Shared drawing language for the specimen illustrations */
.spec-line { stroke: rgba(6, 36, 69, 0.28); stroke-width: 2; stroke-linecap: round; }
.spec-line-strong { stroke: rgba(6, 36, 69, 0.6); stroke-width: 2.5; stroke-linecap: round; }
.spec-gold { stroke: var(--gold); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.spec-teal { stroke: var(--teal); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.spec-fill-teal { fill: rgba(87, 146, 146, 0.22); }
.spec-fill-gold { fill: rgba(175, 129, 67, 0.22); }
.spec-frame { fill: none; stroke: var(--line); stroke-width: 1; }
.spec-node { fill: var(--teal); }

/* --- Interleaved translation illustration (owner-approved example) --------- */

.interleave { margin: 0; }

.interleave figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-faint);
}

.interleave-dir {
  padding: 0 0.55rem;
  border: 1px solid var(--teal-light);
  border-radius: var(--radius);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--navy);
  unicode-bidi: isolate;
}

.interleave-page {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.interleave-page::before,
.interleave-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  background: var(--bg-cream);
  transition: transform var(--slow) var(--ease-out);
}
.interleave-page::before { transform: translate(0, 0.75rem) scale(0.97); }
.interleave-page::after {
  transform: translate(0, 1.5rem) scale(0.94);
  border-color: rgba(175, 129, 67, 0.3);
}
.service-visual:hover .interleave-page::before { transform: translate(0, 1rem) scale(0.975); }
.service-visual:hover .interleave-page::after { transform: translate(0, 2rem) scale(0.95); }

.interleave-page .src {
  margin: 0;
  text-align: start;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.interleave-page .tgt {
  margin: 0.2rem 0 1.25rem;
  padding-inline-start: 0.8rem;
  border-inline-start: 2px solid var(--teal-light);
  text-align: start;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--navy);
}
.interleave-page .tgt:last-child { margin-bottom: 0; }

/* Portfolio and translation switches (see the comment above <body> in index.html) */
[data-portfolio="off"] .portfolio-only { display: none !important; }
[data-translation="off"] .translation-only { display: none !important; }

/* --- Quote action: opens two choices --------------------------------------- */

.quote {
  margin-top: 1.75rem;
  max-width: 22rem;
}

.quote summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  padding-inline: 1.1rem;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
    box-shadow var(--medium) var(--ease);
}
.quote summary::-webkit-details-marker { display: none; }

.quote summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--medium) var(--ease);
}

.quote summary:hover,
.quote[open] summary {
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.quote[open] summary::after { transform: translateY(2px) rotate(-135deg); }

/* Height is animated by js/main.js; the wrapper only clips */
.quote-body { overflow: hidden; }

.quote-options {
  display: grid;
  padding-top: 0.4rem;
}

.quote-options a {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  font-weight: 500;
  background-size: 0 1px;
}

/* Small hint under the Instagram option (Instagram cannot prefill a message) */
.quote-options a:has(+ .quote-hint) {
  padding-bottom: 0.1rem;
  border-bottom: 0;
}

.quote-hint {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-faint);
}

/* 10 Process ----------------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One connecting line for each desktop row. */
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  inset-inline: 0;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  transform: scaleX(var(--rule-scale, 1));
  transform-origin: 100% 50%;
  transition: transform 1.4s var(--ease-out);
}
.steps::after { grid-area: 2 / 1 / 3 / -1; }
[dir="ltr"] .steps::before,
[dir="ltr"] .steps::after { transform-origin: 0 50%; }

.step { position: relative; z-index: 1; }

.step-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--teal);
  border-radius: 50%;
  background: var(--bg-card);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  transition: background-color var(--medium) var(--ease), color var(--medium) var(--ease),
    transform var(--medium) var(--ease-out);
}
.step:hover .step-num {
  background: var(--navy);
  color: var(--on-navy);
  transform: translateY(-2px);
}

.step h3 { margin-bottom: 0.5rem; font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem); }
.step p { color: var(--text-soft); font-size: 1rem; }

/* 11 Portfolio ---------------------------------------------------------------- */

.portfolio-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-block: 1px solid var(--line);
}

.empty-text { max-width: 30rem; }
.empty-text .mark { margin-bottom: 1rem; }
.empty-text p:last-child { color: var(--text-soft); }

.empty-title {
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Blank page outlines — decorative, not samples */
.empty-pages {
  position: relative;
  width: 15rem;
  height: 11rem;
}
.empty-pages span {
  position: absolute;
  width: 7rem;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--teal-light);
  border-radius: var(--radius);
  background: var(--bg-cream);
  box-shadow: var(--shadow-sm);
}
.empty-pages span:nth-child(1) { inset-inline-start: 0; top: 1.5rem; }
.empty-pages span:nth-child(2) { inset-inline-start: 4rem; top: 0.75rem; }
.empty-pages span:nth-child(3) {
  inset-inline-start: 8rem;
  top: 0;
  border-color: var(--gold);
}

/* Filled portfolio (rendered from data/portfolio.js) */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.work-item figure { margin: 0; }

.work-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--slow) var(--ease-out), box-shadow var(--slow) var(--ease-out);
}
.work-item:hover img { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.work-item figcaption { padding-top: 1rem; }

.work-service {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-faint);
}

.work-title {
  margin-block: 0.2rem 0.35rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.4;
}

.work-item p:last-child { color: var(--text-soft); font-size: 0.98rem; }

/* Customer reviews ---------------------------------------------------------
   One card, used by the teaser here and by the full list on reviews.html.
   The words are the customer's; anything that could identify them is not in
   the data at all. */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 1.5rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--glass);
  box-shadow: var(--shadow-sm);
}

/* A quiet quotation mark in the brand's gold, set into the corner */
.quote-card::before {
  content: "”";
  position: absolute;
  top: 0.2rem;
  inset-inline-end: 1.1rem;
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.3;
  pointer-events: none;
}

.quote-text {
  margin: 0;
  max-width: 26em;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--navy);
}

.quote-context {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-faint);
}

.quote-rating {
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: var(--gold);
}

.quote-who {
  margin-top: auto;
  padding-top: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-faint);
}

/* The homepage teaser: a few words, two cards, one link out */
.reviews-teaser { padding-block: clamp(3.5rem, 7vw, 6rem); }

.reviews-teaser-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.reviews-teaser-head h2 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); }

/* Two cards, side by side, held to a readable measure */
.reviews-teaser .quote-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 58rem;
}
.reviews-teaser .quote-text { font-size: 1.32rem; }

.reviews-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration-color: var(--gold);
  text-underline-offset: 0.35em;
  white-space: nowrap;
}
.reviews-more:hover { color: var(--teal); }

/* 12 About --------------------------------------------------------------------- */

.section-arcs { overflow: hidden; }

/* A quiet pair of arcs, the same language as the hero and contact rings */
.about-arcs {
  position: absolute;
  z-index: 0;
  width: 40rem;
  aspect-ratio: 1;
  inset-inline-start: -18rem;
  bottom: -20rem;
  border: 1px solid rgba(148, 182, 182, 0.55);
  border-radius: 50%;
  pointer-events: none;
}
.about-arcs::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(175, 129, 67, 0.28);
  border-radius: 50%;
}

.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.about-head { margin-bottom: 0; }

/* Years of experience, under the About lead. The two figures carry the claim, so
   they take the brand navy while the sentence around them stays as soft as the
   lead above it - a quiet statement of fact, not a statistic. */
.about-experience {
  max-width: 38em;
  margin-top: 1rem;
  color: var(--text-soft);
}

.about-experience strong {
  font-weight: 600;
  color: var(--navy);
}

.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 0.5rem;
}

.ledger-col {
  position: relative;
  border-top: 1px solid var(--line-strong);
}

/* A gold segment rides the top rule of each column as it arrives */
.ledger-col::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 3.5rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 900ms var(--ease-out) 260ms;
}
[dir="ltr"] .ledger-col::before { transform-origin: 0 50%; }
.ledger-col.is-in::before { transform: scaleX(1); }

.ledger h3 {
  margin-block: 1rem 0.5rem;
  font-size: 1.6rem;
}

.ledger li {
  transition: color var(--fast) var(--ease);
}
.ledger li:hover { color: var(--navy); }
.ledger li:hover::before { background: var(--teal); }

.ledger ul { list-style: none; margin: 0; padding: 0; }

.ledger li {
  position: relative;
  padding-block: 0.8rem;
  padding-inline-start: 1.15rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.75;
}
.ledger li::before {
  content: "";
  position: absolute;
  top: 1.7em;
  inset-inline-start: 0;
  width: 0.5rem;
  height: 1px;
  background: var(--gold);
}

/* 13 FAQ ----------------------------------------------------------------------- */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.faq-head { margin-bottom: 0; }

.faq-list { border-top: 1px solid var(--line-strong); }

.faq-item {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.faq-item::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--slow) var(--ease-out);
}
[dir="ltr"] .faq-item::before { transform-origin: 0 50%; }
.faq-item[open]::before,
.faq-item:hover::before { transform: scaleX(1); }

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  padding-inline-end: 2.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.3rem + 0.4vw, 1.6rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
  list-style: none;
  cursor: pointer;
  transition: padding-inline-start var(--medium) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { padding-inline-start: 0.4rem; }

/* Plus sign that turns into a minus */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.35rem;
  top: 50%;
  width: 0.85rem;
  height: 1.5px;
  background: var(--teal);
  transition: transform var(--medium) var(--ease), background-color var(--fast) var(--ease);
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(0deg); }

.faq-item summary:hover::before,
.faq-item summary:hover::after { background: var(--gold); }

/* Height is animated by js/main.js; the wrapper only clips */
.faq-body { overflow: hidden; }

.faq-item p {
  max-width: 40em;
  padding-bottom: 1.35rem;
  color: var(--text-soft);
}

/* 14 Contact -------------------------------------------------------------------- */

.section-teal { overflow: hidden; }

/* A faint ring echoes the hero, tying the two ends of the page together */
.contact-ring {
  position: absolute;
  z-index: 0;
  width: 46rem;
  aspect-ratio: 1;
  inset-inline-start: -16rem;
  top: -14rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
}
.contact-ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(175, 129, 67, 0.35);
  border-radius: 50%;
}

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}

.contact-grid .section-head { margin-bottom: 0; }

.section-teal .label,
.section-teal .section-lead,
.section-teal .detail-title { color: var(--navy); }
.section-teal .detail-title { color: rgba(6, 36, 69, 0.75); }

.channels {
  display: grid;
  gap: 0.75rem;
  max-width: 32rem;
  margin-top: 2.25rem;
}

.channel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  background: var(--glass-strong);
  border: 1px solid rgba(6, 36, 69, 0.16);
  border-radius: var(--radius-md);
  color: var(--navy);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--fast) var(--ease), box-shadow var(--medium) var(--ease),
    transform var(--medium) var(--ease-out);
}
.channel:hover {
  border-color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold), var(--shadow-md);
  transform: translateY(-2px);
}

.channel-icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  transition: stroke var(--fast) var(--ease), transform var(--medium) var(--ease-out);
}
.channel:hover .channel-icon { stroke: var(--navy); transform: scale(1.06); }

.channel-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.5;
}

.channel-name { font-weight: 600; }

.channel-value {
  font-size: 0.95rem;
  color: var(--text-soft);
  unicode-bidi: isolate;
}

.checklist {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem) 0.5rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(6, 36, 69, 0.14);
  border-top: 1px solid var(--navy);
  border-radius: var(--radius-md);
}

.checklist ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: item;
}

.checklist li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  padding-block: 0.7rem;
  border-bottom: 1px solid rgba(6, 36, 69, 0.16);
  font-size: 1rem;
  line-height: 1.7;
  counter-increment: item;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: counter(item);
  font-weight: 600;
  color: var(--navy);
}

/* 15 Footer ---------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--on-navy);
}

.site-footer :focus-visible { outline-color: var(--on-navy); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

/* The logo sits on a light disc so its own colors stay intact */
.footer-logo-wrap {
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  background: var(--bg-cream);
  isolation: isolate;
  flex: none;
}
.footer-logo-wrap img {
  width: 4.1rem;
  height: 4.1rem;
  border-radius: 50%;
  object-fit: contain;
}

.site-footer .brand-name { display: block; color: var(--on-navy); }

.footer-tagline {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--on-navy-soft);
}

.footer-nav,
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.footer-nav a,
.footer-contact a {
  color: var(--on-navy-soft);
  font-size: 0.98rem;
  padding-block: 0.15rem;
  background-image: linear-gradient(var(--gold), var(--gold));
}
.footer-nav a:hover,
.footer-contact a:hover { color: var(--on-navy); }

/* The two service pages sit one level under "الخدمات". Hierarchy is carried by
   size and an indent from the reading edge, not by a dimmer colour - the soft
   tone is already near the contrast floor. Logical properties keep the indent
   on the right in RTL and flip it for the LTR pages. Must stay after
   `.footer-nav a`: same specificity, so source order decides the size. */
.footer-subnav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding-inline-start: 0.85rem;
  border-inline-start: 1px solid var(--on-navy-line);
}

.footer-subnav a { font-size: 0.86rem; }

/* The entry for the page you are already on. It is a <span>, not a link, so the
   drawn underline never applies - the brighter on-navy tone is the only signal
   needed. `padding-block` is repeated from `.footer-nav a` because a non-link
   would otherwise sit tighter than the sibling it lines up with. */
.footer-subnav-current {
  font-size: 0.86rem;
  padding-block: 0.15rem;
  color: var(--on-navy);
  cursor: default;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--on-navy-line);
  font-size: 0.9rem;
  color: var(--on-navy-soft);
}

/* 16 Motion system ----------------------------------------------------------------
   One coordinated system. js/main.js adds .has-motion to <html> only when the
   visitor has not asked for reduced motion, so every rule below is opt-in and
   content is fully visible without JavaScript.
   -------------------------------------------------------------------------------- */

.has-motion [data-anim] {
  opacity: 0;
  transition:
    opacity 900ms var(--ease-out),
    transform 1000ms var(--ease-out),
    clip-path 1100ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.has-motion [data-anim="rise"] { transform: translateY(1.4rem); }

/* Headings wipe upward. The clip sits on an inner wrapper (added by
   js/main.js) so the heading's own box stays measurable for the observer. */
.has-motion [data-anim="mask"] { opacity: 1; }
.has-motion [data-anim="mask"] .mask-inner {
  display: block;
  clip-path: inset(0 0 105% 0);
  transform: translateY(0.6rem);
  transition: clip-path 1100ms var(--ease-out), transform 1100ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: clip-path, transform;
}
.has-motion [data-anim="mask"].is-in .mask-inner {
  clip-path: inset(-18% -6% -22% -6%);
  transform: none;
  will-change: auto;
}
.has-motion [data-anim="start"] { transform: translateX(2.5rem); }
[dir="ltr"].has-motion [data-anim="start"] { transform: translateX(-2.5rem); }
.has-motion [data-anim="end"] { transform: translateX(-2.5rem); }
[dir="ltr"].has-motion [data-anim="end"] { transform: translateX(2.5rem); }
.has-motion [data-anim="depth"] {
  transform: perspective(1200px) translate3d(0, 2.5rem, -6rem) rotateX(6deg);
}
.has-motion [data-anim="scale"] { transform: scale(0.94); }

.has-motion [data-anim].is-in {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Children of a staggered container get an increasing delay from JS */
.has-motion [data-stagger] > * { --delay: calc(var(--i, 0) * 90ms); }

/* Specimen line work draws itself in */
.has-motion .draw {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.4s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.has-motion .is-in .draw,
.has-motion .draw.is-in { stroke-dashoffset: 0; }

/* Parallax targets are moved by a single rAF loop in js/main.js, through a
   variable so each element keeps the transform its own rule gave it */
[data-parallax] {
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}
.hero-ring[data-parallax] {
  transform: translateY(-55%) translate3d(0, var(--parallax, 0px), 0);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 17 Responsive ------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3rem);
  }
  .hero-visual {
    order: 2;
    max-width: 34rem;
    margin-inline: auto;
    aspect-ratio: 1 / 0.8;
  }
  .hero h1 { max-width: 18em; }

  .service {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
  .service:nth-child(even) .service-body { order: 0; }
  .service-visual { max-width: 34rem; }
  .research-panel { max-width: 46rem; }

}

@media (max-width: 900px) {
  :root { --header-h: 4.25rem; }
  html { scroll-padding-top: 7.5rem; }

  .header-inner {
    grid-template-columns: 1fr auto;
    gap: 0 1rem;
    min-height: 0;
    padding-top: 0.7rem;
  }

  /* Navigation becomes a swipeable row under the logo */
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 1.5rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.2rem var(--gutter) 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; padding-block: 0.5rem; }

  /* Keep the rings in the corner, clear of the headline */
  .hero-ring,
  .hero-ring[data-parallax] {
    top: 0;
    width: 20rem;
    inset-inline-end: -13rem;
    transform: translateY(-45%) translate3d(0, var(--parallax, 0px), 0);
  }

  /* The contents strip becomes a list again */
  .hero-index ol {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
  }
  .hero-index li {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }
  .hero-index a { padding-inline: 0; display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; }
  .hero-index a:hover { background: transparent; }
  .hero-index .num { margin-bottom: 0; }
  .hero-index .name { font-size: 1.28rem; }

  .steps {
    grid-template-columns: 1fr;
    max-width: 38rem;
    gap: 2.25rem;
  }
  .steps::before {
    top: 0.5rem;
    bottom: 0.5rem;
    inset-inline: 1.35rem auto;
    width: 1px;
    height: auto;
    transform: scaleY(var(--rule-scale, 1));
    transform-origin: 50% 0;
  }
  .steps::after { display: none; }
  .step { padding-inline-start: 4.25rem; }
  .step-num {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    margin: 0;
    background: var(--bg-card);
  }

  .about-grid,
  .faq-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .contact-ring { width: 32rem; inset-inline-start: -14rem; top: -10rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --radius-md: 8px; }

  .research-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-tasks li:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 0.7rem; align-items: start; }
  .research-tasks li:last-child svg { grid-row: 1 / 3; margin-block: 0.2rem 0; }
  .research-tasks li:last-child h5 { grid-column: 2; }
  .research-tasks li:last-child p { grid-column: 2; }
  .research-cta { align-items: flex-start; }
  .research-panel-head { gap: 0.5rem; }

  .hero-visual { aspect-ratio: 1 / 0.85; }
  .hero-sheet::after { box-shadow: 0 8px 0 rgba(6, 36, 69, 0.1), 0 16px 0 rgba(6, 36, 69, 0.1); }

  .quote { max-width: none; }
  .quote summary { min-height: 3.25rem; }

  .interleave-page .src { font-size: 0.9rem; }
  .interleave-page .src br { display: none; }

  .specimen::after,
  .interleave-page::after { display: none; }

  .facts { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .facts li::before,
  .facts li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-inline: 0 0.85rem;
    background: var(--gold);
    transform: rotate(45deg);
  }

  .actions .btn { flex: 1 1 100%; }

  .reviews-teaser .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .reviews-teaser-head { flex-direction: column; align-items: flex-start; }

  .portfolio-empty { grid-template-columns: 1fr; gap: 2rem; }
  .empty-pages { width: 13rem; height: 9.5rem; }
  .empty-pages span { width: 6rem; }
  .empty-pages span:nth-child(2) { inset-inline-start: 3.5rem; }
  .empty-pages span:nth-child(3) { inset-inline-start: 7rem; }

  .ledger { grid-template-columns: 1fr; }

  /* Lighter entrances on small screens: less travel, less work */
  .has-motion [data-anim="depth"] { transform: translateY(1.4rem); }
  .has-motion [data-anim="start"],
  .has-motion [data-anim="end"] { transform: translateY(1.4rem); }
}

@media (max-width: 400px) {
  .brand { gap: 0.5rem; }
  .logo-mark { width: 2.5rem; height: 2.5rem; }
  .brand-name { font-size: 1.15rem; letter-spacing: 0.14em; }
  .header-cta { padding-inline: 0.8rem; font-size: 0.9rem; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Anything that moves is switched off for visitors who ask for reduced motion.
   Layout, colour and content stay exactly the same. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}