/* ============================================================
   MYSTIQUE COMPANIONS — Concept 05 "Deco"
   Symmetric, framed, art-deco. Italiana + Archivo.
   Golden-Beige as gilt linework over ivory and near-black.
   ============================================================ */

:root{
  --ivory:#FAF6EC;
  --ivory-2:#F2EBDA;
  --champ:#E5D5B4;
  --gold:#C7A867;
  --gold-dp:#8A6D3B;
  --gilt:linear-gradient(135deg,#8A6D3B,#E3CC94 42%,#C7A867 62%,#8A6D3B);
  --noir:#1A1611;
  --noir-2:#231E17;
  --ink:#2B2419;
  --ink-2:#5C5343;
  --ink-3:#8C8271;
  --hair:rgba(199,168,103,.42);
  --hair-2:rgba(43,36,25,.14);

  --f-micro: clamp(.62rem, .58rem + .2vmin, .72rem);
  --f-small: clamp(.8rem, .75rem + .28vmin, .9rem);
  --f-body:  clamp(.97rem, .91rem + .42vmin, 1.08rem);
  --f-lead:  clamp(1.06rem, .95rem + .8vmin, 1.38rem);
  --f-h3:    clamp(1.2rem, .95rem + 1.4vmin, 1.95rem);
  --f-h2:    clamp(1.75rem, 1.1rem + 3vmin, 3.6rem);
  --f-h1:    clamp(2.4rem, 1.1rem + 6vmin, 6.6rem);

  --gut: clamp(1.15rem, .5rem + 3vw, 4rem);
  --band: clamp(3.2rem, 1.5rem + 7vmin, 8rem);
  --ease: cubic-bezier(.3,.75,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;font-size:var(--f-body);line-height:1.76;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,picture{max-width:100%;display:block}
img{height:auto;background:var(--ivory-2)}
img[src*="logo"],img[src*="monogram"]{background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Italiana",Didot,Georgia,serif;font-weight:400;margin:0;line-height:1.1}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--gold-dp);outline-offset:3px}
::selection{background:var(--champ);color:var(--noir)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;background:var(--noir);color:var(--ivory);padding:.8rem 1.2rem;z-index:999}
.skip:focus{left:.6rem;top:.6rem}
.shell{width:min(100% - (var(--gut) * 2),1420px);margin-inline:auto}

/* ---- Deco linework primitives ---- */
.gild{height:1px;border:0;margin:0;background:var(--gilt)}
.deco-rule{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:0 0 1.4rem}
.deco-rule::before,.deco-rule::after{content:"";height:1px;flex:1;max-width:5rem;background:var(--gilt)}
.deco-rule span{font-family:"Archivo",sans-serif;font-size:var(--f-micro);font-weight:600;
  letter-spacing:.44em;text-transform:uppercase;color:var(--gold-dp)}
.lozenge{width:.42rem;height:.42rem;background:var(--gold);rotate:45deg;flex:0 0 auto}

/* Stepped deco frame */
.frame{position:relative;padding:clamp(1.6rem,1rem + 3vmin,3.6rem)}
.frame::before,.frame::after{content:"";position:absolute;pointer-events:none}
.frame::before{inset:0;border:1px solid var(--hair)}
.frame::after{inset:clamp(.32rem,.9vmin,.65rem);border:1px solid rgba(199,168,103,.24)}
.frame--dark::before{border-color:rgba(199,168,103,.5)}
.frame--dark::after{border-color:rgba(199,168,103,.22)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.75em;cursor:pointer;
  padding:clamp(.78rem,.58rem + .62vmin,1.05rem) clamp(1.5rem,1rem + 1.8vmin,2.6rem);
  background:var(--noir);color:var(--champ);border:1px solid var(--noir);
  font-family:"Archivo",sans-serif;font-size:var(--f-micro);font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.btn:hover{background:transparent;color:var(--noir);border-color:var(--gold-dp)}
.btn--gold{background:transparent;color:var(--gold-dp);border-color:var(--gold-dp)}
.btn--gold:hover{background:var(--noir);color:var(--champ);border-color:var(--noir)}
.btn--ivory{background:var(--champ);color:var(--noir);border-color:var(--champ)}
.btn--ivory:hover{background:transparent;color:var(--champ);border-color:var(--champ)}
.arrow{transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(.32em)}
.tl{display:inline-flex;align-items:center;gap:.55em;font-size:var(--f-micro);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dp);
  border-bottom:1px solid var(--hair);padding-bottom:.3rem;transition:color .4s,border-color .4s}
.tl:hover{color:var(--noir);border-color:var(--noir)}

/* ============ HEADER — symmetric ============ */
.crest{background:var(--noir);color:var(--champ);text-align:center;padding:.6rem var(--gut);
  font-size:var(--f-micro);letter-spacing:.4em;text-transform:uppercase}
.top{position:sticky;top:0;z-index:80;background:rgba(250,246,236,.93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.top__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding-block:clamp(.7rem,.4rem + 1.1vmin,1.4rem)}
.top__nav{display:flex;align-items:center;gap:clamp(.8rem,.2rem + 1.5vw,2.1rem)}
.top__nav--r{justify-content:flex-end}
.top__right{display:flex;align-items:center;justify-content:flex-end;gap:clamp(.6rem,1.4vw,1.4rem)}
.only-mob{display:none}
.top__nav a{font-size:var(--f-micro);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);transition:color .35s var(--ease)}
.top__nav a:hover{color:var(--gold-dp)}
.top__logo{justify-self:center}
.top__logo img{width:clamp(140px,10vw + 74px,232px)}
.burger{display:none;width:2.8rem;height:2.8rem;border:1px solid var(--hair);background:transparent;
  cursor:pointer;align-items:center;justify-content:center;padding:0}
.burger span{display:block;width:1.1rem;height:1px;background:var(--noir);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--noir);transition:transform .4s var(--ease)}
.burger span::before{top:-.3rem}.burger span::after{top:.3rem}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(.3rem) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-.3rem) rotate(-45deg)}

/* ============ HERO — centred, framed, medallion ============ */
.hero{position:relative;text-align:center;padding:clamp(2.4rem,6vh,5rem) var(--gut) var(--band);overflow:hidden}
.hero__medal{width:clamp(3.2rem,7vmin,5.4rem);margin:0 auto clamp(1.2rem,3vh,2.2rem)}
.hero h1{font-size:var(--f-h1);letter-spacing:.01em;margin:0 auto clamp(1rem,2.4vh,1.8rem);max-width:15ch}
.hero__sub{font-size:var(--f-lead);color:var(--ink-2);max-width:50ch;margin:0 auto clamp(1.6rem,3.4vh,2.6rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}
.hero__plate{margin-top:clamp(2.2rem,5vh,4rem);position:relative}
.hero__plate .frame{padding:clamp(.6rem,1.4vmin,1.1rem)}
.hero__plate img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 40%}
.hero__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:clamp(2rem,4vh,3.4rem)}
@media (min-width:46rem){.hero__facts{grid-template-columns:repeat(4,1fr)}}
.hero__facts div{background:var(--ivory);padding:clamp(.9rem,2vmin,1.5rem)}
.hero__facts dt{font-family:"Italiana",serif;font-size:var(--f-h3);line-height:1;margin-bottom:.45rem}
.hero__facts dd{margin:0;font-size:var(--f-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}

/* ============ SECTIONS ============ */
.band{padding-block:var(--band)}
.band--ivory{background:var(--ivory-2)}
.band--noir{background:var(--noir);color:rgba(229,213,180,.8)}
.band--noir h2,.band--noir h3{color:var(--champ)}
.band--noir .deco-rule span{color:var(--gold)}
.band--noir .lede{color:rgba(229,213,180,.76)}
.head{text-align:center;max-width:62ch;margin:0 auto clamp(2.2rem,1rem + 3.4vmin,4rem)}
.head h2{font-size:var(--f-h2);margin:0 0 .9rem}
.lede{font-size:var(--f-lead);color:var(--ink-2)}

/* ---- Manifesto: symmetric two columns with a centre rule ---- */
.col2{display:grid;gap:clamp(1.6rem,1rem + 3vw,4rem);grid-template-columns:1fr;max-width:64rem;margin-inline:auto}
@media (min-width:52rem){
  .col2{grid-template-columns:repeat(2,1fr);position:relative}
  .col2::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--hair);
    transform:translateX(-50%)}
  .col2 > *{padding-inline:clamp(0rem,1.4vw,1.8rem)}
}
.col2 p{font-size:var(--f-small);line-height:1.9;color:var(--ink-2)}
.band--noir .col2 p{color:rgba(229,213,180,.76)}
.band--noir .col2::before{background:rgba(199,168,103,.3)}

