/* ===================================================================
   Studio9Art — concept 3, "The Long Keep".
   The other half of the business: jerseys, medals, heirlooms. The people
   who bring those in are not buying fine art framing, they are trying to
   stop something disappearing, so the page is built around that and not
   around the gallery.

   Deliberately a different TEMPERATURE to concepts 1 and 2. Concept 1 is a
   cold ink monochrome, concept 2 is a lit gallery white. This one is warm
   espresso and parchment with gold leaf, which is one of the finishes he
   actually offers, so the direction is drawn from his own product list.

   Layout language is also deliberately different: hairline rules, numbered
   spec rows, square corners, no card lifts on hover. Nothing in here should
   be interchangeable with the other two.
   =================================================================== */

:root{
  --gr:      #17120D;   /* espresso ground */
  --gr-2:    #1E1811;   /* raised band */
  --gr-3:    #241C14;   /* panels */
  --parch:   #EDE3D2;   /* parchment, primary type on dark */
  --parch-2: #B9AC94;   /* secondary type on dark */
  --parch-3: #968A76;   /* tertiary. Was #7E7361, which measured 3.78:1
                           on the raised band and 4.00:1 on the ground. */
  --light:   #F1EADC;   /* light section ground */
  --light-2: #E5DAC5;
  --ink:     #221A11;   /* type on light */
  --ink-2:   #5E5240;   /* secondary type on light */
  --gold:    #C9A44E;   /* his gold leaf finish */
  --gold-dk: #6A5117;   /* the same hue, darkened until it clears 4.5:1
                           on BOTH light grounds, not just the lighter one */
  --hair:    rgba(237,227,210,.16);
  --hair-2:  rgba(237,227,210,.08);
  --hair-l:  rgba(34,26,17,.16);
  --e: cubic-bezier(.22,.61,.36,1);
  --pad: clamp(62px, 8.5vw, 126px);
  --gut: clamp(18px, 3vw, 24px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--gr); color:var(--parch);
  font-family:"Erode",Georgia,serif;
  font-size:17px; line-height:1.68; 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; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
section[id]{ scroll-margin-top:104px; }
@media (max-width:640px){ section[id]{ scroll-margin-top:82px; } }

.w{ width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto; }

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

/* -------------------------- type -------------------------- */
.kk{ display:flex; align-items:center; gap:12px; font-family:"Erode",serif;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); }
.kk i{ width:26px; height:1px; background:currentColor; opacity:.6; flex:0 0 26px; }
.kk--c{ justify-content:center; }

.sh{ max-width:780px; margin-bottom:clamp(36px,4.6vw,62px); }
.sh--c{ margin-inline:auto; text-align:center; }
.sh__h2{ font-family:"Boska",Georgia,serif; font-weight:400;
  font-size:clamp(1.95rem,4.2vw,3.3rem); line-height:1.1; letter-spacing:-.012em;
  margin:18px 0 16px; }
.sh__l{ color:var(--parch-2); font-size:clamp(1rem,1.5vw,1.12rem); max-width:62ch; }
.sh--c .sh__l{ margin-inline:auto; }

/* ============================= NAV ============================= */
.nv{ position:fixed; inset:0 0 auto 0; z-index:60; height:86px;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .28s var(--e), height .28s var(--e), border-color .28s var(--e); }
.nv.is-stuck{ background:rgba(23,18,13,.93); backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--hair); height:70px; }
.nv__in{ width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto; height:100%;
  display:flex; align-items:center; gap:26px; }
.nv__logo{ height:42px; width:auto; transition:height .28s var(--e); }
.nv.is-stuck .nv__logo{ height:34px; }
.nv__links{ display:flex; gap:26px; margin-left:auto; }
.nv__links a{ font-size:14.5px; color:var(--parch-2); padding:10px 0;
  border-bottom:1px solid transparent; transition:color .2s var(--e), border-color .2s var(--e); }
