/* Studio Vidha - magazine pattern stylesheet (source: studio-vidha-magazine.html) */

/* ============================================================
   STUDIO VIDHA - horizontal magazine. Single committed palette.
   Ground #8B2E1A. Cream on it reads at 7.5:1.
   ============================================================ */
:root{
  --brick:#8B2E1A;
  --brick-deep:#6E2213;
  --brick-lift:#A63A22;
  --cream:#F7F1E6;
  --cream-dim:rgba(247,241,230,.84);
  --cream-fade:rgba(247,241,230,.62);
  --sheet:#F3ECDF;
  --paper:#F5EFE4;
  --ink:#241009;
  --ink-dim:#5A362A;
  --sand:#DCBF9F;
  --rule:rgba(247,241,230,.28);
  --rule-ink:rgba(36,16,9,.2);
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Eczar",Georgia,"Times New Roman",serif;
  --broad:'wdth' 125;
  --mast:42px;
  --bar:46px;
  --logo:url("/assets/img/logo-mask.png?v=2");
}
*{box-sizing:border-box}
body{margin:0; background:var(--brick); color:var(--cream);
  font-family:var(--sans); font-weight:450; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; overflow:hidden}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:500;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{margin:0; line-height:1.02}
p{margin:0}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--cream); outline-offset:3px}
.panel--paper :focus-visible{outline-color:var(--brick)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- shared type roles ---------- */
.broad{font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad);
  font-stretch:125%; text-transform:uppercase; letter-spacing:.03em; line-height:1}
.label{font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; line-height:1.5; color:var(--cream-dim)}
.panel--paper .label{color:var(--ink-dim)}
.serif-em{font-family:var(--serif); font-weight:600; font-style:italic; text-transform:none;
  font-stretch:100%; font-variation-settings:normal; letter-spacing:-.01em; color:var(--sand)}
.panel--paper .serif-em{color:var(--brick)}

/* ---------- RAILS ---------- */
.mast{position:fixed; top:0; left:0; right:0; height:var(--mast); z-index:300;
  display:flex; align-items:center; gap:14px; padding:0 clamp(16px,3vw,32px);
  font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cream-dim); background:var(--brick); border-bottom:1px solid rgba(247,241,230,.18)}
.mast__mark{width:26px; height:21px; background:var(--cream); flex:none;
  -webkit-mask:var(--logo) left center/contain no-repeat; mask:var(--logo) left center/contain no-repeat}
.mast b{font-weight:800; font-variation-settings:var(--broad); letter-spacing:.13em; color:var(--cream)}
.mast nav{margin-left:auto; display:flex; gap:20px}
.mast nav button{background:none; border:0; padding:6px 0; cursor:pointer; color:var(--cream-fade);
  font:inherit; letter-spacing:.14em; text-transform:uppercase; transition:color .2s}
.mast nav button:hover,.mast nav button[aria-current="true"]{color:var(--cream)}
@media(max-width:900px){.mast nav{display:none}}

.bar{position:fixed; bottom:0; left:0; right:0; height:var(--bar); z-index:300;
  border-top:1px solid rgba(36,16,9,.16);
  display:flex; align-items:center; gap:14px; padding:0 clamp(16px,3vw,32px);
  background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase}
.bar a{text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.bar a:hover{color:var(--brick)}
.bar__mark{color:var(--ink); opacity:.62}
.bar__folio{margin-left:auto; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:12px}
.turn{width:38px; height:32px; border:1.5px solid var(--ink); background:transparent; cursor:pointer;
  display:grid; place-items:center; color:var(--ink); transition:background-color .2s,color .2s,opacity .2s}
.turn:hover:not(:disabled){background:var(--ink); color:var(--cream)}
.turn:disabled{opacity:.25; cursor:default}
@media(max-width:600px){.bar__mark{display:none}}

/* thin progress line sitting on top of the bottom bar */
.prog{position:fixed; left:0; bottom:var(--bar); height:2px; background:var(--sand); z-index:301;
  width:0; transition:width .3s cubic-bezier(.2,.7,.3,1)}

/* ---------- THE MAGAZINE TRACK ---------- */
.track{display:flex; height:100svh; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:auto; scrollbar-width:none;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.panel{flex:0 0 100vw; width:100vw; height:100svh; scroll-snap-align:start;
  position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  padding:calc(var(--mast) + clamp(20px,3.4vh,40px)) clamp(22px,5vw,72px) calc(var(--bar) + clamp(20px,3.4vh,40px));
  overflow-x:hidden; overflow-y:auto; scrollbar-width:none}
.panel::-webkit-scrollbar{display:none}
.panel__in{width:min(1140px,100%); margin-inline:auto; margin-block:auto}
.panel--paper{background:var(--paper); color:var(--ink)}
/* the notebook gutter: a fold shadow down the leading edge of every page */
.panel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:52px; z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,0)); pointer-events:none}
.panel:first-child::before{display:none}
.panel::after{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; z-index:3;
  background:rgba(247,241,230,.2); pointer-events:none}
