/* ==========================================================================
   Delhi Web Designer — inner pages
   About · Services · Service detail · Portfolio · Case study · Journal · Article · Contact · Quote · Legal · 404
   ========================================================================== */

/* ---------- Shared inner components ---------- */
.cards3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,1rem + 2vw,2.6rem)}
.cards3 .wcard__img{--ar:789/620}
.pcard{display:block}
.pcard__img{overflow:hidden;border-radius:4px;aspect-ratio:16/9;background:var(--sand);margin-bottom:1rem}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.04)}
.pcard :where(h3:not(.hx),.hx-h3):not(template){font-size:1.15rem;line-height:1.3;letter-spacing:-.015em;margin-top:.5rem;transition:color .25s}
.pcard:hover :where(h3:not(.hx),.hx-h3):not(template){color:var(--cobalt-deep)}
.svc-card{background:var(--paper);border-radius:4px;box-shadow:0 0 0 1px var(--line);padding:1.4rem;display:grid;gap:.15rem}
.svc-card b{font-family:var(--f-display);font-size:1.1rem;letter-spacing:-.015em}
.svc-card p{font-size:.92rem;color:var(--slate);margin:.4rem 0 .8rem}
.svc-card a{display:flex;justify-content:space-between;padding:.65rem 0;border-top:1px solid var(--line);font-family:var(--f-display);font-weight:700;font-size:.95rem;transition:color .2s}
.svc-card a:hover{color:var(--cobalt-deep)}
.readlist{list-style:none;border-top:1px solid var(--line-strong);margin-top:1.2rem}
.readlist li{border-bottom:1px solid var(--line-strong)}
.readlist a{display:flex;align-items:center;gap:1.2rem;padding:1.1rem 0;transition:color .25s,padding .45s var(--ease)}
.readlist a b{flex:1;font-family:var(--f-display);font-size:var(--t-md);letter-spacing:-.02em;line-height:1.3}
.readlist a .arr{width:16px;height:16px;flex:none}
.readlist a:hover{color:var(--cobalt-deep);padding-left:.5rem}
.readlist--compact a{justify-content:space-between;padding:.75rem 0;font-family:var(--f-display);font-weight:600;font-size:.98rem}
.readlist--cols{columns:2 220px;column-gap:2rem;border-top:0}
.readlist--cols li{break-inside:avoid;border-bottom:1px solid var(--line)}

/* ---------- FAQ ---------- */
.faq__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,6rem)}
.faq :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-2xl);margin-top:1rem}
.faq__list{border-top:1px solid var(--line-strong)}
.faq__item{border-bottom:1px solid var(--line-strong)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.3rem 0;font-family:var(--f-display);font-weight:700;font-size:var(--t-md);letter-spacing:-.015em;line-height:1.3}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:background .3s,box-shadow .3s}
.faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:currentColor;transition:transform .35s var(--ease)}
.faq__item summary i::after{transform:rotate(90deg)}
.faq__item[open] summary i{background:var(--cobalt);color:var(--ink);box-shadow:none}
.faq__item[open] summary i::after{transform:rotate(0)}
.faq__item summary:hover{color:var(--cobalt-deep)}
.faq__a{padding:0 3rem 1.4rem 0;color:var(--slate)}
.faq__a a{color:var(--link);text-decoration:underline;text-underline-offset:.2em}

/* ======================= ABOUT ======================= */
.about__heroin{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr);gap:clamp(2rem,6vw,7rem);align-items:end}
.about__portrait{justify-self:end;width:100%;max-width:300px}
.about__pframe{position:relative;aspect-ratio:280/358;border-radius:4px;overflow:hidden;background:#1E2650}
.about__pframe::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.about__pframe img{width:100%;height:100%;object-fit:cover}
.about__portrait::before{content:"";position:absolute;width:52px;height:52px;border-radius:50%;background:var(--cobalt);transform:translate(-40%,-40%);z-index:2}
.about__portrait{position:relative}
.about__portrait figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;font-size:.85rem;color:var(--slate)}
.about__portrait figcaption b{font-family:var(--f-display);color:var(--ink)}
.about__letterin{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.about__side{position:sticky;top:calc(var(--hdr) + 2rem)}
.about__facts{margin:1.6rem 0 0;border-top:1px solid var(--ink)}
.about__facts div{display:grid;gap:.2rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.about__facts dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--f-display);font-weight:700}
.about__facts dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.about__prose{max-width:62ch;font-size:clamp(1.08rem,1rem + .35vw,1.25rem)}
.about__drop::first-letter{float:left;font-family:var(--f-serif);font-style:italic;font-size:4.6em;line-height:.82;margin:.06em .12em 0 0;color:var(--cobalt)}
.about__sign{font-size:2.2rem;margin-top:2rem!important;color:var(--ink)}
.ledger{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink-3)}
.ledger li{padding:2rem 2rem 2.4rem 0;border-bottom:1px solid var(--ink-3)}
.ledger li:not(:nth-child(3n+1)){padding-left:2rem;border-left:1px solid var(--ink-3)}
.ledger .num{color:var(--champagne);font-size:.8rem}
.ledger :where(h3:not(.hx),.hx-h3):not(template){font-size:var(--t-lg);margin:1rem 0 .7rem;letter-spacing:-.03em}
.ledger p{color:var(--mist);margin:0;font-size:.98rem}
.about__stackin{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.about__stackin :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-2xl);margin-top:1rem}
.about__tools{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.about__tools li{padding:.7rem 1.1rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);font-family:var(--f-display);font-weight:600;transition:background .3s,color .3s}
.about__tools li:hover{background:var(--ink);color:var(--ivory)}
.about__net{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.about__netcard{display:grid;gap:.4rem;align-content:start;padding:1.5rem;min-height:190px;background:var(--paper);box-shadow:0 0 0 1px var(--line);border-radius:4px;transition:background .35s,color .35s,transform .5s var(--ease)}
.about__netcard b{font-family:var(--f-display);font-size:1.45rem;letter-spacing:-.03em;margin-top:auto;padding-top:2rem}
.about__netcard span:last-child{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--slate)}
.about__netcard .arr{width:14px;height:14px}
.about__netcard:hover{background:var(--ink);color:var(--ivory);transform:translateY(-4px)}
.about__netcard:hover span:last-child{color:var(--mist)}
.about__netcard:hover .tag{color:var(--champagne)}

