/* =========================================================
   Anar Events — site.css (v2.11, night palette, canopy round-2 fixes, 3 Nov 2026)
   One file. Mobile first. No grid hairlines anywhere.
   Latin: TT Ramillas Bold only (TRIAL font: buy before launch).
   Persian: Noto Naskh Arabic (self-hosted, Arabic subset), never italic/tracked/caps.
   ========================================================= */

/* ---------- Fonts (both preloaded; font-display:swap so slow connections never see blank text; the Latin fallback is
   Georgia Bold size-adjusted to Ramillas' average advance and vertical metrics, so the swap barely reflows) ---------- */
/* TRIAL file: replace with licensed TT Ramillas Bold before launch (same file name; see docs/BUILD-NOTES.md) */
@font-face{font-family:"TT Ramillas";src:url("../fonts/TTRamillas-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* the metric-matched fallback (fontTools: Ramillas avg advance .484em vs Georgia Bold .530em -> size-adjust 91.4%; ascent 1040 / descent 350 per 1000) */
@font-face{font-family:"Ramillas Fallback";src:local("Georgia Bold"),local("Georgia-Bold"),local("Georgia");font-weight:700;font-style:normal;size-adjust:91.4%;ascent-override:113.8%;descent-override:38.3%;line-gap-override:0%}
/* Noto Naskh Arabic: the Arabic-subset variable file from Google Fonts (one woff2 covers 400-700), self-hosted so no cross-origin CSS blocks render */
@font-face{font-family:"Noto Naskh Arabic";src:url("../fonts/NotoNaskhArabic-arabic.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------- Tokens ---------- */
:root{
  /* night palette (priority) */
  --night:#1B221E;     /* cypress night: page ground, video tint */
  --deep:#121714;      /* deep night: bands */
  --parch:#F9F6F0;     /* silk parchment: text on night */
  --gold:#C99E5C;      /* zaffaran gold: logo, accents, the one button */
  --ruby:#6D1A24;      /* Kashan ruby: secondary accent, hover */
  --sage:#5D625F;      /* captions on parchment */
  --stone:#B9B3A6;     /* captions on night */
  /* day palette (light interludes only) */
  --cream:#F0E6D5;
  --brown:#432617;
  --red:#9E1B32;

  --tint:rgba(27,34,30,.58);
  --font-latin:"TT Ramillas","Ramillas Fallback",Georgia,"Times New Roman",serif;
  --font-fa:"Noto Naskh Arabic",Tahoma,serif;

  --s1:8px;--s2:16px;--s3:32px;--s4:64px;
  --container:1140px;
  --narrow:760px;
  --gutter:20px;
  --header-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.9s;
}
@media (min-width:768px){
  :root{--gutter:clamp(40px,6vw,96px);--header-h:88px}
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
html.lenis{scroll-behavior:auto}
html.reduced{scroll-behavior:auto}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* font-synthesis:none (round 5): the body is 700 and the Persian 400, so no browser ever fakes a bold or an oblique
   during a font swap or in a fallback state (Ramillas Bold and Noto Naskh are served as drawn) */
body{margin:0;background:var(--night);color:var(--parch);font-family:var(--font-latin);font-weight:700;font-size:18px;line-height:28px;overflow-x:hidden;font-synthesis:none}
img,video,svg{display:block;max-width:100%}
/* the hidden attribute always wins (the inline icon sprite is an svg[hidden]; the display:block above must not show it) */
[hidden]{display:none}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* sections focused programmatically by scrollToEl() / the skip link (tabindex="-1") show no ring; the skip link itself keeps its focus style */
[tabindex="-1"]:focus{outline:none}
.on-light :focus-visible,.on-light:focus-visible{outline-color:var(--ruby)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--s2);top:-80px;z-index:100;background:var(--gold);color:var(--night);padding:var(--s1) var(--s2);border-radius:999px}
.skip-link:focus{top:var(--s2)}
::selection{background:var(--gold);color:var(--night)}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-weight:700;line-height:1.1}
.h-display{font-size:clamp(40px,7vw,80px);line-height:1.02}
h2{font-size:clamp(30px,4vw,44px);line-height:1.12}
h3{font-size:clamp(22px,2.6vw,28px);line-height:1.2}
.eyebrow{font-size:14px;line-height:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.on-light .eyebrow{color:var(--ruby)}
.caption{font-size:14px;line-height:20px;color:var(--stone)}
.on-light .caption{color:var(--sage)}
.lede{font-size:clamp(20px,2.2vw,24px);line-height:1.45}
.fa,[lang="fa"]{font-family:var(--font-fa);font-style:normal!important;letter-spacing:0!important;text-transform:none!important;font-weight:400;font-size:115%;line-height:1.7;direction:rtl;unicode-bidi:isolate;font-synthesis:none}
/* English only, with Persian accents (the owner's rule, round 6): no Hindi, Punjabi or Urdu script anywhere, so there
   is no Indic or Urdu font rule; the Hindu and Sikh ceremony titles carry their English kicker instead */
.fa--big{font-size:clamp(26px,4.2vw,40px);line-height:1.5}
.fa--title{font-size:clamp(34px,5.4vw,60px);line-height:1.4}
.measure{max-width:38em}
.muted{color:var(--stone)}
.on-light .muted{color:var(--sage)}
/* the inner pages' spacing rhythm in three utilities and one heading modifier (round 5: no inline margin styles,
   so a style-src CSP without 'unsafe-inline' drops nothing): .h2--tight = a section h2 under its eyebrow */
.h2--tight{margin:8px 0 32px}
.mt-16{margin-top:16px}
.mt-32{margin-top:32px}
.mt-48{margin-top:48px}
/* a text container nested in a page container keeps its measure, not a second gutter */
.container .container--text{padding-inline:0}
/* a small note (16/24) under a lede or a paragraph */
.note{font-size:16px;line-height:24px}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--text{max-width:calc(var(--narrow) + 2*var(--gutter))}
main{position:relative;z-index:2;display:block}
.section{position:relative;padding-block:clamp(64px,9vh,80px)}
.section--tight{padding-block:clamp(48px,7vh,88px)}
.pair{display:grid;gap:var(--s1)}
@media (min-width:768px){
  .pair{grid-template-columns:1fr 1fr;align-items:baseline}
  .pair .fa{text-align:right}
}
.band{background:var(--deep)}
.on-light{background:var(--parch);color:var(--night)}
.on-light.on-light--day{background:var(--cream);color:var(--brown)}
/* the light interludes are framed by the brand's 2px gold rule top and bottom (the pageband and the footer carry their own: no doubled rule at those seams) */
.on-light{border-block:2px solid var(--gold)}
.pageband + .on-light{border-top:0}
main > .on-light:last-child{border-bottom:0}

/* ---------- Devices ---------- */
/* the kashida line: 2px gold, drawn on by scroll (.kashida-draw) */
.kashida{width:100%;height:2px;overflow:visible;display:block}
.kashida path{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:butt}
.kashida--short{width:min(320px,70vw)}
.on-light .kashida path{stroke:var(--ruby)}
/* ---------- Buttons: ONE gold button, ruby on hover ---------- */
.btn{display:inline-block;padding:14px 30px;border:2px solid var(--gold);background:var(--gold);color:var(--night);font-weight:700;line-height:1;letter-spacing:.02em;border-radius:999px;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn:hover{background:var(--ruby);border-color:var(--ruby);color:var(--parch);transform:translateY(-2px)}
.btn:focus-visible{outline-color:var(--parch)}
.on-light .btn:focus-visible{outline-color:var(--ruby)}
.btn--sm{padding:10px 20px;font-size:16px}
.link{border-bottom:2px solid var(--gold);padding-bottom:2px;transition:color .3s,border-color .3s}
.link:hover{color:var(--gold);border-color:var(--ruby)}
.on-light .link{border-color:var(--ruby)}
.on-light .link:hover{color:var(--ruby)}

/* ---------- Header (shared) ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:50;height:var(--header-h);color:var(--parch);transition:background .4s,box-shadow .4s}
.js .site-header{position:fixed}
.site-header__inner{position:relative;height:100%;display:flex;align-items:center;gap:var(--s2);padding-inline:clamp(16px,3vw,40px)}
/* the small gold logo sits in the CENTRE of the bar on every page (nav links left, icons + Inquire right): absolutely
   centred, so the flex row around it never pushes it. It fades in (.4s) once the page is scrolled; always on inner
   pages. On the canopy home the hero logo morphs up into this slot (canopy.css / canopy.js block 6): the slot is
   empty until the morph docks, then this logo shows in the same place */
.nav-home{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.nav-home img{width:100%;height:auto}
.site-header--solid .nav-home,.site-header.is-scrolled .nav-home{opacity:1;visibility:visible}
/* phones: a 12px gap; the centred logo shrinks below 370px so toggle + Pause (left) and Inquire (right) never meet it
   (round 6: 100vw − 250px; 320px: 70px logo, 125–195, the left group ends at 104 and Inquire starts at 244) */
@media (max-width:768px){.site-header__inner{gap:12px}.nav-home{width:min(120px,calc(100vw - 250px))}.nav-right{min-width:0}}
/* 320px (and enlarged text): the bar's fixed items (toggle 44 + Pause 36 + Inquire) leave the logo ~70px; the button loses 6px of padding and nothing clips */
@media (max-width:360px){.site-header__inner{padding-inline:12px}.btn--sm{padding:10px 14px}}
/* the links are visible by default, on every page and at every width. Through 1024px (phones and tablets: the centred
   logo and the left links would meet at 769–1024) they collapse into the drawer ONLY once site.js has bound the toggle
   (html.nav-ready): until then (no JS, a failed or slow script request) they sit in a deep-night strip under the bar
   with the toggle hidden (it has no handler yet), so the three inner pages are always reachable; the inline html.js
   class alone never hides them. The NAV threshold is 1025px here and in site.js navQuery; the motion / video threshold
   (769px, desktopQuery) is a different thing and stays where it is */
.site-nav{display:block}
.site-nav ul{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,36px)}
/* the no-JS / failed-script fallback (round 5): the whole header sits in NORMAL FLOW (relative, not fixed), the bar
   keeps its height and the three links wrap under it as a deep-night strip, so the strip reserves its own height
   and the page (the inner pages' top padding, the canopy hero) starts below it; nothing is covered. The contact
   rows and the فارسی note stay in the enhanced drawer only (the footer carries them for everyone) */
@media (max-width:1024px){
  html:not(.nav-ready) .site-header{position:relative;height:auto}
  html:not(.nav-ready) .site-header__inner{flex-wrap:wrap;height:auto;min-height:var(--header-h)}
  html:not(.nav-ready) .site-header__inner > *:not(.site-nav):not(.nav-home):not(.motion-toggle__note){margin-top:calc((var(--header-h) - 44px) / 2);margin-bottom:calc((var(--header-h) - 44px) / 2)}
  html:not(.nav-ready) .nav-home{top:calc(var(--header-h) / 2)}
  html:not(.nav-ready) .site-nav{flex:0 0 100%;order:10;margin:0 calc(-1 * clamp(16px,3vw,40px));background:var(--deep);border-top:2px solid var(--gold);padding:var(--s2) var(--gutter)}
  html:not(.nav-ready) .site-nav__contact,html:not(.nav-ready) .site-nav__fa{display:none}
  html:not(.nav-ready) .nav-toggle{visibility:hidden}
  html:not(.nav-ready) .page-top{padding-top:0}
  html.nav-ready .site-nav{display:none}
}
/* while canopy.js measures the header slot (block 6): no transition can be mid-flight on the read */
.site-header.is-measuring,.site-header.is-measuring *{transition:none!important}
/* ---------- Line icons: one inline SVG sprite per page (<symbol> phone / WhatsApp / mail / Instagram, 24-unit
   boxes), drawn in the brand's simple line style: gold, 1.5 stroke, round joins; used in the header, the drawer and
   the footer (no icon library) ---------- */
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* drawer-only lines (through 1024px): the contact rows (phone, WhatsApp, email, each with its icon) and the "فارسی ·
   coming soon" note (the bar carries no فارسی label at any width; the footer repeats the note) */
.site-nav__contact,.site-nav__fa{display:none}
@media (max-width:1024px){
  .site-nav__contact{display:grid;gap:var(--s1);margin-top:var(--s1)}
  .site-nav .site-nav__contact a{display:inline-flex;align-items:center;gap:12px;font-size:18px;line-height:28px;color:var(--parch)}
  .site-nav__contact .icon{color:var(--gold)}
  .site-nav__fa{display:block;color:var(--stone);font-size:16px;line-height:24px;margin-top:var(--s2)}
  .site-nav__fa .fa{font-size:18px}
}
.site-nav a{display:inline-block;padding-block:4px;border-bottom:2px solid transparent;transition:border-color .3s,color .3s;letter-spacing:.02em}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.site-header.nav-open .site-nav .site-nav__contact a{font-size:18px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:clamp(8px,1.5vw,20px)}
/* the two gold line icons right of the nav, left of Inquire: a handset (tel:) and an envelope (mailto:), 20px glyphs
   in 44px hit areas, parchment on hover / focus; the accessible name is "Call (925) 263-9949" / "Email …" at every
   width (the visually-hidden "Call " + the number span, which is itself visually hidden below 1200px, plus a title).
   Phones: the bar (toggle + Pause + logo + Inquire) has no room for them at 360px, so they live in the drawer */
.nav-icon{display:none;width:44px;height:44px;place-items:center;color:var(--gold);transition:color .3s;border-radius:50%}
.nav-icon:hover,.nav-icon:focus-visible{color:var(--parch)}
@media (min-width:769px){.nav-icon{display:inline-grid}.nav-icon + .nav-icon{margin-left:-6px}}
.nav-icon__num{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* wide desktops (≥1200px): the number shows beside the handset, 14px gold (parents call before they type; on the home
   page the footer's number is four screens down), parchment with the icon on hover; the hit area grows with it */
@media (min-width:1200px){
  .nav-icon--tel{grid-auto-flow:column;width:auto;gap:6px;padding:0 12px 0 10px;border-radius:22px}
  .nav-icon__num{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;font-size:14px;line-height:20px;letter-spacing:.02em;color:inherit}
}
.nav-toggle{width:44px;height:44px;display:grid;place-items:center;margin-left:-8px}
.nav-toggle__bar{display:block;width:24px;height:2px;background:currentColor;position:relative;transition:background .2s}
.nav-toggle__bar::before,.nav-toggle__bar::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform .3s}
.nav-toggle__bar::before{top:-8px}.nav-toggle__bar::after{top:8px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{transform:translateY(-8px) rotate(-45deg)}
/* mobile drawer: solid deep cypress under a 2px gold top rule, capped at the viewport (minus the bar) and scrollable
   inside (data-lenis-prevent on the nav keeps Lenis off its wheel/touch), so every link is reachable in a short
   landscape viewport or with enlarged text; site.js closes it on a click outside, on focus leaving the header and on Escape */
html.nav-ready .site-header.nav-open .site-nav{display:block;position:absolute;top:var(--header-h);left:0;right:0;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;background:var(--deep);border-top:2px solid var(--gold);padding:var(--s3) var(--gutter) var(--s4)}
.site-header.nav-open .site-nav ul{flex-direction:column;gap:var(--s2)}
.site-header.nav-open .site-nav a{font-size:26px}
/* solid once scrolled, and on inner pages, with a 2px gold rule (.35) along its lower edge: the editorial edge where
   the bar cuts across the painted canopy (a box-shadow, so the bar's height and the drawer's offset never change) */
.site-header--solid,.site-header.is-scrolled{background:rgba(27,34,30,.96);box-shadow:0 2px 0 rgba(201,158,92,.35)}
/* phones: fully solid once scrolled (no backdrop blur runs there, so the 4% bleed would show text ghosts behind the bar) */
@media (max-width:768px){.site-header.is-scrolled{background:var(--night)}}
/* the open drawer's bar is the same solid deep cypress as the drawer (after the scrolled rules, so it wins while scrolled) */
.site-header.nav-open{background:var(--deep)}
/* the blur only on pointer desktops: a fixed element with a backdrop filter is re-composited on every scrolled frame.
   There the bar is .985 opaque (round 7: at .96 the parchment statement and the captions scrolling under it showed as
   a pale smear beside the small gold logo); .96 stays only where the blur is off */
@media (min-width:769px) and (hover:hover){
  @supports (backdrop-filter:blur(8px)){.site-header--solid,.site-header.is-scrolled{background:rgba(27,34,30,.985);backdrop-filter:blur(8px)}
    /* the open drawer's deep bar still wins (769–1024 with a pointer) */
    .site-header.nav-open{background:var(--deep)}}
}
/* the full desktop header (links left, the 150px centred logo, icons + Inquire + Pause right) from 1025px; 769–1024
   keeps the toggle, the drawer and the 120px logo (verified 820×1180, 1024×768, 1025: nothing meets the logo) */
@media (min-width:1025px){
  .nav-toggle{display:none}
  .nav-home{width:150px}
}
/* the morphing logo (canopy home): a fixed copy of the gold SVG, transformed by canopy.js from the hero logo's rect to
   the header slot's rect (translate + scale about its top-left corner); shown only while the morph is between its
   ends. Inner pages carry no .logo-morph */
.logo-morph{position:fixed;left:0;top:0;z-index:51;pointer-events:none;visibility:hidden;transform-origin:0 0}
.logo-morph img{display:block;height:auto;max-width:none}
html.logo-morphing .logo-morph{visibility:visible;will-change:transform}
.page-top{padding-top:var(--header-h)}

/* ---------- HERO (index first screen, approved 02:05) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--night);color:var(--parch)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--night)}
/* the tint grades the loop toward the palette: a lighter cypress wash deepening downwards (.34 -> .66) plus a 6% warm
   gold wash, so the footage keeps its tonal separation; the contrast behind the logo and the descriptor comes from
   the halo (.hero__halo, canopy.css), not from the whole frame (the mp4 is untouched) */
.hero__tint{position:absolute;inset:0;background:linear-gradient(rgba(27,34,30,.34),rgba(27,34,30,.66));pointer-events:none}
.hero__tint::after{content:"";position:absolute;inset:0;background:rgba(201,158,92,.06)}
.hero__deepen{position:absolute;inset:0;background:var(--night);opacity:0;pointer-events:none}
/* logo with the soft cypress halo behind it (a static radial gradient: no filter:blur) */
.hero__mark{position:absolute;left:50%;top:28%;width:min(51vw,980px);transform:translateX(-50%)}
.hero__halo{position:absolute;left:50%;top:50%;width:150%;height:220%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(27,34,30,.6),transparent 70%);pointer-events:none}
.hero__logo{position:relative;margin:0;line-height:0}
.hero__logo img{width:100%;height:auto}
/* the soft night shadow at every width: the line sits on moving video, and a bright frame can pass under it */
.hero__line{position:relative;margin:clamp(12px,1.6vh,20px) auto 0;text-align:center;color:var(--parch);font-size:clamp(14px,1.15vw,16px);line-height:1.5;letter-spacing:.04em;opacity:.92;text-wrap:balance;text-shadow:0 1px 12px rgba(27,34,30,.9)}
.hero__place{display:block}
/* no SCROLL cue anywhere: on desktop it printed over the painted foliage, on phones it read as the Pause button's label; the canopy draws the eye down */
/* the brand line paired with its Persian twin, bottom right: English in Ramillas 14px caps (.12em), the Persian beside it in parchment */
.hero__tag{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(14px,2.6vh,28px);display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:4px 14px;color:var(--parch);text-align:right}
.hero__tag > span:first-child{font-size:14px;line-height:20px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hero__tag .fa{font-size:22px;line-height:1.4}
@media (max-width:768px){
  .hero__mark{width:78vw;top:30%}
  .hero__halo{width:170%;height:250%}
  .hero__line{font-size:14px;padding-inline:4px}
  /* the tag pair sits on painted leaves: the same shadow as .hero__line */
  .hero__tag{bottom:calc(24px + env(safe-area-inset-bottom));text-shadow:0 1px 12px rgba(27,34,30,.9)}
  .hero__tag .fa{font-size:18px}
  /* phones: a bottom cypress ramp to solid night, so the canopy's open middle sits on night, not on the footage
     (the video's bright table and chairs showed through at the bottom of screen 1) */
  .hero__tint{background:linear-gradient(rgba(27,34,30,.42) 0%,rgba(27,34,30,.72) 60%,var(--night) 100%)}
}

/* ---------- Floating leaves (two places; static under reduced motion) ---------- */
/* each leaf is its own 220x250 crop (leaf-1 / leaf-3, ~9 KB each, cut from src-assets/tree/leaves-float.png), not a sprite sheet */
.leaf{position:absolute;z-index:0;width:220px;height:250px;background:no-repeat center/220px 250px;pointer-events:none;opacity:.9}
.leaf--1{background-image:url("../tree/leaf-1.webp")}
.leaf--3{background-image:url("../tree/leaf-3.webp")}
@media (max-width:768px){.leaf{transform:scale(.6);transform-origin:top left}}

/* ---------- The two service options (How we work #you-get): no top rules; spacing carries the structure ---------- */
.options{display:grid;gap:var(--s3)}
@media (min-width:768px){.options{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.options > li{display:grid;gap:var(--s1);align-content:start}
.options h3{font-size:clamp(20px,2.2vw,24px)}
.options .option__when{color:var(--gold);font-size:14px;line-height:20px;letter-spacing:.06em;text-transform:uppercase}
.options p,.options ul{color:var(--stone);font-size:16px;line-height:24px}
/* the one core-scope line stays visible in parchment; the operational bullets sit in a native <details> ("What is included") */
.options .option__scope{color:var(--parch);font-size:18px;line-height:28px}
.options ul{display:grid;gap:4px}
.options ul li{padding-left:18px;position:relative}
.options ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--gold)}
.option__more{margin-top:var(--s1)}
.option__more summary{cursor:pointer;list-style:none;display:inline-flex;gap:8px;align-items:baseline;color:var(--gold);font-size:14px;line-height:20px;letter-spacing:.1em;text-transform:uppercase;padding:4px 0}
.option__more summary::-webkit-details-marker{display:none}
.option__more summary::after{content:"+"}
.option__more[open] summary::after{content:"\2013"}
.option__more summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.option__more ul{margin-top:var(--s2)}
/* the third card (partial / multi-event planning, quoted the same way): the full row under the two, so the three
   read as three ways to work with us (round 5: it was a muted footnote) */
.options > li.option--wide{grid-column:1 / -1;max-width:38em}
/* the "with either option" lists: 64px between one list and the next eyebrow, 24px under an eyebrow that heads one */
.eyebrow + .you-get{margin-top:24px}
.you-get + .eyebrow{margin-top:64px}
/* the seasonal note's eyebrow sits 8px over its line */
.seasonal .eyebrow{margin-bottom:8px}
/* the owner-input price line in the FAQ ("Full planning from $X · …"): hidden until filled, then a plain run of the answer */
.faq__from{display:inline}
.faq__from[hidden]{display:none}
/* the ceremony sections (Weddings): "Details we confirm with your family", the longer ritual description under the
   coordination paragraphs, in the same type as the text around it */
.tradition__more{margin-top:var(--s2)}
.tradition__more > p:first-of-type{margin-top:var(--s2)}

/* ---------- Form: a 2px gold top rule and a quiet .55 night surface by default; the canopy home strips both (canopy.css) so the roots show through ---------- */
.form{display:grid;gap:var(--s3);background:rgba(18,23,20,.55);border:0;border-top:2px solid var(--gold);padding:clamp(20px,4vw,48px)}
.form__row{display:grid;gap:var(--s3)}
/* two equal columns that can shrink (minmax(0,1fr)), so a long placeholder never widens one, with a 48–64px column gap
   so the two gold underlines (email, phone) read as two inputs, never one long rule */
@media (min-width:600px){.form__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,5vw,64px)}}
.field{display:grid;gap:var(--s1);min-width:0}
.field label{font-size:16px;line-height:22px;color:var(--parch)}
/* persistent helper text under a label ("Couple or parent names"), linked with aria-describedby */
.field__help{font-size:14px;line-height:20px;color:var(--stone);margin-top:-4px}
/* inputs in the underline style (editorial, like the kashida): no perimeter box, a 2px gold rule at .7 (opaque enough to read against the night fill) under a light deep-night fill (.35, round 7: the .55 fills read as heavy dark blocks over the roots); focus = the full gold underline and a deeper fill (no 1px hairlines anywhere) */
.field input,.field textarea,.field select{font:inherit;font-weight:700;color:var(--parch);background:rgba(18,23,20,.35);border:0;border-bottom:2px solid rgba(201,158,92,.7);border-radius:2px 2px 0 0;padding:12px 14px;width:100%;min-width:0;min-height:48px;transition:border-color .3s,background-color .3s}
/* a field that failed validation (site.js: the `invalid` event, captured): aria-invalid on the control, the gold
   underline turns ruby, and a persistent .field__error line (linked by aria-describedby) names the problem until the
   value changes; the native bubble still shows, this stays */
.field [aria-invalid="true"]{border-bottom-color:var(--ruby)}
.field__error{font-size:14px;line-height:20px;color:#E8A2AB;margin-top:-2px}
.field__error:empty{display:none}
/* placeholders in stone (#B9B3A6 on the deep input ground: ~8:1); the one-line inputs carry theirs at 16px, like the other secondary text */
.field input::placeholder,.field textarea::placeholder{color:var(--stone);opacity:1}
.field input::placeholder{font-size:16px}
/* keyboard focus: a visible 2px gold ring 3px out (the global ring, kept), plus the full gold underline and the deeper fill */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-bottom-color:var(--gold);background:rgba(27,34,30,.8)}
.field select{color-scheme:dark}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;cursor:pointer}
.field select option{background:var(--deep);color:var(--parch)}
/* success / error region (aria-live) */
.form__status{font-size:16px;line-height:24px;padding:var(--s2);border-top:2px solid var(--gold);color:var(--parch)}
/* the empty live region takes no row (no stray grid gap under the button); site.js fills it and it appears */
.form__status[hidden],.form__status:empty{display:none}
.form__status.is-error{border-top-color:var(--ruby)}
.form__status.is-wait{color:var(--stone)}
.form__status:focus{outline:none}
/* 150px is room for a first message; it can be pulled taller (vertical only) to review a longer one */
.field textarea{min-height:150px;resize:vertical}
.form__note{font-size:14px;line-height:20px;color:var(--stone)}
.form__status a{color:var(--parch)}

/* ---------- Footer (deep night band, owner's layout, round 3): three columns on one baseline at container width,
   72px top / bottom, 48px gaps. 1 the wordmark + one line; 2 "Contact" with icon rows (phone, WhatsApp, email);
   3 "Follow" (Instagram) + the Persian line right-aligned. Then a 2px gold rule (.35; no hairlines anywhere) and the two-column bottom row,
   with the language line as one quiet centred line under it. Phones: one column, 32px gaps, 200px wordmark ---------- */
.site-footer{background:var(--deep);color:var(--parch);border-top:2px solid var(--gold);padding-block:56px 40px;position:relative;z-index:2}
.site-footer__grid{display:grid;gap:var(--s3);align-items:start}
@media (min-width:768px){
  .site-footer{padding-block:72px}
  .site-footer__grid{grid-template-columns:1.2fr 1fr 1fr;gap:48px}
}
/* the footer mark is a quiet sign-off (240px, 200px on phones): the hero is the one display-size appearance of the logo */
.site-footer__logo{width:min(100%,200px);height:auto}
@media (min-width:768px){.site-footer__logo{width:min(100%,240px)}}
.site-footer__tag{margin-top:var(--s2);font-size:13px;line-height:20px;letter-spacing:.04em;color:rgba(249,246,240,.8);text-wrap:balance;max-width:30em}
.site-footer__eyebrow{font-size:12px;line-height:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2)}
.site-footer address{font-style:normal}
.site-footer__list{display:grid;gap:12px}
.site-footer__list a{display:inline-flex;align-items:center;gap:10px;font-size:16px;line-height:24px;transition:color .3s}
.site-footer__list a:hover,.site-footer__list a:focus-visible{color:var(--gold)}
.site-footer__list .icon{width:18px;height:18px;color:var(--gold)}
/* the Persian line: one line, gold, right-aligned at every width */
.site-footer__fa{margin-top:var(--s3);font-size:18px;line-height:1.7;color:var(--gold);text-align:right;white-space:nowrap}
.site-footer__bottom{margin-top:48px;padding-top:var(--s3);border-top:2px solid rgba(201,158,92,.35);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s2);font-size:13px;line-height:20px;color:rgba(249,246,240,.7)}
/* parchment .72 (round 6): 12px at .6 over --deep sat at ~4.3:1; .72 clears 5.5:1 and keeps the line quiet */
.site-footer__lang{margin-top:var(--s2);font-size:12px;line-height:18px;color:rgba(249,246,240,.72);text-align:center;text-wrap:balance}
/* "فارسی · coming soon" rides the same quiet line */
.site-footer__soon{display:inline;margin-left:6px;white-space:nowrap}
.site-footer__soon .fa{font-size:14px}

/* ---------- Ghost buttons: the "How we work +" tab, the header "Inquire" while another filled button is on screen, and "Pause motion" ---------- */
.ghost{background:transparent;border:2px solid var(--gold);color:var(--parch);transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),opacity .3s}
.ghost:hover,.ghost:focus-visible{background:var(--ruby);border-color:var(--ruby);color:var(--parch)}
.ghost:focus-visible{outline:2px solid var(--parch);outline-offset:3px}
/* the tab: one slim vertical tab at the right edge, mid-height, on every screen size; a solid night
   fill (so it reads as a night object over the parchment sections too) with the 2px gold border;
   hidden (slides out + fades, site.js) while the hero / page band, #inquire or the footer is in view,
   while the phone drawer is open, and on phones while the page scrolls down */
.hww-tab{position:fixed;z-index:60;right:0;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);letter-spacing:.06em;padding:20px 12px;border-radius:0 2px 2px 0;border-left:0;background-color:var(--night);
  /* a soft night shadow on its left edge, so the tab stands off the painted bark on the home page */
  box-shadow:-4px 0 16px rgba(18,23,20,.6)}
