/*
Theme Name: Nakadhilu GreenTech & Construction CC
Theme URI: https://nakadhilu-greentech.com
Description: Kadence child theme for Nakadhilu GreenTech & Construction CC — proudly Namibian construction + green technology. Warm land-rooted register: teal action, olive + terracotta earth accents, ink grounds. Space Grotesk + Inter.
Author: Flashcloud
Template: kadence
Version: 1.0.0
*/

/* ============================================================
   1. FONTS (self-hosted variable woff2, latin subset)
   ============================================================ */
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ============================================================
   2. TOKENS — teal = ACTION · olive + terracotta = earth accents · ink = grounds
   ============================================================ */
:root{
  --ng-teal:#14B8A6;        /* primary action: buttons, links, accents */
  --ng-teal-deep:#0E7C70;   /* deep teal ground + hover */
  --ng-teal-ink:#063b35;    /* text on teal buttons */
  --ng-olive:#6B7A3A;       /* olive earth accent */
  --ng-olive-deep:#46521F;
  --ng-terra:#C17A54;       /* terracotta warmth accent */
  --ng-terra-soft:#D9A07E;  /* terracotta on dark */
  --ng-ink:#221E1A;         /* primary ground + body ink */
  --ng-ink-900:#1A1714;     /* deepest ground (footer, hero base) */
  --ng-ink-soft:#3A352E;    /* secondary text on light */
  --ng-muted:#7A7064;       /* tertiary text */
  --ng-stone:#938878;
  --ng-sand:#F2ECDF;        /* warm section ground */
  --ng-sand-deep:#E7DECB;   /* hairline / card border on sand */
  --ng-paper:#FAF6EE;       /* page ground */
  --ng-line:#E4DCCC;        /* hairline / card border */
  --ng-line-dark:rgba(242,236,223,.16);
  --ng-text-ondark:#F2ECDF;
  --ng-text-ondark-muted:#C9C0B0;
  --ng-font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ng-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ng-r-sm:8px;--ng-r-md:14px;--ng-r-lg:18px;--ng-r-pill:999px;
  --ng-shadow-card:0 14px 38px -18px rgba(34,30,26,.30);
  --ng-shadow-soft:0 6px 20px -10px rgba(34,30,26,.20);
  --ng-container:1180px;
}

/* ============================================================
   3. FRAME KILLERS (Kadence light-theme defaults → edge-to-edge)
   Paper on BODY only (never .site-container — cascades into dark footer).
   ============================================================ */
body{background:var(--ng-paper);color:var(--ng-ink);font-family:var(--ng-font-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
.site-container,.content-container,.content-area,.site-main,.entry-content{background:transparent}
.single-page .entry-content,.page .entry-content{margin-top:0!important}
.content-area{margin:0!important}
.page .entry-hero,.entry-hero.page-hero-section{display:none!important}
.wp-site-blocks>main{flex:0 0 auto}
.page .entry-title,.single .entry-title{display:none}

/* ============================================================
   4. TYPOGRAPHY + PRIMITIVES
   ============================================================ */
h1,h2,h3,h4{font-family:var(--ng-font-display);font-weight:700;line-height:1.1;letter-spacing:-.015em;color:var(--ng-ink)}
a{color:var(--ng-teal-deep)}
.ng-wrap{max-width:var(--ng-container);margin:0 auto;padding:0 40px}
.ng-section{padding:88px 0}
.ng-center{text-align:center}
.ng-eyebrow{font-family:var(--ng-font-display);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ng-teal-deep);margin:0 0 14px}
.ng-eyebrow.on-dark{color:var(--ng-terra-soft)}
.ng-lede{font-size:1.2rem;line-height:1.62;color:var(--ng-ink-soft);max-width:62ch}
.ng-secthead{max-width:700px;margin:0 auto 44px}
.ng-secthead h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:0 0 12px}
.ng-secthead .ng-lede{margin-left:auto;margin-right:auto}

