/* ============================================================
   Viewsetter — the whole site's design system
   Palette sampled from the client's own logo file.
   ============================================================ */

:root{
  /* canvas + surfaces */
  --ink:#0E2338;
  --ink-deep:#081524;
  --panel:#16304A;
  --bone:#F4EEE5;
  --bone-2:#E9DFD1;
  /* small brass text on cream: 5.5:1 on bone, 4.8:1 on bone-2 (design audit D3, 13 October 2026).
     The bright gold stays for navy, where it reads at 6.2:1. */
  --label:#80581C;
  --sand:#D9C7B2;

  /* accent, in rare doses only */
  --gold:#C89A4F;
  --gold-hi:#DFB86E;
  --gold-mute:#8A6E3C;

  /* type colours */
  --text-primary:#F2EBE0;
  --text-secondary:#A7B6C6;
  --ink-on-bone:#12283F;
  --ink-on-bone-2:#51606F;

  /* motion tokens */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.16,1);
  --dur:.62s;

  /* the hero's legibility system, inverted: navy type on a warm veil */
  --tshadow:0 1px 2px rgba(248,244,237,.95),0 3px 14px rgba(248,244,237,.8),0 12px 48px rgba(248,244,237,.85);
  --tshadow-dark:0 1px 2px rgba(5,10,18,.9),0 3px 12px rgba(5,10,18,.7),0 10px 44px rgba(5,10,18,.75);

  --rail:clamp(18px,4vw,56px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink-on-bone);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(16px,1.02vw,18px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .7s var(--ease);
}
body.lit{opacity:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:300;line-height:1.06;letter-spacing:-.015em;margin:0}
p{margin:0}
button{font:inherit;color:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--text-primary);padding:14px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--ink-on-bone);outline-offset:3px;border-radius:2px}
.sec--ink :focus-visible,.sec--ink-deep :focus-visible,.foot :focus-visible,.on-ink :focus-visible,.hero :focus-visible,.static-hero :focus-visible{outline-color:var(--gold)}

.wrap{width:min(var(--maxw),100% - var(--rail)*2);margin-inline:auto}
.mono{font-family:"DM Mono",ui-monospace,SFMono-Regular,monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}

/* ============================================================
   The environment layer: one venetian shadow raking the page
   ============================================================ */
.env{
  position:fixed;inset:-10% -10% -10% -10%;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(
    172deg,
    rgba(14,35,56,.052) 0px,
    rgba(14,35,56,.052) 3px,
    rgba(14,35,56,0) 3px,
    rgba(14,35,56,0) 46px);
  animation:rake 96s var(--ease-soft) -22s infinite alternate;
  will-change:transform;
}
.env.on-ink{
  background:repeating-linear-gradient(
    172deg,
    rgba(223,184,110,.05) 0px,
    rgba(223,184,110,.05) 3px,
    rgba(223,184,110,0) 3px,
    rgba(223,184,110,0) 46px);
}
@keyframes rake{
  from{transform:translate3d(-2.2%,-1.6%,0) rotate(-.35deg)}
  to{transform:translate3d(2.4%,2%,0) rotate(.4deg)}
}

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px var(--rail);
  transition:background var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(244,238,229,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:rgba(14,35,56,.1);
}
.nav.solid.on-ink{
  background:rgba(8,21,36,.82);
  border-bottom-color:rgba(223,184,110,.16);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand svg{width:34px;height:34px;flex-shrink:0}
.brand-name{font-family:"Fraunces",Georgia,serif;font-size:1.22rem;font-weight:600;letter-spacing:-.01em;line-height:1}
.brand-sub{display:block;font-family:"DM Mono",monospace;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-mute);margin-top:3px}
.nav.on-ink .brand-sub{color:var(--gold)}
.nav-links{display:flex;align-items:baseline;gap:clamp(14px,2.2vw,34px)}
.nav-links a{text-decoration:none;font-size:.9rem;position:relative;padding:6px 0;white-space:nowrap}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a.only-wide{display:none}
@media(min-width:900px){.nav-links a.only-wide{display:inline-block}}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:2px;border:1px solid var(--gold);
  background:var(--gold);color:#14202E;text-decoration:none;
  font-size:.93rem;font-weight:500;letter-spacing:.01em;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease);
  text-shadow:none;cursor:pointer;
}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi);transform:translateY(-2px)}
/* the ghost border is an interface edge, so it gets its own value
   that clears 3:1 rather than a hairline that looks right and fails */