/* ======================= SERVICES INDEX ======================= */
.svcs__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem 4rem;align-items:end}
.plates{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.plate a{display:grid;height:100%;background:var(--paper);border-radius:4px;box-shadow:0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .4s,transform .6s var(--ease)}
.plate a:hover{box-shadow:0 0 0 1px var(--ink),0 30px 50px -30px rgba(11,16,38,.45);transform:translateY(-4px)}
.plate__art{background:var(--sand);padding:clamp(1.2rem,3vw,2.4rem);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.plate__art svg{width:100%;max-width:420px;height:auto;transition:transform .8s var(--ease)}
.plate a:hover .plate__art svg{transform:scale(1.04) rotate(-.6deg)}
.plate__meta{padding:1.5rem 1.6rem 1.7rem;display:grid;gap:.4rem;align-content:start}
.plate__meta .num{font-size:.78rem;color:var(--bronze);letter-spacing:.06em}
.plate__meta :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-xl);letter-spacing:-.035em}
.plate__meta p{color:var(--slate);margin:.2rem 0 .8rem}
.plate__meta .link{justify-self:start}
.plate--1{grid-column:1/8}.plate--2{grid-column:8/13}.plate--3{grid-column:1/6}.plate--4{grid-column:6/13}.plate--5{grid-column:1/7}.plate--6{grid-column:7/13}
.plate--1 a,.plate--4 a{grid-template-columns:1.1fr 1fr}
.plate--1 .plate__art,.plate--4 .plate__art{border-bottom:0;border-right:1px solid var(--line)}
.plate--1 .plate__meta,.plate--4 .plate__meta{align-content:end}
.plate--3 a{background:var(--ink);color:var(--ivory)}
.plate--3 .plate__art{background:var(--ink-2);border-color:var(--ink-3)}
.plate--3 .plate__meta p{color:var(--mist)}
.plate--3 .plate__meta .num{color:var(--champagne)}
.svcs__listsin{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:clamp(2rem,4vw,4rem)}