.panel--paper::after{background:rgba(36,16,9,.14)}
.panel:first-child::after{display:none}

/* ---------- COVER ---------- */
.cover{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,5vw,72px); align-items:center}
.cover h1{font-family:var(--sans); font-weight:900; font-variation-settings:var(--broad); font-stretch:125%;
  font-size:clamp(40px,6.6vw,104px); letter-spacing:.015em; text-transform:uppercase; line-height:.9}
.cover__tag{margin-top:22px; font-family:var(--sans); font-weight:700; font-size:clamp(10px,1.05vw,12.5px);
  letter-spacing:.19em; text-transform:uppercase; color:var(--cream-dim); max-width:34ch; line-height:1.9}
.cover__line{margin-top:26px; font-family:var(--serif); font-weight:500; font-size:clamp(17px,1.9vw,23px);
  line-height:1.4; max-width:26ch; color:var(--cream)}
@media(max-width:880px){.cover{grid-template-columns:1fr; gap:26px}
  .cover .frame{max-width:78vw; margin-inline:auto}}

/* ---------- PRINT FRAME (simple rectangles - no arches) ---------- */
.frame{background:var(--sheet); padding:12px; box-shadow:0 3px 10px rgba(30,10,4,.3), 0 22px 52px rgba(30,10,4,.34)}
.frame img{width:100%; aspect-ratio:4/3; object-fit:cover; max-height:62vh}
.frame--tall img{aspect-ratio:3/4}
.frame--wide img{aspect-ratio:16/10}
.frame__cap{display:flex; justify-content:space-between; gap:10px; margin-top:10px; color:var(--ink);
  font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase}

/* ---------- SECTION HEAD ---------- */
.head{margin-bottom:clamp(24px,4vh,44px)}
.head h2{font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad); font-stretch:125%;
  font-size:clamp(28px,4.4vw,58px); text-transform:uppercase; letter-spacing:.02em; line-height:1;
  margin-top:14px; text-wrap:balance}
.head p{margin-top:16px; max-width:52ch; color:var(--cream-dim); font-size:16.5px}
.panel--paper .head p{color:var(--ink-dim)}

/* ---------- LISTS / COLUMNS ---------- */
.four{display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--rule)}
.panel--paper .four{border-top-color:var(--rule-ink)}
.four > div{padding:22px clamp(12px,1.8vw,24px) 4px; border-right:1px solid var(--rule)}
.panel--paper .four > div{border-right-color:var(--rule-ink)}
.four > div:last-child{border-right:0}
.four .n{font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sand)}
.panel--paper .four .n{color:var(--brick)}
.four h3{font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad); font-stretch:112%;
  font-size:clamp(17px,1.7vw,22px); text-transform:uppercase; letter-spacing:.02em; margin:12px 0 9px; line-height:1.12}
.four p{font-size:15px; color:var(--cream-dim); line-height:1.55}
.panel--paper .four p{color:var(--ink-dim)}
.four .stat{font-size:clamp(32px,4.4vw,58px); margin:8px 0 0; font-variant-numeric:tabular-nums; font-stretch:125%}
@media(max-width:860px){.four{grid-template-columns:repeat(2,1fr)}
  .four > div{border-bottom:1px solid var(--rule); padding-bottom:20px}
  .panel--paper .four > div{border-bottom-color:var(--rule-ink)}
  .four > div:nth-child(2n){border-right:0}
  .four > div:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:560px){.four{grid-template-columns:1fr}
  .four > div{border-right:0} .four > div:last-child{border-bottom:0}
  .four > div:nth-last-child(2){border-bottom:1px solid var(--rule)}}


