/* Sol Spa
   Palette is defined once in :root. When the client's logo arrives, sample it and
   replace this block only. Nothing below hard-codes a brand colour. */

:root{
  /* Sampled off the logo, 2026-09-07. Its ground averages #040301 and its bevel runs
     #413319 shadow, #96763e mid, #b99654 light, #f9d98a highlight. The page grounds are
     built up from that black so the whole thing is the logo's own material.
     Every pair below is measured; the figures are in BUILD-NOTES. */
  --ground:#0b0906;
  --ground-2:#120e0a;
  --raise:#1a1410;
  --panel:#251d15;   /* the lightest ground, for the quiet section */
  --contrast:#f6efe1;
  --text-2:#dccbb0;
  --text-3:#b3a184;
  --gold:#b99654;      /* the light bevel: 7.15 on the ground, so it can carry text */
  --gold-lit:#f9d98a;  /* the highlight */
  --gold-pale:#e7cd9a;
  --line:rgba(185,150,84,.20);

  --pad:clamp(1.25rem,5vw,4rem);
  --section-y:clamp(4rem,8vw,8rem);
  --maxw:1220px;
  --callbar:0px;
  --r:14px;
}

/* One light section, not a stripe. On a black and gold page a pale ground has to be an event
   rather than a beat, so only the treatments carousel carries it: that is the one section
   people stop and read in. Everything inside reads the same token names, which is why this
   is one class and not a second stylesheet. PLAYBOOK 3.1.
   A cream, not an off white. The golds are darker than the page's, because the light bevel
   #b99654 measures 2.00 on cream and cannot carry text; #5d4512 clears 5.01 on the deepest
   of the three grounds here. */
.on-light{
  --ground:#efe5d1;    /* cards and anything raised: the lighter of the two */
  --ground-2:#ddcdab;  /* the section ground itself */
  --raise:#d2bf99;
  --contrast:#241c14;
  --text-2:#4f4232;
  --text-3:#5c4e3b;
  --gold:#5d4512;
  --gold-lit:#4d390f;
  --gold-pale:#7a5c18;
  --line:rgba(36,28,20,.18);
  background:var(--ground);
  color:var(--contrast);
}
/* the cards were exactly the colour of the section they sat in, so nothing read as a card */
.six.on-light{background:var(--ground-2)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--contrast);
  font-family:Manrope,system-ui,sans-serif;font-size:clamp(1rem,.94rem + .22vw,1.12rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--callbar);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:.004em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--contrast);color:var(--ground);padding:.6rem 1rem;border-radius:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* type ------------------------------------------------------------------ */
.display{
  font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(2.5rem,1.35rem + 4.9vw,4.7rem);line-height:1.03;letter-spacing:-.012em;
}
.display em,.h2 em,.idea-line em,.quiet-line em{font-style:italic;color:var(--gold)}
.h2{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(1.85rem,1.2rem + 2.6vw,3.05rem);line-height:1.1}
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-lit);margin-bottom:1.05rem;
}
.lead{font-size:clamp(1rem,.94rem + .3vw,1.16rem);color:var(--text-2);max-width:34ch;margin-top:1.3rem}

.sq{display:inline-block;width:6px;height:6px;background:var(--gold);transform:rotate(45deg);
  margin-right:.7rem;flex:0 0 auto;align-self:start;margin-top:calc(.81em - 4.25px)}

/* buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;justify-content:center;
  min-height:48px;padding:.85rem 1.5rem;border-radius:999px;
  font-size:.9rem;font-weight:600;letter-spacing:.02em;text-decoration:none;
  transition:background .25s,color .25s,transform .25s;
}
.btn-sun{background:var(--gold);color:var(--ground)}
.btn-sun:hover{background:var(--gold-lit)}
.btn-line{border:1px solid var(--line);color:var(--contrast)}
.btn-line:hover{background:var(--raise)}
.btn-big{min-height:56px;padding:1rem 1.9rem;font-size:1rem;margin-top:1.9rem}
.ico{flex:0 0 auto}

/* header ---------------------------------------------------------------- */
.head{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1.2rem;
  padding:.85rem var(--pad);
  background:var(--ground);
  border-bottom:1px solid var(--line);
}
.mark{display:flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none}
.foot-mark{display:inline-block;line-height:0}
.foot-mark img{width:min(44vw,186px);height:auto;display:block}
.mark-type{font-family:Fraunces,Georgia,serif;font-size:1.32rem;letter-spacing:.02em;line-height:1}
.mark-art{display:block;flex:0 0 auto;overflow:hidden;
  width:0;opacity:0;transform:translateY(-4px);
  transition:width .45s cubic-bezier(.22,.61,.36,1),opacity .35s ease,transform .45s ease}
