/* ==========================================================================
   COMPONENTS — site chrome, hero, home sections.
   Tokens come from style.css (:root). Edit those to rebrand.
   ========================================================================== */

/* NAV */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:22px 44px;background:rgba(14,14,17,0.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-nav .brand img,.site-nav .brand .custom-logo{height:52px;width:auto;display:block}
.nav-links{display:flex;gap:30px;align-items:center;list-style:none}
.nav-links a{font-size:14px;color:var(--muted);font-weight:500;transition:color .2s;text-transform:uppercase;letter-spacing:.03em}
.nav-links a:hover{color:var(--ink-on-dark)}
.nav-cta{font-weight:700;font-size:14px;color:#fff !important;background:var(--brand);padding:12px 24px;border-radius:7px;transition:all .25s;letter-spacing:.02em}
.nav-cta:hover{background:var(--brand-soft);transform:translateY(-1px)}
.menu-btn{display:none;background:none;border:none;color:var(--ink-on-dark);font-size:28px;cursor:pointer}

/* HERO STAGE (brief pin, scroll-driven assembly) */
.stage{position:relative}
.pin{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:30px;padding:140px 16px 48px}
.pin::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#08080A 0%,#161520 38%,#2E2A3A 66%,#3A2A20 100%);pointer-events:none}
.mosaic{position:relative;margin:0 auto;flex:0 0 auto;z-index:1}
.frag{position:absolute;border-radius:1.5px;background:var(--brand);will-change:transform,opacity}
.hero-copy{position:relative;z-index:5;text-align:center;max-width:820px;flex:0 1 auto}
.hero-copy>*{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.hero-copy.in>*{opacity:1;transform:none}
.hero-copy.in .eyebrow{transition-delay:0s}
.hero-copy.in h1{transition-delay:.12s}
.hero-copy.in .sub{transition-delay:.26s}
.hero-copy.in .cta-row{transition-delay:.4s}
.hero-copy .eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:700;margin-bottom:16px}
.hero-copy h1{font-family:var(--display);font-weight:700;font-size:var(--fs-h1);line-height:0.98;letter-spacing:.01em;text-transform:uppercase;margin-bottom:18px}
.hero-copy h1 .accent{color:var(--brand)}
.hero-copy .sub{font-size:var(--fs-sub);color:var(--sub);max-width:54ch;margin:0 auto 26px;line-height:1.55}
.cta-row{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}

.btn-primary{background:var(--brand);color:#fff;font-weight:700;font-size:15px;padding:15px 28px;border-radius:8px;transition:all .25s}
.btn-primary:hover{background:var(--brand-soft);transform:translateY(-2px);box-shadow:0 12px 34px -10px var(--brand)}
.btn-ghost{color:var(--ink-on-dark);font-weight:600;font-size:15px;padding:15px 8px;border-bottom:1px solid transparent;transition:border-color .25s}
.btn-ghost:hover{border-color:var(--muted)}

/* RESOLVED light section */
.resolved{background:var(--panel);color:var(--ink);padding:110px var(--gutter)}
.resolved .wrap{max-width:var(--maxw);margin:0 auto}
.resolved .eyebrow{color:var(--brand);font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:18px}
.resolved h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);letter-spacing:.01em;margin-bottom:18px;text-transform:uppercase;max-width:20ch;line-height:1.02}
.resolved .lede{color:var(--muted-2);max-width:60ch;font-size:17px;margin-bottom:48px}

.stack-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cell{display:block;background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);padding:24px 20px;transition:all .3s;color:inherit}
@media(hover:hover){
	.cell:hover{border-color:var(--brand);transform:translateY(-5px);box-shadow:0 18px 40px -24px rgba(232,82,31,.5)}
	.cell:hover .go{gap:11px}
}
.cell .n{display:block;font-family:var(--display);font-weight:700;font-size:14px;color:var(--brand);margin-bottom:10px}
.cell .t{display:block;font-family:var(--display);font-weight:600;font-size:18px;margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.cell .d{display:block;font-size:13px;color:var(--muted-2);margin-bottom:14px}
.cell .go{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);transition:gap .2s}
.cell .go .ar{transition:transform .2s}