.shot__mark{position:absolute; right:12px; bottom:12px; z-index:2; pointer-events:none;
  font-family:var(--sans); font-weight:700; font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.65)}
/* the cover photograph gets the same treatment - it is a render too */
.frame__shot{position:relative; display:block; overflow:hidden}
.frame__shot img{-webkit-user-select:none; user-select:none; -webkit-user-drag:none; pointer-events:none}
.frame__shot::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Ctext x='105' y='105' fill='%23ffffff' fill-opacity='.55' font-family='Archivo,Helvetica,Arial,sans-serif' font-size='13' font-weight='700' letter-spacing='3' text-anchor='middle' transform='rotate(-31 105 105)'%3ESTUDIO VIDHA%3C/text%3E%3C/svg%3E");
  background-repeat:repeat; background-size:210px 210px}

/* ---------- TEAM: a written statement, set in a box ---------- */
.teambox{max-width:74ch; margin-top:clamp(6px,1.4vh,16px); background:var(--sheet);
  border:1px solid var(--rule-ink); border-left:4px solid var(--brick);
  padding:clamp(22px,3vw,44px) clamp(20px,3vw,48px);
  box-shadow:0 2px 8px rgba(30,10,4,.10), 0 16px 38px rgba(30,10,4,.10)}
.teambox p{font-size:clamp(14px,1.15vw,16.5px); line-height:1.66; color:var(--ink-dim)}
.teambox p + p{margin-top:clamp(11px,1.7vh,18px)}
.teambox b{color:var(--ink); font-weight:700}
.teambox__lead{font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(17px,1.85vw,24px)!important; line-height:1.42!important;
  color:var(--ink)!important; letter-spacing:-.005em}
.teambox__creed{margin-top:clamp(16px,2.4vh,26px)!important; padding-top:clamp(12px,1.8vh,18px);
  border-top:2px solid var(--brick); font-family:var(--sans); font-weight:800;
  font-variation-settings:var(--broad); font-stretch:112%; text-transform:uppercase;
  font-size:clamp(12px,1.25vw,17px)!important; line-height:1.3!important;
  letter-spacing:.03em; color:var(--brick)!important}
@media(max-width:620px){.teambox{border-left-width:3px}}