.mark-art img{height:56px;width:auto;display:block}
.head.is-stuck .mark-art{width:71px;opacity:1;transform:none}
.mark-type{overflow:hidden;white-space:nowrap;max-width:14em;opacity:1;
  transition:max-width .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease}
.head.is-stuck .mark-type{max-width:0;opacity:0}
@media (prefers-reduced-motion:reduce){.mark-art,.mark-type{transition:none}}
.mark-a{color:var(--contrast)}
.mark-b{color:var(--gold);font-style:italic;margin-left:.32em}
.nav{margin-left:auto;display:flex;gap:2rem}
.nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:.9rem;font-weight:500;color:var(--text-2)}
.nav a:hover{color:var(--gold)}
.head-call{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.88rem;font-weight:600;color:var(--contrast);
  border:1px solid var(--line);border-radius:999px;padding:.6rem 1.05rem;min-height:44px;
}
.head-call:hover{border-color:var(--gold);color:var(--gold)}
.burger{display:none;width:46px;height:46px;margin-left:auto;background:none;border:0;
  padding:12px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:1.5px;background:var(--contrast);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

.drawer{position:fixed;inset:56px 0 auto 0;z-index:39;background:var(--ground);
  border-bottom:1px solid var(--line);padding:1.2rem var(--pad) 1.6rem}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{text-decoration:none;font-family:Fraunces,Georgia,serif;font-size:1.5rem;
  padding:.65rem 0;border-bottom:1px solid var(--line)}
.drawer-call{width:100%;margin-top:1.4rem}

/* hero ------------------------------------------------------------------ */
/* A poster. The other four pages here all open on a photograph with the copy set into it,
   or beside it in a panel: full bleed with copy left, two hard splits, and a card floating
   on the image. The one thing this client has that none of them do is a gold lockup, so it
   leads, and everything else is centred under it on a single vertical axis. */
.open{position:relative;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;overflow:hidden;
  min-height:calc(100dvh - var(--head,84px));
  padding:clamp(2rem,5vh,4rem) 0 clamp(3.5rem,7vh,5rem)}
.open-bg{position:absolute;inset:0;z-index:0}
.open-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;
  transform-origin:52% 45%;animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.13)}}
@media (prefers-reduced-motion:reduce){.open-bg img{animation:none;transform:scale(1.04)}}
.open::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%,rgba(11,9,6,.30) 0%,rgba(11,9,6,.72) 55%,rgba(11,9,6,.94) 100%),
    linear-gradient(180deg,rgba(11,9,6,.78) 0%,rgba(11,9,6,.30) 34%,rgba(11,9,6,.92) 100%)}

.open-poster{position:relative;z-index:2;display:grid;justify-items:center;gap:0}
.open-lockup{display:block;width:min(62vw,300px);margin-bottom:clamp(1.4rem,3vh,2.4rem)}
.open-lockup img{width:100%;height:auto;display:block}
.open-rule{width:64px;height:1px;background:var(--gold);opacity:.7;
  margin:0 auto clamp(1.1rem,2.4vh,1.8rem)}
.open .display{font-size:clamp(2.3rem,1.3rem + 3.4vw,4.2rem)}
.open .lead{max-width:36ch;margin:clamp(.9rem,2vh,1.4rem) auto 0}
.open-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
  margin-top:clamp(1.6rem,3.5vh,2.4rem)}
.open-hours{margin-top:clamp(1rem,2.2vh,1.5rem);font-size:.8rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale)}

/* a thin gold stem, the one hint that the page keeps going */
.open-scroll{position:absolute;left:50%;bottom:clamp(1.2rem,3vh,2.2rem);z-index:2;
  transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center}
.open-scroll span{display:block;width:1px;height:26px;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:stem 2.6s ease-in-out infinite}
@keyframes stem{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.open-scroll span{animation:none;opacity:.8}}

