/* Campfire Collective — shared styles
   Layout: a printed magazine at night. Charcoal "plates" alternate with bone "pages" on a 12-column grid.
   Client work is shown as real website mockups on tinted boards. Ember is the single spark. */
:root{
  --charcoal:#171614;
  --charcoal-2:#1f1d1a;
  --bone:#F2EDE3;
  --bone-2:#E8E1D3;
  --ember:#C65A38;
  --clay:#A9785E;
  --moss:#626653;
  --on-dark-2:rgba(242,237,227,.74);
  --on-dark-3:rgba(242,237,227,.6);
  --rule-dark:rgba(242,237,227,.16);
  --on-light-2:rgba(23,22,20,.74);
  --on-light-3:rgba(23,22,20,.62);
  --rule-light:rgba(23,22,20,.18);

  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  --gutter:clamp(16px,4.2vw,72px);
  --col-gap:clamp(12px,2vw,32px);
  --sec-pad:clamp(96px,11vw,184px);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--charcoal)}
body{margin:0;background:var(--charcoal);color:var(--bone);font-family:var(--sans);font-size:clamp(16px,1.05vw,17.5px);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{text-wrap:balance;font-weight:inherit}
::selection{background:var(--ember);color:var(--bone)}
:focus-visible{outline:1.5px solid var(--ember);outline-offset:5px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;opacity:0;pointer-events:none;background:var(--bone);color:var(--charcoal);padding:12px 18px;font:600 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;transition:top .3s var(--ease)}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 16px);opacity:1;pointer-events:auto}

/* ---------- Primitives ---------- */
.wrap{max-width:1720px;margin-inline:auto;padding-inline:var(--gutter)}
.plate{background:var(--charcoal);color:var(--bone)}
.page{background:var(--bone);color:var(--charcoal)}
.sec{padding-block:var(--sec-pad);position:relative}
.sec.tight{padding-top:0}
.label{font:500 .74rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.plate .muted{color:var(--on-dark-2)} .plate .faint{color:var(--on-dark-3)}
.page .muted{color:var(--on-light-2)} .page .faint{color:var(--on-light-3)}
.tick{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ember);margin-right:.9em;vertical-align:.08em}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.kicker{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--rule-dark)}
.page .kicker{border-top-color:var(--rule-light)}
.serif{font-family:var(--serif)}
.display{font-family:var(--serif);font-weight:300;line-height:.95;letter-spacing:-.032em}
.display em,.serif em{font-style:italic;font-weight:300;letter-spacing:-.025em}
.body-copy{max-width:36rem;font-size:1.06em;line-height:1.65}
.body-copy + .body-copy{margin-top:1.1em}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:24px;margin-top:clamp(36px,4.5vw,64px);margin-bottom:clamp(56px,7vw,104px);align-items:end}
.sec-head h2{grid-column:1 / span 8;font-size:clamp(2.8rem,6.6vw,7.4rem)}
.sec-head p{grid-column:9 / -1;max-width:26rem}
.plate .sec-head p{color:var(--on-dark-2)} .page .sec-head p{color:var(--on-light-2)}

.btn{display:inline-flex;align-items:center;gap:.9em;background:var(--bone);color:var(--charcoal);padding:1.05em 1.5em 1.05em 1.55em;font:600 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);border:1px solid transparent}
.btn .arr{display:inline-block;transition:transform .6s var(--ease-out)}
.btn:hover{background:var(--ember);color:var(--bone)}
.btn:hover .arr{transform:translateX(5px)}
.page .btn{background:var(--charcoal);color:var(--bone)}
.page .btn:hover{background:var(--ember)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--ember);border-color:var(--ember);color:var(--bone)}
.link{position:relative;display:inline-flex;align-items:center;gap:.7em;font:500 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding-block:.65em}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.45;transition:background .4s,opacity .4s}
.link:hover::after{background:var(--ember);opacity:1;animation:sweep .9s var(--ease-out)}
@keyframes sweep{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.concept{display:inline-block;border:1px solid currentColor;padding:6px 9px 5px;font:500 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.8}

/* ---------- Film grain ---------- */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:150;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:env(safe-area-inset-top,0px);color:var(--bone);border-bottom:1px solid transparent;
  transition:transform .8s var(--ease-out),background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.nav[data-tone="light"]{color:var(--charcoal)}
.nav.scrolled{background:var(--charcoal);border-bottom-color:var(--rule-dark)}
.nav.scrolled[data-tone="light"]{background:var(--bone);border-bottom-color:var(--rule-light)}
.nav.away{transform:translateY(-110%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(16px,1.8vw,24px)}
.brand{display:flex;align-items:center;gap:14px}
.mark{width:30px;height:30px;flex:none}
.mark .ring{transition:transform 1.4s var(--ease-out);transform-origin:16px 16px}
.brand:hover .ring{transform:rotate(120deg)}
.wordmark{display:flex;flex-direction:column;font:650 .74rem/1.12 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:clamp(24px,3vw,48px)}
.nav-links{display:flex;gap:clamp(20px,2.6vw,44px)}
.nav-links a{position:relative;font:500 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding-block:8px;opacity:.8;transition:opacity .4s}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1}
.nav-links a::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:5px;margin-top:-3px;border-radius:50%;background:var(--ember);transform:scale(0);transition:transform .6s var(--ease-out)}
.nav-links a[aria-current="page"]::before{transform:scale(1)}
.nav-cta{display:inline-flex;align-items:center;gap:.7em;border:1px solid currentColor;padding:.85em 1.15em;font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:background .4s,border-color .4s,color .4s}
.nav-cta:hover{background:var(--ember);border-color:var(--ember);color:var(--bone)}
.menu-btn{display:none;font:500 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:12px 0 12px 12px;align-items:center}
.menu-btn .bars{display:inline-block;width:18px;margin-left:10px}
.menu-btn .bars i{display:block;height:1px;background:currentColor;margin-block:4px;transition:transform .5s var(--ease-out)}

.menu{position:fixed;inset:0;z-index:99;background:var(--charcoal);color:var(--bone);display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:auto;
  padding:calc(env(safe-area-inset-top,0px) + 100px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 28px);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out)}
.menu.open{clip-path:inset(0 0 0 0)}
.menu ul{display:flex;flex-direction:column;gap:4px}
.menu ul a{display:block;font:300 clamp(2.6rem,12.5vw,4.4rem)/1.06 var(--serif);letter-spacing:-.03em;transform:translateY(20px);opacity:0;transition:transform .9s var(--ease-out),opacity .9s var(--ease-out)}
.menu ul a[aria-current="page"]{font-style:italic}
.menu.open ul a{transform:none;opacity:1}
.menu.open ul li:nth-child(2) a{transition-delay:.05s}.menu.open ul li:nth-child(3) a{transition-delay:.1s}.menu.open ul li:nth-child(4) a{transition-delay:.15s}.menu.open ul li:nth-child(5) a{transition-delay:.2s}
.menu-foot{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--rule-dark);padding-top:20px}
.menu-foot .btn{align-self:flex-start}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.glow{position:absolute;inset:-10%;z-index:-1;pointer-events:none}
.glow span{position:absolute;border-radius:50%}
.glow .g1{width:min(1100px,95vw);aspect-ratio:1;right:4%;bottom:-18%;background:radial-gradient(closest-side,rgba(198,90,56,.2),rgba(198,90,56,.07) 45%,rgba(198,90,56,0));animation:drift1 28s var(--ease) infinite alternate}
.glow .g2{width:min(760px,80vw);aspect-ratio:1;left:-6%;top:6%;background:radial-gradient(closest-side,rgba(169,120,94,.12),rgba(169,120,94,0));animation:drift2 34s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(-9%,-6%) scale(1.08)}}
@keyframes drift2{to{transform:translate(8%,10%) scale(.94)}}
.hero-inner{padding-top:calc(env(safe-area-inset-top,0px) + clamp(124px,14vw,190px));padding-bottom:clamp(72px,8vw,128px)}
.hero-meta{display:flex;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding-bottom:clamp(28px,4vw,52px)}
.hero-title{font-size:clamp(3.3rem,10.6vw,13.5rem);font-weight:280}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-title .line > span{display:block;animation:rise 1.5s var(--ease-out) both}
.hero-title .line:nth-child(2) > span{animation-delay:.14s}
.hero-title .line:nth-child(2){padding-left:clamp(0px,8.5vw,9.5rem)}
.hero-title em{font-weight:260}
.spark{color:var(--ember);font-style:normal}
.br-sm{display:none}
.hero-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;margin-top:clamp(44px,6vw,96px);align-items:end}
.lede{grid-column:1 / span 6;font-size:clamp(1.12rem,1.45vw,1.4rem);line-height:1.5;color:var(--on-dark-2);max-width:33rem}
.lede strong{color:var(--bone);font-weight:500}
.ctas{grid-column:7 / span 3;display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap}
.status{grid-column:9 / -1;justify-self:end;text-align:right;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:var(--on-dark-2)}
.status b{display:flex;align-items:center;gap:10px;color:var(--bone);font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ember);animation:pulse 3.6s var(--ease) infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,90,56,.45)}70%{box-shadow:0 0 0 10px rgba(198,90,56,0)}100%{box-shadow:0 0 0 0 rgba(198,90,56,0)}}
.hero-meta,.hero-foot{animation:fade 1.6s var(--ease-out) .45s both}
@keyframes rise{from{transform:translateY(104%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* page header (inner pages) */
.phead .hero-inner{padding-bottom:clamp(64px,7vw,112px)}
.phead h1{font-size:clamp(3.2rem,9vw,10.5rem);animation:fade 1.4s var(--ease-out) both}
.phead .intro{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:24px;animation:fade 1.6s var(--ease-out) .3s both}
.phead .intro p{grid-column:1 / span 6;font-size:clamp(1.12rem,1.45vw,1.4rem);line-height:1.5;color:var(--on-dark-2);max-width:34rem}
.phead .intro .ctas{grid-column:8 / -1;justify-self:end}

/* ---------- Reveals (resting state stays visible) ---------- */
.js .rv{transition:transform 1.3s var(--ease-out),opacity 1.3s var(--ease-out)}
.js .rv:not(.in){transform:translateY(24px);opacity:.3}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

/* ---------- Who we help (doors) ---------- */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);row-gap:48px}
@supports (grid-template-rows:subgrid){@media (min-width:961px){.doors .door{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:18px;align-content:start}.doors .door .link{align-self:end;justify-self:start}}}
.door{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--rule-light);padding-top:24px;min-width:0}
.door .label{color:var(--on-light-3)}
.door h3{font:300 clamp(2.2rem,3.6vw,3.9rem)/1 var(--serif);letter-spacing:-.03em;transition:transform .9s var(--ease-out),color .5s var(--ease)}
.door p{color:var(--on-light-2);max-width:26rem}
.door ul{display:flex;flex-direction:column;gap:8px;font-size:.95em}
.door ul li{display:flex;gap:12px;align-items:baseline}
.door ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);flex:none;transform:translateY(-2px)}
.door .link{align-self:flex-start;margin-top:auto}
.door:hover h3{transform:translateX(.1em);color:var(--ember)}