/* ---------- CONTACT ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:start}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--cream-fade)}
.field input,.field textarea,.field select{background:transparent; border:0; border-bottom:2px solid var(--rule);
  padding:10px 2px; font-family:var(--sans); font-weight:500; font-size:16px; color:var(--cream);
  border-radius:0; min-height:46px}
.field textarea{min-height:62px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0; border-bottom-color:var(--cream)}
.field select option{background:var(--brick); color:var(--cream)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; text-decoration:none;
  padding:13px 24px; min-height:48px; border:2px solid var(--cream); background:var(--cream); color:var(--brick);
  transition:background-color .25s,color .25s,transform .25s}
.btn:hover{background:transparent; color:var(--cream); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--cream)}
.btn--ghost:hover{background:var(--cream); color:var(--brick)}
.info dl{display:grid; grid-template-columns:auto 1fr; gap:12px 18px; margin:0}
.info dt{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--cream-fade); padding-top:3px}
.info dd{margin:0; font-size:15.5px; line-height:1.5}
.info dd a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule)}
.info dd a:hover{text-decoration-color:var(--cream)}
.sent{border:2px solid var(--cream); padding:18px; margin-top:12px}
.sent h3{font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad); font-size:16px;
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:7px}
.sent p{font-size:14.5px; color:var(--cream-dim)}
@media(max-width:880px){.contact{grid-template-columns:1fr} .row2{grid-template-columns:1fr}}
@media(max-width:520px){.info dl{grid-template-columns:1fr; gap:2px} .info dt{padding-top:11px}}

/* ---------- swipe hint on the cover ---------- */
.swipe{display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-fade)}
@keyframes glide{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.swipe svg{animation:glide 2.2s ease-in-out infinite}

/* small screens: shrink the rails so panels keep their air */
@media(max-width:600px){
  :root{--mast:38px; --bar:42px}
  .bar{font-size:10px; letter-spacing:.09em; gap:10px}
  .panel{padding-inline:20px}
  .head h2{font-size:clamp(24px,7vw,34px)}
  .head p{font-size:15px}
  .cover h1{font-size:clamp(34px,10.5vw,56px)}
  .cover__line{font-size:16px}
  .work h2{font-size:clamp(22px,6.6vw,32px)}
}


/* ══════════ THE DESIGN PROCESS ══════════
   ALWAYS horizontal: step 01, then 02 to its right, then 03, 04...
   It never stacks vertically. On a narrow screen the steps do not
   collapse downward - fewer of them sit on each page and the rest
   carry on over the following pages, which is the way the rest of
   this magazine already moves.                                     */
.proc{position:relative;
  --gw:clamp(58px,min(10.5vw,16vh),150px);
  --railH:clamp(26px,4vh,42px);
  --nodeD:clamp(13px,1.5vw,20px);
  display:grid; grid-template-columns:repeat(var(--n,4),1fr);
  gap:0 clamp(14px,2.4vw,44px); margin-top:clamp(12px,2.2vh,28px)}
/* the rule, bleeding past both edges so it reads as carrying on */
.proc::before{content:""; position:absolute; left:-14vw; right:-14vw; z-index:0;
  top:calc(var(--gw) + var(--railH)/2); height:2px; background:var(--ink)}

.step{position:relative; z-index:1;
  display:grid; grid-template-rows:var(--gw) var(--railH) 1fr}
/* THE FORM TAKES SHAPE.
   Every step carries the same hairline frame - the shape it is growing
   into. Step 01 is empty. Step 02 is a dot. From there the dot swells
   and squares off until, at step 08, it fills the frame exactly. */
.glyph{grid-row:1; align-self:end; width:var(--gw); height:var(--gw);
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(139,46,26,.28)}
.glyph::after{content:""; display:block; background:var(--brick);
  width:calc(var(--gw) * var(--sz,1)); height:calc(var(--gw) * var(--sz,1));
  border-radius:var(--rad,0)}
.node{grid-row:2; align-self:center; justify-self:start;
  width:var(--nodeD); height:var(--nodeD); border-radius:50%; background:var(--ink)}
.node--carry{background:var(--paper); box-shadow:inset 0 0 0 3px var(--ink)}
.step__body{grid-row:3; padding-right:8px}

.stepn{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brick); margin:0 0 5px}
.step__body h3{font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad);
  font-stretch:115%; font-size:clamp(13px,1.4vw,19px); text-transform:uppercase;
  letter-spacing:.02em; line-height:1.14; margin:0 0 9px; color:var(--ink)}
.step__body p{font-size:clamp(12px,1vw,14.5px); line-height:1.52; color:var(--ink-dim)}

/* fewer columns means more room per step - spend it */
.proc[data-n="2"]{--gw:clamp(80px,min(17vw,20vh),190px)}
.proc[data-n="2"] .step__body h3{font-size:clamp(17px,2.4vw,26px)}
.proc[data-n="2"] .step__body p{font-size:clamp(13px,1.6vw,16px)}
.proc[data-n="1"]{--gw:clamp(96px,min(30vw,24vh),230px)}
.proc[data-n="1"] .step__body h3{font-size:clamp(21px,6vw,34px)}
.proc[data-n="1"] .step__body p{font-size:clamp(14px,3.6vw,17px); max-width:40ch}
.proc[data-n="1"] .stepn{font-size:12px}

.contin{display:flex; align-items:center; gap:9px; margin-top:clamp(12px,2.2vh,24px);
  font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brick)}
.contin--end{justify-content:flex-end}
@media(max-width:560px){.contin{font-size:9.5px; letter-spacing:.1em}}


/* ---------- MEET THE MINDS: the two founders, one page ---------- */
.minds{display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,52px);
  align-items:start; margin-top:clamp(14px,2.4vh,30px)}
.minds__plates{display:flex; gap:clamp(10px,1.4vw,20px); align-items:flex-start}
/* the images stay whole - height-constrained, aspect preserved, never cropped apart */
.mind__img{background:var(--sheet); padding:9px; flex:none;
  box-shadow:0 2px 8px rgba(30,10,4,.26), 0 14px 34px rgba(30,10,4,.28)}