/* idea ------------------------------------------------------------------ */
.idea{background:var(--ground-2);padding-block:var(--section-y)}
.idea-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.8rem,5vw,5rem);align-items:center}
.idea-line{font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(1.9rem,1.2rem + 2.7vw,3.1rem);line-height:1.08;letter-spacing:-.01em}
.idea-body p{color:var(--text-2)}
.ticks{margin-top:1.6rem;display:grid;gap:.85rem}
.ticks li{display:flex;align-items:flex-start;font-size:.95rem;color:var(--text-2)}
.ticks li::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);
  margin:.62rem .8rem 0 0;flex:0 0 auto}

/* the key ----------------------------------------------------------------- */
/* An inverted plate. It was a thin light strip with a heading stranded beside a wide empty
   half, and it read as a toolbar rather than a section. The marks now carry it at size. */
.keys{background:var(--ground-2);color:var(--text-2);padding-block:clamp(4rem,8vw,7.5rem)}
.keys .eyebrow{color:var(--gold-pale)}
.keys-head{text-align:center}
.keys .h2{color:var(--contrast)}
.keys .h2 em{color:var(--gold-pale)}
.keys-lead{margin-top:1.2rem;max-width:44ch;margin-inline:auto;color:var(--text-2)}

.keygrid{margin-top:clamp(2.6rem,5vw,4.2rem);display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,2vw,1.8rem)}
.keymark{display:flex;flex-direction:column;align-items:center;gap:.9rem;
  background:none;border:0;cursor:pointer;padding:1.4rem .5rem 1.2rem;
  border-radius:var(--r);color:var(--gold-pale);font-family:inherit;text-align:center;
  transition:background .35s ease,transform .35s ease}
.keymark svg{width:clamp(46px,5vw,64px);height:clamp(46px,5vw,64px);
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.key-name{display:flex;align-items:flex-start;justify-content:center;min-height:2.3em;
  font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);line-height:1.15;color:var(--contrast)}
.key-press{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3)}
.keymark:hover{background:rgba(185,150,84,.08);transform:translateY(-4px)}
.keymark:hover svg{transform:scale(1.08) rotate(-4deg)}

/* pressure --------------------------------------------------------------- */
.press{padding-block:var(--section-y)}
.press-head{max-width:none}
.press-lead{margin-top:1.1rem;color:var(--text-2);max-width:58ch}
.press-list{margin-top:clamp(2.2rem,4vw,3.4rem);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.8rem,3vw,3rem)}
.press-list li{border-top:1px solid var(--line);padding-top:1.4rem}
.press-num{font-family:Fraunces,Georgia,serif;font-size:.82rem;color:var(--gold-lit);margin-bottom:.7rem}
.press-list h3{font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(1.6rem,1.1rem + 1.5vw,2.3rem);line-height:1.06;margin-bottom:.8rem}
.press-list p{color:var(--text-2)}
.press-which{display:flex;align-items:flex-start;margin-top:1.1rem;font-size:.8rem;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--contrast)}

/* the six --------------------------------------------------------------- */
.six{padding-block:var(--section-y)}
.six-head{text-align:center}
.six-lead{margin-top:1.1rem;color:var(--text-2);max-width:56ch;margin-inline:auto}

/* the carousel.
   Every card swings on the seal in its bottom left corner: the pin stays put on the stage,
   the card rotates about it, and the mark inside the pin changes with the slide. Going
   forward the outgoing card falls away clockwise and the next one rises into place from
   below; going back, both reverse. */
.cara{position:relative;width:min(100%,1120px);margin:clamp(3rem,5vw,4.5rem) auto 0;
  --pin:64px;--swing:9deg;--lift:3%;--shift:116%;
  /* Two cards of the same size cannot crossfade on the same spot: while one is part way
     faded you read both at once. So the leaving card stays opaque and is swept off the
     stage on its hinge, revealing the next one already sitting underneath. Nothing is ever
     part transparent, and nothing is ever missing. */
  --out:620ms;--in:700ms;
  --ease-out:cubic-bezier(.42,0,.7,.36);--ease-in:cubic-bezier(.16,.62,.28,1);
  /* the hinge moves corner with the direction of travel. The script keeps --ox in pixels:
     the right corner going forward, the left corner coming back. */
  --ox:64px}