/* ---- Services: symmetric triptych ---- */
.trip{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:56rem){.trip{grid-template-columns:repeat(3,1fr)}}
.trip__p{text-align:center;padding:clamp(1.6rem,1rem + 2.4vmin,3rem) clamp(1rem,2vw,2.2rem);
  border-top:1px solid var(--hair)}
@media (min-width:56rem){
  .trip__p{border-top:0}
  .trip__p + .trip__p{border-left:1px solid var(--hair)}
}
.trip__n{display:grid;place-items:center;width:2.8rem;height:2.8rem;margin:0 auto 1.2rem;
  border:1px solid var(--gold-dp);rotate:45deg}
.trip__n b{rotate:-45deg;font-family:"Italiana",serif;font-size:1.05rem;color:var(--gold-dp);font-weight:400}
.trip__p h3{font-size:var(--f-h3);margin:0 0 .8rem}
.trip__p p{font-size:var(--f-small);color:var(--ink-2);line-height:1.86}

/* ---- Companion carousel ---- */
/* The belt was a snap carousel whose padding centred exactly one slide:
   at desktop widths that parked the group against the right edge with a
   wide void beside it. It now runs as a continuous ribbon. The slide set
   is cloned until the belt is at least twice the viewport, so translating
   it by exactly -50% lands on the first clone and the loop is seamless —
   no seam, no gap, no empty edge at any width. Slides carry margin-right
   rather than the track carrying `gap`, which is what makes each slide
   occupy exactly W + G and half the belt a whole number of slides. */