html:not(.panel-ready) .hww-tab{display:none}
.hww-tab.is-hidden{transform:translate(110%,-50%) rotate(180deg);opacity:0;pointer-events:none}
/* phones: an explicit 36px width (measured 34px rendered at 390 before: 2px border + 8px padding each side + the 16px
   line; the label "How we work +" is 134px tall and scrolls nowhere), so every clearance below derives from 36 */
@media (max-width:768px){.hww-tab{width:36px;padding:14px 8px;font-size:13px;line-height:16px}}
/* phones (inner pages, 20px gutter): the tab is 36px wide at mid-height, so EVERY content container it can sit over
   (section heads, jump links, notes, lists: the whole .container, round 5) carries 24px of right clearance on top
   of the gutter (44px); the photo figures pull the 24px back so the slots stay centred on the page. The band at the
   top hides the tab on phones. The canopy home's gutter is topped up in canopy.css */
@media (max-width:768px){
  main .container{padding-right:calc(var(--gutter) + 24px)}
  .tradition__media,.story__photos{margin-right:-24px}
}
/* Pause motion / Play motion: a 36px round control docked IN the header bar on every screen size (the last item of
   .site-header__inner: at the right beside Inquire on desktop, beside the menu toggle on phones via flex order), so it
   never covers text, inputs or the footer and needs no scroll-hide. The accessible name is the fixed aria-label
   "Pause motion" and aria-pressed="true" means paused, so the name never changes. */