.stage{position:relative;display:grid;perspective:1600px;overflow:hidden;
  border-radius:var(--r);touch-action:pan-y}
.stage > .pin{grid-area:1/1}
.slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:center;
  border:1px solid var(--line);border-radius:var(--r);background:var(--ground);
  padding:clamp(1.2rem,2vw,1.8rem);
  transform-origin:var(--ox) calc(100% - var(--pin));
  opacity:0;visibility:hidden;pointer-events:none;z-index:1;
  transition:transform var(--out) var(--ease-out),
             opacity 120ms ease-in 500ms,
             visibility 0s linear var(--out)}
.slide.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:1;
  transition:transform 0s,opacity 0s,visibility 0s}
/* The leaving card. It sits above the arriving one and clears out first: it swings off the
   hinge, drifts sideways and drops away, so the next card is never landing on top of it.
   The arriving one gets the mirrored transform inline from the script, so that it is
   committed while the card is already visible. */
.slide.leave-fwd,.slide.leave-back{z-index:2}
.slide.leave-fwd{transform:rotate(var(--swing)) translate(calc(var(--shift) * -1),var(--lift)) scale(.96)}
.slide.leave-back{transform:rotate(calc(var(--swing) * -1)) translate(var(--shift),var(--lift)) scale(.96)}

.slide-photo{display:block;border-radius:calc(var(--r) - 3px);overflow:hidden;background:var(--ground-2)}
.slide-photo img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block}
.slide-body{padding:clamp(.5rem,1.6vw,1.4rem) calc(var(--pin) + .4rem)
  calc(var(--pin) + .5rem) clamp(.5rem,1.6vw,1rem)}
.slide-num{font-family:Fraunces,Georgia,serif;font-size:.82rem;color:var(--text-3);margin-bottom:.5rem}
.slide h3{font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);line-height:1.04;margin-bottom:.9rem}
.slide-desc{color:var(--text-2);max-width:44ch}
.slide-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.slide-facts span{font-size:.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3)}
.slide-facts span + span::before{content:"";display:inline-block;width:5px;height:5px;
  background:var(--gold);transform:rotate(45deg);margin-right:.6rem;position:relative;top:-1px}
.slide-call{display:inline-flex;align-items:center;min-height:44px;margin-top:.5rem;
  font-size:.88rem;font-weight:600;color:var(--gold-lit);text-decoration:none}
.slide-call span{border-bottom:1px solid var(--gold-pale);padding-bottom:2px}
.slide-call:hover span{border-bottom-color:var(--gold)}

/* the hinge itself */
.pin{position:absolute;left:0;top:calc(100% - var(--pin));
  transform:translate(calc(var(--ox) - 50%),-50%);
  transition:transform var(--out) var(--ease-in);
  width:66px;height:66px;display:grid;place-items:center;border-radius:50%;
  background:var(--gold);color:var(--ground);box-shadow:0 0 0 7px var(--ground);z-index:3;
  pointer-events:none}
.pin-mark{grid-area:1/1;width:36px;height:36px;opacity:0;transform:scale(.86) rotate(-10deg);
  transition:opacity 380ms ease 160ms,transform var(--in) var(--ease-in)}
.pin-mark.is-on{opacity:1;transform:none}