/* ======================= SERVICE DETAIL ======================= */
.svc-hero :where(h1:not(.hx),.hx-h1):not(template){font-size:clamp(2.5rem,1.4rem + 4.4vw,5.8rem);letter-spacing:-.05em;line-height:.98;margin:1.2rem 0 1.4rem}
.svc-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.svc-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.svc-hero__art svg{width:100%;height:auto}
/* a: stacked browsers */
.stack{position:relative;aspect-ratio:1.15;min-height:320px}
.stack__w{position:absolute;width:72%;transition:transform 1s var(--ease)}
.stack__w .frame__view{--ar:789/560}
.stack__w1{left:0;top:4%;z-index:3;transform:rotate(-2deg)}
.stack__w2{right:0;top:22%;z-index:2;transform:rotate(2.5deg)}
.stack__w3{left:14%;bottom:0;z-index:1;transform:rotate(-.5deg);opacity:.92}
.stack:hover .stack__w1{transform:rotate(-3deg) translate(-10px,-8px)}
.stack:hover .stack__w2{transform:rotate(3.5deg) translate(10px,-4px)}
/* b: wide art with badge */
.svc-hero__top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem 4rem;align-items:end}
.svc-hero--b .svc-hero__art{position:relative;margin-top:clamp(2.5rem,5vw,4.5rem);background:var(--paper);box-shadow:0 0 0 1px var(--line);border-radius:6px;padding:clamp(1rem,3vw,3rem) clamp(1rem,8vw,9rem)}
.svc-hero__badge{position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(-2rem,-3vw,-1rem);background:var(--cobalt);color:var(--ink);border-radius:50%;width:clamp(120px,14vw,170px);aspect-ratio:1;display:grid;place-content:center;text-align:center;padding:1rem;transform:rotate(-8deg)}
.svc-hero__badge b{font-size:clamp(2rem,1.4rem + 2vw,3.2rem);line-height:1;letter-spacing:-.04em}
.svc-hero__badge span{font-size:.72rem;line-height:1.3;margin-top:.3rem}
/* c: ink */
.svc-hero--c{padding-bottom:clamp(4rem,3rem + 4vw,7rem)}
.svc-hero--c .svc-hero__art{filter:drop-shadow(0 40px 60px rgba(0,0,0,.5));transform:perspective(1200px) rotateY(-10deg) rotateX(4deg)}
/* d: chips + art */
.svc-hero--d .svc-hero__art{background:var(--paper);border-radius:6px;box-shadow:0 0 0 1px var(--line);padding:1.5rem}
/* e: centered + serp */
.svc-hero__center{text-align:center;max-width:980px;margin-inline:auto}
.svc-hero__center .lede{margin-inline:auto}
.svc-hero__center .svc-hero__actions{justify-content:center}
.serp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem 3rem;align-items:center;margin-top:clamp(2.5rem,5vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.serp__notes{list-style:none;display:grid;gap:1.4rem;counter-reset:n}
.serp__notes li{counter-increment:n;display:grid;gap:.3rem;padding-left:2.6rem;position:relative;color:var(--slate)}
.serp__notes li::before{content:counter(n);position:absolute;left:0;top:-.1rem;width:28px;height:28px;border-radius:50%;background:var(--cobalt);color:var(--ink);font:700 .8rem/28px var(--f-display);text-align:center}
.serp__notes b{font-family:var(--f-display);color:var(--ink);font-size:1.08rem}
/* f: art left */
.svc-hero--f .svc-hero__art{background:var(--sand);border-radius:50% 50% 6px 6px / 38% 38% 6px 6px;padding:clamp(2rem,5vw,4rem) clamp(1rem,3vw,2rem) clamp(1rem,3vw,2rem)}
/* body */
.svc-body{border-top:1px solid var(--line)}
.svc-body__in{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.svc-body__aside{position:sticky;top:calc(var(--hdr) + 2rem);display:grid;gap:1.2rem}
.svc-body__lead{font-family:var(--f-display);font-weight:600;font-size:var(--t-lg);line-height:1.3;letter-spacing:-.025em;max-width:30ch;margin-bottom:2rem}
.svc-body__cols{columns:2 300px;column-gap:clamp(2rem,4vw,3.5rem);color:var(--slate);font-size:1.04rem}
.svc-body__cols p{break-inside:avoid}
.svc-inc{background:var(--paper);border-block:1px solid var(--line)}
.svc-inc :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-2xl)}
.inc{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.inc li{padding:1.6rem 1.6rem 1.8rem 0;border-bottom:1px solid var(--line)}
.inc li:not(:nth-child(3n+1)){padding-left:1.6rem;border-left:1px solid var(--line)}
.inc .num{font-size:.78rem;color:var(--bronze)}
.inc :where(h3:not(.hx),.hx-h3):not(template){font-size:1.25rem;margin:.6rem 0 .4rem;letter-spacing:-.02em}
.inc p{margin:0;color:var(--slate);font-size:.96rem}
.svc-spec :where(h2:not(.hx),.hx-h2):not(template),.svc-work :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-2xl)}
.specs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.specs li:first-child{grid-column:span 2;grid-row:span 2}
.spec{display:flex;flex-direction:column;height:100%;padding:1.5rem;background:var(--paper);box-shadow:0 0 0 1px var(--line);border-radius:4px;transition:background .35s,color .35s}
.spec .num{font-size:.78rem;color:var(--bronze)}
.spec :where(h3:not(.hx),.hx-h3):not(template){font-size:1.3rem;margin:1.6rem 0 .6rem;letter-spacing:-.025em}
.specs li:first-child .spec :where(h3:not(.hx),.hx-h3):not(template){font-size:var(--t-xl);margin-top:auto}
.spec p{color:var(--slate);font-size:.94rem;flex:1}
.spec .link{align-self:flex-start;font-size:.92rem}
.spec:hover{background:var(--ink);color:var(--ivory)}
.spec:hover p{color:var(--mist)}
.spec:hover .num{color:var(--champagne)}
.svc-next{border-top:1px solid var(--line)}
.svc-next a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:clamp(2rem,4vw,3.5rem);transition:color .3s}
.svc-next b{font-family:var(--f-display);font-size:var(--t-2xl);letter-spacing:-.045em;margin-left:auto;margin-right:1rem}
.svc-next .arr{width:clamp(28px,4vw,48px);height:auto;transition:transform .5s var(--ease)}
.svc-next a:hover{color:var(--cobalt-deep)}
.svc-next a:hover .arr{transform:translateX(10px)}