.motion-toggle{position:relative;flex:0 0 auto;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;letter-spacing:0;background-color:var(--night)}
/* the hit area is 44px (an invisible ring 4px outside the 36px visual, WCAG 2.5.5 like the toggle and the icons) */
.motion-toggle::after{content:"";position:absolute;inset:-4px;border-radius:50%}
/* the slot is reserved before site.js binds the control (no header shift when it lands); OS reduced motion hides it ([hidden]) */
.motion-toggle[hidden]{display:none}
html:not(.motion-ready) .motion-toggle{visibility:hidden}
@media (max-width:768px){.nav-toggle{order:-2}.motion-toggle{order:-1}}
/* the glyph is an inline SVG background (two gold bars = pause, a gold triangle = play), never a font glyph */
.motion-toggle::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='2' y='1' width='3.6' height='12' fill='%23C99E5C'/%3E%3Crect x='8.4' y='1' width='3.6' height='12' fill='%23C99E5C'/%3E%3C/svg%3E") center/contain no-repeat}
.motion-toggle[aria-pressed="true"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1.2 12.6 7 3 12.8z' fill='%23C99E5C'/%3E%3C/svg%3E");margin-left:2px}
.motion-toggle__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hww-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);opacity:0;transition:opacity .4s}
.hww-backdrop[hidden]{display:none}
.hww-backdrop.is-on{opacity:1}
/* the panel is the scrollable element: data-lenis-prevent (HTML) keeps Lenis off its wheel/touch events, overscroll-behavior:contain keeps the page still */
/* the phone sheet's top corners are 2px (round 6: a 12px rounded sheet read as a generic app modal, not the brand's
   crisp editorial geometry) */