.stage{position:relative;overflow:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.track{--slide-w:min(78vw,20rem);--slide-gap:clamp(.8rem,2vw,1.8rem);
  display:flex;flex-wrap:nowrap;width:max-content;
  animation:belt var(--belt-dur,90s) linear infinite}
/* The shift is an exact pixel distance set by the script, not -50%: a flex
   container sized by max-content can measure wider than the slides it holds,
   which would make -50% overshoot the repeat point and flash a seam. */
@keyframes belt{from{transform:translate3d(0,0,0)}
                to{transform:translate3d(calc(-1 * var(--belt-shift,50%)),0,0)}}
.stage:hover .track,.stage:focus-within .track,.track[data-paused="true"]{animation-play-state:paused}
.slide{flex:0 0 var(--slide-w);width:var(--slide-w);margin-right:var(--slide-gap);text-align:center}

/* Reduced motion: no belt, no clones (the script skips them) — just a
   plain scrollable row, so every companion is still reachable. */
@media (prefers-reduced-motion:reduce){
  .stage{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .stage::-webkit-scrollbar{display:none}
  .track{animation:none;padding-inline:var(--gut)}
}
.slide .frame{padding:clamp(.42rem,1vmin,.7rem)}
.slide img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:filter .8s var(--ease);filter:sepia(.08) saturate(.94)}
.slide:hover img{filter:sepia(0) saturate(1.02)}
.slide h3{font-size:var(--f-h3);margin:1.1rem 0 .15rem}
.slide .loc{font-size:var(--f-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dp);margin:0 0 .7rem}
.slide p{font-size:var(--f-small);color:var(--ink-2);line-height:1.78;margin:0}
.band--noir .slide p{color:rgba(229,213,180,.76)}

.stage__ctl{display:flex;justify-content:center;margin-top:clamp(1.5rem,3.2vh,2.6rem)}
.belt-toggle{display:inline-flex;align-items:center;gap:.85em;cursor:pointer;
  padding:.8rem 1.9rem;border:1px solid var(--hair);background:transparent;color:inherit;
  font-family:"Archivo",system-ui,sans-serif;font-size:var(--f-micro);font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.belt-toggle::before{content:"";flex:0 0 auto;width:.46rem;height:.64rem;
  border-left:2px solid currentColor;border-right:2px solid currentColor}
.belt-toggle[aria-pressed="true"]::before{width:0;height:0;border:0;
  border-left:.6rem solid currentColor;border-top:.35rem solid transparent;border-bottom:.35rem solid transparent}
.belt-toggle:hover{background:var(--noir);color:var(--champ);border-color:var(--noir)}
.band--noir .belt-toggle:hover{background:var(--champ);color:var(--noir);border-color:var(--champ)}
@media (prefers-reduced-motion:reduce){.stage__ctl{display:none}}

/* ---- Process: symmetric quartet ---- */
.quart{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);grid-template-columns:1fr}
@media (min-width:44rem){.quart{grid-template-columns:repeat(2,1fr)}}
@media (min-width:80rem){.quart{grid-template-columns:repeat(4,1fr)}}
.quart__s{background:var(--ivory);padding:clamp(1.4rem,2.6vmin,2.6rem);text-align:center}
.band--ivory .quart__s{background:var(--ivory-2)}
.quart__s b{display:block;font-family:"Italiana",serif;font-size:2.1rem;color:var(--gold-dp);
  font-weight:400;line-height:1;margin-bottom:1rem}
.quart__s h3{font-size:var(--f-h3);margin:0 0 .6rem}
.quart__s p{font-size:var(--f-small);color:var(--ink-2);line-height:1.86;margin:0}

/* ---- Membership certificate ---- */
.cert{max-width:62rem;margin-inline:auto;text-align:center}
.cert h2{font-size:var(--f-h2);margin:0 0 1rem}
.cert__list{list-style:none;margin:2rem auto;padding:0;max-width:46rem;display:grid;gap:0;text-align:left}
.cert__list li{padding-block:.9rem;border-bottom:1px solid rgba(199,168,103,.26);
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;font-size:var(--f-small);line-height:1.75}
.cert__list li::before{content:"";width:.36rem;height:.36rem;background:var(--gold);rotate:45deg;translate:0 -.15rem}
.cert__fine{font-size:var(--f-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:1.6rem 0 0}

/* ---- Destinations: gilded columns ---- */
.geo{display:grid;gap:clamp(1.2rem,.6rem + 2vw,2.6rem);grid-template-columns:repeat(2,1fr);text-align:center}
@media (min-width:60rem){.geo{grid-template-columns:repeat(4,1fr)}}
.geo h4{font-family:"Archivo",sans-serif;font-size:var(--f-micro);font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-dp);margin:0 0 1rem;padding-bottom:.8rem;
  border-bottom:1px solid var(--hair)}
.geo ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-family:"Italiana",serif;
  font-size:clamp(1rem,.8rem + .8vmin,1.4rem);color:var(--ink)}