/* FOOTER */
.site-footer{position:relative;color:#CFCAC4;background:radial-gradient(70% 95% at 14% 90%,rgba(232,82,31,0.22),rgba(0,0,0,0) 60%),#0E0E11}
.footer-wrap{max-width:var(--maxw);margin:0 auto;padding:54px var(--gutter);display:flex;justify-content:space-between;font-size:13.5px;flex-wrap:wrap;gap:20px}

/* RESPONSIVE */
@media(max-width:860px){
	/* Logo grows for presence; padding trimmed so the bar height stays 74px
	   (48 + 2*13) and the hamburger stays centered (align-items:center). */
	.site-nav{padding:13px 20px}
	.site-nav .brand img,.site-nav .brand .custom-logo{height:48px}
	.stack-strip{grid-template-columns:repeat(2,1fr)}
	.resolved{padding:70px 22px}
}

/* PAGE HERO (service / industry / about / case study) */
.page-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 90% 70% at 78% 12%,rgba(255,107,61,.20),transparent 60%),radial-gradient(ellipse 80% 60% at 6% 96%,rgba(232,82,31,.14),transparent 55%),linear-gradient(150deg,#0E0E11 0%,#161514 47%,#211a1d 75%,#2c1c16 100%);padding:calc(var(--nav-h) + 70px) var(--gutter) 80px}
.page-hero .wrap{max-width:var(--maxw);margin:0 auto}
.page-hero .eyebrow{color:var(--brand);font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:var(--fs-h1);line-height:1.0;text-transform:uppercase;letter-spacing:.01em;margin-bottom:20px;max-width:18ch}
.page-hero .answer-first{font-size:var(--fs-sub);color:var(--sub);max-width:60ch;line-height:1.6;margin-bottom:28px}

/* Hero breadcrumb (service / industry subpages). The current item carries the
   eyebrow's prominence (orange, eyebrow size/weight/spacing/uppercase); the
   parent is a muted, de-emphasized back-link; the separator stays muted. */
.hero-breadcrumb{margin:0 0 14px}
.hero-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;line-height:1.2;max-width:100%}
.hero-breadcrumb li{min-width:0;white-space:nowrap}
.hero-breadcrumb li:first-child{flex:0 0 auto}
.hero-breadcrumb li+li{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.hero-breadcrumb li+li::before{content:'\203A';margin:0 .55em;color:rgba(255,255,255,.4);font-weight:400}
.hero-breadcrumb a{color:var(--muted);font-weight:600;transition:color .2s}
.hero-breadcrumb a:hover{color:var(--brand)}
.hero-breadcrumb [aria-current="page"]{color:var(--brand);font-weight:700}

/* ==========================================================================
   FD GRAPHICS SET — diagram + icon tokens, inline diagrams, icon sprite use.
   The SVGs read --fd-* vars (with baked-in fallbacks); alias them to the
   theme's existing tokens so the graphics match the site exactly.
   ========================================================================== */
:root{
	--fd-bg:var(--bg,#0E0E11);
	--fd-orange:var(--brand,#EA5520);
	--fd-cream:var(--ink-on-dark,#F5F1EA);
	--fd-muted:var(--muted,#8A8F98);
	--fd-panel:var(--bg-soft,#16161B);
	--fd-line:var(--line,#2A2A30);
	--fd-display:var(--display,'Arial Narrow','Helvetica Neue',Arial,sans-serif);
	--fd-body:var(--body,'Helvetica Neue',Arial,sans-serif);
}

/* Inline diagrams — responsive, centered, capped so they don't blow out */
.fd-diagram{width:100%;max-width:820px;margin:40px auto 0}
.fd-diagram svg{display:block;width:100%;height:auto}

/* Icons (sprite <use>). Main stroke inherits currentColor from the card text;
   the orange accent comes from --fd-orange inside the symbols. */
.fd-ic{width:40px;height:40px;color:inherit;display:block}
.cell .fd-ic{margin-bottom:16px}
.fd-ic--lg{width:48px;height:48px}
.fd-ic--xl{width:96px;height:96px}

/* ==========================================================================
   PAGE SECTIONS (ACF Flexible Content) — service / industry composer
   ========================================================================== */
.fd-section{padding:90px var(--gutter)}
.fd-section>.wrap{max-width:var(--maxw);margin:0 auto}
.fd-section>.wrap.narrow{max-width:820px}
.fd-section--dark{background:var(--bg);color:var(--ink-on-dark)}
.fd-section--light{background:var(--panel);color:var(--ink)}
.fd-section--orange{background:linear-gradient(135deg,var(--brand) 0%,#C9431A 100%);color:#fff}
.fd-section h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-bottom:22px}
.fd-section .eyebrow{color:var(--brand);font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.fd-prose p{font-size:17px;line-height:1.7;margin-bottom:16px}
.fd-section--dark .fd-prose{color:var(--sub)}
.fd-section--light .fd-prose{color:var(--muted-2)}
.fd-prose a{color:var(--brand);border-bottom:1px solid transparent;transition:border-color .2s}
.fd-prose a:hover{border-color:var(--brand)}
.fd-lead{font-weight:700}
.fd-section--dark .fd-lead{color:var(--ink-on-dark)}
.fd-section--light .fd-lead{color:var(--ink)}

/* Media & Text */
.fd-mediatext{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.fd-mediatext--right .fd-mediatext__text{order:2}
.fd-mediatext--right .fd-mediatext__media{order:1}
.fd-mediatext--textonly{grid-template-columns:1fr}
.fd-mediatext--textonly .fd-mediatext__text{max-width:760px}
.fd-mediatext__media .fd-diagram{margin:0;max-width:100%}
.fd-media-img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.fd-media-icon{position:relative;display:flex;align-items:center;justify-content:center;padding:52px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
.fd-section--light .fd-media-icon{background:#fff;border-color:var(--line-light)}
/* Same paneled container, but room for a wide inlined diagram (not a small icon) */
.fd-media-icon--diagram{padding:24px}
.fd-media-icon--diagram svg{width:100%;height:auto;display:block}
.fd-media-icon::after{content:'';position:absolute;top:16px;right:16px;width:6px;height:6px;background:var(--fd-orange);box-shadow:11px 0 0 var(--fd-orange),0 11px 0 var(--fd-orange);opacity:.5}

/* Statement */
.fd-statement{text-align:center}
.fd-statement__text{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.4vw,40px);line-height:1.25;text-transform:uppercase;letter-spacing:.01em;max-width:26ch;margin:0 auto}
.fd-statement .fd-accent{color:var(--fd-orange)}
/* Accent word on orange bands: near-black so it pops (the descendant-scoped
   rule below never matched because the classes share one element). */
.fd-section--orange .fd-accent{color:#0E0E11}
.fd-statement__sub{margin:18px auto 0;max-width:60ch;font-size:17px;color:var(--muted)}
.fd-section--orange .fd-statement__sub{color:rgba(255,255,255,.92)}

/* Stats */
.fd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;text-align:center}
.fd-stat__value{display:block;font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1;color:var(--brand)}
.fd-stat__label{display:block;margin-top:10px;font-weight:600;font-size:15px}
.fd-stat__source{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.fd-stats__closing{margin-top:32px;max-width:70ch}

/* Steps — diagram visual language (connecting line + pixel accents) */
.fd-steps__intro{color:var(--muted);font-size:17px;line-height:1.6;max-width:62ch;margin:0}
.fd-steps{list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
.fd-steps::before{content:'';position:absolute;top:13px;left:6%;right:6%;height:2px;background:var(--fd-orange);opacity:.45}
.fd-step{position:relative;padding-top:38px}
.fd-step__n{position:absolute;top:0;left:0;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--fd-orange);background:var(--bg);padding-right:12px}
.fd-step__n::after{content:'';position:absolute;top:5px;right:-2px;width:5px;height:5px;background:var(--fd-orange);box-shadow:0 9px 0 var(--fd-orange);opacity:.6}
.fd-step__title{font-family:var(--display);font-weight:600;font-size:20px;text-transform:uppercase;margin:4px 0 10px}
.fd-step__desc{color:var(--muted);font-size:15px;line-height:1.65}

/* Feature grid */
.fd-features{display:grid;gap:22px;margin-top:32px}
.fd-features--2{grid-template-columns:repeat(2,1fr)}
.fd-features--3{grid-template-columns:repeat(3,1fr)}
.fd-features--4{grid-template-columns:repeat(4,1fr)}
.fd-feature{display:block;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);color:inherit;transition:transform .25s,border-color .25s}
.fd-section--light .fd-feature{background:#fff;border-color:var(--line-light)}
a.fd-feature:hover{border-color:var(--brand);transform:translateY(-4px)}
.fd-feature .fd-ic{margin-bottom:16px}
.fd-feature__title{font-family:var(--display);font-weight:600;font-size:19px;text-transform:uppercase;margin-bottom:8px}
.fd-feature__text{font-size:15px;line-height:1.6;color:var(--muted)}
.fd-section--light .fd-feature__text{color:var(--muted-2)}
.fd-features__closing{margin-top:32px;max-width:70ch}

/* List */
.fd-list__intro{font-size:17px;color:var(--muted);max-width:60ch;margin-bottom:22px}
.fd-section--light .fd-list__intro{color:var(--muted-2)}
.fd-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fd-list li{position:relative;padding-left:26px;font-size:17px;line-height:1.6}
.fd-list li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--fd-orange)}

/* Quote */
.fd-quote{border-left:3px solid var(--brand);padding:6px 0 6px 28px;margin:0}
.fd-quote p{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.8vw,30px);line-height:1.4;margin-bottom:16px}
.fd-quote cite{font-style:normal;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* Tag List */
.fd-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.fd-tag{display:inline-block;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg-soft);font-size:14px;font-weight:600;line-height:1.2}
.fd-section--light .fd-tag{background:#fff;border-color:var(--line-light)}

/* Option Cards */
.fd-options{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.fd-option{position:relative;padding:34px 28px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);overflow:hidden}
.fd-section--light .fd-option{background:#fff;border-color:var(--line-light)}
.fd-option::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand)}
.fd-option h3{font-family:var(--display);font-weight:600;font-size:19px;text-transform:uppercase;margin:6px 0 10px}
.fd-option p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.fd-section--light .fd-option p{color:var(--muted-2)}
.fd-options__closing{margin-top:24px;font-size:17px;color:var(--muted)}
.fd-section--light .fd-options__closing{color:var(--muted-2)}

/* Checklist */
.fd-checklist{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.fd-checklist li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.5}
.fd-checklist__check{flex:0 0 auto;width:22px;height:22px;margin-top:2px;color:var(--brand);fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fd-checklist__close{margin-top:26px;font-size:17px;line-height:1.6;color:var(--sub)}
.fd-section--light .fd-checklist__close{color:var(--muted-2)}

@media(max-width:860px){
	.fd-section{padding:60px 22px}
	.fd-mediatext{grid-template-columns:1fr;gap:28px}
	.fd-mediatext__text{order:0}      /* text first on mobile, regardless of side */
	.fd-mediatext__media{order:1}
	.fd-steps{grid-template-columns:1fr;gap:22px}
	.fd-steps::before{display:none}
	.fd-step{padding-top:0;padding-left:34px}
	.fd-step__n{padding-right:0}
	.fd-features--2,.fd-features--3,.fd-features--4{grid-template-columns:1fr}
	.fd-options{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
	.fd-feature{transition:none}
	a.fd-feature:hover{transform:none}
}

/* PAGE BODY prose */
.wrap.narrow{max-width:820px;margin:0 auto}
.page-body{padding:80px var(--gutter)}
.page-body h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:.01em;margin:48px 0 16px;line-height:1.05}
.page-body h2:first-child{margin-top:0}
.page-body h3{font-family:var(--display);font-weight:600;font-size:var(--fs-h3);margin:32px 0 12px}
.page-body p{margin-bottom:18px;font-size:17px;line-height:1.7;color:var(--muted-2)}
.page-body.resolved p{color:var(--muted-2)}
.page-body ul,.page-body ol{margin:0 0 18px 22px}
.page-body li{margin-bottom:10px;font-size:17px;line-height:1.6;color:var(--muted-2)}
.page-body a{color:var(--brand);border-bottom:1px solid transparent;transition:border-color .2s}
.page-body a:hover{border-color:var(--brand)}
.page-body.bio{background:#fff}

/* FAQ accordion */
.faq-section{background:var(--panel);color:var(--ink);padding:90px var(--gutter)}
.faq-section .eyebrow{color:var(--brand);font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.faq-section h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);text-transform:uppercase;margin-bottom:36px}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-top:1px solid var(--line-light);padding:4px 0}
.faq-item:last-child{border-bottom:1px solid var(--line-light)}
.faq-item summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.01em;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:26px;color:var(--brand);font-weight:400;line-height:1;transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-answer{padding:0 0 24px;font-size:16px;line-height:1.7;color:var(--muted-2);max-width:64ch}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--brand);color:#fff;padding:100px var(--gutter) 150px;text-align:center}
.cta-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:url(../svg/fd-cta-dissolve.svg) repeat-x left bottom;background-size:96px 96px;pointer-events:none;z-index:0}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);text-transform:uppercase;margin-bottom:18px}
.cta-band p{max-width:60ch;margin:0 auto 30px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.92)}
.cta-band .cta-row{justify-content:center}
.cta-band .btn-primary{background:#fff;color:var(--brand)}
.cta-band .btn-primary:hover{background:#0E0E11;color:#fff;box-shadow:none}
.cta-band .btn-ghost{color:#fff}
.cta-band .btn-ghost:hover{border-color:rgba(255,255,255,.6)}

/* Homepage value band (1A) */
.value-band{background:var(--panel);color:var(--ink);padding:100px var(--gutter)}
.value-band .wrap{max-width:var(--maxw);margin:0 auto}
.value-band .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px}
.value-band .pillar h3{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.value-band .pillar p{font-size:15px;line-height:1.6;color:var(--muted-2)}
.value-band .closing{margin-top:44px;font-family:var(--display);font-weight:600;font-size:var(--fs-h3);max-width:30ch}

/* Homepage how-we-work (1B) */
.how-band{background:var(--bg);padding:100px var(--gutter)}
.how-band .wrap{max-width:var(--maxw);margin:0 auto}
.how-band .eyebrow{color:var(--brand);font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.how-band h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);text-transform:uppercase;margin-bottom:16px;max-width:18ch}
.how-band .lede{color:var(--sub);max-width:60ch;font-size:17px;margin-bottom:50px;line-height:1.6}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.how-step{border-top:2px solid var(--brand);padding-top:22px}
.how-step .n{font-family:var(--display);font-weight:700;color:var(--brand);font-size:15px;letter-spacing:.05em}
.how-step h3{font-family:var(--display);font-weight:600;font-size:21px;text-transform:uppercase;margin:8px 0 10px}
.how-step p{color:var(--muted);font-size:15px;line-height:1.65}
.how-quote{margin-top:60px;text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(22px,3vw,34px);color:var(--ink-on-dark);text-transform:uppercase;letter-spacing:.01em}
.how-quote span{color:var(--brand)}

/* Homepage industries strip (1C) */
.ind-strip{background:var(--panel);color:var(--ink);padding:100px var(--gutter)}
.ind-strip .wrap{max-width:var(--maxw);margin:0 auto}
.ind-strip .eyebrow{color:var(--brand);font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.ind-strip h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);text-transform:uppercase;margin-bottom:16px}
.ind-strip .lede{color:var(--muted-2);max-width:58ch;font-size:17px;margin-bottom:44px}
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ind-tile{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);padding:26px 24px;font-family:var(--display);font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);transition:all .25s}
.ind-tile:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 16px 36px -22px rgba(232,82,31,.5)}
.ind-tile .ar{color:var(--brand);transition:transform .2s}
.ind-tile:hover .ar{transform:translateX(4px)}

/* Homepage why band (1D) */
.why-band{background:var(--bg);padding:110px var(--gutter);text-align:center}
.why-band h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);text-transform:uppercase;max-width:20ch;margin:0 auto 22px;line-height:1.05}
.why-band p{max-width:62ch;margin:0 auto;font-size:18px;line-height:1.7;color:var(--sub)}