.nv__links a:hover{ color:var(--parch); border-bottom-color:var(--gold); }
.nv__cta{ font-size:14px; font-weight:600; padding:13px 22px; color:var(--gr);
  background:var(--gold); transition:background .2s var(--e); }
.nv__cta:hover{ background:#DBB65F; }
.nv__burger{ display:none; width:48px; height:48px; margin-left:auto;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px; }
.nv__burger span{ display:block; height:1.5px; width:26px; background:var(--parch); }
.nv__burger span:nth-child(2){ width:17px; }

.mnav{ position:fixed; inset:0; z-index:70; background:var(--gr);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:translateY(-100%); transition:transform .42s var(--e); visibility:hidden; }
.mnav.is-open{ transform:none; visibility:visible; }
.mnav__x{ position:absolute; top:16px; right:18px; width:52px; height:52px; font-size:34px; line-height:1; color:var(--parch-2); }
.mnav__logo{ height:62px; width:auto; margin-bottom:24px; }
.mnav__links{ display:flex; flex-direction:column; align-items:center; }
.mnav__links a{ font-family:"Boska",serif; font-size:27px; padding:12px 20px; }
.mnav__cta{ margin-top:20px; padding:16px 32px; background:var(--gold); color:var(--gr); font-weight:600; font-size:15px; }
.mnav__nap{ margin-top:24px; text-align:center; font-size:13.5px; color:var(--parch-3); line-height:1.75; }

/* ============================= HERO ============================= */
.hr{ position:relative; padding:calc(86px + var(--pad)) 0 var(--pad); overflow:hidden; }
/* named "tex" on purpose: the shared quiz bundle skips a decorative layer
   whose class matches tex, so this can never be chosen as the hero visual */
.hr__tex{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(201,164,78,.10), transparent 62%),
    repeating-linear-gradient(94deg, rgba(237,227,210,.022) 0 2px, transparent 2px 7px); }
.hr__in{ position:relative; z-index:1;
  width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(34px,5vw,74px); align-items:center; }
.hr__copy{ position:relative; z-index:2; }
.hr__h1{ font-family:"Boska",Georgia,serif; font-weight:400;
  font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.06; letter-spacing:-.02em;
  margin:22px 0 24px; max-width:16ch; }
.hr__sub{ color:var(--parch-2); font-size:clamp(1.02rem,1.5vw,1.16rem); max-width:54ch; }
.hr__pf{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.hr__pf span{ font-size:13px; letter-spacing:.03em; padding:10px 16px;
  color:var(--parch); box-shadow:inset 0 0 0 1px var(--hair); }

.hr__vis{ position:relative; z-index:1; }
.shadowbox{ position:relative; background:var(--gold);
  padding:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,0,0,.34),
    0 30px 60px -22px rgba(0,0,0,.72); }
.shadowbox__glass{ position:absolute; inset:14px; z-index:2; pointer-events:none;
  background:linear-gradient(128deg, rgba(255,255,255,.16) 0 22%, transparent 46%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.shadowbox__mat{ background:#F3EDE0; padding:min(8%,34px); }
.shadowbox__mat img{ width:100%; }
.shadowbox__plate{ margin-top:14px; text-align:center; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--parch-3); }

/* ============================ RIBBON ============================ */
.rb{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--gr-2); border-block:1px solid var(--hair); }
.rb__i{ padding:clamp(26px,3.4vw,40px) clamp(18px,2.4vw,30px);
  border-left:1px solid var(--hair-2); display:flex; flex-direction:column; gap:6px; }
.rb__i:first-child{ border-left:0; }
.rb__i b{ font-family:"Boska",serif; font-weight:400; font-size:clamp(1.25rem,2.1vw,1.7rem); line-height:1.15; }
.rb__i span{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--parch-3); }

/* ====================== INSIDE A BOX FRAME ====================== */
.ins{ padding:var(--pad) 0; }
.ins .sh, .ins__stage{ width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto; }
.ins__stage{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(34px,5vw,72px); align-items:start; }