.band--noir .geo ul{color:var(--champ)}

/* ---- FAQ ---- */
.qa{max-width:62rem;margin-inline:auto;border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding-block:clamp(.95rem,2.2vmin,1.5rem);font-family:"Italiana",serif;font-size:var(--f-h3);
  line-height:1.3;transition:color .4s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold-dp)}
.qa summary i{flex:0 0 auto;width:1.5rem;height:1.5rem;border:1px solid var(--gold-dp);rotate:45deg;
  display:grid;place-items:center;transition:background .4s var(--ease)}
.qa details[open] summary i{background:var(--gold)}
.qa__a{padding:0 0 clamp(1rem,2.4vmin,1.7rem);max-width:76ch}
.qa__a p{margin:0;font-size:var(--f-small);color:var(--ink-2);line-height:1.9}
.band--noir .qa__a p{color:rgba(229,213,180,.76)}

/* ---- Closing ---- */
.finale{text-align:center}
.finale h2{font-size:var(--f-h2);max-width:20ch;margin:0 auto 1rem}
.finale p{max-width:48ch;margin:0 auto 2rem;font-size:var(--f-lead)}

/* ---- Footer ---- */
.foot{background:var(--noir);color:rgba(229,213,180,.68);padding:var(--band) var(--gut) 1.8rem;font-size:var(--f-small);text-align:center}
.foot__medal{width:3rem;margin:0 auto 1.4rem}
.foot__logo img{width:clamp(160px,15vw,236px);margin:0 auto 1.4rem}
.foot__g{display:grid;gap:clamp(1.6rem,1rem + 3vw,3.4rem);grid-template-columns:1fr;margin-top:clamp(2rem,4vh,3.4rem)}
@media (min-width:44rem){.foot__g{grid-template-columns:repeat(3,1fr)}}
.foot h4{font-family:"Archivo",sans-serif;font-size:var(--f-micro);font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot a:hover{color:var(--champ)}
.foot__end{margin-top:var(--band);padding-top:1.4rem;border-top:1px solid rgba(199,168,103,.24);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
  font-size:var(--f-micro);letter-spacing:.26em;text-transform:uppercase;color:rgba(229,213,180,.5)}

/* ---- Reveal ---- */
[data-rise]{opacity:0;transform:translateY(1.5rem);transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-rise].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rise]{opacity:1;transform:none}}