/* ======================= PORTFOLIO INDEX ======================= */
.pfi__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem 4rem;align-items:end}
.pfi__count{color:var(--cobalt)}
.pfbar{position:sticky;top:0;z-index:30;background:rgba(245,241,232,.94);border-block:1px solid var(--line);transition:top .45s var(--ease)}
@supports (backdrop-filter:blur(8px)){.pfbar{background:rgba(245,241,232,.82);backdrop-filter:saturate(1.4) blur(12px)}}
body:has(.hdr:not(.is-hidden)) .pfbar{top:var(--hdr)}
.pfbar__in{display:flex;gap:1rem 2rem;align-items:center;justify-content:space-between;padding-block:.8rem}
.pfbar__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;mask-image:linear-gradient(to right,#000 92%,transparent)}
.pfbar__chips::-webkit-scrollbar{display:none}
.pfbar__chips .chip{flex:none;white-space:nowrap;min-height:36px;padding:.3rem .8rem}
.pfbar__tools{display:flex;gap:.5rem;align-items:center;flex:none}
.pfbar__q{min-height:40px;width:200px;padding:.4rem .8rem;font-size:.92rem}
.pfbar__y{min-height:40px;width:auto;padding:.4rem 2.2rem .4rem .8rem;font-size:.92rem}
.pfbar__view{display:flex;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--radius)}
.pfbar__view button{width:40px;height:40px;display:grid;place-items:center;color:var(--slate)}
.pfbar__view button svg{width:15px;height:15px}
.pfbar__view button[aria-pressed="true"]{background:var(--ink);color:var(--ivory)}
.pfi__status{font-size:.86rem;color:var(--slate);margin-bottom:2rem;font-family:var(--f-display);font-weight:600}
.pfgrid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.2rem,1.5rem + 2vw,3.6rem) clamp(1rem,2vw,1.8rem);grid-auto-flow:dense}
.pf--wide{grid-column:span 2}
.pf--tall .wcard__img{--ar:4/5}
.pf__dom{margin:.25rem 0 0;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.js .pf.is-out,.js .pflist li.is-out,.js .pf.is-later,.js .pflist li.is-later{display:none}
.pf.is-new{animation:pfin .7s var(--ease) both}
@keyframes pfin{from{opacity:0;transform:translateY(18px)}}
.pfi__more{display:flex;justify-content:center;margin-top:3.5rem}
.pfi__empty{padding:3rem 0;text-align:center;color:var(--slate);font-size:1.1rem}
.pfi__empty button{font:inherit}
.pflist{list-style:none;border-top:1px solid var(--ink)}
.pflist li{border-bottom:1px solid var(--line)}
.pfrow{display:grid;grid-template-columns:3.5rem minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr) 3.5rem;gap:1rem;align-items:baseline;padding:1rem 0;transition:color .2s,padding .4s var(--ease),background .3s}
.pfrow__n{font-size:.78rem;color:var(--bronze)}
.pfrow b{font-family:var(--f-display);font-size:1.2rem;letter-spacing:-.02em;line-height:1.25}
.pfrow__cat{font-size:.9rem;color:var(--slate)}
.pfrow__dom{color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfrow__y{text-align:right;font-size:.9rem}
.pfrow:hover,.pfrow:focus-visible{color:var(--cobalt-deep);padding-left:.6rem}
.pfpeek{position:fixed;left:0;top:0;width:280px;z-index:40;pointer-events:none;opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) scale(.9) rotate(-2deg);transition:opacity .25s,transform .45s var(--ease);border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 30px 50px -20px rgba(11,16,38,.5);background:var(--sand)}
.pfpeek img{width:100%;aspect-ratio:480/380;object-fit:cover;object-position:top}
.pfpeek--j img{aspect-ratio:16/9}
.pfpeek.is-on{opacity:1;transform:translate3d(var(--x,0),var(--y,0),0) scale(1) rotate(-2deg)}
@media (hover:none),(max-width:980px){.pfpeek{display:none}}