.mind__img img{display:block; height:min(42vh,360px); width:auto; max-width:100%}
.minds__name{margin-top:14px; font-family:var(--sans); font-weight:800;
  font-variation-settings:var(--broad); font-stretch:112%; text-transform:uppercase;
  font-size:clamp(13px,1.45vw,19px); letter-spacing:.03em; line-height:1.2; color:var(--ink)}
.minds__name span{display:block; margin-top:4px; font-weight:600; font-stretch:100%;
  font-variation-settings:normal; font-size:10.5px; letter-spacing:.12em; color:var(--brick)}
/* the rule runs the full height of the spread, so the write-up is set as a
   column with the creed pinned to the foot - both columns then share one
   bottom edge instead of ending raggedly */
.minds__words{padding-left:clamp(0px,1.4vw,20px); border-left:1px solid var(--rule-ink);
  align-self:stretch; display:flex; flex-direction:column}
.minds__words .lead{font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(15px,1.75vw,22px); line-height:1.42; color:var(--ink); letter-spacing:-.005em}
.minds__words .say{margin-top:clamp(10px,1.6vh,18px); font-size:clamp(12px,1vw,14.5px);
  line-height:1.55; color:var(--ink-dim)}
.minds__creed{margin-top:auto; padding-top:clamp(10px,1.6vh,18px);
  border-top:2px solid var(--brick); font-family:var(--sans); font-weight:800;
  font-variation-settings:var(--broad); font-stretch:112%; text-transform:uppercase;
  font-size:clamp(12px,1.2vw,16px); line-height:1.24; letter-spacing:.02em; color:var(--brick)}
/* Vertical room is what runs out on a narrow pane, not horizontal room -
   so the columns STAY side by side and the plates shrink instead. Stacking
   them was what pushed the creed off the bottom of the page. */
@media(max-width:1000px){
  .minds{grid-template-columns:auto 1fr; gap:clamp(14px,2.4vw,28px)}
  .mind__img{padding:7px}
  .mind__img img{height:min(30vh,250px)}
  .minds__plates{gap:9px}
  .minds__name{margin-top:11px; font-size:14px}
  .minds__words{padding-left:14px}
  .minds__words .lead{font-size:16px; line-height:1.38}
  .minds__words .say{font-size:12.5px; line-height:1.5; margin-top:10px}
  .minds__creed{font-size:13px; padding-top:10px}
}
@media(max-width:620px){
  .minds{grid-template-columns:1fr; gap:12px}
  .mind__img img{height:min(20vh,170px)}
  .minds__words{padding-left:0; border-left:0; padding-top:11px;
    border-top:1px solid var(--rule-ink)}
  .minds__creed{margin-top:clamp(10px,1.8vh,18px)}
  .minds__words .say{display:none}
}

/* ====================================================================
   LANDING PAGES IN THE MAGAZINE PATTERN
   Everything above is the magazine's own stylesheet, unchanged. The
   rules below only add the pieces a landing page needs.
   ==================================================================== */
main.track-main{display:contents}
.brandlink{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit}

/* cover: headline left, enquiry form where the magazine puts its image */
.cover--seo{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4.5vw,64px); align-items:center}
.seo-h1{font-family:var(--sans); font-weight:900; font-variation-settings:var(--broad); font-stretch:125%;
  font-size:clamp(28px,4.2vw,58px); letter-spacing:.012em; text-transform:uppercase; line-height:.98;
  margin-top:14px; text-wrap:balance}
.seo-sub{margin-top:18px; font-family:var(--serif); font-weight:500; font-size:clamp(15px,1.45vw,19px);
  line-height:1.45; color:var(--cream); max-width:44ch}
.pts{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px}
.pts li{display:flex; gap:10px; font-size:14.5px; color:var(--cream-dim); line-height:1.45}
.pts li::before{content:""; flex:none; width:8px; height:8px; margin-top:7px; background:var(--sand)}
.leadbox{border:1px solid rgba(247,241,230,.28); background:rgba(0,0,0,.12); padding:clamp(18px,2.4vw,28px)}
.leadbox h2{font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad); font-stretch:115%;
  font-size:clamp(15px,1.5vw,19px); text-transform:uppercase; letter-spacing:.02em}
