/* ==========================================================================
   TWELVE RIDGE DENTAL - shared stylesheet
   --------------------------------------------------------------------------
   PHOTOS - every slot is one line in the HTML. Search "SLOT" there and swap
       --img:none        →   --img:url("images/your-file.jpg")

   TYPE - five directions are wired up. The preview switcher sets
   data-type on <html>; to lock one in for launch, copy that block's
   values into :root and delete the switcher.
   ========================================================================== */

:root{
  color-scheme: light;

  /* ---- palette (merged from the four boards) ---- */
  --bone:   #F5F1E6;
  --bone-2: #EFEADC;
  --sand:   #E2DAC5;
  --sage:   #8B9179;
  --sage-2: #C7CDB8;
  --pine:   #2B3226;
  --pine-2: #384031;
  --cocoa:  #634E3D;
  --clay:   #B89178;
  --ink:    #1A1815;

  /* ---- type: default pairing = Bebas Neue + Jost ---- */
  --display: "Bebas Neue", "Haettenschweiler", Impact, sans-serif;
  --dw: 400;
  --dls: .012em;
  --dlh: .90;
  --dscale: 1;
  --stroke: 1.5px;
  --ui: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --script: "Sacramento", "Snell Roundhand", cursive;

  --eyebrow-size: clamp(.66rem, .52rem + .34vw, .78rem);
  --link-size:    clamp(.66rem, .54rem + .3vw, .76rem);
  /* Top bar type. Desktop runs at 1.7x the standard link size (2x, less 15%);
     mobile takes the full 2x, which it has room for once Call and Menu split
     to opposite corners. */
  --bar-link-size: calc(var(--link-size) * 1.7);
  --body-size:    clamp(1.02rem, .94rem + .34vw, 1.16rem);
  --h1-size:      calc(clamp(2.9rem, .9rem + 9vw, 7.6rem) * var(--dscale));
  --h2-size:      calc(clamp(2.3rem, .85rem + 6.4vw, 5.5rem) * var(--dscale));

  --bar-h: 84px;        /* the condensed, scrolled bar */
  --bar-h-tall: 122px;  /* at the top, where the address sits on its own row */
  --bar-flank: 12rem;   /* the two columns either side of the condensed wordmark */
  --ease: cubic-bezier(.22,.61,.36,1);
}

:root[data-type="anton"]{
  --display:"Anton","Haettenschweiler",Impact,sans-serif;
  --dw:400; --dls:.004em; --dlh:.94; --dscale:.82; --stroke:1.8px;
}
:root[data-type="archivo"]{
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --dw:800; --dls:-.028em; --dlh:.95; --dscale:.8; --stroke:1.6px;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
}
:root[data-type="fraunces"]{
  --display:"Fraunces",Georgia,serif;
  --dw:900; --dls:-.018em; --dlh:.94; --dscale:.8; --stroke:1.4px;
}
:root[data-type="newsreader"]{
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --dw:300; --dls:-.012em; --dlh:.98; --dscale:.92; --stroke:1px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:300;
  font-size:var(--body-size);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--sage); outline-offset:4px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--bone);
  padding:.8rem 1.2rem; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- shared type ------------------------------------------------- */

.eyebrow{
  margin:0;
  font-family:var(--ui); font-weight:500;
  font-size:var(--eyebrow-size);
  letter-spacing:.26em; text-transform:uppercase;
}

.display{
  margin:0;
  font-family:var(--display);
  font-weight:var(--dw);
  line-height:var(--dlh);
  letter-spacing:var(--dls);
  text-transform:uppercase;
}

/* THE 8E8 MOVE: setup line hollow, payoff line solid.
   text-fill-color (not color) is what goes transparent, so `currentColor`
   stays the panel's own ink and the stroke inherits it correctly. */
.hl{ display:flex; flex-direction:column; color:inherit; }
.hl__out{
  -webkit-text-stroke:var(--stroke) currentColor;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-text-fill-color: transparent)){
  .hl__out{ opacity:.45; }
}

.lede{ margin:0; max-width:46ch; font-weight:300; line-height:1.7; }