/* ======================= CASE STUDY ======================= */
.cs__hero{padding-bottom:0}
.cs__head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:2rem 4rem;align-items:end}
.cs__head :where(h1:not(.hx),.hx-h1):not(template){font-size:clamp(2.4rem,1.3rem + 4.4vw,6rem);margin-top:1.2rem;overflow-wrap:anywhere}
.cs__strap{font-family:var(--f-serif);font-style:italic;font-size:var(--t-lg);color:var(--slate);margin:1.2rem 0 0;max-width:40ch;line-height:1.25}
.cs__acts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
.cs__stage{position:relative;margin-top:clamp(2.5rem,5vw,4.5rem);padding:clamp(1rem,4vw,4rem) clamp(1rem,8vw,10rem) 0;background:linear-gradient(var(--ivory) 0 30%,var(--ink) 30%);border-radius:6px 6px 0 0}
.cs__frame{max-width:900px;margin-inline:auto;box-shadow:0 0 0 1px rgba(11,16,38,.1),0 40px 80px -30px rgba(0,0,0,.6)}
.cs__frame .frame__view{max-height:none}
.cs__ruler{display:flex;justify-content:center;padding:1rem 0 1.4rem;color:var(--mist)}
.cs__ruler span{display:flex;align-items:center;gap:.8rem;width:min(100%,900px)}
.cs__ruler span::before,.cs__ruler span::after{content:"";flex:1;height:1px;background:var(--ink-3)}
.cs__stage--ph{background:var(--ink);aspect-ratio:21/8;display:grid;place-items:center;padding:0}
.cs__stage--ph span{font:800 clamp(5rem,16vw,14rem)/1 var(--f-display);color:var(--ivory);letter-spacing:-.06em}
.cs__stage--ph i{font-style:normal;color:var(--cobalt)}
.cs__body{background:var(--paper)}
.cs__bodyin{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.cs__meta{position:sticky;top:calc(var(--hdr) + 2rem)}
.cs__meta dl{margin:0;border-top:1px solid var(--ink)}
.cs__meta div{display:grid;gap:.15rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.cs__meta dt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:var(--f-display);font-weight:700}
.cs__meta dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.cs__prose{font-size:1.1rem}
.cs__prose>p:first-child{font-family:var(--f-display);font-size:var(--t-md);line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.cs__pn{border-block:1px solid var(--line)}
.cs__pnin{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.cs__pnin--2{grid-template-columns:1fr 1fr}
.cs__pnin>a{display:grid;gap:.5rem;align-content:center;padding:clamp(1.6rem,3vw,2.6rem) 1rem;transition:color .25s,background .3s}
.cs__pnin>a b{font-family:var(--f-display);font-size:var(--t-lg);letter-spacing:-.03em;line-height:1.15}
.cs__pnin>a:last-child{text-align:right;justify-items:end;border-left:1px solid var(--line)}
.cs__pnin>a:hover{color:var(--cobalt-deep)}
.cs__pnall{display:grid!important;justify-items:center;gap:.6rem!important;padding-inline:2.4rem!important;border-left:1px solid var(--line);font-family:var(--f-display);font-weight:700;font-size:.86rem}
.cs__grid4{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cs__grid4 i{width:11px;height:11px;background:var(--ink);transition:background .3s,transform .4s var(--ease)}
.cs__pnall:hover .cs__grid4 i{background:var(--cobalt)}
.cs__pnall:hover .cs__grid4 i:nth-child(1){transform:translate(-3px,-3px)}
.cs__pnall:hover .cs__grid4 i:nth-child(2){transform:translate(3px,-3px)}
.cs__pnall:hover .cs__grid4 i:nth-child(3){transform:translate(-3px,3px)}
.cs__pnall:hover .cs__grid4 i:nth-child(4){transform:translate(3px,3px)}
.cs__rel :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-2xl)}

/* ======================= JOURNAL ======================= */
.jidx__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 4rem;align-items:end}
.jtop{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
.jlead a,.jsec a{display:block}
.jlead__img,.jsec__img{overflow:hidden;border-radius:4px;background:var(--sand);aspect-ratio:16/9}
.jlead__img img,.jsec__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.jlead a:hover img,.jsec a:hover img{transform:scale(1.035)}
.jlead__copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem 2rem;margin-top:1.4rem}
.jlead__copy .tag{grid-column:1/-1}
.jlead :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-xl);letter-spacing:-.035em;transition:color .25s}
.jlead__copy p:not(.tag){color:var(--slate);margin:0}
.jlead__copy .link{grid-column:2;justify-self:start}
.jlead a:hover :where(h2:not(.hx),.hx-h2):not(template),.jsec a:hover :where(h2:not(.hx),.hx-h2):not(template){color:var(--cobalt-deep)}
.jtop__side{display:grid;gap:2rem;align-content:start}
.jsec .tag{margin-top:1rem}
.jsec :where(h2:not(.hx),.hx-h2):not(template){font-size:1.3rem;line-height:1.25;letter-spacing:-.02em;margin-top:.4rem;transition:color .25s}
.jarch__head{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:space-between;align-items:end;margin-bottom:2rem}
.jarch__head :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-2xl)}
.jarch__head :where(h2:not(.hx),.hx-h2):not(template) .num{font-size:.4em;color:var(--bronze);vertical-align:super}
.jarch__head .chips{max-width:760px;justify-content:flex-end}
.jarch__head .chip{min-height:34px;padding:.25rem .75rem;font-size:.82rem}
.jrows{list-style:none;border-top:1px solid var(--ink)}
.jrows li{border-bottom:1px solid var(--line)}
.jrows li.is-out{display:none}
.jrow{display:grid;grid-template-columns:8rem minmax(0,1fr) 11rem 2rem;gap:1.5rem;align-items:baseline;padding:1.2rem 0;transition:color .25s,padding .45s var(--ease)}
.jrow time{color:var(--slate)}
.jrow :where(h3:not(.hx),.hx-h3):not(template){font-size:clamp(1.1rem,1rem + .5vw,1.45rem);line-height:1.25;letter-spacing:-.02em}
.jrow .tag{text-align:right}
.jrow__go .arr{width:16px;height:16px}
.jrow:hover,.jrow:focus-visible{color:var(--cobalt-deep);padding-left:.6rem}

