/*
Theme Name: David Carle 2026
Theme URI: https://davidcarlehq.com
Author: Caryso / Lars Schulze
Description: Custom classic + ACF theme for davidcarlehq.com.
Version: 0.10.4
Requires PHP: 8.1
Text Domain: davidcarle
*/

/* ============ TOKENS ============ */
:root{
  --ink:#0F1418;
  --ink-2:#171D23;
  --paper:#F1F0EC;
  --paper-2:#E7E5DF;
  --accent:#2340E8;
  --accent-soft:#4A63F0;
  --delta:#00885F;
  --red:#C7402F;

  --fg:#0F1418;
  --fg-2:#4C555E;
  --fg-3:#7C858E;
  --rule:rgba(15,20,24,.14);
  --rule-soft:rgba(15,20,24,.08);
  --card:#F7F6F3;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --gutter:clamp(20px,5vw,64px);
  --index:150px;
  --max:1240px;
}
/* ============ BASE ============ */
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);margin:0;
}
.h2{
  font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.032em;
  font-weight:700;margin:0;text-wrap:balance;max-width:17ch;
}
.lede{color:var(--fg-2);max-width:60ch;margin:0}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:50;background:var(--ink);
  transition:background .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.hdr.stuck{background:var(--paper);border-bottom-color:var(--rule)}
.hdr-in{
  max-width:var(--max);margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;gap:24px;
}
.mark{font-weight:700;letter-spacing:-.02em;font-size:17px;color:#fff;transition:color .25s}
.mark span{color:var(--accent-soft)}
.hdr.stuck .mark{color:var(--fg)}
.hdr.stuck .mark span{color:var(--accent)}
.nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px;color:rgba(255,255,255,.72)}
.hdr.stuck .nav{color:var(--fg-2)}
.nav a:hover{color:var(--accent-soft)}
.hdr.stuck .nav a:hover{color:var(--accent)}
@media(max-width:900px){.nav{display:none}}

.lang{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:rgba(255,255,255,.45);
}
.hdr.stuck .lang{color:var(--fg-3)}
.lang b{color:#fff;font-weight:400}
.hdr.stuck .lang b{color:var(--fg)}
.lang a:hover{color:var(--accent-soft)}
.hdr.stuck .lang a:hover{color:var(--accent)}
@media(max-width:900px){.lang{margin-left:auto}}
@media(max-width:520px){.lang{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  padding:11px 20px;border-radius:2px;border:1px solid transparent;
  background:var(--accent);color:#fff;white-space:nowrap;cursor:pointer;
  transition:transform .15s ease,background .2s ease;
}
.btn:hover{background:var(--accent-soft);transform:translateY(-1px)}
.btn .arw{font-family:var(--mono);font-size:13px;opacity:.8}
.btn-lg{font-size:16px;padding:15px 26px}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* ============ DRAFT NOTE ============ */
.notes{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.notes-in{
  padding:11px 0;display:flex;gap:10px 16px;align-items:baseline;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg-3);line-height:1.7;
}
.notes-in b{color:var(--accent);font-weight:400;text-transform:uppercase;letter-spacing:.13em}

/* ============ HERO ============ */
.hero{background:var(--ink);color:#fff;position:relative}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 75% at 78% 8%,rgba(35,64,232,.20),transparent 62%);
}
.hero-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(48px,6vw,76px);
}
.hero h1{
  font-size:clamp(36px,5.2vw,64px);line-height:1.02;letter-spacing:-.038em;
  font-weight:700;margin:22px 0 0;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--accent-soft)}
.hero .eyebrow{color:rgba(255,255,255,.5)}
.hero p.sub{color:rgba(255,255,255,.68);margin:22px 0 0;max-width:50ch;font-size:17.5px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.cta-note{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.5);margin:16px 0 0;
}
.cta-note .ok{color:var(--accent-soft)}