.btn--ghost{background:transparent;color:var(--ink-on-bone);border-color:#7A8794}
.btn--ghost:hover{background:rgba(18,40,63,.06);border-color:var(--ink-on-bone);transform:translateY(-2px)}
.on-ink .btn--ghost,.sec--ink .btn--ghost{color:var(--text-primary);border-color:rgba(223,184,110,.44)}
.on-ink .btn--ghost:hover,.sec--ink .btn--ghost:hover{background:rgba(223,184,110,.1);border-color:var(--gold)}
.btn[disabled]{opacity:.4;pointer-events:none}
@media(pointer:coarse){.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   The scroll-scrubbed hero
   ============================================================ */
.hero{position:relative;z-index:1}
.hero--home{height:700vh}
.hero--sub{height:550vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink-deep)}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
  transform:translateZ(0);will-change:transform;
}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
/* the poster must sit exactly where the video sits, or the hero visibly
   jumps at the moment the film fades in over it */
.poster{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat}
.stage video{object-position:center center}

/* global base veil: a soft warm lift so no frame is ever raw behind type */
.veil{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 128% 96% at 50% 40%,rgba(248,244,237,0) 34%,rgba(248,244,237,.46) 100%);
}
/* a permanent hairline of brand navy top and bottom, so the stage meets the page */
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,35,56,.34) 0%,rgba(14,35,56,0) 16%,rgba(14,35,56,0) 82%,rgba(14,35,56,.26) 100%);
}

/* the loading ring */
.ring{
  position:absolute;left:50%;bottom:42px;transform:translateX(-50%);
  width:44px;height:44px;color:var(--ink-on-bone);opacity:.7;z-index:5;
  transition:opacity .5s var(--ease);
}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .12s linear}
.stage.video-ready .ring{opacity:0}
.cue{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);z-index:5;color:var(--ink-on-bone);opacity:.65}

/* ---- caption bands ---- */
.bands{position:absolute;inset:0;z-index:4;pointer-events:none}
.band{
  position:absolute;left:50%;transform:translateX(-50%);
  width:min(760px,86vw);text-align:center;opacity:0;
  color:var(--ink-on-bone);text-shadow:var(--tshadow);
}
.band--high{top:16vh}
.band--mid{top:26vh}
.band::before{
  content:"";position:absolute;inset:-70% -34%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 66% 58% at 50% 50%,rgba(248,244,237,.82) 0%,rgba(248,244,237,.56) 44%,rgba(248,244,237,0) 76%);
}
.band .btn{text-shadow:none}
/* the dark variant, for heroes whose footage is a night scene:
   light type on a dark scrim instead of navy type on a warm veil */
.band--dark{color:var(--text-primary);text-shadow:var(--tshadow-dark)}
.band--dark::before{
  background:radial-gradient(ellipse 68% 60% at 50% 50%,rgba(5,12,22,.8) 0%,rgba(5,12,22,.58) 44%,rgba(5,12,22,0) 78%);
}
.band--dark .band-sub{color:var(--text-primary)}
.stage--dark .veil{
  background:radial-gradient(ellipse 128% 96% at 50% 42%,rgba(6,14,24,0) 30%,rgba(6,14,24,.62) 100%);
}
.stage--dark .ring,.stage--dark .cue,.stage--dark .scroll-hint{color:var(--text-primary)}
.band-lead{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(2rem,4.6vw,4.1rem);line-height:1.04;letter-spacing:-.022em}
.band-lead.short{font-size:clamp(3rem,8.6vw,7.4rem);font-weight:600}
.band-sub{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.5;max-width:46ch;margin:18px auto 0;color:var(--ink-on-bone);opacity:.92}
.band-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;pointer-events:auto}

/* split-text choreography: transform and opacity only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tsplit{display:block}   /* the split text visual copy. Never .vis: build.css owns that */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) drift-down: words fall into place, echoing the blind coming down */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -30px));
}
/* (d) word-punch with overshoot */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.14))*var(--kc) - var(--ov,.14)*var(--ks)));
}
.e-punch .w.em{--ov:.26;--sd:.16;--ss:2.6}
/* (c) blur-to-sharp: two stacked copies, static blur, crossfaded */
.e-blur .band-lead{position:relative}
.e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0))}
.e-blur .sharp{opacity:var(--k,0)}
/* (b) grid snap-align: characters slide into reading order */
.e-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* (g) approach-from-depth */
.e-depth .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);
  opacity:var(--kc);
  transform:scale(calc(.84 + .16*var(--kc)));
}
/* (e) word-by-word rise into a staged settle */
.e-rise .band-lead .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 26px));
}
.e-rise .band-sub{--ks:clamp(0,(var(--k,0) - .58)*3.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 16px))}
.e-rise .band-cta{--kb:clamp(0,(var(--k,0) - .74)*4.4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px))}

