/*
  Eden Hair Boutique Template CSS
  STRICT DESIGN LAW

  Do not redesign.
  Do not change colours, fonts, spacing, buttons, cards, layout, or animations unless James explicitly asks.

  All future public pages and admin pages must use this file.
  Admin pages must match the public Eden Hair Boutique theme.
*/

  :root{
    --olive:#5C6335;
    --olive-deep:#3F4523;
    --ink:#262A15;
    --gold:#C9B478;
    --gold-light:#EBDDB2;
    --gold-deep:#A8905A;
    --ivory:#F7F4EA;
    --paper:#F1EDDD;
    --display:'Cormorant Garamond',serif;
    --body:'Karla',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);font-weight:300;font-size:16.5px;line-height:1.75;color:var(--ink);background:var(--ivory)}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
  .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}

  .kicker{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep)}
  .display{font-family:var(--display);font-weight:400;line-height:1.05}
  .rule{height:1px;background:currentColor;opacity:.3}

  /* reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none}}

  /* ---------- masthead ---------- */
  .topbar{border-bottom:1px solid rgba(38,42,21,.25);background:var(--ivory);position:sticky;top:0;z-index:60}
  .topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(20px,5vw,56px);max-width:1240px;margin:0 auto;font-size:11px;letter-spacing:.3em;text-transform:uppercase}
  .topbar .mark{font-family:var(--display);font-size:24px;letter-spacing:.32em;text-transform:uppercase}
  .topbar ul{display:flex;gap:clamp(14px,2.6vw,34px);list-style:none}
  .topbar a:hover{color:var(--gold-deep)}
  .topbar .book-link{border:1px solid var(--ink);padding:8px 18px;transition:background .25s,color .25s,border-color .25s}
  .topbar .book-link:hover{background:var(--olive);border-color:var(--olive);color:var(--gold-light)}
  @media(max-width:820px){.topbar ul li:not(.keep){display:none}}

  /* ---------- hero: editorial cover ---------- */
  .cover{padding:clamp(40px,6vw,80px) 0 0;position:relative}
  .cover-meta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(38,42,21,.6);padding-bottom:16px;border-bottom:1px solid rgba(38,42,21,.25)}
  .cover-title{font-family:var(--display);font-weight:400;font-size:clamp(78px,15.5vw,220px);letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:.95;margin:clamp(24px,4vw,48px) 0 0;color:var(--ink)}
  .cover-title em{font-style:italic;color:var(--olive)}
  .cover-sub{text-align:center;font-size:12px;letter-spacing:.55em;text-transform:uppercase;color:var(--gold-deep);margin-top:10px}

  .cover-grid{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:16px;align-items:end;margin-top:clamp(32px,5vw,64px)}
  .plate{position:relative;background:linear-gradient(165deg,var(--olive) 0%,var(--olive-deep) 100%);overflow:hidden}
  .plate::after{content:"";position:absolute;inset:12px;border:1px solid rgba(235,221,178,.3);pointer-events:none}
  .plate figcaption{position:absolute;left:16px;bottom:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);z-index:2}
  .plate.a{aspect-ratio:3/4}
  .plate.b{aspect-ratio:4/5}
  .plate.c{aspect-ratio:3/4.4}
  .plate.light{background:linear-gradient(165deg,var(--paper),#E3DCC2)}
  .plate.light::after{border-color:rgba(92,99,53,.35)}
  .plate.light figcaption{color:var(--olive-deep)}
  .cover-cta{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(24px,4vw,52px);z-index:3;background:var(--ink);color:var(--gold-light);padding:16px 40px;font-size:12px;letter-spacing:.34em;text-transform:uppercase;transition:background .25s}
  .cover-cta:hover{background:var(--olive)}
  @media(max-width:700px){.cover-grid{grid-template-columns:1fr;max-width:min(420px,100%);margin-left:auto;margin-right:auto;align-items:stretch}.cover-grid .welcome-card-feature{order:-1;transform:none}}

  /* ---------- welcome cards in cover-grid ---------- */
  .cover-grid .welcome-card{position:relative;overflow:hidden;min-height:0;border-radius:0;border:none}
  .cover-grid .welcome-card-left{aspect-ratio:3/4}
  .cover-grid .welcome-card-feature{aspect-ratio:4/5}
  .cover-grid .welcome-card-right{aspect-ratio:3/4.4}
  .cover-grid .welcome-card-inner{position:absolute;inset:12px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:0;overflow:hidden;z-index:1}
  .cover-grid .welcome-card-side{background:linear-gradient(165deg,var(--paper),#E3DCC2);color:var(--ink);box-shadow:0 16px 36px rgba(38,42,21,.06)}
  .cover-grid .welcome-card-side::after{content:"";position:absolute;inset:12px;border:1px solid rgba(92,99,53,.35);pointer-events:none;z-index:2}
  .cover-grid .welcome-card-feature{background:linear-gradient(168deg,var(--olive) 0%,var(--olive-deep) 100%);color:var(--ivory);box-shadow:0 22px 48px rgba(38,42,21,.14)}
  .cover-grid .welcome-card-feature::after{content:"";position:absolute;inset:12px;border:1px solid rgba(235,221,178,.3);pointer-events:none;z-index:2}
  .cover-grid .welcome-card-copy{flex:0 0 auto;width:100%;min-height:0;padding:0 2px}
  .cover-grid .welcome-card-fig{display:block;margin:0 0 8px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep)}
  .cover-grid .welcome-card-feature .welcome-card-fig{color:var(--gold-light)}
  .cover-grid .welcome-card-title{font-family:var(--display);font-weight:400;font-size:clamp(18px,2vw,26px);letter-spacing:.03em;line-height:1.12;margin:0 0 8px}
  .cover-grid .welcome-card-side .welcome-card-title{font-size:clamp(16px,1.75vw,22px)}
  .cover-grid .welcome-card-rule{display:block;width:38px;height:1px;margin:0 auto 10px;background:var(--gold-deep);opacity:.5}
  .cover-grid .welcome-card-feature .welcome-card-rule{background:var(--gold-light);opacity:.45}
  .cover-grid .welcome-card-text{font-size:clamp(10px,1vw,12px);line-height:1.52;color:rgba(38,42,21,.78);max-width:30ch;margin:0 auto 12px;padding:0 2px}
  .cover-grid .welcome-card-feature .welcome-card-text{color:rgba(247,244,234,.88);max-width:28ch;margin-bottom:10px}
  .cover-grid .welcome-card-btn{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 8px;padding:9px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--body);font-size:9px;letter-spacing:.24em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s;white-space:nowrap;flex-shrink:0}
  .cover-grid .welcome-card-btn:hover{background:var(--olive);border-color:var(--olive);color:var(--gold-light)}
  .cover-grid .welcome-card-btn--feature{border-color:var(--gold-light);color:var(--gold-light)}
  .cover-grid .welcome-card-btn--feature:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--olive-deep)}
  .cover-grid .welcome-card-left .welcome-card-image-frame{width:88%;height:30%;min-height:130px;max-height:38%;flex-shrink:0;margin-top:auto;border:1px solid rgba(201,180,120,.65);border-radius:999px 999px 18px 18px;overflow:hidden;background:rgba(241,237,221,.35)}
  .cover-grid .welcome-card-feature .welcome-card-inner{justify-content:flex-start;padding-bottom:56px}
  .cover-grid .welcome-card-feature .welcome-card-copy{flex:0 0 auto}
  .cover-grid .welcome-card-feature .welcome-card-image-frame{width:100%;flex:1 1 auto;min-height:0;margin-top:10px;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;padding-top:8%;box-sizing:border-box;border:none;outline:none;box-shadow:none;background:transparent;border-radius:0;overflow:hidden;transform:translateY(44px)}
  .cover-grid .welcome-card-feature .welcome-card-feature-btn{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;width:min(320px,72%);margin:0}
  .cover-grid .welcome-card-right .welcome-card-image-frame{width:88%;height:30%;min-height:130px;max-height:38%;flex-shrink:0;margin-top:auto;border:1px solid rgba(201,180,120,.65);border-radius:18px;overflow:hidden;background:rgba(241,237,221,.35)}
  .cover-grid .welcome-card-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
  .cover-grid .welcome-card-left .welcome-card-image{object-position:center 62%}
  .cover-grid .welcome-card-feature .welcome-card-feature-image,
  .cover-grid .welcome-card-feature .welcome-card-image{display:block;width:auto;height:auto;max-width:100%;max-height:72%;object-fit:contain;object-position:center bottom;transform:scale(1.484375);transform-origin:center bottom;border-radius:0}
  .cover-grid .welcome-card-right .welcome-card-image{object-position:center center;border-radius:0}

  /* ---------- ticker strip ---------- */
  .strip{background:var(--ink);color:var(--gold-light);overflow:hidden;padding:13px 0;border-top:1px solid var(--gold-deep)}
  .strip-track{display:flex;gap:56px;white-space:nowrap;font-size:11px;letter-spacing:.4em;text-transform:uppercase;animation:tick var(--strip-roll-duration,30s) linear infinite;width:max-content}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.strip-track{animation:none}}
  .strip span::after{content:"✦";margin-left:56px;color:var(--gold-deep)}

  /* ---------- section headers (magazine dept style) ---------- */
  .dept{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:baseline;margin-bottom:clamp(36px,5vw,60px)}
  .dept .no{font-family:var(--display);font-style:italic;font-size:20px;color:var(--gold-deep)}
  .dept h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,58px);letter-spacing:.04em;text-transform:uppercase;line-height:1}
  .dept .rule{align-self:center}
  section{padding:clamp(70px,9vw,120px) 0}

  /* ---------- gallery: editorial spread ---------- */
  #work{background:var(--ivory)}
  #work .spread .plate.work-plate{box-shadow:0 16px 36px rgba(38,42,21,.06)}
  #work .spread .plate.work-plate:not(.light){box-shadow:0 22px 48px rgba(38,42,21,.14)}
  #work .spread .plate.work-plate .work-plate-image-wrap{position:absolute;inset:12px;overflow:hidden;z-index:1;border:1px solid rgba(201,180,120,.65)}
  #work .spread .plate.work-plate:not(.light) .work-plate-image-wrap{border-color:rgba(235,221,178,.3)}
  #work .spread .plate.work-plate.light .work-plate-image-wrap{border-color:rgba(92,99,53,.35)}
  #work .spread .plate.work-plate::after{z-index:3}
  #work .spread .plate.work-plate .work-plate-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
  #work .spread .plate.work-plate,#work .spread .plate.work-plate:nth-child(even){clip-path:inset(0 100% 0 0)}
  #work .spread.in .plate.work-plate{clip-path:inset(0 0 0 0) !important}
  .spread{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
  .spread .plate{grid-column:span 4}
  .spread .plate:nth-child(1){grid-column:span 5;aspect-ratio:4/5}
  .spread .plate:nth-child(2){grid-column:span 3;aspect-ratio:3/4.6;align-self:end}
  .spread .plate:nth-child(3){grid-column:span 4;aspect-ratio:1/1.15}
  .spread .plate:nth-child(4){grid-column:span 3;aspect-ratio:3/4;align-self:start}
  .spread .plate:nth-child(5){grid-column:span 5;aspect-ratio:16/11}
  .spread .plate:nth-child(6){grid-column:span 4;aspect-ratio:1/1.2}
  .spread-note{margin-top:20px;font-size:13px;font-style:italic;color:rgba(38,42,21,.55);max-width:52ch;line-height:1.7}
  .spread-note .kicker{display:block;margin-bottom:10px;font-style:normal;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep)}
  @media(max-width:760px){.spread{grid-template-columns:1fr 1fr}.spread .plate{grid-column:span 1 !important;aspect-ratio:3/4 !important}}

  /* ---------- pull quote ---------- */
  .quote{background:var(--olive);color:var(--ivory);text-align:center}
  .quote blockquote{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(28px,4.6vw,52px);line-height:1.25;max-width:900px;margin:0 auto}
  .quote blockquote strong{font-style:normal;font-weight:500;color:var(--gold-light)}
  .quote .kicker{color:var(--gold-light);display:block;margin-top:28px}

  /* ---------- services: price index ---------- */
  #services{background:var(--paper)}
  .index,.price-index-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
  .index-col{align-self:start;min-width:0}
  .index-col h3{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--olive-deep);border-bottom:1px solid rgba(38,42,21,.35);padding-bottom:12px;margin-bottom:8px}
  .line{padding:15px 0;border-bottom:1px solid rgba(38,42,21,.14)}
  .line-body{min-width:0}
  .line-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
  .line .nm{font-family:var(--display);font-size:21px;letter-spacing:.02em;flex:1;min-width:0}
  .line .pr{font-size:14px;letter-spacing:.14em;color:var(--olive-deep);white-space:nowrap;flex-shrink:0;text-align:right}
  .line .ds{display:block;font-size:13px;color:rgba(38,42,21,.6);font-family:var(--body);margin-top:6px;max-width:42ch;line-height:1.6}
  .line .du{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-top:4px}
  .index-note{grid-column:1/-1;font-size:13px;font-style:italic;color:rgba(38,42,21,.55);text-align:center;margin-top:8px}
  .index-actions{grid-column:1/-1;display:flex;justify-content:center;margin-top:clamp(20px,3vw,36px)}
  .theme-btn{display:inline-block;background:var(--ink);color:var(--gold-light);border:1px solid var(--ink);padding:16px 40px;font-family:var(--body);font-size:12px;letter-spacing:.34em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
  .theme-btn:hover{background:var(--olive);border-color:var(--olive)}
  .theme-btn--outline{background:transparent;color:var(--ink)}
  .theme-btn--outline:hover{background:var(--olive);color:var(--gold-light)}
  @media(max-width:760px){.index{grid-template-columns:1fr}}

  /* ---------- treatments page ---------- */
  .treatments-page{background:var(--paper);padding:clamp(70px,9vw,120px) 0}
  .treatments-page-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
  .treatments-page-grid .index-col h3{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--olive-deep);border-bottom:1px solid rgba(38,42,21,.35);padding-bottom:12px;margin-bottom:8px}
  .treatments-disclaimer{grid-column:1/-1;font-size:14px;line-height:1.7;color:rgba(38,42,21,.72);border-top:1px solid rgba(38,42,21,.14);padding-top:clamp(24px,4vw,36px);margin-top:clamp(8px,2vw,16px)}
  .treatments-book{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:clamp(28px,4vw,44px)}
  @media(max-width:760px){.treatments-page-grid{grid-template-columns:1fr}}

  /* ---------- about: feature spread ---------- */
  #about{background:var(--ivory)}
  .feature{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
  .feature .plate{aspect-ratio:3/4}
  .feature-copy .headline{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.12;margin:14px 0 26px}
  .feature-copy .headline em{font-style:italic;color:var(--olive)}
  .feature-copy p{margin-bottom:18px;color:rgba(38,42,21,.85)}
  .feature-copy p:first-of-type::first-letter{font-family:var(--display);font-size:64px;float:left;line-height:.8;padding:6px 10px 0 0;color:var(--olive)}
  .byline{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);margin-top:10px}
  #about .stylist-portrait-stack,#about .stylist-copy-stack{display:grid;grid-template-columns:1fr}
  #about .stylist-portrait-stack{aspect-ratio:3/4}
  #about .stylist-content-panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s ease}
  #about .stylist-content-panel--active{opacity:1;visibility:visible}
  #about .stylist-portrait-image-wrap{position:absolute;inset:12px;overflow:hidden;z-index:1}
  #about .stylist-portrait-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
  #about .stylist-portrait-stack .plate::after{z-index:2}
  @media(max-width:820px){.feature{grid-template-columns:1fr}}

  /* ---------- boutique shelf ---------- */
  #shop{background:var(--ink);color:var(--ivory)}
  #shop .dept h2{color:var(--ivory)}
  #shop .dept{color:var(--ivory)}
  .shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(235,221,178,.25);border:1px solid rgba(235,221,178,.25)}
  .item{background:var(--ink);padding:clamp(24px,3.5vw,44px);transition:background .3s}
  .item:hover{background:var(--olive-deep)}
  .item .n{font-family:var(--display);font-style:italic;font-size:17px;color:var(--gold);margin-bottom:14px;display:block}
  .item h4{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.03em;margin-bottom:10px}
  .item p{font-size:14px;color:rgba(247,244,234,.7);margin-bottom:18px}
  .item .pline{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(235,221,178,.25);padding-top:16px}
  .item .pline .p{font-family:var(--display);font-size:20px;color:var(--gold-light)}
  .item .pline a{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold-deep);padding-bottom:2px}
  @media(max-width:760px){.shelf{grid-template-columns:1fr}}

  /* ---------- booking ---------- */
  #book{background:var(--paper)}
  .book-split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,6vw,90px)}
  .book-left .big{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,58px);line-height:1.08;text-transform:uppercase;letter-spacing:.03em;margin:12px 0 24px}
  .book-left .big em{font-style:italic;color:var(--olive);text-transform:none;letter-spacing:0}
  .book-left p{color:rgba(38,42,21,.8);margin-bottom:26px}
  .hours{list-style:none;font-size:14px;letter-spacing:.06em}
  .hours li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(38,42,21,.18)}
  .hours .d{color:var(--olive-deep);text-transform:uppercase;font-size:12px;letter-spacing:.24em}
  form{display:grid;gap:18px}
  .f label{display:block;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--olive-deep);margin-bottom:8px}
  .f input,.f select,.f textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(38,42,21,.4);padding:10px 2px;font-family:var(--body);font-weight:300;font-size:16px;color:var(--ink);transition:border-color .2s}
  .f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--olive)}
  .r2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  form button{margin-top:8px;background:var(--ink);color:var(--gold-light);border:1px solid var(--ink);padding:17px;font-family:var(--body);font-size:12px;letter-spacing:.34em;text-transform:uppercase;cursor:pointer;transition:background .25s}
  form button:hover{background:var(--olive)}
  .fnote{font-size:12.5px;font-style:italic;color:rgba(38,42,21,.55)}
  .reservation-form-status.is-error{color:var(--ink);font-style:normal}
  @media(max-width:820px){.book-split{grid-template-columns:1fr}.r2{grid-template-columns:1fr}}

  /* ---------- footer colophon ---------- */
  footer{background:var(--ink);color:var(--ivory);padding:clamp(60px,8vw,96px) 0 36px;border-top:3px double var(--gold-deep)}
  .colophon{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
  .colophon .mark{font-family:var(--display);font-size:clamp(34px,4vw,48px);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-light);line-height:1.1}
  .colophon .mark small{display:block;font-family:var(--body);font-size:10px;letter-spacing:.5em;color:var(--gold);margin-top:8px}
  .colophon h5{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:400}
  .colophon ul{list-style:none;font-size:14px}
  .colophon li{margin-bottom:8px}
  .footer-social{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .footer-social-link{display:inline-flex;line-height:0;opacity:.92;transition:opacity .25s ease}
  .footer-social-link:hover{opacity:1}
  .footer-social-link object{width:48px;height:48px;pointer-events:none;display:block}
  .colophon a:hover{color:var(--gold-light)}
  .imprint{margin-top:52px;padding-top:20px;border-top:1px solid rgba(235,221,178,.2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,244,234,.45)}
  @media(max-width:820px){.colophon{grid-template-columns:1fr 1fr}}

  /* ============ CINEMATIC ANIMATIONS ============ */

  /* hero title: focus pull — starts blurred & tracked-out, sharpens & settles */
  .cover-title{opacity:0;filter:blur(14px);letter-spacing:.3em;animation:focusPull 1.8s cubic-bezier(.25,.7,.2,1) .3s forwards}
  @keyframes focusPull{
    0%{opacity:0;filter:blur(14px);letter-spacing:.3em}
    45%{opacity:1}
    100%{opacity:1;filter:blur(0);letter-spacing:.06em}
  }
  .cover-sub{opacity:0;filter:blur(6px);animation:softFocus 1s ease 1.7s forwards}
  @keyframes softFocus{to{opacity:1;filter:blur(0)}}

  /* meta line: revealed by a gold panel wiping across */
  .cover-meta{position:relative;overflow:hidden}
  .cover-meta::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);animation:panelWipe 1.2s cubic-bezier(.7,0,.2,1) .1s forwards}
  .cover-meta span{opacity:0;animation:justShow .01s linear .7s forwards}
  @keyframes panelWipe{0%{transform:translateX(-101%)}45%{transform:translateX(0)}55%{transform:translateX(0)}100%{transform:translateX(101%)}}
  @keyframes justShow{to{opacity:1}}

  /* hero welcome cards: shutter unmask from bottom as one locked unit */
  .cover-grid .welcome-card{clip-path:inset(100% 0 0 0);animation:unmask 1.2s cubic-bezier(.7,0,.2,1) forwards}
  .cover-grid .plate{clip-path:inset(100% 0 0 0);animation:unmask 1.2s cubic-bezier(.7,0,.2,1) forwards}
  .cover-grid .plate:nth-child(1){animation-delay:1.5s}
  .cover-grid .plate:nth-child(2){animation-delay:1.7s}
  .cover-grid .plate:nth-child(3){animation-delay:1.9s}
  @keyframes unmask{to{clip-path:inset(0 0 0 0)}}

  /* Ken Burns: gradient backgrounds slowly breathe */
  .plate{position:relative}
  .plate .kb{position:absolute;inset:0;background:inherit;animation:kenburns 14s ease-in-out infinite alternate;transform-origin:center}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
  .plate::after{z-index:2}
  .plate figcaption{z-index:3}

  /* section headers: block wipe — an olive panel sweeps across revealing the title */
  .dept h2{position:relative;display:inline-block;overflow:hidden}
  .dept h2 i{font-style:normal;opacity:0;transition:opacity .01s .5s}
  .dept.in h2 i{opacity:1}
  .dept h2::after{content:"";position:absolute;inset:0;background:var(--olive);transform:scaleX(0);transform-origin:left}
  .dept.in h2::after{animation:blockWipe 1.1s cubic-bezier(.7,0,.2,1) forwards}
  @keyframes blockWipe{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
  .dept .no{opacity:0;filter:blur(4px);transition:opacity .8s ease .8s,filter .8s ease .8s}
  .dept.in .no{opacity:1;filter:blur(0)}
  .dept .rule{opacity:0;transition:opacity 1s ease 1s}
  .dept.in .rule{opacity:.3}

  /* spread plates: alternating directional unmasks on scroll */
  .spread .plate,.feature .plate{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s cubic-bezier(.7,0,.2,1)}
  .spread .plate:nth-child(even){clip-path:inset(0 0 0 100%)}
  .spread.in .plate,.feature.in .plate{clip-path:inset(0 0 0 0) !important}
  .spread .plate:nth-child(2){transition-delay:.12s}
  .spread .plate:nth-child(3){transition-delay:.24s}
  .spread .plate:nth-child(4){transition-delay:.36s}
  .spread .plate:nth-child(5){transition-delay:.48s}
  .spread .plate:nth-child(6){transition-delay:.6s}

  /* pull quote: one slow cinematic focus pull, whole block at once */
  .quote blockquote{opacity:0;filter:blur(10px);transform:scale(.97);transition:opacity 1.4s ease,filter 1.4s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
  .quote.in blockquote{opacity:1;filter:blur(0);transform:none}
  .quote .kicker{opacity:0;transition:opacity 1s ease 1.1s}
  .quote.in .kicker{opacity:1}

  /* price lines: gold highlight flash sweeps through each line */
  .line{position:relative;overflow:hidden;opacity:0;transition:opacity .5s ease}
  .line::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(201,180,120,.35) 50%,transparent 80%);transform:translateX(-120%)}
  .index.in .line{opacity:1}
  .index.in .line::after{animation:flash 1s ease forwards}
  @keyframes flash{to{transform:translateX(120%)}}

  /* 3D tilt on plates (JS-driven) — not cover-grid welcome cards */
  .spread .plate,.feature .plate{transition-property:clip-path,transform;transition-duration:1.15s,.2s;transition-timing-function:cubic-bezier(.7,0,.2,1),ease-out;transform-style:preserve-3d;will-change:transform}

  /* magnetic CTA (JS-driven nudge) */
  .cover-cta,form button{transition:transform .18s ease-out,background .25s,color .25s;will-change:transform}

  /* reduced motion: everything static */
  @media(prefers-reduced-motion:reduce){
    .cover-title,.cover-sub,.cover-meta span,.cover-grid .welcome-card,.cover-grid .plate,.cover-cta,.plate .kb{animation:none !important;opacity:1 !important;filter:none !important;clip-path:none !important;letter-spacing:.06em}
    .cover-meta::after,.dept h2::after,.line::after{display:none}
    .dept h2 i,.dept .no,.dept .rule,.quote blockquote,.quote .kicker,.line{opacity:1 !important;filter:none !important;transform:none !important;transition:none !important}
    .dept .rule{opacity:.3 !important}
    .spread .plate,.feature .plate{clip-path:none !important;transform:none !important}
  }

  /* ============ LOGO HERO — brand lockup on ivory ============ */
  .cover-meta{color:rgba(38,42,21,.6);border-bottom-color:rgba(38,42,21,.25)}
  .lockup{text-align:center;padding:clamp(30px,5vw,60px) 0 0}

  .cover-title{
    font-family:'Italiana',serif;font-weight:400;
    font-size:clamp(60px,12.5vw,164px);
    line-height:1;text-transform:uppercase;text-align:center;margin:0;
    background:linear-gradient(115deg,#C9B478 10%,#A8905A 50%,#C9B478 90%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    padding-left:.3em; /* offsets trailing tracking so it sits centred */
    letter-spacing:.85em;
    animation-name:logoPull;animation-duration:1.9s;animation-delay:.3s;
  }
  @keyframes logoPull{
    0%{opacity:0;filter:blur(14px);letter-spacing:.85em}
    40%{opacity:1}
    100%{opacity:1;filter:blur(0);letter-spacing:.3em}
  }

  .lockup-branch{max-width:min(620px,84vw);margin:clamp(10px,2vw,22px) auto 0;opacity:0;clip-path:inset(0 50% 0 50%);animation:branchDraw 1.3s cubic-bezier(.2,.8,.2,1) 1.9s forwards}
  @keyframes branchDraw{
    0%{opacity:0;clip-path:inset(0 50% 0 50%)}
    18%{opacity:1}
    100%{opacity:1;clip-path:inset(0 -2% 0 -2%)}
  }
  .lockup-branch svg{width:100%;height:auto;display:block}

  .cover-sub{
    font-family:var(--body);
    font-size:clamp(12px,2vw,17px);letter-spacing:.6em;text-transform:uppercase;
    color:var(--gold-deep);margin-top:clamp(14px,2.5vw,24px);padding-left:.6em;text-align:center;
    animation-name:subPull;animation-duration:1.2s;animation-delay:2.7s;
  }
  @keyframes subPull{
    0%{opacity:0;filter:blur(6px);letter-spacing:.95em}
    100%{opacity:1;filter:blur(0);letter-spacing:.6em}
  }

  /* plates + cta retimed to follow the lockup */
  .cover-grid{margin-top:clamp(36px,5.5vw,72px)}
  .cover-grid .welcome-card:nth-child(1){animation-delay:3.1s}
  .cover-grid .welcome-card:nth-child(2){animation-delay:3.3s}
  .cover-grid .welcome-card:nth-child(3){animation-delay:3.5s}
  .cover-grid .plate:nth-child(1){animation-delay:3.1s}
  .cover-grid .plate:nth-child(2){animation-delay:3.3s}
  .cover-grid .plate:nth-child(3){animation-delay:3.5s}

  @media(prefers-reduced-motion:reduce){
    .cover-title{letter-spacing:.3em !important}
    .cover-sub{letter-spacing:.6em !important;opacity:1 !important;animation:none !important;filter:none !important}
    .lockup-branch{opacity:1 !important;clip-path:none !important;animation:none !important}
  }