/* ============================================================
   ORIENTATION + LIQUID BEHAVIOUR
   ============================================================ */

@media (max-width:62rem){
  .burger{display:flex}
  .top__in{grid-template-columns:auto 1fr}
  .top__logo{justify-self:start}
  .top__nav--l{display:none}
  .only-mob{display:block}
  .top__nav--r{position:fixed;inset:0 0 0 auto;width:min(84vw,25rem);background:var(--ivory);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.4rem;
    padding:var(--gut);transform:translateX(101%);transition:transform .55s var(--ease);z-index:90;
    border-left:1px solid var(--hair);overflow-y:auto}
  .top__nav--r[data-open="true"]{transform:none}
  .top__nav--r a{font-family:"Italiana",serif;font-size:var(--f-lead);letter-spacing:.05em;text-transform:none}
  .scrim{position:fixed;inset:0;background:rgba(26,22,17,.44);opacity:0;pointer-events:none;
    transition:opacity .5s var(--ease);z-index:85}
  .scrim[data-open="true"]{opacity:1;pointer-events:auto}
}
@media (min-width:62.0625rem){.scrim{display:none}}

/* PHONE IN LANDSCAPE — deco framing costs vertical room, so the
   frames tighten, the hero plate widens and the carousel shows more. */
@media (orientation:landscape) and (max-height:34rem){
  :root{--band:clamp(1.6rem,1rem + 2.8vmin,2.8rem)}
  .hero{padding-top:1.4rem}
  .hero__medal{width:2.4rem;margin-bottom:.7rem}
  .hero h1{font-size:clamp(1.9rem,1rem + 5.6vmin,3.4rem);max-width:22ch;margin-bottom:.7rem}
  .hero__sub{margin-bottom:1.1rem;font-size:var(--f-body)}
  .hero__plate{margin-top:1.4rem}
  .hero__plate img{aspect-ratio:21/9}
  .hero__facts{grid-template-columns:repeat(4,1fr);margin-top:1.2rem}
  .hero__facts div{padding:.65rem}
  .frame{padding:clamp(1rem,2.4vmin,1.8rem)}
  .track{--slide-w:min(46vw,15rem)}
  .crest{padding-block:.38rem}
  .top__nav--r{width:min(70vw,30rem);display:grid;grid-template-columns:repeat(2,1fr);
    align-content:center;gap:.9rem 1.6rem}
  .top__nav--r .btn{grid-column:1 / -1;justify-content:center}
  .quart__s{padding:.9rem}
}

/* Tablet portrait — the triptych stays symmetric, carousel widens */
@media (orientation:portrait) and (min-width:44rem) and (max-width:62rem){
  .track{--slide-w:min(52vw,19rem)}
}

@media (hover:none){.slide:hover img{filter:sepia(.08) saturate(.94)}}