/* ---- the static hero: a designed layout, not an apology ---- */
.static-hero{display:none;position:relative;min-height:92vh;isolation:isolate}
.static-hero .poster{position:absolute;inset:0;z-index:-2}
.static-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(248,244,237,.4) 0%,rgba(248,244,237,.72) 52%,rgba(248,244,237,.94) 100%);
}
.static-hero .inner{padding:clamp(120px,20vh,200px) var(--rail) clamp(56px,9vh,96px);text-align:center}
.static-hero h1{font-size:clamp(2.8rem,10vw,5rem);font-weight:600}
.static-hero p{max-width:34ch;margin:20px auto 0;font-size:1.06rem}
.static-hero .band-cta{margin-top:32px}

/* THE STATIC-HERO GATES — these strings are duplicated character for
   character in site.js. Never edit one side alone. Phones and portrait
   tablets scrub since 7 October 2026 (the owner's "preserve the hero
   animations on mobile"), with a portrait film of their own. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .hero{display:none}.static-hero{display:block}
}
@media (prefers-reduced-motion: reduce){
  .hero{display:none}.static-hero{display:block}
}
/* shallow desktop windows keep the scrub but lose the small overlays */
@media (max-height:560px){.ring,.cue,.scroll-hint{display:none}}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--ink-on-bone);opacity:.55;pointer-events:none;
}
.scroll-hint .bar{width:1px;height:34px;background:currentColor;transform-origin:top;animation:hint 2.8s var(--ease-soft) -.6s infinite}
@keyframes hint{0%,100%{transform:scaleY(.25);opacity:.3}45%{transform:scaleY(1);opacity:1}}

/* ============================================================
   Sections
   ============================================================ */
.sec{position:relative;z-index:1;padding:clamp(72px,11vh,142px) 0}
.sec--bone{background:var(--bone);color:var(--ink-on-bone)}
.sec--bone-2{background:var(--bone-2);color:var(--ink-on-bone)}
.sec--ink{background:var(--ink);color:var(--text-primary)}
.sec--ink-deep{background:var(--ink-deep);color:var(--text-primary)}
.sec--ink h2,.sec--ink-deep h2{color:var(--text-primary)}
.sec--ink p,.sec--ink-deep p{color:var(--text-secondary)}

.kicker{color:var(--label);display:block;margin-bottom:18px}
.sec--ink .kicker,.sec--ink-deep .kicker{color:var(--gold)}
h2{font-size:clamp(2rem,4.1vw,3.5rem)}
/* a page's own title, set as its main heading with the look of a section heading (design audit D8) */
.page-h{font-size:clamp(2rem,4.1vw,3.5rem)}
.sec--ink .page-h,.sec--ink-deep .page-h{color:var(--text-primary)}
h3{font-size:clamp(1.24rem,1.7vw,1.5rem);font-weight:600}
.lede{font-size:clamp(1.04rem,1.3vw,1.2rem);max-width:56ch;margin-top:22px;color:var(--ink-on-bone-2)}
.sec--ink .lede,.sec--ink-deep .lede{color:var(--text-secondary)}

/* the slat divider: rules that draw open as the section arrives */
.slats{display:block;width:100%;height:26px;overflow:visible;margin-bottom:clamp(34px,5vh,56px)}
.slats line{stroke:currentColor;opacity:.26;stroke-width:1;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.15s var(--ease),transform .95s var(--ease);}
.in .slats line{stroke-dashoffset:0}
.slats line:nth-child(1){transition-delay:0s}
.slats line:nth-child(2){transition-delay:.09s}
.slats line:nth-child(3){transition-delay:.18s}
.slats line:nth-child(4){transition-delay:.27s}

/* entrance choreography: quick enough to read through (design audit D4,
   13 October 2026: was .82s with waits to .32s), no waiting after the third */
.rise{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.in .rise:nth-child(2){transition-delay:.06s}
.in .rise:nth-child(3){transition-delay:.12s}
.in .rise:nth-child(4){transition-delay:.12s}
.in .rise:nth-child(5){transition-delay:.12s}
/* retire the stagger once the entrance is finished, at matching specificity */
.in.done .rise:nth-child(2),.in.done .rise:nth-child(3),
.in.done .rise:nth-child(4),.in.done .rise:nth-child(5),
.in.done .rise{transition-delay:0s !important}

/* ============================================================
   The turnaround strip
   ============================================================ */
.turn{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:1fr}
@media(min-width:900px){.turn{grid-template-columns:1.05fr .95fr;align-items:start}}
.turn-points{display:grid;gap:26px;margin-top:8px}
.point{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding-bottom:22px;border-bottom:1px solid rgba(223,184,110,.2)}
.point:last-child{border-bottom:0;padding-bottom:0}
.point .mono{color:var(--label);white-space:nowrap}
.sec--ink .point .mono,.sec--ink-deep .point .mono{color:var(--gold)}
.point p{font-size:1.02rem}

/* ============================================================
   Product cards
   ============================================================ */
.cards{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:1fr}
@media(min-width:680px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{
  position:relative;display:flex;flex-direction:column;background:var(--bone-2);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 54px -26px rgba(14,35,56,.5)}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card-img img{transform:scale(1.045)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,35,56,.42),rgba(14,35,56,0) 46%)}