/* the cross section: six stacked layers in perspective */
.ins__vis{ position:sticky; top:112px; }
.xs{ position:relative; height:420px; perspective:900px; }
.xs__l{ position:absolute; left:12%; right:12%; height:150px;
  transform-style:preserve-3d; opacity:.28;
  transition:opacity .35s var(--e), transform .45s var(--e), box-shadow .35s var(--e);
  transform:rotateX(58deg) rotateZ(-42deg) translateZ(0);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7); }
.xs__l--1{ top:26px;  background:linear-gradient(140deg, rgba(226,239,247,.42), rgba(180,205,220,.20)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.30), 0 12px 26px -12px rgba(0,0,0,.7); }
.xs__l--2{ top:66px;  background:#EFE7D7; }
.xs__l--3{ top:106px; background:#9E8A6A; }
.xs__l--4{ top:146px; background:linear-gradient(140deg,#7E1F24,#4A1216); box-shadow:inset 0 0 0 1px rgba(201,164,78,.4), 0 12px 26px -12px rgba(0,0,0,.7); }
.xs__l--5{ top:186px; background:#D9CDB5; }
.xs__l--6{ top:226px; background:linear-gradient(140deg,#C9A44E,#8A6C27); }
.xs__l.is-live{ opacity:1; transform:rotateX(58deg) rotateZ(-42deg) translate3d(-18px,-14px,0); }

.ins__list{ list-style:none; counter-reset:none; }
.lyr{ display:grid; grid-template-columns:56px 1fr; row-gap:6px; column-gap:14px;
  width:100%; text-align:left; padding:22px 0; border-top:1px solid var(--hair);
  transition:border-color .25s var(--e); }
.ins__list li:last-child .lyr{ border-bottom:1px solid var(--hair); }
.lyr__n{ font-family:"Boska",serif; font-size:1.1rem; color:var(--parch-3); grid-row:1 / span 2;
  transition:color .25s var(--e); }
.lyr__t{ font-family:"Boska",serif; font-size:clamp(1.1rem,1.9vw,1.4rem); line-height:1.25;
  transition:color .25s var(--e); }
.lyr__d{ color:var(--parch-2); font-size:15.5px; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--e), opacity .3s var(--e); }
.lyr.is-on{ border-top-color:var(--gold); }
.lyr.is-on .lyr__n, .lyr.is-on .lyr__t{ color:var(--gold); }
.lyr.is-on .lyr__d{ max-height:14em; opacity:1; }

/* ============================ WHAT WE KEEP ============================ */
.kp{ background:var(--light); color:var(--ink); padding:var(--pad) 0; }
.kp .sh, .kp__rows{ width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto; }
.kp .kk{ color:var(--gold-dk); }
.kp .sh__l{ color:var(--ink-2); }
.kp__rows{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(30px,4vw,64px); }
.kp__r{ display:grid; grid-template-columns:52px 1fr; gap:16px;
  padding:26px 0; border-top:1px solid var(--hair-l); align-items:start; }
.kp__n{ font-family:"Boska",serif; font-size:1.15rem; color:var(--gold-dk); line-height:1.5; }
.kp__r h3{ font-family:"Boska",serif; font-weight:400; font-size:clamp(1.15rem,2vw,1.45rem);
  line-height:1.25; margin-bottom:8px; }
.kp__r p{ color:var(--ink-2); font-size:15.5px; }

/* ============================ REFERENCE ============================ */
.rf{ background:var(--light-2); color:var(--ink); padding:var(--pad) 0; }
.rf .sh, .rf__grid, .rf__note{ width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto; }
.rf .kk{ color:var(--gold-dk); }
.rf__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,34px); }
.rf__grid figure{ background:#fff; padding:12px 12px 0;
  box-shadow:0 16px 34px -18px rgba(34,26,17,.4); }
.rf__grid img{ width:100%; }
.rf__grid figcaption{ padding:14px 4px 16px; font-size:13px; color:var(--ink-2); }
.rf__note{ margin-top:26px; padding-top:20px; border-top:1px solid var(--hair-l);
  font-size:13px; color:#6F6250; max-width:80ch; }

/* ============================== HOW ============================== */
.hw{ padding:var(--pad) 0; }
.hw .sh, .hw__steps{ width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto; }
.hw__steps{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(30px,4vw,70px); }
.hw__steps li{ padding:30px 0; border-top:1px solid var(--hair); }
.hw__steps span{ display:block; font-family:"Boska",serif; font-size:1.2rem; color:var(--gold); margin-bottom:12px; }
.hw__steps h3{ font-family:"Boska",serif; font-weight:400; font-size:clamp(1.2rem,2.1vw,1.55rem);
  line-height:1.24; margin-bottom:10px; }
.hw__steps p{ color:var(--parch-2); font-size:15.5px; }

/* ============================== GIFT ============================== */
.gift{ background:var(--gr-2); border-block:1px solid var(--hair); padding:var(--pad) 0; }
.gift__copy{ width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto; max-width:900px; }
.gift__b{ color:var(--parch-2); max-width:58ch; }
.gift__cards{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.gc{ min-width:118px; min-height:88px; display:grid; place-items:center;
  background:var(--gr-3); box-shadow:inset 0 0 0 1px var(--hair);
  position:relative; overflow:hidden; }
.gc::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--gold); }
.gc b{ font-family:"Boska",serif; font-weight:400; font-size:1.8rem; }
.gift__f{ margin-top:18px; font-size:13px; color:var(--parch-3); }

/* ============================== TALK ============================== */
.tk{ padding:var(--pad) 0; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(34px,5vw,72px); align-items:start; }
.tk__l{ padding-left:max(var(--gut), calc((100vw - 1200px)/2)); padding-right:var(--gut); }
.tk__r{ padding-right:max(var(--gut), calc((100vw - 1200px)/2)); padding-left:var(--gut); }
.tk__b{ color:var(--parch-2); max-width:52ch; margin-bottom:32px; }
.np > div{ display:grid; grid-template-columns:120px 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--hair); align-items:baseline; }
.np dt{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--parch-3); }
.np dd{ font-size:15.5px; }
.np a{ border-bottom:1px solid rgba(237,227,210,.28); }

/* glass enquiry panel */
.lf{ position:relative; overflow:hidden; padding:0 26px 26px;
  background:linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.045) 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,.28), 0 26px 60px -26px rgba(0,0,0,.78); }
