/* ==========================================================================
   B Zone Business Services, v2 "The Zone Grid"
   One stylesheet, mobile-first (min-width 600 / 768 / 1024 / 1280).
   Base CSS = final visible state. Hidden "before" states for motion exist only
   under html.js + (prefers-reduced-motion: no-preference) (section 23).
   ========================================================================== */

/* 1. Tokens ================================================================ */
:root{
  /* palette (official PDF logo, colour-managed) */
  --brand-500:#EC672E;
  --brand-600:#BF4E19;
  --brand-700:#B04716;
  --brand-800:#8F3911;
  --brand-300:#FF8448;
  --brand-100:#FDEBDD;
  --brand-50:#FFF4EC;
  --ink:#1E1A18;
  --ink-2:#2C2623;
  --ink-3:#3B3430;
  --grey:#665E58;
  --grey-700:#4E4844;
  --mist:#D1C9C3;
  --paper:#FBF8F5;
  --sand:#F3EDE7;
  --white:#FFFFFF;
  --line:#E6DED7;
  --field:#8A817B;
  --error:#B3261E;
  --wa:#128C4A;
  --wa-700:#0F7A40;
  --wa-800:#0B6634;

  --grad-ember:linear-gradient(135deg,#EC672E 0%,#BF4E19 55%,#8F3911 100%);
  --grad-glow:radial-gradient(60% 60% at 70% 30%, rgba(236,103,46,.35), transparent 70%);

  /* type */
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --fs-display:clamp(2.5rem, 1.4rem + 4.8vw, 5.5rem);
  --fs-h1:clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem);
  --fs-h2:clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --fs-h3:clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --fs-lead:clamp(1.075rem, 1rem + .4vw, 1.3rem);
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-mono:.75rem;
  --fs-stat:clamp(3rem, 2rem + 5vw, 6rem);

  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section-y:clamp(64px, 5rem + 4vw, 136px);
  --card-pad:clamp(20px, 1rem + 1.2vw, 36px);

  /* radius */
  --r-tile:28px;
  --r-card:20px;
  --r-sm:12px;
  --r-pill:999px;

  /* elevation */
  --sh-1:0 1px 2px rgba(28,25,23,.06), 0 4px 12px rgba(28,25,23,.05);
  --sh-2:0 12px 32px rgba(28,25,23,.10);
  --sh-ember:0 14px 30px rgba(191,78,25,.30);

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --d-1:160ms; --d-2:320ms; --d-3:700ms; --d-4:1200ms;

  /* header */
  --header-h:64px;
  --logo-h:40px;

  /* grid */
  --cols:4;
  --gutter:16px;
  --margin:20px;
}
@media (min-width:600px){ :root{ --cols:8; --gutter:20px; --margin:28px; } }
@media (min-width:768px){ :root{ --gutter:24px; --margin:32px; } }
@media (min-width:1024px){ :root{ --cols:12; --gutter:28px; --margin:40px; --header-h:72px; --logo-h:52px; } }
@media (min-width:1024px){ .site-header.is-scrolled{ --header-h:64px; --logo-h:44px; } }
@media (min-width:1280px){ :root{ --gutter:32px; } }

/* 2. Reset / base ========================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:hidden; overflow-x:clip; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--grey);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html.menu-open{ overflow:hidden; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
svg{ flex-shrink:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--brand-700); outline-offset:3px; }
.on-ink :focus-visible{ outline-color:var(--brand-300); }
::selection{ background:var(--brand-100); color:var(--ink); }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; inset-inline-start:16px; top:-100px; z-index:100;
  background:var(--ink); color:#fff; font-weight:700; padding:12px 18px; border-radius:var(--r-sm);
}
.skip-link:focus,.skip-link:focus-visible{ top:12px; outline-color:var(--brand-300); }

/* 3. Layout utilities ====================================================== */
.container{ width:min(100% - 2 * var(--margin), 1280px); margin-inline:auto; }
.grid-12{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--sand{ background:var(--sand); }
.section--tight{ padding-block:clamp(40px, 2rem + 2vw, 64px); }
.on-ink{ background:var(--ink); color:var(--mist); }
.section-head{ display:grid; gap:var(--s-4); max-width:760px; margin-bottom:var(--s-7); }
.section-head--center{ margin-inline:auto; text-align:center; justify-items:center; }
.section-foot{ margin-top:var(--s-6); }
.section--follow{ padding-top:calc(var(--section-y) * .35); }
.section--flush-end{ padding-bottom:0; }

/* 4. Typography ============================================================ */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); line-height:1.02; letter-spacing:-.025em; font-weight:800; }
h2{ font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.02em; font-weight:800; }
h3{ font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.01em; }
h4{ font-size:clamp(1.075rem, 1rem + .3vw, 1.2rem); line-height:1.25; }
p{ max-width:68ch; text-wrap:pretty; }
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{ color:#fff; }
.lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--grey); }
.on-ink .lead{ color:var(--mist); }
.label-mono{
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-mono);
  text-transform:uppercase; letter-spacing:.08em; line-height:1.4;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-mono);
  text-transform:uppercase; letter-spacing:.08em; line-height:1.4; color:var(--brand-700);
}
.eyebrow::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--brand-500); flex:none; }
.on-ink .eyebrow{ color:var(--brand-300); }
.label-chip{ background:var(--ink); color:#fff; padding:4px 10px; border-radius:var(--r-sm); display:inline-block; }
.text-link{ color:var(--brand-700); text-decoration:underline; text-underline-offset:4px; }
.text-link:hover{ color:var(--brand-800); }

/* M1 hero / about h1 line split + marker underline (plan.md section 1) */
.line{display:block; overflow:hidden; overflow:clip;
  padding-block:.08em .2em; margin-block:-.08em -.2em}
.line__in{display:inline-block}
.marker{position:relative; display:inline-block; white-space:nowrap; isolation:isolate}
.marker__svg{position:absolute; left:0; width:100%; bottom:-.06em; height:.36em; z-index:-1; pointer-events:none; overflow:hidden}
.marker__svg path{fill:none; stroke:var(--brand-100); stroke-width:8; stroke-linecap:round; stroke-dasharray:1 1.2; stroke-dashoffset:0}
.h1--long{font-size:clamp(2rem, 1.3rem + 3.2vw, 4.25rem)}

/* 5. Buttons / links ======================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; min-width:0; padding:10px 22px; border-radius:var(--r-sm);
  font-family:var(--font-body); font-weight:700; font-size:.95rem; line-height:1.25;
  text-align:center; white-space:normal; border:1.5px solid transparent;
  transition:background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out),
    border-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.btn svg{ width:20px; height:20px; transition:transform var(--d-2) var(--ease-out); }
.btn-lg{ min-height:52px; }
.btn:active{ transform:translateY(0); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background:var(--brand-600); color:#fff; }
.btn-primary:hover,.btn-primary:focus-visible{ background:var(--brand-800); box-shadow:var(--sh-ember); transform:translateY(-2px); }
.btn-primary:hover .i-arrow,.btn-primary:focus-visible .i-arrow{ transform:translateX(4px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover,.btn-ghost:focus-visible{ background:var(--ink); color:#fff; }
.btn-wa{ background:var(--wa-700); color:#fff; }
.btn-wa:hover,.btn-wa:focus-visible{ background:var(--wa-800); transform:translateY(-2px); }
.btn-on-ink{ background:#fff; color:var(--ink); }
.btn-on-ink:hover,.btn-on-ink:focus-visible{ background:var(--brand-100); transform:translateY(-2px); }
.btn-ghost-ink{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn-ghost-ink:hover,.btn-ghost-ink:focus-visible{ background:#fff; color:var(--ink); border-color:#fff; }
.btn:active{ transform:translateY(0); }
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  color:var(--brand-700); font-weight:700;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;
}
.link-arrow svg{ width:18px; height:18px; transition:transform var(--d-2) var(--ease-out); }
.link-arrow:hover,.link-arrow:focus-visible{ color:var(--brand-800); }
.link-arrow:hover svg,.link-arrow:focus-visible svg{ transform:translateX(4px); }
.on-ink .link-arrow{ color:var(--brand-300); }
.on-ink .link-arrow:hover,.on-ink .link-arrow:focus-visible{ color:#fff; }

/* 6. Header / nav / mega / mobile menu ===================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,245,.85);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 transparent;
  transition:box-shadow var(--d-2) var(--ease-out);
  view-transition-name:site-header;
}
.site-header.is-scrolled{ box-shadow:0 1px 0 var(--line); }
.header__bar{ height:var(--header-h); display:flex; align-items:center; gap:12px; transition:height var(--d-2) var(--ease-out); }
.brand{ display:inline-flex; align-items:center; flex:none; min-height:44px; }
.brand img{ height:var(--logo-h); width:auto; transition:height var(--d-2) var(--ease-out); }
.nav{ display:none; }
.header__cta{ display:none; }
.header__cta--compact{ display:none; }
.burger{
  margin-inline-start:auto; width:48px; height:48px; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink);
  border:1px solid var(--line); background:#fff;
}
.burger__box{ position:relative; width:22px; height:16px; }
.burger__line{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor;
  transition:transform var(--d-2) var(--ease-out), opacity var(--d-1) linear;
}
.burger__line:nth-child(1){ top:0; }
.burger__line:nth-child(2){ top:7px; }
.burger__line:nth-child(3){ top:14px; }
.burger[aria-expanded="true"] .burger__line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:600px){
  .header__cta--compact{
    display:inline-flex; min-height:40px; height:40px; padding:0 16px; font-size:.875rem;
    margin-inline-start:auto; margin-inline-end:0;
  }
  .header__cta--compact + .burger{ margin-inline-start:0; }
}
@media (min-width:1024px){
  .nav{ display:block; margin-inline-start:auto; }
  .header__cta{ display:inline-flex; margin-inline-start:16px; }
  .header__cta--compact{ display:none; }
  .burger{ display:none; }
}
.nav__list{ display:flex; align-items:center; gap:4px; }
.nav__item{ position:relative; display:flex; align-items:center; }
.nav__link{
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  font-weight:500; font-size:.95rem; color:var(--ink);
}
.nav__link::after{
  content:""; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:2px; border-radius:2px;
  background:var(--brand-500); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-2) var(--ease-out);
}
.nav__link:hover::after,.nav__link:focus-visible::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--brand-700); }
.nav__item--has-sub .nav__link{ padding-inline-end:4px; }
.nav__item--has-sub .nav__link::after{ inset-inline-end:4px; }
.nav__sub-toggle{
  width:32px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); border-radius:8px;
}
.nav__sub-toggle svg{ width:18px; height:18px; transition:transform var(--d-2) var(--ease-out); }
.nav__sub-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mega{
  position:absolute; top:calc(100% + 8px); inset-inline-start:-12px; width:560px; z-index:55;
  background:#fff; border-radius:var(--r-card); box-shadow:var(--sh-2); border:1px solid var(--line);
  padding:16px;
}
.mega::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.mega__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.mega__cat{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start;
  padding:12px; border-radius:var(--r-sm); transition:background-color var(--d-1) linear;
}
.mega__cat:hover,.mega__cat:focus-visible,.mega__cat[aria-current="page"]{ background:var(--sand); }
.mega__cat:hover .well,.mega__cat:focus-visible .well{ transform:rotate(-6deg); }
.mega__label{ display:block; font-weight:700; color:var(--ink); line-height:1.3; font-size:.95rem; }
.mega__cat[aria-current="page"] .mega__label{ color:var(--brand-700); }
.mega__svcs{ display:block; margin-top:4px; font-size:.8125rem; line-height:1.45; color:var(--grey-700); }
.mega__svcs span{ display:block; }
.mega__foot{ margin-top:8px; padding:8px 12px 0; border-top:1px solid var(--line); }

.mobile-menu{
  position:fixed; inset:64px 0 0 0; z-index:60;
  background:var(--ink); color:#fff;
  overflow-y:auto; overscroll-behavior:contain;
  clip-path:inset(0);
  transition:clip-path 360ms var(--ease-out);
}
@media (min-width:1024px){ .mobile-menu{ display:none !important; } }
.mm{ min-height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:32px; padding:24px var(--margin) 32px; }
.mm__list{ display:grid; gap:4px; }
.mm__item{ border-bottom:1px solid rgba(255,255,255,.08); }
.mm__row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mm__link{
  display:flex; align-items:baseline; gap:14px; min-height:60px; padding:10px 0;
  font-family:var(--font-display); font-weight:700; font-size:1.75rem; line-height:1.15; color:#fff;
  letter-spacing:-.01em;
}
.mm__link[aria-current="page"]{ color:var(--brand-300); }
.mm__idx{ font-family:var(--font-mono); font-weight:500; font-size:.75rem; letter-spacing:.08em; color:var(--brand-300); }
.mm__sub-toggle{
  width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; color:#fff;
  border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.2);
}
.mm__sub-toggle svg{ width:22px; height:22px; transition:transform var(--d-2) var(--ease-out); }
.mm__sub-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mm__sub{ display:grid; gap:2px; padding:0 0 16px; padding-inline-start:34px; }
.mm__sub a{ display:flex; align-items:center; min-height:44px; font-weight:500; font-size:1.05rem; color:var(--mist); }
.mm__sub a:hover,.mm__sub a[aria-current="page"]{ color:#fff; }
.mm__sub a[aria-current="page"]{ color:var(--brand-300); }
.mm__actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mm__action{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:64px; padding:8px; border-radius:var(--r-sm); background:var(--ink-2);
  border:1px solid rgba(255,255,255,.12); color:#fff; font-weight:700; font-size:.875rem;
}
.mm__action svg{ width:22px; height:22px; color:var(--brand-300); }
.mm__action:hover,.mm__action:focus-visible{ background:var(--ink-3); }

/* 7. Masthead / breadcrumb ================================================= */
.masthead{
  position:relative; isolation:isolate; overflow-x:hidden; overflow-x:clip;
  padding-block:40px 56px;
}
.masthead::before,.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--line) 1px, transparent 1.2px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(#000, transparent 70%); mask-image:linear-gradient(#000, transparent 70%);
}
.masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line);
  transform-origin:left;
}
.masthead__grid{ display:grid; gap:24px; align-items:center; }
.masthead__copy{ display:grid; gap:16px; justify-items:start; }
.masthead__title{ font-size:var(--fs-h1); }
.masthead__lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--grey); max-width:60ch; }
.masthead__note{ font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.04em; color:var(--brand-700); }
.masthead__motif{ display:none; }
@media (min-width:1024px){
  .masthead{ padding-block:72px 80px; }
  .masthead__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); }
  .masthead__copy{ grid-column:1/9; }
  .masthead__motif{ display:block; grid-column:10/13; justify-self:end; width:160px; height:160px; }
}
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; }
.breadcrumb li{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-700); }
.breadcrumb li + li::before{ content:"/"; margin:0 10px; color:var(--grey-700); }
.breadcrumb a{ display:inline-flex; align-items:center; min-height:32px; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.breadcrumb a:hover,.breadcrumb a:focus-visible{ color:var(--brand-700); text-decoration-color:currentColor; }
.breadcrumb [aria-current="page"]{ color:var(--ink); }
.motif .art-tile{ fill:#fff; stroke:var(--line); stroke-width:1.5; }
.motif .art-tile--tint{ fill:var(--brand-100); }
.motif .art-tile--sand{ fill:var(--sand); }

/* 8. Hero + art ============================================================ */
.hero{ position:relative; isolation:isolate; overflow-x:hidden; overflow-x:clip; padding-block:40px var(--section-y); }
.hero__grid{ display:grid; gap:32px; }
.hero__copy{ display:grid; gap:20px; justify-items:start; align-content:center; }
.hero__title{ font-size:var(--fs-display); line-height:.98; letter-spacing:-.03em; font-weight:800; }
.hero__lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--grey); max-width:58ch; }
.hero__ctas{ display:flex; flex-direction:column; gap:12px; width:100%; }
.hero__ctas .btn{ width:100%; }
.hero__call{ display:flex; align-items:center; gap:10px; color:var(--grey); }
.hero__call svg{ width:20px; height:20px; color:var(--brand-700); }
.hero__call a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--brand-500); text-decoration-thickness:2px; text-underline-offset:5px; display:inline-flex; align-items:center; min-height:44px; }
.hero__call a:hover{ color:var(--brand-700); }
.hero-art-wrap{
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  width:100%; max-width:340px; margin-inline:auto; margin-top:0;
}
.hero-art{
  position:relative; width:100%; aspect-ratio:1; overflow:hidden; overflow:clip; contain:paint;
  border-radius:var(--r-tile); background:var(--sand);
}
.hero-art__svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.art-tile{ fill:rgba(255,255,255,.6); stroke:var(--line); stroke-width:1.5; transform-box:fill-box; transform-origin:center; }
.art-tile--tint{ fill:var(--brand-100); }
.art-tile--sand{ fill:var(--sand); }
.art-mark{ transform-box:fill-box; transform-origin:center; }
.art-mark__bg{ fill:#fff; }
.art-orbit{ fill:none; stroke:var(--brand-500); stroke-width:1.5; stroke-dasharray:3 11; opacity:.7; transform-box:fill-box; transform-origin:center; }
.glow-blob{ position:absolute; width:58%; aspect-ratio:1; border-radius:50%; filter:blur(40px); z-index:0; pointer-events:none; }
.glow-blob--a{ top:-8%; right:-10%; background:rgba(236,103,46,.38); }
.glow-blob--b{ bottom:-12%; left:-10%; background:rgba(253,235,221,.95); }
.chip--glass{
  position:absolute; z-index:2; max-width:48%;
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid rgba(255,255,255,.8); box-shadow:var(--sh-2);
  font-weight:700; font-size:.8rem; line-height:1.25; color:var(--ink);
  translate:calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 6px);
  transition:translate 300ms var(--ease-out);
}
.chip--glass::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--brand-500); flex:none; }
.chip--c1{ top:6%; left:2%; }
.chip--c2{ top:30%; right:0; }
.chip--c3{ bottom:16%; left:0; }
.chip--c4{ bottom:2%; right:6%; }
.art-toggle{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px;
  border-radius:var(--r-sm); background:#fff; border:1px solid var(--field);
  font-weight:500; font-size:.875rem; color:var(--grey-700);
  transition:border-color var(--d-1) linear, color var(--d-1) linear;
}
.art-toggle svg{ width:20px; height:20px; }
.art-toggle:hover,.art-toggle:focus-visible{ border-color:var(--ink); color:var(--ink); }
@media (min-width:600px){
  .hero__ctas{ flex-direction:row; flex-wrap:wrap; width:auto; }
  .hero__ctas .btn{ width:auto; }
  .chip--glass{ font-size:.9rem; }
}
@media (min-width:768px){
  .hero{ padding-top:48px; }
  .hero-art-wrap{ max-width:440px; }
}
@media (min-width:1024px){
  .hero{ padding-block:24px 72px; }
  .hero__grid{ grid-template-columns:7fr 5fr; gap:48px; align-items:center; min-height:min(88svh, 860px); }
  .hero-art-wrap{ max-width:520px; margin-inline:auto 0; }
}