.hww-panel{position:fixed;z-index:80;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--night);color:var(--parch);padding:var(--s3) var(--s3) var(--s4);border-top:2px solid var(--gold);border-radius:2px 2px 0 0;transform:translateY(100%);transition:transform .55s var(--ease)}
.hww-panel[hidden]{display:none}
.hww-panel.is-open{transform:translateY(0)}
@media (min-width:768px){
  .hww-panel{left:auto;top:0;bottom:0;width:min(540px,92vw);max-height:none;border-top:0;border-left:2px solid var(--gold);border-radius:0;padding:var(--s4);transform:translateX(100%)}
  .hww-panel.is-open{transform:translateX(0)}
}
.hww-panel__close{position:absolute;top:var(--s2);right:var(--s2);width:44px;height:44px;display:grid;place-items:center;font-size:28px;line-height:1;border-radius:50%;color:var(--gold)}
.hww-panel__close:hover{background:rgba(201,158,92,.14)}
.hww-panel h2{margin:var(--s1) 0 var(--s3)}
.hww-steps{display:grid;gap:var(--s2);counter-reset:step;margin-bottom:var(--s3)}
.hww-steps li{display:grid;grid-template-columns:44px 1fr;gap:var(--s2);padding-top:var(--s1)}
.hww-steps li::before{counter-increment:step;content:"0" counter(step);color:var(--gold)}
.hww-steps h3{font-size:20px;line-height:26px;margin-bottom:4px}
.hww-steps p{font-size:16px;line-height:24px;color:var(--stone)}
.hww-panel__foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
/* the phone line: the tel: link and the WhatsApp link, plain, on their own line under the two actions (parents call before they type) */
.hww-panel__phone{flex:0 0 100%;color:var(--stone);font-size:16px;line-height:24px}
.hww-panel__phone a{transition:color .3s}
.hww-panel__phone a:hover{color:var(--parch)}
/* the open phone drawer or the open panel locks the page scroll (site.js syncInert) */
body.panel-open{overflow:hidden}