.card-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-family:"Fraunces",Georgia,serif;font-weight:600}
.card-body p{font-size:.95rem;color:var(--ink-on-bone-2);flex:1}
.card-go{display:inline-flex;align-items:center;gap:8px;color:var(--label);font-size:.86rem;font-weight:500;margin-top:4px}
.card-go svg{transition:transform .5s var(--ease)}
.card:hover .card-go svg{transform:translateX(5px)}

/* ============================================================
   The one interactive moment: hold to lower
   ============================================================ */
.hold-wrap{display:grid;gap:clamp(32px,4.5vw,68px);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.hold-wrap{grid-template-columns:1fr 1fr}}
.hold-window{
  position:relative;aspect-ratio:5/4;border:1px solid rgba(223,184,110,.34);
  overflow:hidden;background:var(--ink-deep);
}
.hold-window .scene{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(calc(1.42 - .42*var(--h,0))) saturate(calc(.86 + .3*var(--h,0)));
  transition:filter .18s linear}
.hold-window .glare{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(196deg,rgba(255,251,240,.78) 0%,rgba(255,251,240,.18) 40%,rgba(255,251,240,0) 66%);
  opacity:calc(1 - var(--h,0));
}
.hold-window .warm{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 90% 70% at 50% 62%,rgba(223,184,110,.85),rgba(223,184,110,0) 72%);
  opacity:var(--h,0);
}
/* the window inside the photograph, measured off the image itself,
   so the blind lowers over the glass rather than over the whole room */
.hold-glass{position:absolute;left:29.1%;top:32.3%;width:42%;height:23.1%;overflow:hidden}
.hold-blind{
  position:absolute;left:0;right:0;top:0;height:100%;transform-origin:top;
  /* stops just short of the sill, the way a blind set for glare actually sits */
  transform:scaleY(calc(var(--h,0) * .88));
  background:linear-gradient(to bottom,#DCCBB2,#CDB897 62%,#C0A987);
  box-shadow:0 10px 22px -10px rgba(14,35,56,.75);
}
.hold-blind::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5%;min-height:3px;background:linear-gradient(to bottom,#A98F68,#7E6743)}
.hold-ui{display:flex;flex-direction:column;gap:26px}
.hold-btn{
  position:relative;overflow:hidden;border:1px solid var(--gold);background:transparent;color:var(--text-primary);
  padding:18px 30px;border-radius:2px;cursor:pointer;align-self:flex-start;
  font-size:.95rem;font-weight:500;letter-spacing:.02em;-webkit-user-select:none;user-select:none;touch-action:none;
  transition:color .4s var(--ease);
}
.hold-btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left;
  transform:scaleX(var(--h,0));transition:transform .1s linear;z-index:-1;
}
.hold-btn span{position:relative;z-index:1}
.hold-btn[data-done="1"]{color:#14202E}
.hold-lines{display:grid;gap:0;margin:0;padding:0;list-style:none}
.hold-lines li{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:300;
  padding:14px 0;border-bottom:1px solid rgba(223,184,110,.18);
  opacity:.2;transform:translateX(-10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .7s var(--ease);
}
.hold-lines li.lit{opacity:1;transform:none;color:var(--text-primary)}
.hold-lines li:last-child{border-bottom:0}

/* ============================================================
   Steps
   ============================================================ */
.steps{display:grid;gap:clamp(22px,3vw,38px);grid-template-columns:1fr;counter-reset:s}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{display:flex;flex-direction:column;gap:16px}
.step-img{aspect-ratio:3/2;overflow:hidden;background:var(--sand)}
.step-img img{width:100%;height:100%;object-fit:cover}
.step .mono{color:var(--label)}
.step h3{font-family:"Fraunces",Georgia,serif;font-weight:600}
.step p{font-size:.98rem;color:var(--ink-on-bone-2)}
/* "How it works" as one window seen through three slats, the light passing
   through all three once as the section arrives (design audit D12, 13 October 2026) */
@media(min-width:820px){
  .steps--louvre{column-gap:8px}
  .steps--louvre .step-img{aspect-ratio:4/5}
  .steps--louvre .step > :not(.step-img){padding-right:clamp(12px,2vw,28px)}
}
.steps--louvre .step-img{position:relative}
.steps--louvre .step-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,240,214,0) 30%,rgba(255,240,214,.42) 50%,rgba(255,240,214,0) 70%);
  transform:translateX(-120%);
}
@media (prefers-reduced-motion:no-preference){
  .in .steps--louvre .step-img::after{animation:louvreLight 1.7s cubic-bezier(.4,0,.2,1) .3s both}
  .in .steps--louvre .step:nth-child(2) .step-img::after{animation-delay:.95s}
  .in .steps--louvre .step:nth-child(3) .step-img::after{animation-delay:1.6s}
}
@keyframes louvreLight{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.steps--louvre .step .mono{display:flex;align-items:center;gap:12px}
.steps--louvre .step .mono::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--label),rgba(128,88,28,0))}