.cara-bar{display:flex;align-items:center;gap:1.4rem;margin-top:1.4rem;flex-wrap:wrap}
.cara-arrows{display:flex;gap:.5rem}
.arrow{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;background:none;color:var(--contrast);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.arrow:hover{background:var(--ground-2);border-color:var(--raise);color:var(--gold-lit)}
.dots{display:flex;flex-wrap:wrap;gap:.35rem;margin-right:auto}
.dot{width:26px;height:44px;background:none;border:0;cursor:pointer;padding:0;position:relative}
.dot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;background:var(--raise);transition:background .3s,width .3s}
.dot:hover::after{background:var(--gold-pale)}
.dot.is-on::after{width:22px;border-radius:5px;background:var(--gold)}
.hold{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 .3rem;
  background:none;border:0;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.hold:hover{color:var(--contrast)}
.hold-ico{width:11px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hold[aria-pressed="true"] .hold-ico{border:0;width:0;height:0;
  border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

.unsure{margin-top:clamp(3rem,6vw,5.5rem);background:var(--ground-2);border-radius:var(--r);
  padding:clamp(1.8rem,3.5vw,3rem)}
.unsure-title{font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin-bottom:1.3rem}
.unsure-list{display:grid;gap:.9rem;max-width:70ch}
.unsure-list li{display:flex;align-items:flex-start;color:var(--text-2)}
.unsure-list em{font-style:normal;font-weight:600;color:var(--contrast)}
.six-note .sq{background:var(--text-3)}
.six-note{display:flex;align-items:flex-start;margin-top:1.8rem;font-size:.88rem;color:var(--text-3);max-width:56ch}

/* the sun path ----------------------------------------------------------- */
/* The ground warms as you scroll it, ivory at the top through to amber at the bottom, and
   a sun travels the arc with you. The colour and the sun position are both driven from one
   scroll progress value the script writes as --p, so they can never fall out of step. */
.sunpath{padding-block:var(--section-y);background:var(--ground);--p:0}
.sun-head{text-align:center}
.sun-stage{position:relative;width:100%;margin:clamp(2rem,4vw,3.5rem) 0 clamp(1rem,2vw,1.6rem);
  aspect-ratio:1000/300;container-type:inline-size}
.sun-arc{position:absolute;inset:0;width:100%;height:100%}
.sun-line{stroke:rgba(185,150,84,.24);stroke-width:1.5;vector-effect:non-scaling-stroke}
/* not .sun-disc: that name once belonged to a circle behind the hero and reusing it here
   silently restyled the hero. That element is gone, the caution is not. */
.sun-ball{position:absolute;left:0;top:0;
  width:clamp(26px,3.4vw,40px);height:clamp(26px,3.4vw,40px);
  border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 calc(6px + 14px * var(--p)) rgba(249,217,138,.14),
             0 0 clamp(18px,3vw,40px) rgba(249,217,138,.40);
  transform:translate(-50%,-50%)}

.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem)}
.way{transform:translateY(14px);transition:transform .6s ease}
.way.is-lit{transform:none}
.way-time{display:flex;align-items:center;gap:.6rem}
.way-time::before{content:"";width:7px;height:7px;flex:0 0 auto;transform:rotate(45deg);
  background:var(--line);transition:background .5s ease}
.way.is-lit .way-time::before{background:var(--gold)}
.way-time{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-lit);margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem}
.way h3{font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem);line-height:1.08;margin-bottom:.6rem}
.way p{color:var(--text-2);font-size:.95rem}

/* breathe ---------------------------------------------------------------- */
.breathe{background:var(--ground-2);padding-block:var(--section-y)}
.breathe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center}
.breathe-copy p{color:var(--text-2);max-width:40ch;margin-top:1.2rem}
.breathe-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  margin-top:1.9rem;padding:.85rem 1.9rem;border:1px solid var(--gold);border-radius:999px;
  background:none;cursor:pointer;font-family:inherit;font-size:.86rem;font-weight:600;
  letter-spacing:.04em;color:var(--gold);
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.breathe-btn:hover{background:var(--gold);color:var(--ground)}
.breathe-btn[aria-pressed="true"]{background:var(--gold);color:var(--ground)}

.breathe-stage{display:grid;place-items:center;padding-bottom:3.4rem}
.orb{position:relative;display:grid;place-items:center;
  width:min(100%,300px);aspect-ratio:1;--s:0}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.orb-fill{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,var(--gold-pale),var(--gold) 72%);
  opacity:calc(.28 + .34 * var(--s));
  transform:translate(-50%,-50%) scale(calc(.46 + .54 * var(--s)))}
.orb-word{position:absolute;left:50%;top:calc(100% + 1.1rem);transform:translateX(-50%);
  white-space:nowrap;font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);color:var(--contrast)}

@media (max-width:860px){
  .ways{grid-template-columns:1fr;gap:1.8rem}
  .breathe-grid{grid-template-columns:1fr;gap:2.4rem}
  .orb{width:min(66vw,240px)}
}
@media (prefers-reduced-motion:reduce){
  .sun-ball{transition:none}
  .way{transform:none;transition:none}
  .orb-fill{transition:none}
}

/* quiet ----------------------------------------------------------------- */
.quiet{background:var(--panel);color:var(--contrast);padding-block:clamp(4.5rem,9vw,9rem);text-align:center}
.quiet-line{font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(1.9rem,1.1rem + 3.1vw,3.4rem);line-height:1.16}
.quiet-line em{color:var(--gold-pale)}