/* ---------- Inner page band ---------- */
.pageband{position:relative;overflow:hidden;background:var(--deep);padding-block:clamp(56px,10vh,120px) clamp(40px,7vh,80px);border-bottom:2px solid var(--gold)}
.pageband .container{position:relative;z-index:1}
/* one static crop of the painted tree (leaf-3) hanging from the band's top-right corner on every inner page, behind
   the text column and never over it: the eyebrow sits at the left and the Persian title (right-aligned) starts
   below the crop's reach, and the "How we work +" tab (mid-viewport) never covers the corner; shown from 1000px
   (hidden on phones and small tablets, where the title would meet it). site.js leaves .leaf--static alone */
.pageband .leaf{display:none;left:auto;right:-50px;top:-40px;z-index:0;opacity:.8;transform:scale(.6) rotate(200deg);transform-origin:50% 50%}
@media (min-width:1000px){.pageband .leaf{display:block}}
.pageband__title{display:grid;gap:var(--s2)}
@media (min-width:768px){.pageband__title{grid-template-columns:1fr 1fr;align-items:end}.pageband__title .fa{text-align:right}}
.pageband .lede{margin-top:var(--s3);color:var(--stone)}

/* ---------- Weddings page ---------- */
/* the jump links under the band: one row of gold text links to the six ceremony sections (no boxes, no rules) */
.jump{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:var(--s1) 20px;padding-top:clamp(24px,4vh,40px);font-size:16px;line-height:24px}
.jump__label{color:var(--stone);font-size:14px;line-height:20px;letter-spacing:.14em;text-transform:uppercase;flex:0 0 100%;text-align:center}
.jump a{color:var(--gold);border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .3s}
.jump a:hover{border-bottom-color:var(--gold)}
@media (min-width:768px){.jump__label{flex:0 0 auto;margin-right:var(--s1)}}
/* the quiet call line under the jump row (round 6): the home's .inquire__call, centred: 16/24 stone, the links in
   parchment on a 2px gold .45 underline (full gold on hover / focus), no button */