/* 9. Tiles / bento ========================================================= */
.tile{
  position:relative; border-radius:var(--r-tile); padding:var(--card-pad);
  transition:transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.tile--paper{ background:#fff; border:1px solid var(--line); }
.tile--sand{ background:var(--sand); }
.tile--tint{ background:var(--brand-50); }
.tile--ink{ background:var(--ink); color:var(--mist); }
.tile--ember{ background:var(--grad-ember); color:#fff; }
.tile--ink h2,.tile--ink h3{ color:#fff; }
.tile__link::after{ content:""; position:absolute; inset:0; border-radius:var(--r-tile); }
.tile__link:focus-visible{ outline:none; }
.tile__link:focus-visible::after{ outline:3px solid var(--brand-700); outline-offset:3px; border-radius:var(--r-tile); }
.tile--ink .tile__link:focus-visible::after{ outline-color:var(--brand-300); }
.tile--link:hover,.tile--link:focus-within{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.tile--link:hover .well,.tile--link:focus-within .well{ transform:rotate(-6deg); }
.well{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:56px; height:56px; border-radius:16px; background:var(--brand-100); color:var(--brand-700);
  transition:transform var(--d-2) var(--ease-spring);
}
.well svg{ width:26px; height:26px; }
.well--sm{ width:44px; height:44px; border-radius:13px; }
.well--sm svg{ width:22px; height:22px; }
.on-ink .well,.tile--ink .well{ background:var(--ink-3); color:var(--brand-300); }
.tile__more{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-weight:700; font-size:.95rem; color:var(--brand-700);
}
.tile__more svg{ width:18px; height:18px; transition:transform var(--d-2) var(--ease-out); }
.tile--link:hover .tile__more svg,.tile--link:focus-within .tile__more svg{ transform:translateX(4px); }
.tile--ink .tile__more{ color:var(--brand-300); }

.bento{ display:grid; gap:var(--gutter); grid-template-columns:minmax(0,1fr); }
.bento__tile{ display:flex; flex-direction:column; gap:16px; min-height:100%; }
.bento__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tile__index{ color:var(--brand-700); transition:transform var(--d-2) var(--ease-out); }
.tile--ink .tile__index{ color:var(--brand-300); }
.tile__title{ font-size:var(--fs-h3); }
.bento__tile--a .tile__title{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height:1.08; }
.tile--link:hover .tile__index,.tile--link:focus-within .tile__index{ transform:translateX(6px); }
.tile__list{ display:grid; gap:10px; }
.tile__list li{ display:flex; align-items:flex-start; gap:10px; font-weight:500; line-height:1.45; color:var(--grey); }
.tile__list svg{ width:18px; height:18px; margin-top:2px; color:var(--brand-700); }
.tile--ink .tile__list li{ color:var(--mist); }
.tile--ink .tile__list svg{ color:var(--brand-300); }
.bento__tile .tile__more{ margin-top:auto; padding-top:8px; }
.bento__tile--a .tile__list{ gap:14px; }
.bento__tile--a .tile__list li{ font-size:1.05rem; }
.tile__title--ember{ color:#fff; font-weight:800; font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height:1.15; }
.tile__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.tile__actions .btn{ flex:1 1 220px; }
.bento__tile--e{ justify-content:space-between; gap:28px; }
@media (min-width:768px){
  .bento{ grid-template-columns:repeat(8,minmax(0,1fr)); }
  .bento__tile--a{ grid-column:1/9; }
  .bento__tile--b{ grid-column:1/5; }
  .bento__tile--c{ grid-column:5/9; }
  .bento__tile--d{ grid-column:1/5; }
  .bento__tile--e{ grid-column:5/9; }
}
@media (min-width:1024px){
  .bento{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .bento__tile--a{ grid-column:1/8; grid-row:1/3; }
  .bento__tile--b{ grid-column:8/13; grid-row:1; }
  .bento__tile--c{ grid-column:8/13; grid-row:2; }
  .bento__tile--d{ grid-column:1/6; grid-row:3; }
  .bento__tile--e{ grid-column:6/13; grid-row:3; }
  .bento__tile--a{ padding:clamp(32px, 1rem + 2vw, 52px); }
}

/* glow panels (M14): static glow, pointer-follow added by JS */
[data-glow]{ position:relative; overflow:hidden; overflow:clip; isolation:isolate; }
[data-glow]::before{
  content:""; position:absolute; width:70%; aspect-ratio:1; left:35%; top:-5%;
  background:radial-gradient(closest-side, rgba(236,103,46,.35), transparent);
  pointer-events:none; z-index:-1;
  transform:translate(var(--gx, 0px), var(--gy, 0px));
  transition:transform 320ms var(--ease-out);
}

/* section 2 tiles: services #details */
.detail-tiles{ display:grid; gap:24px; grid-template-columns:1fr; }
.detail-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.detail-tile__title{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); color:var(--ink); }
.detail-tile__list{ display:grid; gap:8px; }
.detail-tile__list li{ position:relative; padding-inline-start:18px; font-weight:500; font-size:1rem; color:var(--grey); }
.detail-tile__list li::before{ content:""; position:absolute; inset-inline-start:0; top:.6em; width:8px; height:8px; border-radius:2px; background:var(--brand-500); }
.detail-tile__count{ color:var(--grey-700); margin-top:16px; }
@media (min-width:768px){ .detail-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* category #related */
.related{ display:grid; gap:20px; grid-template-columns:1fr; }
.related__tile{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.related__tile h3{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); color:var(--ink); }
.related__svcs{ font-size:.875rem; color:var(--grey-700); }
.related__tile .tile__more{ margin-top:16px; }
@media (min-width:1024px){ .related{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* N8 services overview stats tile */
.stats-tile{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.stats-tile__num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.stats-tile__label{ color:var(--grey-700); margin-top:8px; }
/* services #overview: remaining intro body left, stats tile right (>= 1024) */
.overview__grid{ display:grid; gap:32px; }
.overview__body{ display:grid; gap:16px; font-size:var(--fs-lead); line-height:1.6; color:var(--grey); }
@media (min-width:1024px){
  .overview__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); align-items:center; }
  .overview__body{ grid-column:1/8; }
  .overview__stats{ grid-column:8/13; }
}

/* 10. Authorities ========================================================== */
.authorities-band{ background:var(--sand); padding-block:clamp(32px, 1.5rem + 2vw, 56px); }
.authorities-band__label{ color:var(--grey-700); margin-bottom:20px; font-size:var(--fs-mono); }
.authorities{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.authority{
  display:flex; align-items:center; gap:10px; min-height:52px; padding-block:8px; padding-inline:8px 12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  font-weight:500; font-size:.875rem; line-height:1.3; color:var(--ink);
}
.authority__emblem{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:10px; background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-weight:500; font-size:.625rem; letter-spacing:.04em;
}
@media (min-width:768px){ .authorities{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1024px){
  .authorities-band__label{ text-align:center; }
  .authorities{ display:flex; flex-wrap:wrap; justify-content:center; }
}

/* 11. Manifesto ============================================================ */
.manifesto__title{ font-size:clamp(2.25rem, 1.2rem + 4.2vw, 5rem); line-height:1.02; letter-spacing:-.03em; max-width:16ch; }
.manifesto__grid{ display:grid; gap:32px; margin-top:var(--s-7); }
.manifesto__body{ font-size:var(--fs-lead); line-height:1.6; color:var(--grey); }
.chip-cluster{ display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start; }
.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 14px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:#fff;
  font-size:.875rem; color:var(--grey-700); line-height:1.3;
  transition:border-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
.chip::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--brand-500); flex:none; }
.chip--link{ min-height:44px; font-weight:700; color:var(--ink); font-size:.95rem; }
.chip--link:hover,.chip--link:focus-visible{ border-color:var(--brand-500); color:var(--brand-700); }
.manifesto__cta{ margin-top:var(--s-6); }
@media (min-width:1024px){
  .manifesto__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); align-items:start; }
  .manifesto__body{ grid-column:1/7; }
  .manifesto__side{ grid-column:8/13; }
}

/* 12. Stepper rail (home) + process stepper ================================ */
.stepper{ position:relative; }
.stepper__list{ display:grid; gap:40px; }
.stepper__rail{ position:absolute; inset-inline-start:25px; top:26px; bottom:26px; width:2px; background:var(--line); }
.stepper__fill{ position:absolute; inset:0; background:var(--brand-500); transform:scaleY(var(--p, 1)); transform-origin:top; }
.stepper__step{ position:relative; padding-inline-start:76px; min-height:52px; }
.stepper__node{
  position:absolute; inset-inline-start:0; top:0; width:52px; height:52px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:500; font-size:.875rem; letter-spacing:.04em;
  background:var(--brand-600); color:#fff; border:1.5px solid var(--brand-600);
  transition:background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.stepper__step h3{ padding-top:12px; }
.stepper__step p{ margin-top:8px; color:var(--grey); }
@media (min-width:1024px){
  .stepper__list{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
  .stepper__rail{ inset-inline-start:26px; inset-inline-end:calc((100% - 84px) / 4 - 26px); top:25px; bottom:auto; width:auto; height:2px; }
  .stepper__fill{ transform:scaleX(var(--p, 1)); transform-origin:left; }
  .stepper__step{ padding-inline-start:0; padding-top:76px; }
  .stepper__step h3{ padding-top:0; }
}

/* process.html #steps (plan section 2.3) */
.steps{ position:relative; }
.steps__rail{ display:none; }
.steps__cards{ position:relative; display:grid; gap:var(--s-6); padding-inline-start:28px; }
.steps__cards::before,.steps__cards::after{ content:""; position:absolute; inset-inline-start:7px; top:0; bottom:0; width:2px; }
.steps__cards::before{ background:var(--line); }
.steps__cards::after{ background:var(--brand-500); transform:scaleY(var(--p, 1)); transform-origin:top; transition:transform var(--d-2) var(--ease-out); }
.step-card{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:20px; row-gap:8px; align-items:start;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-card); padding:var(--card-pad); box-shadow:var(--sh-1);
  transition:border-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.step-card__ref{ grid-column:1; color:var(--brand-700); }
.step-card .well{ grid-column:2; grid-row:1/4; align-self:start; }
.step-card__title{ grid-column:1; font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.01em; }
.step-card p:not(.step-card__ref){ grid-column:1; color:var(--grey); max-width:60ch; }
.step-card.is-active{ border-color:var(--brand-500); box-shadow:var(--sh-2); }
.steps__node{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:500; font-size:.875rem; background:#fff; color:var(--ink);
  border:1.5px solid var(--line); position:relative; z-index:1;
  transition:background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.steps__node.is-active{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
@media (min-width:1024px){
  .steps{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); }
  .steps__rail{ display:block; grid-column:1/4; position:sticky; top:calc(var(--header-h) + 48px); align-self:start; }
  .steps__track{ position:absolute; inset-inline-start:25px; top:26px; height:calc(3 * 124px); width:2px; background:var(--line); }
  .steps__fill{ position:absolute; inset:0; background:var(--brand-500); transform:scaleY(var(--p, 1)); transform-origin:top; transition:transform var(--d-2) var(--ease-out); }
  .steps__nodes{ position:relative; display:grid; gap:72px; }
  .steps__cards{ grid-column:4/13; gap:var(--s-9); padding-inline-start:0; }
  .steps__cards::before,.steps__cards::after{ display:none; }
}

/* 13. Why list ============================================================= */
.why__grid{ display:grid; gap:40px; }
.why__head{ display:grid; gap:16px; align-content:start; }
.why__motif{ display:none; }
.why-list{ display:grid; gap:var(--s-6); }
.why-item{ display:flex; gap:20px; align-items:flex-start; }
.why-item h3{ margin-top:4px; }
.why-item p{ margin-top:6px; color:var(--grey); }
@media (min-width:1024px){
  .why__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); }
  .why__head{ grid-column:1/6; position:sticky; top:calc(var(--header-h) + 48px); align-self:start; }
  .why__motif{ display:block; width:120px; height:120px; margin-top:16px; }
  .why-list{ grid-column:7/13; }
}

/* 14. Proof / stats / quote wall =========================================== */
.proof{ background-color:var(--ink); background-image:var(--grad-glow); }
.proof .section-head p{ color:var(--mist); }
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.stat{ background:var(--ink-2); border-radius:var(--r-card); padding:clamp(18px, .8rem + 1.2vw, 32px); border:1px solid rgba(255,255,255,.06); min-width:0; }
.stat__num{
  display:block; font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(2.25rem, 1rem + 5vw, 4.25rem); color:var(--brand-300);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stat__label{ display:block; margin-top:12px; color:var(--mist); }
.proof__quotes-head{ margin-top:var(--s-9); }
.quote-wall{ columns:1; column-gap:24px; }
.quote{
  break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 24px; display:grid; gap:16px;
  background:var(--ink-2); border-radius:var(--r-card); padding:var(--card-pad);
}
.quote__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.quote__icon{ width:32px; height:32px; color:var(--brand-300); }
.quote__stars{ display:flex; gap:3px; color:var(--brand-300); }
.quote__stars svg{ width:16px; height:16px; }
.quote blockquote p{ color:#fff; font-size:1.05rem; line-height:1.65; }
.quote figcaption{ display:flex; align-items:center; gap:12px; }
.quote__avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:12px;
  background:var(--brand-500); color:var(--ink); font-family:var(--font-display); font-weight:800; font-size:.95rem;
}
.quote__name{ color:#fff; font-weight:700; }
@media (min-width:768px){ .quote-wall{ columns:2; } }
@media (min-width:1024px){
  .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gutter); }
  .quote-wall{ columns:3 320px; }
}

/* 15. Service directory / filter + About route line ======================== */
.filter-wrap{ position:relative; margin-top:var(--s-5); }
.filter{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 8px; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); }
.filter__btn{
  flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:var(--r-pill); border:1.5px solid var(--field); background:#fff; color:var(--ink); font-weight:700; font-size:.9rem; white-space:nowrap;
  transition:background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.filter__btn svg{ width:16px; height:16px; display:none; }
.filter__btn:hover{ border-color:var(--ink); }
.filter__btn[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.filter__btn[aria-pressed="true"] svg{ display:block; }
.filter__status{ margin-top:12px; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-700); }
@media (min-width:768px){
  .filter{ flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none; }
}
.svc-dir{ margin-top:var(--s-6); }
.svc-group{ padding-block:48px; background:var(--paper); }
.svc-group--sand{ background:var(--sand); }
.svc-group__head{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.svc-group__head h3{ flex:1 1 200px; }
.svc-group__link{
  color:var(--ink);
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat;
  background-size:0 2px; background-position:0 100%;
  transition:background-size var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
.svc-group__link:hover,.svc-group__link:focus-visible{ color:var(--brand-700); background-size:100% 2px; }
.svc-group__count{ color:var(--grey-700); flex-basis:100%; }
.svc-group__list{ display:grid; gap:32px; margin-top:24px; }
.svc-entry{ position:relative; padding-top:20px; }
.svc-entry::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:32px; height:3px; border-radius:2px; background:var(--brand-500); }
.svc-entry__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.075rem, 1rem + .3vw, 1.2rem); color:var(--ink); line-height:1.25; }
.svc-entry__summary{ color:var(--grey); margin-top:8px; }
.svc-entry .link-arrow{ margin-top:12px; }
.svc-group__list--solo{ margin-top:var(--s-6); }
.outcome{ margin-top:16px; padding:16px 20px; background:var(--brand-50); border-inline-start:3px solid var(--brand-500); border-radius:var(--r-sm); }
.outcome__label{ color:var(--brand-700); display:block; margin-bottom:6px; }
.outcome p{ color:var(--ink); }
@media (min-width:768px){
  .svc-group__count{ flex-basis:auto; }
  .svc-group__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; margin-top:32px; }
}
@media (min-width:1024px){
  .svc-group__inner{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); }
  .svc-group__head{ grid-column:1/5; align-self:start; position:sticky; top:calc(var(--header-h) + 24px); flex-direction:column; align-items:flex-start; }
  .svc-group__head h3{ flex:none; }
  .svc-group__list{ grid-column:5/13; gap:32px 28px; margin-top:0; }
  .svc-group__list--solo{ margin-top:var(--s-6); }
}

.route{ position:relative; }
.route__list{ display:grid; gap:40px; }
.route__path{ position:absolute; inset-inline-start:21px; top:22px; bottom:22px; width:2px; background:var(--line); }
.route__fill{ position:absolute; inset:0; background:var(--brand-500); transform:scaleY(var(--p, 1)); transform-origin:top; }
.route__stop{ position:relative; padding-inline-start:72px; }
.route__node{
  position:absolute; inset-inline-start:0; top:0; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-100); border:1.5px solid var(--brand-500); color:var(--brand-700);
  transition:background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.route__node svg{ width:22px; height:22px; }
.route__stop h3{ padding-top:8px; }
.route__stop p{ margin-top:8px; color:var(--grey); }
@media (min-width:1024px){
  .route__list{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
  .route__path{ inset-inline-start:22px; inset-inline-end:calc((100% - 84px) / 4 - 22px); top:21px; bottom:auto; width:auto; height:2px; }
  .route__fill{ transform:scaleX(var(--p, 1)); transform-origin:left; }
  .route__stop{ padding-inline-start:0; padding-top:72px; }
  .route__stop h3{ padding-top:0; }
}

/* about.html story / values / commitment */
.story__body{ font-size:1.0625rem; color:var(--grey); }
.story__body p{ margin-bottom:1.2em; max-width:none; }
.story__body > p:first-child::first-letter{
  font-family:var(--font-display); font-weight:800; color:var(--brand-700);
  float:left; font-size:4.2em; line-height:.85; margin:.06em .1em 0 0;
}
.pull-quote{
  margin:8px 0 28px; padding:20px 0; padding-inline-start:24px; border-inline-start:3px solid var(--brand-500);
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height:1.2; color:var(--ink);
  max-width:none; text-wrap:balance;
}
@media (min-width:1024px){
  .story__body{ column-count:2; column-gap:48px; }
  .pull-quote{ column-span:all; }
}
.values{ display:grid; gap:var(--gutter); grid-template-columns:1fr; }
.value-tile{ position:relative; overflow:hidden; overflow:clip; display:grid; gap:12px; min-height:240px; align-content:end; }
.value-tile__letter{
  position:absolute; top:-.12em; inset-inline-end:.06em; font-family:var(--font-display); font-weight:800;
  font-size:clamp(7rem, 5rem + 8vw, 12rem); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px var(--line); pointer-events:none;
}
.value-tile h3,.value-tile p{ position:relative; }
.value-tile p{ color:var(--grey); }
@media (min-width:768px){ .values{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.commitment{ border-radius:var(--r-tile); padding:clamp(24px, 2rem + 2vw, 64px); display:grid; gap:20px; justify-items:start; }
.commitment h2{ color:#fff; font-weight:800; font-size:var(--fs-h2); }
.commit-panel{ width:100%; background:var(--ink); border-radius:var(--r-card); padding:clamp(20px, 1rem + 1.5vw, 40px); }
.commit-panel__text{ color:#fff; font-size:var(--fs-lead); line-height:1.6; }
.commit-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); }
.commit-stats__num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height:1; color:var(--brand-300); font-variant-numeric:tabular-nums; }
.commit-stats__label{ color:var(--mist); margin-top:8px; }
@media (min-width:768px){ .commit-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* 16. Sheets / checklists / callouts ======================================= */
.sheets{ display:grid; gap:var(--s-7); }
.sheet{ max-width:960px; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden; overflow:clip; }
.sheet__ref{
  display:flex; align-items:center; min-height:40px; padding:8px var(--card-pad); max-width:none;
  background:var(--sand); border-bottom:2px dashed var(--line); color:var(--grey-700);
}
.sheet__body{ padding:var(--card-pad); display:grid; gap:16px; }
.sheet__body h2,.sheet__body h3{ font-size:var(--fs-h3); line-height:1.2; font-weight:700; }
.sheet__body p{ color:var(--grey); }
.sheet__actions{ display:flex; flex-wrap:wrap; gap:12px; padding:0 var(--card-pad) var(--card-pad); }
.checklist{ margin-top:8px; }
.checklist li{ position:relative; padding-inline-start:24px; margin-bottom:12px; font-weight:500; color:var(--ink); break-inside:avoid; -webkit-column-break-inside:avoid; }
.checklist li::before{ content:""; position:absolute; inset-inline-start:0; top:.55em; width:10px; height:10px; border-radius:3px; background:var(--brand-500); }
@media (min-width:768px){ .checklist{ columns:2; column-gap:40px; } }
.callout{ max-width:960px; border-radius:var(--r-tile); padding:var(--card-pad); background:var(--brand-50); display:grid; gap:12px; justify-items:start; }
.callout h3{ color:var(--ink); }
.callout p{ color:var(--ink); }

/* 17. FAQ ================================================================== */
.faq-head{ max-width:16ch; }
.faq-list{ max-width:880px; margin-inline:auto; margin-top:var(--s-7); border-bottom:1px solid var(--line); }
.faq{ border-top:1px solid var(--line); }
.faq summary{
  display:flex; align-items:baseline; gap:20px; min-height:64px; padding-block:20px;
  cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq__num{ color:var(--brand-700); flex:none; width:36px; }
.faq__q{ flex:1; font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); line-height:1.25; color:var(--ink); }
.faq__icon{ width:22px; height:22px; color:var(--brand-700); align-self:center; transition:transform var(--d-2) var(--ease-out); }
.faq[open] .faq__icon{ transform:rotate(45deg); }
.faq summary:hover .faq__q{ color:var(--brand-700); }
.faq__a{ padding:0 0 24px; }
.faq__a p{ color:var(--grey); max-width:68ch; }
.faq__a p + p{ margin-top:12px; }
@media (min-width:768px){ .faq__a{ padding-inline-start:56px; } }
.help-strip{ max-width:880px; margin-inline:auto; margin-top:var(--s-7); border-radius:var(--r-card); padding:var(--card-pad); background:var(--sand); display:grid; gap:16px; }
.help-strip__text{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); line-height:1.25; color:var(--ink); }
.help-strip__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.help-strip__actions .btn{ width:100%; }
@media (min-width:768px){
  .help-strip{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .help-strip__actions .btn{ width:auto; }
}

/* 18. Forms ================================================================ */
.form{ display:grid; gap:20px; }
.form__row{ display:grid; gap:20px; }
@media (min-width:600px){ .form__row--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.field{ display:grid; gap:8px; }
.field__label{ font-weight:600; font-size:.9rem; color:var(--ink); transition:color var(--d-1) linear; }
.field__req{ color:var(--brand-700); }
.field:focus-within .field__label{ color:var(--brand-700); }
.field__input{
  width:100%; min-height:52px; padding:12px 14px; border-radius:var(--r-sm);
  border:1.5px solid var(--field); background:#fff; color:var(--ink); font-size:1rem; line-height:1.4;
  transition:border-color var(--d-1) linear, box-shadow var(--d-1) linear;
}
textarea.field__input{ min-height:140px; resize:vertical; }
select.field__input{ appearance:none; -webkit-appearance:none; padding-inline-end:44px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
.field__input:focus{ border-color:var(--brand-600); box-shadow:0 0 0 4px rgba(236,103,46,.18); }
.field__input[aria-invalid="true"]{ border-color:var(--error); }
.field__hint,.field__count{ font-size:.8125rem; color:var(--grey-700); }
.field-error{ display:flex; align-items:center; gap:6px; font-size:.875rem; font-weight:500; color:var(--error); }
.field-error svg{ width:16px; height:16px; }
.check{ display:flex; align-items:flex-start; gap:12px; min-height:44px; padding-block:10px; cursor:pointer; color:var(--ink); font-size:.95rem; }
.check input{
  appearance:none; -webkit-appearance:none; flex:none; width:22px; height:22px; margin:1px 0 0;
  border:1.5px solid var(--field); border-radius:6px; background:#fff; display:grid; place-content:center; cursor:pointer;
}
.check input::before{ content:""; width:12px; height:7px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) translate(1px,-1px) scale(0); transition:transform var(--d-1) var(--ease-spring); }
.check input:checked{ background:var(--brand-600); border-color:var(--brand-600); }
.check input:checked::before{ transform:rotate(-45deg) translate(1px,-1px) scale(1); }
.check input[aria-invalid="true"]{ border-color:var(--error); }
.hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0; }
.form__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.form__status{ min-height:1.5em; font-weight:500; color:var(--ink); }
.form__status[data-state="error"]{ color:var(--error); }
.form__status[data-state="success"]{ color:var(--wa-700); }
.form__status a{ color:var(--brand-700); text-decoration:underline; text-underline-offset:4px; }
@media (max-width:599px){ .form__actions .btn{ width:100%; } }

/* 19. Contact direct lines / enquiry / visit =============================== */
.direct-lines{ display:grid; gap:12px; width:100%; max-width:480px; margin-top:24px; }
.direct-line{
  display:flex; align-items:center; gap:14px; min-height:52px; padding-block:8px; padding-inline:10px 14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.direct-line:hover,.direct-line:focus-visible{ border-color:var(--brand-500); }
.direct-line__icon{ width:32px; height:32px; border-radius:9px; background:var(--brand-100); color:var(--brand-700); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.direct-line__icon svg{ width:18px; height:18px; }
.direct-line__label{ color:var(--grey-700); min-width:72px; }
.direct-line__value{ font-weight:600; color:var(--ink); white-space:nowrap; }
@media (min-width:1024px){
  .masthead--contact .direct-lines{ grid-column:9/13; max-width:400px; margin-top:0; align-self:center; }
}
.enquiry__grid{ display:grid; gap:24px; }
.enquiry__form-card{ background:#fff; border-radius:var(--r-tile); padding:var(--card-pad); border:1px solid var(--line); box-shadow:var(--sh-1); }
.enquiry__form-card h2{ margin-bottom:24px; }
.talk-tile{ display:grid; gap:16px; align-content:start; }
.talk-tile__row{ display:grid; gap:2px; }
.talk-tile__label{ color:var(--mist); }
.talk-tile__num{ color:#fff; font-size:1.125rem; font-weight:600; display:inline-flex; align-items:center; min-height:44px; }
.talk-tile__actions{ display:grid; gap:12px; }
.talk-tile__mail{ color:var(--brand-300); font-weight:600; text-decoration:underline; text-underline-offset:4px; display:inline-flex; align-items:center; min-height:44px; }
@media (min-width:1024px){
  .enquiry__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); align-items:start; }
  .enquiry__form-card{ grid-column:1/8; grid-row:1; }
  .talk-tile{ grid-column:9/13; grid-row:1; position:sticky; top:calc(var(--header-h) + 24px); }
}
.visit{ position:relative; }
.map-wrap{ position:relative; border-radius:var(--r-tile); overflow:hidden; overflow:clip; background:var(--sand); aspect-ratio:4/5; }
.map-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--grey-700); max-width:none; }
.visit-card{ background:#fff; border-radius:var(--r-card); box-shadow:var(--sh-2); padding:24px; margin-top:16px; display:grid; gap:10px; justify-items:start; }
.visit-card__label{ color:var(--brand-700); }
.visit-card address{ font-style:normal; color:var(--grey); }
.visit-card address span{ display:block; }
@media (min-width:768px){
  .map-wrap{ aspect-ratio:16/9; }
}
/* overlay only >= 1024: at 768 the card would overlap Google's place card (design.md 5.3 #visit fallback) */
@media (min-width:1024px){
  .visit-card{ position:absolute; inset-inline-start:24px; bottom:24px; z-index:1; max-width:360px; margin-top:0; }
}

/* 20. CTA panel ============================================================ */
.cta-panel{ border-radius:var(--r-tile); padding:clamp(28px, 1.5rem + 3vw, 80px); background:var(--ink); color:var(--mist); display:grid; gap:20px; justify-items:start; }
.cta-panel h2{ color:#fff; max-width:20ch; }
.cta-panel p{ color:var(--mist); font-size:var(--fs-lead); line-height:1.6; }
.cta-panel__actions{ display:flex; flex-direction:column; gap:12px; width:100%; margin-top:8px; }
.cta-panel__actions .btn{ width:100%; }
@media (min-width:600px){
  .cta-panel__actions{ flex-direction:row; flex-wrap:wrap; width:auto; }
  .cta-panel__actions .btn{ width:auto; }
}

/* 404 */
.not-found__links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }

/* 21. Footer =============================================================== */
.site-footer{ padding-top:clamp(56px, 3rem + 3vw, 104px); }
.footer__display{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.5rem, 6vw, 6.5rem); line-height:1;
  letter-spacing:-.03em; color:var(--ink-3); max-width:none; margin-bottom:clamp(40px, 2rem + 2vw, 72px);
  text-wrap:balance;
}
@supports (-webkit-text-stroke:1px #000){
  .footer__display{ color:var(--ink); -webkit-text-stroke:2px var(--mist); paint-order:stroke fill; }
}
.footer__grid{ display:grid; gap:40px; }
.footer__brand{ background:#fff; border-radius:var(--r-tile); padding:var(--card-pad); display:grid; gap:14px; justify-items:start; align-content:start; }
.footer__brand img{ width:180px; height:auto; }
.footer__brand p{ color:var(--grey); font-size:.95rem; }
.footer__brand .footer__po{ color:var(--grey-700); }
.footer__title{ font-family:var(--font-mono); font-weight:500; font-size:var(--fs-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brand-300); margin-bottom:12px; line-height:1.4; }
.footer__links a,.footer__contact a{ display:inline-flex; align-items:flex-start; gap:10px; min-height:40px; padding-block:8px; color:var(--mist); line-height:1.45; transition:color var(--d-1) linear; }
.footer__links a:hover,.footer__links a:focus-visible,.footer__contact a:hover,.footer__contact a:focus-visible{ color:#fff; }
.footer__contact svg{ width:18px; height:18px; margin-top:2px; color:var(--brand-300); }
.footer__contact .footer__addr span{ display:block; }
.footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin-top:clamp(40px, 2rem + 2vw, 72px); padding-block:20px 28px; border-top:1px solid rgba(255,255,255,.12);
}
.footer__copy{ font-size:.875rem; color:var(--mist); }
.back-to-top{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700; font-size:.875rem;
}
.back-to-top svg{ width:18px; height:18px; transition:transform var(--d-2) var(--ease-out); }
.back-to-top:hover svg,.back-to-top:focus-visible svg{ transform:translateY(-3px); }
.back-to-top:hover{ border-color:#fff; }
@media (min-width:768px){
  .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer__brand,.footer__col--contact{ grid-column:1/-1; }
}
@media (min-width:1024px){
  .footer__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); }
  .footer__brand{ grid-column:1/5; }
  .footer__col--explore{ grid-column:6/8; }
  .footer__col--services{ grid-column:8/10; }
  .footer__col--contact{ grid-column:10/13; }
}

/* 22. FABs ================================================================= */
.fab-stack{
  position:fixed; z-index:40; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms linear;
}
.fab-stack.is-yielding{ opacity:0; transform:translateY(16px); visibility:hidden; pointer-events:none; }
.fab{
  position:relative; width:56px; height:56px; border-radius:18px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:var(--sh-2); transition:transform var(--d-2) var(--ease-out);
}
.fab svg{ width:26px; height:26px; position:relative; z-index:1; }
.fab:hover{ transform:translateY(-2px); }
.fab:focus-visible{ outline:3px solid #fff; outline-offset:0; box-shadow:0 0 0 6px var(--ink); }
.fab--wa{ background:var(--wa); }
.fab--call{ background:var(--ink); }
.fab--wa::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--wa); opacity:0; pointer-events:none; }
.fab__tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:var(--ink); color:#fff; font-size:.8125rem; font-weight:700; white-space:nowrap;
  padding:6px 10px; border-radius:8px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--d-1) linear, visibility var(--d-1) linear;
}
.fab__tip{ display:none; }
@media (min-width:1024px){
  .fab--call{ display:none; }
  .fab__tip{ display:block; }
  .fab--wa:hover .fab__tip,.fab--wa:focus-visible .fab__tip{ opacity:1; visibility:visible; }
  #visit .container{ padding-inline-end:96px; }
}
@media (max-width:1023px){
  #enquiry .form__actions, #visit .map-wrap{ margin-bottom:156px; } /* 2x56 FABs + 12 gap + 16 offset + 16 clearance */
}
@media (max-width:767px){
  /* same FAB clearance below the testimonials (card + progress rail, then the Google review CTAs) */
  .proof__reviews{ margin-bottom:156px; }
}

/* 23. Motion (no-preference only) ========================================== */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
  @view-transition{ navigation:auto; }
  ::view-transition-old(root){ animation:vt-out 200ms var(--ease-out) both; }
  ::view-transition-new(root){ animation:vt-in 320ms var(--ease-out) both; }

  /* M1 */
  html.js .line__in{animation:line-up var(--d-4) var(--ease-out) both; animation-delay:calc(var(--li,0) * 120ms)}
  html.js .marker__svg path{animation:marker-draw 900ms var(--ease-out) both; animation-delay:650ms}
  html.js .h1--long .marker__svg path{animation-delay:calc(2 * 120ms + 650ms)}
  html.js .hero__eyebrow{ animation:fade-up var(--d-3) var(--ease-out) 150ms both; }
  html.js .hero__lead{ animation:fade-up var(--d-3) var(--ease-out) 500ms both; }
  html.js .hero__ctas{ animation:fade-up var(--d-3) var(--ease-out) 650ms both; }
  html.js .hero__call{ animation:fade-up var(--d-3) var(--ease-out) 800ms both; }

  /* M2 hero art */
  html.js .art-tile{ animation:tile-in 600ms var(--ease-out) both; animation-delay:200ms; }
  html.js .art-tile.d1{ animation-delay:235ms; }
  html.js .art-tile.d2{ animation-delay:270ms; }
  html.js .art-tile.d3{ animation-delay:305ms; }
  html.js .art-tile.d4{ animation-delay:340ms; }
  html.js .art-tile.d5{ animation-delay:375ms; }
  html.js .art-tile.d6{ animation-delay:410ms; }
  html.js .art-mark{ animation:mark-drop 900ms var(--ease-spring) 700ms both; }
  html.js .art-orbit{ animation:orbit-in 600ms var(--ease-out) 500ms both, spin 60s linear 1100ms infinite; }
  html.js .chip--glass{ animation:chip-in 600ms var(--ease-out) both, chip-float 6s ease-in-out infinite alternate; }
  html.js .chip--c1{ animation-delay:1100ms, 1700ms; }
  html.js .chip--c2{ animation-delay:1220ms, 3200ms; }
  html.js .chip--c3{ animation-delay:1340ms, 4700ms; }
  html.js .chip--c4{ animation-delay:1460ms, 6200ms; }
  html.js .glow-blob--a{ animation:blob-a 18s ease-in-out infinite alternate; }
  html.js .glow-blob--b{ animation:blob-b 18s ease-in-out infinite alternate; }
  .hero-art.is-paused,.hero-art.is-paused *{ animation-play-state:paused !important; }
  .hero-art.is-paused .chip--glass{ transition:none; }

  /* M3 reveal */
  html.js .reveal:not(.is-settled),html.js .reveal-scale:not(.is-settled),html.js .reveal-clip:not(.is-settled){
    transition:opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out), clip-path var(--d-3) var(--ease-out);
  }
  html.js .reveal:not(.is-in){ opacity:0; transform:translateY(24px); }
  html.js .reveal-scale:not(.is-in){ opacity:0; transform:scale(.96); }
  html.js .reveal-clip:not(.is-in){ clip-path:inset(0 0 100% 0); }
  html.js .masthead::after{ animation:rule-draw 900ms var(--ease-out) 300ms both; }

  /* M6 rails (JS adds .is-live while it drives --p) */
  html.js .is-live .stepper__step:not(.is-done) .stepper__node{ background:#fff; color:var(--ink); border-color:var(--line); }
  html.js .is-live .stepper__step.is-done .stepper__node{ animation:node-pop 320ms var(--ease-spring) both; }
  html.js .is-live .route__stop:not(.is-done) .route__node{ background:#fff; border-color:var(--line); }
  html.js .is-live .route__stop.is-done .route__node{ animation:node-pop 320ms var(--ease-spring) both; }

  /* M8 FAQ height */
  .faq{ interpolate-size:allow-keywords; }
  .faq::details-content{ block-size:0; overflow:clip; transition:block-size var(--d-2) var(--ease-out), content-visibility var(--d-2) allow-discrete; }
  .faq[open]::details-content{ block-size:auto; }

  /* M11 quotes */
  html.js .quote.reveal .quote__stars{ transition:clip-path 400ms var(--ease-out) 250ms; }
  html.js .quote.reveal:not(.is-in) .quote__stars{ clip-path:inset(0 100% 0 0); }
  html.js .quote.reveal .quote__icon{ transition:transform var(--d-2) var(--ease-spring) 150ms; }
  html.js .quote.reveal:not(.is-in) .quote__icon{ transform:scale(.8); }

  /* mega + mobile menu */
  html.js .mega:not([hidden]){ animation:mega-in 200ms var(--ease-out) both; }
  html.js .mobile-menu:not(.is-open){ clip-path:inset(0 0 100% 0); }
  html.js .mobile-menu .mm__item,html.js .mobile-menu .mm__lang,html.js .mobile-menu .mm__actions{ transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
  html.js .mobile-menu:not(.is-open) .mm__item,html.js .mobile-menu:not(.is-open) .mm__lang,html.js .mobile-menu:not(.is-open) .mm__actions{ opacity:0; transform:translateY(12px); }
  html.js .mobile-menu.is-open .mm__item:nth-child(2){ transition-delay:50ms; }
  html.js .mobile-menu.is-open .mm__item:nth-child(3){ transition-delay:100ms; }
  html.js .mobile-menu.is-open .mm__item:nth-child(4){ transition-delay:150ms; }
  html.js .mobile-menu.is-open .mm__item:nth-child(5){ transition-delay:200ms; }
  html.js .mobile-menu.is-open .mm__lang{ transition-delay:225ms; }
  html.js .mobile-menu.is-open .mm__actions{ transition-delay:250ms; }

  /* M12 FABs: entrance releases its fill so .is-yielding can apply; 3 pulses then stop */
  html.js .fab-stack{ animation:fab-in 500ms var(--ease-out) 800ms backwards; }
  html.js .fab--wa::after{ animation:fab-pulse 1.5s var(--ease-out) 1.2s 3 both; }
}

@keyframes line-up{from{transform:translateY(130%)}}
@keyframes marker-draw{from{stroke-dashoffset:1.1}}
@keyframes fade-up{ from{ opacity:0; transform:translateY(16px); } }
@keyframes tile-in{ from{ opacity:0; transform:scale(.6); } }
@keyframes mark-drop{ from{ opacity:0; transform:translateY(-40px) rotate(-8deg) scale(.9); } }
@keyframes orbit-in{ from{ opacity:0; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes chip-in{ from{ opacity:0; transform:translateY(16px); } }
@keyframes chip-float{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } }
@keyframes blob-a{ from{ transform:translate(0,0); } to{ transform:translate(-20px,16px); } }
@keyframes blob-b{ from{ transform:translate(0,0); } to{ transform:translate(20px,-16px); } }
@keyframes rule-draw{ from{ transform:scaleX(0); } }
@keyframes node-pop{ from{ transform:scale(.85); } }
@keyframes mega-in{ from{ opacity:0; transform:translateY(8px); } }
@keyframes fab-in{ from{ opacity:0; transform:translateY(24px); } }
@keyframes fab-pulse{ from{ transform:scale(1); opacity:.5; } to{ transform:scale(1.6); opacity:0; } }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }

/* 24. Reduced motion ======================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important;
    transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important;
  }
  .reveal,.reveal-scale,.reveal-clip,.line__in,.chip--glass{ opacity:1; transform:none; clip-path:none; }
  .art-toggle{ display:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}
html.reduce .art-toggle{ display:none; }

/* 25. No-JS fallbacks ====================================================== */
html:not(.js) .burger{ display:none; }
html:not(.js) .nav__sub-toggle{ display:none; }
html:not(.js) .art-toggle{ display:none; }
html:not(.js) .filter,html:not(.js) .filter__status{ display:none; }
html:not(.js) .mobile-menu{ display:none; }
@media (max-width:1023px){
  html:not(.js) .header__bar{ height:auto; min-height:var(--header-h); flex-wrap:wrap; padding-block:8px; }
  html:not(.js) .nav{ display:block; width:100%; order:3; }
  html:not(.js) .nav__list{ flex-wrap:wrap; }
}

/* 26. @supports fallbacks ================================================== */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header{ background:var(--paper); }
  .chip--glass{ background:#fff; }
}
@supports not (aspect-ratio:1){
  .hero-art{ height:0; padding-bottom:100%; }
  .map-wrap{ height:0; padding-bottom:125%; }
}

/* ==========================================================================
   v3 "The Zone Grid, photographed" (design-v3.md). Appended layer: it only adds
   to / overrides v2. Same rules: base CSS = final visible state, motion "before"
   states only under html.js + no-preference (27.14), photos clipped by frames.
   ========================================================================== */

/* 27.1 Tokens ============================================================== */
:root{
  --sh-3:0 2px 4px rgba(28,25,23,.06), 0 12px 24px rgba(28,25,23,.08), 0 32px 64px rgba(28,25,23,.12);
  --sh-photo:0 30px 60px -18px rgba(30,26,24,.45), 0 12px 24px -12px rgba(30,26,24,.25);
  --sh-glass:0 10px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
  --sh-lift:0 18px 40px -10px rgba(30,26,24,.28);
  --glass-light:rgba(255,255,255,.92);
  --glass-ink:rgba(30,26,24,.86);
  --glass-line:rgba(255,255,255,.16);
  --glass-blur:blur(14px) saturate(1.3);
  /* text zones sit where the ink alpha is >= .80 (headings >= 24px: >= .72) */
  --scrim-hero-lg:linear-gradient(90deg, rgba(30,26,24,.88) 0%, rgba(30,26,24,.84) 55%, rgba(30,26,24,.56) 78%, rgba(30,26,24,.36) 100%);
  --scrim-hero-sm:linear-gradient(180deg, rgba(30,26,24,.82) 0%, rgba(30,26,24,.84) 55%, rgba(30,26,24,.90) 100%);
  --scrim-warm:linear-gradient(180deg, rgba(143,57,17,0) 35%, rgba(143,57,17,.32) 100%);
  --scrim-masthead-lg:linear-gradient(90deg, rgba(30,26,24,.86) 0%, rgba(30,26,24,.82) 60%, rgba(30,26,24,.45) 100%);
  --scrim-masthead-sm:linear-gradient(180deg, rgba(30,26,24,.80), rgba(30,26,24,.88));
  --scrim-band:linear-gradient(180deg, rgba(30,26,24,.86), rgba(30,26,24,.90));
  --scrim-card:linear-gradient(180deg, rgba(30,26,24,.10) 0%, rgba(30,26,24,.55) 45%, rgba(30,26,24,.90) 100%);
  --r-photo:var(--r-tile);
  --photo-bg:#3B3430;
  --d-5:1800ms;
  --ease-photo:cubic-bezier(.2,.7,.2,1);
  --zoom-hover:1.06;
  --parallax-max:56px;
  --marquee-dur:48s;
  --quote-interval:7000ms;
}

/* 27.2 Utilities / shared photo element ===================================== */
.nowrap{ white-space:nowrap; }
.section--clip{ overflow-x:hidden; overflow-x:clip; }
.on-photo :focus-visible{ outline-color:#fff; }
.on-photo h1,.on-photo h2{ letter-spacing:-.03em; }
.on-photo h1,.on-photo h2,.on-photo p{ text-shadow:0 1px 2px rgba(0,0,0,.25); } /* decorative only */
.eyebrow--on-photo,.on-photo .eyebrow,.proof .eyebrow{ color:#fff; }
/* R4: keep the hero eyebrow on one line on small phones (≈323px of text in a 335px column at 375) */
@media (max-width:399px){
  .hero__eyebrow{ font-size:11px; letter-spacing:.04em; gap:8px; }
}
.photo{
  position:relative; margin:0; overflow:hidden; overflow:clip; isolation:isolate;
  border-radius:var(--r-photo); background:var(--photo-bg); box-shadow:var(--sh-photo);
}
.photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.photo--16x9{ aspect-ratio:16/9; }
.photo--3x2{ aspect-ratio:3/2; }
.photo--4x3{ aspect-ratio:4/3; }
.photo--4x5{ aspect-ratio:4/5; }
.photo--1x1{ aspect-ratio:1; }
/* focal points (object-position) for crops that differ from the file's aspect */
.fp-team{ object-position:38% 40%; }
.fp-visas{ object-position:45% 50%; }
.fp-docs{ object-position:40% 55%; }
.fp-pro{ object-position:62% 50%; }
.fp-mast-services{ object-position:55% 50%; }
.fp-mast-setup{ object-position:50% 45%; }
.fp-mast-visas{ object-position:45% 50%; }
.fp-mast-docs{ object-position:40% 55%; }
.fp-mast-pro{ object-position:62% 50%; }
.fp-mast-process{ object-position:50% 60%; }
.fp-mast-about{ object-position:50% 55%; }
.fp-mast-contact{ object-position:50% 40%; }

/* 27.3 Image + text split / collage ========================================= */
.split__media{ position:relative; isolation:isolate; }
.split__media .photo{ aspect-ratio:4/3; }
.split__body{ margin-top:24px; min-width:0; }
.split__tile{ display:none; }
.split__caption{
  position:absolute; inset-inline-start:24px; bottom:24px; z-index:1; /* clear of the 28px photo corner radius */
  padding:8px 12px; border-radius:var(--r-sm); background:var(--glass-light); color:var(--ink);
  box-shadow:var(--sh-2); text-shadow:none;
}
.collage{ position:relative; }
.collage__inset{ display:none; }
@media (min-width:768px){
  .split__media .photo{ aspect-ratio:16/9; max-height:440px; }
  .split__body{ margin-top:40px; }
  .split__tile{
    display:block; position:absolute; z-index:-1; width:46%; aspect-ratio:1; border-radius:var(--r-tile);
    background:var(--brand-100); bottom:-24px; inset-inline-end:-24px;
  }
  .split--media-right .split__tile{ inset-inline-end:auto; inset-inline-start:-24px; }
  .collage{ padding:0 0 14%; padding-inline-end:18%; }
  .split__media .collage__main{ aspect-ratio:4/3; max-height:none; }
  .collage__inset{
    display:block; position:absolute; inset-inline-end:0; bottom:0; width:46%;
    border:6px solid var(--paper); box-shadow:var(--sh-3);
  }
  .split__media .collage__inset{ aspect-ratio:1; max-height:none; }
}
@media (min-width:1024px){
  .split{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); align-items:start; }
  .split__body{ margin-top:0; padding-block:8px; }
  .split--media-left .split__media{ grid-column:1/6; }
  .split--media-left .split__body{ grid-column:7/13; }
  .split--media-right .split__media{ grid-column:8/13; grid-row:1; }
  .split--media-right .split__body{ grid-column:1/7; grid-row:1; }
  .split--wide.split--media-left .split__media{ grid-column:1/7; }
  .split--wide.split--media-left .split__body{ grid-column:8/13; align-self:center; }
  .split__media .photo{ max-height:none; }
  .split__media .photo--4x5{ aspect-ratio:4/5; }
  .split__media .collage__main{ aspect-ratio:4/5; }
  .split--sticky .split__media{ position:sticky; top:calc(var(--header-h) + 32px); }
}

/* Home #under-one-roof inside the split: one body column */
.split .manifesto__title{ font-size:clamp(2.1rem, 1.3rem + 2.6vw, 3.75rem); max-width:14ch; }
.split .manifesto__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; margin-top:var(--s-6); }
.split .manifesto__body,.split .manifesto__side{ grid-column:auto; }
.split .manifesto__cta{ margin-top:var(--s-5); }

/* category #services: heading + photo (sticky) left, entries as cards right */
.split--sticky .svc-group__list--solo{ margin-top:0; }
.split__body .svc-entry{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:28px var(--card-pad) var(--card-pad); box-shadow:var(--sh-1);
  transition:box-shadow var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.split__body .svc-entry::before{ top:0; inset-inline-start:var(--card-pad); }
.split__media .section-head{ margin-bottom:var(--s-6); }
@media (min-width:1024px){
  .split--sticky .svc-group__list--solo{ grid-template-columns:minmax(0,1fr); gap:24px; }
  #services .split__media .photo--4x5{ aspect-ratio:1; }
}

/* About #story body: one column (the photo takes the other) */
.split .story__body{ column-count:auto; max-width:62ch; }
.split .story__body .pull-quote{ margin:8px 0 32px; }
.approach__card{ box-shadow:var(--sh-3); }
@media (min-width:1024px){ .approach__card{ padding:40px; } }

/* 27.4 Home hero (photo) ===================================================== */
.hero--photo{ color:#fff; background:var(--ink); overflow:hidden; overflow:clip; padding-block:56px 64px; }
.hero--photo::before{ content:none; }
.hero__media{ position:absolute; inset:calc(var(--parallax-max) * -1) 0; z-index:-2; transform:translate3d(0, var(--py, 0px), 0); }
.hero__media picture,.hero__media img{ display:block; width:100%; height:100%; }
.hero__media img{ object-fit:cover; object-position:50% 40%; }
.hero__scrim{ position:absolute; inset:0; z-index:-1; background:var(--scrim-warm), var(--scrim-hero-sm); }
.hero--photo .hero__title,.hero--photo .hero__lead,.hero--photo .hero__call{ color:#fff; }
.hero--photo .hero__title{ font-weight:800; }
.hero--photo .hero__call svg{ color:var(--brand-300); }
.hero--photo .hero__call a{ color:#fff; }
.hero--photo .hero__call a:hover{ color:var(--brand-100); }
.hero--photo .marker__svg path{ stroke:var(--brand-500); opacity:.95; }
.hero--photo .hero-art-wrap{ display:none; }
@media (min-width:768px){
  .hero--photo{ padding-block:72px 80px; }
  .hero__media img{ object-position:58% 45%; }
}
@media (min-width:1024px){
  .hero--photo{ display:grid; align-items:center; min-height:min(90svh, 860px); padding-block:48px 96px; }
  .hero--photo .hero__grid{ min-height:0; }
  .hero__scrim{ background:var(--scrim-warm), var(--scrim-hero-lg); }
  .hero--photo .hero-art-wrap{ display:flex; }
}
.hero-art--glass{
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line); box-shadow:var(--sh-glass);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero-art--glass .art-tile{ fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.34); }
.hero-art--glass .art-tile--tint{ fill:rgba(236,103,46,.35); }
.hero-art--glass .art-tile--sand{ fill:rgba(255,255,255,.22); }
.hero-art--glass .art-orbit{ stroke:var(--brand-300); opacity:.8; }
.hero-art--glass .art-mark__bg{ fill:#FBF8F5; }
.hero-art--glass .glow-blob{ opacity:.6; }
.hero-art--glass .chip--glass{ background:var(--glass-light); border-color:rgba(255,255,255,.9); text-shadow:none; }

/* 27.5 Authorities marquee (M19) ============================================ */
.authorities-band{ background:var(--paper); padding-block:28px 32px; border-bottom:1px solid var(--line); }
.authorities__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.authorities__head .authorities-band__label{ margin:0; text-align:start; }
.marquee__toggle{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; flex:none;
  border-radius:var(--r-sm); background:#fff; border:1px solid var(--field);
  font-weight:500; font-size:.875rem; color:var(--grey-700);
}
.marquee__toggle svg{ width:20px; height:20px; }
.marquee__toggle:hover,.marquee__toggle:focus-visible{ border-color:var(--ink); color:var(--ink); }
/* static state (no JS / reduced motion / module failure): v2 wrapped list */
.marquee__track{ width:min(100% - 2 * var(--margin), 1280px); margin-inline:auto; }
.marquee__track > .authorities + .authorities{ display:none; }
.marquee .authority{ min-height:56px; }
/* live loop: only once the pause control works */
.marquee.is-live{
  overflow:hidden; overflow:clip;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee.is-live .marquee__track{ display:flex; gap:16px; width:max-content; margin:0; }
.marquee.is-live .authorities{ display:flex; flex-wrap:nowrap; gap:16px; flex:none; }
.marquee.is-live .authorities + .authorities{ display:flex; }
.marquee.is-live .authority{ height:56px; padding-block:0; padding-inline:10px 20px; white-space:nowrap; font-weight:600; font-size:1rem; }
@keyframes marquee{ to{ transform:translateX(calc(-50% - 8px)); } }

/* 27.6 Bento with photo cards ================================================ */
#solutions{ padding-bottom:calc(var(--section-y) * .6); }
.bento{ align-items:stretch; }
.tile--photo{
  overflow:hidden; overflow:clip; isolation:isolate; padding:0; justify-content:flex-end;
  background:var(--ink); color:var(--mist); min-height:400px; box-shadow:var(--sh-photo);
}
.tile__media{ position:absolute; inset:0; z-index:-1; }
.tile__media::after{ content:""; position:absolute; inset:0; background:var(--scrim-card); }
.tile__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.tile__glass{
  display:flex; flex-direction:column; gap:16px; margin:clamp(12px, .5rem + 1vw, 24px);
  padding:clamp(20px, 1rem + 1vw, 32px); border-radius:var(--r-card);
  background:var(--glass-ink); border:1px solid var(--glass-line); box-shadow:var(--sh-glass);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.tile--photo .tile__title,.tile--photo .tile__title a{ color:#fff; }
.tile--photo .tile__index{ color:var(--mist); }
.tile--photo .well{ background:var(--ink-3); color:var(--brand-300); }
.tile--photo .tile__list li{ color:#fff; }
.tile--photo .tile__list svg{ color:var(--brand-300); }
.tile--photo .tile__more{ color:#fff; text-decoration:underline; text-decoration-color:var(--brand-500); text-decoration-thickness:2px; text-underline-offset:5px; }
.tile--photo .tile__link:focus-visible::after,.photo-card .tile__link:focus-visible::after{ outline-offset:-4px; }
.tile--photo .tile__link:focus-visible::after{ outline-color:#fff; }
.photo-card{
  padding:0; gap:0; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-1);
  overflow:hidden; overflow:clip; isolation:isolate;
}
.photo-card__media{ position:relative; aspect-ratio:16/9; background:var(--photo-bg); overflow:hidden; overflow:clip; }
.photo-card__media img{ width:100%; height:100%; object-fit:cover; }
.photo-card__body{ display:flex; flex-direction:column; gap:16px; flex:1 1 auto; padding:var(--card-pad); }
.tile--link.photo-card:hover,.tile--link.photo-card:focus-within,.tile--link.tile--photo:hover,.tile--link.tile--photo:focus-within{ box-shadow:var(--sh-lift); }
.tile--ember-photo{ overflow:hidden; overflow:clip; isolation:isolate; }
.ember__photo{ display:none; }
@media (min-width:768px){
  .tile--photo{ min-height:440px; }
}
@media (min-width:1024px){
  .tile--photo{ min-height:560px; }
  .bento__tile--d{ grid-column:1/7; }
  .bento__tile--e{ grid-column:7/13; }
  .photo-card{ display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); }
  .photo-card__media{ aspect-ratio:auto; height:100%; min-height:240px; }
  .photo-card__body{ padding:28px; }
  .tile--ember-photo .ember__photo{
    display:block; position:absolute; top:0; inset-inline-end:0; bottom:0; width:50%; z-index:-2;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%); mask-image:linear-gradient(90deg, transparent 0%, #000 45%);
  }
  .tile--ember-photo .ember__photo img{ width:100%; height:100%; object-fit:cover; }
  .tile--ember-photo::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(90deg, #BF4E19 0%, #BF4E19 50%, rgba(191,78,25,.55) 70%, rgba(143,57,17,.35) 100%);
  }
  .tile--ember-photo > :not(.ember__photo){ position:relative; max-width:50%; }
  .tile--ember-photo .tile__actions{ flex-direction:column; align-items:flex-start; }
  .tile--ember-photo .tile__actions .btn{ flex:0 0 auto; width:min(100%, 320px); }
}

/* 27.7 Home #why photo ======================================================= */
.why__photo{ aspect-ratio:16/9; margin-top:8px; }
@media (min-width:1024px){ .why__photo{ aspect-ratio:4/3; margin-top:16px; } }

/* 27.8 Proof: photo backdrop, glass stats, testimonials carousel (M20) ======= */
.proof{ isolation:isolate; overflow:hidden; overflow:clip; background-image:none; }
.proof__media{ position:absolute; inset:-8% 0; z-index:-2; transform:translate3d(0, var(--py, 0px), 0); }
.proof__media img{ width:100%; height:100%; object-fit:cover; object-position:60% 55%; }
.proof__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(30,26,24,.90), rgba(30,26,24,.84) 40%, rgba(30,26,24,.92)); }
.proof .stat{
  background:var(--glass-ink); border:1px solid var(--glass-line); box-shadow:var(--sh-glass);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.quotes{ position:relative; }
.quotes__controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.quotes__btn{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.45); background:rgba(30,26,24,.6); color:#fff;
  transition:background-color var(--d-1) linear, color var(--d-1) linear;
}
.quotes__btn svg{ width:22px; height:22px; }
.quotes__btn:hover{ background:#fff; color:var(--ink); }
.quotes__count{ min-width:64px; text-align:center; color:var(--mist); }
.quotes__play{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; margin-inline-start:auto;
  border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.45); color:#fff; font-weight:500; font-size:.875rem;
}
.quotes__play svg{ width:20px; height:20px; }
.quotes__play:hover{ border-color:#fff; }
.quotes__viewport{ position:relative; }
.quotes__track{
  position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
  padding-block:8px 32px;
}
.quotes__track::-webkit-scrollbar{ display:none; }
.quotes__track:focus-visible{ outline-offset:-3px; }
.quote{
  display:block; margin:0; padding:clamp(28px, 1.5rem + 2vw, 56px); scroll-snap-align:center;
  background:var(--glass-ink); border:1px solid var(--glass-line); border-radius:var(--r-tile); box-shadow:var(--sh-glass);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  transition:opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
}
.quote figure{ display:grid; gap:20px; align-content:start; height:100%; }
.quote__glyph{ width:56px; height:56px; color:var(--brand-300); }
.quote blockquote p{
  color:#fff; font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem, 1rem + .9vw, 1.65rem);
  line-height:1.45; max-width:52ch; text-wrap:pretty;
}
.quote figcaption{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 14px; }
.quote__initials{
  display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border-radius:12px;
  background:var(--brand-500); color:var(--ink); font-family:var(--font-display); font-weight:800;
}
.quote__name{ color:#fff; font-weight:700; }
.quote .quote__stars{ display:flex; gap:3px; color:var(--brand-300); }
.quote .quote__stars svg{ width:18px; height:18px; }
.quotes.is-ready .quote:not(.is-current){ opacity:.45; transform:scale(.96); }
.quotes__progress{ height:2px; margin-top:4px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.quotes__progress span{ display:block; height:100%; background:var(--brand-500); transform:scaleX(0); transform-origin:left; }
@keyframes quote-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (min-width:1024px){
  /* vw, not %: a % column would resolve against the padded box and break the centring */
  .quotes__track{ grid-auto-columns:min(72vw, 860px); padding-inline:calc((100% - min(72vw, 860px)) / 2); }
}

/* 27.9 #start photo CTA panel ================================================ */
#start{ padding-top:calc(var(--section-y) * .4); }
.cta-panel{ position:relative; min-height:clamp(360px, 24vw + 200px, 480px); align-content:center; box-shadow:var(--sh-photo); }
.cta-panel__media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cta-panel__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.cta-panel:has(.cta-panel__media)::after{ content:""; position:absolute; inset:0; z-index:1; background:var(--scrim-band); pointer-events:none; }
.cta-panel[data-glow]::before{ z-index:2; }
.cta-panel > :not(.cta-panel__media){ position:relative; z-index:3; }

/* 27.10 Framed photo masthead ================================================ */
.masthead--photo{ padding-block:16px 0; }
.masthead--photo::before,.masthead--photo::after{ content:none; }
.masthead__frame{
  position:relative; isolation:isolate; overflow:hidden; overflow:clip; display:grid; align-items:end;
  min-height:clamp(380px, 30vw + 160px, 560px); border-radius:20px; background:var(--ink);
  box-shadow:var(--sh-photo); color:#fff;
}
.masthead__media{ position:absolute; inset:calc(var(--parallax-max) * -1) 0; z-index:-2; transform:translate3d(0, var(--py, 0px), 0); }
.masthead__media img{ width:100%; height:100%; object-fit:cover; }
.masthead__scrim{ position:absolute; inset:0; z-index:-1; background:var(--scrim-masthead-sm); }
.masthead--photo .masthead__grid{ padding:clamp(28px, 2rem + 2vw, 64px); }
.masthead--photo .masthead__title,.masthead--photo .masthead__lead,.masthead--photo .masthead__note{ color:#fff; }
.masthead--photo .masthead__title{ font-weight:800; }
.masthead--photo .breadcrumb li,.masthead--photo .breadcrumb li + li::before,.masthead--photo .breadcrumb [aria-current="page"]{ color:var(--mist); }
.masthead--photo .breadcrumb a{ color:#fff; text-decoration-color:rgba(255,255,255,.45); }
.masthead--photo .breadcrumb a:hover,.masthead--photo .breadcrumb a:focus-visible{ color:#fff; text-decoration-color:var(--brand-500); }
.masthead--photo .marker__svg path{ stroke:var(--brand-500); opacity:.95; }
.masthead--photo + .section{ padding-top:calc(var(--section-y) * .6); }
.masthead--photo.masthead--contact .direct-lines{ margin-top:16px; }
@media (min-width:600px){ .masthead__frame{ border-radius:var(--r-photo); } }
@media (min-width:1024px){
  .masthead--photo{ padding-block:24px 0; }
  .masthead__scrim{ background:var(--scrim-masthead-lg); }
  .masthead--photo.masthead--contact .container{ position:relative; }
  .masthead--photo.masthead--contact .masthead__copy{ grid-column:1/8; }
  .masthead--photo.masthead--contact .direct-lines{
    position:absolute; z-index:1; top:0; bottom:0; inset-inline-end:clamp(28px, 2rem + 2vw, 64px);
    width:min(380px, 34%); max-width:none; height:max-content; margin:auto 0;
  }
}

/* 27.11 Services #details strips, category #related thumbs, Process help card */
.detail-tile__media{
  align-self:stretch; aspect-ratio:16/9; margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 8px;
  border-radius:calc(var(--r-tile) - 1px) calc(var(--r-tile) - 1px) 0 0; overflow:hidden; overflow:clip; background:var(--photo-bg);
}
.detail-tile__media img{ width:100%; height:100%; object-fit:cover; }
.related__head{ display:flex; align-items:center; gap:16px; }
.related__thumb{ flex:none; width:72px; height:72px; border-radius:18px; overflow:hidden; overflow:clip; background:var(--photo-bg); box-shadow:var(--sh-1); }
.related__thumb img{ width:100%; height:100%; object-fit:cover; }
.help-card{
  max-width:880px; margin:var(--s-7) auto 0; display:grid; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-tile); box-shadow:var(--sh-3); overflow:hidden; overflow:clip;
}
.help-card__media{ aspect-ratio:16/9; background:var(--photo-bg); }
.help-card__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.help-card__body{ display:grid; gap:16px; align-content:center; padding:var(--card-pad); }
@media (min-width:768px){
  .help-card{ grid-template-columns:minmax(0,38%) minmax(0,1fr); }
  .help-card__media{ aspect-ratio:auto; height:100%; min-height:240px; }
  .help-card .help-strip__actions .btn{ width:auto; }
}

/* 27.12 Footer: quick-contact row + glow ===================================== */
.site-footer{ position:relative; isolation:isolate; overflow:hidden; overflow:clip; }
.site-footer::before{
  content:""; position:absolute; top:-20%; inset-inline-end:-15%; width:min(900px, 90vw); aspect-ratio:1; z-index:-1;
  background:var(--grad-glow); pointer-events:none;
}
.footer-quick{ display:grid; gap:12px; margin-bottom:clamp(40px, 2rem + 2vw, 72px); }
.footer-quick__card{
  display:flex; align-items:center; gap:14px; height:100%; min-height:84px; padding:20px 24px;
  background:var(--ink-2); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-card); color:#fff;
  transition:background-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.footer-quick__card:hover,.footer-quick__card:focus-visible{ background:var(--ink-3); transform:translateY(-3px); }
.footer-quick__text{ display:grid; gap:2px; min-width:0; max-width:calc(100% - 88px); }
.footer-quick__label{ color:var(--mist); }
.footer-quick__value{ color:#fff; font-weight:600; line-height:1.4; }
@media (min-width:768px){ .footer-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){
  .footer-quick{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .footer-quick__card{ padding:18px; }
  .footer-quick__text{ max-width:none; }
  .footer-quick__value{ font-size:.95rem; }
}

/* 27.13 Hover zoom (M17) ===================================================== */
.photo-card img,.tile--photo .tile__media img,.related__thumb img,.detail-tile__media img{ transform:scale(1); }

/* 27.14 Motion M15-M21 (no-preference only) ================================== */
@media (prefers-reduced-motion: no-preference){
  /* M15 hero photo settle (runs once) */
  html.js .hero__media img{ animation:photo-settle var(--d-5) var(--ease-photo) both; }
  /* M17 hover zoom */
  .photo-card img,.tile--photo .tile__media img,.related__thumb img,.detail-tile__media img{ transition:transform var(--d-3) var(--ease-photo); }
  .photo-card:focus-within img,.tile--photo:focus-within .tile__media img,.related__tile:focus-within .related__thumb img,.detail-tile:focus-within .detail-tile__media img{ transform:scale(var(--zoom-hover)); }
  .tile--link.photo-card:hover,.tile--link.tile--photo:hover,.split__body .svc-entry:hover{ transform:translateY(-4px); }
  /* M18 photo reveal */
  html.js .reveal-photo{ transition:clip-path var(--d-4) var(--ease-out); }
  html.js .reveal-photo img{ transition:transform var(--d-4) var(--ease-out); }
  html.js .reveal-photo:not(.is-in){ clip-path:inset(6% 6% 6% 6% round var(--r-photo)); }
  html.js .reveal-photo:not(.is-in) img{ transform:scale(1.08); }
  /* M19 marquee */
  .marquee.is-live .marquee__track{ animation:marquee var(--marquee-dur) linear infinite; }
  .authorities-band:hover .marquee__track,.authorities-band:focus-within .marquee__track,.marquee.is-paused .marquee__track{ animation-play-state:paused; }
  /* M20 testimonials progress */
  .quotes__progress.is-running span{ animation:quote-progress var(--quote-interval) linear both; }
  .quotes__progress.is-held span{ animation-play-state:paused; }
  /* M21 footer line wipe */
  html.js .reveal-wipe{ transition:clip-path 1200ms var(--ease-io); }
  html.js .reveal-wipe:not(.is-in){ clip-path:inset(0 98% 0 0); } /* not 100%: IO ignores zero-area targets */
}
@media (prefers-reduced-motion: no-preference) and (hover: hover){
  .photo-card:hover img,.tile--photo:hover .tile__media img,.related__tile:hover .related__thumb img,.detail-tile:hover .detail-tile__media img{ transform:scale(var(--zoom-hover)); }
}
@keyframes photo-settle{ from{ transform:scale(1.08); opacity:.001; } to{ transform:scale(1); opacity:1; } }

/* 27.15 Reduced motion / no JS / fallbacks =================================== */
@media (prefers-reduced-motion: reduce){
  [data-parallax]{ transform:none !important; }
  .hero__media img,.reveal-photo img{ transform:none; opacity:1; }
  .reveal-photo,.reveal-wipe{ clip-path:none; }
  .marquee__toggle,.quotes__play,.quotes__progress{ display:none !important; }
  .quotes.is-ready .quote:not(.is-current){ opacity:1; transform:none; }
}
html.reduce .marquee__toggle,html.reduce .quotes__play,html.reduce .quotes__progress{ display:none !important; }
html.reduce .quotes.is-ready .quote:not(.is-current){ opacity:1; transform:none; }
html:not(.js) .quotes__controls,html:not(.js) .quotes__progress,html:not(.js) .marquee__toggle{ display:none; }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .tile__glass,.proof .stat,.quote{ background:var(--ink-2); }
  .hero-art--glass{ background:rgba(30,26,24,.6); }
}
@supports not (aspect-ratio:1){
  .photo--4x5{ height:0; padding-bottom:125%; }
  .photo--4x3{ height:0; padding-bottom:75%; }
  .photo--1x1{ height:0; padding-bottom:100%; }
  .photo img{ position:absolute; inset:0; }
}

/* 27.16 Opening hours, social links, Google review CTAs ======================= */
/* All three sit on ink surfaces (footer, contact talk tile, proof band) */
.hours{ display:grid; gap:12px; min-width:0; }
.hours__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.hours__title{ display:inline-flex; align-items:center; gap:8px; margin:0; }
.hours__title svg{ width:16px; height:16px; flex:none; }
.hours--tile .hours__title{ color:var(--brand-300); }
.hours__status{
  display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; max-width:none;
  font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.06em; text-transform:uppercase; line-height:1.4;
  color:var(--mist); background:rgba(255,255,255,.06); border:1px solid var(--glass-line);
}
.hours__status[hidden]{ display:none; }
.hours__dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-300); flex:none; }
.hours__status.is-open{ color:#9BE7B8; border-color:rgba(155,231,184,.4); }
.hours__status.is-open .hours__dot{ background:#3FD07A; box-shadow:0 0 0 3px rgba(63,208,122,.22); }
.hours__list{ display:grid; margin:0; border-top:1px solid var(--glass-line); }
.hours__row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 16px; padding-block:10px; border-bottom:1px solid var(--glass-line); }
.hours__row dt{ color:var(--mist); font-size:.95rem; }
.hours__row dd{ margin:0; color:#fff; font-weight:600; font-size:.95rem; font-variant-numeric:tabular-nums; }
.hours__row--closed dd{ color:var(--mist); font-weight:500; }
.hours__row.is-today dt{ color:#fff; font-weight:600; }
.hours__row.is-today dt::after{ content:"Today"; margin-inline-start:8px; font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-300); }
.hours--footer{ margin-top:28px; }
.hours--footer .hours__title{ margin-bottom:0; }
.hours--footer .hours__row{ padding-block:8px; }

.social{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.social__link{
  width:44px; height:44px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--mist); background:rgba(255,255,255,.04); border:1px solid var(--glass-line);
  transition:color var(--d-1) linear, border-color var(--d-1) linear, background-color var(--d-1) linear, transform var(--d-2) var(--ease-out);
}
.social__link svg{ width:20px; height:20px; }
.social__link:hover,.social__link:focus-visible{ color:#EC672E; border-color:#EC672E; background:rgba(236,103,46,.1); transform:translateY(-2px); }
.social__link:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.social--footer{ margin-top:24px; }

.talk-tile .hours{ padding-top:16px; border-top:1px solid var(--glass-line); }
.talk-tile .hours__list{ border-top:0; }
.talk-tile__follow{ display:grid; gap:12px; justify-items:start; padding-top:16px; border-top:1px solid var(--glass-line); }
.talk-tile__review{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:4px; transition:color var(--d-1) linear; }
.talk-tile__review svg{ width:18px; height:18px; color:var(--brand-300); flex:none; }
.talk-tile__review:hover,.talk-tile__review:focus-visible{ color:var(--brand-300); text-decoration-color:currentColor; }

.proof__reviews{ margin-top:var(--s-7); display:grid; gap:16px; justify-items:center; text-align:center; }
.proof__reviews-label{ display:inline-flex; align-items:center; gap:8px; color:#fff; margin:0; }
.proof__reviews-label svg{ width:16px; height:16px; color:var(--brand-300); }
.proof__reviews-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%; }
@media (max-width:599px){ .proof__reviews-actions .btn{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .social__link:hover,.social__link:focus-visible{ transform:none; } }
html.reduce .social__link:hover,html.reduce .social__link:focus-visible{ transform:none; }
.check__link{ color:var(--brand-700); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.check__link:hover,.check__link:focus-visible{ color:var(--brand-600); }
.footer__legal{ display:inline-flex; align-items:center; min-height:44px; margin-inline-start:8px; color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:4px; }
.footer__legal:hover,.footer__legal:focus-visible{ color:var(--brand-300); text-decoration-color:currentColor; }

/* 27.17 Privacy policy (long-form legal page) ================================= */
.legal{ display:grid; gap:32px; }
.legal__toc{ background:#fff; border:1px solid var(--line); border-radius:var(--r-tile); padding:24px; box-shadow:var(--sh-1); }
.legal__toc-title{ margin-bottom:12px; }
.legal__toc-list{ list-style:none; margin:0; padding:0; counter-reset:toc; display:grid; }
.legal__toc-list li{ counter-increment:toc; }
.legal__toc-list a{
  display:flex; gap:12px; align-items:baseline; min-height:40px; padding-block:8px; color:var(--ink); line-height:1.4;
  border-bottom:1px solid var(--line); transition:color var(--d-1) linear;
}
.legal__toc-list li:last-child a{ border-bottom:0; }
.legal__toc-list a::before{ content:counter(toc, decimal-leading-zero); font-family:var(--font-mono); font-size:var(--fs-mono); color:var(--brand-700); flex:none; }
.legal__toc-list a:hover,.legal__toc-list a:focus-visible{ color:var(--brand-700); }
.legal__body{ max-width:72ch; min-width:0; font-size:1.0625rem; line-height:1.75; color:var(--ink); }
.legal__body p,.legal__body li{ max-width:none; }
.legal__body a{ color:var(--brand-700); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.legal__body a:hover,.legal__body a:focus-visible{ color:var(--brand-600); }
.legal__intro{ font-size:var(--fs-lead); line-height:1.6; color:var(--grey); padding-bottom:24px; border-bottom:1px solid var(--line); }
.legal__section{ padding-block:32px 8px; scroll-margin-top:calc(var(--header-h) + 24px); }
.legal__section + .legal__section{ border-top:1px solid var(--line); }
.legal__section h2{ display:flex; align-items:baseline; gap:14px; font-size:clamp(1.375rem, 1.1rem + 1vw, 1.75rem); margin-bottom:16px; }
.legal__num{ font-family:var(--font-mono); font-size:.875rem; font-weight:500; color:var(--brand-700); flex:none; }
.legal__body ul{ display:grid; gap:10px; margin:0 0 16px; padding-inline-start:1.25rem; }
.legal__body ul li::marker{ color:var(--brand-500); }
.legal__body p + p,.legal__body ul + p{ margin-top:12px; }
.legal__card{ font-style:normal; display:grid; gap:4px; margin-top:16px; padding:20px 24px; background:var(--sand); border-radius:var(--r-card); border-inline-start:4px solid var(--brand-500); }
.legal__contact{ list-style:none; padding-inline-start:0 !important; }
@media (min-width:1024px){
  .legal{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); align-items:start; }
  .legal__toc{ grid-column:1/5; position:sticky; top:calc(var(--header-h) + 24px); }
  .legal__body{ grid-column:5/13; }
}

/* 28. RTL / Arabic (ar/ pages: <html lang="ar" dir="rtl">) ================== */
/* Direction keys off [dir="rtl"], typography off html[lang="ar"] (the EN switcher link itself carries lang="ar").
   Physical left/right elsewhere in this file are logical properties, so LTR output is unchanged. */

/* 28.1 Language switcher (both languages) */
.lang-switch--header{ display:none; }
@media (min-width:1024px){
  .lang-switch--header{
    display:inline-flex; align-items:center; flex:none; min-height:44px; padding:0 10px; margin-inline-start:8px;
    font-weight:600; font-size:.95rem; color:var(--ink); border-radius:8px;
    text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:6px;
  }
  .lang-switch--header:hover,.lang-switch--header:focus-visible{ color:var(--brand-700); text-decoration-color:currentColor; }
}
.mm__lang{ margin:0; }
.lang-switch--menu{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 16px;
  border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.2); color:#fff; font-weight:700;
}
.lang-switch--menu svg{ width:20px; height:20px; color:var(--brand-300); }
.lang-switch--menu:hover,.lang-switch--menu:focus-visible{ background:var(--ink-2); }
.lang-switch[lang="ar"]{ font-family:'IBM Plex Sans Arabic','Segoe UI',Tahoma,'Geeza Pro','Noto Sans Arabic',system-ui,sans-serif; }
.lang-switch[lang="en"]{ font-family:'DM Sans','Segoe UI',system-ui,sans-serif; }

/* 28.2 Arabic typography */
html[lang="ar"]{
  --font-display:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --font-body:'IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
  --font-mono:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --fs-display:clamp(2.25rem, 1.3rem + 4vw, 4.75rem);
  --fs-h1:clamp(2rem, 1.4rem + 2.8vw, 3.75rem);
}
/* letter-spacing breaks Arabic joining; uppercase has no meaning in Arabic */
html[lang="ar"] *,html[lang="ar"] *::before,html[lang="ar"] *::after{ letter-spacing:normal !important; text-transform:none !important; }
html[lang="ar"] body{ line-height:1.85; }
html[lang="ar"] h1,html[lang="ar"] .masthead__title,html[lang="ar"] .hero__title{ line-height:1.3; }
html[lang="ar"] h2{ line-height:1.35; }
html[lang="ar"] h3,html[lang="ar"] h4{ line-height:1.5; }
html[lang="ar"] .lead,html[lang="ar"] .masthead__lead,html[lang="ar"] .hero__lead{ line-height:1.8; }
html[lang="ar"] .label-mono,html[lang="ar"] .eyebrow,html[lang="ar"] .breadcrumb li,html[lang="ar"] .footer__title{ font-size:.875rem; font-weight:600; }
html[lang="ar"] .quote blockquote p{ line-height:1.75; }
html[lang="ar"] .footer__display{ line-height:1.3; }
html[lang="ar"] .mm__link{ line-height:1.4; }
html[lang="ar"] .chip--glass{ white-space:nowrap; } /* hero art chips stay on one line */
/* the stat numbers carry dir="ltr" so "3000+" reads as in English; keep them on the start (right) edge */
html[lang="ar"] .stat__num,html[lang="ar"] .stats-tile__num,html[lang="ar"] .commit-stats__num{ text-align:right; }
html[lang="ar"] a[href^="tel:"],html[lang="ar"] bdi{ white-space:nowrap; }
[dir="rtl"] .field__input[type="tel"],[dir="rtl"] .field__input[type="email"]{ text-align:right; }
/* the JS counter writes "n / 2000": keep it in reading order (not "2000 / n") at the inline start */
[dir="rtl"] .field__count{ direction:ltr; text-align:right; }
/* h1 line-split: room for Arabic ascenders / descenders inside the clipped lines */
html[lang="ar"] .line{ padding-block:.18em .32em; margin-block:-.18em -.32em; }
/* a floated first letter would break the joined Arabic word */
html[lang="ar"] .story__body > p:first-child::first-letter{ float:none; font:inherit; color:inherit; margin:0; }
html[lang="ar"] .hours__row.is-today dt::after{ content:"\0627\0644\064A\0648\0645"; } /* "اليوم" */
.quote__translated{ color:var(--mist); font-size:.75rem; }

/* 28.3 Mirroring where no logical property exists */
[dir="rtl"] .ico-dir{ transform:scaleX(-1); }
[dir="rtl"] .btn-primary:hover .ico-dir,[dir="rtl"] .btn-primary:focus-visible .ico-dir,
[dir="rtl"] .link-arrow:hover .ico-dir,[dir="rtl"] .link-arrow:focus-visible .ico-dir,
[dir="rtl"] .tile--link:hover .tile__more .ico-dir,[dir="rtl"] .tile--link:focus-within .tile__more .ico-dir{ transform:translateX(-4px) scaleX(-1); }
[dir="rtl"] .tile--link:hover .tile__index,[dir="rtl"] .tile--link:focus-within .tile__index{ transform:translateX(-6px); }
[dir="rtl"] .nav__link::after{ transform-origin:right; }
[dir="rtl"] .masthead::after{ transform-origin:right; }
[dir="rtl"] .marker__svg{ transform:scaleX(-1); }
[dir="rtl"] .quotes__progress span{ transform-origin:right; }
[dir="rtl"] select.field__input{ background-position:16px 50%, 22px 50%; }
[dir="rtl"] .filter{
  -webkit-mask-image:linear-gradient(270deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(270deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
/* hero / masthead scrims: darkest behind the copy, which sits on the right in RTL */
html[dir="rtl"]{
  --scrim-hero-lg:linear-gradient(270deg, rgba(30,26,24,.88) 0%, rgba(30,26,24,.84) 55%, rgba(30,26,24,.56) 78%, rgba(30,26,24,.36) 100%);
  --scrim-masthead-lg:linear-gradient(270deg, rgba(30,26,24,.86) 0%, rgba(30,26,24,.82) 60%, rgba(30,26,24,.45) 100%);
}
@media (min-width:768px){
  [dir="rtl"] .hero__media img{ object-position:42% 45%; }
}
@media (min-width:1024px){
  [dir="rtl"] .stepper__fill,[dir="rtl"] .route__fill{ transform-origin:right; }
  [dir="rtl"] .tile--ember-photo .ember__photo{
    -webkit-mask-image:linear-gradient(270deg, transparent 0%, #000 45%); mask-image:linear-gradient(270deg, transparent 0%, #000 45%);
  }
  [dir="rtl"] .tile--ember-photo::after{
    background:linear-gradient(270deg, #BF4E19 0%, #BF4E19 50%, rgba(191,78,25,.55) 70%, rgba(143,57,17,.35) 100%);
  }
}
/* FABs bottom-left in RTL (the #visit container reserves the inline-end side, i.e. the left) */
[dir="rtl"] .fab-stack{ right:auto; left:max(16px, env(safe-area-inset-left)); }
[dir="rtl"] .fab__tip{ right:auto; left:calc(100% + 12px); }
/* the embedded Google map is an LTR document (zoom controls + attribution on its right edge),
   so the overlaid visit card stays bottom-LEFT in RTL too, clear of those controls */
@media (min-width:1024px){
  [dir="rtl"] .visit-card{ inset-inline-start:auto; left:24px; }
}

/* 28.4 RTL motion */
@keyframes marquee-rtl{ to{ transform:translateX(calc(50% + 8px)); } }
@media (prefers-reduced-motion: no-preference){
  /* mobile menu: the sheet is revealed from the left edge */
  html.js[dir="rtl"] .mobile-menu:not(.is-open){ clip-path:inset(0 100% 0 0); }
  [dir="rtl"] .marquee.is-live .marquee__track{ animation-name:marquee-rtl; }
  html.js[dir="rtl"] .reveal-wipe:not(.is-in){ clip-path:inset(0 0 0 98%); }
  html.js[dir="rtl"] .quote.reveal:not(.is-in) .quote__stars{ clip-path:inset(0 0 0 100%); }
}