/* Case study quote */
.cs-quote{border-left:3px solid var(--brand);padding:8px 0 8px 24px;margin:36px 0;font-family:var(--display);font-weight:500;font-size:22px;line-height:1.4;color:var(--ink-on-dark)}
.cs-quote cite{display:block;margin-top:12px;font-family:var(--body);font-style:normal;font-size:14px;color:var(--muted)}
.cs-services{margin-top:30px;font-size:15px;color:var(--muted-2)}

/* Responsive */
@media(max-width:860px){
	.value-band .pillars{grid-template-columns:repeat(2,1fr)}
	.how-steps{grid-template-columns:1fr}
	.ind-grid{grid-template-columns:1fr}
	.page-hero{padding:calc(var(--nav-h) + 30px) 22px 50px}
	.page-body,.faq-section,.cta-band,.value-band,.how-band,.ind-strip,.why-band{padding-left:22px;padding-right:22px}
}

/* ==========================================================================
   HEADER DROPDOWNS, FOOTER, WORK GRID, CONTACT, PULL-QUOTE, ADMIN BAR
   ========================================================================== */

/* Nav dropdowns (Services / Industries submenus) */
.nav-links li{position:relative}
.nav-links .sub-menu{position:absolute;top:100%;left:0;min-width:230px;background:#0E0E11;border:1px solid var(--line);border-radius:8px;padding:8px 0;margin:0;list-style:none;display:none;flex-direction:column;box-shadow:0 22px 44px -22px rgba(0,0,0,.65);z-index:300}
.nav-links li:hover>.sub-menu,.nav-links li:focus-within>.sub-menu{display:flex}
.nav-links .sub-menu li{width:100%}
.nav-links .sub-menu a{display:block;padding:9px 18px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--muted);white-space:nowrap}
.nav-links .sub-menu a:hover{color:var(--ink-on-dark);background:rgba(255,255,255,.05)}
.nav-links .menu-item-has-children>a::after{content:'\25BE';font-size:9px;margin-left:6px;opacity:.65;display:inline-block}