/* visit ----------------------------------------------------------------- */
.visit{padding-block:var(--section-y)}
.visit-grid{display:grid;place-items:center;text-align:center}
.visit-copy p{margin-inline:auto}
.visit-copy p{color:var(--text-2);max-width:46ch;margin-top:1.3rem}
.visit-list{display:grid;gap:.8rem;margin-top:1.8rem;text-align:left;max-width:46ch}
.visit-list li{display:flex;align-items:flex-start;color:var(--text-2);font-size:.95rem}

/* footer ---------------------------------------------------------------- */
.foot{background:var(--ground-2);border-top:1px solid var(--line);padding-block:clamp(3rem,5vw,4rem)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);align-items:start;text-align:left}
.foot-brand{display:grid;justify-items:start;gap:.9rem}
.foot-line{color:var(--text-2);font-size:.95rem;max-width:34ch}
.foot-note{color:var(--text-3);font-size:.85rem;max-width:34ch}
.foot-h{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:1.1rem;
  color:var(--contrast);margin-bottom:1rem}
.foot-col ul{display:grid}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  font-size:.92rem;color:var(--text-2)}
.foot-col a:hover{color:var(--gold)}
.foot-base{display:flex;justify-content:space-between;gap:.4rem 1.6rem;flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--text-3)}
.foot-tel{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-family:Fraunces,Georgia,serif;font-size:1.25rem;color:var(--contrast)}
.foot-tel:hover{color:var(--gold)}

/* sticky call bar (mobile only) ----------------------------------------- */
.callbar{display:none}

/* reveal ---------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .slide,.pin-mark,.pin{transition:opacity .3s ease}
  .slide.leave-fwd,.slide.leave-back{transform:none}
}

/* structural breakpoints ------------------------------------------------ */
@media (max-width:1023px){
  .keygrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .press-list{grid-template-columns:1fr;gap:0}
  .press-list li{padding-block:1.4rem}
}
@media (max-width:760px){
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1rem;
    justify-items:center;text-align:center}
  .foot-brand{grid-column:1/-1;justify-items:center}
  .foot-col ul{justify-items:center}
  .foot-mark img{width:min(52vw,190px)}
  .foot-base{justify-content:center;text-align:center}
  .keygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cara{--pin:48px;--swing:5.5deg}
  .slide{grid-template-columns:1fr;gap:.9rem;align-items:start;padding:1rem}
  .slide-photo img{aspect-ratio:16/9}
  .slide-body{padding:0 calc(var(--pin) + .2rem) calc(var(--pin) - .4rem) .4rem}
  .slide h3{font-size:1.55rem;margin-bottom:.5rem}
  .slide-desc{font-size:.95rem;line-height:1.5}
  .slide-facts{margin-top:.85rem}
  /* the sticky call bar carries this on a phone, so the per card link only costs height */
  .slide-call{display:none}
  .pin{width:54px;height:54px}
  .pin-mark{width:30px;height:30px}
  .cara-bar{gap:.7rem}
  .hold-txt{display:none}
  .dot{width:22px}
}
@media (max-width:860px){
  .nav{display:none}
  .head-call{display:none}
  .burger{display:flex}
  .idea-grid{grid-template-columns:1fr}
  :root{--callbar:calc(60px + env(safe-area-inset-bottom))}
  /* Pinned to the dynamic viewport rather than to bottom: 0. Chrome's URL bar changes the
     visible height as you scroll, and a bottom-anchored fixed element does not follow it,
     which leaves a strip of page under the bar. Spararaa learned this the hard way; this is
     the same treatment. It stays out of sight until you are half a screen down, like every
     other page here. */
  .callbar{
    display:flex;position:fixed;left:0;right:0;top:0;z-index:45;
    align-items:center;justify-content:center;gap:.55rem;
    min-height:60px;padding-bottom:min(env(safe-area-inset-bottom,0px),8px);
    background:var(--gold);color:var(--ground);text-decoration:none;
    font-size:.86rem;font-weight:600;letter-spacing:.02em;
    transform:translateY(100dvh);
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
  }
  .callbar.is-on{transform:translateY(calc(100dvh - 100%))}
}