/* Article */
.art__hero{padding-bottom:0}
.art__hero :where(h1:not(.hx),.hx-h1):not(template){font-size:clamp(2.1rem,1.3rem + 3.2vw,4.4rem);letter-spacing:-.04em;line-height:1.02;max-width:20ch;margin-top:1.1rem}
.art__by{display:flex;align-items:center;gap:.8rem;margin:1.8rem 0 0;font-size:.9rem;color:var(--slate)}
.art__by img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#1E2650}
.art__by>span{display:grid;line-height:1.35}
.art__by b{font-family:var(--f-display);color:var(--ink)}
.art__fig{margin-top:clamp(2rem,4vw,3.5rem)}
.art__fig img{width:100%;max-height:min(720px,80vh);object-fit:contain;background:var(--sand);border-radius:6px}
.art__in{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.art__side{position:sticky;top:calc(var(--hdr) + 2rem);display:grid;gap:2rem}
.art__toc ol{list-style:none;margin-top:1rem;border-left:1px solid var(--line-strong);counter-reset:t}
.art__toc li{counter-increment:t}
.art__toc a{display:block;padding:.4rem 0 .4rem 1rem;margin-left:-1px;border-left:2px solid transparent;font-size:.9rem;line-height:1.35;color:var(--slate);transition:color .2s,border-color .2s}
.art__toc a:hover,.art__toc a.is-on{color:var(--ink);border-color:var(--cobalt)}
.art__prose{font-size:1.1rem}
.art__prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.art__prose td,.art__prose th{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}
.art__prose blockquote{border-left:3px solid var(--cobalt);padding-left:1.2rem;font-family:var(--f-serif);font-style:italic;font-size:1.3em}

/* ======================= CONTACT ======================= */
.contact__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh}
.contact__left{position:relative;overflow:hidden;padding:calc(var(--hdr) + clamp(2.5rem,5vw,5rem)) var(--gutter) clamp(3rem,5vw,5rem)}
.contact__left::after{content:"";position:absolute;width:520px;height:520px;right:-180px;bottom:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(212,161,72,.45),transparent);pointer-events:none}
.contact__leftin{position:relative;z-index:1;max-width:560px;margin-left:auto;margin-right:clamp(0rem,4vw,4rem)}
.contact__left :where(h1:not(.hx),.hx-h1):not(template){font-size:var(--t-3xl);letter-spacing:-.05em;line-height:.95;margin-bottom:1.4rem}
.contact__ways{list-style:none;margin-top:2.6rem;border-top:1px solid var(--ink-3)}
.contact__ways li{border-bottom:1px solid var(--ink-3)}
.contact__ways a,.contact__ways div{display:grid;gap:.15rem;padding:1.1rem 0;transition:padding .4s var(--ease),color .25s}
.contact__ways span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);font-family:var(--f-display);font-weight:700}
.contact__ways b{font-family:var(--f-display);font-size:clamp(1.15rem,1rem + .7vw,1.6rem);letter-spacing:-.02em;overflow-wrap:anywhere}
.contact__ways small{color:var(--mist);font-size:.88rem}
.contact__ways a:hover{color:var(--cobalt-soft);padding-left:.5rem}
.contact__right{padding:calc(var(--hdr) + clamp(2.5rem,5vw,5rem)) var(--gutter) clamp(3rem,5vw,5rem);display:flex;align-items:center}
.cform{display:grid;gap:1.2rem;width:100%;max-width:580px;margin-left:clamp(0rem,4vw,4rem)}
.cform :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-xl);margin:.6rem 0 .6rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.cform .btn,.qnav .btn{justify-self:start}
.form-note{font-size:.84rem;color:var(--slate);margin:0}
.btn.is-busy{pointer-events:none;opacity:.7}

/* ======================= QUOTE ======================= */
.quote__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.qform{position:relative;display:grid;gap:1.6rem}
.qprog{height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.qprog span{display:block;height:100%;width:var(--p,25%);background:var(--cobalt);transition:width .6s var(--ease)}
.qstep{border:0;margin:0;padding:0;min-width:0;display:none}
.qstep.is-on{display:block;animation:pfin .6s var(--ease) both}
.no-js .qstep,html:not(.js) .qstep{display:block;margin-bottom:2.5rem}
.qstep legend{display:grid;gap:.6rem;font-family:var(--f-display);font-weight:700;font-size:var(--t-xl);letter-spacing:-.035em;line-height:1.1;padding:0;margin-bottom:1.6rem}
.qstep legend .num{font-size:.8rem;letter-spacing:.08em;color:var(--bronze)}
.qstep .sub{font-family:var(--f-display);font-weight:700;margin:1.8rem 0 .8rem}
.qstep .sub small{font-weight:500;color:var(--muted)}
.qstep .field+.field,.qstep .frow{margin-top:1.1rem}
.picks{display:flex;flex-wrap:wrap;gap:.6rem}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick span{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.65rem 1.1rem;border-radius:var(--radius);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong);font-family:var(--f-display);font-weight:600;transition:background .2s,color .2s,box-shadow .2s}
.pick span::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.5;transition:background .2s}
.pick input[type=checkbox]+span::before{border-radius:2px}
.pick:hover span{box-shadow:inset 0 0 0 1px var(--ink)}
.pick input:checked+span{background:var(--ink);color:var(--ivory);box-shadow:none}
.pick input:checked+span::before{background:var(--cobalt);box-shadow:none;opacity:1}
.pick input:focus-visible+span{outline:2px solid var(--cobalt);outline-offset:2px}
.qstep .err{color:#B42318;font-size:.88rem;margin:.8rem 0 0}
.qnav{display:flex;gap:.7rem;flex-wrap:wrap}
.brief{position:sticky;top:calc(var(--hdr) + 2rem)}
.brief__paper{background:var(--paper);padding:1.8rem;border-radius:4px;box-shadow:0 0 0 1px var(--line),0 30px 50px -35px rgba(11,16,38,.45);transform:rotate(1deg);position:relative}
.brief__paper::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(200,179,138,.5);transform:rotate(-3deg)}
.brief__head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:1rem;margin-bottom:.4rem}
.brief dl{margin:0}
.brief dl div{display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px dashed var(--line-strong)}
.brief dt{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--f-display);font-weight:700;padding-top:.2rem}
.brief dd{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.35}
.brief dd.is-set{color:var(--cobalt-deep);animation:pfin .4s var(--ease)}
.brief__foot{font-size:.86rem;color:var(--slate);margin:1.2rem 0 0}

