/* ==========================================================================
   Falcon Oasis — Beyond SEO
   Industrial design system: condensed display type, warm neutrals, square edges.
   ========================================================================== */

:root{
  --fo-primary:#a8541f;
  --fo-navy:#17181a;
  --fo-ink:#17181a;
  --fo-black:#0f1112;
  --fo-cream:#f7f4f0;
  --fo-panel:#f1ece6;
  --fo-line:#e6e1da;
  --fo-line-soft:#e1dbd3;
  --fo-field-line:#918878;
  --fo-rust:#a8541f;
  /* --fo-amber is calibrated for dark grounds only (6.69:1 on --fo-ink).
     On light grounds use --fo-amber-ink (5.44:1 on white). */
  --fo-amber:#e08a4a;
  --fo-amber-ink:#9a5a22;
  --fo-body:#55534f;
  --fo-mute:#6b6660;
  --fo-nav:#57534d;
  --fo-dim:#b5afa7;
  --fo-dim-strong:#e2ddd6;
  --fo-display:'Barlow Condensed',Barlow,'Arial Narrow',sans-serif;
  --fo-sans:Barlow,Helvetica,Arial,sans-serif;
  --fo-gutter:32px;
  /* Height of the sticky nav bar; anchor offsets and the mobile drawer key off it. */
  --fo-nav-h:88px;
}

*{box-sizing:border-box}
/* text-size-adjust stops iOS inflating body copy when a phone is turned to landscape. */
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
section[id],div[id]{scroll-margin-top:calc(var(--fo-nav-h) + 12px)}
body{margin:0;background:var(--fo-cream);font-family:var(--fo-sans);font-size:16px;color:var(--fo-ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--fo-rust);text-decoration:none}
a:hover{color:var(--fo-ink)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--fo-primary);color:#fff}

/* Keyboard focus. --fo-ink clears 3:1 against every ground in the palette
   (17.8:1 on white, 16.2:1 on cream); on dark grounds we flip to white. */
:focus-visible{outline:2px solid var(--fo-ink);outline-offset:2px}
.on-dark :focus-visible,.hero :focus-visible,.page-hero :focus-visible,
.cta-band :focus-visible,.site-footer :focus-visible,.top-bar :focus-visible,
.testimonial :focus-visible,.service-card--dark :focus-visible,
.svc-section--dark :focus-visible,.why-cols :focus-visible{outline-color:#fff}

/* Skip link: off-canvas until focused, then pinned top-left. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--fo-ink);color:#fff;
  font-family:var(--fo-sans);font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:14px 22px;text-decoration:none}
.skip-link:focus{left:0}
.skip-link:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.skip-link:hover{color:#fff}
/* <main tabindex="-1"> is the skip target. It is not tab-reachable, so a ring
   around the whole page body would only ever be noise. */
main[tabindex="-1"]:focus{outline:none}
h1,h2,h3,h4{font-family:var(--fo-display);font-weight:700;text-transform:uppercase;line-height:1.04;letter-spacing:0;margin:0}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--fo-gutter)}
.section{padding:92px var(--fo-gutter)}
.muted{color:var(--fo-body)}
.band{background:#fff;border-top:1px solid var(--fo-line);border-bottom:1px solid var(--fo-line)}
.band-cream{background:var(--fo-cream)}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

/* --- Eyebrow / kicker ---------------------------------------------------- */
.kick{display:flex;align-items:center;gap:12px;font-family:var(--fo-display);font-weight:600;font-size:15px;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--fo-rust);margin:0 0 18px}
.kick::before{content:"";flex:0 0 32px;height:2px;background:currentColor}
.kick-on-dark{color:var(--fo-amber)}
.numlabel{font-family:var(--fo-sans);font-weight:700;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--fo-rust)}
.numlabel-on-dark{color:var(--fo-amber)}
.diamond{width:9px;height:9px;background:var(--fo-primary);transform:rotate(45deg);display:block}