.jump__call{margin-top:var(--s2);text-align:center;color:var(--stone);font-size:16px;line-height:24px;text-wrap:balance}
.jump__call a{color:var(--parch);border-bottom:2px solid rgba(201,158,92,.45);padding-bottom:2px;transition:border-color .3s,color .3s}
.jump__call a:hover,.jump__call a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.tradition+.tradition{padding-top:clamp(48px,8vh,100px)}
.tradition__grid{display:grid;gap:var(--s3)}
@media (min-width:900px){
  .tradition__grid{grid-template-columns:1fr 1fr;align-items:start;gap:var(--s4)}
  .tradition--flip .tradition__grid > .tradition__text{order:2}
}
/* a kicker over a ceremony title ("Hindu ceremonies" / "Sikh ceremony"), 8px above it; the title's right cell then
   carries the script accent like the other sections */
.tradition__text > .eyebrow{margin-bottom:var(--s1)}
/* round 8: a wrapping flex row, not two equal grid halves. The h2 takes the whole text-column width it needs and the
   Persian accent sits at the right end of the same baseline when both fit; when they do not, the accent drops to
   its own line beneath the heading (still right-aligned), so a ceremony title never stacks in a half-width cell.
   A title with no accent (Haldi & Pheras, Anand Karaj) is simply the full-width h2 */