/* ---------- Device frames + mockups ---------- */
.browser{container-type:inline-size;position:relative;background:#fbfaf7;border-radius:7px 7px 0 0;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.08);max-width:100%}
.browser.whole{border-radius:7px}
.browser-bar{display:flex;align-items:center;gap:calc(100cqw * 8 / 1200);height:calc(100cqw * 36 / 1200);padding:0 calc(100cqw * 16 / 1200);background:#e8e5de;border-bottom:1px solid rgba(0,0,0,.07)}
.browser-bar i{width:calc(100cqw * 11 / 1200);height:calc(100cqw * 11 / 1200);border-radius:50%;background:#cfcac0;flex:none}
.browser-bar span{margin-left:calc(100cqw * 18 / 1200);flex:1;max-width:calc(100cqw * 420 / 1200);height:calc(100cqw * 20 / 1200);border-radius:calc(100cqw * 5 / 1200);background:#f6f4ef;color:#7a756c;font:500 calc(100cqw * 11 / 1200)/calc(100cqw * 20 / 1200) var(--sans);padding-left:calc(100cqw * 10 / 1200);white-space:nowrap;overflow:hidden}
.mock{--px:calc(100cqw / 1200);position:relative;aspect-ratio:1200 / 720;overflow:hidden;font-family:var(--sans);line-height:1.35;text-align:left}
.phone{container-type:inline-size;position:relative;border-radius:clamp(14px,2.2vw,30px);border:clamp(4px,.55vw,7px) solid #0c0b0a;background:#0c0b0a;overflow:hidden;box-shadow:0 30px 70px -25px rgba(0,0,0,.7)}
.phone .mock{--px:calc(100cqw / 390);aspect-ratio:390 / 800}
.phone::before{content:"";position:absolute;top:calc(100cqw * 10 / 390);left:50%;width:calc(100cqw * 100 / 390);height:calc(100cqw * 26 / 390);transform:translateX(-50%);background:#0c0b0a;border-radius:99px;z-index:5}
.mock *{margin:0}

/* Harbor & Rye — bakery café */
.mk-cafe{background:#f6f1e7;color:#22332a;font-family:"Fraunces",var(--serif)}
.mk-cafe .mk-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--px)*28) calc(var(--px)*56)}
.mk-cafe .mk-logo{font-weight:600;font-size:calc(var(--px)*26);letter-spacing:-.01em}
.mk-cafe .mk-links{display:flex;gap:calc(var(--px)*36);font:500 calc(var(--px)*15) var(--sans)}
.mk-btn{display:inline-block;font:600 calc(var(--px)*14)/1 var(--sans);padding:calc(var(--px)*13) calc(var(--px)*20);white-space:nowrap}
.mk-cafe .mk-btn{background:#23352b;color:#f6f1e7;border-radius:999px}
.mk-cafe .mk-btn.alt{background:transparent;color:#23352b;box-shadow:inset 0 0 0 calc(var(--px)*1.5) #23352b}
.mk-cafe .mk-hero{display:grid;grid-template-columns:1.25fr .9fr;gap:calc(var(--px)*64);padding:calc(var(--px)*48) calc(var(--px)*56) 0;position:relative}
.mk-cafe .mk-eye{font:600 calc(var(--px)*13) var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7b6a3f}
.mk-cafe h4{font-weight:300;font-size:calc(var(--px)*92);line-height:.95;letter-spacing:-.03em;margin-top:calc(var(--px)*22)}
.mk-cafe h4 em{font-style:italic}
.mk-cafe .mk-p{font:400 calc(var(--px)*19)/1.5 var(--sans);color:rgba(34,51,42,.75);max-width:calc(var(--px)*460);margin-top:calc(var(--px)*24)}
.mk-ctas{display:flex;gap:calc(var(--px)*12);margin-top:calc(var(--px)*32);flex-wrap:wrap}
.mk-cafe .mk-sun{position:absolute;right:calc(var(--px)*40);top:calc(var(--px)*-30);width:calc(var(--px)*300);height:calc(var(--px)*300);border-radius:50%;background:#d9a441}
.mk-cafe .mk-card{position:relative;background:#23352b;color:#f6f1e7;padding:calc(var(--px)*32);margin-top:calc(var(--px)*40)}
.mk-cafe .mk-card b{display:block;font-style:italic;font-weight:300;font-size:calc(var(--px)*30);margin-bottom:calc(var(--px)*14)}
.mk-cafe .mk-row{display:flex;justify-content:space-between;gap:calc(var(--px)*12);font:400 calc(var(--px)*16) var(--sans);padding-block:calc(var(--px)*11);border-bottom:1px solid rgba(246,241,231,.18)}
.mk-cafe .mk-card small{display:block;font:500 calc(var(--px)*12) var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-top:calc(var(--px)*16);color:#d9a441}
.mk-cafe .mk-strip{position:absolute;left:0;right:0;bottom:0;background:#d9a441;color:#22332a;font:600 calc(var(--px)*15) var(--sans);padding:calc(var(--px)*16) calc(var(--px)*56);display:flex;gap:calc(var(--px)*40)}
.phone .mk-cafe .mk-nav{padding:calc(var(--px)*56) calc(var(--px)*22) calc(var(--px)*18)}
.phone .mk-cafe .mk-links,.phone .mk-nav .mk-btn{display:none}
.phone .mk-cafe .mk-nav::after,.phone .mk-plumb .mk-nav::after,.phone .mk-physio .mk-nav::after{content:"";width:calc(var(--px)*22);height:calc(var(--px)*10);border-block:calc(var(--px)*2) solid currentColor}
.phone .mk-cafe .mk-hero{grid-template-columns:1fr;gap:0;padding:calc(var(--px)*18) calc(var(--px)*22) 0}
.phone .mk-cafe h4{font-size:calc(var(--px)*58)}
.phone .mk-cafe .mk-p{font-size:calc(var(--px)*16)}
.phone .mk-cafe .mk-sun{width:calc(var(--px)*180);height:calc(var(--px)*180);right:calc(var(--px)*-50);top:calc(var(--px)*-60)}
.phone .mk-cafe .mk-card{margin-top:calc(var(--px)*28);padding:calc(var(--px)*22)}
.phone .mk-cafe .mk-strip{flex-direction:column;gap:calc(var(--px)*4);padding:calc(var(--px)*14) calc(var(--px)*22) calc(var(--px)*24)}
.phone .mk-cafe .mk-strip span:last-child{display:none}

/* Delgado — before (2011-era site) */
.mk-old{background:#dfe6f1;font-family:Verdana,Geneva,sans-serif;color:#333;padding-top:calc(var(--px)*18)}
.mk-old .o-page{width:calc(var(--px)*940);margin:0 auto;background:#fff;border:1px solid #9aa6b8;min-height:100%}
.mk-old .o-head{background:linear-gradient(#2a5db0,#6f9be0);color:#fff;font:italic bold calc(var(--px)*46)/1 "Times New Roman",Times,serif;text-align:center;padding:calc(var(--px)*26) 0 calc(var(--px)*22);text-shadow:calc(var(--px)*2) calc(var(--px)*2) 0 #0b2457}
.mk-old .o-head small{display:block;font:normal calc(var(--px)*15) Arial,sans-serif;text-shadow:none;margin-top:calc(var(--px)*8);color:#e6efff}
.mk-old .o-marq{background:#ffef3d;color:#d10000;font:bold calc(var(--px)*15) Arial,sans-serif;padding:calc(var(--px)*6) 0;white-space:nowrap;overflow:hidden}
.mk-old .o-body{display:grid;grid-template-columns:calc(var(--px)*190) 1fr;min-height:calc(var(--px)*460)}
.mk-old .o-side{background:#eef2f9;border-right:1px solid #c4cfdf;padding:calc(var(--px)*18);display:flex;flex-direction:column;gap:calc(var(--px)*12);font:calc(var(--px)*16) "Times New Roman",serif}
.mk-old .o-side span{color:#0000ee;text-decoration:underline}
.mk-old .o-main{padding:calc(var(--px)*22) calc(var(--px)*30)}
.mk-old .o-main h5{font:bold calc(var(--px)*30) "Times New Roman",serif;text-align:center;color:#1d3f7a;margin-bottom:calc(var(--px)*16)}
.mk-old .o-main p{font-size:calc(var(--px)*12);line-height:1.5;text-align:justify;color:#555;margin-bottom:calc(var(--px)*10)}
.mk-old .o-drop{width:calc(var(--px)*70);height:calc(var(--px)*70);margin:calc(var(--px)*10) auto;background:radial-gradient(circle at 35% 40%,#bfe2ff,#2f7de0 60%);border-radius:0 50% 50% 50%;transform:rotate(45deg)}
.mk-old .o-uc{margin:calc(var(--px)*14) auto 0;width:calc(var(--px)*240);text-align:center;font:bold calc(var(--px)*12) Arial;padding:calc(var(--px)*6);background:repeating-linear-gradient(45deg,#ffd400 0 calc(var(--px)*10),#111 calc(var(--px)*10) calc(var(--px)*20));color:#fff;text-shadow:0 0 calc(var(--px)*3) #000}
.mk-old .o-foot{font-size:calc(var(--px)*11);color:#888;text-align:center;border-top:1px solid #ddd;padding:calc(var(--px)*10)}
.phone .mk-old{padding-top:calc(var(--px)*40)}
.phone .mk-old .o-page{width:calc(var(--px)*940);transform-origin:0 0;transform:scale(.415)}

/* Delgado — after */
.mk-plumb{background:#f5f2ec;color:#102a40;font-family:"Archivo",Arial,sans-serif}
.mk-plumb .mk-util{display:flex;justify-content:space-between;align-items:center;background:#102a40;color:rgba(245,242,236,.85);font:500 calc(var(--px)*13) "Archivo",Arial,sans-serif;padding:calc(var(--px)*10) calc(var(--px)*56)}
.mk-plumb .mk-util b{color:#f2b632;font-weight:700}
.mk-plumb .live{display:inline-block;width:calc(var(--px)*8);height:calc(var(--px)*8);border-radius:50%;background:#3ccf7a;margin-right:calc(var(--px)*8);box-shadow:0 0 0 calc(var(--px)*3) rgba(60,207,122,.25)}
.mk-plumb .mk-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--px)*20) calc(var(--px)*56);border-bottom:1px solid rgba(16,42,64,.1)}
.mk-plumb .mk-logo{display:flex;align-items:center;gap:calc(var(--px)*12)}
.mk-plumb .mk-logo i{width:calc(var(--px)*38);height:calc(var(--px)*38);border-radius:calc(var(--px)*8);background:#f2b632;color:#102a40;display:grid;place-items:center;font:900 calc(var(--px)*22)/1 "Archivo",Arial,sans-serif;font-style:normal;font-stretch:75%}
.mk-plumb .mk-logo b{display:block;font:800 calc(var(--px)*22)/1 "Archivo",Arial,sans-serif;font-stretch:85%;letter-spacing:.02em}
.mk-plumb .mk-logo small{display:block;font:600 calc(var(--px)*10)/1 "Archivo",Arial,sans-serif;letter-spacing:.2em;color:#5d7184;margin-top:calc(var(--px)*4)}
.mk-plumb .mk-links{display:flex;gap:calc(var(--px)*30);font:500 calc(var(--px)*15) "Archivo",Arial,sans-serif}
.mk-plumb .mk-navr{display:flex;align-items:center;gap:calc(var(--px)*20);font:700 calc(var(--px)*15) "Archivo",Arial,sans-serif}
.mk-plumb .mk-btn{background:#102a40;color:#fff;border-radius:calc(var(--px)*6)}
.mk-plumb .mk-btn.y{background:#f2b632;color:#102a40}
.mk-plumb .mk-btn.ln{background:transparent;color:#102a40;box-shadow:inset 0 0 0 calc(var(--px)*1.5) rgba(16,42,64,.35)}
.mk-plumb .mk-btn.big{font-size:calc(var(--px)*17);padding:calc(var(--px)*18) calc(var(--px)*26)}
.mk-plumb .mk-hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:calc(var(--px)*48);padding:calc(var(--px)*40) calc(var(--px)*56) 0}
.mk-plumb .mk-pill{display:inline-block;background:rgba(242,182,50,.22);color:#7a5600;font:700 calc(var(--px)*12)/1 "Archivo",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:calc(var(--px)*8) calc(var(--px)*12);border-radius:99px}
.mk-plumb h4{font:800 calc(var(--px)*72)/.92 "Archivo",Arial,sans-serif;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;margin-top:calc(var(--px)*18)}
.mk-plumb h4 em{font-style:normal;background:linear-gradient(transparent 62%,#f2b632 62%,#f2b632 92%,transparent 92%)}
.mk-plumb .mk-p{font:400 calc(var(--px)*18)/1.5 "Archivo",Arial,sans-serif;color:#435a6e;max-width:calc(var(--px)*470);margin-top:calc(var(--px)*20)}
.mk-plumb .mk-ctas{margin-top:calc(var(--px)*28)}
.mk-plumb .mk-trust{display:flex;flex-wrap:wrap;gap:calc(var(--px)*8) calc(var(--px)*22);margin-top:calc(var(--px)*24);font:600 calc(var(--px)*14) "Archivo",Arial,sans-serif;color:#2c4559}
.mk-plumb .mk-trust span::before{content:"✓";display:inline-grid;place-items:center;width:calc(var(--px)*18);height:calc(var(--px)*18);border-radius:50%;background:#102a40;color:#f2b632;font-size:calc(var(--px)*11);margin-right:calc(var(--px)*8);vertical-align:calc(var(--px)*-3)}
.mk-plumb .mk-pipe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mk-plumb .mk-cards{position:relative;padding-top:calc(var(--px)*8)}
.mk-plumb .mk-stat{position:relative;background:#102a40;color:#f5f2ec;padding:calc(var(--px)*28) calc(var(--px)*30);border-radius:calc(var(--px)*12);width:86%;margin-left:auto}
.mk-plumb .mk-stat small{display:block;font:600 calc(var(--px)*12) "Archivo",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.65)}
.mk-plumb .mk-stat b{display:block;font:800 calc(var(--px)*72)/1 "Archivo",Arial,sans-serif;font-stretch:75%;color:#f2b632;margin-top:calc(var(--px)*8)}
.mk-plumb .mk-stat p{font-size:calc(var(--px)*14);color:rgba(245,242,236,.75);margin-top:calc(var(--px)*6)}
.mk-plumb .mk-quote{position:relative;background:#fff;border-radius:calc(var(--px)*12);padding:calc(var(--px)*22) calc(var(--px)*24);width:84%;margin-top:calc(var(--px)*-22);box-shadow:0 calc(var(--px)*24) calc(var(--px)*48) calc(var(--px)*-22) rgba(16,42,64,.35)}
.mk-plumb .mk-stars{color:#f2b632;font-size:calc(var(--px)*18);letter-spacing:.12em}
.mk-plumb .mk-quote p{font:italic 400 calc(var(--px)*16)/1.45 "Archivo",Arial,sans-serif;color:#22394d;margin-top:calc(var(--px)*8)}
.mk-plumb .mk-quote small{display:flex;justify-content:space-between;font:600 calc(var(--px)*13) "Archivo",Arial,sans-serif;color:#5d7184;margin-top:calc(var(--px)*12)}
.mk-plumb .mk-svc{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid rgba(16,42,64,.1)}
.mk-plumb .mk-svc > span{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--px)*18) calc(var(--px)*28);font:700 calc(var(--px)*16) "Archivo",Arial,sans-serif;border-right:1px solid rgba(16,42,64,.08)}
.mk-plumb .mk-svc small{display:block;font:400 calc(var(--px)*13) "Archivo",Arial,sans-serif;color:#5d7184;margin-top:calc(var(--px)*3)}
.mk-plumb .mk-svc em{font-style:normal;color:#c7782f;font-size:calc(var(--px)*18)}
.phone .mk-plumb .mk-util{padding:calc(var(--px)*50) calc(var(--px)*20) calc(var(--px)*10);justify-content:center}
.phone .mk-plumb .mk-util span:last-child,.phone .mk-plumb .mk-links,.phone .mk-plumb .mk-navr,.phone .mk-plumb .mk-pipe,.phone .mk-plumb .mk-svc{display:none}
.phone .mk-plumb .mk-nav{padding:calc(var(--px)*14) calc(var(--px)*20)}
.phone .mk-plumb .mk-hero{grid-template-columns:1fr;gap:calc(var(--px)*24);padding:calc(var(--px)*22) calc(var(--px)*20) 0}
.phone .mk-plumb h4{font-size:calc(var(--px)*54)}
.phone .mk-plumb .mk-p{font-size:calc(var(--px)*16)}
.phone .mk-plumb .mk-btn.big{display:block;text-align:center}
.phone .mk-plumb .mk-stat,.phone .mk-plumb .mk-quote{width:100%}
.phone .mk-plumb .mk-quote{margin-top:calc(var(--px)*12)}

/* Northside — before (social page only) */
.mk-social{background:#e9ebee;color:#1c1e21;font-family:Arial,Helvetica,sans-serif}
.mk-social .s-top{height:calc(var(--px)*48);background:#fff;border-bottom:1px solid #d6d9dd;display:flex;align-items:center;padding:0 calc(var(--px)*24);gap:calc(var(--px)*14)}
.mk-social .s-top i{width:calc(var(--px)*34);height:calc(var(--px)*34);border-radius:50%;background:#c9ccd1}
.mk-social .s-top b{width:calc(var(--px)*240);height:calc(var(--px)*30);border-radius:99px;background:#f0f2f5}
.mk-social .s-main{width:calc(var(--px)*900);margin:0 auto}
.mk-social .s-cover{height:calc(var(--px)*200);background:linear-gradient(135deg,#b9bec6,#8f96a1)}
.mk-social .s-id{display:flex;align-items:flex-end;gap:calc(var(--px)*20);padding:0 calc(var(--px)*30);margin-top:calc(var(--px)*-50)}
.mk-social .s-av{width:calc(var(--px)*120);height:calc(var(--px)*120);border-radius:50%;background:#7d8b84;border:calc(var(--px)*4) solid #fff;display:grid;place-items:center;color:#fff;font:bold calc(var(--px)*34) Arial}
.mk-social .s-name{padding-bottom:calc(var(--px)*12)}
.mk-social .s-name b{display:block;font-size:calc(var(--px)*26)}
.mk-social .s-name span{font-size:calc(var(--px)*14);color:#65676b}
.mk-social .s-msg{margin-left:auto;margin-bottom:calc(var(--px)*16);background:#e4e6eb;padding:calc(var(--px)*9) calc(var(--px)*16);border-radius:calc(var(--px)*6);font:bold calc(var(--px)*14) Arial}
.mk-social .s-post{background:#fff;border-radius:calc(var(--px)*8);margin:calc(var(--px)*22) calc(var(--px)*30) 0;padding:calc(var(--px)*18) calc(var(--px)*20);font-size:calc(var(--px)*15)}
.mk-social .s-post small{display:block;color:#65676b;font-size:calc(var(--px)*12);margin-bottom:calc(var(--px)*8)}
.phone .mk-social .s-top{height:calc(var(--px)*90);align-items:flex-end;padding-bottom:calc(var(--px)*10)}
.phone .mk-social .s-main{width:auto}
.phone .mk-social .s-cover{height:calc(var(--px)*130)}
.phone .mk-social .s-id{flex-wrap:wrap;padding:0 calc(var(--px)*16)}
.phone .mk-social .s-msg{margin-left:0}
.phone .mk-social .s-post{margin:calc(var(--px)*14) calc(var(--px)*12) 0}

/* Northside — after */
.mk-physio{background:#eef1ec;color:#1d2a24;font-family:var(--sans)}
.mk-physio .mk-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--px)*28) calc(var(--px)*56)}
.mk-physio .mk-logo{font:600 calc(var(--px)*22) var(--sans);letter-spacing:-.01em}
.mk-physio .mk-logo em{font:italic 300 calc(var(--px)*24) var(--serif);margin-left:calc(var(--px)*4);color:#3f6b57}
.mk-physio .mk-links{display:flex;gap:calc(var(--px)*34);font:500 calc(var(--px)*15) var(--sans)}
.mk-physio .mk-btn{background:#3f6b57;color:#fff;border-radius:calc(var(--px)*8)}
.mk-physio .mk-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:calc(var(--px)*64);padding:calc(var(--px)*44) calc(var(--px)*56) 0}
.mk-physio .mk-eye{font:600 calc(var(--px)*13) var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#3f6b57}
.mk-physio h4{font:300 calc(var(--px)*82)/.98 var(--serif);letter-spacing:-.03em;margin-top:calc(var(--px)*20)}
.mk-physio h4 em{font-style:italic;color:#3f6b57}
.mk-physio .mk-p{font-size:calc(var(--px)*18);line-height:1.5;color:#4b5a53;max-width:calc(var(--px)*440);margin-top:calc(var(--px)*22)}
.mk-physio .mk-note{font-size:calc(var(--px)*14);color:#4b5a53;margin-top:calc(var(--px)*18)}
.mk-physio .mk-book{background:#fff;border-radius:calc(var(--px)*14);padding:calc(var(--px)*28);box-shadow:0 calc(var(--px)*20) calc(var(--px)*50) calc(var(--px)*-20) rgba(29,42,36,.3)}
.mk-physio .mk-book b{display:block;font-size:calc(var(--px)*20);font-weight:600}
.mk-physio .mk-sel{margin-top:calc(var(--px)*14);border:1px solid #d3dad4;border-radius:calc(var(--px)*8);padding:calc(var(--px)*12) calc(var(--px)*14);font-size:calc(var(--px)*15);display:flex;justify-content:space-between}
.mk-physio .mk-days{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--px)*8);margin-top:calc(var(--px)*16)}
.mk-physio .mk-days span{border:1px solid #d3dad4;border-radius:calc(var(--px)*8);padding:calc(var(--px)*10) 0;text-align:center;font-size:calc(var(--px)*13);line-height:1.3}
.mk-physio .mk-days span b{font-size:calc(var(--px)*18);display:block}
.mk-physio .mk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--px)*8);margin-top:calc(var(--px)*12)}
.mk-physio .mk-slots span{background:#eef1ec;border-radius:calc(var(--px)*8);padding:calc(var(--px)*10) 0;text-align:center;font-size:calc(var(--px)*14);font-weight:500}
.mk-physio .on{background:#3f6b57!important;border-color:#3f6b57!important;color:#fff}
.mk-physio .mk-go{margin-top:calc(var(--px)*16);background:#1d2a24;color:#fff;text-align:center;border-radius:calc(var(--px)*8);padding:calc(var(--px)*14);font-weight:600;font-size:calc(var(--px)*15)}
.phone .mk-physio .mk-nav{padding:calc(var(--px)*56) calc(var(--px)*22) calc(var(--px)*16)}
.phone .mk-physio .mk-links{display:none}
.phone .mk-physio .mk-hero{grid-template-columns:1fr;gap:calc(var(--px)*24);padding:calc(var(--px)*10) calc(var(--px)*22) 0}
.phone .mk-physio h4{font-size:calc(var(--px)*54)}
.phone .mk-physio .mk-p{font-size:calc(var(--px)*16)}
.phone .mk-physio .mk-book{padding:calc(var(--px)*20)}

/* ---------- Before / after compare ---------- */
.compare{max-width:1240px;margin-inline:auto}
.compare .browser{border-radius:7px}
.cmp-stage{position:relative;aspect-ratio:1200 / 720}
.cmp-stage .mock{position:absolute;inset:0}
.cmp-after{clip-path:inset(0 0 0 var(--pos,50%))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:var(--ember);pointer-events:none;z-index:3}
.cmp-handle{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--ember);color:var(--bone);display:grid;place-items:center;font:600 .9rem/1 var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .4s var(--ease-out)}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y}
.cmp-range:focus-visible + .cmp-line .cmp-handle{outline:2px solid var(--bone);outline-offset:3px;transform:scale(1.08)}
.cmp-tag{position:absolute;top:14px;z-index:2;background:rgba(23,22,20,.85);color:var(--bone);font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px;pointer-events:none}
.cmp-tag.b{left:14px}.cmp-tag.a{right:14px;background:var(--ember)}
.cmp-cap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:20px;color:var(--on-dark-2)}

/* ---------- Work features ---------- */
.projects{display:flex;flex-direction:column;gap:clamp(104px,12vw,200px)}
.project{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(24px,2.6vw,40px);position:relative}
.project > a.cover{position:absolute;inset:0;z-index:2}
.board{position:relative;overflow:hidden;background:var(--tint);padding:clamp(22px,5.5%,80px) clamp(20px,7%,104px) 0;min-width:0}
.board .browser{margin-bottom:-8%;transition:transform 1.4s var(--ease-out)}
.board .phone{position:absolute;right:5%;bottom:-6%;width:21%;transition:transform 1.4s var(--ease-out)}
.project:hover .board .browser{transform:translateY(-8px)}
.project:hover .board .phone{transform:translateY(-16px)}
.board .concept{position:absolute;left:14px;top:12px;color:var(--board-ink,#F2EDE3);z-index:3}
.caption{display:flex;flex-direction:column;gap:14px;min-width:0}
.cap-meta{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:baseline;color:var(--on-dark-2)}
.cap-meta .num{color:var(--bone)}
.cap-title{font:300 clamp(2.6rem,5vw,5.2rem)/.98 var(--serif);letter-spacing:-.03em;transition:transform 1s var(--ease-out)}
.project:hover .cap-title{transform:translateX(.16em)}
.cap-desc{color:var(--on-dark-2);max-width:30rem}
.cap-cta{display:inline-flex;align-items:center;gap:12px;margin-top:6px;font:500 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.cap-cta i{display:block;width:12px;height:1px;background:var(--ember);transition:width .9s var(--ease-out)}
.project:hover .cap-cta i,.project:focus-within .cap-cta i{width:44px}
.f1 .board{grid-column:1 / -1}
.f1 .caption{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.f1 .cap-meta{grid-column:1 / span 3;flex-direction:column;gap:8px}
.f1 .cap-title{grid-column:4 / span 5}
.f1 .cap-side{grid-column:9 / -1;display:flex;flex-direction:column;gap:14px}
.f2 .board{grid-column:5 / -1;grid-row:1}
.f2 .caption{grid-column:1 / span 4;grid-row:1;align-self:end;padding-right:12px}
.f3 .board{grid-column:1 / span 9}
.f3 .caption{grid-column:10 / -1;align-self:end}

/* ---------- Included ---------- */
.incl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-light)}
.incl li{padding:26px 22px 30px 0;border-bottom:1px solid var(--rule-light);display:flex;flex-direction:column;gap:10px;min-width:0}
.incl li:not(:nth-child(4n)){border-right:1px solid var(--rule-light)}
.incl li:not(:nth-child(4n+1)){padding-left:22px}
.incl h3{font:400 1.3rem/1.2 var(--serif);letter-spacing:-.01em;display:flex;gap:12px;align-items:baseline}
.incl h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none;transform:translateY(-3px)}
.incl p{color:var(--on-light-2);font-size:.95em}

/* ---------- Process ---------- */
.track{position:relative;height:1px;background:var(--rule-dark)}
.track .fill{position:absolute;inset:0;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform 3.2s var(--ease-out)}
.track.in .fill{transform:scaleX(1)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap)}
.step{position:relative;padding-top:34px;padding-right:12px;display:flex;flex-direction:column;gap:14px}
.step::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--charcoal);border:1px solid var(--on-dark-3);transition:background .8s var(--ease),border-color .8s var(--ease)}
.track.in + .steps .step::before{background:var(--ember);border-color:var(--ember)}
.track.in + .steps .step:nth-child(2)::before{transition-delay:.7s}
.track.in + .steps .step:nth-child(3)::before{transition-delay:1.4s}
.track.in + .steps .step:nth-child(4)::before{transition-delay:2.1s}
.step-n{color:var(--on-dark-3)}
.step h3{font:300 clamp(2.4rem,3.8vw,4rem)/1 var(--serif);letter-spacing:-.03em;transition:transform .9s var(--ease-out),color .5s var(--ease)}
.step:hover h3{transform:translateX(.12em);color:var(--ember)}
.step p{color:var(--on-dark-2);max-width:21rem}
.step .you{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-dark);font-size:.9em;line-height:1.5;color:var(--on-dark-2)}
.step .you b{display:block;font:500 .7rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:6px}

/* ---------- Pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-light)}
.tier{display:flex;flex-direction:column;gap:20px;padding:32px 28px 36px 0;border-bottom:1px solid var(--rule-light);min-width:0;position:relative}
.tier + .tier{padding-left:28px;border-left:1px solid var(--rule-light)}
.tier.feat::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--ember)}
.tier-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.tier h3{font:300 clamp(2.2rem,3.4vw,3.4rem)/1 var(--serif);letter-spacing:-.03em}
.tier .for{color:var(--on-light-2)}
.price{display:flex;align-items:baseline;gap:10px;font-variant-numeric:lining-nums tabular-nums}
.price b{font:300 clamp(2.6rem,4.2vw,4.4rem)/1 var(--serif);letter-spacing:-.03em}
.price span{color:var(--on-light-3)}
.tier ul{display:flex;flex-direction:column;gap:10px;font-size:.96em}
.tier li{display:flex;gap:12px;align-items:baseline}
.tier li::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;transform:translateY(-2px);opacity:.6}
.tier .when{color:var(--on-light-3);margin-top:auto;padding-top:16px;border-top:1px solid var(--rule-light)}
.tier .btn{align-self:flex-start}
.care{margin-top:clamp(56px,6vw,96px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:28px;background:var(--charcoal);color:var(--bone);padding:clamp(28px,4vw,56px)}
.care h3{grid-column:1 / span 5;font:300 clamp(2.2rem,4vw,4rem)/1 var(--serif);letter-spacing:-.03em}
.care .care-body{grid-column:7 / -1;display:flex;flex-direction:column;gap:18px}
.care .price span{color:var(--on-dark-3)}
.care ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;color:var(--on-dark-2);font-size:.95em}
.care li{display:flex;gap:12px;align-items:baseline}
.care li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);flex:none;transform:translateY(-2px)}
.addons{border-top:1px solid var(--rule-light)}
.addon{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:8px;padding-block:24px;border-bottom:1px solid var(--rule-light);align-items:baseline}
.addon h3{grid-column:1 / span 4;font:400 clamp(1.5rem,2vw,1.9rem)/1.15 var(--serif);letter-spacing:-.015em}
.addon p{grid-column:5 / span 5;color:var(--on-light-2)}
.addon b{grid-column:10 / -1;justify-self:end;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.fine{margin-top:28px;color:var(--on-light-3);max-width:46rem;font-size:.92em}
.price-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-dark)}
.price-strip a{display:flex;flex-direction:column;gap:12px;padding:26px 24px 30px 0;border-bottom:1px solid var(--rule-dark);transition:background .5s}
.price-strip a + a{padding-left:24px;border-left:1px solid var(--rule-dark)}
.price-strip h3{font:300 clamp(1.9rem,2.8vw,2.8rem)/1 var(--serif);letter-spacing:-.025em;transition:transform .9s var(--ease-out),color .5s var(--ease)}
.price-strip a:hover h3{transform:translateX(.1em);color:var(--ember)}
.price-strip .price b{font-size:clamp(1.8rem,2.6vw,2.6rem)}
.price-strip .price span{color:var(--on-dark-3)}
.price-strip p{color:var(--on-dark-2);font-size:.95em}

/* ---------- Services list ---------- */
.svc-list{border-top:1px solid var(--rule-light)}
.svc{position:relative;border-bottom:1px solid var(--rule-light)}
.svc::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out)}
.svc:hover::after{transform:scaleX(1)}
.svc-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:18px;padding-block:clamp(36px,4.4vw,64px);align-items:start}
.svc-title{grid-column:1 / span 6;font:300 clamp(3rem,7.6vw,8.4rem)/.9 var(--serif);letter-spacing:-.04em;transition:transform 1.1s var(--ease-out)}
.svc:hover .svc-title{transform:translateX(.08em)}
.svc-detail{grid-column:8 / -1;display:flex;flex-direction:column;gap:18px;padding-top:.5em}
.svc-tags{font:500 .76rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.svc-desc{color:var(--on-light-2);max-width:32rem}
.svc-del{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92em;color:var(--on-light-2)}
.svc-del li{display:flex;align-items:center;gap:8px}
.svc-del li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ember)}
.svc-from{font:500 .8rem/1 var(--sans);letter-spacing:.06em;color:var(--charcoal)}

/* ---------- Review CTA ---------- */
.review{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;align-items:end}
.review h2{grid-column:1 / span 7;font-size:clamp(2.6rem,5.6vw,6.2rem)}
.review .rv-body{grid-column:9 / -1;display:flex;flex-direction:column;gap:22px}
.review .rv-body p{color:var(--on-light-2)}
.review ol{display:flex;flex-direction:column;gap:10px;counter-reset:r}
.review ol li{counter-increment:r;display:flex;gap:14px;align-items:baseline}
.review ol li::before{content:counter(r,decimal-leading-zero);font:500 .72rem var(--sans);letter-spacing:.12em;color:var(--ember)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule-dark)}
.page .faq{border-top-color:var(--rule-light)}
.faq details{border-bottom:1px solid var(--rule-dark)}
.page .faq details{border-bottom-color:var(--rule-light)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;padding-block:24px;font:300 clamp(1.4rem,2.3vw,2.2rem)/1.2 var(--serif);letter-spacing:-.015em;transition:color .4s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 1.6rem/1 var(--sans);color:var(--ember);transition:transform .5s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--ember)}
.faq .a{padding:0 0 28px;max-width:44rem;color:var(--on-dark-2)}
.page .faq .a{color:var(--on-light-2)}
.faq .a p + p{margin-top:.8em}
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px}
.faq-grid .faq-side{grid-column:1 / span 4;display:flex;flex-direction:column;gap:20px;align-self:start}
.faq-grid .faq{grid-column:6 / -1}

/* ---------- Closing CTA ---------- */
.closing{position:relative;overflow:hidden;isolation:isolate}
.closing .ember-glow{position:absolute;z-index:-1;left:50%;bottom:-40%;width:min(1300px,130vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(198,90,56,.17),rgba(169,120,94,.06) 50%,rgba(23,22,20,0));animation:breathe 14s var(--ease) infinite alternate;pointer-events:none}
@keyframes breathe{to{transform:translateX(-50%) scale(1.08);opacity:.8}}
.closing h2{font-size:clamp(3.1rem,9vw,11rem);margin-top:clamp(36px,4.5vw,64px)}
.closing h2 span{display:block}
.closing h2 span:nth-child(2){padding-left:clamp(0px,8vw,9rem)}
.closing-row{margin-top:clamp(52px,6vw,96px);row-gap:44px;align-items:end}
.talk{grid-column:1 / span 7;display:inline-flex;align-items:center;gap:.5em;justify-self:start;font:600 clamp(1.5rem,3.6vw,3.4rem)/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding-bottom:14px;position:relative}
.talk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--bone);transition:background .6s}
.talk:hover::after{background:var(--ember)}
.talk .arr{color:var(--ember);display:inline-block;transition:transform .8s var(--ease-out)}
.talk:hover .arr{transform:translateX(.25em)}
.direct{grid-column:9 / -1;display:flex;flex-direction:column;gap:18px}
.direct div{display:flex;flex-direction:column;gap:6px}
.direct .v{font:300 clamp(1.25rem,1.6vw,1.7rem)/1.25 var(--serif);letter-spacing:-.01em;overflow-wrap:break-word}
.copy-state{color:var(--on-dark-2);font-size:.88rem;min-height:1.2em}

/* ---------- Contact page ---------- */
.contact-grid{row-gap:64px;align-items:start}
.form{grid-column:1 / span 7;display:flex;flex-direction:column;gap:34px}
.contact-side{grid-column:9 / -1;display:flex;flex-direction:column;gap:40px}
.fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.fieldset legend,.field label.lab{font:500 .74rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2);padding:0;margin-bottom:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:28px var(--col-gap)}
.field{display:flex;flex-direction:column;min-width:0}
.field label.lab{margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--on-dark-3);border-radius:0;padding:12px 0;font-size:1.12rem;color:var(--bone);transition:border-color .4s}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--on-dark-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ember)}
.field input:disabled{opacity:.4}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2EDE3' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:28px}
.field select option{background:var(--charcoal);color:var(--bone)}
.field .help{font-size:.86rem;color:var(--on-dark-3);margin-top:8px}
.field.err input,.field.err select{border-bottom-color:#E9906F}
.field .msg{font-size:.86rem;color:#F0A486;margin-top:8px}
.check{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-size:.95rem;color:var(--on-dark-2);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--ember)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.chip span{display:inline-block;border:1px solid var(--on-dark-3);padding:.75em 1.1em;font-size:.95rem;transition:background .35s,color .35s,border-color .35s}
.chip input:checked + span{background:var(--bone);color:var(--charcoal);border-color:var(--bone)}
.chip input:focus-visible + span{outline:1.5px solid var(--ember);outline-offset:3px}
.chip:hover span{border-color:var(--bone)}
.form-foot{display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap}
.form-note{color:var(--on-dark-2);font-size:.92rem;max-width:30rem}
.out{border:1px solid var(--rule-dark);background:var(--charcoal-2);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:18px}
.out h3{font:300 clamp(1.8rem,2.6vw,2.4rem)/1.1 var(--serif);letter-spacing:-.02em}
.out pre{white-space:pre-wrap;font:400 .98rem/1.6 var(--sans);color:var(--bone);margin:0;overflow-wrap:anywhere}
.out p{color:var(--on-dark-2)}
.next-steps{display:flex;flex-direction:column;gap:18px;counter-reset:n}
.next-steps li{counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--rule-dark)}
.next-steps li::before{content:counter(n,decimal-leading-zero);font:500 .74rem var(--sans);letter-spacing:.12em;color:var(--ember)}
.next-steps b{display:block;font:400 1.25rem/1.25 var(--serif);margin-bottom:4px}
.next-steps span{color:var(--on-dark-2);font-size:.95em}

/* ---------- About ---------- */
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px}
.value{border-top:1px solid var(--rule-light);padding-top:22px;display:flex;flex-direction:column;gap:14px}
.value h3{font:300 clamp(2rem,3vw,3rem)/1 var(--serif);letter-spacing:-.025em}
.value p{color:var(--on-light-2)}
.pull{font:300 clamp(2.4rem,5.4vw,6rem)/1.02 var(--serif);letter-spacing:-.03em;max-width:17ch}
.pull em{font-style:italic}

/* ---------- Case pages ---------- */
.case-facts{row-gap:28px}
.case-facts > div{grid-column:span 3;border-top:1px solid var(--rule-dark);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.case-facts dt{color:var(--on-dark-3)}
.case-facts dd{font-size:1rem;line-height:1.55}
.case-board{margin-top:clamp(48px,6vw,88px)}
.case-board .board{padding-bottom:clamp(22px,5.5%,80px)}
.case-board .board .browser{margin-bottom:0;border-radius:7px}
.case-story{row-gap:48px}
.case-story > div{display:flex;flex-direction:column;gap:16px}
.case-story > div:first-child{grid-column:1 / span 5}
.case-story > div:last-child{grid-column:7 / -1}
.case-story h3{font:300 clamp(2rem,3vw,3rem)/1 var(--serif);letter-spacing:-.02em}
.case-story p{color:var(--on-light-2);max-width:34rem}
.case-story ul{display:flex;flex-direction:column;gap:10px}
.case-story li{display:flex;gap:12px;align-items:baseline}
.case-story li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);flex:none;transform:translateY(-2px)}
.phones{display:flex;justify-content:center;gap:clamp(16px,4vw,64px);flex-wrap:wrap}
.phones .phone{width:min(300px,42vw)}
.phones figure{display:flex;flex-direction:column;align-items:center;gap:16px}
.phones figcaption{color:var(--on-light-3)}
.before-box{border:1px dashed var(--rule-light);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:16px;max-width:52rem}
.before-box p{color:var(--on-light-2)}
.goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px}
.goal{border-top:1px solid var(--rule-dark);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.goal b{font:300 clamp(1.7rem,2.4vw,2.4rem)/1.05 var(--serif);letter-spacing:-.02em;font-weight:300}
.goal p{color:var(--on-dark-2)}
.next-case{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--rule-dark);padding-top:28px}
.next-case .serif{font-size:clamp(2.6rem,6vw,6rem);line-height:1;letter-spacing:-.03em;font-weight:300;transition:transform 1s var(--ease-out),color .5s var(--ease)}
.next-case:hover .serif{transform:translateX(.15em);color:var(--ember)}

/* ---------- Prose (privacy) ---------- */
.prose{max-width:44rem;display:flex;flex-direction:column;gap:1.1em}
.prose h2{font:300 clamp(1.8rem,2.6vw,2.4rem)/1.1 var(--serif);letter-spacing:-.02em;margin-top:1.2em}
.prose p,.prose li{color:var(--on-light-2)}
.prose ul{display:flex;flex-direction:column;gap:.5em;padding-left:1.2em;list-style:disc}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--rule-dark);padding-block:clamp(56px,6vw,88px) calc(env(safe-area-inset-bottom,0px) + 36px)}
.footer .grid{row-gap:40px;align-items:start}
.f-brand{grid-column:1 / span 4;display:flex;flex-direction:column;gap:14px}
.f-brand .wordmark{font-size:.86rem}
.f-brand p{color:var(--on-dark-2);max-width:20rem;font-size:.95em}
.f-col{grid-column:span 2;display:flex;flex-direction:column;gap:12px}
.f-col .h{color:var(--on-dark-3);margin-bottom:4px}
.f-contact{grid-column:span 3}
.footer a.label,.footer .f-col a{opacity:.85;transition:opacity .4s,color .4s}
.footer a.label:hover,.footer .f-col a:hover{opacity:1;color:var(--ember)}
.f-bottom{grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-top:1px solid var(--rule-dark);padding-top:22px;color:var(--on-dark-3)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav-links{gap:22px}
  .lede{grid-column:1 / span 7}
  .ctas{grid-column:1 / span 7;grid-row:2}
  .status{grid-column:8 / -1;grid-row:2}
  .incl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .incl li:not(:nth-child(4n)){border-right:0}
  .incl li:not(:nth-child(4n+1)){padding-left:0}
  .incl li:nth-child(odd){border-right:1px solid var(--rule-light)}
  .incl li:nth-child(even){padding-left:22px}
}
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .grid > *,.project > *,.sec-head > *,.hero-foot > *,.phead .intro > *,.review > *,.care > *,.addon > *,.svc-inner > *,.faq-grid > *,.f1 .caption > *{grid-column:1 / -1!important;grid-row:auto!important}
  .hero-title .line:nth-child(2){padding-left:0}
  .br-sm{display:inline}
  .hero-title{font-size:clamp(3.3rem,16vw,8rem)}
  .status{justify-self:start;text-align:left;align-items:flex-start}
  .phead .intro .ctas{justify-self:start}
  .f1 .caption{display:flex}
  .f1 .cap-meta{flex-direction:row}
  .board .phone{width:28%}
  .doors,.values,.goals{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .tier + .tier{padding-left:0;border-left:0}
  .tier{padding-right:0}
  .price-strip{grid-template-columns:1fr}
  .price-strip a + a{padding-left:0;border-left:0}
  .care ul{grid-template-columns:1fr}
  .addon b{justify-self:start}
  .steps{grid-template-columns:1fr;row-gap:0}
  .track{display:none}
  .step{padding:28px 0 36px 28px;border-left:1px solid var(--rule-dark)}
  .step::before{top:34px;left:-5px}
  .step.lit::before{background:var(--ember);border-color:var(--ember)}
  .step .you{margin-top:8px}
  .closing h2 span:nth-child(2){padding-left:0}
  .case-facts > div{grid-column:span 6!important}
  .footer .grid{grid-template-columns:1fr 1fr}
  .footer .grid > *{grid-column:auto!important}
  .footer .grid > .f-brand,.footer .grid > .f-bottom{grid-column:1 / -1!important}
  .cmp-handle{width:40px;height:40px;margin:-20px 0 0 -20px}
}
@media (max-width:600px){
  .hero-meta .hide-sm{display:none}
  .incl{grid-template-columns:1fr}
  .incl li:nth-child(odd){border-right:0}
  .incl li:nth-child(even){padding-left:0}
  .row2{grid-template-columns:1fr}
  .case-facts > div{grid-column:1 / -1!important}
  .board{padding-inline:16px;padding-top:44px}
  .board .phone{width:34%;right:4%}
  .cmp-tag{top:8px;padding:6px 8px;font-size:.6rem}
  .cmp-tag.b{left:8px}.cmp-tag.a{right:8px}
  .footer .grid > .f-contact{grid-column:1 / -1!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .grain{animation:none}
  .js .rv:not(.in){transform:none;opacity:1}
}

.board .browser.whole{margin-bottom:0;border-radius:7px}

/* ---------- Collective orbit ---------- */
.coll-grid{align-items:center;row-gap:48px}
.coll-viz{grid-column:1 / span 7}
.orbit{width:100%;max-width:620px;aspect-ratio:1;margin-inline:auto;overflow:visible}
.orbit .node{transform:translate(calc(var(--x) * 1.14px),calc(var(--y) * 1.14px));transition:transform 2.6s var(--ease-out)}
.orbit.in .node{transform:translate(calc(var(--x) * 1px),calc(var(--y) * 1px))}
.orbit .spoke{opacity:.25;transition:opacity 2.4s var(--ease) .9s}
.orbit.in .spoke{opacity:1}
.orbit .core{transform:scale(.75);transition:transform 2s var(--ease-out) .3s}
.orbit.in .core{transform:none}
.legend{grid-column:9 / -1;display:flex;flex-direction:column;gap:28px}
.legend > div{border-top:1px solid var(--rule-dark);padding-top:18px}
.legend h3{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.legend p{color:var(--on-dark-2);font-size:.98em}
.legend .k{width:10px;height:10px;border-radius:50%;background:var(--bone);flex:none}
.legend .k.o{background:none;border:1.2px solid var(--bone)}
.legend .k.e{background:var(--ember);box-shadow:0 0 0 5px rgba(198,90,56,.18)}
@media (max-width:960px){.coll-viz,.legend{grid-column:1 / -1!important}.orbit{max-width:440px}}
.orbit .node.new .ring{transform-box:fill-box;transform-origin:center;animation:ringpulse 3.2s var(--ease) infinite}
@keyframes ringpulse{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(3);opacity:0}}
.legend .display{margin-bottom:6px}
.form .display{margin-bottom:4px}

.price.quote{flex-direction:column;align-items:flex-start;gap:6px}
.price.quote b{font-size:clamp(1.7rem,2.4vw,2.4rem);line-height:1.05}
.price-strip .price.quote b{font-size:clamp(1.5rem,2vw,2rem)}

/* ===== Shared trade mockups (also used in the outreach deck) ===== */
/* ---------- Northfield Comfort Co. — HVAC (Phoenix) ---------- */
.mk-hvac{background:#f6f8fa;color:#0d2b45;font-family:"Manrope",Arial,sans-serif}
.mk-hvac .h-util{display:flex;justify-content:space-between;background:#0d2b45;color:#cfe3f2;font:600 calc(var(--px)*13)/1 "Manrope",Arial,sans-serif;padding:calc(var(--px)*11) calc(var(--px)*56)}
.mk-hvac .h-util b{color:#ffb070}
.mk-hvac .h-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--px)*20) calc(var(--px)*56);background:#fff;border-bottom:1px solid #e3e9ef}
.mk-hvac .h-logo{display:flex;align-items:center;gap:calc(var(--px)*10);font:800 calc(var(--px)*21)/1 "Manrope",Arial,sans-serif;letter-spacing:-.02em}
.mk-hvac .h-logo i{width:calc(var(--px)*30);height:calc(var(--px)*30);border-radius:50%;background:conic-gradient(#2a9fd6 0 50%,#ff7a3d 50% 100%);display:block}
.mk-hvac .h-links{display:flex;gap:calc(var(--px)*28);font:600 calc(var(--px)*14) "Manrope",Arial,sans-serif;color:#3d5a73}
.mk-hvac .h-btn{display:inline-block;font:700 calc(var(--px)*14)/1 "Manrope",Arial,sans-serif;padding:calc(var(--px)*13) calc(var(--px)*20);border-radius:calc(var(--px)*999);white-space:nowrap;background:#ff7a3d;color:#fff}
.mk-hvac .h-btn.dk{background:#0d2b45}
.mk-hvac .h-btn.ln{background:transparent;color:#0d2b45;box-shadow:inset 0 0 0 calc(var(--px)*1.5) #b7c7d6}
.mk-hvac .h-hero{display:grid;grid-template-columns:1.12fr .88fr;gap:calc(var(--px)*44);padding:calc(var(--px)*40) calc(var(--px)*56) 0;position:relative}
.mk-hvac .h-eye{display:inline-flex;align-items:center;gap:calc(var(--px)*8);font:700 calc(var(--px)*12)/1 "Manrope",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#2a9fd6}
.mk-hvac .h-eye::before{content:"";width:calc(var(--px)*8);height:calc(var(--px)*8);border-radius:50%;background:#2ecc71}
.mk-hvac h4{font:800 calc(var(--px)*68)/.98 "Manrope",Arial,sans-serif;letter-spacing:-.04em;margin-top:calc(var(--px)*16)}
.mk-hvac h4 em{font-style:normal;color:#ff7a3d}
.mk-hvac .h-p{font:500 calc(var(--px)*17)/1.55 "Manrope",Arial,sans-serif;color:#4b6378;max-width:calc(var(--px)*460);margin-top:calc(var(--px)*18)}
.mk-hvac .h-ctas{display:flex;gap:calc(var(--px)*10);margin-top:calc(var(--px)*26)}
.mk-hvac .h-trust{display:flex;gap:calc(var(--px)*26);margin-top:calc(var(--px)*26);font:600 calc(var(--px)*13) "Manrope",Arial,sans-serif;color:#3d5a73}
.mk-hvac .h-trust b{display:block;font:800 calc(var(--px)*22)/1 "Manrope",Arial,sans-serif;color:#0d2b45;margin-bottom:calc(var(--px)*4)}
.mk-hvac .h-card{position:relative;background:#fff;border-radius:calc(var(--px)*18);padding:calc(var(--px)*26);box-shadow:0 calc(var(--px)*24) calc(var(--px)*50) calc(var(--px)*-20) rgba(13,43,69,.3);z-index:1}
.mk-hvac .h-card b{display:block;font:800 calc(var(--px)*19) "Manrope",Arial,sans-serif}
.mk-hvac .h-card small{display:block;font:600 calc(var(--px)*12) "Manrope",Arial,sans-serif;color:#6b8296;margin:calc(var(--px)*14) 0 calc(var(--px)*8)}
.mk-hvac .h-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--px)*8)}
.mk-hvac .h-opts span{border:1px solid #dbe4ec;border-radius:calc(var(--px)*10);padding:calc(var(--px)*12) calc(var(--px)*6);text-align:center;font:700 calc(var(--px)*13) "Manrope",Arial,sans-serif}
.mk-hvac .h-opts span i{display:block;font-style:normal;font-size:calc(var(--px)*20);margin-bottom:calc(var(--px)*4)}
.mk-hvac .on{border-color:#2a9fd6!important;background:#eaf6fc;color:#0d2b45}
.mk-hvac .h-times{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--px)*8)}
.mk-hvac .h-times span{background:#f1f5f8;border-radius:calc(var(--px)*10);padding:calc(var(--px)*11);text-align:center;font:700 calc(var(--px)*13) "Manrope",Arial,sans-serif;border:1px solid transparent}
.mk-hvac .h-go{margin-top:calc(var(--px)*14);background:#0d2b45;color:#fff;text-align:center;border-radius:calc(var(--px)*999);padding:calc(var(--px)*14);font:700 calc(var(--px)*15) "Manrope",Arial,sans-serif}
.mk-hvac .h-dial{position:absolute;right:calc(var(--px)*-30);top:calc(var(--px)*-24);width:calc(var(--px)*200);height:calc(var(--px)*200);border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 52%,transparent 53%),conic-gradient(from 210deg,#2a9fd6 0 120deg,#ff7a3d 120deg 300deg,transparent 300deg);opacity:.9}
.mk-hvac .h-svc{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:#0d2b45;color:#fff}
.mk-hvac .h-svc span{padding:calc(var(--px)*18) calc(var(--px)*28);font:700 calc(var(--px)*15) "Manrope",Arial,sans-serif;border-right:1px solid rgba(255,255,255,.1)}
.mk-hvac .h-svc small{display:block;font:500 calc(var(--px)*12) "Manrope",Arial,sans-serif;color:#9fbad0;margin-top:calc(var(--px)*3)}
.phone .mk-hvac .h-util{padding:calc(var(--px)*50) calc(var(--px)*18) calc(var(--px)*10);justify-content:center}
.phone .mk-hvac .h-util span:last-child,.phone .mk-hvac .h-links,.phone .mk-hvac .h-nav .h-btn,.phone .mk-hvac .h-svc,.phone .mk-hvac .h-dial,.phone .mk-hvac .h-trust{display:none}
.phone .mk-hvac .h-nav{padding:calc(var(--px)*14) calc(var(--px)*18)}
.phone .mk-hvac .h-nav::after{content:"";width:calc(var(--px)*22);height:calc(var(--px)*10);border-block:calc(var(--px)*2) solid currentColor}
.phone .mk-hvac .h-hero{grid-template-columns:1fr;gap:calc(var(--px)*20);padding:calc(var(--px)*22) calc(var(--px)*18) 0}
.phone .mk-hvac h4{font-size:calc(var(--px)*44)}
.phone .mk-hvac .h-p{font-size:calc(var(--px)*15)}
.phone .mk-hvac .h-ctas{flex-direction:column}
.phone .mk-hvac .h-ctas .h-btn{text-align:center;padding:calc(var(--px)*16)}
.phone .mk-hvac .h-card{padding:calc(var(--px)*18)}

/* ---------- Halvorsen Roofing — roofing (Tampa Bay) ---------- */
.mk-roof{background:#1d2629;color:#efe9df;font-family:"Bricolage Grotesque",Arial,sans-serif}
.mk-roof .r-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--px)*24) calc(var(--px)*56);border-bottom:1px solid rgba(239,233,223,.1)}
.mk-roof .r-logo{font:800 calc(var(--px)*22)/1 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.01em;display:flex;align-items:center;gap:calc(var(--px)*10)}
.mk-roof .r-logo svg{width:calc(var(--px)*34);height:calc(var(--px)*24)}
.mk-roof .r-links{display:flex;gap:calc(var(--px)*30);font:500 calc(var(--px)*14) "Bricolage Grotesque",Arial,sans-serif;color:rgba(239,233,223,.75)}
.mk-roof .r-call{font:700 calc(var(--px)*15) "Bricolage Grotesque",Arial,sans-serif;display:flex;align-items:center;gap:calc(var(--px)*16)}
.mk-roof .r-btn{display:inline-block;font:700 calc(var(--px)*14)/1 "Bricolage Grotesque",Arial,sans-serif;padding:calc(var(--px)*14) calc(var(--px)*20);background:#d9904a;color:#1d2629;white-space:nowrap}
.mk-roof .r-btn.ln{background:transparent;color:#efe9df;box-shadow:inset 0 0 0 calc(var(--px)*1.5) rgba(239,233,223,.45)}
.mk-roof .r-btn.big{font-size:calc(var(--px)*16);padding:calc(var(--px)*18) calc(var(--px)*24)}
.mk-roof .r-hero{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--px)*20);padding:calc(var(--px)*44) calc(var(--px)*56) 0}
.mk-roof .r-badge{display:inline-block;border:1px solid #d9904a;color:#d9904a;font:600 calc(var(--px)*12)/1 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:calc(var(--px)*8) calc(var(--px)*12)}
.mk-roof h4{font:800 calc(var(--px)*70)/.94 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.035em;margin-top:calc(var(--px)*18);font-stretch:90%}
.mk-roof h4 em{font-style:normal;color:#d9904a}
.mk-roof .r-p{font:400 calc(var(--px)*17)/1.55 "Bricolage Grotesque",Arial,sans-serif;color:rgba(239,233,223,.75);max-width:calc(var(--px)*460);margin-top:calc(var(--px)*18)}
.mk-roof .r-ctas{display:flex;gap:calc(var(--px)*10);margin-top:calc(var(--px)*26)}
.mk-roof .r-art{position:relative}
.mk-roof .r-art svg{width:100%;height:auto;display:block}
.mk-roof .r-tag{position:absolute;left:calc(var(--px)*10);bottom:calc(var(--px)*40);background:#efe9df;color:#1d2629;padding:calc(var(--px)*16) calc(var(--px)*18);font:600 calc(var(--px)*13)/1.35 "Bricolage Grotesque",Arial,sans-serif;max-width:calc(var(--px)*230)}
.mk-roof .r-tag b{display:block;font:800 calc(var(--px)*26)/1 "Bricolage Grotesque",Arial,sans-serif;color:#b8682a;margin-bottom:calc(var(--px)*4)}
.mk-roof .r-stats{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:#efe9df;color:#1d2629}
.mk-roof .r-stats span{padding:calc(var(--px)*18) calc(var(--px)*28);font:500 calc(var(--px)*13) "Bricolage Grotesque",Arial,sans-serif;color:#4f5a5c;border-right:1px solid rgba(29,38,41,.1)}
.mk-roof .r-stats b{display:block;font:800 calc(var(--px)*24)/1 "Bricolage Grotesque",Arial,sans-serif;color:#1d2629;margin-bottom:calc(var(--px)*4)}
.phone .mk-roof .r-nav{padding:calc(var(--px)*54) calc(var(--px)*18) calc(var(--px)*16)}
.phone .mk-roof .r-links,.phone .mk-roof .r-call,.phone .mk-roof .r-stats,.phone .mk-roof .r-tag{display:none}
.phone .mk-roof .r-nav::after{content:"";width:calc(var(--px)*22);height:calc(var(--px)*10);border-block:calc(var(--px)*2) solid currentColor}
.phone .mk-roof .r-hero{grid-template-columns:1fr;padding:calc(var(--px)*22) calc(var(--px)*18) 0}
.phone .mk-roof h4{font-size:calc(var(--px)*46)}
.phone .mk-roof .r-p{font-size:calc(var(--px)*15)}
.phone .mk-roof .r-ctas{flex-direction:column}
.phone .mk-roof .r-ctas .r-btn{text-align:center}
.phone .mk-roof .r-art{margin-top:calc(var(--px)*22)}

/* ---------- Oak & Iron Remodeling — remodeling (New Jersey) ---------- */
.mk-remo{background:#f1ebe0;color:#24342a;font-family:"Manrope",Arial,sans-serif}
.mk-remo .m-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--px)*26) calc(var(--px)*56)}
.mk-remo .m-logo{font:400 calc(var(--px)*26)/1 "DM Serif Display",Georgia,serif;letter-spacing:-.01em}
.mk-remo .m-logo em{font-style:italic;color:#9a6b3f}
.mk-remo .m-links{display:flex;gap:calc(var(--px)*30);font:600 calc(var(--px)*14) "Manrope",Arial,sans-serif;color:#4c5a50}
.mk-remo .m-btn{display:inline-block;font:700 calc(var(--px)*14)/1 "Manrope",Arial,sans-serif;padding:calc(var(--px)*14) calc(var(--px)*22);background:#24342a;color:#f1ebe0;white-space:nowrap}
.mk-remo .m-btn.ln{background:transparent;color:#24342a;box-shadow:inset 0 0 0 calc(var(--px)*1.5) #24342a}
.mk-remo .m-hero{display:grid;grid-template-columns:.95fr 1.05fr;gap:calc(var(--px)*48);padding:calc(var(--px)*26) calc(var(--px)*56) 0}
.mk-remo .m-eye{font:700 calc(var(--px)*12) "Manrope",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#9a6b3f}
.mk-remo h4{font:400 calc(var(--px)*70)/.98 "DM Serif Display",Georgia,serif;letter-spacing:-.02em;margin-top:calc(var(--px)*16)}
.mk-remo h4 em{font-style:italic;color:#9a6b3f}
.mk-remo .m-p{font:500 calc(var(--px)*17)/1.6 "Manrope",Arial,sans-serif;color:#4c5a50;max-width:calc(var(--px)*430);margin-top:calc(var(--px)*18)}
.mk-remo .m-ctas{display:flex;gap:calc(var(--px)*10);margin-top:calc(var(--px)*26)}
.mk-remo .m-steps{display:flex;gap:calc(var(--px)*22);margin-top:calc(var(--px)*30);font:600 calc(var(--px)*13) "Manrope",Arial,sans-serif;color:#4c5a50}
.mk-remo .m-steps span b{display:block;font:400 calc(var(--px)*22)/1 "DM Serif Display",Georgia,serif;color:#9a6b3f;margin-bottom:calc(var(--px)*4)}
.mk-remo .m-gal{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--px)*12);height:calc(var(--px)*470)}
.mk-remo .m-tile{position:relative;background:#e4dccd;overflow:hidden}
.mk-remo .m-tile:first-child{grid-row:span 2;background:#24342a}
.mk-remo .m-tile svg{position:absolute;inset:0;width:100%;height:100%}
.mk-remo .m-tile span{position:absolute;left:calc(var(--px)*14);bottom:calc(var(--px)*12);font:700 calc(var(--px)*11) "Manrope",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:#f1ebe0;color:#24342a;padding:calc(var(--px)*6) calc(var(--px)*9)}
.phone .mk-remo .m-nav{padding:calc(var(--px)*54) calc(var(--px)*18) calc(var(--px)*12)}
.phone .mk-remo .m-links,.phone .mk-remo .m-nav .m-btn,.phone .mk-remo .m-steps{display:none}
.phone .mk-remo .m-nav::after{content:"";width:calc(var(--px)*22);height:calc(var(--px)*10);border-block:calc(var(--px)*2) solid currentColor}
.phone .mk-remo .m-hero{grid-template-columns:1fr;gap:calc(var(--px)*20);padding:calc(var(--px)*18) calc(var(--px)*18) 0}
.phone .mk-remo h4{font-size:calc(var(--px)*46)}
.phone .mk-remo .m-p{font-size:calc(var(--px)*15)}
.phone .mk-remo .m-ctas{flex-direction:column}
.phone .mk-remo .m-ctas .m-btn{text-align:center}
.phone .mk-remo .m-gal{height:calc(var(--px)*300)}

/* ================= Photo-led versions ================= */
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* HVAC */
.mk-hvac .h-hero.photo{position:absolute;left:0;right:0;top:calc(var(--px)*108);bottom:calc(var(--px)*66);display:grid;grid-template-columns:1.12fr .88fr;gap:calc(var(--px)*44);padding:calc(var(--px)*48) calc(var(--px)*56) 0;color:#fff;overflow:hidden}
.mk-hvac .h-hero.photo .ph-img{object-position:62% 40%}
.mk-hvac .h-hero.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,22,38,.94) 0%,rgba(7,22,38,.82) 38%,rgba(7,22,38,.25) 66%,rgba(7,22,38,.15) 100%)}
.mk-hvac .h-hero.photo > *{position:relative}
.mk-hvac .h-hero.photo .h-eye{color:#8fd1f2}
.mk-hvac .h-hero.photo h4{color:#fff}
.mk-hvac .h-hero.photo .h-p{color:rgba(255,255,255,.82)}
.mk-hvac .h-hero.photo .h-btn.ln{color:#fff;box-shadow:inset 0 0 0 calc(var(--px)*1.5) rgba(255,255,255,.55)}
.mk-hvac .h-hero.photo .h-trust{color:rgba(255,255,255,.75)}
.mk-hvac .h-hero.photo .h-trust b{color:#fff}
.mk-hvac .h-hero.photo .h-card{margin-top:calc(var(--px)*6);margin-left:auto;width:calc(var(--px)*380)}
.phone .mk-hvac .h-hero.photo{position:relative;top:auto;bottom:auto;grid-template-columns:1fr;padding:calc(var(--px)*26) calc(var(--px)*18) calc(var(--px)*24)}
.phone .mk-hvac .h-hero.photo::before{background:linear-gradient(180deg,rgba(7,22,38,.55) 0%,rgba(7,22,38,.92) 60%)}
.phone .mk-hvac .h-hero.photo .h-card{width:auto;margin:0}
.phone .mk-hvac .h-hero.photo .ph-img{object-position:60% 30%}

/* Roofing */
.mk-roof .r-hero.photo{position:absolute;left:0;right:0;top:calc(var(--px)*83);bottom:calc(var(--px)*76);display:block;padding:calc(var(--px)*56) calc(var(--px)*56) 0;overflow:hidden}
.mk-roof .r-hero.photo .ph-img{object-position:50% 45%}
.mk-roof .r-hero.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,30,33,.96) 0%,rgba(22,30,33,.86) 36%,rgba(22,30,33,.2) 70%,rgba(22,30,33,.05) 100%)}
.mk-roof .r-hero.photo > *{position:relative}
.mk-roof .r-hero.photo .r-copy{max-width:calc(var(--px)*560)}
.mk-roof .r-hero.photo .r-tag{position:absolute;left:auto;right:calc(var(--px)*56);top:calc(var(--px)*56);bottom:auto}
.phone .mk-roof .r-hero.photo{position:relative;top:auto;bottom:auto;padding:calc(var(--px)*26) calc(var(--px)*18) calc(var(--px)*30)}
.phone .mk-roof .r-hero.photo::before{background:linear-gradient(180deg,rgba(22,30,33,.6) 0%,rgba(22,30,33,.94) 55%)}
.phone .mk-roof .r-hero.photo .r-tag{display:none}

/* Plumbing (deck version) */
.mk-plumb .mk-hero.photo .mk-cards{position:relative;height:calc(var(--px)*430)}
.mk-plumb .mk-photo{position:absolute;left:calc(var(--px)*30);right:0;top:0;bottom:calc(var(--px)*40);border-radius:calc(var(--px)*14);overflow:hidden}
.mk-plumb .mk-hero.photo .mk-stat{position:absolute;left:calc(var(--px)*-10);top:calc(var(--px)*36);width:calc(var(--px)*230);padding:calc(var(--px)*20) calc(var(--px)*22);margin:0}
.mk-plumb .mk-hero.photo .mk-stat b{font-size:calc(var(--px)*56)}
.mk-plumb .mk-hero.photo .mk-stat p{font-size:calc(var(--px)*12)}
.mk-plumb .mk-hero.photo .mk-quote{position:absolute;right:calc(var(--px)*24);bottom:0;width:calc(var(--px)*330);margin:0}
.phone .mk-plumb .mk-hero.photo .mk-cards{height:calc(var(--px)*300)}
.phone .mk-plumb .mk-hero.photo .mk-photo{left:0;bottom:0}
.phone .mk-plumb .mk-hero.photo .mk-stat,.phone .mk-plumb .mk-hero.photo .mk-quote{display:none}

/* Remodeling */
.mk-remo .m-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-remo .m-tile:first-child{background:#ddd}

.mk-hvac .h-hero.photo > .ph-img,.mk-roof .r-hero.photo > .ph-img{position:absolute}
.mk-hvac .h-hero.photo > .ph-img,.mk-roof .r-hero.photo > .ph-img{z-index:0}
.mk-hvac .h-hero.photo::before,.mk-roof .r-hero.photo::before{z-index:1}
.mk-hvac .h-hero.photo > :not(.ph-img),.mk-roof .r-hero.photo > :not(.ph-img){z-index:2}
.mk-hvac .h-hero.photo .h-card{color:#0d2b45}

/* ---------- Solenne Skin Studio — med spa (Scottsdale) ---------- */
.mk-spa{background:#f3ece2;color:#3a2b23;font-family:"Manrope",Arial,sans-serif}
.mk-spa .s-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--px)*26) calc(var(--px)*56)}
.mk-spa .s-logo{font:300 calc(var(--px)*26)/1 "Fraunces",Georgia,serif;letter-spacing:.18em;text-transform:uppercase}
.mk-spa .s-logo small{display:block;font:600 calc(var(--px)*9)/1 "Manrope",Arial,sans-serif;letter-spacing:.42em;margin-top:calc(var(--px)*6);color:#8b6f5c}
.mk-spa .s-links{display:flex;gap:calc(var(--px)*32);font:500 calc(var(--px)*14) "Manrope",Arial,sans-serif;color:#6b5547}
.mk-spa .s-btn{display:inline-block;font:600 calc(var(--px)*13)/1 "Manrope",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:calc(var(--px)*15) calc(var(--px)*22);background:#3a2b23;color:#f3ece2;white-space:nowrap}
.mk-spa .s-btn.ln{background:transparent;color:#3a2b23;box-shadow:inset 0 0 0 calc(var(--px)*1) #3a2b23}
.mk-spa .s-hero{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--px)*56);padding:calc(var(--px)*14) calc(var(--px)*56) 0}
.mk-spa .s-eye{font:600 calc(var(--px)*11) "Manrope",Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#8b6f5c}
.mk-spa h4{font:300 calc(var(--px)*76)/1 "Fraunces",Georgia,serif;letter-spacing:-.025em;margin-top:calc(var(--px)*22)}
.mk-spa h4 em{font-style:italic;color:#9a6b4f}
.mk-spa .s-p{font:400 calc(var(--px)*17)/1.65 "Manrope",Arial,sans-serif;color:#6b5547;max-width:calc(var(--px)*430);margin-top:calc(var(--px)*22)}
.mk-spa .s-ctas{display:flex;gap:calc(var(--px)*10);margin-top:calc(var(--px)*30)}
.mk-spa .s-menu{display:flex;flex-direction:column;margin-top:calc(var(--px)*34);border-top:1px solid rgba(58,43,35,.18);max-width:calc(var(--px)*440)}
.mk-spa .s-menu span{display:flex;justify-content:space-between;padding:calc(var(--px)*11) 0;border-bottom:1px solid rgba(58,43,35,.12);font:500 calc(var(--px)*14) "Manrope",Arial,sans-serif}
.mk-spa .s-menu span i{font-style:normal;color:#8b6f5c}
.mk-spa .s-pics{position:relative;height:calc(var(--px)*560)}
.mk-spa .s-pic{position:absolute;overflow:hidden}
.mk-spa .s-pic img{width:100%;height:100%;object-fit:cover;display:block}
.mk-spa .s-pic.a{left:0;top:0;width:62%;height:100%;border-radius:calc(var(--px)*240) calc(var(--px)*240) 0 0}
.mk-spa .s-pic.b{right:0;bottom:calc(var(--px)*40);width:44%;height:52%}
.mk-spa .s-badge{position:absolute;right:calc(var(--px)*24);top:calc(var(--px)*40);width:calc(var(--px)*120);height:calc(var(--px)*120);border-radius:50%;background:#3a2b23;color:#f3ece2;display:grid;place-items:center;text-align:center;font:300 calc(var(--px)*15)/1.25 "Fraunces",Georgia,serif;font-style:italic}
.phone .mk-spa .s-nav{padding:calc(var(--px)*56) calc(var(--px)*20) calc(var(--px)*12)}
.phone .mk-spa .s-links,.phone .mk-spa .s-nav .s-btn,.phone .mk-spa .s-menu,.phone .mk-spa .s-pic.b,.phone .mk-spa .s-badge{display:none}
.phone .mk-spa .s-nav::after{content:"";width:calc(var(--px)*22);height:calc(var(--px)*10);border-block:calc(var(--px)*2) solid currentColor}
.phone .mk-spa .s-hero{grid-template-columns:1fr;gap:calc(var(--px)*22);padding:calc(var(--px)*16) calc(var(--px)*20) 0}
.phone .mk-spa h4{font-size:calc(var(--px)*46)}
.phone .mk-spa .s-p{font-size:calc(var(--px)*15)}
.phone .mk-spa .s-ctas{flex-direction:column}
.phone .mk-spa .s-ctas .s-btn{text-align:center}
.phone .mk-spa .s-pics{height:calc(var(--px)*320)}
.phone .mk-spa .s-pic.a{width:100%;border-radius:calc(var(--px)*160) calc(var(--px)*160) 0 0}
.board .phone{z-index:5;bottom:-16%}
.board .browser .mock{isolation:isolate}

/* ---------- Arc Reformer Studio — boutique fitness (Austin) ---------- */
.mk-fit{background:#0f0f0e;color:#f4f1ea;font-family:"Manrope",Arial,sans-serif}
.mk-fit .f-hero{position:absolute;inset:0 0 calc(var(--px)*110) 0;overflow:hidden}
.mk-fit .f-hero .ph-img{object-position:60% 55%;filter:grayscale(1) contrast(1.05)}
.mk-fit .f-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,9,.9) 0%,rgba(10,10,9,.6) 42%,rgba(10,10,9,.1) 75%),linear-gradient(180deg,rgba(10,10,9,.55) 0%,rgba(10,10,9,0) 25%)}
.mk-fit .f-nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--px)*26) calc(var(--px)*56)}
.mk-fit .f-logo{font:800 calc(var(--px)*22)/1 "Manrope",Arial,sans-serif;letter-spacing:.32em}
.mk-fit .f-logo i{font-style:normal;color:#c9b38a}
.mk-fit .f-links{display:flex;gap:calc(var(--px)*30);font:500 calc(var(--px)*14) "Manrope",Arial,sans-serif;color:rgba(244,241,234,.8)}
.mk-fit .f-btn{display:inline-block;font:700 calc(var(--px)*13)/1 "Manrope",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:calc(var(--px)*15) calc(var(--px)*22);background:#f4f1ea;color:#0f0f0e;white-space:nowrap;border-radius:999px}
.mk-fit .f-btn.ln{background:transparent;color:#f4f1ea;box-shadow:inset 0 0 0 calc(var(--px)*1.5) rgba(244,241,234,.6)}
.mk-fit .f-body{position:relative;z-index:3;display:grid;grid-template-columns:1.15fr .85fr;gap:calc(var(--px)*40);padding:calc(var(--px)*36) calc(var(--px)*56) 0}
.mk-fit .f-eye{font:700 calc(var(--px)*11) "Manrope",Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#c9b38a}
.mk-fit h4{font:800 calc(var(--px)*92)/.9 "Manrope",Arial,sans-serif;letter-spacing:-.05em;margin-top:calc(var(--px)*18);text-transform:uppercase}
.mk-fit h4 em{font-style:normal;color:transparent;-webkit-text-stroke:calc(var(--px)*1.5) #f4f1ea}
.mk-fit .f-p{font:400 calc(var(--px)*17)/1.6 "Manrope",Arial,sans-serif;color:rgba(244,241,234,.78);max-width:calc(var(--px)*430);margin-top:calc(var(--px)*20)}
.mk-fit .f-ctas{display:flex;gap:calc(var(--px)*10);margin-top:calc(var(--px)*28)}
.mk-fit .f-sched{background:rgba(15,15,14,.78);border:1px solid rgba(244,241,234,.18);padding:calc(var(--px)*22) calc(var(--px)*24);align-self:start;margin-top:calc(var(--px)*30);margin-left:auto;width:calc(var(--px)*360);backdrop-filter:blur(6px)}
.mk-fit .f-sched b{display:flex;justify-content:space-between;font:700 calc(var(--px)*13) "Manrope",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-bottom:calc(var(--px)*10)}
.mk-fit .f-sched b span{color:#c9b38a}
.mk-fit .f-row{display:grid;grid-template-columns:calc(var(--px)*72) 1fr auto;gap:calc(var(--px)*12);align-items:center;padding:calc(var(--px)*11) 0;border-top:1px solid rgba(244,241,234,.12);font:500 calc(var(--px)*14) "Manrope",Arial,sans-serif}
.mk-fit .f-row small{display:block;font-size:calc(var(--px)*12);color:rgba(244,241,234,.55);margin-top:calc(var(--px)*2)}
.mk-fit .f-row i{font-style:normal;font-size:calc(var(--px)*12);font-weight:700;color:#0f0f0e;background:#c9b38a;border-radius:999px;padding:calc(var(--px)*6) calc(var(--px)*10)}
.mk-fit .f-row i.full{background:transparent;color:rgba(244,241,234,.45);box-shadow:inset 0 0 0 1px rgba(244,241,234,.25)}
.mk-fit .f-strip{position:absolute;left:0;right:0;bottom:0;height:calc(var(--px)*110);display:grid;grid-template-columns:1fr 1fr 1fr;background:#f4f1ea;color:#0f0f0e}
.mk-fit .f-strip > div{display:flex;flex-direction:column;justify-content:center;padding:0 calc(var(--px)*36);border-right:1px solid rgba(15,15,14,.1)}
.mk-fit .f-strip b{font:800 calc(var(--px)*26)/1 "Manrope",Arial,sans-serif;letter-spacing:-.02em}
.mk-fit .f-strip small{font:500 calc(var(--px)*13) "Manrope",Arial,sans-serif;color:#55534e;margin-top:calc(var(--px)*6)}
.mk-fit .f-strip .ph{position:relative;padding:0;overflow:hidden}
.phone .mk-fit .f-hero{position:relative;inset:auto;height:auto;min-height:100%}
.phone .mk-fit .f-hero::before{background:linear-gradient(180deg,rgba(10,10,9,.55) 0%,rgba(10,10,9,.92) 58%)}
.phone .mk-fit .f-nav{padding:calc(var(--px)*56) calc(var(--px)*20) calc(var(--px)*12)}
.phone .mk-fit .f-links,.phone .mk-fit .f-nav .f-btn,.phone .mk-fit .f-strip{display:none}
.phone .mk-fit .f-nav::after{content:"";width:calc(var(--px)*22);height:calc(var(--px)*10);border-block:calc(var(--px)*2) solid currentColor}
.phone .mk-fit .f-body{grid-template-columns:1fr;gap:0;padding:calc(var(--px)*30) calc(var(--px)*20) calc(var(--px)*30)}
.phone .mk-fit h4{font-size:calc(var(--px)*58)}
.phone .mk-fit .f-p{font-size:calc(var(--px)*15)}
.phone .mk-fit .f-ctas{flex-direction:column}
.phone .mk-fit .f-ctas .f-btn{text-align:center}
.phone .mk-fit .f-sched{width:auto;margin:calc(var(--px)*24) 0 0}