/* link with the little corner bracket */
.blink{
  position:relative; align-self:flex-start;
  display:inline-block;
  padding:.1rem 0 .35rem 1.15rem;
  font-size:var(--link-size); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  color:inherit;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.blink::before{
  content:""; position:absolute; left:0; top:.1em;
  width:.72rem; height:1.5em;
  border-left:2px solid var(--clay);
  border-bottom:2px solid var(--clay);
  transition:border-color .3s var(--ease);
}
.blink:hover{ opacity:.72; transform:translateX(2px); }
.blink:hover::before{ border-color:var(--sage); }

/* ---------- top bar ------------------------------------------------------ */
/* Book (desktop only) / wordmark / Call + Menu. The bar retracts as you read
   down and returns on the first upward move - except for Menu, which rides
   along so it is reachable at any scroll position. */

.bar{
  position:fixed; inset:0 0 auto 0; z-index:90;
  color:var(--bone);
  transition:transform .4s var(--ease), background .4s var(--ease),
             color .4s var(--ease), box-shadow .4s var(--ease);
}
.bar.is-solid{
  background:var(--bone); color:var(--ink);
  box-shadow:0 1px 0 rgba(26,24,21,.10);
}
.bar.is-hidden{ transform:translateY(-100%); }

/* Only Menu stays. The bar slides up by its own height; Menu is pushed back
   down by exactly that much, so it holds its spot in the upper right while
   everything else leaves. It needs its own ground once the bar's background
   has gone - sage reads against both the bone sections and the dark ones. */
.bar__link--menu{
  /* the ring is always present, just invisible until the chip forms, so
     nothing changes size when it appears */
  border:1px solid transparent;
  /* colour crosses over slowly and on its own curve, so moving from one
     section to the next reads as a wash rather than a cut; the travel keeps
     its quicker timing so the chip still feels anchored */
  transition:opacity .3s var(--ease), transform .4s var(--ease),
             padding .3s var(--ease),
             background-color .55s ease-in-out, color .55s ease-in-out,
             border-color .55s ease-in-out, box-shadow .55s ease-in-out;
}
.bar.is-hidden .bar__link--menu{
  transform:translateY(var(--bar-h));
  padding:.75em 1.15em .75em 1.5em;
  box-shadow:0 3px 18px rgba(26,24,21,.28);
  background:var(--sage); color:var(--ink);    /* fallback before tone is read */
  border-color:rgba(43,50,38,.28);
}
/* the tick inherits the label colour, so it can never fall out of contrast */
.bar.is-hidden .bar__link--menu::before{ left:.75em; background:currentColor; opacity:.45; }

/* The chip swaps between the two greens depending on the band behind it.
   Measured, not guessed: sage on ink is 5.4:1 and sage-2 on pine is 8.1:1,
   both past AA. The pairing matters - sage-2 over a cream section would sit
   at 1.45:1 against the ground and effectively vanish, so each green is used
   only where it separates. JS sets data-tone from the measured luminance. */
.bar[data-tone="dark"].is-hidden .bar__link--menu{
  background:var(--sage-2); color:var(--pine);
  border-color:rgba(43,50,38,.18);
  box-shadow:0 3px 18px rgba(26,24,21,.45);
}
.bar[data-tone="light"].is-hidden .bar__link--menu{
  background:var(--sage); color:var(--ink);
  /* sage clears the cream ground by 2.9:1, so a faint ring firms up the edge */
  border-color:rgba(43,50,38,.30);
  box-shadow:0 3px 18px rgba(26,24,21,.22);
}

.bar__main{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:
    "book mark actions"
    "meta meta meta";
  align-items:center;
  row-gap:.4rem;
  min-height:var(--bar-h);
  padding:.85rem clamp(1rem,.3rem + 3vw,2.75rem);
  transition:padding .4s var(--ease);
}
.bar__group{ grid-area:book; }
.bar__group--end{ grid-area:actions; }
.wordmark{ grid-area:mark; }

/* Address and phone. At the top of the page they sit centred on their own row
   under the wordmark; once the bar condenses they move up to flank it. Their
   colour is inherited, so they cross from bone to ink with the rest of the bar
   rather than needing a transition of their own. */
.bar__meta{
  grid-area:meta;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.8rem,2vw,1.5rem);
  font-family:var(--ui); font-size:.72rem; font-weight:500;
  /* tracking eases off as the type grows, or it reads gappy */
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:height .4s var(--ease), opacity .3s var(--ease);
}
.bar__tel{ color:inherit; text-decoration:none; transition:opacity .3s var(--ease); }
/* full address at rest, where it has a row to itself; the short form only in
   the condensed bar - see the centring note below */
.bar__addr-short{ display:none; }
.bar__tel:hover{ opacity:.6; }

.bar__group{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.25rem); }
.bar__group--end{ justify-content:flex-end; }

.bar__link{
  position:relative; display:inline-block;
  padding-left:.7em;
  color:inherit; text-decoration:none;
  font-family:var(--ui); font-size:var(--bar-link-size); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  background:none; border:0; cursor:pointer;
  transition:opacity .3s var(--ease);
}
.bar__link::before{
  content:""; position:absolute; left:0; top:50%;
  width:1px; height:1.35em; transform:translateY(-50%);
  background:var(--clay);
}
.bar__link:hover{ opacity:.62; }

.wordmark{
  display:flex; flex-direction:column; align-items:center; gap:.16rem;
  color:inherit; text-decoration:none; line-height:1;
}
.wordmark__name{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.2rem,.9rem + 1.1vw,1.7rem);
  letter-spacing:.06em; text-transform:uppercase;
}
.wordmark__sub{
  font-family:var(--ui);
  font-size:.66rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  padding-left:.34em;
  /* was .75 - at this size the dimming was costing more than it gained */
  opacity:1;
}

/* Condensed bar, wide screens: one row carrying all five things - Book,
   address, wordmark, phone, then Call and Menu. display:contents dissolves
   the wrapper so its two children can take columns of their own.

   The columns are minmax(0,1fr) rather than 1fr so they may shrink below
   their content: paired with the ellipsis below, a window too narrow for the
   full street address trims that one item instead of shoving the row out of
   true. Equal columns either side also keep the wordmark honestly centred. */
@media (min-width: 1280px){
  /* Back to a grid, because only a grid centres the wordmark exactly.
     The two end columns are equal 1fr, so whatever sits between them is
     centred as a block; the three middle columns size to their content, so
     nothing is clipped or forced to share a quarter of the row it cannot fit.

     The two flanking columns are a fixed, identical width rather than sized
     to their text. Content-sized columns made the wordmark's centre depend on
     the address being exactly as wide as the phone number - it is a little
     wider, so the wordmark drifted right by a few pixels the moment the bar
     condensed. Small as a static offset, but plainly visible as movement.
     Equal columns put the wordmark at the same point in both states, so it
     does not travel at all. The address still shortens here, now so it fits
     the column rather than to balance it. */
  .bar.is-solid .bar__main{
    grid-template-columns:minmax(0,1fr) var(--bar-flank) auto var(--bar-flank) minmax(0,1fr);
    grid-template-areas:"book addr mark tel actions";
    column-gap:clamp(.9rem,2vw,2rem);
    row-gap:0; min-height:0; height:var(--bar-h); padding-block:0;
  }
  .bar.is-solid .bar__meta{ display:contents; }
  .bar.is-solid .bar__addr{ grid-area:addr; justify-self:end; }
  .bar.is-solid .bar__tel{ grid-area:tel; justify-self:start; }
  .bar.is-solid .bar__addr-full{ display:none; }
  .bar.is-solid .bar__addr-short{ display:inline; }
}

/* Narrower than that there is no room to flank, so the row folds away on
   scroll the way the old strip did. */
@media (max-width: 1279px){
  .bar.is-solid .bar__main{ row-gap:0; padding-block:0; min-height:var(--bar-h); }
  .bar.is-solid .bar__meta{ height:0; opacity:0; overflow:hidden; }
}

/* Phones and small tablets: the address line needs roughly 400px and cannot
   wrap, so it was overflowing off-screen - invisible, but still claiming a
   row at the top and giving it back on scroll. That was the height change.
   It is simply absent here, which also means the bar is one fixed height
   whether or not you have scrolled. Address and phone are still in the menu
   and the footer. */