.leadbox .note{font-size:13px; color:var(--cream-fade); margin:6px 0 14px}
.leadbox .field{margin-bottom:10px}
.leadbox .btn{width:100%; margin-top:4px}
.leadok{display:none; border:2px solid var(--cream); padding:14px; margin-top:10px; font-size:14px}
.leadok.on{display:block}
@media(max-width:880px){.cover--seo{grid-template-columns:1fr; gap:22px}}

/* long-form panel */
.prose p{font-size:clamp(14.5px,1.2vw,17px); line-height:1.7; color:var(--cream-dim); max-width:66ch}
.prose p + p{margin-top:clamp(10px,1.6vh,16px)}
.prose p:first-child{font-family:var(--serif); font-weight:500; font-size:clamp(16px,1.55vw,21px); line-height:1.5; color:var(--cream)}
.panel--paper .prose p{color:var(--ink-dim)} .panel--paper .prose p:first-child{color:var(--ink)}

/* areas served */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(16px,2.6vh,26px)}
.chips span{border:1px solid var(--rule); padding:7px 13px; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--cream-dim)}
.panel--paper .chips span{border-color:var(--rule-ink); color:var(--ink-dim)}

/* client words */
.voices{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(14px,2vw,26px)}
.voice{margin:0; border-top:2px solid var(--rule); padding-top:16px}
.panel--paper .voice{border-top-color:var(--rule-ink)}
.voice p{font-family:var(--serif); font-weight:500; font-size:clamp(15px,1.4vw,18px); line-height:1.5}
.voice footer{margin-top:12px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-fade)}
.panel--paper .voice footer{color:var(--ink-dim)}

/* questions */
.faqm{border-top:2px solid var(--rule); max-width:900px}
.panel--paper .faqm{border-top-color:var(--rule-ink)}
.faqm details{border-bottom:1px solid var(--rule)}
.panel--paper .faqm details{border-bottom-color:var(--rule-ink)}
.faqm summary{cursor:pointer; list-style:none; position:relative; padding:14px 34px 14px 0;
  font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad); font-stretch:108%;
  font-size:clamp(13.5px,1.25vw,16px); text-transform:uppercase; letter-spacing:.02em; line-height:1.3}
.faqm summary::-webkit-details-marker{display:none}
.faqm summary::after{content:"+"; position:absolute; right:4px; top:10px; font-size:22px; font-weight:400}
.faqm details[open] summary::after{content:"\2212"}
.faqm details p{padding:0 0 14px; font-size:14.5px; line-height:1.62; color:var(--cream-dim); max-width:72ch}
.panel--paper .faqm details p{color:var(--ink-dim)}

/* closing panel */
.closing{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,60px); align-items:start}
.closing h2{font-family:var(--sans); font-weight:800; font-variation-settings:var(--broad); font-stretch:120%;
  font-size:clamp(24px,3.4vw,44px); text-transform:uppercase; letter-spacing:.02em; line-height:1.02; margin-top:12px; text-wrap:balance}
.band-p{margin-top:14px; font-family:var(--serif); font-size:clamp(15px,1.4vw,18px); color:var(--cream-dim)}
.panel--paper .band-p{color:var(--ink-dim)}
.ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.svclist{margin-top:22px; padding-top:14px; border-top:1px solid var(--rule); font-size:13px; line-height:2}
.svclist a{white-space:nowrap; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule)}
.panel--paper .svclist{border-top-color:var(--rule-ink)}
.panel--paper .svclist a{text-decoration-color:var(--rule-ink)}
@media(max-width:880px){.closing{grid-template-columns:1fr}}

/* buttons and studio details sitting on a paper panel */
.panel--paper .btn{background:var(--brick); border-color:var(--brick); color:var(--cream)}
.panel--paper .btn:hover{background:transparent; color:var(--brick)}
.panel--paper .btn--ghost{background:transparent; color:var(--brick)}
.panel--paper .btn--ghost:hover{background:var(--brick); color:var(--cream)}
.panel--paper .info dt{color:var(--ink-dim)}
.panel--paper .info dd{color:var(--ink)}
.panel--paper .info dd a{text-decoration-color:var(--rule-ink)}

.bar .tel{font-weight:800; letter-spacing:.14em}