/* ============================================================
   The objections list
   ============================================================ */
.objs{display:grid;gap:0;margin-top:clamp(30px,4vh,52px)}
.obj{display:grid;grid-template-columns:1fr;gap:8px;padding:28px 0;border-top:1px solid rgba(223,184,110,.2)}
@media(min-width:820px){.obj{grid-template-columns:.9fr 1.1fr;gap:40px;align-items:baseline}}
.obj:last-child{border-bottom:1px solid rgba(223,184,110,.2)}
.obj h3{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(1.3rem,2.1vw,1.75rem);color:var(--text-primary)}
.obj p{font-size:1rem}

/* ============================================================
   The fabric rail
   ============================================================ */
.rail{overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.rail-track{display:flex;gap:14px;width:max-content;animation:slide 64s linear infinite}
.rail--back .rail-track{animation-duration:78s;animation-direction:reverse}
.rail:hover .rail-track,.rail:focus-within .rail-track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.sw{
  flex:0 0 auto;width:132px;text-decoration:none;color:inherit;display:block;
  transition:transform .5s var(--ease);
}
.sw:hover{transform:translateY(-6px)}
.sw-chip{display:block;height:96px;border:1px solid rgba(14,35,56,.1);position:relative;overflow:hidden}
.sw-chip::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.sw-name{display:block;margin-top:9px;font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-on-bone-2)}

/* ============================================================
   Sydney / areas
   ============================================================ */
.sydney{position:relative;overflow:hidden}
.sydney .bg{position:absolute;inset:0;z-index:0}
.sydney .bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.sydney::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(8,21,36,.94) 0%,rgba(8,21,36,.72) 52%,rgba(8,21,36,.5) 100%)}
.sydney .wrap{position:relative;z-index:2}
.areas{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;color:var(--gold);max-width:60ch}
.areas span{white-space:nowrap}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:clamp(28px,4vh,48px);border-top:1px solid rgba(14,35,56,.14)}
.faq details{border-bottom:1px solid rgba(14,35,56,.14)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.1rem,1.6vw,1.34rem);font-weight:300;
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-mute)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:currentColor;
  transition:transform .45s var(--ease);
}
.faq summary::before{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:currentColor;
  transform:rotate(90deg);transition:transform .45s var(--ease);
}
.faq details[open] summary::before{transform:rotate(0deg)}
.faq .ans{padding:0 8% 26px 0;color:var(--ink-on-bone-2);font-size:1rem}

/* ============================================================
   Closing CTA + footer
   ============================================================ */
.close-cta{text-align:center}
.close-cta h2{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:600}
.close-cta .lede{margin-inline:auto;text-align:center}
.close-cta .band-cta{margin-top:34px}
.small-note{margin-top:22px;font-size:.9rem;color:var(--text-secondary)}
.small-note a{color:var(--gold)}