.portrait{position:relative;display:flex;justify-content:center;align-items:flex-end;align-self:end}
.portrait::before{
  content:"";position:absolute;left:50%;top:12%;transform:translateX(-50%);
  width:92%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(35,64,232,.34),rgba(35,64,232,0) 68%);
  filter:blur(6px);
}
.portrait-ph{
  position:relative;width:100%;max-width:340px;aspect-ratio:4/5;
  border-radius:3px;border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(35,64,232,.22),transparent 60%),
    linear-gradient(180deg,#1B232B,#0C1116);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.portrait-ph .mono-badge{
  font-family:var(--mono);font-size:44px;font-weight:700;letter-spacing:-.02em;
  color:rgba(255,255,255,.9);line-height:1;
}
.portrait-ph .ph-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.portrait-img{position:relative;display:block;width:100%;max-width:330px;height:auto}
.portrait .cap{
  position:absolute;left:0;bottom:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);line-height:1.8;
}
.portrait .cap b{display:block;color:#fff;font-weight:600;letter-spacing:.1em}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;padding-bottom:44px}
  .portrait{order:0;max-width:240px;margin:14px auto 0}
  .hero .portrait-img,.single-service .portrait-img{max-width:240px}
  .portrait .cap{display:none}
}

.proof{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-cell{padding:26px 0 30px;border-left:1px solid rgba(255,255,255,.12);padding-left:22px}
.proof-cell:first-child{border-left:0;padding-left:0}
.proof-n{
  font-size:clamp(26px,3.3vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.proof-l{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.48);margin-top:10px;
}
@media(max-width:760px){
  .proof-in{grid-template-columns:1fr 1fr}
  .proof-cell:nth-child(3){border-left:0;padding-left:0}
  .proof-cell:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
}

/* ============ LOGO WALL ============ */
.logos{background:#FBFBFA;border-bottom:1px solid var(--rule)}
.logos-in{padding:30px 0 34px;display:flex;flex-direction:column;gap:20px}
.logos-lab{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:#8A9199;
}
.logos-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.logos-track{display:flex;align-items:center;gap:0 clamp(44px,6vw,78px);width:max-content;will-change:transform;animation:logoscroll 45s linear infinite}
.logos-track:hover{animation-play-state:paused}
.logos-track img{display:block;height:50px;width:auto;opacity:.8;mix-blend-mode:multiply;flex:none;transition:opacity .2s ease}
.logos-track img:hover{opacity:1}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){.logos-track img{height:38px}}
@media(prefers-reduced-motion:reduce){.logos-track{animation:none;flex-wrap:wrap;width:auto;gap:20px 40px}}

/* ============ SECTION SHELL ============ */
.sec{border-bottom:1px solid var(--rule)}
.sec.inv{
  background:var(--ink);color:#fff;
  --fg:#FFFFFF;
  --fg-2:rgba(255,255,255,.68);
  --fg-3:rgba(255,255,255,.46);
  --rule:rgba(255,255,255,.16);
  --rule-soft:rgba(255,255,255,.09);
  --accent:#8296FF;
  --accent-soft:#A3B0FF;
}
.sec-in{
  display:grid;grid-template-columns:var(--index) 1fr;gap:0 clamp(24px,4vw,56px);
  padding:clamp(52px,7vw,88px) 0;
}
.sec-idx{position:sticky;top:96px;align-self:start}
#cas .sec-idx{position:static}
.sec-idx .cnt{
  font-family:var(--mono);font-size:11px;color:var(--fg-3);margin-top:8px;
  font-variant-numeric:tabular-nums;
}
.sec-head{max-width:60ch}
.sec-head .lede{margin-top:16px}
@media(max-width:900px){
  .sec-in{grid-template-columns:1fr;gap:0}
  .sec-idx{position:static;margin-bottom:14px}
  .sec-idx .cnt{display:none}
}

/* ============ SERVICES ============ */
.svcs{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.svc{padding:28px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:11px;position:relative}
.svc:nth-child(odd){padding-right:clamp(28px,4vw,54px)}
.svc:nth-child(even){padding-left:clamp(28px,4vw,54px);border-left:1px solid var(--rule)}
.svc-head{display:flex;align-items:center;gap:13px}
.svc-i{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.svc-i svg{width:26px;height:26px;display:block}
.svc-name{font-size:20px;font-weight:700;letter-spacing:-.024em;margin:0}
.svc-d{color:var(--fg-2);font-size:14.5px;margin:0;max-width:48ch}
.svc-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:3px 7px;margin-left:auto;
}
.svc.feat .svc-name{color:var(--accent)}
.svc[href] .svc-name{transition:color .18s ease}
.svc[href]:hover .svc-name{color:var(--accent)}
@media(max-width:640px){
  .svcs{grid-template-columns:1fr}
  .svc:nth-child(odd),.svc:nth-child(even){padding-left:0;padding-right:0;border-left:0}
}

/* ============ DIFFERENTIATORS ============ */
.diffs{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.diff{padding:0 clamp(16px,2.4vw,30px);border-left:1px solid var(--rule)}
.diff:first-child{border-left:0;padding-left:0}
.diff h3{font-size:19px;font-weight:700;letter-spacing:-.022em;margin:0 0 10px}
.diff p{color:var(--fg-2);font-size:15px;margin:0}
.diff .mk{display:block;width:26px;height:2px;background:var(--accent);margin-bottom:18px}
@media(max-width:820px){
  .diffs{grid-template-columns:1fr;gap:26px}
  .diff{border-left:0;padding:0;border-top:1px solid var(--rule);padding-top:22px}
  .diff:first-child{border-top:0;padding-top:0}
}

/* ============ CASE STUDIES ============ */
.cases{grid-column:1 / -1;margin-top:40px;border-top:1px solid var(--rule)}
.case{
  display:grid;grid-template-columns:var(--index) 1fr auto;
  gap:20px clamp(24px,4vw,56px);align-items:start;
  padding:30px 0;border-bottom:1px solid var(--rule);
}
.case-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:4px}
.case-brand .bn{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.case-logo{display:block;max-height:48px;max-width:100%;width:auto;height:auto;mix-blend-mode:multiply}
/* No chip behind logos. Logos with their own solid background (field "logo_on_dark") show as-is. */
.case-logo.case-logo--dark{mix-blend-mode:normal;filter:none;border-radius:5px}
.case-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);
}
.case-name{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.028em;margin:0;line-height:1.15}
.case-desc{color:var(--fg-2);font-size:15.5px;margin:9px 0 0;max-width:52ch}
.case-link{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-top:14px;display:inline-block;
}
.case:hover .case-link{text-decoration:underline;text-underline-offset:4px}
.case-fig{text-align:right;min-width:190px;align-self:center}
.case-fig .after{
  font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.035em;color:var(--delta);
  font-variant-numeric:tabular-nums;line-height:1;
}
.case-fig .kpi{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);margin-top:10px;max-width:22ch;margin-left:auto;line-height:1.5;
}
@media(max-width:900px){
  .case{grid-template-columns:1fr auto}
  .case-brand{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px;padding-top:0}
}
@media(max-width:760px){
  .case{grid-template-columns:1fr}
  .case-fig{text-align:left;align-self:start}
  .case-fig .kpi{margin-left:0}
}
.sec-more{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg);border-bottom:1px solid var(--rule);padding-bottom:5px;
}
.sec-more:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ============ BLOG ============ */
.posts{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.post{
  background:var(--paper);padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;
  transition:background .2s ease;
}
.post:hover{background:var(--card)}
.post:first-child{padding-left:0}
.post:last-child{padding-right:0}
.post-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);display:flex;gap:10px;align-items:center;
}
.post-meta .dot{width:3px;height:3px;background:var(--fg-3);border-radius:50%}
.post h3{font-size:19px;line-height:1.28;font-weight:700;letter-spacing:-.022em;margin:0}
.post p{color:var(--fg-2);font-size:14.5px;margin:0}
.post .go{
  margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
@media(max-width:860px){
  .posts{grid-template-columns:1fr}
  .post{padding-left:0;padding-right:0}
}

/* ============ CLOSING CTA ============ */
.close{background:var(--ink);color:#fff}
.close-in{
  padding:clamp(56px,7vw,92px) 0;
  display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:center;
}
.close h2{
  font-size:clamp(30px,4.4vw,52px);line-height:1.03;letter-spacing:-.034em;font-weight:700;
  margin:18px 0 0;text-wrap:balance;max-width:18ch;
}
.close .eyebrow{color:rgba(255,255,255,.45)}
.close p{color:rgba(255,255,255,.66);margin:18px 0 0;max-width:46ch}
.close-side{border-left:1px solid rgba(255,255,255,.14);padding-left:clamp(20px,3vw,36px)}
.close-side .li{
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);
  font-size:14.5px;color:rgba(255,255,255,.78);
}
.close-side .li b{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.42);min-width:116px;font-weight:400;padding-top:3px;
}
@media(max-width:860px){
  .close-in{grid-template-columns:1fr}
  .close-side{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
}

/* ============ FOOTER ============ */
.ft{background:var(--ink);color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.1)}
.ft-cols{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:32px clamp(24px,4vw,56px);
  padding:clamp(44px,6vw,72px) 0 40px;
}
.ft-name{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff;margin:0}
.ft-name span{color:var(--accent-soft)}
.ft-brand p{color:rgba(255,255,255,.5);font-size:14px;margin:12px 0 0;max-width:34ch;line-height:1.6}
.ft-brand .loc{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:14px}
.ft-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 14px;font-weight:400}
.ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft-col a{font-size:14.5px;color:rgba(255,255,255,.66)}
.ft-col a:hover{color:#fff}
.ft-bottom{border-top:1px solid rgba(255,255,255,.1)}
.ft-in{
  padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.ft-in a:hover{color:#fff}
@media(max-width:820px){.ft-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-cols{grid-template-columns:1fr}}

/* service logos */
.svc-logo svg{width:28px;height:28px}

/* testimonials */
.tgrid{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tq{background:var(--card);margin:0;padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.tq p{margin:0;font-size:15.5px;line-height:1.5;color:var(--fg);font-weight:500}
.tq cite{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:auto}
.tq::before{content:"\201C";font-size:34px;line-height:.2;color:var(--accent);font-weight:700}
@media(max-width:860px){.tgrid{grid-template-columns:1fr}}

/* contact form */
.close-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.55)}
.cform{display:flex;flex-direction:column;gap:13px}
.cform label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cform input,.cform textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:2px;color:#fff;font-family:var(--sans);font-size:15px;padding:11px 13px;width:100%;resize:vertical}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(255,255,255,.35)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent-soft)}
.cf-submit{margin-top:4px;justify-content:center;width:100%}
.cf-note{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.32);margin:2px 0 0}
/* Contact Form 7 markup inside .cform: field wrap block, validation + response styling. */
.cform .wpcf7-form-control-wrap{display:block;width:100%}
.cform .wpcf7-not-valid{border-color:#e0736b}
.cform .wpcf7-not-valid-tip{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:#e8938c;margin-top:5px}
.cform .wpcf7-response-output{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:2px;padding:10px 13px;margin:4px 0 0}
.cform .wpcf7-spinner{margin:8px auto 0;display:block}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ============ PAGE / SINGLE ============ */
.page-main{padding:clamp(88px,11vw,150px) 0 clamp(60px,8vw,100px)}
.page-head{max-width:68ch;margin:0 auto 28px}
.entry,.entry-thumb{max-width:68ch;margin-left:auto;margin-right:auto}
.entry-thumb{margin-bottom:26px}
.entry-thumb img{width:100%;height:auto;border-radius:3px}
.entry{font-size:17px;line-height:1.72;color:var(--fg-2)}
.entry h2{font-size:26px;color:var(--fg);margin:38px 0 12px;letter-spacing:-.02em;line-height:1.15}
.entry h3{font-size:20px;color:var(--fg);margin:28px 0 10px}
.entry p{margin:0 0 18px}
.entry a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{margin:0 0 18px;padding-left:22px}
.entry li{margin:0 0 8px}
.entry img{max-width:100%;height:auto;border-radius:3px}
.entry blockquote{border-left:2px solid var(--accent);padding-left:18px;margin:24px 0;color:var(--fg)}
.post-meta-single{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:12px}

/* ============ SERVICE SINGLE (single-service.php) ============ */
.eyebrow.red{color:var(--red)}
.btn-sm{font-size:13px;padding:9px 16px;gap:7px}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.crumb a:hover{color:var(--accent-soft)}
.crumb .sep{opacity:.55;margin:0 7px}
.crumb .cur{color:rgba(255,255,255,.85)}
.htags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.htag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:5px 10px}
/* cards (problem / offer) */
.cards{margin-top:34px;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.card-n{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.card.prob .card-n{color:var(--red)}
.sec.inv .card{background:var(--ink-2)}
.card h3{font-size:17.5px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.28}
.card p{color:var(--fg-2);font-size:14.5px;margin:0}
@media(max-width:860px){
.cards.c3,.cards.c2{grid-template-columns:1fr}
}
/* process steps */
.steps{margin-top:36px;border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:92px 1fr;gap:0 clamp(20px,3vw,44px);padding:26px 0;border-bottom:1px solid var(--rule);align-items:start}
.step-n{font-family:var(--mono);font-size:clamp(30px,3.4vw,44px);font-weight:700;color:var(--accent);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.step h3{font-size:19px;font-weight:700;letter-spacing:-.022em;margin:0 0 8px}
.step p{color:var(--fg-2);font-size:15px;margin:0;max-width:60ch}
@media(max-width:640px){
.step{grid-template-columns:1fr;gap:8px}
}
.cb-brand{display:flex;align-items:center;gap:14px;margin-top:2px}
.cb-brand .case-logo{max-height:44px;max-width:220px}
.nav a.on{color:#fff}
.hdr.stuck .nav a.on{color:var(--accent)}
.casebox{margin-top:30px}
.cb-context{color:var(--fg-2);max-width:66ch;margin:0}
.cb-results{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cb-cell{padding:24px 0;border-left:1px solid var(--rule);padding-left:22px}
.cb-cell:first-child{border-left:0;padding-left:0}
.cb-n{font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.035em;color:var(--delta);font-variant-numeric:tabular-nums;line-height:1}
.cb-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:10px}
.cb-results.n4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cb-results.n4{grid-template-columns:1fr 1fr}.cb-results.n4 .cb-cell:nth-child(3){border-left:0;padding-left:0}}
.cb-approach{color:var(--fg-2);max-width:66ch;margin:26px 0 0}
@media(max-width:640px){
.cb-results{grid-template-columns:1fr}
.cb-cell{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
.cb-cell:first-child{border-top:0}
}
.quote{max-width:74ch}
.quote .qm{color:var(--accent);font-size:40px;line-height:0;font-weight:700}
.quote .qm-end{font-size:1.3em;margin-left:.08em;vertical-align:-.18em}
.quote blockquote{font-size:clamp(21px,2.7vw,31px);line-height:1.34;letter-spacing:-.02em;font-weight:600;margin:18px 0 0;text-wrap:balance}
.quote-cite{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:22px}
/* Service page hero: original proportions (scoped so the homepage hero is unaffected) */
.single-service .hero-in{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(24px,3vw,44px)}
.single-service .hero h1{font-size:clamp(34px,4.8vw,58px);line-height:1.03;letter-spacing:-.036em;margin:14px 0 0}
.single-service .hero .eyebrow{margin-top:40px}
.single-service .hero p.sub{margin:20px 0 0;max-width:52ch;font-size:17px}
.single-service .cta-row{margin-top:30px}
.single-service .cta-note{margin:16px 0 40px}
.single-service .portrait::before{top:14%;width:88%}
.single-service .portrait-img{max-width:380px}
.single-service .portrait .cap{bottom:20px}
@media(max-width:900px){.single-service .hero-in{padding-bottom:0}}

/* ============ BLOG INDEX (home.php / archive.php) ============ */
.blog-head{max-width:var(--max);margin:0 auto clamp(28px,4vw,44px);padding-top:clamp(80px,10vw,130px)}
.blog-head .lede{margin-top:16px}
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.6vw,36px) clamp(16px,2vw,24px)}
@media(max-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:flex;flex-direction:column;gap:13px}
.blog-thumb{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:var(--card);border:1px solid var(--rule)}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.blog-card:hover .blog-thumb img{transform:scale(1.03)}
.blog-thumb-ph{display:block;width:100%;height:100%}
.blog-card-body{display:flex;flex-direction:column;gap:9px}
.blog-card h3{font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:0}
.blog-card h3 a:hover{color:var(--accent)}
.blog-card p{color:var(--fg-2);font-size:13.5px;margin:0;line-height:1.5}
.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:2px;font-family:var(--mono);font-size:13px;color:var(--fg-2)}
.pagination .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent)}

/* ============ CASE STUDY (single-case_study.php / archive-case_study.php) ============ */
.case-hero-in{position:relative;z-index:1;padding-top:clamp(80px,10vw,120px);padding-bottom:clamp(46px,6vw,72px)}
.case-h1{font-size:clamp(30px,4.6vw,52px);line-height:1.05;letter-spacing:-.03em;font-weight:700;margin:20px 0 0;max-width:22ch;text-wrap:balance}
.case-hero-meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:18px 0 0}
.case-results{margin-top:30px}
.cb-d{font-size:12.5px;line-height:1.5;color:var(--fg-3);margin-top:8px;max-width:26ch}
a.case{color:inherit}
.cases a.case:hover .case-name{color:var(--accent)}

/* ============ BLOG SINGLE — DARK 2-COLUMN HERO (single.php) ============ */
.blog-hero-in{align-items:center;padding-top:clamp(72px,9vw,110px);padding-bottom:clamp(46px,6vw,72px)}
.blog-hero-in .case-h1{max-width:18ch;margin-top:18px}
.blog-hero-meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:18px 0 0}
.blog-hero-media{align-self:center}
.blog-hero-media img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px -28px rgba(0,0,0,.7)}
.blog-hero-in.no-media{grid-template-columns:1fr}
.blog-hero-in.no-media .case-h1{max-width:22ch}
@media(max-width:900px){
  .blog-hero-in{grid-template-columns:1fr}
  .blog-hero-media{order:-1;margin-bottom:6px}
}

