/* Maya Dahlia, the home page styles.
   Lifted out of index.html unchanged, in the same order, so the collection
   pages (/collections/mdc-range, /collections/bespoke-creations) can reuse
   the home page sections exactly. The one addition: .head h1 and
   .reel-head h1 share the h2 rules, for those pages' headings. */
  :root{
    --ivory:#F7F3ED;
    --ivory-warm:#FCFAF6;
    --blush:#E9DAD2;
    --blush-wash:#F4E9E3;
    --rose-taupe:#B8968B;
    --rose-deep:#76554D;
    --cocoa:#5A413C;
    --warm-grey:#604C48;
    --ink-soft:#604C48;
    --gold:#C5A168;
    --gold-light:#EBD5A6;

    /* deeper foil, tuned to read as metal against ivory */
    --foil:linear-gradient(112deg,#6E5222 0%,#A8823F 15%,#DCC084 30%,#B8924F 44%,#8A6A31 57%,#E0C68E 73%,#A8823F 87%,#6E5222 100%);
    --foil-pale:linear-gradient(112deg,#A8823F 0%,#EBD5A6 30%,#C5A168 55%,#F2E2BC 78%,#A8823F 100%);

    --pop-fuchsia:#D6336C;
    --pop-coral:#E8735A;
    --pop-crimson:#9B2242;

    --display:"Cormorant Garamond",Georgia,serif;
    --body:"Inter",system-ui,-apple-system,sans-serif;

    --gutter:clamp(22px,5.5vw,88px);
    --rhythm:clamp(88px,12.5vw,184px);

    --lift:0 1px 2px rgba(90,65,60,.03),0 20px 54px -20px rgba(90,65,60,.20);
    --lift-hi:0 2px 5px rgba(90,65,60,.05),0 34px 76px -22px rgba(90,65,60,.28);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--ivory);color:var(--cocoa);
    font-family:var(--body);font-weight:400;
    font-size:16px;line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  ::selection{background:var(--blush);color:var(--cocoa)}

  .label{font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
  .foil-text{
    background:none;color:#6E5222;
  }

  /* ---- foil rule ---- */
  .rule{display:block;width:min(300px,58vw);height:24px}
  .rule.center{margin-inline:auto}
  .rule path,.rule line{fill:none;stroke:url(#foilstroke);stroke-width:1.2;vector-effect:non-scaling-stroke}
  .rule.draw path,.rule.draw line{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
  .rule.draw.lit path,.rule.draw.lit line{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1)}

  /* ---- masthead ---- */
  .masthead{
    position:sticky;top:0;z-index:40;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:20px var(--gutter);
    background:rgba(247,243,237,.86);
    backdrop-filter:blur(14px) saturate(1.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
    border-bottom:1px solid rgba(197,161,104,.3);
  }
  .brand{
    font-family:var(--display);font-weight:400;font-size:1.04rem;
    letter-spacing:.34em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  }
  .nav{display:flex;align-items:center;gap:clamp(14px,2.3vw,32px)}
  .nav a{
    font-weight:300;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
    text-decoration:none;opacity:.7;padding:4px 0;border-bottom:1px solid transparent;
    transition:opacity .4s ease,border-color .4s ease,background .4s ease,color .4s ease;
  }
  .nav a:hover,.nav a:focus-visible{opacity:1;border-bottom-color:var(--gold)}
  .nav .pill{opacity:1;border:1px solid rgba(197,161,104,.65);border-radius:999px;padding:9px 20px}
  .nav .pill:hover,.nav .pill:focus-visible{background:var(--gold);border-color:var(--gold);color:#FCFAF6}
  @media(max-width:820px){ .nav a:not(.pill){display:none} }

  /* ---- hero ---- */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(80% 70% at 74% 40%,rgba(233,218,210,.85),transparent 66%),
      radial-gradient(70% 60% at 12% 78%,rgba(235,213,166,.30),transparent 62%),
      var(--ivory);
  }
  .hero .hex{position:absolute;inset:0;pointer-events:none;opacity:.85}
  .hero-inner{
    position:relative;z-index:2;max-width:1240px;margin:0 auto;
    padding:clamp(60px,10vw,140px) var(--gutter) clamp(70px,10vw,150px);
    display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,5vw,80px);align-items:center;
  }
  @media(max-width:900px){ .hero-inner{grid-template-columns:1fr;text-align:center} }
  .hero .label{color:var(--rose-deep);display:block;margin-bottom:26px}
  .hero h1{
    font-family:var(--display);font-weight:300;
    font-size:clamp(3rem,6.9vw,5.9rem);line-height:1.02;margin:22px 0 0;
  }
  .hero h1 .l1{display:block;color:var(--cocoa)}
  .hero h1 .l2{
    display:block;font-style:italic;color:var(--cocoa);
  }
  @keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  .hero .lede{max-width:40ch;margin:26px 0 0;color:var(--warm-grey);font-size:1.02rem;line-height:1.85}
  @media(max-width:900px){ .hero .lede{margin-inline:auto} .hero .rule{margin-inline:auto} }
  .hero .actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
  @media(max-width:900px){ .hero .actions{justify-content:center} }

  .hero-plate{position:relative;display:flex;align-items:center;justify-content:center}
  .hero-plate .halo{
    position:absolute;width:112%;max-width:520px;aspect-ratio:1;
    opacity:.55;pointer-events:none;
  }
  .hero-plate .halo polygon{fill:none;stroke:url(#foilstroke);stroke-width:1;vector-effect:non-scaling-stroke}
  .hero-plate svg.cake{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 34px 52px rgba(90,65,60,.20))}

  .btn{
    display:inline-block;text-decoration:none;font-weight:500;font-size:.84rem;
    letter-spacing:.08em;text-transform:uppercase;padding:16px 30px;
    transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease,background .4s ease,color .4s ease,border-color .4s ease,background-position .6s ease;
  }
  .btn-gold{
    background:var(--cocoa);color:#FCFAF6;border:none;
    box-shadow:0 12px 32px -14px rgba(90,65,60,.55);
  }
  .btn-gold:hover,.btn-gold:focus-visible{background:#3E2C28;transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(90,65,60,.6)}
  .btn-line{border:1px solid rgba(184,150,139,.6);color:var(--cocoa)}
  .btn-line:hover,.btn-line:focus-visible{border-color:var(--gold);background:rgba(197,161,104,.1)}
  .btn-rose{background:var(--rose-deep);color:#FCFAF6;border:1px solid var(--rose-deep)}
  .btn-rose:hover,.btn-rose:focus-visible{background:transparent;color:var(--rose-deep)}

  /* ---- bands ---- */
  .band{padding:var(--rhythm) var(--gutter);position:relative;overflow:hidden}
  .band-ivory{background:var(--ivory)}
  .band-blush{background:linear-gradient(180deg,var(--ivory) 0%,var(--blush-wash) 42%,var(--ivory) 100%)}
  .band-rose{background:linear-gradient(160deg,#C0A096,#B8968B 55%,#A9877C);color:#FCFAF6}
  .band .hexlight{position:absolute;inset:0;pointer-events:none}
  .band-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto}

  .head{text-align:center;margin-bottom:clamp(50px,7vw,96px)}
  .head .label{color:var(--rose-deep);display:block;margin-bottom:18px}
  .head h2,.head h1{font-family:var(--display);font-weight:300;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:.05em;margin:18px 0 0}
  .head p{max-width:48ch;margin:20px auto 0;color:var(--warm-grey);font-size:.96rem}
  .band-rose .head .label{color:rgba(252,250,246,.8)}
  .band-rose .head p{color:rgba(252,250,246,.78)}

  /* ---- cards ---- */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
  @media(max-width:860px){ .cards{grid-template-columns:1fr;max-width:440px;margin-inline:auto} }
  .card{
    background:var(--ivory-warm);border:1px solid rgba(197,161,104,.36);
    box-shadow:var(--lift);padding:14px 14px 32px;text-align:center;
    transition:transform .55s cubic-bezier(.22,.61,.36,1),box-shadow .55s ease,border-color .55s ease;
  }
  .card:hover{transform:translateY(-6px);box-shadow:var(--lift-hi);border-color:var(--gold)}
  .card .art{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--blush-wash)}
  .card .art svg{display:block;width:100%;height:100%}
  .card .art img.celebration-cover{height:100%;object-fit:contain}
  .card h3{font-family:var(--display);font-weight:400;font-size:1.4rem;letter-spacing:.14em;text-transform:uppercase;margin:26px 0 0}
  .card .sub{display:block;margin-top:10px;color:var(--warm-grey);font-size:.82rem}
  .card .go{
    display:inline-block;margin-top:18px;font-size:.8rem;letter-spacing:.1em;
    text-transform:uppercase;font-weight:500;text-decoration:none;padding-bottom:5px;
    border-bottom:1px solid var(--gold);
    color:var(--cocoa);
  }

  /* ---- gallery ---- */
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.6vw,56px)}
  @media(max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:560px){ .gallery{grid-template-columns:1fr;max-width:420px;margin-inline:auto} }
  .piece{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.36,1)}
  .piece.lit{opacity:1;transform:none}
  @media(min-width:901px){
    .piece:nth-child(2){margin-top:clamp(30px,4.6vw,76px)}
    .piece:nth-child(3){margin-top:clamp(14px,2.2vw,36px)}
    .piece:nth-child(5){margin-top:clamp(30px,4.6vw,76px)}
    .piece:nth-child(6){margin-top:clamp(14px,2.2vw,36px)}
  }
  .plate{
    position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ivory-warm);
    border:1px solid rgba(197,161,104,.32);box-shadow:var(--lift);
    transition:box-shadow .55s ease,border-color .55s ease;
  }
  .piece:hover .plate{box-shadow:var(--lift-hi);border-color:var(--gold)}
  .plate svg{display:block;width:100%;height:100%}
  .corner{position:absolute;width:16px;height:16px;border:1px solid var(--gold);opacity:.8}
  .tl{top:9px;left:9px;border-right:0;border-bottom:0}
  .tr{top:9px;right:9px;border-left:0;border-bottom:0}
  .bl{bottom:9px;left:9px;border-right:0;border-top:0}
  .br{bottom:9px;right:9px;border-left:0;border-top:0}
  .stamp{
    position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
    font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;font-weight:400;
    color:var(--warm-grey);background:rgba(252,250,246,.92);
    padding:6px 14px;border:1px solid rgba(197,161,104,.32);white-space:nowrap;
  }
  .cap{margin-top:22px;text-align:center}
  .cap h3{font-family:var(--display);font-weight:400;font-size:1.42rem;letter-spacing:.2em;text-transform:uppercase;margin:0}
  .cap .meta{display:block;margin-top:10px;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--warm-grey)}
  .cap .meta b{font-weight:400;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ---- mood strip ---- */
  .strip{
    background:var(--blush);color:var(--cocoa);
    border-top:1px solid rgba(197,161,104,.4);border-bottom:1px solid rgba(197,161,104,.4);
    padding:20px var(--gutter);text-align:center;
    font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;font-weight:300;
  }
  .strip span{opacity:.5;margin:0 6px}

  /* ---- process ---- */
  .process{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,80px);align-items:center}
  @media(max-width:860px){ .process{grid-template-columns:1fr} }
  .process .art{border:1px solid rgba(252,250,246,.45);padding:12px}
  .process .art svg{display:block;width:100%;height:auto}
  .step{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid rgba(252,250,246,.3)}
  .step:last-child{border-bottom:none;padding-bottom:0}
  .step .num{
    font-family:var(--display);font-size:1.5rem;letter-spacing:.1em;padding-top:2px;
    background:var(--foil-pale);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .step h3,.step h4{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;margin:0 0 9px;color:#FCFAF6}
  .step p{margin:0;font-size:.94rem;line-height:1.8;color:rgba(252,250,246,.82)}

  /* ---- flavours ---- */
  .flavours{max-width:880px;margin:0 auto;border-top:1px solid rgba(197,161,104,.4)}
  .flavour{
    display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
    padding:24px 6px;border-bottom:1px solid rgba(197,161,104,.22);
    transition:padding-left .45s ease;
  }
  .flavour:hover{padding-left:16px}
  .flavour .name{font-family:var(--display);font-size:1.32rem;font-weight:400;line-height:1.4}
  .flavour .kind{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose-deep);white-space:nowrap}

  /* ---- enquire ---- */
  .enquire{text-align:center}
  .monogram{width:88px;height:88px;margin:0 auto 26px;display:block}
  .enquire h2{font-family:var(--display);font-weight:300;font-size:clamp(2.1rem,5vw,3.8rem);letter-spacing:.04em;margin:20px 0 0}
  .enquire p{max-width:46ch;margin:22px auto 0;color:var(--warm-grey)}
  .details{margin-top:42px;display:flex;gap:clamp(18px,3.6vw,52px);justify-content:center;flex-wrap:wrap;font-size:.68rem;letter-spacing:.18em}
  .details a{text-decoration:none;padding-bottom:5px;border-bottom:1px solid rgba(197,161,104,.55);transition:border-color .4s ease}
  .details a:hover{border-bottom-color:var(--gold)}

  footer{
    background:var(--cocoa);border-top:1px solid rgba(197,161,104,.4);
    color:#E9DAD2;text-align:center;padding:56px var(--gutter);
  }
  .roundel{width:104px;height:104px;margin:0 auto 22px;display:block}
  footer .roundel text{fill:#FCFAF6}
  footer .roundel circle,footer .roundel path{stroke:#E9DAD2}
  footer .foil-text{background:none;color:#E9DAD2}

  .rise{opacity:0;transform:translateY(18px);animation:rise 1.2s cubic-bezier(.22,.61,.36,1) forwards}
  .d1{animation-delay:.08s}.d2{animation-delay:.24s}.d3{animation-delay:.4s}.d4{animation-delay:.56s}.d5{animation-delay:.72s}
  @keyframes rise{to{opacity:1;transform:none}}

  :focus-visible{outline:1px solid var(--gold);outline-offset:4px}

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rise{animation:none;opacity:1;transform:none}
    .piece{opacity:1;transform:none;transition:none}
    .hero h1 .l2{animation:none}
    .rule.draw path,.rule.draw line{stroke-dasharray:none;stroke-dashoffset:0}
  }



  .tastes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);max-width:1180px;margin:0 auto}
  @media(max-width:880px){.tastes{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.tastes{grid-template-columns:1fr;max-width:400px;margin-inline:auto}}
  .taste{text-align:center;opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
  .taste.lit{opacity:1;transform:none}
  .taste .shot{
    position:relative;aspect-ratio:4/5;overflow:hidden;
    border:1px solid rgba(197,161,104,.36);box-shadow:var(--lift);
    background:var(--ivory-warm);
    transition:box-shadow .55s ease,border-color .55s ease;
  }
  .taste:hover .shot{box-shadow:var(--lift-hi);border-color:var(--gold)}
  .taste .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
  .taste:hover .shot img{transform:scale(1.055)}
  .taste .shot::after{content:"";position:absolute;inset:9px;border:1px solid rgba(252,250,246,.45);pointer-events:none}
  .taste h3{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.05em;margin:24px 0 0;line-height:1.32}
  .taste .fill{margin:8px 0 0;color:var(--warm-grey);font-size:.86rem;line-height:1.62}
  .taste .kind{
    display:inline-block;margin-top:16px;font-size:.72rem;letter-spacing:.12em;
    text-transform:uppercase;font-weight:400;padding-bottom:4px;
    border-bottom:1px solid var(--gold);
    color:var(--cocoa);
  }
  @media(prefers-reduced-motion:reduce){
    .taste{opacity:1;transform:none;transition:none}
    .taste .shot img{transition:none}
  }



  .hero-plate{display:block}
  .hero-shot{
    position:relative;margin:0;overflow:hidden;
    border:1px solid rgba(197,161,104,.55);
    box-shadow:0 30px 74px -26px rgba(59,42,38,.6),0 2px 6px rgba(59,42,38,.12);
  }
  .hero-shot img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
  .hero-shot::after{content:"";position:absolute;inset:11px;border:1px solid rgba(252,250,246,.34);pointer-events:none}
  .hero-shot .corner{opacity:.9;z-index:2}
  @media(max-width:900px){
    .hero-shot{max-width:440px;margin-inline:auto}
  }



  .hero-shot img{aspect-ratio:3/4}
  .hero-cap{text-align:center;margin-top:20px}
  .hero-cap .who{
    display:block;font-family:var(--display);font-weight:400;
    font-size:1.18rem;letter-spacing:.26em;text-transform:uppercase;
    background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-cap .role{
    display:inline-block;margin-top:9px;padding-top:9px;
    border-top:1px solid rgba(197,161,104,.5);
    font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;font-weight:400;
    color:var(--warm-grey);
  }
  .hero .hero-cap .role{color:inherit;opacity:.62}
  .plate img.shotimg{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
  .piece:hover .plate img.shotimg{transform:scale(1.05)}



  .process .art{padding:12px}
  .process .art img.portrait{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}



  .signature{
    background:var(--ivory-warm);
    border-top:1px solid rgba(197,161,104,.4);
    border-bottom:1px solid rgba(197,161,104,.4);
    padding:clamp(52px,7vw,92px) var(--gutter);
  }
  .sig-inner{
    max-width:860px;margin:0 auto;
    display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,60px);align-items:center;
  }
  @media(max-width:700px){ .sig-inner{grid-template-columns:1fr;text-align:center;justify-items:center} }
  .sig-portrait{
    margin:0;width:clamp(124px,17vw,178px);aspect-ratio:1;border-radius:50%;
    overflow:hidden;position:relative;flex:none;
    box-shadow:0 0 0 1px rgba(197,161,104,.55),0 0 0 7px var(--ivory-warm),0 0 0 8px rgba(197,161,104,.3);
  }
  .sig-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
  .sig-copy .rule{margin-inline:0;width:min(240px,52vw)}
  @media(max-width:700px){ .sig-copy .rule{margin-inline:auto} }
  .sig-copy blockquote{
    margin:22px 0 0;font-family:var(--display);font-weight:300;font-style:italic;
    font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.45;letter-spacing:.01em;
  }
  .sig-name{
    display:block;margin-top:24px;font-family:var(--display);font-weight:400;
    font-size:1.05rem;letter-spacing:.28em;text-transform:uppercase;
    background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .sig-role{
    display:block;margin-top:7px;font-size:.54rem;letter-spacing:.3em;
    text-transform:uppercase;font-weight:400;color:var(--warm-grey);
  }



  .card .art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
  .card:hover .art img{transform:scale(1.05)}



  /* ---------- the collection rail ---------- */
  .reel{position:relative;background:linear-gradient(180deg,var(--ivory) 0%,var(--blush-wash) 40%,var(--ivory) 100%)}
  .reel-sticky{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
  }
  .reel-rosette{
    position:absolute;top:50%;left:50%;
    width:min(150vh,150vw);aspect-ratio:1;
    transform-origin:50% 50%;margin:-75vh 0 0 -75vh;
    opacity:.5;pointer-events:none;
    stroke:url(#foilstroke);fill:none;stroke-width:.7;
    will-change:transform;
  }
  .reel-head{
    position:relative;z-index:2;text-align:center;
    padding:0 var(--gutter);margin-bottom:clamp(26px,4.5vh,54px);flex:none;
  }
  .reel-head .label{color:var(--rose-deep);display:block;margin-bottom:14px}
  .reel-head h2,.reel-head h1{
    font-family:var(--display);font-weight:300;
    font-size:clamp(1.9rem,4vw,3.1rem);letter-spacing:.05em;margin:0;
  }
  .reel-head p{max-width:46ch;margin:14px auto 0;color:var(--warm-grey);font-size:.92rem}

  .reel-viewport{position:relative;z-index:2;overflow:hidden}
  .reel-track{
    display:flex;align-items:center;gap:clamp(22px,3vw,48px);
    padding:0 clamp(22px,5.5vw,88px);
    will-change:transform;
  }
  .reel-track .piece{
    flex:0 0 clamp(230px,25vw,340px);
    opacity:1;transform:none;transition:none;margin:0;
  }
  .reel-track .piece:nth-child(even){transform:translateY(clamp(14px,3vh,42px))}
  .reel-track .plate{box-shadow:var(--lift)}
  .reel-track .plate img.shotimg{object-fit:contain;will-change:transform}
  .reel-track .piece:hover .plate img.shotimg{transform:none}
  .reel-track .cap h3{font-size:1.24rem}

  .reel-progress{
    position:relative;z-index:2;flex:none;
    margin:clamp(24px,4.5vh,52px) auto 0;width:min(320px,62vw);height:1px;
    background:rgba(184,150,139,.34);
  }
  .reel-progress span{
    display:block;height:100%;width:100%;
    transform:scaleX(0);transform-origin:0 50%;
    background:var(--foil);background-size:200% 100%;
    will-change:transform;
  }

  /* mobile and reduced motion fall back to a native swipe rail */
  @media(max-width:900px){
    .reel{height:auto!important}
    .reel-sticky{position:static;height:auto;padding:var(--rhythm) 0}
    .reel-rosette{display:none}
    .reel-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
    .reel-viewport::-webkit-scrollbar{display:none}
    .reel-track{transform:none!important}
    .reel-track .piece{flex-basis:min(74vw,320px);scroll-snap-align:center}
    .reel-track .piece:nth-child(even){transform:none}
    .reel-track .plate img.shotimg{transform:none!important}
  }
  @media(prefers-reduced-motion:reduce){
    .reel{height:auto!important}
    .reel-sticky{position:static;height:auto;padding:var(--rhythm) 0}
    .reel-rosette{display:none}
    .reel-viewport{overflow-x:auto}
    .reel-track{transform:none!important}
    .reel-track .plate img.shotimg{transform:none!important}
    .reel-progress{display:none}
  }



  /* ---------- flavours: drift rail ---------- */
  .taste-rail{
    overflow:hidden;
    margin-inline:calc(var(--gutter) * -1);
  }
  .tastes{
    display:flex;width:max-content;max-width:none;margin:0;
    gap:clamp(20px,2.6vw,40px);
    padding-inline:var(--gutter);
    will-change:transform;
  }
  .taste{
    flex:0 0 clamp(220px,23vw,310px);
    opacity:1;transform:none;transition:none;
  }
  .taste .shot img{will-change:transform}
  .taste:hover .shot img{transform:none}
  .taste h3{font-size:1.18rem}
  .taste .fill{font-size:.8rem}

  @media(max-width:900px){
    .tastes{max-width:none;margin-inline:0;transform:none!important}
    .taste-rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
    .taste-rail::-webkit-scrollbar{display:none}
    .taste{flex-basis:min(66vw,290px);scroll-snap-align:center}
    .taste .shot img{transform:none!important}
  }
  @media(prefers-reduced-motion:reduce){
    .tastes{transform:none!important}
    .taste-rail{overflow-x:auto}
    .taste .shot img{transform:none!important}
  }



  /* ---------- hero text entrance ---------- */
  .hero-eyebrow{
    display:block;margin-bottom:26px;opacity:0;letter-spacing:.66em;
    animation:trackIn 1.5s cubic-bezier(.2,.7,.25,1) .1s forwards;
  }
  @keyframes trackIn{ to{opacity:1;letter-spacing:.36em} }

  .hero-rule{opacity:0;animation:ruleIn .9s ease .35s forwards}
  @keyframes ruleIn{ to{opacity:1} }

  .hero h1 .ln{
    display:block;overflow:hidden;
    padding-bottom:.12em;margin-bottom:-.12em;
  }
  .hero h1 .l1 .w{
    display:inline-block;
    transform:translateY(118%);
    animation:wordRise 1.15s cubic-bezier(.16,.84,.28,1) forwards;
    animation-delay:calc(.55s + var(--i) * .13s);
  }
  @keyframes wordRise{ to{transform:translateY(0)} }

  /* Reveal the closing line without reducing its text contrast. */
  .hero h1 .l2{
    clip-path:inset(0 100% 0 0);
    animation:foilWipe 1.5s cubic-bezier(.62,.02,.2,1) 1.05s forwards;
  }
  @keyframes foilWipe{ to{clip-path:inset(0 0 0 0)} }

  .hero .lede{animation-delay:1.5s}
  .hero .actions{animation-delay:1.72s}
  .hero .hero-plate{animation-delay:.3s}

  @media(prefers-reduced-motion:reduce){
    .hero-eyebrow{opacity:1;letter-spacing:.36em;animation:none}
    .hero-rule{opacity:1;animation:none}
    .hero h1 .l1 .w{transform:none;animation:none}
    .hero h1 .l2{clip-path:none;animation:none}
  }



  /* ---------- proof ---------- */
  .proof-flag{
    display:inline-block;margin-top:16px!important;
    font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
    color:var(--rose-deep);border:1px dashed rgba(184,150,139,.7);
    padding:7px 14px;border-radius:999px;
  }

  .proof-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(20px,2.8vw,44px);max-width:1140px;margin:0 auto;
  }
  @media(max-width:900px){ .proof-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto} }

  .proof-card{
    position:relative;margin:0;
    background:var(--ivory-warm);
    border:1px solid rgba(197,161,104,.34);
    box-shadow:var(--lift);
    padding:clamp(30px,3.4vw,46px) clamp(24px,2.8vw,38px) clamp(26px,3vw,38px);
    display:flex;flex-direction:column;
    transition:transform .55s cubic-bezier(.22,.61,.36,1),box-shadow .55s ease,border-color .55s ease;
  }
  .proof-card:hover{transform:translateY(-5px);box-shadow:var(--lift-hi);border-color:var(--gold)}
  .proof-card::after{content:"";position:absolute;inset:9px;border:1px solid rgba(197,161,104,.16);pointer-events:none}

  .proof-mark{
    display:block;font-family:var(--display);font-weight:400;
    font-size:3.4rem;line-height:.6;margin-bottom:14px;
    background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .proof-card blockquote{
    margin:0;flex:1;
    font-family:var(--display);font-weight:300;
    font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.56;letter-spacing:.01em;
  }
  .proof-card figcaption{
    margin-top:26px;padding-top:16px;
    border-top:1px solid rgba(197,161,104,.36);
  }
  .proof-who{
    display:block;font-family:var(--display);font-weight:400;
    font-size:1rem;letter-spacing:.26em;text-transform:uppercase;
  }
  .proof-where{
    display:block;margin-top:7px;
    font-size:.54rem;letter-spacing:.26em;text-transform:uppercase;color:var(--warm-grey);
  }

  .proof-press{margin-top:clamp(48px,6vw,84px);text-align:center}
  .proof-press .label{display:block;color:var(--rose-deep);margin-bottom:20px}
  .proof-slots{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(12px,2vw,26px);
  }
  .proof-slot{
    min-width:132px;padding:20px 22px;
    border:1px dashed rgba(184,150,139,.55);
    font-size:.54rem;letter-spacing:.26em;text-transform:uppercase;
    color:var(--warm-grey);
  }



  /* ---------- fun cakes ---------- */
  .fun{
    position:relative;overflow:hidden;
    background:
      radial-gradient(90% 70% at 78% 14%, rgba(197,161,104,.20), transparent 60%),
      radial-gradient(80% 60% at 12% 88%, rgba(184,150,139,.22), transparent 62%),
      linear-gradient(165deg,#6B4E47 0%,var(--cocoa) 52%,#4A352F 100%);
    color:var(--ivory);
    padding:clamp(78px,11vw,150px) var(--gutter);
  }
  .fun-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto}

  .fun-head{max-width:720px}
  .fun-label{
    display:inline-block;font-weight:400;font-size:.58rem;
    letter-spacing:.34em;text-transform:uppercase;
    color:var(--cocoa);background:var(--ivory);
    padding:8px 16px;border-radius:999px;
    transform:rotate(-2.2deg);
  }
  .fun h2{
    font-family:var(--display);font-weight:300;
    font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.02;letter-spacing:.01em;
    margin:24px 0 0;
  }
  .fun-head p{
    margin:20px 0 0;max-width:52ch;
    color:rgba(247,243,237,.82);font-size:1rem;line-height:1.8;
  }

  /* ticker */
  .fun-ticker{
    margin:clamp(38px,5vw,64px) calc(var(--gutter) * -1);
    border-top:1px solid rgba(197,161,104,.5);
    border-bottom:1px solid rgba(197,161,104,.5);
    padding:14px 0;overflow:hidden;
  }
  .fun-ticker-track{display:flex;width:max-content;animation:tick 46s linear infinite}
  .fun-ticker-track span{
    white-space:nowrap;padding-right:1.4em;
    font-family:var(--display);font-style:italic;font-weight:300;
    font-size:clamp(1.1rem,2.2vw,1.7rem);
    color:rgba(247,243,237,.9);
  }
  @keyframes tick{ to{transform:translateX(-50%)} }
  .fun:hover .fun-ticker-track{animation-play-state:paused}

  /* pinned prints */
  .fun-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(24px,3.4vw,54px);
    margin-top:clamp(40px,5vw,72px);
  }
  @media(max-width:900px){ .fun-grid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:560px){ .fun-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto} }

  .fun-card{
    background:var(--ivory);padding:12px 12px 0;
    box-shadow:0 24px 54px -20px rgba(0,0,0,.6);
    transform:rotate(var(--rot,0deg));
    transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease;
  }
  .fun-card:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);box-shadow:0 34px 70px -20px rgba(0,0,0,.7)}
  .fun-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
  .fun-cap{padding:16px 4px 20px;text-align:center}
  .fun-cap h3{
    font-family:var(--display);font-weight:400;color:var(--cocoa);
    font-size:1.24rem;letter-spacing:.16em;text-transform:uppercase;margin:0;
  }
  .fun-cap span{
    display:block;margin-top:8px;font-size:.62rem;line-height:1.5;
    letter-spacing:.1em;color:var(--ink-soft);
  }

  .fun-cta{margin-top:clamp(42px,5vw,72px);text-align:center}
  .fun-btn{
    display:inline-block;text-decoration:none;
    font-weight:500;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
    color:#FCFAF6;background:var(--cocoa);
    padding:18px 38px;border-radius:999px;
    box-shadow:0 14px 34px -12px rgba(140,107,55,.85);
    transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease,background .4s ease;
  }
  .fun-btn:hover,.fun-btn:focus-visible{
    transform:translateY(-3px) rotate(-1.5deg);
    background-position:100% 50%;
    box-shadow:0 20px 44px -12px rgba(140,107,55,1);
  }

  @media(prefers-reduced-motion:reduce){
    .fun-ticker-track{animation:none}
    .fun-card{transform:none;transition:none}
    .fun-card:hover{transform:none}
  }



  /* ---------- from the page to the table ---------- */
  .story{
    list-style:none;margin:0 auto;padding:0;
    display:grid;grid-template-columns:1fr 1.3fr 1fr;
    gap:clamp(22px,3.4vw,58px);align-items:start;
    max-width:1180px;
  }
  @media(max-width:900px){
    .story{grid-template-columns:1fr;max-width:480px}
    .story-step.is-wide{order:-1}
  }

  .story-step{
    position:relative;
    opacity:0;transform:translateY(24px);
    transition:opacity .95s ease,transform .95s cubic-bezier(.22,.61,.36,1);
  }
  .story.playing .story-step{opacity:1;transform:none}
  .story.playing .story-step:nth-child(2){transition-delay:.15s}
  .story.playing .story-step:nth-child(3){transition-delay:2s}

  @media(min-width:901px){
    .story-step:not(:last-child)::after{
      content:"";position:absolute;top:14px;right:calc(clamp(22px,3.4vw,58px) * -.5);
      width:1px;height:calc(100% - 28px);
      background:linear-gradient(180deg,rgba(197,161,104,0),rgba(197,161,104,.55),rgba(197,161,104,0));
    }
  }

  .story-num{
    display:inline-block;font-family:var(--display);font-weight:400;
    font-size:1.4rem;letter-spacing:.1em;line-height:1;
    background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .story-lab{
    display:block;margin:8px 0 18px;
    font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;
    font-weight:400;color:var(--rose-deep);
  }

  .story-frame{
    position:relative;margin:0;overflow:hidden;
    background:var(--ivory-warm);
    border:1px solid rgba(197,161,104,.4);
    box-shadow:var(--lift);
    transition:box-shadow .55s ease,border-color .55s ease;
  }
  .story-frame img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
  .story-step:hover .story-frame{box-shadow:var(--lift-hi);border-color:var(--gold)}

  /* the sketch is a document: show the whole page */
  .story-sketch{cursor:zoom-in;padding:10px;background:#FCFAF6}
  .story-sketch img{aspect-ratio:auto;object-fit:contain}

  /* the page fills in, left to right, with graphite gathering at the edge */
  .story-sketch img{clip-path:inset(0 100% 0 0)}
  .story.playing .story-sketch img{
    animation:sketchFill 1.75s cubic-bezier(.42,.02,.28,1) .5s forwards;
  }
  @keyframes sketchFill{ to{clip-path:inset(0 0 0 0)} }

  .story-sketch::before{
    content:"";position:absolute;z-index:2;pointer-events:none;
    top:10px;bottom:10px;left:0;width:56px;
    background:linear-gradient(90deg,rgba(90,65,60,.02),rgba(90,65,60,.16) 55%,rgba(90,65,60,.03));
    filter:blur(7px);opacity:0;
  }
  .story.playing .story-sketch::before{
    animation:sketchEdge 1.75s cubic-bezier(.42,.02,.28,1) .5s forwards;
  }
  @keyframes sketchEdge{
    0%{opacity:0;transform:translateX(-56px)}
    10%{opacity:1}
    88%{opacity:1}
    100%{opacity:0;transform:translateX(var(--travel,900px))}
  }

  .story-zoom{
    position:absolute;left:50%;bottom:18px;transform:translateX(-50%) translateY(8px);
    opacity:0;pointer-events:none;z-index:3;
    font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
    color:#FCFAF6;background:rgba(90,65,60,.86);padding:9px 18px;border-radius:999px;
    transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .story-sketch:hover .story-zoom,.story-sketch:focus-visible .story-zoom{opacity:1;transform:translateX(-50%)}

  .story-step > p{margin:20px 0 0;font-size:.88rem;line-height:1.75;color:var(--warm-grey)}

  .story-replay{
    margin-top:14px;background:transparent;cursor:pointer;
    border:1px solid rgba(184,150,139,.55);border-radius:999px;
    padding:11px 22px;color:var(--cocoa);
    font-family:var(--body);font-weight:400;font-size:.54rem;
    letter-spacing:.26em;text-transform:uppercase;
    transition:border-color .35s ease,background .35s ease;
  }
  .story-replay:hover{border-color:var(--gold);background:rgba(197,161,104,.1)}

  /* lightbox */
  .story-lb{
    position:fixed;inset:0;z-index:90;display:none;
    align-items:center;justify-content:center;padding:clamp(16px,4vw,54px);
    background:rgba(59,42,38,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .story-lb.open{display:flex;animation:lbIn .4s ease}
  @keyframes lbIn{from{opacity:0}}
  .story-lb img{
    max-width:min(760px,100%);max-height:100%;object-fit:contain;
    background:#FCFAF6;padding:10px;border:1px solid rgba(197,161,104,.5);
    box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  }
  .story-lb-close{
    position:absolute;top:clamp(14px,3vw,30px);right:clamp(14px,3vw,30px);
    background:transparent;border:1px solid rgba(247,243,237,.4);color:#F7F3ED;
    border-radius:999px;padding:11px 20px;cursor:pointer;
    font-size:.54rem;letter-spacing:.26em;text-transform:uppercase;
    transition:border-color .35s ease,background .35s ease;
  }
  .story-lb-close:hover{border-color:var(--gold);background:rgba(197,161,104,.16)}

  @media(prefers-reduced-motion:reduce){
    .story-step{opacity:1;transform:none;transition:none}
    .story.playing .story-step{transition-delay:0s!important}
    .story-sketch img{clip-path:none}
    .story.playing .story-sketch img,.story.playing .story-sketch::before{animation:none}
    .story-sketch::before{display:none}
    .story-replay{display:none}
    .story-lb.open{animation:none}
  }




  .shimmer{opacity:.75}
  @media(prefers-reduced-motion:reduce){ .shimmer{display:none} }



  .hero .hex,.band .hexlight{
    display:block;width:100%;height:100%;
    top:0;left:0;right:0;bottom:0;
  }



  /* the lace crowns the hero and is gone before the type starts */
  .hero .hex{
    -webkit-mask-image:linear-gradient(180deg,
      #000 0, #000 56px, rgba(0,0,0,.5) 112px, rgba(0,0,0,0) 178px);
    mask-image:linear-gradient(180deg,
      #000 0, #000 56px, rgba(0,0,0,.5) 112px, rgba(0,0,0,0) 178px);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
  }



  /* lace edges every section and clears out before any copy begins */
  .band .hexlight{
    -webkit-mask-image:linear-gradient(180deg,
      #000 0, #000 30px, rgba(0,0,0,.4) 64px, rgba(0,0,0,0) 104px);
    mask-image:linear-gradient(180deg,
      #000 0, #000 30px, rgba(0,0,0,.4) 64px, rgba(0,0,0,0) 104px);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
  }



  /* ---------- enquiry form ---------- */
  .eq-form{max-width:720px;margin:44px auto 0;text-align:left}
  .eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
  @media(max-width:620px){ .eq-grid{grid-template-columns:1fr} }
  .eq-wide{grid-column:1/-1}
  .eq-field{display:block}
  .eq-field span{
    display:block;margin-bottom:8px;
    font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
    font-weight:500;color:var(--ink-soft);
  }
  .eq-field input,.eq-field select,.eq-field textarea{
    width:100%;font-family:var(--body);font-weight:400;font-size:1rem;color:var(--cocoa);
    background:var(--ivory-warm);border:1px solid rgba(184,150,139,.5);border-radius:0;
    padding:13px 15px;transition:border-color .35s ease,box-shadow .35s ease;
    -webkit-appearance:none;appearance:none;
  }
  .eq-field textarea{resize:vertical;min-height:110px;font-family:var(--body)}
  .eq-field select{background-image:none}
  .eq-field input:focus,.eq-field select:focus,.eq-field textarea:focus{
    outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,161,104,.16);
  }
  .eq-field input::placeholder,.eq-field textarea::placeholder{color:#786560}
  .eq-pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .eq-submit{margin-top:26px;border:none;cursor:pointer;font-family:var(--body)}
  .eq-submit[disabled]{opacity:.55;cursor:default}
  .eq-note{margin:16px 0 0;font-size:.78rem;line-height:1.6;min-height:1.2em}
  .eq-note.err{color:#9B2242}
  .eq-done{
    max-width:560px;margin:44px auto 0;padding:38px 30px;
    background:var(--ivory-warm);border:1px solid rgba(197,161,104,.4);
    box-shadow:var(--lift);
  }
  .eq-done h3{
    font-family:var(--display);font-weight:300;font-size:1.7rem;
    letter-spacing:.04em;margin:0 0 12px;
  }
  .eq-done p{margin:0;color:var(--warm-grey);font-size:.92rem;line-height:1.75}



  /* ---------- rails: real scrolling, real controls ---------- */
  .reel{height:auto!important;padding:var(--rhythm) 0}
  .reel-sticky{position:static;height:auto;overflow:visible;display:block;padding:0}
  .reel-rosette{display:none}
  .reel-head{margin-bottom:clamp(34px,5vw,64px)}

  .reel-viewport,.taste-rail{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    cursor:grab;
  }
  .reel-viewport::-webkit-scrollbar,.taste-rail::-webkit-scrollbar{display:none}
  .reel-viewport.grabbing,.taste-rail.grabbing{cursor:grabbing}

  .reel-track,.tastes{
    transform:none!important;
    width:max-content;
    padding-inline:var(--gutter);
  }
  .reel-track .piece{
    flex:0 0 clamp(238px,25vw,326px);
    scroll-snap-align:center;
  }
  .reel-track .piece:nth-child(even){transform:translateY(clamp(12px,2.4vh,34px))}
  .taste{flex:0 0 clamp(228px,23vw,308px);scroll-snap-align:center}
  .reel-track .plate img.shotimg,.taste .shot img{transform:none!important}

  /* the circular controls from the brand board */
  .rail-nav{
    display:flex;align-items:center;justify-content:center;
    gap:clamp(14px,2vw,26px);
    margin:clamp(30px,4vw,48px) auto 0;
    padding-inline:var(--gutter);
  }
  .rail-btn{
    flex:none;width:50px;height:50px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:transparent;color:var(--gold);
    border:1px solid rgba(197,161,104,.55);
    transition:background .4s ease,border-color .4s ease,color .4s ease,transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s ease;
  }
  .rail-btn svg{width:19px;height:19px;display:block}
  .rail-btn:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#FCFAF6;transform:translateY(-2px)}
  .rail-btn:disabled{opacity:.28;cursor:default}
  .rail-bar{
    flex:1;max-width:260px;height:1px;
    background:rgba(184,150,139,.34);
  }
  .rail-bar span{
    display:block;height:100%;width:0;
    background:var(--foil);background-size:200% 100%;
    transition:width .35s ease;
  }
  @media(max-width:620px){ .rail-bar{max-width:none} }

  @media(prefers-reduced-motion:reduce){
    .reel-viewport,.taste-rail{scroll-behavior:auto}
    .rail-btn{transition:none}
  }



  /* ---------- header legibility ---------- */
  /* nav was cocoa at 72% opacity over a semi transparent bar with lace showing
     through: about 3.4:1, under the 4.5:1 minimum for small text. */
  .masthead{
    background:rgba(247,243,237,.95);
    border-bottom-color:rgba(197,161,104,.42);
  }
  .masthead .brand{color:var(--cocoa);opacity:1}
  .nav a{
    color:var(--cocoa);
    opacity:1;
    font-weight:400;
    font-size:.76rem;
    letter-spacing:.12em;
  }
  .nav a:hover,.nav a:focus-visible{color:#3E2C28;border-bottom-color:var(--gold)}
  .nav .pill{
    color:var(--cocoa);
    border-color:rgba(197,161,104,.75);
  }
  .nav .pill:hover,.nav .pill:focus-visible{background:var(--cocoa);border-color:var(--cocoa);color:#FCFAF6}

  /* the small tracked labels were rose at about 3:1, same problem, quieter */
  .label,.head .label,.hero-eyebrow,.story-lab,.cfg-lab,.eq-field span{
    color:var(--ink-soft);
  }
  .band-rose .head .label,.band-rose .label{color:rgba(252,250,246,.92)}
  .fun .fun-label{color:var(--cocoa)}



  /* the confirmation panel sat inside the left aligned form context */
  .eq-done{text-align:center}
  .eq-done h3{text-align:center;margin:0 0 14px}
  .eq-done p{
    text-align:center;
    max-width:42ch;
    margin-inline:auto;
    text-wrap:pretty;
  }



  /* ---------- story row: three panels of equal height ---------- */
  .story{
    grid-template-columns:1fr 1.22fr 1fr;
    align-items:start;
    gap:clamp(20px,3vw,50px);
  }
  @media(max-width:900px){ .story{grid-template-columns:1fr} }

  /* one fixed frame height across all three, so the captions line up */
  .story-frame{
    height:clamp(320px,34vw,460px);
    aspect-ratio:auto;
    display:flex;align-items:center;justify-content:center;
  }
  .story-frame img{
    width:100%;height:100%;
    aspect-ratio:auto;
    object-fit:cover;
  }
  /* the drawing is a document, so it fits inside the frame rather than filling it */
  .story-sketch{padding:12px;background:#FBF7F0}
  .story-sketch img{object-fit:contain}

  /* captions sit at a common baseline and reserve room for the button */
  .story-step > p{min-height:5.2em}
  @media(max-width:900px){ .story-step > p{min-height:0} }
  .story-replay{margin-top:6px}



  /* ---------- ticker: a true seamless marquee ---------- */
  .fun-ticker{
    overflow:hidden;
    cursor:default;
    padding:15px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .fun-ticker::-webkit-scrollbar{display:none}
  .fun-ticker-track{
    display:flex;width:max-content;
    will-change:transform;
    animation:tickerRun var(--dur,60s) linear infinite;
  }
  .fun-ticker:hover .fun-ticker-track{animation-play-state:paused}
  @keyframes tickerRun{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-100% / var(--copies,2)),0,0)}
  }
  .fun-ticker-track span{
    white-space:nowrap;padding-right:1.4em;
    font-family:var(--display);font-style:italic;font-weight:300;
    font-size:clamp(1.1rem,2.2vw,1.7rem);
    color:rgba(247,243,237,.92);
  }
  @media(prefers-reduced-motion:reduce){
    .fun-ticker-track{animation:none}
    .fun-ticker{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  }



  /* ---------- mood strip: deeper band ---------- */
  .strip{
    padding:clamp(30px,4.6vw,54px) var(--gutter);
    font-size:clamp(.6rem,.86vw,.72rem);
    letter-spacing:.42em;
    font-weight:400;
    color:var(--cocoa);
    background:linear-gradient(180deg,#EFE2DA,#E9DAD2 50%,#EFE2DA);
    border-top:1px solid rgba(197,161,104,.5);
    border-bottom:1px solid rgba(197,161,104,.5);
    line-height:1.9;
  }
  .strip span{opacity:.45;margin:0 10px}



  .eq-done-mark{
    display:block;margin-bottom:16px;
    font-size:.52rem;letter-spacing:.32em;text-transform:uppercase;font-weight:400;
    background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .eq-done h3{font-size:2rem;letter-spacing:.06em}
  .eq-done-alt{
    margin-top:16px!important;padding-top:16px;
    border-top:1px solid rgba(197,161,104,.35);
    font-size:.82rem!important;
  }
  .eq-done-alt a{
    color:var(--cocoa);text-decoration:none;
    border-bottom:1px solid rgba(197,161,104,.6);padding-bottom:2px;
  }
  .eq-done-alt a:hover{border-bottom-color:var(--gold)}



  /* the fixed frame height is for aligning three columns on desktop.
     stacked on mobile it forces a wide crop that cuts the cake, so let the
     frames take their natural shape once the row breaks. */
  @media(max-width:900px){
    .story-frame{height:auto;aspect-ratio:4/5}
    .story-frame img{aspect-ratio:4/5}
    .story-sketch{height:auto;aspect-ratio:auto}
    .story-sketch img{height:auto;aspect-ratio:auto}
  }
  /* keep the cake centred in whatever the frame trims */
  .story-step:last-child .story-frame img{object-position:center 42%}

.foot-nav a{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;text-decoration:none;color:#FCFAF6}.foot-nav a:hover{text-decoration:underline;text-underline-offset:4px}


  /* ---------- flavours teaser ---------- */
  .fl-teaser{
    display:grid;grid-template-columns:.85fr 1.15fr;
    gap:clamp(28px,4.6vw,76px);align-items:center;
    max-width:1080px;margin:0 auto;
  }
  @media(max-width:820px){ .fl-teaser{grid-template-columns:1fr;gap:32px} }
  .fl-shot{
    position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;
    background:var(--ivory-warm);border:1px solid rgba(197,161,104,.36);
    box-shadow:var(--lift);
  }
  .fl-image-link{display:block;width:100%;height:100%}
  .fl-image-link:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
  .fl-shot img{width:100%;height:100%;object-fit:cover;display:block}
  .fl-h{
    font-family:var(--display);font-weight:300;
    font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.16;letter-spacing:.02em;
    margin:14px 0 0;
  }
  .fl-p{margin:20px 0 0;font-size:1rem;line-height:1.9;color:#6E5A53;max-width:46ch}
  .fl-list{
    list-style:none;margin:26px 0 0;padding:22px 0 0;
    border-top:1px solid rgba(197,161,104,.3);
    columns:2;column-gap:clamp(20px,3vw,44px);
  }
  @media(max-width:520px){ .fl-list{columns:1} }
  .fl-list li{
    break-inside:avoid;display:flex;gap:11px;align-items:baseline;
    padding:7px 0;font-size:.88rem;color:var(--cocoa);
  }
  .fl-list li::before{
    content:"";flex:none;width:4px;height:4px;border-radius:50%;
    background:var(--gold);transform:translateY(-2px);
  }
  .fl-btn{margin-top:30px}