/* ═══════════════════════════════════════════════
   AETHOL by Meghna — shared stylesheet
   Every colour is sampled from the brand logo.
   ═══════════════════════════════════════════════ */

:root{
  --ivory:#FCF6F0;        /* logo field            */
  --ivory-deep:#F4E9DC;   /* warm alternate band   */
  --ink:#0D1A11;          /* wordmark green-black  */
  --forest:#1B3A2A;       /* leaf green            */
  --gold:#946923;         /* deep gold, date line  */
  --gold-light:#C8A15B;   /* script gold           */
  --gold-pale:#E0CFB0;    /* hairline / rule       */
  --garnet:#B3241A;       /* the wolf's eye        */

  --display:"Italiana",Georgia,serif;
  --script:"Cormorant Garamond",Georgia,serif;
  --body:"Karla",system-ui,-apple-system,sans-serif;

  --rail:56px;
  --gut:clamp(20px,5vw,72px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-left:var(--rail);
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}

h1,h2,h3,h4{margin:0;font-weight:400}
.display{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:.02em}
h2.display{font-size:clamp(2.2rem,5.2vw,3.8rem)}
.eyebrow{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 1.1rem}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:#3b4a3f;max-width:58ch}
.sanskrit{font-family:var(--script);font-style:italic;font-weight:300}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(66px,9vw,120px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--warm{background:var(--ivory-deep)}
.section--dark{background:var(--ink);color:var(--ivory)}
.section--dark .lede{color:#c9d3c6}
.section--dark h2.display{color:var(--ivory)}
.rule{height:1px;background:var(--gold-pale);border:0;margin:0}
.head{max-width:64ch;margin-bottom:clamp(32px,5vw,56px)}
.head p{margin:1.1rem 0 0}

/* ── Selvedge: a tape measure down the page edge ── */
.selvedge{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;
  border-right:1px solid var(--gold-pale);display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--gold-pale) 0 1px,transparent 1px 22px) right/9px 100% no-repeat;
}
.selvedge span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.6rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);opacity:.8}
@media(max-width:1100px){.selvedge{display:none}:root{--rail:0px}}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ivory) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav[data-stuck="true"]{border-bottom-color:var(--gold-pale)}
.nav__in{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand img{width:40px}
.brand b{font-family:var(--display);font-size:1.22rem;letter-spacing:.24em;font-weight:400}
.nav__links{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#42513f;padding-block:.4rem;border-bottom:1px solid transparent;transition:.25s}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.nav__links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.nav__toggle{display:none;background:none;border:1px solid var(--gold-pale);padding:.5rem .8rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}

.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;cursor:pointer;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:.92rem 1.6rem;border:1px solid var(--ink);background:var(--ink);color:var(--ivory);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.btn:hover{background:var(--forest);border-color:var(--forest)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--gold)}
.btn--ghost:hover{background:var(--gold);color:var(--ivory);border-color:var(--gold)}
.btn--light{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn--light:hover{background:var(--gold-pale);border-color:var(--gold-pale)}

@media(max-width:1000px){
  .nav__toggle{display:block}
  .nav__cta{display:none}
  .nav__links{position:absolute;left:0;right:0;top:100%;background:var(--ivory);border-block:1px solid var(--gold-pale);flex-direction:column;gap:0;padding:.5rem var(--gut) 1.4rem;display:none}
  .nav__links[data-open="true"]{display:flex}
  .nav__links a{padding-block:.9rem;border-bottom:1px solid #efe4d6;width:100%}
}

/* ── Masthead: the interior-page opener ── */
.masthead{padding-block:clamp(46px,6.5vw,88px) 0}
.masthead h1{font-family:var(--display);font-size:clamp(2.4rem,6.2vw,4.3rem);line-height:1.03;margin:0 0 1.1rem}
.masthead h1 i{font-family:var(--script);font-style:italic;color:var(--gold)}
.mast-rule{display:block;width:100%;height:40px;margin-top:clamp(26px,4vw,46px)}
.mast-rule line,.mast-rule path{stroke:var(--gold);fill:none;stroke-width:.9;opacity:.7;vector-effect:non-scaling-stroke}
.mast-rule .measure{stroke-dasharray:4 4}
.mast-rule text{fill:var(--gold);font-family:var(--body);font-size:7.4px;letter-spacing:.18em;text-transform:uppercase}

/* ── Section sub-navigation (long catalogue pages) ── */
.subnav{position:sticky;top:74px;z-index:30;background:color-mix(in srgb,var(--ivory) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--gold-pale)}
.subnav ul{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0;overflow-x:auto;min-height:52px;align-items:center}
.subnav a{text-decoration:none;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#5d6b5f;white-space:nowrap;padding-block:.3rem;border-bottom:1px solid transparent;transition:.25s}
.subnav a:hover{color:var(--ink);border-bottom-color:var(--gold)}

/* ── Reveal ── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
  .draw{stroke-dashoffset:0!important}
  .draft text{opacity:1!important}
}

/* ── Hero (home only) ── */
.hero{position:relative;padding-block:clamp(40px,5.5vw,74px) clamp(56px,7.5vw,98px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start}
.hero__mark{font-family:var(--display);font-size:clamp(2.5rem,6.4vw,4.4rem);letter-spacing:.3em;margin:0 0 .1em;text-indent:.3em}
.hero__by{font-family:var(--script);font-style:italic;font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--gold);margin:0 0 1rem}
.hero__motto{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:#5d6b5f;margin:0 0 2rem}
.hero__motto em{font-family:var(--script);font-size:1.28em;letter-spacing:.06em;text-transform:none;color:var(--gold)}
.hero h1{font-family:var(--display);font-size:clamp(1.95rem,4.2vw,3.15rem);line-height:1.08;margin:0 0 1.2rem}
.hero h1 i{font-family:var(--script);font-style:italic;color:var(--gold)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}
.hero__meta{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--gold-pale)}
.hero__meta div{min-width:112px}
.hero__meta dt{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem}
.hero__meta dd{margin:0;font-family:var(--display);font-size:1.3rem}

.hero__crest{position:relative;justify-self:end;align-self:start;width:min(430px,94%);aspect-ratio:420/386;margin-top:.4rem}
.hero__crest img{position:absolute;z-index:2;left:50%;top:1%;width:56%;transform:translateX(-50%);filter:drop-shadow(0 14px 28px rgba(13,26,17,.08))}
.draft{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.draft line,.draft path{stroke:var(--gold);stroke-width:.9;fill:none;opacity:.7}
.draft text{fill:var(--gold);font-family:var(--body);font-size:7.6px;letter-spacing:.16em;text-transform:uppercase}
.measure{stroke-dasharray:4 4}
.draw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);animation:draw 1.6s var(--ease) forwards}
.draft text{opacity:0;animation:fadeIn .9s var(--ease) 1.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr}
  .hero__crest{order:-1;width:min(320px,72%);aspect-ratio:auto;justify-self:center;margin:0 auto}
  .hero__crest img{position:static;width:100%;transform:none;margin:0 auto}
  .draft{display:none}
}

/* ── The promise band ── */
.promise{text-align:center;padding-block:clamp(42px,5.5vw,70px)}
.promise p{font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2.4rem);letter-spacing:.16em;margin:0}
.promise span{color:var(--gold)}

/* ── Cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;background:var(--gold-pale);border:1px solid var(--gold-pale)}
.card{background:var(--ivory);padding:2.1rem 1.8rem 1.9rem;transition:background .4s var(--ease)}
.section--warm .card{background:var(--ivory-deep)}
.card:hover{background:#fffaf4}
.card__no{font-size:.62rem;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.card h3{font-family:var(--display);font-size:1.6rem;margin:.65rem 0 .5rem}
.card p{margin:0;font-size:.94rem;color:#495747}

/* ── Chips ── */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--gold-pale);padding:.5rem .95rem;font-size:.86rem;background:transparent;transition:.25s var(--ease)}
.chip:hover{border-color:var(--gold);background:#fffaf4}
.section--warm .chip:hover{background:var(--ivory)}
.chip--lead{border-color:var(--gold);color:var(--gold)}

/* ── The two houses (home) ── */
.houses{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gold-pale);border:1px solid var(--gold-pale)}
.house{background:var(--ivory);padding:clamp(2rem,4vw,3.2rem) clamp(1.6rem,3vw,2.6rem);text-decoration:none;display:block;transition:background .4s var(--ease)}
.house:hover{background:#fffaf4}
.house .k{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.house h3{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:.06em;margin:.5rem 0 1rem}
.house p{margin:0 0 1.4rem;font-size:.95rem;color:#495747}
.house .go{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:inline-flex;gap:.6rem;align-items:center}
.house:hover .go i{transform:translateX(5px)}
.house .go i{font-style:normal;transition:transform .35s var(--ease)}
@media(max-width:760px){.houses{grid-template-columns:1fr}}

/* ── Catalogue groups ── */
.group{margin-bottom:clamp(2.4rem,4vw,3.6rem);scroll-margin-top:140px}
.group__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:1rem}
.group__head h2,.group__head h3{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.1rem)}
.group__head span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.group__head::after{content:"";flex:1;height:1px;background:var(--gold-pale)}
.group__note{margin:0 0 1.2rem;font-size:.94rem;color:#495747;max-width:62ch}

/* ── Configurator ── */
.studio{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.stage{position:sticky;top:104px;background:var(--ivory-deep);border:1px solid var(--gold-pale);padding:1.5rem 1.5rem 1.1rem}
.stage svg{width:100%;height:auto;display:block}
.stage__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--gold-pale)}
.stage__cap b{font-family:var(--display);font-size:1.28rem;font-weight:400}
.stage__cap span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.field{border:0;padding:0;margin:0 0 1.7rem}
.field > legend{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding:0;margin-bottom:.75rem;display:block}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{border:1px solid var(--gold-pale);background:transparent;padding:.58rem .95rem;cursor:pointer;font-size:.83rem;transition:.25s var(--ease);display:inline-flex;align-items:center;gap:.5rem}
.opt:hover{border-color:var(--gold)}
.opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.opt[aria-pressed="true"] .dot{box-shadow:0 0 0 2px var(--ivory)}
.dot{width:13px;height:13px;border-radius:50%;display:inline-block;border:1px solid rgba(13,26,17,.18)}
select.pick{font:inherit;font-size:.92rem;color:var(--ink);background:var(--ivory-deep);border:1px solid var(--gold-pale);padding:.62rem .7rem;width:100%;border-radius:0}
select.pick:focus{outline:none;border-color:var(--gold)}
.spec{border:1px solid var(--gold-pale);padding:1.3rem 1.4rem;background:var(--ivory-deep)}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.3rem;margin:0 0 1.2rem}
.spec dt{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-top:.25rem}
.spec dd{margin:0;font-size:.97rem}
.spec .btn{width:100%;justify-content:center}
.spec__note{font-size:.76rem;color:#5f6d5f;margin:.9rem 0 0;line-height:1.6}
@media(max-width:900px){.studio{grid-template-columns:1fr}.stage{position:static}}

/* ── Libraries ── */
.lib{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem 2.6rem}
.lib section{min-width:0}
.lib h3{font-family:var(--display);font-size:1.38rem;margin-bottom:.4rem}
.lib .tex{height:6px;margin-bottom:.9rem}
.tex--silk{background:linear-gradient(90deg,#946923,#C8A15B,#E0CFB0)}
.tex--sheer{background:linear-gradient(90deg,#E0CFB0,#F4E9DC,#C8A15B)}
.tex--struct{background:linear-gradient(90deg,#1B3A2A,#946923,#1B3A2A)}
.tex--loom{background:repeating-linear-gradient(90deg,#946923 0 4px,#E0CFB0 4px 8px)}
.tex--natural{background:linear-gradient(90deg,#C8A15B,#E0CFB0,#F4E9DC)}
.tex--emb{background:linear-gradient(90deg,#C8A15B,#946923,#C8A15B)}
.tex--surface{background:repeating-linear-gradient(90deg,#C8A15B 0 3px,transparent 3px 9px),#E0CFB0}
.tex--cut{background:linear-gradient(90deg,#1B3A2A,#C8A15B)}
.tex--personal{background:linear-gradient(90deg,#946923,#B3241A)}

/* ── Mix & match ── */
.mix{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--gold-pale);border:1px solid var(--gold-pale)}
.mixcard{background:var(--ivory);padding:1.9rem 1.7rem;transition:background .4s var(--ease)}
.section--warm .mixcard{background:var(--ivory-deep)}
.mixcard:hover{background:#fffaf4}
.mixcard b{display:block;font-family:var(--display);font-size:1.32rem;font-weight:400}
.mixcard i{display:block;font-family:var(--script);font-style:italic;color:var(--gold);font-size:1.5rem;line-height:1;margin:.3rem 0}
.mixcard em{display:block;font-family:var(--display);font-size:1.32rem;font-style:normal}

/* ── Journey ── */
.time{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0}
.time li{padding:1.9rem 1.6rem 1.7rem 0;border-top:1px solid var(--gold-pale);position:relative}
.time li::before{content:"";position:absolute;top:-1px;left:0;width:26px;height:1px;background:var(--gold);transition:width .5s var(--ease)}
.time li:hover::before{width:70%}
.time .wk{font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.time h3{font-family:var(--display);font-size:1.42rem;margin:.6rem 0 .45rem}
.time p{margin:0;font-size:.9rem;color:#495747}

/* ── Philosophy ── */
.phil{text-align:center}
.phil img{width:92px;margin:0 auto 2rem;opacity:.9}
.phil .q{font-family:var(--script);font-style:italic;font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.3;color:var(--gold-light);margin:0 auto;max-width:23ch}
.phil p.long{max-width:58ch;margin:2rem auto 0;color:#c6d0c4}
.phil .tag{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:#a8b5a6;margin:2.4rem 0 0}

/* ── Enquiry ── */
.book{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.form label{display:flex;flex-direction:column;gap:.45rem;font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--ivory);border:0;border-bottom:1px solid var(--gold-pale);padding:.6rem .1rem;letter-spacing:0;text-transform:none;border-radius:0}
.form textarea{resize:vertical;min-height:84px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--gold)}
.contactlist{list-style:none;padding:0;margin:1.7rem 0 0}
.contactlist li{padding:.85rem 0;border-top:1px solid var(--gold-pale);font-size:.95rem}
.contactlist span{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.2rem}
.contactlist a{text-decoration:none;border-bottom:1px solid var(--gold-pale)}
.contactlist a:hover{border-bottom-color:var(--gold)}
@media(max-width:900px){.book{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* ── Page turn ── */
.turn{border-top:1px solid var(--gold-pale);margin-top:clamp(48px,7vw,86px)}
.turn a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.2rem;text-decoration:none;padding-block:clamp(1.6rem,3vw,2.4rem);transition:padding-left .4s var(--ease)}
.turn a:hover{padding-left:.6rem}
.turn .k{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.turn b{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:400;letter-spacing:.04em}
.turn i{font-style:normal;color:var(--gold);margin-left:auto;font-size:1.4rem;transition:transform .4s var(--ease)}
.turn a:hover i{transform:translateX(8px)}

/* ── Footer ── */
.foot{background:var(--ink);color:#b9c4b7;padding-block:clamp(54px,7vw,80px) 2rem}
.foot__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.6rem;align-items:start}
.foot__mark{font-family:var(--display);font-size:1.7rem;letter-spacing:.28em;color:var(--ivory);margin:0 0 .3rem}
.foot__by{font-family:var(--script);font-style:italic;color:var(--gold-light);margin:0 0 1rem}
.foot h4{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);margin:0 0 1rem;font-weight:600}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:.92rem}
.foot a{text-decoration:none;opacity:.85}
.foot a:hover{opacity:1;color:var(--ivory)}
.foot__base{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgba(224,207,176,.16);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;letter-spacing:.1em;color:#7d8a7c}
@media(max-width:760px){.foot__top{grid-template-columns:1fr}}


/* ═══════════════════════════════════════════════
   MOBILE REFINEMENTS
   ═══════════════════════════════════════════════ */

/* iOS Safari zooms the page in whenever a focused field is
   under 16px — so lift form text to exactly 16px on small screens. */
@media(max-width:820px){
  .form input,.form select,.form textarea,select.pick{font-size:16px}
}

@media(max-width:760px){
  /* the wordmark needs less tracking to survive a narrow column */
  .hero__mark{letter-spacing:.2em;text-indent:.2em}
  .brand b{letter-spacing:.18em;font-size:1.1rem}
  .nav__in{gap:.9rem}

  /* stack the promise into a centred lockup instead of one long line */
  .promise p{font-size:1.35rem;letter-spacing:.2em;line-height:1.5}
  .promise span{display:block;font-size:.8em;margin:.5rem 0}

  /* the measure rule reads better shorter */
  .mast-rule{height:26px;margin-top:1.9rem}

  /* page turn: kicker above the label */
  .turn .k{flex-basis:100%}
  .turn i{margin-left:0}

  /* group heading: count under the title, rule full width beneath */
  .group__head span{order:3}
  .group__head::after{flex-basis:100%;order:4}

  /* sub-nav gets breathing room at the end of its scroll */
  .subnav ul{-webkit-overflow-scrolling:touch;padding-right:1rem}
}

@media(max-width:560px){
  /* full-width stacked buttons — no orphaned half-width pairs */
  .hero__actions .btn,.form .full .btn{width:100%;justify-content:center}
  .form .full .btn{margin:0 0 .7rem}
  #mailInstead{margin-left:0 !important}

  .hero__meta{gap:1.4rem}
  .hero__meta div{min-width:calc(50% - .7rem)}

  .spec dl{grid-template-columns:1fr;gap:.15rem}
  .spec dt{padding-top:.6rem}

  .time li{padding-right:0}
  .card,.mixcard{padding:1.7rem 1.4rem}
  .house{padding:2rem 1.5rem}
}


/* ═══════════════════════════════════════════════
   INSTALLABLE APP
   ═══════════════════════════════════════════════ */

/* the install invitation — only ever shown when Android offers it */
.install{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);
  z-index:80;display:none;align-items:center;gap:.9rem;
  background:var(--ivory);border:1px solid var(--gold-pale);
  padding:.75rem .8rem .75rem 1rem;max-width:min(440px,calc(100vw - 32px));
  box-shadow:0 14px 40px rgba(13,26,17,.14);
  transition:transform .5s var(--ease);
}
.install[data-show="true"]{display:flex;transform:translate(-50%,0)}
.install img{width:38px;flex:none}
.install p{margin:0;font-size:.83rem;line-height:1.4;color:#3b4a3f}
.install p b{display:block;font-family:var(--display);font-size:1.02rem;letter-spacing:.06em;color:var(--ink)}
.install .btn{padding:.62rem 1rem;font-size:.66rem;flex:none}
.install .x{
  background:none;border:0;cursor:pointer;color:var(--gold);
  font-size:1.1rem;line-height:1;padding:.3rem .1rem .3rem .2rem;flex:none;
}
@media(max-width:520px){
  .install{left:12px;right:12px;transform:translate(0,140%);max-width:none}
  .install[data-show="true"]{transform:translate(0,0)}
  .install img{width:32px}
}

/* offline notice */
.offline-note{
  position:fixed;left:0;right:0;top:0;z-index:90;
  background:var(--ink);color:var(--ivory);text-align:center;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.55rem 1rem;transform:translateY(-100%);transition:transform .4s var(--ease);
}
.offline-note[data-show="true"]{transform:none}

/* when launched from the home screen, respect the phone's safe areas */
@media (display-mode: standalone){
  .nav{padding-top:env(safe-area-inset-top)}
  .foot{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
  .install{bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* ═══════════════════════════════════════════════
   COLOUR PICKER (Design yours)
   ═══════════════════════════════════════════════ */
.acp{display:grid;gap:12px;max-width:520px}
.acp-sv{position:relative;height:190px;border:1px solid var(--gold-pale);cursor:crosshair;touch-action:none;outline:none;user-select:none}
.acp-sv-white,.acp-sv-black{position:absolute;inset:0;pointer-events:none}
.acp-sv-white{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}
.acp-sv-black{background:linear-gradient(to top,#000,rgba(0,0,0,0))}
.acp-ptr{position:absolute;width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);
  border:3px solid #fff;box-shadow:0 0 0 1px rgba(13,26,17,.55),0 3px 10px rgba(13,26,17,.35);pointer-events:none;transition:width .15s,height .15s}
.acp-sv:focus-visible .acp-ptr,.acp-sv:active .acp-ptr{width:28px;height:28px}
.acp-sv:focus-visible{box-shadow:0 0 0 2px var(--gold)}
.acp-hue{position:relative;height:16px;border-radius:8px;cursor:pointer;touch-action:none;outline:none;
  background:linear-gradient(to right,#f00 0%,#ff0 16.6%,#0f0 33.3%,#0ff 50%,#00f 66.6%,#f0f 83.3%,#f00 100%);
  box-shadow:inset 0 0 0 1px rgba(13,26,17,.15)}
.acp-hue-thumb{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);
  border:3px solid #fff;box-shadow:0 0 0 1px rgba(13,26,17,.55),0 2px 8px rgba(13,26,17,.3);pointer-events:none}
.acp-hue:focus-visible{box-shadow:0 0 0 2px var(--gold)}
.acp-read{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--gold-pale);background:var(--ivory-deep);padding:10px 12px}
.acp-swatch{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(13,26,17,.18),0 0 0 3px var(--ivory)}
.acp-read small{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.acp-name{flex:1;min-width:120px}
.acp-name b{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:.02em}
.acp-hexwrap{display:flex;flex-direction:column}
.acp-hex{width:108px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1rem;letter-spacing:.06em;
  border:1px solid var(--gold-pale);background:var(--ivory);padding:.42rem .55rem;color:var(--ink);text-transform:uppercase}
.acp-hex:focus{outline:none;border-color:var(--gold)}
.acp-hex.bad{border-color:var(--garnet);color:var(--garnet)}
.acp-copy{align-self:flex-end;border:1px solid var(--gold);background:transparent;padding:.45rem .8rem;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;cursor:pointer;color:var(--ink)}
.acp-copy:hover{background:var(--gold);color:var(--ivory)}
.spec dd .hexcode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;color:var(--gold);margin-left:.4rem}
@media(max-width:560px){.acp-sv{height:170px}.acp-hex{width:96px}}

/* ═══════════════════════════════════════════════
   OUTFIT STUDIO — colour every part
   ═══════════════════════════════════════════════ */
.stage__views{justify-content:center;margin-bottom:.4rem}
.stage__views .opt{padding:.38rem .9rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.stage__art{display:flex;justify-content:center}
.stage__art svg{display:block;width:auto;max-width:100%;height:min(calc(100vh - 300px),720px);min-height:420px}
.stage__hint{text-align:center;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:.3rem 0 0}
.spec__save{margin-bottom:.6rem}
.o-part{cursor:pointer}
.o-sheen{opacity:var(--sheen,.45)}
.o-sheer{opacity:var(--sheer,.62)}
.o-hi{fill:#fff;opacity:0;pointer-events:none}
.o-hib{fill:none;stroke:#fff;opacity:0;pointer-events:none}
.o-part.flash .o-hi,.o-part.flash .o-hib{animation:oflash 1s var(--ease)}
@keyframes oflash{0%{opacity:0}30%{opacity:.6}100%{opacity:0}}
@media (hover:hover){.o-part:hover > .o-hi,.o-part:hover > .o-hib{opacity:.14}}
@media (prefers-reduced-motion:reduce){.o-part.flash .o-hi,.o-part.flash .o-hib{animation:none}}

.parts{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .55rem}
.part{border:1px solid var(--gold-pale);background:transparent;padding:.5rem .85rem .5rem .55rem;cursor:pointer;font-size:.83rem;
  display:inline-flex;align-items:center;gap:.55rem;transition:.2s var(--ease)}
.part:hover{border-color:var(--gold)}
.part .sw{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(13,26,17,.22)}
.part[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--ivory-deep)}
.part--off{border-style:dashed;color:#5f6d5f}
.part--off .plus{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;border:1px dashed var(--gold);color:var(--gold);font-size:.9rem;line-height:1}
.parts__note{font-size:.8rem;color:#5f6d5f;margin:0 0 .8rem;min-height:1.3em}
.parts__note b{color:var(--ink);font-weight:600}
.linkish{border:0;background:none;padding:0;margin-left:.3rem;color:var(--garnet);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.presets{margin-top:1rem}
.presets__k{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
.preset .mix{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(13,26,17,.22)}
.spec .cols{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.spec .cols li{font-size:.92rem}
.spec .cols .sw{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:.5rem;box-shadow:inset 0 0 0 1px rgba(13,26,17,.25)}
.spec .cols .none{color:#8a958a}
@media(max-width:900px){
  /* on phones the drawing stays pinned at the top while you choose colours below it */
  .stage{position:sticky;top:var(--stick,58px);z-index:5;padding:.55rem .6rem .4rem;box-shadow:0 10px 18px -14px rgba(13,26,17,.35)}
  .stage__art svg{height:32vh;min-height:210px;width:auto}
  .stage__cap,.stage__hint{display:none}
  .stage__views{margin-bottom:.2rem}
  .stage__views .opt{padding:.28rem .75rem;font-size:.66rem}
}
@media(max-width:560px){.part{font-size:.8rem;padding:.45rem .7rem .45rem .5rem}}

/* ── step 5: the customer's embroidery notes and photos ── */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.embro__intro{font-size:.88rem;color:#3d4a3f;margin:0 0 .9rem;max-width:58ch}
.embro__label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:.4rem}
.embro__text{display:block;width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--ivory-deep);border:1px solid var(--gold-pale);
  padding:.75rem .85rem;border-radius:0;resize:vertical;min-height:6.5rem}
.embro__text:focus{outline:none;border-color:var(--gold)}
.embro__photos{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:.9rem 0 0}
.embro__photos:empty{display:none}
.embro__photos figure{position:relative;margin:0;aspect-ratio:1;border:1px solid var(--gold-pale);background:var(--ivory-deep)}
.embro__photos img{width:100%;height:100%;object-fit:cover}
.embro__photos button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(13,26,17,.75);
  color:var(--ivory);font-size:1.1rem;line-height:1;cursor:pointer}
.embro__add{margin-top:.9rem;cursor:pointer}
.embro__add:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.embro__add::before{content:"+";font-size:1.1rem;line-height:1}
.embro__msg{font-size:.78rem;color:#5f6d5f;margin:.6rem 0 0}
.embro__msg.bad,.spec__status.bad{color:var(--garnet)}
.spec__status{font-size:.82rem;margin:.7rem 0 0;color:var(--forest)}
.spec__status:empty{display:none}
@media(max-width:560px){.embro__text{font-size:16px}}
.embro__add[hidden]{display:none}

/* ── bolder AETHOL wordmark and black section tabs (Women's and Men's houses) ──
   Italiana comes in one weight only, so the wordmark is thickened with a fine
   outline in its own colour rather than a fake bold. */
.brand b{color:var(--ink);-webkit-text-stroke:.55px currentColor;paint-order:stroke fill}
.subnav a{color:var(--ink);font-weight:700}
.subnav a:hover{color:#000}