.tradition__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);margin-bottom:var(--s3)}
.tradition__title > h2{flex:0 1 auto;min-width:0}
.tradition__title .fa{margin-left:auto;text-align:right}
@media (min-width:600px){.tradition__title .fa,.tradition__title .eyebrow{color:var(--gold)}}
.tradition__text p+p{margin-top:var(--s2)}
.tradition__media{margin:0}
.tradition__media .slot{overflow:hidden;background:var(--deep);max-width:480px;margin-inline:auto;aspect-ratio:4/5}
/* lazy images reserve their box on phones: the slot carries the ratio, and the img repeats it as a fallback should its height ever resolve to auto */
.tradition__media .slot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.tradition__media figcaption{margin-top:var(--s1);text-align:center}
.seasonal{border-top:2px solid var(--gold);background:rgba(18,23,20,.6);padding:var(--s3)}
.seasonal p+p{margin-top:var(--s2)}

/* ---------- How we work page ---------- */
.steps{position:relative;padding-left:44px}
.steps__list{display:grid;gap:var(--s4)}
.steps__line{position:absolute;left:11px;top:0;width:2px;height:100%}
/* a sage base line at once, the gold .track-line overlay draws with scroll (site.js block 5, [data-track]) */
.steps__line path{fill:none;stroke:var(--sage);stroke-opacity:.35;stroke-width:2;vector-effect:non-scaling-stroke}
.steps__line.track-line path{stroke:var(--gold);stroke-opacity:1}
.step{position:relative;display:grid;gap:var(--s1)}
/* the line is 2px at left:11px (centre 12px) inside the 44px padding, so the 14px dot sits at -39px (centre 12px) */
.step__dot{position:absolute;left:-39px;top:10px;width:14px;height:14px;border-radius:50%;background:var(--sage);transform-origin:center}
.step__n{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.step h3{font-size:clamp(24px,3vw,34px)}
.step .fa{text-align:left;color:var(--gold)}
.step p{color:var(--parch)}
/* the short labelled points under Consultation and Proposal (guest needs · parent involvement · decision approvals ·
   date reservation): a gold label, the point in parchment, a gold dash at the left (the options' bullet device) */
.step__points{display:grid;gap:var(--s1);margin-top:var(--s1)}
.step__points li{position:relative;padding-left:18px;color:var(--parch)}
.step__points li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--gold)}
.step__points strong{color:var(--gold)}
.faq{display:grid;gap:var(--s1);border-top:2px solid var(--ruby);padding-top:var(--s2)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s2) 0;font-size:20px;line-height:28px;display:flex;justify-content:space-between;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ruby);flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq .faq__a{padding:0 0 var(--s3);max-width:38em}
.you-get{display:grid;gap:var(--s3) var(--s3)}
@media (min-width:768px){.you-get{grid-template-columns:1fr 1fr}}
.you-get li{padding-top:0}
.you-get li strong{display:block;color:var(--gold)}
.you-get li span{color:var(--stone);font-size:16px;line-height:24px}