.foot{background:var(--ink-deep);color:var(--text-secondary);padding:clamp(48px,7vh,84px) 0 34px;position:relative;z-index:1}
.foot-grid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h4{font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{color:var(--text-secondary);text-decoration:none;font-size:.94rem;transition:color .4s var(--ease)}
.foot a:hover{color:var(--gold-hi)}
.foot-base{margin-top:44px;padding-top:24px;border-top:1px solid rgba(223,184,110,.14);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:.82rem}
.foot .brand-name{color:var(--text-primary)}

/* ============================================================
   The page roll transition: a blind dropping and rolling away
   ============================================================ */
.roll{
  position:fixed;inset:0;z-index:300;pointer-events:none;
  transform-origin:top;transform:scaleY(0);
  background:linear-gradient(to bottom,#0B1D30,#0E2338 60%,#0B1D30);
  background-image:repeating-linear-gradient(0deg,rgba(223,184,110,.09) 0 1px,rgba(223,184,110,0) 1px 26px),linear-gradient(to bottom,#0B1D30,#0E2338 60%,#0B1D30);
}
.roll.drop{transform:scaleY(1);transition:transform .58s var(--ease)}
.roll.lift{transform:scaleY(0);transition:transform .72s var(--ease) .06s}
.roll::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:9px;
  background:linear-gradient(to bottom,var(--gold),var(--gold-mute));
  box-shadow:0 8px 26px -6px rgba(0,0,0,.7);
}

/* ============================================================
   Reduced motion, honoured completely
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important;
  }
  body{opacity:1}
  .rise{opacity:1;transform:none}
  .slats line{stroke-dashoffset:0}
  .hold-lines li{opacity:1;transform:none;color:var(--text-primary)}
  .env{animation:none;transform:translate3d(0,0,0)}
  .rail-track{animation:none}
  .roll{display:none}
  .scroll-hint .bar{animation:none;transform:scaleY(1)}
  /* positional transforms are re-declared, never blanket-killed */
  .band{transform:translateX(-50%)}
  .ring{transform:translateX(-50%)}
  .cue,.scroll-hint{transform:translateX(-50%)}
}

/* pause everything when the tab is hidden or the section is off screen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   The range page: four sections, no two sharing a skeleton
   ============================================================ */
.rsec-split{display:grid;gap:clamp(28px,4.5vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){
  .rsec-split{grid-template-columns:.92fr 1.08fr}
  .rsec-split.flip .rsec-media{order:2}
}
.rsec-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.rsec-media{position:relative;overflow:hidden}
.rsec-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,35,56,.28),transparent 44%)}

.speclist{list-style:none;margin:clamp(24px,3.5vh,38px) 0 0;padding:0;display:grid;gap:0}
.speclist li{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 0;border-top:1px solid rgba(223,184,110,.24)}
@media(min-width:620px){.speclist li{grid-template-columns:auto 1fr;gap:24px;align-items:baseline}}
.speclist li:last-child{border-bottom:1px solid rgba(223,184,110,.24)}
.speclist .mono{color:var(--label);white-space:nowrap}
.sec--ink .speclist .mono,.sec--ink-deep .speclist .mono{color:var(--gold)}
.speclist p{font-size:.98rem}

/* the wide banded section */
.rsec-band{position:relative;overflow:hidden;isolation:isolate}
.rsec-band .bandimg{position:absolute;inset:0;z-index:-2}
.rsec-band .bandimg img{width:100%;height:100%;object-fit:cover}
.rsec-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(8,21,36,.93),rgba(8,21,36,.72) 58%,rgba(8,21,36,.55))}
.rsec-band .inner{max-width:60ch;padding:clamp(64px,11vh,140px) 0}

/* the three across strip */
.rsec-strip{display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:1fr;margin-top:clamp(30px,4vh,50px)}
@media(min-width:800px){.rsec-strip{grid-template-columns:repeat(3,1fr)}}
.rsec-strip .cell{padding-top:20px;border-top:1px solid rgba(14,35,56,.2)}
.sec--ink .rsec-strip .cell,.sec--ink-deep .rsec-strip .cell{border-top-color:rgba(223,184,110,.28)}
.rsec-strip .cell h3{font-family:"Fraunces",Georgia,serif;font-weight:600;margin:10px 0 8px}
.rsec-strip .cell p{font-size:.96rem}

.rsec-cta{margin-top:clamp(26px,3.5vh,40px);display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   Two legibility variants earned by the audit
   ============================================================ */

/* The card. For footage that carries hard dark detail right through the
   text zone (the fabric weave), where a soft veil can only win by washing
   the footage out. The words sit on a bone panel instead, which reads as a
   swatch label over fabric rather than as a compromise. */
.band--card::before{display:none}
.band--card .band-inner{
  background:rgba(246,241,232,.9);
  backdrop-filter:blur(16px) saturate(1.04);
  -webkit-backdrop-filter:blur(16px) saturate(1.04);
  border:1px solid rgba(200,154,79,.45);
  padding:clamp(26px,3.6vw,44px) clamp(22px,3.6vw,48px);
  box-shadow:0 24px 70px -34px rgba(14,35,56,.6);
}
.band--card .band-lead{text-shadow:none}
.band--card .band-sub{text-shadow:none}

/* The deeper scrim, for a band whose worst frame is too close to the
   text's own value. Same shape, wider and stronger. */
.band--deep::before{
  inset:-86% -40%;
  background:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(248,244,237,.94) 0%,rgba(248,244,237,.84) 46%,rgba(248,244,237,0) 88%);
}
.band--dark.band--deep::before{
  inset:-86% -40%;
  background:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(5,12,22,.92) 0%,rgba(5,12,22,.8) 46%,rgba(5,12,22,0) 88%);
}