@media (max-width: 900px){
  .bar__meta{ display:none; }
  .bar__main,
  .bar.is-solid .bar__main{
    grid-template-areas:"book mark actions";
    height:var(--bar-h); min-height:var(--bar-h);
    row-gap:0; padding-block:0;
  }
}

/* ---------- menu ---------------------------------------------------------- */

.menu{
  position:fixed; inset:0; z-index:100;
  background:var(--bone);
  display:grid; grid-template-rows:var(--bar-h) 1fr auto;
  padding:0 clamp(1rem,.3rem + 3vw,2.75rem) clamp(1.5rem,4vw,3rem);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu__top{ display:flex; align-items:center; justify-content:flex-end; }
.menu__top .bar__link{ color:var(--ink); }

.menu__nav{ display:flex; flex-direction:column; justify-content:center; gap:clamp(.2rem,1vw,.55rem); }
.menu__link{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(2rem,1rem + 4.6vw,3.7rem);
  line-height:1.08; letter-spacing:var(--dls); text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.menu__link:hover{ color:var(--sage); transform:translateX(.4rem); }

.menu__foot{
  display:flex; flex-wrap:wrap; gap:.6rem clamp(1rem,3vw,2.5rem); align-items:baseline;
  padding-top:clamp(1.2rem,3vw,2rem);
  border-top:1px solid var(--sand);
  font-size:var(--link-size); letter-spacing:.18em; text-transform:uppercase;
  color:var(--cocoa);
}
.menu__foot a{ color:inherit; text-decoration:none; }
.menu__foot a:hover{ color:var(--sage); }

/* ---------- image slots + parallax ---------------------------------------- */

.shot{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.shot__img{
  position:absolute; inset:-14% 0;
  background-color:var(--pine);
  background-image:var(--img, none), var(--ph);
  background-size:cover, cover;
  background-position:var(--img-pos, center), center;
  background-repeat:no-repeat;
  will-change:transform;
  transform:translate3d(0, var(--py, 0px), 0);
}
.shot::after{
  content:""; position:absolute; inset:0;
  background:var(--veil, linear-gradient(180deg, rgba(26,24,21,.58) 0%, rgba(26,24,21,.40) 45%, rgba(26,24,21,.68) 100%));
}

.ph-a{ --ph:
  radial-gradient(70% 60% at 22% 18%, #6E7A5E 0%, transparent 62%),
  radial-gradient(66% 58% at 82% 26%, #A9B294 0%, transparent 58%),
  radial-gradient(90% 80% at 50% 104%, #232A1F 0%, transparent 70%),
  linear-gradient(168deg, #49523C 0%, #2E3528 100%); }
.ph-b{ --ph:
  radial-gradient(60% 55% at 78% 20%, #D8CDB4 0%, transparent 60%),
  radial-gradient(75% 65% at 18% 78%, #7E8A6C 0%, transparent 62%),
  linear-gradient(152deg, #B7B79C 0%, #5C6450 100%); }
.ph-c{ --ph:
  radial-gradient(58% 62% at 50% 26%, #C4B79C 0%, transparent 64%),
  radial-gradient(80% 70% at 50% 108%, #3A2F25 0%, transparent 66%),
  linear-gradient(176deg, #8A7860 0%, #4A3B2E 100%); }
.ph-d{ --ph:
  radial-gradient(64% 58% at 26% 24%, #C7CDB8 0%, transparent 60%),
  radial-gradient(70% 62% at 84% 74%, #6B7359 0%, transparent 60%),
  linear-gradient(140deg, #97A183 0%, #3C442F 100%); }
.ph-e{ --ph:
  radial-gradient(66% 60% at 70% 22%, #E2DAC5 0%, transparent 62%),
  radial-gradient(78% 70% at 24% 88%, #8E7A62 0%, transparent 64%),
  linear-gradient(160deg, #A8A188 0%, #4F4638 100%); }
.ph-f{ --ph:
  radial-gradient(60% 56% at 40% 20%, #D3C9AE 0%, transparent 60%),
  radial-gradient(72% 68% at 76% 86%, #6F7A5C 0%, transparent 62%),
  linear-gradient(148deg, #9FA78C 0%, #333A2A 100%); }
.ph-g{ --ph:
  radial-gradient(62% 58% at 30% 22%, #BFC6AC 0%, transparent 60%),
  radial-gradient(70% 64% at 80% 80%, #7A6650 0%, transparent 62%),
  linear-gradient(158deg, #A29A80 0%, #3A4030 100%); }

/* bottom-RIGHT: the scroll cue owns the bottom-left corner of the hero, and
   at phone width the two were landing on top of each other */
/* A photograph needs the ground pushed back further than the placeholder
   gradients did. This one is midday sun on white siding, and the outlined
   headline over it is hollow strokes with no fill - the first thing to
   disappear against a bright frame. */
.shot--photo::after{
  background:linear-gradient(180deg,
    rgba(26,24,21,.74) 0%,
    rgba(26,24,21,.60) 45%,
    rgba(26,24,21,.80) 100%);
}

.shot__tag{
  position:absolute; z-index:2; right:1rem; bottom:1rem;
  font-size:.56rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(245,241,230,.42);
  border:1px solid rgba(245,241,230,.22);
  padding:.35rem .6rem; pointer-events:none;
}

/* ---------- hero ----------------------------------------------------------- */

.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  padding:calc(var(--bar-h-tall) + 3rem) clamp(1.25rem,5vw,5rem) clamp(5rem,9vw,7rem);
  isolation:isolate;
}
.hero--sub{ min-height:72svh; }
/* The hero starts fully zoomed out. Two things were cropping into it:
   the panels' -14% inflation, which only exists to give parallax somewhere to
   travel and the hero never parallaxes, and a Ken Burns that began already
   pushed in at 1.02. Flush sides plus a start of exactly 1 means the opening
   frame is the widest the viewport allows, and the drift goes inward only. */
.hero .shot__img{
  inset:0;
  animation:kenburns 26s var(--ease) both;
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

.hero__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(1rem,2.2vw,1.6rem);
  color:var(--bone);
  /* Copy sits on the right so it clears the building, which occupies the left
     half of the photograph. Full width still, so the quick links reach the
     margin; the copy is held back by its own max-widths. */
  width:100%; text-align:right;
}
.hero .eyebrow{ color:var(--bone); }
.hero__title{ font-size:var(--h1-size); max-width:20ch; }

/* "Welcome to" runs 20% under the solid line below it */
.hero__title .hl__out{ font-size:.8em; }
.hero__sub{
  margin:0; max-width:40ch;
  /* set left inside a right-positioned block, so the rotating word below has
     a straight edge to start from */
  text-align:left;
  font-size:clamp(1rem,.9rem + .4vw,1.18rem);
  color:var(--bone);
}

/* the rotating word runs 20% larger than the sentence around it; the tighter
   line-height keeps its taller box from opening a gap in the paragraph
   (1.2 × 1.35 ≈ the 1.62 line-height of the surrounding text) */
.rotor{
  display:grid; justify-items:start; text-align:left; overflow:hidden;
  font-size:1.2em; line-height:1.35;
}
.rotor__w{
  grid-area:1/1;
  color:var(--sage-2); font-weight:400;
  opacity:0; transform:translateY(.55em);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.rotor__w.is-on{ opacity:1; transform:none; }

.scroll-cue{
  position:absolute; z-index:2; right:clamp(1.25rem,5vw,5rem); bottom:clamp(1.4rem,3vw,2.4rem);
  display:flex; align-items:center; flex-direction:row-reverse; gap:.8rem;
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
}
.scroll-cue i{ display:block; width:44px; height:1px; background:linear-gradient(270deg, var(--bone), transparent); }

/* Address and phone under the hero sentence, moved out of the top bar.
   The number is a real outlined button: an unstyled <a> falls back to the
   browser's blue underline, which is exactly what it was doing here. */
.hero__meta{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(.55rem,2vw,1.1rem);
  margin:clamp(.5rem,1.6vw,1.1rem) 0 0;
  font-family:var(--ui); font-size:.62rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone);
}
.hero__meta-sep{ color:var(--clay); opacity:.85; }

.hero__meta a{
  display:inline-block;
  padding:.62em 1.2em;
  border:1px solid var(--bone);
  color:var(--bone); text-decoration:none;
  font-weight:500; letter-spacing:.18em;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease);
}
.hero__meta a:hover,
.hero__meta a:focus-visible{
  background:var(--bone); color:var(--pine); border-color:var(--bone);
}

/* Quick links under the hero copy. Desktop only: on a phone the row would
   wrap into a stack and duplicate the menu button sitting right above it. */
.hero__nav{ display:none; }

@media (min-width: 900px){
  .hero__nav{
    display:flex; flex-wrap:wrap; justify-content:flex-end; width:100%;
    /* a fixed gap, not a viewport-scaled one: space-between stretched with the
       window, and the old clamp still grew on 3vw. 2rem is 2rem everywhere. */
    gap:2rem;
    margin:clamp(1.5rem,3vw,2.6rem) 0 0;
  }
  .hero__nav a,
  .hero__nav .soon{
    display:inline-block;
    color:var(--bone); text-decoration:none;
    font-family:var(--ui); font-size:.66rem; font-weight:500;
    letter-spacing:.22em; text-transform:uppercase;
  }
  /* The label scales rather than changing font-size, so growing on hover
     cannot reflow the row and shove its neighbours sideways. The rule is on
     the span too, so text and underline grow as one piece. */
  .hero__nav a > span,
  .hero__nav .soon > span{
    display:inline-block;
    padding-bottom:.55rem;
    border-bottom:1px solid var(--clay);
    transform-origin:bottom center;
    transition:transform .3s var(--ease), border-color .3s var(--ease);
  }
  /* not a link yet - it holds its place in the row so the spacing is honest,
     but it is dimmed and inert until the page exists */
  .hero__nav .soon{ opacity:.55; cursor:default; }

  .hero__nav a:hover > span,
  .hero__nav a:focus-visible > span{
    transform:scale(1.11);
    border-bottom-color:var(--bone);
  }
}

/* ---------- marquee -------------------------------------------------------- */

.marquee{
  background:var(--pine); color:var(--sage-2);
  border-block:1px solid rgba(199,205,184,.16);
  overflow:hidden; padding:clamp(.9rem,2vw,1.3rem) 0;
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee__track span{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.1rem,.8rem + 1.2vw,1.8rem);
  letter-spacing:.08em; text-transform:uppercase;
  padding:0 1.6rem; white-space:nowrap;
}
.marquee__track b{ color:var(--clay); font-weight:inherit; }
@keyframes slide{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- panels --------------------------------------------------------- */

.panel{
  position:relative; display:grid; align-items:center;
  padding:clamp(5rem,11vw,9.5rem) clamp(1.25rem,5vw,5rem);
  isolation:isolate;
}
.panel__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(1rem,2vw,1.5rem);
  width:min(100%, 62rem);
}
.panel__title{ font-size:var(--h2-size); }

.panel--shot{ color:var(--bone); min-height:86svh; }
.panel--shot .eyebrow{ color:var(--bone); }
.panel--shot .lede{ color:rgba(245,241,230,.88); }

.panel--paper{ background:var(--bone); color:var(--ink); }
.panel--paper .eyebrow{ color:var(--sage); }
.panel--paper .lede{ color:rgba(26,24,21,.78); }
.panel--sand{ background:var(--bone-2); }
.panel--pine{ background:var(--pine); color:var(--bone); }
.panel--pine .eyebrow{ color:var(--sage-2); }
.panel--pine .lede{ color:rgba(245,241,230,.86); }

/* right-hand variant so the scroll alternates */
.panel--right .panel__inner{ margin-left:auto; align-items:flex-start; }

/* ---------- doctor + signature ---------------------------------------------- */

.quote{
  margin:0;
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.5rem,1rem + 2.2vw,2.9rem);
  line-height:1.12; letter-spacing:var(--dls); text-transform:uppercase;
  max-width:20ch;
}
.sig{
  font-family:var(--script);
  font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);
  line-height:1; color:var(--sage-2);
  transform:rotate(-3deg); transform-origin:left center;
  margin:0;
}
.panel--paper .sig{ color:var(--cocoa); }
.attrib{ margin:0; font-size:var(--link-size); letter-spacing:.26em; text-transform:uppercase; }
.panel--shot .attrib, .panel--pine .attrib{ color:var(--sage-2); }
.panel--paper .attrib{ color:var(--sage); }

.qmark{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(3rem,2rem + 5vw,6rem); line-height:.5;
  color:var(--sage); opacity:.55; user-select:none;
}

/* ---------- team ------------------------------------------------------------ */

.team{
  background:var(--bone-2); color:var(--ink);
  padding:clamp(4.5rem,10vw,8rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start; gap:clamp(2rem,4vw,3rem);
}
.team__head{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.team__head .eyebrow{ color:var(--sage); }
.team__title{ font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem); }

.team__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:clamp(1rem,2.4vw,1.8rem);
  width:min(100%,64rem);
}
.member{ display:flex; flex-direction:column; gap:.85rem; }
.member__frame{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--sand); }
.member__img{
  position:absolute; inset:0;
  background-image:var(--img,none), var(--ph);
  background-size:cover,cover;
  background-position:var(--img-pos,center),center;
  transition:transform .7s var(--ease), filter .7s var(--ease);
  filter:saturate(.82);
}
.member:hover .member__img{ transform:scale(1.05); filter:saturate(1); }
.member__name{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.1rem,.9rem + .8vw,1.5rem);
  letter-spacing:var(--dls); text-transform:uppercase; line-height:1.1;
}
.member__role{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage); }

/* ==========================================================================
   SUB-PAGE COMPONENTS  (why-biomimetic)
   ========================================================================== */

.prose{
  background:var(--bone);
  padding:clamp(4rem,9vw,7rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start; gap:clamp(1.1rem,2.4vw,1.6rem);
}
.prose__col{ width:min(100%, 38rem); display:flex; flex-direction:column; gap:1.1rem; }
.prose__col p{ margin:0; color:rgba(26,24,21,.8); }
.prose__h{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem);
  line-height:1.06; letter-spacing:var(--dls); text-transform:uppercase;
  margin:0;
}
.prose__col .eyebrow{ color:var(--sage); }

/* the statistic */
.stat{
  background:var(--bone-2); color:var(--ink);
  padding:clamp(4.5rem,10vw,8rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start;
}
.stat__grid{
  display:grid; gap:clamp(1.25rem,4vw,4rem);
  grid-template-columns:minmax(0,auto) minmax(0,28rem);
  align-items:center; width:min(100%,66rem);
}
.stat__num{
  font-family:var(--display); font-weight:var(--dw);
  font-size:calc(clamp(5rem,2rem + 16vw,13rem) * var(--dscale));
  line-height:.8; letter-spacing:-.02em;
  color:var(--cocoa);
  font-variant-numeric:tabular-nums;
}
.stat__body{ display:flex; flex-direction:column; gap:1rem; }
.stat__body .eyebrow{ color:var(--sage); }
.stat__claim{
  margin:0;
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.35rem,1rem + 1.5vw,2.1rem);
  line-height:1.12; letter-spacing:var(--dls); text-transform:uppercase;
}
.stat__note{ margin:0; font-size:.95rem; line-height:1.65; color:rgba(26,24,21,.74); max-width:40ch; }
.stat__cite{
  margin:0; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage); padding-top:.4rem;
}

/* the sequence - numbered because it genuinely is one */
.steps{
  background:var(--pine); color:var(--bone);
  padding:clamp(4.5rem,10vw,8rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start; gap:clamp(2rem,4vw,3rem);
}
.steps .eyebrow{ color:var(--sage-2); }
.steps__title{ font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem); }
.steps__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  width:min(100%,66rem);
  counter-reset:step;
}
.steps__item{
  display:flex; flex-direction:column; gap:.7rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(199,205,184,.28);
}
.steps__n{
  font-family:var(--ui); font-weight:500;
  font-size:.7rem; letter-spacing:.24em; color:var(--clay);
}
.steps__k{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);
  line-height:1.1; letter-spacing:var(--dls); text-transform:uppercase;
}
.steps__v{ margin:0; font-size:.95rem; line-height:1.65; color:rgba(245,241,230,.78); }

/* conventional vs. here */
.compare{
  background:var(--bone);
  padding:clamp(4.5rem,10vw,8rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start; gap:clamp(2rem,4vw,3rem);
}
.compare .eyebrow{ color:var(--sage); }
.compare__title{ font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem); }
.compare__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1rem,2.5vw,2rem);
  width:min(100%,64rem);
}
.card{
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex; flex-direction:column; gap:1rem;
}
.card--old{ background:var(--sand); color:rgba(26,24,21,.82); }
.card--new{ background:var(--pine); color:var(--bone); }
.card__k{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.2rem,1rem + .9vw,1.6rem);
  letter-spacing:var(--dls); text-transform:uppercase; line-height:1.1;
}
.card--old .card__k{ color:var(--cocoa); }
.card--new .card__k{ color:var(--sage-2); }
.card__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.card__list li{
  position:relative; padding-left:1.3rem;
  font-size:.95rem; line-height:1.6;
}
.card__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5rem; height:1px; background:currentColor; opacity:.5;
}

/* FAQ */
.faq{
  background:var(--bone-2);
  padding:clamp(4.5rem,10vw,8rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start; gap:clamp(1.5rem,3vw,2.5rem);
}
.faq .eyebrow{ color:var(--sage); }
.faq__title{ font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem); }
.faq__list{ width:min(100%,48rem); display:flex; flex-direction:column; }
.faq__item{ border-top:1px solid var(--sand); }
.faq__item:last-child{ border-bottom:1px solid var(--sand); }
.faq__q{
  cursor:pointer; list-style:none;
  padding:1.15rem 2.5rem 1.15rem 0;
  position:relative;
  font-family:var(--ui); font-weight:400;
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  color:var(--ink);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:"+"; position:absolute; right:.25rem; top:50%;
  transform:translateY(-50%);
  font-size:1.35rem; color:var(--sage); line-height:1;
}
.faq__item[open] .faq__q::after{ content:"\2212"; }
.faq__a{ margin:0; padding:0 2.5rem 1.4rem 0; color:rgba(26,24,21,.76); font-size:1rem; }

/* heading on the left, the jump bar on the right of the same row */
.compare__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:clamp(1.5rem,3vw,3rem);
  width:min(100%,64rem);
}
.compare__heading{ display:flex; flex-direction:column; gap:.9rem; }

.jumpbar{
  display:inline-flex; align-items:center; gap:.85rem;
  padding:1rem 1.5rem;
  border:1px solid var(--sage);
  color:var(--cocoa); text-decoration:none;
  font-family:var(--ui); font-size:var(--link-size); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease);
}
.jumpbar svg{ width:.95em; height:.95em; flex:none; transition:transform .3s var(--ease); }
.jumpbar:hover, .jumpbar:focus-visible{
  background:var(--sage); color:var(--bone); border-color:var(--sage);
}
/* the arrow nudges down on hover - it is pointing at where it will take you */
.jumpbar:hover svg, .jumpbar:focus-visible svg{ transform:translateY(3px); }

/* Anchored sections sit under a fixed bar, so a jump would otherwise land
   with the section's top hidden behind it. This affects every in-page link
   on the site, not just the new one. */
section[id]{ scroll-margin-top:calc(var(--bar-h) + 1.25rem); }

/* ---------- bio (doctor page) --------------------------------------------- */
/* Short labelled blocks rather than long prose: a patient reads the label they
   care about and skips the rest, which is the whole point of the format. */

.bio{
  background:var(--bone); color:var(--ink);
  padding:clamp(4.5rem,10vw,8rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start; gap:clamp(2.5rem,5vw,4rem);
}
.bio__lead{ display:flex; flex-direction:column; gap:1rem; max-width:44ch; }
.bio__lead .eyebrow{ color:var(--sage); }
.bio__h{
  margin:0;
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem);
  line-height:1.06; letter-spacing:var(--dls); text-transform:uppercase;
}
.bio__intro{ margin:0; color:rgba(26,24,21,.8); }

.facts{
  /* Stacked top to bottom, one narrow column - the labels are the navigation,
     so they want to run down a single edge rather than sit in a grid. */
  margin:0; width:min(100%,50rem);
  display:flex; flex-direction:column;
  gap:clamp(1.6rem,3vw,2.4rem);
}
.facts__item{
  display:flex; flex-direction:column; gap:.85rem;
  padding-top:clamp(1.4rem,2.5vw,1.9rem);
  border-top:1px solid var(--sand);
}
.facts dt{
  font-family:var(--ui); font-size:.76rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  /* near-black rather than sage: these are headings, and they were reading
     as decoration at the old weight and colour */
  color:var(--ink);
}
.facts dd{
  margin:0; max-width:54ch;
  font-size:1.06rem; line-height:1.72; color:rgba(26,24,21,.88);
}
.facts dd ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.7rem;
}
.facts dd li{ position:relative; padding-left:1.25rem; }
.facts dd li b{ font-weight:500; color:var(--ink); }
.facts dd li::before{
  content:""; position:absolute; left:0; top:.78em;
  width:.6rem; height:1px; background:var(--sage);
}


/* ---------- 3D comparison (onlay vs crown) ------------------------------- */

.t3d{
  background:linear-gradient(180deg,var(--pine-2) 0%,var(--pine) 100%);
  color:var(--bone);
  padding:clamp(4.5rem,10vw,8rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start; gap:clamp(1.25rem,2.5vw,2rem);
}
.t3d .eyebrow{ color:var(--sage-2); }
.t3d__title{ font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem); }
.t3d .lede{ color:rgba(245,241,230,.82); }
.t3d__tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.t3d__tab{
  font-family:var(--ui); font-weight:500; font-size:var(--link-size);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone); background:transparent; cursor:pointer;
  border:1px solid rgba(199,205,184,.35); padding:.8rem 1.15rem;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.t3d__tab:hover{ border-color:var(--sage-2); }
.t3d__tab[aria-selected="true"]{ background:var(--bone); color:var(--pine); border-color:var(--bone); }
.t3d__viewer{
  width:min(100%,72rem);
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem); align-items:start;
}
.t3d__stage{
  position:relative; width:100%; aspect-ratio:4/3;
  background:radial-gradient(110% 90% at 50% 35%,#4a5342 0%,#2a3125 70%,#232a1f 100%);
  overflow:hidden;
}
.t3d__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
.t3d__canvas:active{ cursor:grabbing; }
.t3d__loading{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:var(--eyebrow-size); letter-spacing:.26em; text-transform:uppercase; color:rgba(245,241,230,.6);
}
.t3d__labels{ position:absolute; top:1rem; left:0; right:0; display:none; pointer-events:none; }
.t3d__labels span{
  width:50%; text-align:center; font-family:var(--display); font-weight:var(--dw);
  letter-spacing:var(--dls); text-transform:uppercase; font-size:clamp(1.1rem,.9rem + .8vw,1.5rem); color:var(--bone);
}
.t3d[data-mode="both"] .t3d__labels{ display:flex; }
.t3d__panel{ display:flex; flex-direction:column; gap:1.4rem; }
.t3d__caption{ display:flex; flex-direction:column; gap:.6rem; min-height:12rem; }
.t3d__n{ margin:0; font-size:.7rem; font-weight:500; letter-spacing:.24em; color:var(--clay); text-transform:uppercase; }
.t3d__h{
  margin:0; font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem); line-height:1.04; letter-spacing:var(--dls); text-transform:uppercase;
}
.t3d__p{ margin:0; color:rgba(245,241,230,.8); max-width:40ch; }
.t3d__stat{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; padding-top:1.1rem; border-top:1px solid rgba(199,205,184,.28); }
.t3d__stat[hidden]{ display:none; }
.t3d__stat > div{ display:flex; flex-direction:column; gap:.3rem; }
.t3d__num{ font-family:var(--display); font-weight:var(--dw); font-size:clamp(2.4rem,1.8rem + 2vw,3.6rem); line-height:.9; color:var(--sage-2); }
.t3d__num[data-k="crown"]{ color:var(--clay); }
.t3d__lab{ font-size:.9rem; line-height:1.4; color:rgba(245,241,230,.78); }
.t3d__note{ grid-column:1/-1; margin:0; font-size:.78rem; color:rgba(245,241,230,.55); }
.t3d__steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; }
.t3d__steps button{
  width:100%; height:100%; text-align:left; cursor:pointer;
  background:transparent; color:rgba(245,241,230,.7); border:0; border-top:2px solid rgba(199,205,184,.25);
  padding:.6rem 0 0; font-family:var(--ui); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.3;
}
.t3d__steps button[aria-current="step"]{ color:var(--bone); border-top-color:var(--clay); }
.t3d__steps button.is-done{ border-top-color:var(--sage-2); }
.t3d__controls{ display:flex; flex-wrap:wrap; gap:.5rem; }
.t3d__btn{
  font-family:var(--ui); font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); background:transparent; border:1px solid rgba(199,205,184,.35);
  padding:.7rem .95rem; cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.t3d__btn:hover{ border-color:var(--sage-2); }
.t3d__btn--solid{ background:var(--clay); border-color:var(--clay); color:var(--ink); }
.t3d__btn[aria-pressed="true"]{ border-color:var(--sage-2); color:var(--sage-2); }
.t3d__btn:disabled{ opacity:.35; cursor:default; }
@media (max-width:900px){
  .t3d__viewer{ grid-template-columns:1fr; }
  .t3d__stage{ aspect-ratio:4/5; }
  .t3d[data-mode="both"] .t3d__stage{ aspect-ratio:1/1; }
  .t3d__caption{ min-height:0; }
}
@media (max-width:520px){
  .t3d__steps{ grid-template-columns:repeat(2,1fr); }
  .t3d__btn{ padding:.65rem .75rem; }
}

/* Phone: tabs, stage, caption, steps and controls all have to land inside one
   screen, or you scroll up to change treatment and down to read the step.
   Placed after the blocks above so it wins where they overlap.

   The stage was the whole problem: aspect-ratio 4/5 on a 375px phone is a
   469px slab before anything else is drawn. A viewport slice holds its share
   instead, on short phones as well as tall ones. */
@media (max-width: 760px){
  .t3d{ gap:.85rem; padding-block:clamp(3rem,8vw,4rem); }
  .t3d__title{ font-size:clamp(1.7rem,1.2rem + 2.4vw,2.2rem); }
  .t3d .lede{ font-size:.95rem; }

  .t3d__tabs{ width:100%; gap:.35rem; margin-top:.2rem; }
  .t3d__tab{
    flex:1 1 0; min-width:0; text-align:center;
    padding:.6rem .3rem; font-size:.58rem; letter-spacing:.09em;
  }

  .t3d__stage,
  .t3d[data-mode="both"] .t3d__stage{
    aspect-ratio:auto; height:clamp(13rem,34svh,19rem);
  }

  .t3d__viewer{ gap:.85rem; }
  .t3d__panel{ gap:.8rem; }
  .t3d__caption{ gap:.35rem; }
  .t3d__h{ font-size:1.25rem; }
  .t3d__p{ font-size:.92rem; line-height:1.5; }

  /* four across on one row, so jumping straight to a step survives */
  .t3d__steps{ grid-template-columns:repeat(4,1fr); gap:.3rem; }
  .t3d__steps button{ font-size:.54rem; letter-spacing:.05em; padding-top:.45rem; }

  .t3d__controls{ gap:.35rem; }
  .t3d__btn{ padding:.55rem .6rem; font-size:.6rem; letter-spacing:.09em; }

  .t3d__stat{ gap:.5rem .8rem; padding-top:.8rem; }
  .t3d__num{ font-size:2rem; }
  .t3d__lab{ font-size:.78rem; line-height:1.3; }
  .t3d__note{ font-size:.7rem; }
}

/* ---------- closing ---------------------------------------------------------- */

.closing{
  position:relative; background:var(--pine); color:var(--bone);
  padding:clamp(5rem,11vw,9rem) clamp(1.25rem,5vw,5rem);
  display:grid; justify-items:start;
}
.closing .eyebrow{ color:var(--bone); }
.closing__title{ font-size:var(--h2-size); }
.closing .lede{ color:rgba(245,241,230,.86); }

.btnrow{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.6rem; }
.btn{
  display:inline-block; padding:1.05rem 2.1rem;
  font-size:var(--link-size); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--sage);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--solid{ background:var(--sage); color:var(--pine); }
.btn--solid:hover{ background:var(--sage-2); border-color:var(--sage-2); }
.btn--ghost{ color:var(--bone); }
.btn--ghost:hover{ background:var(--bone); color:var(--pine); border-color:var(--bone); }

/* ---------- footer ------------------------------------------------------------ */

.foot{
  background:var(--pine-2); color:rgba(245,241,230,.72);
  padding:clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,5vw,5rem);
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
  text-align:center;
  font-size:var(--link-size); letter-spacing:.18em; text-transform:uppercase;
}
.foot__social{ display:flex; gap:clamp(1.1rem,3vw,2.25rem); }
.foot a{ color:inherit; text-decoration:none; transition:color .3s var(--ease); }
.foot a:hover{ color:var(--sage-2); }
.foot__addr{ color:rgba(245,241,230,.9); letter-spacing:.2em; margin:0; }
.foot__rule{ width:min(100%,44rem); height:1px; background:rgba(245,241,230,.16); }
.foot__fine{ font-size:.58rem; letter-spacing:.2em; color:rgba(245,241,230,.42); margin:0; }

/* ---------- motion -------------------------------------------------------------- */

.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}

.line{ display:inline-block; vertical-align:top; overflow:hidden; }
.line > i{ display:block; font-style:inherit; }
.js .split .line > i{ transform:translateY(105%); }
.js .split.is-in .line > i{
  transform:none;
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--i, 0) * 85ms);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal, .js .split .line > i{ opacity:1; transform:none; }
  .marquee__track, .hero .shot__img{ animation:none !important; }
  .shot__img{ transform:none !important; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}

/* ---------- PREVIEW ONLY: type switcher ------------------------------------------ */

.fontbar{
  position:fixed; z-index:150; right:1rem; bottom:1rem;
  background:rgba(26,24,21,.93); color:var(--bone);
  border:1px solid rgba(199,205,184,.26);
  padding:.85rem .95rem;
  display:flex; flex-direction:column; gap:.6rem;
  font-family:var(--ui);
  backdrop-filter:blur(8px);
  max-width:min(92vw,15rem);
}
.fontbar__h{
  font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage-2);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.fontbar__toggle{
  background:none; border:0; color:var(--clay); cursor:pointer;
  font-family:var(--ui); font-size:.7rem; letter-spacing:.1em; padding:0;
}
.fontbar__opts{ display:flex; flex-direction:column; gap:.3rem; }
.fontbar[data-collapsed="true"] .fontbar__opts{ display:none; }
.fontbar__b{
  text-align:left; cursor:pointer;
  background:none; color:var(--bone);
  border:1px solid rgba(199,205,184,.2);
  padding:.5rem .6rem;
  font-family:var(--ui); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.fontbar__b:hover{ background:rgba(199,205,184,.12); }
.fontbar__b[aria-pressed="true"]{ background:var(--sage); border-color:var(--sage); color:var(--pine); }

/* ---------- PREVIEW ONLY: edit mode ----------------------------------------------- */

.editbar{
  position:fixed; z-index:150; left:1rem; bottom:1rem;
  background:rgba(26,24,21,.93); color:var(--bone);
  border:1px solid rgba(199,205,184,.26);
  padding:.85rem .95rem;
  display:flex; flex-direction:column; gap:.6rem;
  font-family:var(--ui);
  backdrop-filter:blur(8px);
  max-width:min(92vw,17rem);
}
.editbar__h{
  font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage-2);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.editbar__toggle{
  background:none; border:0; color:var(--clay); cursor:pointer;
  font-family:var(--ui); font-size:.7rem; letter-spacing:.1em; padding:0;
  line-height:1;
}
.editbar__body{ display:flex; flex-direction:column; gap:.6rem; }
.editbar[data-collapsed="true"] .editbar__body{ display:none; }

/* a quiet flag so a minimized bar never hides the fact that edit mode is live */
.editbar__flag{ color:var(--clay); text-transform:none; letter-spacing:.08em; }
.editbar[data-collapsed="false"] .editbar__flag{ display:none; }

.editbar__row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.editbar__b{
  cursor:pointer;
  background:none; color:var(--bone);
  border:1px solid rgba(199,205,184,.3);
  padding:.5rem .75rem;
  font-family:var(--ui); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.editbar__b:hover{ background:rgba(199,205,184,.12); }
.editbar__b--go{ background:var(--sage); border-color:var(--sage); color:var(--pine); }
.editbar__b--go:hover{ background:var(--sage-2); border-color:var(--sage-2); }
.editbar__status{
  margin:0; font-size:.68rem; line-height:1.45;
  color:var(--clay); min-height:1em;
}

/* shared details - change once, every page follows */
.editbar__globals{
  display:flex; flex-direction:column; gap:.45rem;
  max-height:min(46vh, 20rem); overflow-y:auto;
  padding-top:.6rem;
  border-top:1px solid rgba(199,205,184,.2);
}
.editbar__field{ display:flex; flex-direction:column; gap:.2rem; }
.editbar__field span{
  font-size:.54rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage-2);
}
.editbar__field input{
  font-family:var(--ui); font-size:.78rem;
  color:var(--bone); background:rgba(245,241,230,.07);
  border:1px solid rgba(199,205,184,.24);
  padding:.4rem .5rem; width:100%;
}
.editbar__field input:focus{
  outline:none; border-color:var(--sage);
  background:rgba(245,241,230,.13);
}

/* while editing: show what is clickable, and hold the page still */
body.editing [contenteditable]{
  outline:1px dashed rgba(184,145,120,.75);
  outline-offset:4px;
  cursor:text;
  border-radius:2px;
}
body.editing [contenteditable]:hover{ outline-color:var(--sage); }
body.editing [contenteditable]:focus{
  outline:2px solid var(--sage); outline-offset:4px;
  background:rgba(199,205,184,.1);
}
body.editing .shot__img{ transform:none !important; }
body.editing .marquee__track{ animation-play-state:paused; }

/* ---------- narrow ---------------------------------------------------------------- */

@media (max-width: 860px){
  .stat__grid{ grid-template-columns:1fr; }
}

@media (max-width: 1000px){
  .bar__link--book{ display:none; }   /* crowds the wordmark before this point */
}

@media (max-width: 760px){
  :root{
    --bar-h:78px; --stroke:1.2px;
    --bar-link-size:calc(var(--link-size) * 2);
  }
  /* CALL far left, wordmark centred, MENU far right. display:contents dissolves
     the two wrapper divs so their links become direct grid children; grid-row:1
     keeps all three on one line - without it the wordmark takes row 1 and CALL,
     wanting a column the cursor has already passed, drops to a second row. */
  .bar__main{ grid-template-rows:1fr; }
  .bar__group{ display:contents; }
  .bar__link--call{ grid-row:1; grid-column:1; justify-self:start; }
  .wordmark{ grid-row:1; grid-column:2; }
  .bar__link--menu{ grid-row:1; grid-column:3; justify-self:end; }

  .panel--shot{ min-height:76svh; }
  .foot{ letter-spacing:.14em; }
  .foot__addr{ line-height:2; }
  /* the two preview bars share the bottom edge - give each half of it */
  .fontbar{ right:.6rem; bottom:.6rem; max-width:calc(50vw - 1rem); }
  .editbar{ left:.6rem;  bottom:.6rem; max-width:calc(50vw - 1rem); }
}

@media (max-width: 420px){
  .bar__link{ padding-left:.5em; letter-spacing:.05em; }
  .wordmark__name{ font-size:1rem; }
  .wordmark__sub{ font-size:.46rem; letter-spacing:.28em; }
}