.lf::before{ content:""; position:absolute; left:-30%; top:-60%; width:120%; height:130%;
  pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.19), transparent 72%); }
.lf::after{ content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(180deg, transparent 62%, rgba(201,164,78,.6)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.lf.flash::after{ animation:rim 1.1s var(--e) 2; }
@keyframes rim{ 0%,100%{ opacity:1 } 50%{ opacity:.22 } }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .lf{ background:#241C14; }
}
.lf__logo{ margin:0 -26px 22px; padding:22px 26px 18px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(201,164,78,.18), transparent); }
.lf__logo img{ height:82px; width:auto; }
.lf__h{ font-family:"Boska",serif; font-weight:400; font-size:1.5rem; margin-bottom:20px; }
.lf__f{ position:relative; margin-bottom:14px; }
.lf__f input, .lf__f select{
  width:100%; height:56px; padding:20px 16px 6px; font:inherit; font-size:16px;
  background:rgba(0,0,0,.26); border:1px solid rgba(237,227,210,.20); color:var(--parch);
  border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .2s var(--e), background .2s var(--e); }
.lf__f select{ padding-top:14px; padding-bottom:14px;
  background-image:linear-gradient(45deg,transparent 50%,var(--parch-2) 50%),linear-gradient(135deg,var(--parch-2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 25px, calc(100% - 15px) 25px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.lf__f input:focus, .lf__f select:focus{ border-color:var(--gold); background:rgba(0,0,0,.36); outline:none; }
.lf__f label{ position:absolute; left:17px; top:18px; font-size:16px; color:var(--parch-2);
  pointer-events:none; transform-origin:left top;
  transition:transform .18s var(--e), font-size .18s var(--e), color .18s var(--e); }
.lf__f input:focus + label, .lf__f input:not(:placeholder-shown) + label{
  transform:translateY(-11px) scale(.72); color:var(--parch-3); }
.lf__btn{ width:100%; min-height:56px; margin-top:6px; background:var(--gold); color:#17120D;
  font-weight:700; font-size:15px; transition:background .2s var(--e); }
.lf__btn:hover{ background:#DBB65F; }
.lf__btn:disabled{ background:#4A4234; color:#CFC6B4; cursor:default; }
.lf__ok{ margin-top:14px; padding:14px 16px; font-size:14.5px; line-height:1.6;
  color:#F6E7C2; background:rgba(201,164,78,.18); box-shadow:inset 0 0 0 1px rgba(201,164,78,.55); }
.lf__ok[hidden]{ display:none; }
.lf__fine{ margin-top:14px; font-size:12.5px; color:var(--parch-3); line-height:1.6; }

/* ============================= FOOTER ============================= */
.fo{ background:#110D09; padding:clamp(54px,7vw,90px) 0 26px; }
.fo__top, .fo__ack, .fo__bot{ width:min(1200px, calc(100% - var(--gut)*2)); margin-inline:auto; }
.fo__top{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,2fr); gap:clamp(28px,4vw,62px); }
.fo__logo{ height:90px; width:auto; }
.fo__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.fo__cols h4{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parch-3); margin-bottom:16px; }
.fo__cols p{ font-size:14.5px; color:var(--parch-2); margin-bottom:12px; line-height:1.78; }
.fo__cols nav{ display:flex; flex-direction:column; }
.fo__cols nav a, .fo__cols p a{ display:inline-block; padding:7px 0; font-size:14.5px; color:var(--parch-2); }
.fo__cols nav a:hover, .fo__cols p a:hover{ color:var(--parch); }
.fo__ack{ margin-top:clamp(38px,5vw,64px); padding-top:26px; border-top:1px solid var(--hair);
  font-size:12.5px; line-height:1.88; color:#6B6151; max-width:100ch; }
.fo__bot{ margin-top:26px; padding-top:22px; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center;
  font-size:12.5px; color:#6B6151; }
.fo__sc{ display:inline-block; padding:8px 0; color:#6B6151; }
.fo__sc b{ color:var(--gold); font-weight:700; }
.fo__sc:hover{ color:var(--parch-2); }

/* ====================== PINNED MOBILE BAR ====================== */
.pb{ 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(23,18,13,.74); backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 -1px 0 var(--hair);
  transform:translateY(110%); transition:transform .32s var(--e); }
.pb.is-up{ transform:none; }
.pb a{ flex:1 1 0; min-height:52px; display:grid; place-items:center; font-size:15px; font-weight:600; }
.pb__a{ background:var(--gold); color:#17120D; }
.pb__b{ flex:0 0 96px; color:var(--parch); box-shadow:inset 0 0 0 1px rgba(237,227,210,.34); }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .pb{ background:#17120D; }
}

/* ============================================================
   RESPONSIVE — mobile is the priority surface (RULE ZERO)
   ============================================================ */
@media (max-width:1080px){
  .nv__links, .nv__cta{ display:none; }
  .nv__burger{ display:flex; }
  .hr__in{ grid-template-columns:1fr; }
  .hr__vis{ display:none; }         /* the quiz takes this slot when stacked */
  .ins__stage{ grid-template-columns:1fr; }
  .ins__vis{ position:static; }
  .xs{ height:360px; }
  .tk{ grid-template-columns:1fr; }
  .tk__l, .tk__r{ padding-inline:max(var(--gut), calc((100vw - 1200px)/2)); }
  .rb{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rb__i:nth-child(odd){ border-left:0; }
  .rb__i:nth-child(n+3){ border-top:1px solid var(--hair-2); }
  .fo__top{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .rf__grid{ grid-template-columns:1fr; }
  .kp__rows{ grid-template-columns:1fr; }
  .hw__steps{ grid-template-columns:1fr; }
  .fo__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .nv{ height:70px; } .nv.is-stuck{ height:62px; }
  .nv__logo{ height:34px; } .nv.is-stuck .nv__logo{ height:30px; }
  .hr{ padding:calc(70px + 40px) 0 54px; }
  .hr__pf{ flex-direction:column; gap:0; }
  .hr__pf span{ box-shadow:none; border-top:1px solid var(--hair); padding:13px 0; width:100%; }
  .rb{ grid-template-columns:1fr; }
  .rb__i{ border-left:0; border-top:1px solid var(--hair-2); }
  .rb__i:first-child{ border-top:0; }
  .xs{ height:300px; }
  .xs__l{ height:110px; left:8%; right:8%; }
  .xs__l--1{ top:18px } .xs__l--2{ top:48px } .xs__l--3{ top:78px }
  .xs__l--4{ top:108px } .xs__l--5{ top:138px } .xs__l--6{ top:168px }
  .lyr{ grid-template-columns:44px 1fr; column-gap:12px; padding:20px 0; }
  .np > div{ grid-template-columns:1fr; gap:4px; }
  .fo__cols{ grid-template-columns:1fr; }
  .fo__logo{ height:72px; }
  .gc{ flex:1 1 calc(50% - 7px); min-width:0; }
  .pb{ display:flex; }
  .tk{ 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; }
  .xs__l{ opacity:1; }
}

/* -------------------------------------------------------------------
   QA corrections, 21 Aug 2026. Contrast values below were measured
   against the real composited ground, and tap targets against the real
   hit area, not the layout box.
   ------------------------------------------------------------------- */
.rf__note{ color:#5B4F3E; }                  /* was 4.29:1 on the light band */

/* tap targets */
.nv__brand{ display:inline-flex; align-items:center; min-height:48px; padding:6px 4px; }
.nv__links a{ padding:12px 9px; }
.fo__cols nav a{ padding:12px 0; }
.fo__cols p a{ display:inline-block; padding:11px 0; }
.fo__sc{ padding:13px 0; }
.mnav__nap a{ display:inline-block; padding:9px 0; }
.np a{ display:inline-block; padding:9px 0; }

/* The shared hero quiz bundle's quiet text defaults to 44% white, which
   fails on this warm panel. Scoped, emitted after the bundle, and every
   pseudo-class state named because :disabled outranks the base rule. */
.hq-step, .hq-priv, .hq-hint, .hq-disc{ color:rgba(255,255,255,.76) !important; }
.hq-next, .hq-next:disabled{ color:#17120D !important; }
.hq-next:disabled{ background:#9A907C !important; }

.fo__ack{ color:#8C8272; }           /* was #6B6151, 3.18:1 on #110D09 */
.fo__bot, .fo__bot span, .fo__sc{ color:#8C8272; }

/* 21 Aug 2026 — Tim: all frames black. The hero box frame was gold leaf;
   gold now survives only as the accent colour, not as a moulding. */
.shadowbox{ background:linear-gradient(145deg,#242329,#0F0E12 60%,#1A1920); }
.xs__l--6{ background:linear-gradient(140deg,#2A2930,#0F0E12); }

/* 21 Aug 2026 — Tim: bigger logo on every form. */
.hq-brand img{ max-height:104px !important; }
.hq-brand{ padding-block:18px !important; }
.lf__logo img{ height:112px; }
@media (max-width:640px){
  .hq-brand img{ max-height:84px !important; }
  .lf__logo img{ height:88px; }
}

/* The shared quiz picks the hero's right hand visual by MEASURING it, and only
   takes its grid slot when it is over 150px tall. .hr__vis is sized entirely by
   the photograph inside it, so whether the quiz wins that lookup depended on
   whether the image had decoded yet: a race that mounted correctly one deploy
   and produced a three column hero the next. An explicit min-height makes the
   measurement true before the image loads, which is how concept 2 has been
   stable all along. */
.hr__vis{ min-height:520px; }
@media (max-width:1080px){ .hr__vis{ min-height:0; } }