/* ============================================================
   Narrow screens: the nav has to fit, and it has to stay readable
   over a static hero whose top edge can be any colour at all.
   ============================================================ */
@media (max-width:720px){
  .nav{
    background:rgba(244,238,229,.94);
    backdrop-filter:blur(14px) saturate(1.1);
    border-bottom-color:rgba(14,35,56,.1);
    padding:11px var(--rail);
  }
  .nav .brand-sub{display:none}
  .brand svg{width:29px;height:29px}
  .brand-name{font-size:1.06rem}
  .nav-links{gap:16px}
  .nav-links a{font-size:.84rem}
  .static-hero .inner{padding-top:clamp(104px,17vh,150px)}
}
@media (max-width:400px){
  .brand-name{font-size:.98rem}
  .nav-links{gap:12px}
  .nav-links a{font-size:.79rem}
  .brand{gap:8px}
}

/* looping animations rest while their section is off screen.
   The IntersectionObserver in site.js toggles this class on [data-loop]. */
.anim-off,.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused}

/* ============================================================
   The builder switcher, and the still hero for the pages
   whose product does not carry a film
   ============================================================ */
.switcher{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(22px,3vh,34px);
}
.switcher a{
  padding:10px 18px;border:1px solid rgba(14,35,56,.16);border-radius:2px;text-decoration:none;
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-on-bone-2);
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.switcher a:hover{border-color:var(--gold);color:var(--ink-on-bone)}
.switcher a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--text-primary)}

.still-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(88vh,760px);display:flex;align-items:flex-end}
.still-hero .poster{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.still-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,21,36,.94) 0%,rgba(8,21,36,.72) 42%,rgba(8,21,36,.28) 100%);
}
.still-hero .inner{
  width:min(var(--maxw),100% - var(--rail)*2);margin-inline:auto;
  padding:clamp(120px,20vh,200px) 0 clamp(48px,8vh,90px);color:var(--text-primary);
}
.still-hero .kicker{color:var(--gold)}
.still-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:600;max-width:16ch}
.still-hero p{max-width:52ch;margin-top:20px;font-size:clamp(1.02rem,1.3vw,1.16rem);color:var(--text-secondary)}
.still-hero .band-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* the home rail wears the real cloth too */
.sw-chip{overflow:hidden;position:relative}
.sw-chip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sw-chip::after{z-index:1}

/* ============================================================
   The nav sits over content it does not control, so it never relies
   on that content being a helpful colour. It carries its own scrim,
   and dark sections declare themselves with data-nav-dark so the text
   colour is a stated fact rather than a guess.
   ============================================================ */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(248,244,237,.88),rgba(248,244,237,.34) 55%,rgba(248,244,237,0));
  opacity:1;transition:opacity var(--dur) var(--ease);
}
.nav.on-ink::before{
  background:linear-gradient(to bottom,rgba(6,14,24,.86),rgba(6,14,24,.36) 55%,rgba(6,14,24,0));
}
.nav.solid::before{opacity:0}
.nav{isolation:isolate}

/* ============================================================
   The logo is the client's own artwork, used as supplied.
   Two versions of the same lockup: the navy wordmark for light
   ground, a cream wordmark for navy ground, so it is never
   sitting on a colour that swallows it.
   ============================================================ */
.brand{display:block;flex-shrink:0;line-height:0}
.brand-logo{height:64px;width:auto;display:block}
.brand-logo--ondark{display:none}
.nav.on-ink .brand-logo--onlight{display:none}
.nav.on-ink .brand-logo--ondark{display:block}
@media(max-width:720px){.brand-logo{height:46px}}
@media(max-width:400px){.brand-logo{height:40px}}

.foot-logo{width:min(340px,86%);height:auto;display:block;margin-bottom:6px}

/* ---- the hero on a phone (7 October 2026): the same journey, a little
   shorter to scroll, the stage sized to the visible screen ---- */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse){
  .hero--home{height:560vh}
  .hero--sub{height:460vh}
  .stage{height:100vh;height:100svh}
  .band{width:min(560px,88vw)}
  .band--high{top:13svh}
  .band--mid{top:20svh}
  .band-lead{font-size:clamp(1.85rem,7.4vw,2.6rem)}
  .band-lead.short{font-size:clamp(3.2rem,15vw,5rem)}
  .band-sub{font-size:1rem;max-width:32ch}
  .band-cta{margin-top:24px}
  .ring,.cue{bottom:calc(28px + env(safe-area-inset-bottom))}
}