/* ======================= LEGAL / 404 ======================= */
.page-legal .prose :where(h2:not(.hx),.hx-h2):not(template){font-size:var(--t-lg)}
.nf__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.nf__art{border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line);transform:rotate(1.5deg)}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1180px){
  .about__net{grid-template-columns:1fr 1fr}
  .specs{grid-template-columns:1fr 1fr}
  .pfbar__in{flex-wrap:wrap}
  .pfbar__chips{width:100%;order:2}
  .pfbar__tools{width:100%;order:1}
  .pfbar__q{flex:1;width:auto}
}
@media (max-width:1100px){
  .cards3{grid-template-columns:1fr 1fr}
  .pfgrid{grid-template-columns:1fr 1fr}
  .ledger,.inc{grid-template-columns:1fr 1fr}
  .ledger li,.inc li{padding-left:0!important;border-left:0!important;padding-right:1.5rem}
  .ledger li:nth-child(2n),.inc li:nth-child(2n){padding-left:1.5rem!important;border-left:1px solid var(--ink-3)!important}
  .inc li:nth-child(2n){border-left-color:var(--line)!important}
  .plate--1,.plate--2,.plate--3,.plate--4,.plate--5,.plate--6{grid-column:span 6}
  .plate--1 a,.plate--4 a{grid-template-columns:1fr}
  .plate--1 .plate__art,.plate--4 .plate__art{border-right:0;border-bottom:1px solid var(--line)}
  .jrow{grid-template-columns:7rem minmax(0,1fr) 2rem}
  .jrow .tag{display:none}
}
@media (max-width:980px){
  .about__heroin,.about__letterin,.about__stackin,.svcs__head,.svc-hero__in,.svc-hero__top,.serp,.svc-body__in,.faq__in,
  .pfi__head,.cs__head,.cs__bodyin,.jidx__head,.jtop,.art__in,.contact__split,.quote__in,.nf__in{grid-template-columns:1fr}
  .about__portrait{justify-self:start;max-width:240px}
  .about__side,.svc-body__aside,.cs__meta,.art__side,.brief{position:static}
  .cs__acts{justify-content:flex-start}
  .svcs__listsin{grid-template-columns:1fr 1fr}
  .svcs__listsin>div:last-child{grid-column:1/-1}
  .svc-hero--f .svc-hero__art{order:2}
  .stack{max-width:600px;width:100%}
  .cs__meta dl{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem}
  .art__side{order:2}
  .art__toc{display:none}
  .contact__leftin{margin:0}
  .contact__split{min-height:0}
  .contact__right{padding-top:clamp(2.5rem,5vw,4rem)}
  .cform{margin:0}
  .brief__paper{transform:none}
  .jlead__copy{grid-template-columns:1fr}
  .jlead__copy .link{grid-column:1}
}
@media (max-width:760px){
  .cards3{grid-template-columns:1fr}
  .pfgrid{grid-template-columns:1fr}
  .pf--wide{grid-column:auto}
  .pf--tall .wcard__img,.pf--wide .wcard__img{--ar:789/620!important}
  .pfrow{grid-template-columns:3rem minmax(0,1fr) 3rem}
  .pfrow__cat,.pfrow__dom{display:none}
  .ledger,.inc{grid-template-columns:1fr}
  .ledger li:nth-child(n),.inc li:nth-child(n){padding:1.5rem 0!important;border-left:0!important}
  .plate--1,.plate--2,.plate--3,.plate--4,.plate--5,.plate--6{grid-column:1/-1}
  .specs{grid-template-columns:1fr}
  .specs li:first-child{grid-column:auto;grid-row:auto}
  .frow{grid-template-columns:1fr}
  .about__net{grid-template-columns:1fr}
  .cs__stage{padding:1rem .8rem 0;background:linear-gradient(var(--ivory) 0 20%,var(--ink) 20%)}
  .cs__pnin{grid-template-columns:1fr 1fr}
  .cs__pnall{display:none!important}
  .cs__pnin>a{padding-inline:0}
  .cs__pnin>a:last-child{padding-left:1rem}
  .cs__pnin>a b{font-size:1.05rem}
  .svc-next b{font-size:var(--t-xl)}
  .svcs__listsin{grid-template-columns:1fr}
  .jrow{grid-template-columns:1fr 2rem;gap:.3rem 1rem}
  .jrow time{grid-column:1/-1}
  .faq__a{padding-right:0}
}
@media (max-width:520px){
  .pfbar__y{display:none}
  .cs__meta dl{grid-template-columns:1fr}
  .serp__notes li{padding-left:2.3rem}
}
.plate--1 a,.plate--4 a{grid-template-columns:1.35fr 1fr}
.plate--1 .plate__art,.plate--4 .plate__art{padding:clamp(1rem,2vw,1.6rem)}
.plate--1 .plate__art svg,.plate--4 .plate__art svg{max-width:none}
@media (max-width:1100px){.plate--1 a,.plate--4 a{grid-template-columns:1fr}}
.svc-hero--b .svc-hero__art svg{max-width:760px;margin-inline:auto}
/* contact: header sits across the split */
.page-contact .hdr:not(.is-solid):not(.mega-open) .brand{color:var(--ivory)}
@media (min-width:981px){.page-contact .hdr:not(.is-solid):not(.mega-open) .nav{background:var(--ivory);border-radius:999px;padding:0 .5rem;box-shadow:0 0 0 1px var(--line)}}
.qstep legend:focus{outline:none}