/* ---------- About page ---------- */
.letter{font-size:clamp(20px,2.4vw,28px);line-height:1.45;display:grid;gap:var(--s2)}
.letter__sign{color:var(--ruby);font-size:18px}
/* the founder bio slot under the letter (owner input: bracketed placeholders until Medi writes the lines) */
.letter__bio{margin-top:var(--s3);padding-top:var(--s2);border-top:2px solid var(--ruby);max-width:34em;display:grid;gap:var(--s1);font-size:18px;line-height:28px;color:var(--night)}
.letter__bio[hidden]{display:none}
.letter__bio .letter__proof{color:var(--ruby);font-size:16px;line-height:24px}
.story__photos{display:grid;gap:var(--s3);margin-top:var(--s3)}
@media (min-width:768px){.story__photos{grid-template-columns:repeat(3,1fr);align-items:end}}
.story__photos figure{margin:0}
.story__photos .slot{overflow:hidden;background:var(--deep);aspect-ratio:3/4}
.story__photos img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.story__photos figcaption{margin-top:var(--s1)}
/* the three promises: no top rules (the gold numbers and the spacing carry the structure) */
.promise{display:grid;gap:var(--s3)}
.promise li{display:grid;grid-template-columns:48px 1fr;gap:var(--s2);font-size:clamp(20px,2.2vw,26px);line-height:1.4}
.promise li b{color:var(--gold)}
.behaviour{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr;margin-top:var(--s4)}
@media (min-width:768px){.behaviour{grid-template-columns:repeat(4,1fr)}}
.behaviour li{font-size:16px;line-height:24px;padding-top:0;color:var(--stone)}
.behaviour li strong{display:block;color:var(--parch)}

/* ---------- Reveal: content is visible by default. Targets are hidden ONLY under html.anim-ready,
   which site.js adds after GSAP + ScrollTrigger initialised; if that init throws, nothing is hidden. ---------- */
.anim-ready .reveal{opacity:0;transform:translateY(24px)}
.anim-ready .reveal-img{transform:scale(1.02)}
.anim-ready .stagger > *{opacity:0;transform:translateY(16px)}
.reduced .reveal,.reduced .stagger > *{opacity:1;transform:none}
.reduced .reveal-img{transform:none}
/* keyboard focus inside a reveal target: site.js marks the animated ancestors .is-revealed at once */
.anim-ready .reveal.is-revealed,.anim-ready .reveal-img.is-revealed,.anim-ready .stagger.is-revealed > *,.anim-ready .stagger > .is-revealed{opacity:1!important;transform:none!important}
/* without motion the track is complete: gold line, gold dots */
.reduced .track-line path,html:not(.anim-ready) .track-line path{stroke-dashoffset:0!important}
.reduced .track-dot,html:not(.anim-ready) .track-dot{background:var(--gold)}
.reduced *, .reduced *::before, .reduced *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
/* Pause (round 8): the buttons stay in place on hover (no lift at all, not an instant one); the colour change stays */
.reduced .btn:hover,.reduced .btn:focus-visible{transform:none}

/* ---------- Reduced motion: everything visible, nothing scrubs ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .anim-ready .reveal,.anim-ready .stagger > *{opacity:1;transform:none}
  .anim-ready .reveal-img{transform:none}
  .track-line path{stroke-dashoffset:0!important}
  .track-dot{background:var(--gold)}
  /* round 8: no spatial hover effect either (the button lift; the canopy home's photo scale is in canopy.css) */
  .btn:hover,.btn:focus-visible{transform:none}
}