/* ============ SERVICES MEGA-DROPDOWN (header) ============ */
.nav-item.has-drop{position:relative;display:flex;align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:6px}
.caret{font-size:9px;opacity:.65;transition:transform .2s ease}
.has-drop:hover .caret,.has-drop:focus-within .caret{transform:rotate(180deg)}
.drop{position:absolute;top:100%;left:0;padding-top:14px;min-width:540px;z-index:60;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.drop-in{position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:7px;box-shadow:0 24px 60px -18px rgba(15,20,24,.4);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.drop-in::before{content:"";position:absolute;top:-6px;left:30px;width:11px;height:11px;background:var(--paper);border-left:1px solid var(--rule);border-top:1px solid var(--rule);transform:rotate(45deg)}
.drop-svc{display:flex;gap:13px;align-items:flex-start;padding:13px;border-radius:5px;transition:background .15s ease}
.drop-svc:hover{background:var(--paper-2)}
.drop-ic{flex:none;width:42px;height:42px;border-radius:8px;background:var(--card);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.drop-ic svg{width:24px;height:24px;display:block}
.drop-ic img{width:24px;height:24px;object-fit:contain}
.drop-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.drop-tx b{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--fg);line-height:1.2}
.drop-svc:hover .drop-tx b{color:var(--accent)}
.drop-tx small{font-size:12px;line-height:1.42;color:var(--fg-3)}
@media(max-width:900px){.nav-item.has-drop{display:none}}

/* ============ INDEX-PAGE DARK HEADER (blog / case overview) ============ */
.idx-hero-in{position:relative;z-index:1;padding-top:clamp(80px,10vw,120px);padding-bottom:clamp(38px,5vw,60px)}
.hero .idx-h1{font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.03em;font-weight:700;margin:16px 0 0;max-width:20ch;color:#fff;text-wrap:balance}
.hero .idx-lede{color:rgba(255,255,255,.68);max-width:62ch;margin:16px 0 0;font-size:17px}
.page-main.idx-main{padding-top:clamp(40px,5vw,60px)}
/* case detail header: large logo on a white chip (header is always dark); own-background logos as-is */
.case-hero-logo{margin-top:24px;display:inline-flex;background:#fff;border-radius:6px;padding:12px 18px}
.case-hero-logo:has(.case-logo--dark){background:none;padding:0}
.case-hero-logo .case-logo{max-height:52px;max-width:240px;mix-blend-mode:normal}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.case-stats.n4{grid-template-columns:repeat(4,1fr)}
.cs-cell{padding:20px 18px 0 0}
.cs-n{font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1;color:#2FD1A0;font-variant-numeric:tabular-nums}
.cs-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:10px;line-height:1.5}
@media(max-width:700px){.case-stats,.case-stats.n4{grid-template-columns:1fr 1fr}}
.wrap.case-sec-in{max-width:calc(800px + 2 * var(--gutter));padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.case-sec .h2{max-width:none}
.case-sec .entry{max-width:none;margin:22px 0 0;font-size:18.5px;line-height:1.7;color:var(--fg)}
.case-sec .entry p:last-child{margin-bottom:0}
.close-solo{grid-template-columns:1fr}
.close-solo .close-copy{max-width:720px}
.close-solo .cta-row{margin-top:30px}

/* ============ MOBILE MENU (hamburger) ============ */
.burger{display:none;width:40px;height:40px;margin-left:14px;flex:none;background:none;border:0;padding:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:2px;border-radius:2px;background:#fff;transition:transform .25s ease,opacity .2s ease}
.hdr.stuck .burger span{background:var(--fg)}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:25px}
.burger.is-x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-x span:nth-child(2){opacity:0}
.burger.is-x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){ .burger{display:block} .hdr-in > .btn{display:none} }
body.mm-open{overflow:hidden}
body.mm-open .hdr{background:var(--ink);border-bottom-color:transparent}
body.mm-open .hdr .mark,body.mm-open .burger span{color:#fff;background:#fff}
body.mm-open .hdr .mark{background:none;color:#fff}
body.mm-open .hdr .mark span{color:var(--accent-soft)}
.mmenu{position:fixed;top:64px;left:0;right:0;bottom:0;z-index:65;background:var(--ink);color:#fff;padding:26px var(--gutter) 40px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mmenu-in{display:flex;flex-direction:column;max-width:520px;margin:0 auto}
.mm-head{font-size:25px;font-weight:700;letter-spacing:-.02em;color:#fff;padding:12px 0 4px}
.mm-svc{font-size:15.5px;color:rgba(255,255,255,.6);padding:9px 0 9px 16px}
.mm-svc:hover{color:var(--accent-soft)}
.mm-link{font-size:25px;font-weight:700;letter-spacing:-.02em;color:#fff;padding:15px 0;border-top:1px solid rgba(255,255,255,.12);margin-top:10px}
.mm-foot{margin-top:30px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.mm-lang{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.mm-lang b{color:#fff;font-weight:400}
.mm-foot .btn{width:100%;justify-content:center}
@media(min-width:901px){.mmenu{display:none}}
/* case card brand stacks cleanly on phones */
@media(max-width:600px){ .case-brand{flex-direction:column;align-items:flex-start;gap:7px} }

/* ============ MOBILE: restore side gutters ============ */
/* .sec-in/.close-in/footer grids set `padding: V 0`, which cancels .wrap's
   padding-inline. On desktop the index column masks it; on mobile (1-col) the
   content hits pixel 0. Re-assert the gutter below the grid breakpoint. */
@media(max-width:900px){
  .sec-in,.close-in,.ft-cols,.ft-in{padding-left:var(--gutter);padding-right:var(--gutter)}
  .logos-lab{padding-inline:var(--gutter)}
}

/* footer social icons + email */
.ft-soc{display:inline-flex;align-items:center;gap:8px}
.ft-soc svg{width:15px;height:15px;flex:none;opacity:.82}
.ft-soc:hover svg{opacity:1}
.eml{word-break:break-word}

/* ============ BLOG SINGLE: ToC + share rail ============ */
html{scroll-behavior:smooth}
.post-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 52px;gap:clamp(24px,4vw,60px);align-items:start}
.post-layout .entry{margin-left:0;margin-right:0;max-width:70ch;color:var(--fg);font-size:18px;line-height:1.78}
.entry h2{scroll-margin-top:92px}
.toc{position:sticky;top:92px;align-self:start}
.toc-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:flex;flex-direction:column;gap:1px}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:9px;align-items:baseline;font-size:14.5px;line-height:1.45;color:var(--fg-2);padding:7px 0 7px 14px;border-left:2px solid var(--rule);transition:color .15s ease,border-color .15s ease}
.toc a::before{content:counter(toc) ".";color:var(--fg-3);font-variant-numeric:tabular-nums;flex:none}
.toc a:hover{color:var(--fg)}
.toc a.on{color:var(--accent);border-left-color:var(--accent)}
.toc a.on::before{color:var(--accent)}
.share{position:sticky;top:92px;display:flex;flex-direction:column;gap:10px;align-self:start}
.sh{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--rule);color:var(--fg-2);transition:background .15s ease,color .15s ease,transform .15s ease,border-color .15s ease}
.sh svg{width:17px;height:17px}
.sh:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}
@media(max-width:1000px){
  .post-layout{grid-template-columns:1fr}
  .post-layout .entry{margin-left:auto;margin-right:auto}
  .toc,.share{display:none}
}

/* About page paragraphs */
.about-entry{margin:0;max-width:64ch;font-size:18px;color:var(--fg)}
/* Service pages: section intros use the full column so they sit on one line on desktop */
.single-service .sec-head,.single-service .sec-head .lede{max-width:none}

/* All-clients logo grid (case-study list) */
.cgrid{margin-top:34px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cgrid-cell{background:#fff;display:flex;align-items:center;justify-content:center;padding:18px;height:100px;min-width:0}
.cgrid-cell img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}