/* ==========================================================================
   v2 "Studio Noir" — dark-theme adjustments for inner pages
   (tokens are remapped in site.css; these fix places that assumed a light page)
   ========================================================================== */
main :where(h1:not(.hx),.hx-h1):not(template){text-transform:uppercase;font-weight:400;letter-spacing:-.02em}
main :where(h1:not(.hx),.hx-h1):not(template) .serif{text-transform:uppercase}
.art__hero :where(h1:not(.hx),.hx-h1):not(template){text-transform:none;letter-spacing:-.01em}
.art__hero :where(h1:not(.hx),.hx-h1):not(template) .serif{text-transform:none}
.svc-hero :where(h1:not(.hx),.hx-h1):not(template),.contact__left :where(h1:not(.hx),.hx-h1):not(template){line-height:.98}

/* strong rules drawn with --ink were dark lines on ivory; keep them subtle on dark */
.about__facts,.inc,.pflist,.jrows,.cs__meta dl,.brief__head{border-color:var(--line-strong)}

/* text that sits on the coral accent must be dark */
.faq__item[open] summary i,.serp__notes li::before,.svc-hero__badge,.pick input:checked+span::before{color:#140806}

/* hover states that inverted to "ink" now stay dark and glow coral */
.spec:hover,.about__netcard:hover{background:var(--card-2);color:var(--snow);box-shadow:0 0 0 1px rgba(242,107,94,.5)}
.spec:hover p,.about__netcard:hover span:last-child{color:var(--ash)}
.plate--3 a{background:var(--card-2);color:var(--snow)}
.plate--3 .plate__art{background:var(--card)}
.plate a{border-radius:var(--r-card)}
.plate a:hover{box-shadow:0 0 0 1px rgba(242,107,94,.55),0 30px 60px -30px rgba(242,107,94,.3)}
.svc-card,.spec,.about__netcard,.brief__paper,.svc-hero--b .svc-hero__art,.svc-hero--d .svc-hero__art{border-radius:var(--r-card)}

/* portfolio filter bar */
.pfbar{top:var(--hdr);background:rgba(10,10,10,.86)}
@supports (backdrop-filter:blur(8px)){.pfbar{background:rgba(10,10,10,.72)}}
body:has(.hdr:not(.is-hidden)) .pfbar{top:var(--hdr)}

/* case study stage */
.cs__stage{background:radial-gradient(70% 90% at 50% 110%,var(--coral-glow),transparent 70%),linear-gradient(180deg,var(--card),var(--night));border-radius:28px 28px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cs__stage--ph{background:linear-gradient(140deg,var(--card-2),var(--card))}
.cs__frame{box-shadow:0 0 0 1px var(--card-3),0 40px 80px -30px #000}
.cs__body{background:transparent;border-top:1px solid var(--line)}
@media (max-width:760px){.cs__stage{background:linear-gradient(180deg,var(--card),var(--night))}}

/* contact */
.contact__left{background:var(--night-2);border-right:1px solid var(--line)}
.contact__left::after{background:radial-gradient(closest-side,var(--coral-glow),transparent)}

/* service hero art */
.svc-hero--f .svc-hero__art{background:var(--card)}
.svc-hero--c .svc-hero__art{filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}
.nf__art{border-radius:var(--r-card)}
.svc-hero :where(h1:not(.hx),.hx-h1):not(template){font-size:clamp(2.3rem,1.1rem + 3.4vw,4.6rem)}
.cs__head :where(h1:not(.hx),.hx-h1):not(template){font-size:clamp(2.3rem,1.2rem + 3.8vw,5.2rem)}