/* Off-canvas mobile nav — JS-injected elements; hidden on desktop, scrim inert
   because html.nav-open is only ever set at the mobile breakpoint. */
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;z-index:9000}
html.nav-open .nav-scrim{opacity:1;visibility:visible}
html.nav-open{overflow:hidden}
/* .site-nav is position:fixed and forms its own stacking context, trapping the
   panel at the nav's level. Lift that whole context above the scrim while open
   so the panel (inside it) paints ABOVE the scrim, never dimmed. */
html.nav-open .site-nav{z-index:9001}
.submenu-toggle{display:none}
.nav-panel-head{display:none}
.nav-cta-li{display:none}

/* Pull-quote (About + content) */
.pullquote{border-left:3px solid var(--brand);margin:34px 0;padding:6px 0 6px 24px}
.pullquote p{margin:0 0 8px;font-family:var(--display);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.35;color:var(--ink)}
.pullquote cite{font-family:var(--body);font-style:normal;font-size:14px;color:var(--muted-2)}

/* Index pages (Services / Industries) tile grid */
.stack-strip.index-grid{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;margin-top:38px}
.contact-details h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h3);text-transform:uppercase;margin-bottom:16px}
.contact-details p{margin-bottom:14px;line-height:1.5}
.contact-details a{color:var(--brand)}

/* Work portfolio grid */
.work-section{background:var(--bg);padding:84px var(--gutter) 100px}
.work-section .wrap{max-width:var(--maxw);margin:0 auto}
.work-head{max-width:60ch;margin:0 0 40px}
.work-section h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-bottom:14px}
.work-intro{color:var(--sub);font-size:17px;line-height:1.6;margin:0}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.work-card{background:var(--panel);border:1px solid var(--line-light);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.work-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -24px rgba(232,82,31,.5)}
.work-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#161520,#2A2230);display:flex;align-items:center;justify-content:center;overflow:hidden}
.work-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.work-ph{font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.04em;color:var(--brand);text-align:center;padding:20px;line-height:1.2}
.work-name{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);margin:16px 20px 4px}
.work-visit{margin:0 20px 18px;font-family:var(--display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--brand)}
.work-visit:hover{color:var(--brand-soft)}