/* --- Buttons ------------------------------------------------------------- */
.btn-p,.btn-o{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:0;font-family:var(--fo-sans);font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;transition:background .16s,color .16s,border-color .16s}
.btn-p{background:var(--fo-primary);color:#fff!important;border:1px solid var(--fo-primary);padding:16px 30px}
.btn-p:hover{background:var(--fo-ink);border-color:var(--fo-ink);color:#fff!important}
/* The border is this control's only boundary, so it needs 3:1 (WCAG 1.4.11).
   #c7c1b8 was 1.63:1 on cream; #8a8378 clears it on white, cream and panel. */
.btn-o{background:transparent;color:var(--fo-ink);border:1px solid #8a8378;padding:16px 30px}
.btn-o:hover{background:var(--fo-primary);border-color:var(--fo-primary);color:#fff}
.btn-o-on-dark{color:#fff;border-color:rgba(255,255,255,.42)}
.btn-o-on-dark:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn-dark{background:var(--fo-ink);color:#fff!important;border-color:var(--fo-ink)}
.btn-dark:hover{background:var(--fo-primary);border-color:var(--fo-primary)}
.navlink{font-family:var(--fo-sans);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--fo-ink);border-bottom:2px solid var(--fo-primary);padding-bottom:4px;white-space:nowrap}
.navlink:hover,.navlink.is-active{color:var(--fo-rust)}

/* --- Chips --------------------------------------------------------------- */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;font-weight:600;color:var(--fo-body);background:var(--fo-cream);border:1px solid var(--fo-line);padding:6px 11px;display:inline-block}
.on-dark .chip,.chip-on-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:var(--fo-dim-strong)}

/* --- Cards / media ------------------------------------------------------- */
.card{background:#fff;border:1px solid var(--fo-line);border-radius:0}
.media-cover{position:relative;overflow:hidden;background:#e4ded6}
.media-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The WebP <picture> wrapper holds no in-flow content, so keep it from adding a line box. */
.media-cover picture{display:block}
.media-cover>span{position:absolute;left:0;bottom:0;z-index:2;font-family:var(--fo-sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:8px 12px;background:rgba(15,17,18,.72);max-width:100%}

/* --- Form fields --------------------------------------------------------- */
/* 16px is the floor: anything smaller makes iOS Safari zoom the page in when a
   field takes focus, and it never zooms back out. */
.fld{width:100%;max-width:100%;font-family:inherit;font-size:16px;color:var(--fo-ink);padding:13px 14px;border:1px solid var(--fo-field-line);border-radius:0;background:#fff}
.fld:focus-visible{outline:2px solid var(--fo-ink);outline-offset:2px;border-color:var(--fo-primary)}
.fld:focus{border-color:var(--fo-primary)}
.fld[aria-invalid="true"]{border-color:#a3231b}
/* #a3231b is 7.5:1 on white — the asterisk is not the only cue (required is on
   the input too), but it should still be legible rather than decorative. */
.req{color:#a3231b;font-weight:700}
.form-legend{font-size:13px;color:var(--fo-mute);margin:0 0 18px}
/* Honeypot: off-screen, not display:none, which bots learn to skip. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Top bar + header ---------------------------------------------------- */
.top-bar{background:var(--fo-black);color:#a9a39b;font-size:13px;letter-spacing:.02em}
.top-bar .wrap{display:flex;align-items:center;justify-content:space-between;padding:9px var(--fo-gutter);gap:20px;flex-wrap:wrap}
.top-bar-meta{display:flex;gap:20px}
.top-bar-meta a{color:var(--fo-amber)!important;font-weight:600}
.top-bar-meta a:hover{color:#fff!important}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.1) blur(14px);-webkit-backdrop-filter:saturate(1.1) blur(14px);border-bottom:1px solid var(--fo-line)}
.nav-bar{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);padding:0 var(--fo-gutter);min-height:var(--fo-nav-h);position:relative;flex-wrap:nowrap}
.brand{display:flex;align-items:center;color:inherit;flex-shrink:0;min-width:0}
.brand-logo{display:block;height:46px;width:auto;max-width:min(280px,52vw)}
.brand-name{font-family:var(--fo-display);font-weight:700;font-size:20px;line-height:1.1;display:block;text-transform:uppercase}
.brand-tag{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fo-mute);display:block}
.brand-hero-name{font-family:var(--fo-sans);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--fo-amber);margin:0 0 14px}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-cta--mobile{display:none}
.header-cta{border-radius:999px;padding:14px clamp(14px,1.7vw,22px);font-size:clamp(11.5px,1.15vw,13px)}
/* The <nav> landmark wraps the menu, so it takes over the flex duties the <ul>
   used to do directly. The mobile drawer still positions against .nav-bar,
   which is the nearest positioned ancestor either way. */
.primary-nav{display:flex;align-items:center;margin-left:auto;min-width:0}
.primary-menu{display:flex;align-items:center;gap:clamp(0px,.4vw,6px);list-style:none;margin:0 0 0 auto;padding:0;font-weight:600;font-size:clamp(11.5px,1.15vw,13.5px);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;min-width:0}
/* :not(.btn-p) matters — these are more specific than .btn-p, so without it the
   menu's transparent background wins over the CTA's fill and leaves the drawer
   button as white text on nothing. */
.primary-menu a:not(.btn-p){display:block;color:var(--fo-nav);padding:9px clamp(6px,.95vw,14px);border-radius:999px;background:transparent;transition:background .16s,color .16s}
.primary-menu a:not(.btn-p):hover{color:var(--fo-ink);background:var(--fo-panel)}
.primary-menu .current-menu-item>a,.primary-menu .current_page_item>a,.primary-menu .current-menu-ancestor>a,.primary-menu .current_page_ancestor>a{color:var(--fo-ink);background:var(--fo-panel)}
.primary-menu .menu-cta{display:none}
.nav-toggle{display:none;align-items:center;gap:8px;background:#fff;border:1px solid #d5cfc6;border-radius:999px;padding:10px 14px;font-family:var(--fo-sans);font-weight:700;font-size:13px;color:var(--fo-ink);cursor:pointer;min-height:42px}
.nav-toggle-bars{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px}
.nav-toggle-bars span{display:block;height:2px;width:100%;background:var(--fo-ink);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- Home hero ----------------------------------------------------------- */
.hero{position:relative;background:var(--fo-ink);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg.media-cover img{opacity:.42;filter:saturate(.75) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(92deg,rgba(15,17,18,.94) 0%,rgba(15,17,18,.8) 46%,rgba(15,17,18,.34) 100%)}
.hero-inner{position:relative;padding:118px var(--fo-gutter) 96px;width:100%}
.hero-copy{display:grid;gap:26px;max-width:100%}
.hero-badge{margin:0;display:flex;align-items:center;gap:14px;font-family:var(--fo-display);font-weight:600;font-size:16px;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--fo-amber)}
.hero-badge::before{content:"";flex:0 0 46px;height:2px;background:var(--fo-primary)}
.hero h1{margin:0;max-width:17ch;font-size:clamp(38px,6.8vw,84px);line-height:.96;color:#fff}
.hero-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#cfc9c1;margin:0;max-width:56ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;padding-top:4px}
.hero-actions .btn-p,.hero-actions .btn-o{padding:18px 34px;font-size:15px}

/* --- Trust strip (proof line under heroes) ------------------------------- */
.trust-strip{position:relative;border-top:1px solid rgba(255,255,255,.14);background:rgba(15,17,18,.72)}
.trust-strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 var(--fo-gutter)}
.trust-item{padding:20px 16px 20px 0;display:flex;align-items:center;gap:10px;color:#c9c4bd;font-size:14px;font-weight:600;letter-spacing:.04em}
.trust-item .diamond{flex:0 0 7px;width:7px;height:7px}
.proof-line{font-size:13.5px;font-weight:500;line-height:1.5;letter-spacing:.02em;color:var(--fo-mute);margin:0}
.proof-line-on-dark{color:#928c84}

/* --- Stats bar ----------------------------------------------------------- */
.stats{background:#fff;border-bottom:1px solid var(--fo-line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 var(--fo-gutter)}
.stats-grid>div{padding:40px 30px;border-right:1px solid var(--fo-line)}
.stats-grid>div:first-child{padding-left:0}
.stats-grid>div:last-child{padding-right:0;border-right:0}
.stat-value{font-family:var(--fo-display);font-weight:700;font-size:clamp(36px,4vw,54px);line-height:1;color:var(--fo-ink)}
.stats-grid>div:last-child .stat-value{color:var(--fo-rust)}
.stat-label{margin-top:8px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fo-mute)}

/* --- Section heads ------------------------------------------------------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:52px}
.section-head h2,.section h2{font-size:clamp(30px,4.4vw,52px);margin:0;max-width:24ch}
.section-lead{font-size:18px;line-height:1.6;color:var(--fo-body);margin:16px 0 0;max-width:62ch}

/* --- Grids --------------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}

/* --- Service cards (home) ------------------------------------------------ */
.service-card{background:#fff;border:1px solid var(--fo-line);border-top:3px solid var(--fo-ink);padding:34px;display:grid;gap:14px;align-content:start;color:var(--fo-ink);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.service-card:hover{border-top-color:var(--fo-primary);box-shadow:0 18px 40px -28px rgba(23,24,26,.55);transform:translateY(-3px);color:var(--fo-ink)}
.service-card h3{margin:0;font-size:clamp(24px,2.6vw,32px);line-height:1.06}
.service-card p{margin:0;font-size:16px;line-height:1.62;color:var(--fo-body)}
.service-card--dark{background:var(--fo-ink);border-color:var(--fo-ink);border-top-color:var(--fo-primary);color:#fff}
.service-card--dark:hover{border-top-color:var(--fo-amber);box-shadow:0 18px 40px -28px rgba(23,24,26,.75);color:#fff}
.service-card--dark h3{color:#fff}
.service-card--dark p{color:#bcc8d3}
.service-card--dark .numlabel{color:var(--fo-amber)}
.service-card--dark .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:var(--fo-dim-strong)}

/* --- Industries (home split) --------------------------------------------- */
.industries-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start;min-width:0}
.industry-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--fo-line);border:1px solid var(--fo-line);min-width:0}
.industry-list li{min-width:0;display:flex}
.industry-list a{flex:1;background:#fff;padding:22px clamp(14px,1.8vw,24px);color:var(--fo-ink);font-family:var(--fo-display);font-weight:600;font-size:clamp(17px,1.9vw,22px);letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;overflow-wrap:anywhere;height:100%;transition:background .16s,color .16s}
.industry-list a::after{content:"→";color:var(--fo-amber-ink);flex:none}
.industry-list a:hover{background:var(--fo-ink);color:#fff}
.industry-list a:hover::after{color:var(--fo-amber)}

/* --- Why band (dark, numbered columns) ---------------------------------- */
.why-band{background:var(--fo-ink);color:#fff}
.why-band h2{color:#fff;max-width:30ch;font-size:clamp(30px,4.2vw,50px)}
.why-cols{margin-top:54px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.16)}
.why-cols>div{background:var(--fo-ink);padding:30px 26px;display:grid;gap:12px;align-content:start}
.why-cols>div:first-child{padding-left:0}
.why-cols>div:last-child{padding-right:0}
.why-cols .num{font-family:var(--fo-display);font-weight:700;font-size:15px;letter-spacing:.18em;color:var(--fo-amber)}
.why-cols h3{margin:0;font-weight:600;font-size:clamp(21px,2.2vw,26px);line-height:1.1;color:#fff}
.why-cols p{margin:0;font-size:16px;line-height:1.6;color:var(--fo-dim)}

/* --- Contract options --------------------------------------------------- */
.contract-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.contract-card{background:#fff;border:1px solid var(--fo-line);padding:26px 22px;display:grid;gap:8px;align-content:start}
.contract-card .diamond{margin-bottom:6px}
.contract-card h3{margin:0;font-size:24px;color:var(--fo-ink)}
.contract-card p{margin:0;font-size:15px;line-height:1.55;color:var(--fo-body)}
.band .contract-card,.band-cream .contract-card{background:var(--fo-cream)}

/* --- Closing CTA -------------------------------------------------------- */
.cta-band{background:var(--fo-black);color:#fff}
.cta-band .wrap{padding:84px var(--fo-gutter)}
.cta-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4.5vw,64px);align-items:center;min-width:0}
.cta-split--single{grid-template-columns:1fr}
.cta-band h2{margin:0;font-size:clamp(30px,4.6vw,56px);color:#fff}
.cta-band .muted{color:var(--fo-dim);font-size:19px;line-height:1.55;max-width:46ch;margin:0}
.cta-copy{display:grid;gap:18px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.cta-actions .btn-p,.cta-actions .btn-o{padding:18px 32px;font-size:15px}
.cta-checklist{border-left:2px solid var(--fo-primary);padding-left:32px;display:grid;gap:18px}
.cta-checklist-title{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fo-amber)}
.cta-checklist ol{list-style:none;counter-reset:cta;margin:0;padding:0;display:grid;gap:12px;font-size:17px;line-height:1.5;color:var(--fo-dim-strong)}
.cta-checklist li{counter-increment:cta;display:flex;gap:12px}
.cta-checklist li::before{content:counter(cta,decimal-leading-zero);color:var(--fo-amber);font-weight:700;flex:none}

/* --- Page heroes (interior pages) --------------------------------------- */
.page-hero{background:var(--fo-ink);color:#fff;position:relative;overflow:hidden}
/* Direct child only — the nested .trust-strip .wrap must keep its own padding. */
.page-hero>.wrap{padding:74px var(--fo-gutter) 62px;position:relative}
.page-hero h1{margin:0 0 18px;font-size:clamp(32px,5vw,66px);line-height:.98;max-width:26ch;color:#fff}
.page-hero .lead{font-size:clamp(16px,1.5vw,19px);line-height:1.58;color:#cfc9c1;margin:0;max-width:60ch}
/* Column flex: the copy sits at the bottom of the min-height and the trust
   strip stacks beneath it. A row flex made the strip a sibling column and
   squeezed the hero copy to a fraction of the page width. */
.page-hero-media{min-height:420px;display:flex;flex-direction:column;justify-content:flex-end}
.page-hero-bg{position:absolute;inset:0}
.page-hero-bg.media-cover img{opacity:.34;filter:saturate(.7) contrast(1.05)}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(92deg,rgba(15,17,18,.96) 0%,rgba(15,17,18,.82) 50%,rgba(15,17,18,.42) 100%)}
.page-hero>.wrap.page-hero-inner{position:relative;padding:88px var(--fo-gutter) 66px;width:100%}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#928c84;margin:0 0 22px}
.breadcrumbs a{color:#928c84}
.breadcrumbs a:hover{color:var(--fo-amber)}
.breadcrumbs [aria-current]{color:var(--fo-amber)}
.breadcrumbs-sep{opacity:.6}
.anchor-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.anchor-chip{border:1px solid rgba(255,255,255,.3);color:var(--fo-dim-strong);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;transition:background .16s,border-color .16s,color .16s}
.anchor-chip:hover{background:var(--fo-primary);border-color:var(--fo-primary);color:#fff}

/* --- Services hub: alternating split sections --------------------------- */
.svc-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:start;min-width:0}
.svc-copy{display:grid;gap:18px;align-content:start;min-width:0}
.svc-copy h2{margin:0;font-size:clamp(28px,3.8vw,46px);line-height:1.02}
.svc-copy p{margin:0;font-size:17px;line-height:1.65;color:var(--fo-body)}
.svc-copy .btn-p,.svc-copy .btn-dark{justify-self:start;padding:15px 26px}
.svc-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--fo-line);border:1px solid var(--fo-line);min-width:0;align-self:start}
.svc-roles>span{background:#fff;padding:20px 22px;font-size:16px;font-weight:600;color:var(--fo-ink);display:flex;align-items:center}
.svc-roles--wide{grid-template-columns:repeat(4,minmax(0,1fr));align-self:stretch}
.svc-split--flip .svc-copy{order:2}
.svc-split--flip .svc-roles{order:1}
.svc-section{background:#fff;border-bottom:1px solid var(--fo-line)}
.svc-section--alt{background:var(--fo-cream)}
.svc-section--dark{background:var(--fo-ink);color:#fff;border-bottom-color:var(--fo-ink)}
.svc-section--dark .svc-copy h2{color:#fff}
.svc-section--dark .svc-copy p{color:var(--fo-dim)}
.svc-section--dark .svc-roles{grid-template-columns:1fr;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.18)}
.svc-section--dark .svc-roles>span{background:var(--fo-ink);color:#fff;justify-content:space-between;gap:20px}
.svc-section--dark .svc-roles>span em{font-style:normal;color:var(--fo-amber);font-weight:600}

/* --- Editorial content -------------------------------------------------- */
.entry-content{font-size:16.5px;line-height:1.7;color:var(--fo-body);max-width:74ch}
/* Long-form prose keeps the condensed family but drops uppercase, which reads
   better than shouting a full sentence of body-copy heading. */
.entry-content h2,.entry-content h3{text-transform:none;letter-spacing:-.005em;color:var(--fo-ink)}
.entry-content h2{font-size:clamp(26px,3vw,34px);margin:1.7em 0 .5em}
.entry-content h3{font-size:clamp(20px,2.2vw,24px);margin:1.5em 0 .45em}
.entry-content h2:first-child,.entry-content h3:first-child{margin-top:0}
.entry-content p{margin:0 0 1.1em}
.entry-content ul,.entry-content ol{margin:0 0 1.3em;padding-left:1.2em}
.entry-content li{margin:0 0 .5em}
.entry-content strong{color:var(--fo-ink)}
.entry-content a{border-bottom:1px solid rgba(168,84,31,.4)}
.entry-content a:hover{border-bottom-color:var(--fo-ink)}

/* Spec tables. The wrapper scrolls, never the page — a 4-column table at 360px
   would otherwise push the whole document sideways. */
.table-scroll{overflow-x:auto;margin:0 0 1.5em;border:1px solid var(--fo-line);background:#fff;-webkit-overflow-scrolling:touch}
.entry-content table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px;line-height:1.5}
.entry-content caption{caption-side:top;text-align:left;font-family:var(--fo-sans);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fo-mute);padding:14px 16px 0}
.entry-content th,.entry-content td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--fo-line-soft);vertical-align:top}
.entry-content thead th{font-family:var(--fo-sans);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fo-ink);background:var(--fo-cream);border-bottom:1px solid var(--fo-line);white-space:nowrap}
.entry-content tbody th{font-weight:700;color:var(--fo-ink);white-space:nowrap}
.entry-content tbody tr:last-child th,.entry-content tbody tr:last-child td{border-bottom:0}

.roles-block{padding:0 0 30px;margin:0 0 34px;border-bottom:1px solid var(--fo-line)}
.service-cta{margin-top:46px;padding-top:30px;border-top:1px solid var(--fo-line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.faq{margin-top:56px}
.faq h2{font-size:clamp(26px,3vw,36px);margin:0 0 22px}
.faq-item{border:1px solid var(--fo-line);border-left:3px solid var(--fo-primary);background:#fff;padding:22px 24px;margin-bottom:12px}
.faq-item h3{font-size:21px;margin:0 0 8px;text-transform:none}
.faq-item p{margin:0;color:var(--fo-body);font-size:15.5px;line-height:1.6}

/* --- Icons / badges ----------------------------------------------------- */
.icon-box{width:44px;height:44px;background:var(--fo-cream);border:1px solid var(--fo-line);margin-bottom:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--fo-primary)}
.icon-box svg{width:22px;height:22px;display:block}
.compliance-badge{min-width:170px;min-height:58px;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;background:#fff;border:1px solid var(--fo-line);color:var(--fo-ink);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.compliance-badge__icon{width:30px;height:30px;flex:0 0 30px;display:inline-flex;align-items:center;justify-content:center;background:var(--fo-cream);color:var(--fo-primary)}
.compliance-badge__icon svg{width:18px;height:18px;display:block}
.compliance-row{display:flex;align-items:center;gap:40px;flex-wrap:wrap;padding:50px var(--fo-gutter)}
.compliance-badges{display:flex;gap:18px;flex:1;flex-wrap:wrap}

/* --- About / generic split ---------------------------------------------- */
/* Stretch, not start: the image sets the row height and the copy grows to meet
   it, so neither column ends in a stranded block of empty space. */
.about-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4.5vw,64px);align-items:stretch}
.about-split__intro{margin-top:20px}
.about-split__media{min-height:clamp(300px,26vw,380px)}

/* --- Long-form body rows ------------------------------------------------ */
/* Each heading hangs in a left rail beside its own prose, so the row fills the
   container with content. A single prose column cannot: widen it and the lines
   get unreadable, cap it and the leftover width reads as dead space. Shared by
   the About and Industries bodies. */
.about-body{padding-top:0}
.industries-body{margin-top:56px}
.prose-lead{max-width:64ch;font-size:18px;margin-bottom:44px}
.prose-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(20px,3.4vw,56px);padding:0 0 44px}
/* Keyed off the preceding row rather than :first-child, so a lead paragraph
   above the first row does not leave a stray rule under itself. */
.prose-row+.prose-row{border-top:1px solid var(--fo-line);padding-top:44px}
.prose-row:last-child{padding-bottom:0}
.prose-row__head{align-self:start}
.prose-row__head .numlabel{display:block;margin-bottom:14px}
/* Keeps the theme's condensed display face; .section h2 would otherwise size
   these as full page headings. */
.prose-row__head h2{font-size:clamp(22px,2.4vw,32px);max-width:none;color:var(--fo-ink)}
.prose-row__body{max-width:none;font-size:17px}
.prose-row__body>:first-child{margin-top:0}
.prose-row__body>:last-child{margin-bottom:0}
/* Three columns of prose need the rail's width too. */
.prose-row__wide{grid-column:1/-1;max-width:none}
.prose-row__wide .table-scroll{margin:0}
.band-row{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:64px var(--fo-gutter)}
.band-row h2{font-size:clamp(26px,3vw,36px)}
.pillar-card{background:#fff;border:1px solid var(--fo-line);border-top:3px solid var(--fo-ink);padding:32px}
.pillar-card .numlabel{display:block;margin-bottom:14px}
.pillar-card h3{font-size:24px;margin:0 0 10px}
.pillar-card p{margin:0;font-size:15.5px;line-height:1.62;color:var(--fo-body)}

/* --- Industries page cards ---------------------------------------------- */
.industry-tile{border:1px solid var(--fo-line);background:#fff;color:inherit;display:block;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.industry-tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(23,24,26,.5);color:inherit}
.industry-tile .media-cover{height:170px}
.industry-tile .body{padding:24px}
.industry-tile h3{font-size:24px;margin:0 0 8px}
.industry-tile p{margin:0;font-size:15px;line-height:1.6;color:var(--fo-body)}

/* --- Testimonial -------------------------------------------------------- */
.testimonial{background:var(--fo-ink);color:#fff;padding:64px 48px;text-align:center;border-top:3px solid var(--fo-primary)}
/* Pinned to a weight we actually load, so the glyph is not synthesised. */
.testimonial .mark{font-family:var(--fo-display);font-weight:600;font-size:56px;color:var(--fo-amber);line-height:.7;margin-bottom:18px}
.testimonial p{font-size:clamp(19px,2.2vw,24px);line-height:1.5;font-weight:500;margin:0 auto 22px;max-width:700px}
.testimonial .cite{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fo-dim)}

/* --- Contact ------------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;padding:80px var(--fo-gutter)}
.contact-form-card{padding:40px}
.contact-form-card h2{font-size:30px;margin:0 0 26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-grid label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fo-mute);margin-bottom:7px}
.side-card{padding:22px;display:flex;gap:14px;align-items:flex-start}
.side-icon{width:42px;height:42px;background:var(--fo-cream);border:1px solid var(--fo-line);flex:none;display:flex;align-items:center;justify-content:center;color:var(--fo-primary)}
.side-icon svg{width:21px;height:21px;display:block}
.side-icon.wa{background:#e6f7ee;border-color:#c8ecd8;color:#168a4b}
.side-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fo-mute)}
.side-value{font-family:var(--fo-display);font-size:22px;font-weight:700;text-transform:uppercase;overflow-wrap:anywhere}
.side-value a{color:var(--fo-ink)}
.side-value a:hover{color:var(--fo-primary)}
.quote-success{text-align:center;padding:40px 20px}
.card iframe,.contact-grid iframe{max-width:100%;width:100%!important}

/* --- Footer ------------------------------------------------------------- */
.site-footer{background:var(--fo-panel);color:var(--fo-body);border-top:1px solid var(--fo-line-soft)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:48px;padding:66px var(--fo-gutter) 34px}
.footer-brand{margin-bottom:16px}
.footer-brand .brand-logo{height:40px;max-width:220px}
.footer-about{font-size:15px;line-height:1.6;margin:0 0 18px;max-width:40ch}
.footer-contact{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.footer-contact a{color:var(--fo-ink);font-weight:600}
.footer-contact a:hover{color:var(--fo-rust)}
/* h2, not h4: these are top-level footer sections, and h4 after the page's
   h2/h3 body content was a level skip on every page. Visual size is unchanged. */
.footer-col h2{color:var(--fo-ink);font-family:var(--fo-sans);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em;line-height:1.04;margin:0 0 16px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px}
.footer-col a{color:var(--fo-body)}
.footer-col a:hover{color:var(--fo-rust)}
.footer-bottom{border-top:1px solid var(--fo-line-soft)}
.footer-bottom .wrap{padding:20px var(--fo-gutter);display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#6f6a63;gap:24px;flex-wrap:wrap}

/* --- Floating / mobile CTAs -------------------------------------------- */
.wa-float{position:fixed;right:24px;bottom:88px;z-index:60;width:58px;height:58px;border-radius:100px;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -10px rgba(15,17,18,.5)}
/* env() insets keep the bar clear of the iPhone home indicator and of the
   notch when the phone is held in landscape. */
.mobile-cta-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--fo-black);gap:8px;border-top:1px solid rgba(255,255,255,.12);padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.mobile-cta-bar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;padding:13px 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.mobile-cta-call{background:rgba(255,255,255,.12)}
.mobile-cta-wa{background:#25d366}
.mobile-cta-quote{background:var(--fo-primary)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .primary-menu{gap:0}
  .primary-menu a:not(.btn-p){padding:9px 8px}
}
@media (max-width:1100px){
  .grid-5,.contract-grid{grid-template-columns:repeat(3,1fr)}
  .why-cols{grid-template-columns:repeat(2,1fr)}
  .why-cols>div{padding:26px 22px}
  .why-cols>div:nth-child(odd){padding-left:0}
  .why-cols>div:nth-child(even){padding-right:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .industries-split{grid-template-columns:1fr}
}
@media (max-width:960px){
  :root{--fo-gutter:20px;--fo-nav-h:68px}
  /* backdrop-filter on a sticky element repaints the blur on every scroll frame,
     which is the main source of scroll jank on mid-range phones. */
  .site-header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-bar{gap:12px}
  .brand-logo{height:40px;max-width:calc(100% - 8px)}
  .brand{max-width:calc(100% - 150px)}
  /* Drawer mode: the nav wrapper carries no layout, .nav-actions takes the slack. */
  .primary-nav{margin-left:0}
  .nav-actions{gap:8px;margin-left:auto}
  .header-cta--desktop{display:none}
  .header-cta--mobile{display:inline-flex;padding:11px 14px;font-size:12px;min-height:44px}
  .nav-toggle{display:inline-flex;padding:10px 12px;min-height:44px}
  .nav-toggle-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  /* dvh tracks the collapsing mobile URL bar; vh is the fallback for older engines. */
  /* No horizontal padding on the drawer itself: the rows, their dividers and the
     active highlight run the full width, and each label carries the page gutter
     instead, so it lines up with the logo above rather than sitting flush against
     the edge of its own highlight. */
  .primary-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:8px 0 20px;border-bottom:1px solid var(--fo-line);gap:0;box-shadow:0 16px 32px rgba(23,24,26,.14);max-height:calc(100vh - var(--fo-nav-h) - 8px);max-height:calc(100dvh - var(--fo-nav-h) - 8px);overflow-y:auto;overscroll-behavior:contain;z-index:60;margin:0;font-size:14px;white-space:normal}
  .primary-menu.is-open{display:flex}
  .primary-menu li{border-bottom:1px solid #f0ebe4}
  .primary-menu a:not(.btn-p){display:block;padding:15px var(--fo-gutter);border-radius:0;font-size:15px;letter-spacing:.08em}
  .primary-menu a:not(.btn-p):hover{background:transparent;color:var(--fo-primary)}
  .primary-menu .menu-cta{display:block;border-bottom:0;padding:16px var(--fo-gutter) 0}
  .primary-menu .menu-cta a.btn-p{display:flex;justify-content:center;width:100%;padding:15px 18px;border-radius:0}
  body.nav-open{overflow:hidden}
  .top-bar .wrap{gap:8px}
  .top-bar-meta{gap:14px;flex-wrap:wrap}
  .section{padding:56px var(--fo-gutter)}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .hero-inner{padding-top:64px;padding-bottom:0}
  .hero-copy{gap:20px}
  .hero h1{max-width:none}
  .hero-actions{padding-bottom:56px}
  .hero-actions .btn-p,.hero-actions .btn-o{flex:1 1 180px;padding:16px 24px}
  .trust-strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .trust-item{padding:14px 12px 14px 0;font-size:13px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid>div{padding:26px 20px;border-bottom:1px solid var(--fo-line)}
  .stats-grid>div:nth-child(odd){padding-left:0}
  .stats-grid>div:nth-child(even){padding-right:0;border-right:0}
  .stats-grid>div:nth-last-child(-n+2){border-bottom:0}
  .grid-2,.grid-3,.grid-5,.contract-grid,.form-grid,.footer-grid,.about-split,.svc-split{grid-template-columns:1fr}
  /* No width left for a rail: the heading sits above its prose instead. */
  .prose-row{grid-template-columns:1fr;gap:14px;padding:0 0 30px}
  .prose-row+.prose-row{padding-top:30px}
  .prose-lead{margin-bottom:30px}
  .service-card{padding:26px}
  .industry-list{grid-template-columns:1fr}
  .why-cols{grid-template-columns:1fr;margin-top:34px}
  .why-cols>div{padding:24px 0}
  .svc-split--flip .svc-copy{order:1}
  .svc-split--flip .svc-roles{order:2}
  .svc-roles--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-split{grid-template-columns:1fr;gap:34px}
  .cta-band .wrap{padding-top:56px;padding-bottom:56px}
  .cta-checklist{padding-left:22px}
  .page-hero>.wrap{padding-top:48px;padding-bottom:44px}
  .page-hero-media{min-height:300px}
  .page-hero>.wrap.page-hero-inner{padding-top:56px;padding-bottom:44px}
  .page-hero h1{max-width:none}
  .contact-grid,.compliance-row,.band-row{padding-top:44px;padding-bottom:44px}
  .contact-form-card{padding:24px}
  .compliance-row,.band-row{flex-direction:column;align-items:flex-start;gap:20px}
  .compliance-badges{width:100%;gap:12px}
  .compliance-badge{min-width:0;flex:1 1 calc(50% - 12px)}
  .testimonial{padding:36px 24px}
  .footer-grid{padding-top:44px;padding-bottom:28px;gap:32px}
  .footer-bottom .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  .mobile-cta-bar{display:flex}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .wa-float{display:none}
  /* Comfortable thumb targets for the link lists that carry the contact routes. */
  .top-bar-meta a,.breadcrumbs a{display:inline-block;padding:5px 0}
  .footer-contact a,.footer-col a{display:inline-flex;align-items:center;min-height:38px}
  .anchor-chip{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:640px){
  /* max() keeps content off the notch when a phone is held sideways. */
  :root{--fo-gutter:max(16px,env(safe-area-inset-left))}
  .top-bar{font-size:12px}
  .top-bar-text{width:100%}
  .top-bar-meta{width:100%;justify-content:space-between}
  .brand-logo{height:36px}
  .brand{max-width:calc(100% - 140px)}
  .header-cta--mobile{padding:10px 12px;font-size:11.5px;min-height:44px}
  .hero-badge{font-size:13px;letter-spacing:.16em}
  .hero-badge::before{flex-basis:28px}
  .kick{font-size:13px;letter-spacing:.16em}
  .kick::before{flex-basis:22px}
  .trust-strip .wrap{grid-template-columns:1fr}
  .trust-item{padding:11px 0}
  .stats-grid{grid-template-columns:1fr}
  .stats-grid>div{padding:22px 0;border-right:0;border-bottom:1px solid var(--fo-line)}
  .stats-grid>div:last-child{border-bottom:0}
  .svc-roles{grid-template-columns:1fr}
  .btn-p,.btn-o{width:100%}
  .hero-actions .btn-p,.hero-actions .btn-o,.cta-actions .btn-p,.cta-actions .btn-o{flex:1 1 100%}
  .navlink,.header-cta,.footer-cta,.svc-copy .btn-p,.svc-copy .btn-dark{width:auto}
  .compliance-badge{flex:1 1 100%}
  .testimonial{padding:28px 20px}
  .mobile-cta-bar a{font-size:11.5px;padding:12px 6px}
}

/* A tap on a touch screen leaves :hover latched with no way to exit it, so the
   card lift would stay stuck on whichever card was last touched. */
@media (hover:none){
  .service-card:hover,.industry-tile:hover{transform:none;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .service-card:hover,.industry-tile:hover{transform:none}
}