/* ===================================================================
   Studio9Art — concept 2, "The Gallery Wall".
   A lit gallery rather than a dark one: museum paper ground, Didone
   display type picked to echo the client's own logo wordmark, and the
   artwork supplying every colour on the page.

   Colour discipline (SDT, @_code_and_chill_, 19 Aug): the vermilion is
   a VERDICT colour. It appears on a chosen finish, a selected artwork
   and a submitted form, and nowhere else. Attention elsewhere is done
   with light, weight and rule lines.

   Palette is derived, not guessed: the vermilion is sampled from the
   artist's seal in the client's own hero artwork (g08), and every
   timber swatch is sampled from his own frame product photography.
   =================================================================== */

:root{
  --paper:      #F6F4EF;   /* gallery wall */
  --paper-2:    #EFEBE3;   /* recessed band */
  --card:       #FFFFFF;   /* mat board / cards */
  --ink:        #17161A;   /* primary type */
  --ink-2:      #5A564F;   /* secondary type */
  --ink-3:      #6C685F;   /* tertiary / captions. Was #8C877D, measured at
                              3.25:1 on the paper ground and 3.01:1 on the
                              recessed band, so it failed everywhere it was used. */
  --dark:       #14130F;   /* dark sections */
  --dark-2:     #1D1B16;
  --bone:       #EDE9E0;   /* type on dark */
  --bone-2:     #B4AEA3;   /* secondary type on dark */
  --verm:       #B0281C;   /* VERDICT ONLY */
  --verm-lt:    #E0705F;   /* verdict on dark ground */
  --hair:       rgba(23,22,26,.14);
  --hair-2:     rgba(23,22,26,.07);
  --hair-d:     rgba(237,233,224,.16);
  /* timber, sampled from the client's own product photography */
  --t-black:    #211610;
  --t-oak:      #B8862F;
  --t-walnut:   #65574E;
  --t-mahogany: #967554;
  --t-blackwood:#33241D;
  --t-darkbrown:#26221F;
  --e: cubic-bezier(.22,.61,.36,1);
  --pad: clamp(64px, 9vw, 132px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
:focus-visible{ outline:2px solid var(--verm); outline-offset:3px; }
section[id]{ scroll-margin-top:104px; }
@media (max-width:640px){ section[id]{ scroll-margin-top:84px; } }

.wrapx{ width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
@media (max-width:640px){ .wrapx{ width:calc(100% - 36px); } }

/* -------------------------- reveal -------------------------- */
[data-rv]{ opacity:1; }
.rv-on [data-rv]{ opacity:0; transform:translateY(18px); filter:blur(5px);
  transition:opacity .7s var(--e), transform .7s var(--e), filter .7s var(--e); }
.rv-on [data-rv].in{ opacity:1; transform:none; filter:none; }

/* -------------------------- type -------------------------- */
.kick{
  display:flex; align-items:center; gap:13px;
  font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.kick--lt{ color:var(--bone-2); }
.kick__r{ width:28px; height:1px; background:currentColor; opacity:.55; flex:0 0 28px; }

.sec__head{ max-width:760px; margin-bottom:clamp(40px,5vw,68px); }
.sec__h2{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:400;
  font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.08; letter-spacing:-.015em;
  margin:20px 0 18px;
}
.sec__h2--lt{ color:var(--bone); }
.sec__lead{ color:var(--ink-2); font-size:clamp(1rem,1.5vw,1.13rem); max-width:64ch; }

/* ========================== HEADER ========================== */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:60; height:88px;
  background:rgba(246,244,239,0); border-bottom:1px solid transparent;
  transition:background .28s var(--e), height .28s var(--e), border-color .28s var(--e);
}
.hd.is-stuck{ background:rgba(246,244,239,.93); backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--hair); height:72px; }
.hd__in{
  width:min(1240px, calc(100% - 48px)); margin-inline:auto; height:100%;
  display:flex; align-items:center; gap:28px;
}
.hd__logo{ height:44px; width:auto; transition:height .28s var(--e); }
.hd.is-stuck .hd__logo{ height:36px; }
.hd__nav{ display:flex; gap:30px; margin-left:auto; }
.hd__nav a{
  font-size:14px; font-weight:500; color:var(--ink-2); padding:10px 0;
  border-bottom:1px solid transparent; transition:color .2s var(--e), border-color .2s var(--e);
}
.hd__nav a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.hd__cta{
  font-size:13px; font-weight:600; letter-spacing:.06em;
  padding:14px 24px; background:var(--ink); color:var(--paper);
  transition:background .2s var(--e);
}
.hd__cta:hover{ background:#000; }
.hd__burger{ display:none; width:48px; height:48px; margin-left:auto;
  flex-direction:column; justify-content:center; gap:6px; align-items:flex-end; }
.hd__burger span{ display:block; height:1.5px; background:var(--ink); width:26px; }
.hd__burger span:nth-child(2){ width:18px; }

/* drawer */
.drw{
  position:fixed; inset:0; z-index:70; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transform:translateY(-100%); transition:transform .42s var(--e); visibility:hidden;
}
.drw.is-open{ transform:none; visibility:visible; }
.drw__x{ position:absolute; top:18px; right:20px; width:52px; height:52px; font-size:34px; line-height:1; color:var(--ink-2); }
.drw__logo{ height:66px; width:auto; margin-bottom:22px; }
.drw__nav{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.drw__nav a{ font-family:"Bodoni Moda",serif; font-size:30px; padding:12px 20px; }
.drw__cta{ margin-top:20px; padding:16px 34px; background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; }
.drw__nap{ margin-top:26px; text-align:center; font-size:14px; color:var(--ink-3); line-height:1.7; }

/* ============================ HERO ============================ */
.hero{ position:relative; padding:calc(88px + var(--pad)) 0 var(--pad); }
.hero__wrap{
  width:min(1240px, calc(100% - 48px)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(36px,5vw,80px); align-items:center;
}
.hero__h1{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:400;
  font-size:clamp(2.6rem,6.4vw,5.1rem); line-height:1.02; letter-spacing:-.022em;
  margin:24px 0 26px;
}
.hero__h1 .ln{ display:block; }
.hero__h1 em{ font-style:italic; }
.hero__sub{ color:var(--ink-2); font-size:clamp(1.02rem,1.6vw,1.18rem); max-width:52ch; }
.hero__meta{ display:flex; gap:38px; margin-top:36px; flex-wrap:wrap; }
.hero__m{ display:flex; flex-direction:column; gap:2px; }
.hero__m b{ font-family:"Bodoni Moda",serif; font-weight:400; font-size:2rem; line-height:1; }
.hero__m span{ font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

/* hero visual: two pieces on a rail. Explicitly z-indexed under the copy. */
.hero__vis{ position:relative; z-index:0; min-height:520px; }
.hero__wrap > .hero__copy{ position:relative; z-index:1; }
.hero__rail{ position:absolute; left:4%; right:0; top:14px; height:5px;
  background:linear-gradient(180deg,#D8D3C9,#B4AFA4); border-radius:2px; }
.hero__drop{ position:absolute; top:19px; width:1px; background:#B4AFA4; }
.hero__drop--a{ left:24%; height:58px; }
.hero__drop--b{ left:70%; height:132px; }
.hang{ position:absolute; }
.hang--a{ left:8%; top:74px; width:48%; }
.hang--b{ left:52%; top:148px; width:44%; }

/* the frame component: moulding via layered shadows, real mat, no cropping */
.fr{
  position:relative; background:var(--t-black); padding:11px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 18px 34px -14px rgba(20,19,15,.44),
    0 3px 8px -3px rgba(20,19,15,.30);
  transition:background .45s var(--e), box-shadow .45s var(--e);
}
.fr--black{     background:var(--t-black); }
.fr--oak{       background:var(--t-oak); }
.fr--walnut{    background:var(--t-walnut); }
.fr--mahogany{  background:var(--t-mahogany); }
.fr--blackwood{ background:var(--t-blackwood); }
.fr--darkbrown{ background:var(--t-darkbrown); }
.fr__mat{
  background:#FCFBF7; padding:min(6.5%,26px);
  box-shadow:inset 0 0 0 1px rgba(23,22,26,.08), inset 0 2px 5px -2px rgba(23,22,26,.16);
}
.fr__mat img{ width:100%; height:auto; }

.hero__down{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:44px; height:44px; display:grid; place-items:center;
}
.hero__down span{ display:block; width:1px; height:26px; background:var(--ink-3);
  animation:dr 2.1s var(--e) infinite; transform-origin:top; }
@keyframes dr{ 0%,100%{ transform:scaleY(.4); opacity:.35 } 50%{ transform:scaleY(1); opacity:1 } }

/* ======================== INSTITUTIONS ======================== */
.inst{
  background:var(--paper-2); border-block:1px solid var(--hair);
  padding:clamp(48px,6vw,80px) 24px; text-align:center;
}
.inst__lead{ font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.inst__list{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px clamp(24px,4vw,56px); margin:22px auto 20px; max-width:1000px;
}
.inst__list li{
  font-family:"Bodoni Moda",serif; font-size:clamp(1.05rem,2vw,1.55rem);
  line-height:1.25;
}
.inst__note{ color:var(--ink-3); font-size:14.5px; max-width:62ch; margin-inline:auto; }

/* =========================== THE WALL =========================== */
.wall{ padding:var(--pad) 0; width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
.salon{ position:relative; padding-top:44px; }
.salon__rail{
  position:absolute; inset:0 0 auto 0; height:6px; border-radius:3px;
  background:linear-gradient(180deg,#DAD5CB,#B0AB9F);
  box-shadow:0 2px 5px -1px rgba(23,22,26,.20);
}
.salon{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3.4vw,56px); align-items:start; }
.salon__rail{ grid-column:1 / -1; }
.pc{ position:relative; }
.pc__wire{ position:absolute; left:50%; top:-44px; width:1px; height:44px; background:#B0AB9F; }
.pc figcaption{ margin-top:12px; font-size:12.5px; letter-spacing:.05em; color:var(--ink-3); }
/* staggered salon hang: each column drops a different amount */
.pc--t1{ margin-top:6px }   .pc--t2{ margin-top:52px }  .pc--t3{ margin-top:22px }
.pc--t4{ margin-top:34px }  .pc--t5{ margin-top:0 }     .pc--t6{ margin-top:46px }
.pc--t7{ margin-top:18px }  .pc--t8{ margin-top:40px }  .pc--t9{ margin-top:10px }
.pc--t1 .pc__wire{ top:-50px; height:50px } .pc--t2 .pc__wire{ top:-96px; height:96px }
.pc--t3 .pc__wire{ top:-66px; height:66px } .pc--t4 .pc__wire{ top:-78px; height:78px }
.pc--t5 .pc__wire{ top:-44px; height:44px } .pc--t6 .pc__wire{ top:-90px; height:90px }
.pc--t7 .pc__wire{ top:-62px; height:62px } .pc--t8 .pc__wire{ top:-84px; height:84px }
.pc--t9 .pc__wire{ top:-54px; height:54px }
body.fine .pc .fr{ transition:transform .45s var(--e), box-shadow .45s var(--e), background .45s var(--e); }
body.fine .pc:hover .fr{ transform:translateY(-5px) rotate(-.35deg); }

/* ========================== FINISH PICKER ========================== */
.fin{ background:var(--paper-2); border-block:1px solid var(--hair); padding:var(--pad) 0; }
.fin .sec__head, .fin__stage{ width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
.fin__stage{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(34px,5vw,72px); align-items:center; }
.fin__preview{ display:flex; flex-direction:column; align-items:center; }
.fin__preview .fr{ width:min(100%,420px); }
.fin__plate{
  margin-top:18px; font-family:"Bodoni Moda",serif; font-size:1.15rem;
  letter-spacing:.05em;
}
.fin__chips{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.chip{
  display:flex; align-items:center; gap:12px; width:100%; min-height:60px;
  padding:0 18px; background:var(--card); border:1px solid var(--hair);
  font-size:15px; font-weight:500; text-align:left;
  transition:border-color .2s var(--e), background .2s var(--e), color .2s var(--e);
}
.chip i{ width:22px; height:22px; flex:0 0 22px; background:var(--sw);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.30); }
.chip:hover{ border-color:var(--ink-3); }
/* the ONLY vermilion on this page besides a submitted form: a chosen finish */
.chip.is-on{ border-color:var(--verm); background:#fff; color:var(--verm); box-shadow:inset 0 0 0 1px var(--verm); }
.fin__note{ margin-top:20px; color:var(--ink-2); font-size:15.5px; min-height:3.4em; }
.fin__art{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:22px;
  padding-top:22px; border-top:1px solid var(--hair); }
.fin__art > span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-right:4px; }
.tgl{
  min-height:44px; padding:0 16px; border:1px solid var(--hair); background:transparent;
  font-size:14px; transition:border-color .2s var(--e), color .2s var(--e);
}
.tgl:hover{ border-color:var(--ink-3); }
.tgl.is-on{ border-color:var(--verm); color:var(--verm); }

/* ========================== WHAT WE FRAME ========================== */
.two{ padding:var(--pad) 0; width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
.two__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,4vw,64px); }
.two__col{ border-top:2px solid var(--ink); padding-top:26px; }
.two__tag{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.two__h3{ font-family:"Bodoni Moda",serif; font-weight:400; font-size:clamp(1.4rem,2.4vw,1.95rem);
  line-height:1.18; margin:12px 0 16px; }
.two__body{ color:var(--ink-2); }
.two__list{ list-style:none; margin-top:22px; }
.two__list li{ padding:13px 0; border-top:1px solid var(--hair-2); font-size:15.5px; }

/* ============================= RAIL ============================= */
.rail{
  background:var(--dark); color:var(--bone); padding:var(--pad) 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(36px,5vw,78px); align-items:center;
}
.rail > *{ width:100%; }
.rail__copy{ padding-left:max(24px, calc((100vw - 1240px)/2)); padding-right:24px; }
.rail__body{ color:var(--bone-2); max-width:56ch; }
.rail__price{ display:flex; flex-wrap:wrap; gap:34px; margin-top:34px; }
.rail__p{ display:flex; flex-direction:column; }
.rail__p b{ font-family:"Bodoni Moda",serif; font-weight:400; font-size:2.1rem; line-height:1.1; }
.rail__p span{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-2); }
.rail__fine{ margin-top:20px; font-size:13px; color:#7E786E; }
.rail__vis{ position:relative; height:340px; padding-right:max(24px, calc((100vw - 1240px)/2)); }
.rail__bar{ position:absolute; left:0; right:24px; top:40px; height:5px; border-radius:3px;
  background:linear-gradient(180deg,#4A463E,#2A2721); }
.rail__w{ position:absolute; top:45px; width:1px; background:#4A463E; }
.rail__w--1{ left:16%; height:70px }  .rail__w--2{ left:46%; height:120px } .rail__w--3{ left:76%; height:52px }
.rail__box{ position:absolute; background:#221F1A; box-shadow:inset 0 0 0 1px rgba(237,233,224,.13); }
.rail__box--1{ left:6%;  top:115px; width:20%; height:132px }
.rail__box--2{ left:36%; top:165px; width:20%; height:98px }
.rail__box--3{ left:66%; top:97px;  width:20%; height:154px }

/* ============================ ARTISTS ============================ */
.art{ padding:var(--pad) 0; width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
.art__names{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.art__names li{
  font-family:"Bodoni Moda",serif; font-size:clamp(1.25rem,2.6vw,1.9rem);
  padding:20px 0; border-top:1px solid var(--hair);
}

/* ============================= VISIT ============================= */
.visit{
  background:var(--dark-2); color:var(--bone); padding:var(--pad) 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(34px,5vw,72px); align-items:start;
}
.visit__l{ padding-left:max(24px, calc((100vw - 1240px)/2)); padding-right:24px; }
.visit__r{ padding-right:max(24px, calc((100vw - 1240px)/2)); padding-left:24px; }
.visit__body{ color:var(--bone-2); max-width:52ch; margin-bottom:34px; }
.nap{ display:grid; gap:0; }
.nap > div{ display:grid; grid-template-columns:120px 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--hair-d); align-items:baseline; }
.nap dt{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7E786E; }
.nap dd{ font-size:15.5px; }
.nap a{ border-bottom:1px solid rgba(237,233,224,.3); }

/* the glass enquiry panel */
.gf{
  position:relative; overflow:hidden; padding:0 26px 26px;
  background:linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.05) 46%, rgba(255,255,255,.02));
  backdrop-filter:blur(30px) saturate(165%);
  -webkit-backdrop-filter:blur(30px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 24px 60px -24px rgba(0,0,0,.7);
}
.gf::before{
  content:""; position:absolute; left:-30%; top:-60%; width:120%; height:130%;
  background:radial-gradient(closest-side, rgba(255,255,255,.20), transparent 72%);
  pointer-events:none;
}
.gf::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(180deg, transparent 62%, rgba(224,112,95,.55)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .3s var(--e);
}
.gf.flash::after{ animation:rim 1.1s var(--e) 2; }
@keyframes rim{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .gf{ background:#26231D; }
}
.gf__logo{
  margin:0 -26px 22px; padding:22px 26px 18px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(176,40,28,.16), transparent);
}
.gf__logo img{ height:82px; width:auto; }
.gf__h{ font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.5rem; color:var(--bone); margin-bottom:20px; }
.gf__f{ position:relative; margin-bottom:14px; }
.gf__f input, .gf__f select{
  width:100%; height:56px; padding:20px 16px 6px; font:inherit; font-size:16px;
  background:rgba(0,0,0,.24); border:1px solid rgba(237,233,224,.20); color:var(--bone);
  border-radius:0; transition:border-color .2s var(--e), background .2s var(--e);
  -webkit-appearance:none; appearance:none;
}
.gf__f select{ padding-top:14px; padding-bottom:14px;
  background-image:linear-gradient(45deg,transparent 50%,var(--bone-2) 50%),linear-gradient(135deg,var(--bone-2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 25px, calc(100% - 15px) 25px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.gf__f input:focus, .gf__f select:focus{ border-color:var(--verm-lt); background:rgba(0,0,0,.34); outline:none; }
.gf__f label{
  position:absolute; left:17px; top:18px; font-size:16px; color:var(--bone-2);
  pointer-events:none; transition:transform .18s var(--e), font-size .18s var(--e), color .18s var(--e);
  transform-origin:left top;
}
.gf__f input:focus + label,
.gf__f input:not(:placeholder-shown) + label{ transform:translateY(-11px) scale(.72); color:#8C8579; }
.gf__btn{
  width:100%; min-height:56px; margin-top:6px; background:var(--bone); color:var(--dark);
  font-weight:600; font-size:15px; letter-spacing:.03em;
  transition:background .2s var(--e), color .2s var(--e);
}
.gf__btn:hover{ background:#fff; }
.gf__btn:disabled{ background:#5A564F; color:#D6D1C7; cursor:default; }
/* submitted state: the verdict */
.gf__ok{ margin-top:14px; padding:14px 16px; font-size:14.5px; line-height:1.6;
  color:#FFD9D2; background:rgba(176,40,28,.24); box-shadow:inset 0 0 0 1px rgba(224,112,95,.55); }
.gf__ok[hidden]{ display:none; }
.gf__fine{ margin-top:14px; font-size:12.5px; color:#7E786E; line-height:1.6; }

/* ============================= FOOTER ============================= */
.ft{ background:#0F0E0B; color:var(--bone); padding:clamp(56px,7vw,92px) 0 26px; }
.ft__top, .ft__ack, .ft__bot{ width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
.ft__top{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,2fr); gap:clamp(30px,4vw,64px); }
.ft__logo{ height:92px; width:auto; }
.ft__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.ft__cols h4{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#7E786E; margin-bottom:16px; }
.ft__cols p{ font-size:14.5px; color:var(--bone-2); margin-bottom:12px; line-height:1.75; }
.ft__cols nav{ display:flex; flex-direction:column; }
.ft__cols nav a, .ft__cols p a{ display:inline-block; padding:7px 0; font-size:14.5px; color:var(--bone-2); }
.ft__cols nav a:hover, .ft__cols p a:hover{ color:var(--bone); }
.ft__ack{ margin-top:clamp(40px,5vw,66px); padding-top:26px; border-top:1px solid var(--hair-d);
  font-size:12.5px; line-height:1.85; color:#6F6A61; max-width:100ch; }
.ft__bot{ margin-top:26px; padding-top:22px; border-top:1px solid var(--hair-d);
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center;
  font-size:12.5px; color:#6F6A61; }
.ft__sc{ display:inline-block; padding:8px 0; color:#6F6A61; }
.ft__sc b{ color:var(--verm-lt); font-weight:700; }
.ft__sc:hover{ color:var(--bone-2); }

/* ====================== PINNED MOBILE BAR ====================== */
.pin{
  position:fixed; left:0; right:0; bottom:0; z-index:65; display:none;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(20,19,15,.72); backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 -1px 0 rgba(237,233,224,.16);
  transform:translateY(110%); transition:transform .32s var(--e);
}
.pin.is-up{ transform:none; }
.pin a{ flex:1 1 0; min-height:52px; display:grid; place-items:center; font-size:15px; font-weight:600; }
.pin__a{ background:var(--bone); color:var(--dark); }
.pin__b{ flex:0 0 96px; color:var(--bone); box-shadow:inset 0 0 0 1px rgba(237,233,224,.34); }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .pin{ background:#14130F; }
}

/* ============================================================
   RESPONSIVE — mobile is the priority surface (RULE ZERO)
   ============================================================ */
@media (max-width:1080px){
  .hd__nav{ display:none; }
  .hd__cta{ display:none; }
  .hd__burger{ display:flex; }
  .hero__wrap{ grid-template-columns:1fr; }
  .hero__vis{ display:none; }        /* the quiz takes this slot on stacked layouts */
  .rail, .visit{ grid-template-columns:1fr; }
  .rail__copy, .visit__l, .visit__r{
    padding-left:max(24px, calc((100vw - 1240px)/2));
    padding-right:max(24px, calc((100vw - 1240px)/2));
  }
  .rail__vis{ display:none; }
  .fin__stage{ grid-template-columns:1fr; }
  .salon{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ft__top{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .two__grid{ grid-template-columns:1fr; }
  .art__names{ grid-template-columns:1fr; }
  .ft__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .hd{ height:72px; } .hd.is-stuck{ height:64px; }
  .hd__in{ width:calc(100% - 36px); }
  .hd__logo{ height:36px; } .hd.is-stuck .hd__logo{ height:32px; }
  .hero{ padding:calc(72px + 44px) 0 56px; }
  .hero__wrap{ width:calc(100% - 36px); }
  .hero__meta{ gap:0; flex-direction:column; }
  .hero__m{ flex-direction:row; align-items:baseline; gap:12px;
    padding:12px 0; border-top:1px solid var(--hair-2); width:100%; }
  .hero__m b{ font-size:1.6rem; flex:0 0 auto; }
  .hero__down{ display:none; }
  .wall, .two, .art, .fin .sec__head, .fin__stage,
  .ft__top, .ft__ack, .ft__bot{ width:calc(100% - 36px); }
  .rail__copy, .visit__l, .visit__r{ padding-inline:18px; }
  .salon{ grid-template-columns:1fr; gap:34px; padding-top:36px; }
  .salon__rail{ display:none; }
  .pc{ margin-top:0 !important; }
  .pc__wire{ display:none !important; }
  .fin__chips{ grid-template-columns:1fr; }
  .fin__note{ min-height:0; }
  .nap > div{ grid-template-columns:1fr; gap:4px; }
  .ft__cols{ grid-template-columns:1fr; }
  .ft__logo{ height:74px; }
  .pin{ display:flex; }
  body{ padding-bottom:0; }
  .visit{ padding-bottom:calc(var(--pad) + 74px); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rv-on [data-rv]{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* -------------------------------------------------------------------
   QA corrections, 21 Aug 2026. Measured against the real grounds, not
   estimated, and every pseudo-class state of an interactive element is
   enumerated rather than relying on the base rule.
   ------------------------------------------------------------------- */
/* tap targets: nothing a thumb has to reach is under 44px */
.hd__brand{ display:inline-flex; align-items:center; min-height:48px; padding:6px 4px; }
.hd__nav a{ padding:12px 10px; }
.ft__cols nav a{ padding:12px 0; }
.ft__cols p a{ display:inline-block; padding:11px 0; }
.ft__sc{ padding:13px 0; }
.pc figcaption{ padding:4px 0; }

/* The shared hero quiz bundle sets its quiet text to 44% white, which
   composites to 2.83:1 on this panel. Scoped here rather than raised in
   the bundle, so no other client's palette is touched, and emitted after
   the bundle's own stylesheet so source order wins. Disabled states are
   listed explicitly because .hq-next:disabled is more specific than
   .hq-next and would otherwise keep the bundle default. */
.hq-step, .hq-priv, .hq-hint, .hq-disc{ color:#4A463F !important; }
.hq-next, .hq-next:disabled{ color:#F6F4EF !important; }
.hq-next:disabled{ background:#6C685F !important; }

.rail__fine{ color:#98928A; }        /* was #7E786E, 4.25:1 on the dark ground */
.nap dt{ color:#98928A; }            /* was 3.93:1 */
.ft__cols h4{ color:#98928A; }       /* was 4.41:1 on the near black footer */
.ft__bot, .ft__bot span, .ft__sc{ color:#948E85; }
.ft__ack{ color:#8B857C; }
.drw__nap a{ display:inline-block; padding:10px 0; }
/* the contact list links, which are .nap not .np (that is concept 3's class) */
.nap dd a{ display:inline-block; padding:11px 0; }

/* 21 Aug 2026 — Tim: bigger logo on every form, and a heavier display weight.
   Bodoni Moda at 400 sets very light at display sizes, which read as thin
   rather than as refined once it was on screen at full width. */
.hero__h1{ font-weight:700; }
.sec__h2, .cd__h{ font-weight:500; }
.hero__m b, .rail__p b, .inst__list li{ font-weight:500; }

/* form logos. The shared quiz bundle caps its brand mark at 44px, and that
   block is emitted after this stylesheet, so it needs !important to lose. */
.hq-brand img{ max-height:104px !important; }
.hq-brand{ padding-block:18px !important; }
.gf__logo img{ height:112px; }
@media (max-width:640px){
  .hq-brand img{ max-height:84px !important; }
  .gf__logo img{ height:88px; }
}
/* Bodoni Moda at 700 sets considerably wider than at 400, so the hero's three
   hard line breaks no longer fit and "last thing anyone" wrapped to a fourth
   line. Easing the display size back holds the intended three line shape. */
.hero__h1{ font-size:clamp(2.3rem,5.1vw,4.35rem); }
@media (max-width:640px){ .hero__h1{ font-size:clamp(2rem,8.4vw,2.5rem); } }