/* Work page v2: "how we work" prose + 3 labeled points (light .resolved panel) */
.work-how p{font-size:17px;line-height:1.7;color:var(--ink);max-width:62ch;margin-bottom:18px}
.work-how__points{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.work-how__point p{font-size:16px;line-height:1.6;color:var(--muted-2);margin:0;max-width:none}
.work-how__point strong{display:block;font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.02em;color:var(--brand);margin-bottom:8px}
@media (max-width:860px){
	.work-how__points{grid-template-columns:1fr;gap:18px}
}

/* FOOTER */
.footer-main{max-width:var(--maxw);margin:0 auto;padding:64px var(--gutter) 40px;display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:48px}
.footer-logo{height:40px;width:auto;display:block;margin-bottom:16px}
.footer-brand p{max-width:42ch;font-size:14px;line-height:1.6;color:#B7B2AC;margin-bottom:18px}
.footer-social{display:flex;gap:12px;list-style:none;flex-wrap:wrap}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.14);color:#D9D5D0;transition:color .2s,border-color .2s,background .2s,transform .2s}
.footer-social a:hover{color:#fff;border-color:var(--brand);background:rgba(232,82,31,.16);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px;fill:currentColor;display:block}
.site-footer h3{font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:#FFFFFF;margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:#C4BFB9;transition:color .2s}
.footer-col a:hover{color:var(--brand-soft)}
.footer-contact li{font-size:14px;color:#C4BFB9;margin-bottom:6px}
.footer-partner{display:inline-block;margin-top:22px;background:#fff;padding:10px;border-radius:10px;line-height:0}
.footer-partner img{display:block;width:108px;height:auto}
.footer-bottom{position:relative;background:#0E0E11;border-top:1px solid rgba(255,255,255,.08);padding:20px var(--gutter);text-align:center;font-size:13px;color:#9A958F}

/* Admin bar offset (logged-in only) — keep the fixed nav below the WP bar */
body.admin-bar .site-nav{top:32px}
@media screen and (max-width:782px){
	body.admin-bar .site-nav{top:46px}
}

@media(max-width:860px){
	.work-grid{grid-template-columns:1fr}
	.contact-grid{grid-template-columns:1fr;gap:28px}
	.footer-main{grid-template-columns:1fr;gap:34px;padding:48px 22px 32px}
	/* Footer (mobile): center everything, larger logo + fonts, social icons in a
	   single centered horizontal row. Copy, links, colors and tokens unchanged. */
	.footer-main{text-align:center}
	.footer-logo{height:52px;margin-left:auto;margin-right:auto}
	.footer-brand p{font-size:16px;line-height:1.65;max-width:42ch;margin-left:auto;margin-right:auto}
	.footer-col .footer-social{flex-direction:row;flex-wrap:wrap;justify-content:center}
	.site-footer h3{font-size:16px}
	.footer-col a{font-size:16px}
	.footer-contact li{font-size:16px}
	/* ===== OFF-CANVAS MOBILE NAV ===== */
	.menu-btn{display:block;z-index:401;position:relative}
	.site-nav>.nav-cta{display:none}

	/* the panel */
	.nav-links{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(86vw,380px);flex-direction:column;align-items:stretch;gap:0;padding:0 0 28px;margin:0;background:#0E0E11;background:linear-gradient(160deg,#161412 0%,#0E0E11 60%,#090909 100%);transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:9001;box-shadow:-24px 0 60px -24px rgba(0,0,0,.7)}
	html.nav-open .nav-links{transform:translateX(0)}

	/* sticky close header */
	.nav-panel-head{display:flex;justify-content:flex-end;position:sticky;top:0;z-index:2;width:100%;padding:16px 16px 8px;background:#141210}
	.nav-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:10px;color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
	.nav-close:hover,.nav-close:focus-visible,.nav-close:active{background:rgba(232,82,31,.2);border-color:var(--brand);color:var(--brand-soft)}

	/* top-level rows (leaf + parent) */
	.nav-links>li.menu-item{position:static;display:flex;flex-wrap:wrap;align-items:center;width:100%;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.07)}
	.nav-links>li.menu-item>a{flex:1 1 auto;display:block;padding:15px 0;color:#E7E3DE;font-size:16px;font-weight:500;text-transform:none;letter-spacing:.01em}
	.nav-links>li.menu-item>a:hover{color:#fff}

	/* parent chevron */
	.nav-links .menu-item-has-children>a::after{display:none}
	.submenu-toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;background:rgba(232,82,31,.10);border:0;border-radius:8px;color:var(--brand);cursor:pointer;transition:background .2s,color .2s}
	.submenu-toggle:hover,.submenu-toggle:focus-visible,.submenu-toggle:active{background:rgba(232,82,31,.2);color:var(--brand-soft)}
	.submenu-toggle .chev{width:16px;height:16px;transition:transform .25s ease}
	.menu-item-has-children.submenu-open>.submenu-toggle{color:var(--brand-soft)}
	.menu-item-has-children.submenu-open>.submenu-toggle .chev{transform:rotate(180deg)}

	/* submenu accordion */
	.nav-links .sub-menu{position:static;display:flex;flex-direction:column;flex-basis:100%;width:100%;background:rgba(0,0,0,.22);border:0;border-radius:0;box-shadow:none;padding:0;margin:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
	.menu-item-has-children.submenu-open>.sub-menu{max-height:680px}
	.nav-links .sub-menu li{width:100%;padding:0 20px 0 14px;border-bottom:1px solid rgba(255,255,255,.05)}
	.nav-links .sub-menu li:last-child{border-bottom:0}
	.nav-links .sub-menu a{display:block;padding:12px 0;font-size:14px;color:#B7B2AC;white-space:normal}
	.nav-links .sub-menu a:hover{color:#fff;background:none}

	/* CTA pinned at the bottom of the panel */
	.nav-cta-li{display:block;margin-top:auto;padding:18px 20px 0}
	.nav-cta-li .nav-cta{display:block;text-align:center}
}

/* Logged-in: keep the panel below the mobile WP admin bar */
@media screen and (max-width:782px){
	body.admin-bar .nav-links{top:46px;height:calc(100dvh - 46px)}
}

/* ── Home teaser: AI & automation (links to /ai-automation) ──────────────── */
/* Readability standard applied locally: large, near-black body, capped width. */
.home-ai{background:var(--panel);color:var(--ink);padding:96px var(--gutter)}
.home-ai__inner{max-width:var(--maxw);margin:0 auto}
.home-ai__copy{max-width:42rem}
.home-ai .eyebrow{color:var(--brand);font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.home-ai h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,42px);line-height:1.12;letter-spacing:.005em;margin-bottom:18px}
.home-ai__lead{font-size:19px;line-height:1.68;color:var(--ink);max-width:42rem;margin-bottom:28px}
@media (max-width:680px){.home-ai{padding:64px 22px}}

/* ===========================================================================
   Embedded Partner Model (shared) -> template-parts/section-embedded-partner-model.php
   Mobile-first vertical spine; connected horizontal layout at >=880px.
   Values resolved to live tokens (accent --brand, dark bg --bg, fonts --display
   /--body, muted-on-dark --sub, node grays --line/--bg-soft).
   =========================================================================== */
.fd-epm{
	background:var(--bg);
	color:#fff;
	padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,4rem);
}
.fd-epm__inner{max-width:72rem;margin:0 auto;}
.fd-epm__eyebrow{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(1.125rem,0.9rem + 1.3vw,1.5rem);
	letter-spacing:.13em;
	text-transform:uppercase;
	color:var(--brand);
	margin:0 0 clamp(1.75rem,3vw,2.5rem);
}
.fd-epm__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.fd-epm__step{display:flex;flex-direction:row;gap:1.25rem;}
.fd-epm__marker{display:flex;flex-direction:column;align-items:center;flex:0 0 3.25rem;}
.fd-epm__node{
	width:3.25rem;height:3.25rem;border-radius:50%;
	border:2px solid var(--line);background:var(--bg-soft);
	display:flex;align-items:center;justify-content:center;
	font-family:var(--display);font-weight:700;font-size:1.0625rem;
	color:#fff;flex:0 0 auto;
}
.fd-epm__node--active{background:var(--brand);border-color:var(--brand);color:var(--bg);}
.fd-epm__connector{width:2px;background:var(--brand);flex:1 1 auto;margin-top:.4rem;min-height:1.5rem;}
.fd-epm__content{padding:.25rem 0 2rem;}
.fd-epm__title{
	font-family:var(--display);font-weight:700;
	text-transform:uppercase;letter-spacing:.012em;
	font-size:clamp(1.25rem,1rem + 1.2vw,1.6rem);line-height:1.05;
	color:#fff;margin:0 0 .65rem;
}
.fd-epm__body{font-size:1.0625rem;line-height:1.65;color:var(--sub);margin:0;max-width:42rem;}
.fd-epm__tail{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:.5rem;}
.fd-epm__sq{background:var(--brand);flex:0 0 auto;}
.fd-epm__sq--1{width:10px;height:10px;}
.fd-epm__sq--2{width:8px;height:8px;}
.fd-epm__sq--3{width:6px;height:6px;}
.fd-epm__sq--4{width:4px;height:4px;}
.fd-epm__taillabel{
	font-family:var(--body);font-weight:600;font-size:.7rem;
	letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:.25rem;white-space:nowrap;
}

@media (min-width:880px){
	.fd-epm__steps{flex-direction:row;align-items:flex-start;}
	.fd-epm__step{flex:1 1 0;flex-direction:column;gap:0;}
	.fd-epm__marker{flex-direction:row;align-items:center;flex:0 0 auto;width:auto;height:3.25rem;}
	.fd-epm__connector{height:2px;width:auto;flex:1 1 auto;margin-top:0;min-height:0;}
	.fd-epm__content{padding:1.25rem 1.75rem 0 0;}
	.fd-epm__tail{flex-direction:row;align-items:center;margin-top:0;margin-left:.6rem;gap:.45rem;}
	.fd-epm__taillabel{margin-top:0;margin-left:.5rem;}
}

/* Mobile (<880px): keep the marker rail at a fixed 3.25rem so the nowrap tail
   label can't widen step 3 and push node 03 / tail / content off the spine.
   Step gap widened and the tail label wraps within the rail so it never crowds
   the body copy. */
@media (max-width: 879.98px){
	.fd-epm__step{ gap: 1.75rem; }
	.fd-epm__marker{ flex: 0 0 3.25rem; min-width: 0; align-items: center; }
	.fd-epm__connector{ margin-left: auto; margin-right: auto; }
	.fd-epm__tail{ min-width: 0; align-items: center; }
	.fd-epm__taillabel{ align-self: center; text-align: center; max-width: 4.5rem; white-space: normal; line-height: 1.25; }
}

/* ===========================================================================
   Gravity Forms submit buttons -> match the header "Let's talk" CTA (.nav-cta):
   brand orange, white text, 7px radius, 12/24 padding, 700/14px/.02em, lighten
   to --brand-soft + lift on hover. Applies to every GF form, all variants.
   Re-points the GF orbital theme's primary color so the native button is orange
   (clean), then enforces the CTA shape. !important only where GF specificity
   (per-form inline #gform_wrapper_N vars / framework rules) requires it.
   =========================================================================== */
.gform_wrapper,
.gform-theme--orbital,
[data-form-theme="orbital"]{
	--gf-color-primary:#E8521F !important;
	--gf-color-primary-rgb:232,82,31 !important;
	--gf-color-primary-darker:#FF6B3D !important;   /* orbital uses -darker for hover; map to brand-soft to lighten like the CTA */
	--gf-color-primary-lighter:#FF6B3D !important;
	--gf-color-primary-contrast:#fff !important;
	--gf-color-primary-contrast-rgb:255,255,255 !important;
	--gf-color-in-ctrl-primary:#E8521F !important;
	--gf-color-in-ctrl-primary-rgb:232,82,31 !important;
	--gf-color-in-ctrl-primary-darker:#FF6B3D !important;
	--gf-color-in-ctrl-primary-lighter:#FF6B3D !important;
	--gf-color-in-ctrl-primary-contrast:#fff !important;
}
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform-footer input[type="submit"],
.gform_wrapper .gform-footer button,
.gform_wrapper input.gform_button,
.gform_wrapper button.gform_button{
	background-color:var(--brand) !important;
	color:#fff !important;
	border:0 !important;
	border-radius:7px !important;
	padding:12px 24px !important;
	font-family:var(--body);
	font-weight:700 !important;
	font-size:14px !important;
	letter-spacing:.02em;
	text-transform:none !important;
	line-height:1 !important;
	width:auto !important;
	display:inline-block;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
	box-shadow:none !important;
	transition:background-color .25s, transform .25s;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform-footer input[type="submit"]:hover,
.gform_wrapper .gform-footer button:hover,
.gform_wrapper input.gform_button:hover,
.gform_wrapper button.gform_button:hover{
	background-color:var(--brand-soft) !important;
	transform:translateY(-1px);
}
.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_footer button[type="submit"]:focus-visible,
.gform_wrapper .gform-footer button:focus-visible,
.gform_wrapper input.gform_button:focus-visible,
.gform_wrapper button.gform_button:focus-visible{
	outline:3px solid var(--brand);
	outline-offset:2px;
}

/* ===========================================================================
   fd-anim: reusable reveal-on-scroll (fade + slight rise). Hidden initial state
   is gated by .js-anim (added by assets/js/fd-anim.js) so content stays fully
   visible if JS is off/fails. One-shot: .is-visible is added once on scroll-in.
   =========================================================================== */
.fd-anim{transition:opacity .6s ease-out, transform .6s ease-out}
.js-anim .fd-anim{opacity:0;transform:translateY(16px)}
.fd-anim.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	.fd-anim,
	.js-anim .fd-anim,
	.fd-anim.is-visible{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ===========================================================================
   Diagram mobile reflow (<880px), matching the EPM breakpoint. Desktop
   (>=880px) keeps the existing SVG untouched. The switch is a property of the
   diagram component (via fulfill_diagram() / fulfill_diagram_mobile()), so it
   travels with the diagram to every page that uses it: the full-stack chain,
   the foundation-first stack, and the embedded partner model.
   =========================================================================== */
.fd-chain-m,.fd-found-m,.fd-epm-m{display:none}
@media (max-width:879.98px){
	/* Component-level switch: hide the SVG, show the mobile reflow, wherever a
	   reflowed diagram appears (homepage or any service/industry page). */
	.fd-diagram--rf{display:none}
	.fd-chain-m,.fd-found-m,.fd-epm-m{display:block}
	/* Each mobile diagram carries its own dark panel so it reads on ANY host
	   section (light or dark). */
	.fd-chain-m{margin-top:10px;background:var(--bg);border-radius:var(--radius);padding:28px 22px}

	/* A) full-stack chain -> vertical spine, one node per row */
	.fd-chain-m__eyebrow,.fd-found-m__eyebrow{
		font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.2em;
		text-transform:uppercase;color:var(--brand);margin:0 0 18px;
	}
	.fd-chain-m__list{display:flex;flex-direction:column}
	.fd-chain-m__node{display:flex;align-items:center;gap:14px;position:relative;padding-bottom:18px}
	.fd-chain-m__node:last-child{padding-bottom:0}
	.fd-chain-m__node:not(:last-child)::after{
		content:"";position:absolute;left:22px;top:44px;width:2px;height:18px;
		background:var(--brand);transform:translateX(-50%);
	}
	.fd-chain-m__icon{
		flex:0 0 44px;width:44px;height:44px;border-radius:10px;
		background:var(--bg-soft);border:1px solid var(--line);
		display:flex;align-items:center;justify-content:center;
	}
	.fd-chain-m__icon svg{width:24px;height:24px;display:block}
	.fd-chain-m__label{
		font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.06em;
		text-transform:uppercase;color:var(--ink-on-dark);line-height:1.1;
	}
	.fd-chain-m__cap{font-family:var(--body);font-size:14px;line-height:1.5;color:var(--muted);margin:18px 0 0}

	/* B) foundation-first: a matched dark panel (same as the chain) holding one
	   continuous built-up stack. Deepened/saturated gradient: deepest brand at the
	   FOUNDATION base, lightening upward to a medium-deep COMPOUNDING top (not pale,
	   not the bright CTA orange). WHITE text on every band passes AA.
	   No @supports gate (the bare-function form fails on iOS Safari). Fallback is via
	   the cascade: a SOLID deep orange (#AB3F1B, white 6.07:1) is declared first, then
	   the color-mix gradient; a browser that cannot parse the gradient keeps the solid.
	   Single direction cue: an upward chevron above the stack. */
	.fd-found-m{margin-top:26px}
	.fd-found-m__panel{background:var(--bg);border-radius:var(--radius);padding:28px 22px}
	.fd-found-m__up{display:block;text-align:center;line-height:0;margin:0 0 10px}
	.fd-found-m__up svg{width:22px;height:auto;display:inline-block}
	.fd-found-m__stack{
		border-radius:10px;overflow:hidden;
		background:#AB3F1B; /* deep solid fallback; white passes AA (6.07:1) */
		background:linear-gradient(180deg,
			color-mix(in srgb, var(--brand) 82%, var(--bg) 18%) 0%,
			color-mix(in srgb, var(--brand) 72%, var(--bg) 28%) 50%,
			color-mix(in srgb, var(--brand) 62%, var(--bg) 38%) 100%);
	}
	.fd-found-m__bar{position:relative;padding:18px 20px}
	.fd-found-m__bar + .fd-found-m__bar{border-top:1px solid color-mix(in srgb, var(--bg) 22%, transparent)}
	.fd-found-m__h{
		display:block;font-family:var(--display);font-weight:700;font-size:19px;
		letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;margin-bottom:6px;
	}
	.fd-found-m__s{display:block;font-family:var(--body);font-size:15px;line-height:1.45;color:#FFFFFF}
	.fd-found-m__cap{font-family:var(--body);font-size:14px;line-height:1.5;color:var(--muted);margin:22px 0 0}

	/* C) embedded partner model -> reuse the approved .fd-epm vertical spine
	   as a contained card. .fd-epm carries its own dark panel, so it reads on
	   the light About / AI sections. Container only: round the corners to match
	   the other two cards and trim the full-bleed padding for the column; the
	   spine markup and styling are untouched. */
	.fd-epm-m{margin-top:10px;border-radius:var(--radius);overflow:hidden}
	.fd-epm-m .fd-epm{padding:28px 22px}
}

/* ===========================================================================
   Dual-CTA fork, MERGED into the orange closing band (.cta-band). Cards-only
   markup lives in template-parts/section-dual-cta.php; this scopes its look to
   the orange band. Primary = white standout card (dark text + dark button, the
   recommended choice). Secondary = subdued card: a dark veil over the orange
   (rgba of --bg) so white text clears AA on the darkened surface, with a white
   outline so it stays clearly tappable. Tokens / brand-rgba only. Stacks <880px.
   =========================================================================== */
.cta-band__sub{max-width:54ch;margin:0 auto 34px;font-size:18px;line-height:1.55;color:#fff}
.cta-band .fd-fork__cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;text-align:left;max-width:760px;margin:0 auto}
.cta-band .fd-fork__card{border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column}
.cta-band .fd-fork__card--primary{background:#fff;box-shadow:0 22px 48px -26px rgba(14,14,17,.5)}
.cta-band .fd-fork__card--secondary{background:rgba(14,14,17,.28);border:1px solid rgba(255,255,255,.55)}
.cta-band .fd-fork__label{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;line-height:1.1}
.cta-band .fd-fork__card--primary .fd-fork__label{color:var(--ink)}
.cta-band .fd-fork__card--secondary .fd-fork__label{color:#fff}
.cta-band .fd-fork__line{font-size:17px;line-height:1.6;margin-bottom:24px;flex:1 1 auto}
.cta-band .fd-fork__card--primary .fd-fork__line{color:var(--ink)}
.cta-band .fd-fork__card--secondary .fd-fork__line{color:#fff}
.cta-band .fd-fork__btn{align-self:flex-start;margin-top:auto;font-size:16px}
/* primary button: dark on the white card (high contrast, the recommended action) */
.cta-band .fd-fork__card--primary .btn-primary{background:var(--bg);color:#fff}
.cta-band .fd-fork__card--primary .btn-primary:hover{background:var(--brand);color:#fff}
/* secondary button: white outline on the subdued card */
.cta-band .fd-fork__card--secondary .btn-secondary{display:inline-block;font-family:var(--body);font-weight:700;letter-spacing:.02em;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.7);padding:12px 24px;border-radius:7px;transition:background .25s,border-color .25s,transform .25s}
.cta-band .fd-fork__card--secondary .btn-secondary:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
@media (max-width:879.98px){
	.cta-band .fd-fork__cards{grid-template-columns:1fr;gap:16px}
	.cta-band .fd-fork__card{padding:26px 22px}
}

/* ===========================================================================
   Closing conversion zone: embedded form + quiet secondary link, MERGED into
   the orange closing band (.cta-band), alternative to the dual-CTA fork.
   White card for the form (matches the fork's primary-card treatment), quiet
   underlined link below for "Let's talk first". template-parts/
   section-closing-form.php.
   =========================================================================== */
.fd-closing{max-width:640px;margin:0 auto}
.fd-closing__form{background:#fff;border-radius:var(--radius);padding:32px 28px;box-shadow:0 22px 48px -26px rgba(14,14,17,.5);text-align:left}
.fd-closing__secondary{margin-top:26px;font-size:16px;color:#fff}
.fd-closing__secondary a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ===========================================================================
   Native help widget — floating button + panel, bottom right. Live for every
   visitor as of go-live (Freshworks GTM tag paused) — see inc/help-widget.php
   for the FULFILL_HELP_WIDGET_DISABLED kill switch. Dark theme, brand-orange
   accent, tokens only (no one-off colors).

   bottom:24px is the real, permanent placement — the temporary 100px
   coexistence offset (needed only while Freshworks' own bubble was still
   rendering in this exact spot) is gone now that Freshworks is confirmed
   paused; this is the "same placement as Freshworks" spot from the original
   spec, not a leftover.
   =========================================================================== */
.fd-help-widget{position:fixed;right:24px;bottom:24px;z-index:9999;font-family:var(--body)}
.fd-help-toggle{width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 28px -10px rgba(14,14,17,.55);transition:background .2s,transform .2s}
.fd-help-toggle:hover{background:var(--brand-soft);transform:translateY(-2px)}
.fd-help-toggle svg{width:26px;height:26px}

.fd-help-panel{position:absolute;right:0;bottom:70px;width:320px;max-width:calc(100vw - 48px);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px -20px rgba(0,0,0,.6);padding:20px}
.fd-help-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.fd-help-panel__header h3{font-family:var(--display);font-size:18px;font-weight:600;margin:0;color:var(--ink-on-dark)}
.fd-help-close{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.fd-help-close:hover{color:var(--ink-on-dark)}

.fd-help-form{display:flex;flex-direction:column;gap:10px}
/* The browser's own [hidden] UA rule (display:none) loses to the class rule
   above at equal specificity because author CSS comes later in the cascade
   — this is what let a "hidden" success-state form still render visibly.
   Explicit override restores the real hide. */
.fd-help-form[hidden]{display:none}
.fd-help-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.fd-help-form input[type=text],
.fd-help-form input[type=email],
.fd-help-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:9px 11px;color:var(--ink-on-dark);font-family:var(--body);font-size:14px}
.fd-help-form input:focus,
.fd-help-form textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.fd-help-form textarea{resize:vertical;min-height:70px}
.fd-help-hp{position:absolute;left:-9999px;top:-9999px}
.fd-help-submit{margin-top:4px;background:var(--brand);color:#fff;border:none;border-radius:7px;padding:11px 16px;font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer;transition:background .2s}
.fd-help-submit:hover{background:var(--brand-soft)}
.fd-help-submit:disabled{opacity:.6;cursor:default}

.fd-help-result{font-size:14px;line-height:1.5;color:var(--ink-on-dark)}
.fd-help-result--error{color:var(--brand-soft)}

@media (max-width:479.98px){
	.fd-help-widget{right:16px;bottom:16px}
	.fd-help-panel{width:calc(100vw - 32px);right:-8px}
}

/* BLOG: index grid (mirrors .work-grid/.work-card) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:var(--panel);border:1px solid var(--line-light);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -24px rgba(232,82,31,.5)}
.blog-card__thumb{aspect-ratio:1200/630;background:linear-gradient(135deg,#161520,#2A2230);display:flex;align-items:center;justify-content:center;overflow:hidden}
.blog-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card__body{padding:20px}
.blog-card__date{display:block;font-family:var(--body);font-size:13px;color:var(--muted-2);margin-bottom:8px}
.blog-card__title{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);line-height:1.25;margin-bottom:8px}
.blog-card__excerpt{font-size:15px;line-height:1.6;color:var(--muted-2);margin:0}
.blog-card__cta{display:inline-block;margin-top:16px;padding:10px 20px;font-size:13px}
.blog-empty{color:var(--sub);font-size:17px}
.blog-pagination{margin-top:40px}
.blog-pagination ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0}
.blog-pagination a,.blog-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:8px;border:1px solid var(--line-light);color:var(--sub);font-family:var(--body);font-size:14px}
.blog-pagination a:hover{border-color:var(--brand);color:var(--brand)}
.blog-pagination span.current{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:860px){
	.blog-grid{grid-template-columns:1fr}
}

/* BLOG: single post hero meta + featured image */
.blog-meta{margin-top:4px}
.blog-meta time{color:var(--muted);font-size:14px;letter-spacing:.02em}
/* Full-bleed on mobile: own section, no side padding, no radius, edge to
   edge. Contained to the site's standard wide layout width on desktop
   (matches every other section's --maxw wrap; nothing else on the site
   goes true 100vw full-bleed at desktop widths, and this naturally caps
   the rendered height without needing to crop). No margin of its own on
   either side: the hero's existing bottom padding (80px/50px) provides
   the gap above, and .resolved's existing top padding (110px/70px) on
   the article body provides the gap below, matching the site's own
   established hero-to-resolved rhythm used everywhere else instead of
   stacking an extra margin on top of it. */
.blog-featured{background:var(--bg);margin:0}
.blog-featured img{display:block;width:100%;height:auto}
@media (min-width:861px){
	.blog-featured{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding:0 var(--gutter)}
	.blog-featured img{border-radius:var(--radius)}
}

/* BLOG: post body subheadings, larger than the shared .page-body scale so
   long-form article hierarchy reads clearly at a glance, mobile included.
   Same 54px desktop ceiling as --fs-h2 (the site's existing top tier), just
   a taller mobile floor (34px vs the shared 28px) scoped to .blog-body only
   so other .page-body templates (service/industry/about/case study) are
   untouched. */
.blog-body h2{font-size:clamp(34px,5.5vw,54px)}

/* BLOG: sample-prompt callout boxes (post body) */
.fd-prompt{background:#fff;border:1px solid var(--line-light);border-left:4px solid var(--brand);border-radius:var(--radius);padding:24px 28px;margin:24px 0}
.fd-prompt p{font-family:var(--body);font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:16px;font-style:italic}
.fd-prompt p:last-of-type{margin-bottom:0}
.fd-copy-btn{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--brand);background:transparent;border:1px solid var(--brand);border-radius:6px;padding:8px 16px;cursor:pointer;transition:background .2s,color .2s;margin-top:4px}
.fd-copy-btn:hover{background:var(--brand);color:#fff}
.fd-copy-btn.is-copied{background:var(--brand);color:#fff}

/* BLOG: inline 3-step diagram (Pillow-rendered PNGs, desktop/mobile swap
   matching the same >=880px breakpoint the site's other diagrams use) */
.blog-diagram{margin:28px 0}
.blog-diagram img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.blog-diagram__mobile{display:block}
.blog-diagram__desktop{display:none}
@media (min-width:880px){
	.blog-diagram__mobile{display:none}
	.blog-diagram__desktop{display:block}
}