/* buttons — TEAL is the action colour */
.ng-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ng-font-display);font-weight:600;font-size:1rem;padding:.9rem 1.7rem;border-radius:10px;text-decoration:none;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s;cursor:pointer;line-height:1}
.ng-btn:hover{transform:translateY(-1px)}
.ng-btn-primary{background:var(--ng-teal);color:var(--ng-teal-ink)}
.ng-btn-primary:hover{background:#0fd1bc;color:var(--ng-teal-ink)}
.ng-btn-ghost{background:transparent;color:var(--ng-ink);border-color:var(--ng-line)}
.ng-btn-ghost:hover{background:var(--ng-ink);color:#fff;border-color:var(--ng-ink)}
.ng-btn-ghost.on-dark{color:#fff;border-color:var(--ng-line-dark)}
.ng-btn-ghost.on-dark:hover{background:rgba(242,236,223,.12);color:#fff;border-color:rgba(242,236,223,.4)}

/* ============================================================
   5. HERO (Home)
   ============================================================ */
.ng-hero{position:relative;min-height:640px;display:flex;align-items:center;background:var(--ng-ink-900);
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ng-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.ng-hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(108deg,rgba(26,23,20,.96) 0%,rgba(26,23,20,.82) 44%,rgba(26,23,20,.34) 100%)}
/* with a framed image: dim the bg to texture + split into two columns */
.ng-hero.has-fig .ng-hero-bg{opacity:.16}
.ng-hero.has-fig::after{background:linear-gradient(108deg,rgba(26,23,20,.97) 0%,rgba(26,23,20,.9) 52%,rgba(26,23,20,.82) 100%)}
.ng-hero-inner{position:relative;z-index:2;width:100%;padding:128px 0 100px}
.ng-hero.has-fig .ng-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ng-hero-fig{position:relative;aspect-ratio:4/3;border-radius:var(--ng-r-lg);overflow:hidden;box-shadow:0 36px 80px -30px rgba(0,0,0,.7);border:1px solid var(--ng-line-dark)}
.ng-hero-fig img{width:100%;height:100%;object-fit:cover}
.ng-hero-fig::after{content:"";position:absolute;right:0;top:0;width:66px;height:66px;border-top:3px solid var(--ng-teal);border-right:3px solid var(--ng-teal);border-radius:0 var(--ng-r-lg) 0 0}
.ng-hero-h{font-size:clamp(2.6rem,4.6vw,3.6rem);color:#fff;max-width:16ch;margin:20px 0 0;line-height:1.04}
.ng-hero-h .acc{color:var(--ng-teal)}
.ng-hero-lede{color:var(--ng-text-ondark);font-size:clamp(1.08rem,1.4vw,1.24rem);line-height:1.6;max-width:50ch;margin:24px 0 0}
.ng-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.ng-hero-trust{display:flex;gap:14px 28px;flex-wrap:wrap;margin-top:44px;border-top:1px solid var(--ng-line-dark);padding-top:24px}
.ng-hero-trust .t{flex:1 1 0;min-width:120px}
.ng-hero-trust .t .n{font-family:var(--ng-font-display);font-weight:700;font-size:1.18rem;color:#fff;line-height:1.1}
.ng-hero-trust .t .l{font-size:.84rem;color:var(--ng-text-ondark-muted);margin-top:4px;max-width:22ch}

/* ============================================================
   6. PAGE HERO (interior pages — compact, left-aligned)
   ============================================================ */
.ng-pagehero{position:relative;overflow:hidden;background:var(--ng-ink);color:var(--ng-text-ondark);
  padding:120px 0 70px;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ng-pagehero.teal{background:var(--ng-teal-deep)}
.ng-pagehero.teal::before{content:"";position:absolute;inset:0;opacity:.5;background:
  repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),
  repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px)}
.ng-pagehero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.ng-pagehero.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(26,23,20,.92),rgba(26,23,20,.6) 56%,rgba(26,23,20,.26))}
.ng-pagehero .ng-wrap{position:relative;z-index:2}
.ng-pagehero h1{font-size:clamp(2.2rem,4.2vw,3.3rem);color:#fff;margin:0 0 14px;max-width:18ch}
.ng-pagehero .ng-lede{color:var(--ng-text-ondark-muted);max-width:54ch}
.ng-pagehero .ng-eyebrow{color:var(--ng-teal)}
.ng-pagehero.teal .ng-eyebrow{color:var(--ng-terra-soft)}
.ng-crumb{font-family:var(--ng-font-display);font-size:.85rem;color:var(--ng-text-ondark-muted);margin-bottom:8px}
.ng-crumb a{color:var(--ng-text-ondark-muted);text-decoration:none}

/* ============================================================
   7. PROMISE BAND (intro + stat card)
   ============================================================ */
.ng-sand{background:var(--ng-sand);width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-top:1px solid var(--ng-line);border-bottom:1px solid var(--ng-line)}
.ng-sand>.ng-wrap{max-width:var(--ng-container);margin:0 auto;padding:88px 40px}
.ng-paper2{background:var(--ng-paper);width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ng-paper2>.ng-wrap{max-width:var(--ng-container);margin:0 auto;padding:0 40px}
.ng-promise-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.ng-promise-text h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:14px 0 0;max-width:18ch}
.ng-promise-text .ng-lede{margin-top:22px}
.ng-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.ng-pill{font-family:var(--ng-font-display);font-weight:500;font-size:.92rem;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--ng-line);color:var(--ng-ink-soft)}
.ng-statcard{background:var(--ng-ink);color:#fff;border-radius:var(--ng-r-md);padding:38px;box-shadow:var(--ng-shadow-card)}
.ng-statcard .row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--ng-line-dark)}
.ng-statcard .row:first-child{padding-top:0}
.ng-statcard .row:last-child{border-bottom:0;padding-bottom:0}
.ng-statcard .ic{width:44px;height:44px;border-radius:11px;background:rgba(20,184,166,.16);display:flex;align-items:center;justify-content:center;flex:none}
.ng-statcard .ic svg{width:22px;height:22px;stroke:var(--ng-teal);fill:none;stroke-width:1.7}
.ng-statcard h3{color:#fff;font-size:1.15rem;margin:0}
.ng-statcard p{color:var(--ng-text-ondark-muted);font-size:.95rem;margin:4px 0 0;line-height:1.5}

/* ============================================================
   8. DARK + TEAL SECTION GROUNDS
   ============================================================ */
.ng-ink-ground{background:var(--ng-ink);color:var(--ng-text-ondark);width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ng-ink-ground>.ng-wrap{max-width:var(--ng-container);margin:0 auto;padding:0 40px}
.ng-ink-ground h2,.ng-ink-ground h3,.ng-ink-ground h4{color:#fff}
.ng-ink-ground p{color:var(--ng-text-ondark-muted)}
.ng-teal-ground{background:var(--ng-teal-deep);color:#fff;position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ng-teal-ground::before{content:"";position:absolute;inset:0;opacity:.5;background:
  repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),
  repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px)}
.ng-teal-ground>.ng-wrap{position:relative;z-index:1;max-width:var(--ng-container);margin:0 auto;padding:0 40px}
.ng-teal-ground h2,.ng-teal-ground h3,.ng-teal-ground h4{color:#fff}
.ng-teal-ground .ng-eyebrow{color:var(--ng-terra-soft)}

/* ============================================================
   9. SERVICES GRID (teaser cards)
   ============================================================ */
.ng-svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.ng-svc-head h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:14px 0 0;max-width:16ch}
.ng-svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ng-svc{background:#fff;border:1px solid var(--ng-line);border-radius:var(--ng-r-md);overflow:hidden;box-shadow:var(--ng-shadow-card);display:flex;flex-direction:column;text-decoration:none;transition:transform .2s,box-shadow .2s}
a.ng-svc:hover{transform:translateY(-3px);box-shadow:0 22px 48px -20px rgba(34,30,26,.34)}
.ng-svc-ph{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--ng-olive-deep)}
.ng-svc-ph img{width:100%;height:100%;object-fit:cover}
.ng-svc-body{padding:26px;display:flex;flex-direction:column;flex:1}
.ng-svc-ic{width:42px;height:42px;border-radius:11px;background:var(--ng-sand);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ng-svc-ic svg{width:22px;height:22px;stroke:var(--ng-teal-deep);fill:none;stroke-width:1.7}
.ng-svc h3{font-size:1.2rem;color:var(--ng-ink);line-height:1.2;margin:0 0 8px}
.ng-svc p{font-size:.95rem;color:var(--ng-ink-soft);line-height:1.55;margin:0 0 16px}
.ng-svc-go{margin-top:auto;font-family:var(--ng-font-display);font-weight:600;color:var(--ng-teal-deep);font-size:.94rem}
span.ng-svc{cursor:default}
/* "more" cell — dark CTA card */
.ng-svc-more{background:var(--ng-ink);color:#fff;border-radius:var(--ng-r-md);display:flex;flex-direction:column;justify-content:center;padding:34px}
.ng-svc-more h3{color:#fff;font-size:1.25rem;margin:0 0 8px}
.ng-svc-more p{color:var(--ng-text-ondark-muted);font-size:.96rem;margin:0 0 18px;line-height:1.55}
.ng-svc-more .ng-btn{align-self:flex-start}

/* ============================================================
   10. SERVICE DETAIL (Services page spine — alternating)
   ============================================================ */
.ng-sd{padding:84px 0;scroll-margin-top:90px}
.ng-sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
/* DOM order is text then fig -> default = text LEFT / photo RIGHT.
   .img-right flips it via order -> photo LEFT / text RIGHT (true zig-zag). */
.ng-sd-grid.img-right .ng-sd-fig{order:0}
.ng-sd-grid.img-right .ng-sd-text{order:1}
.ng-sd-fig{position:relative;aspect-ratio:4/3;border-radius:var(--ng-r-lg);overflow:hidden;box-shadow:var(--ng-shadow-card)}
.ng-sd-fig img{width:100%;height:100%;object-fit:cover}
/* corner accent: bottom-RIGHT when photo is on the right (default),
   bottom-LEFT when photo is on the left (.img-right) */
.ng-sd-fig::after{content:"";position:absolute;right:0;bottom:0;width:62px;height:62px;border-bottom:3px solid var(--ng-teal);border-right:3px solid var(--ng-teal);border-radius:0 0 var(--ng-r-lg) 0}
.ng-sd-grid.img-right .ng-sd-fig::after{right:auto;left:0;border-right:0;border-left:3px solid var(--ng-teal);border-radius:0 0 0 var(--ng-r-lg)}
.ng-sd-num{font-family:var(--ng-font-display);font-weight:700;font-size:.95rem;color:var(--ng-terra);letter-spacing:.06em}
.ng-sd-text h2{font-size:clamp(1.7rem,2.7vw,2.4rem);margin:10px 0 0}
.ng-sd-intro{font-size:1.1rem;color:var(--ng-ink-soft);margin:14px 0 0;line-height:1.6}
.ng-sd-bullets{margin:24px 0 0;display:flex;flex-direction:column;gap:13px;list-style:none;padding:0}
.ng-sd-bullets li{display:flex;gap:13px;align-items:flex-start;font-size:1.02rem;color:var(--ng-ink)}
.ng-sd-bullets li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;background:rgba(20,184,166,.15) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C70' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.ng-sd.alt{background:var(--ng-sand)}
.ng-sd.alt,.ng-sd.alt-bleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ng-sd.alt>.ng-wrap{max-width:var(--ng-container);margin:0 auto;padding:0 40px}

/* ============================================================
   11. VALUES GRID (5-up)
   ============================================================ */
.ng-values{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:46px}
.ng-val{background:rgba(255,255,255,.07);border:1px solid var(--ng-line-dark);border-radius:var(--ng-r-md);padding:24px}
.ng-val-ic{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ng-val-ic svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.7}
.ng-val h3{color:#fff;font-size:1.06rem;margin:0}
.ng-val p{font-size:.9rem;color:rgba(242,236,223,.82);margin:7px 0 0;line-height:1.5}
/* values on a light ground (About page) */
.ng-values.on-light .ng-val{background:#fff;border:1px solid var(--ng-line);box-shadow:var(--ng-shadow-soft)}
.ng-values.on-light .ng-val-ic{background:var(--ng-sand)}
.ng-values.on-light .ng-val-ic svg{stroke:var(--ng-teal-deep)}
.ng-values.on-light .ng-val h3{color:var(--ng-ink)}
.ng-values.on-light .ng-val p{color:var(--ng-ink-soft)}

/* ============================================================
   12. PROSE SPLIT + PROSE-ONLY (about + legal)
   ============================================================ */
.ng-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ng-split.img-right .ng-split-fig{order:2}
.ng-split-text h2{font-size:clamp(1.7rem,2.7vw,2.4rem);margin:12px 0 18px}
.ng-split-text p{font-size:1.06rem;line-height:1.7;margin:0 0 16px;color:var(--ng-ink-soft)}
.ng-split-fig{position:relative;aspect-ratio:4/3;border-radius:var(--ng-r-lg);overflow:hidden;box-shadow:var(--ng-shadow-card)}
.ng-split-fig img{width:100%;height:100%;object-fit:cover}
.ng-split-fig::after{content:"";position:absolute;right:0;top:0;width:64px;height:64px;border-top:3px solid var(--ng-teal);border-right:3px solid var(--ng-teal);border-radius:0 var(--ng-r-lg) 0 0}
.ng-prose{max-width:760px;margin:0 auto}
.ng-prose h2{font-size:clamp(1.5rem,2.3vw,1.95rem);margin:32px 0 14px}
.ng-prose h3{font-size:1.25rem;margin:24px 0 10px}
.ng-prose p{font-size:1.05rem;line-height:1.7;color:var(--ng-ink-soft);margin:0 0 16px}
.ng-prose ul{margin:0 0 16px 1.2rem;line-height:1.7}
.ng-prose li{margin-bottom:8px}
.ng-prose a{color:var(--ng-teal-deep);text-decoration:underline}
.ng-prose strong{color:var(--ng-ink)}

/* ============================================================
   13. CONTACT BLOCK
   ============================================================ */
.ng-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.ng-contact-stack h1{font-size:clamp(2rem,3.4vw,2.8rem);margin:14px 0 16px}
.ng-contact-info{margin-top:30px;display:flex;flex-direction:column;gap:18px}
.ng-contact-row{display:flex;gap:14px;align-items:flex-start}
.ng-contact-ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--ng-sand);display:flex;align-items:center;justify-content:center}
.ng-contact-ic svg{width:21px;height:21px;stroke:var(--ng-teal-deep);fill:none;stroke-width:1.7}
.ng-contact-row .k{font-family:var(--ng-font-display);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ng-muted)}
.ng-contact-row .v,.ng-contact-row a{color:var(--ng-ink);font-size:1.02rem;text-decoration:none;display:block;margin-top:2px}
.ng-contact-row a:hover{color:var(--ng-teal-deep)}
.ng-form-card{background:#fff;border:1px solid var(--ng-line);border-radius:var(--ng-r-lg);box-shadow:var(--ng-shadow-card);padding:36px}
.ng-form-card h3{font-size:1.4rem;margin:0 0 6px}
.ng-form-sub{color:var(--ng-ink-soft);font-size:.97rem;margin:0 0 22px}
/* WPForms branded */
.ng-form-card .wpforms-field-label{font-family:var(--ng-font-display);font-weight:600;font-size:.9rem;color:var(--ng-ink)}
.ng-form-card .wpforms-field input[type=text],
.ng-form-card .wpforms-field input[type=email],
.ng-form-card .wpforms-field input[type=tel],
.ng-form-card .wpforms-field textarea,
.ng-form-card .wpforms-field select{border:1.5px solid var(--ng-line)!important;border-radius:10px!important;background:var(--ng-paper)!important;color:var(--ng-ink)!important;font-family:var(--ng-font-body)!important;font-size:1rem!important;line-height:1.4!important;padding:.85rem 1rem!important}
/* select needs explicit height + custom caret so the option text isn't clipped */
.ng-form-card .wpforms-field select{min-height:52px!important;appearance:none!important;-webkit-appearance:none!important;padding-right:2.6rem!important;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A352E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 1rem center!important;background-size:18px!important}
.ng-form-card .wpforms-field input:focus,
.ng-form-card .wpforms-field textarea:focus,
.ng-form-card .wpforms-field select:focus{border-color:var(--ng-teal)!important;outline:none!important;box-shadow:0 0 0 3px rgba(20,184,166,.18)!important}
.ng-form-card .wpforms-submit{background:var(--ng-teal)!important;color:var(--ng-teal-ink)!important;border:none!important;font-family:var(--ng-font-display)!important;font-weight:600!important;font-size:1.02rem!important;padding:.9rem 2rem!important;border-radius:10px!important;cursor:pointer;transition:background .2s}
.ng-form-card .wpforms-submit:hover{background:#0fd1bc!important;color:var(--ng-teal-ink)!important}
.ng-form-card .wpforms-required-label{color:var(--ng-terra)}

/* ============================================================
   14. CTA BAND (split — ink + teal/terra panel)
   ============================================================ */
.ng-cta{background:var(--ng-ink);color:#fff;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ng-cta-inner{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;max-width:var(--ng-container);margin:0 auto;padding:0 40px}
.ng-cta-left{padding:80px 48px 80px 0}
.ng-cta-left .ng-eyebrow{color:var(--ng-teal)}
.ng-cta-left h2{color:#fff;font-size:clamp(1.9rem,2.9vw,2.6rem);margin:16px 0 0;max-width:16ch}
.ng-cta-left p{color:var(--ng-text-ondark-muted);font-size:1.12rem;margin:18px 0 0;max-width:44ch;line-height:1.6}
.ng-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.ng-cta-right{position:relative;aspect-ratio:4/3;border-radius:var(--ng-r-lg);overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.6);background:linear-gradient(135deg,var(--ng-teal-deep),var(--ng-teal) 58%,var(--ng-terra))}
.ng-cta-right::after{content:"";position:absolute;right:0;bottom:0;width:62px;height:62px;border-bottom:3px solid var(--ng-teal);border-right:3px solid var(--ng-teal);border-radius:0 0 var(--ng-r-lg) 0;pointer-events:none}
.ng-cta-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ng-cta-badge{position:absolute;left:22px;top:22px;z-index:2;background:rgba(26,23,20,.85);border-radius:12px;padding:16px 20px}
.ng-cta-badge .n{font-family:var(--ng-font-display);font-weight:700;font-size:1.06rem;color:#fff}
.ng-cta-badge .l{font-size:.86rem;color:var(--ng-text-ondark-muted);margin-top:3px}

/* simple centred CTA variant (legal pages, services foot) */
.ng-cta-simple{background:linear-gradient(120deg,var(--ng-teal-deep),var(--ng-teal));text-align:center;padding:78px 0;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ng-cta-simple .ng-wrap{max-width:720px;margin:0 auto}
.ng-cta-simple h2{color:#fff;font-size:clamp(1.8rem,2.7vw,2.4rem);margin:0 0 14px}
.ng-cta-simple p{color:rgba(255,255,255,.9);font-size:1.12rem;margin:0 auto 28px;max-width:48ch}
.ng-cta-simple .ng-cta-row{justify-content:center}
.ng-cta-simple .ng-btn-primary{background:#fff;color:var(--ng-teal-deep)}
.ng-cta-simple .ng-btn-primary:hover{background:var(--ng-ink);color:#fff}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .ng-svcs{grid-template-columns:repeat(2,1fr)}
  .ng-values{grid-template-columns:repeat(3,1fr)}
  .ng-promise-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:782px){
  .ng-section,.ng-sd{padding:56px 0}
  .ng-sand>.ng-wrap{padding:56px 22px}
  .ng-wrap,.ng-paper2>.ng-wrap,.ng-ink-ground>.ng-wrap,.ng-teal-ground>.ng-wrap{padding-left:22px;padding-right:22px}
  .ng-hero{min-height:0}
  .ng-hero-inner{padding:104px 0 64px}
  .ng-hero.has-fig .ng-hero-inner{grid-template-columns:1fr;gap:36px}
  .ng-hero.has-fig .ng-hero-fig{order:2;max-width:560px}
  .ng-hero-h{font-size:clamp(2.1rem,8.4vw,2.8rem)}
  .ng-hero-trust{gap:24px}
  .ng-svcs{grid-template-columns:1fr}
  .ng-values{grid-template-columns:1fr 1fr;gap:14px}
  .ng-svc-head{flex-direction:column;align-items:flex-start;gap:16px}
  .ng-sd-grid,.ng-split{grid-template-columns:1fr;gap:30px}
  /* mobile: text ALWAYS before photo (override the desktop .img-right order
     at matching specificity, both default and alternating rows) */
  .ng-sd-grid .ng-sd-text,.ng-sd-grid.img-right .ng-sd-text{order:0}
  .ng-sd-grid .ng-sd-fig,.ng-sd-grid.img-right .ng-sd-fig{order:1}
  .ng-split .ng-split-text,.ng-split.img-right .ng-split-text{order:0}
  .ng-split .ng-split-fig,.ng-split.img-right .ng-split-fig{order:1}
  .ng-contact-grid{grid-template-columns:1fr;gap:32px}
  .ng-cta-inner{grid-template-columns:1fr;padding:0 22px}
  .ng-cta-left{padding:54px 0 0}
  .ng-cta-right{aspect-ratio:16/10;margin-bottom:54px}
  .ng-pagehero{padding:96px 0 52px}
  .ng-form-card{padding:24px}
}
@media(max-width:430px){
  .ng-values{grid-template-columns:1fr}
}