/* ============================================================
   The header's "Build my blinds" and the menu on phones and tablets
   (owner, 13 October 2026: design audit D1 and D2). The button is on
   the first screen of every page; the menu holds the pages that were
   only in the footer on a phone.
   ============================================================ */
.nav-links{align-items:center}
.nav-links .nav-cta{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  background:var(--gold);color:#14202E;border:1px solid var(--gold);border-radius:2px;
  font-size:.86rem;font-weight:500;white-space:nowrap;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.nav-links .nav-cta::after{display:none}
@media (hover:hover) and (pointer:fine){.nav-links .nav-cta:hover{background:var(--gold-hi);border-color:var(--gold-hi)}}
.nav-menu{
  display:none;align-items:center;min-height:40px;padding:0 14px;
  background:transparent;color:inherit;border:1px solid currentColor;border-radius:2px;
  font:inherit;font-size:.86rem;cursor:pointer;
}
@media (max-width:899px){
  .nav-menu{display:inline-flex}
  .nav-links a.nav-wide{display:none}
}
@media (max-width:400px){
  .nav-links .nav-cta{padding:0 12px;font-size:.8rem}
  .nav-menu{padding:0 11px;font-size:.8rem}
}
.nav-sheet{
  position:absolute;top:100%;left:0;right:0;
  background:var(--bone);color:var(--ink-on-bone);
  border-bottom:1px solid rgba(14,35,56,.12);box-shadow:0 18px 40px -24px rgba(8,21,36,.45);
  padding:6px var(--rail) 22px;max-height:calc(100dvh - 64px);overflow:auto;
}
.nav.on-ink .nav-sheet{background:var(--ink-deep);color:var(--text-primary);border-bottom-color:rgba(223,184,110,.16)}
.nav-sheet ul{list-style:none;margin:0;padding:0;display:grid}
.nav-sheet li a{
  display:block;padding:12px 0;text-decoration:none;
  font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:1.3rem;line-height:1.2;
  border-bottom:1px solid rgba(14,35,56,.08);
}
.nav.on-ink .nav-sheet li a{border-bottom-color:rgba(223,184,110,.14)}
.nav-sheet-call{margin:16px 0 0;font-size:.92rem}
.nav-sheet-call a{text-decoration:underline;text-underline-offset:3px}
.nav.menu-open::before{opacity:0}
.nav.menu-open{background:var(--bone);border-bottom-color:rgba(14,35,56,.1)}
.nav.menu-open.on-ink{background:var(--ink-deep)}
@media (prefers-reduced-motion:no-preference){
  .nav-sheet:not([hidden]){animation:navSheet .22s cubic-bezier(.2,.8,.2,1)}
}
@keyframes navSheet{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   Phone and email on every page (owner, 13 October 2026): a slim bar
   above the header. Wide screens show both in full; phones show a Call
   and an Email button (the number and the address stay the links' names
   for screen readers).
   ============================================================ */
:root{--tb:0px}
:root:has(.topbar){--tb:32px}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:61;height:var(--tb);
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(16px,2.4vw,30px);
  padding:0 var(--rail);background:var(--ink-deep);color:var(--text-primary);font-size:.8rem;
}
.topbar-item{display:inline-flex;align-items:center;gap:8px}
.tb-l{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.topbar a{display:inline-flex;align-items:center;min-height:var(--tb);color:inherit;text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.topbar a:hover{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}}
.topbar ~ .nav{top:var(--tb)}
@media (max-width:720px){
  /* a taller bar on phones, so the two buttons are easy to tap (14 October 2026) */
  :root:has(.topbar){--tb:42px}
  .topbar{justify-content:stretch;gap:8px;padding:4px var(--rail)}
  .topbar-item{flex:1 1 0}
  .tb-l{display:none}
  .topbar a{
    flex:1;justify-content:center;min-height:34px;font-size:0;
    border:1px solid rgba(223,184,110,.4);border-radius:2px;
  }
  .topbar a::before{font-size:.8rem;letter-spacing:.02em}
  .topbar .tb-call::before{content:"Call us"}
  .topbar .tb-mail::before{content:"Send an enquiry"}
}
/* pages with a header offset take the bar's height too */
body:has(> .topbar) .static-hero .inner{padding-top:calc(clamp(104px,17vh,150px) + var(--tb))}