/*
Theme Name: Novodan Nord
Theme URI: https://novodan.eu
Author: Novodan ApS
Description: Interim theme for novodan.eu. Presents the current Novodan content in the Novodan brand system (navy + pillar accents, Space Grotesk and Inter, full-bleed hero). Classic PHP theme, no page builder required. Bridges to the Next.js + Payload rebuild.
Version: 1.7.5
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: novodan-nord
*/

/* ==========================================================================
   Fonts (self-hosted, SIL OFL. No Google Fonts CDN: GDPR.)
   ========================================================================== */
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-v22-latin_latin-ext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-v22-latin_latin-ext-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-v22-latin_latin-ext-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-v20-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-v20-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-v20-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ==========================================================================
   Tokens. Raw brand hex lives here and nowhere else.
   Semantic aliases below are what components use, so a body.theme-* class can
   recolour the site without touching the brand scale.
   ========================================================================== */
:root{
  /* brand scale */
  --navy-900:#030B42; --navy-700:#09204F; --navy-600:#0C3577; --navy-500:#17309D; --navy-400:#1D3BBD;
  --orange-500:#F35C27; --orange-600:#B83A0A; --orange-700:#952F08; --orange-400:#FB7A4A;
  --green-500:#45882D; --green-700:#367029; --green-300:#5BA838;
  --yellow-500:#FBB03C; --blue-500:#406BFA; --periwinkle:#6699FF;
  --ink-100:#F0F4FF; --ink-150:#FAFAFC; --ink-200:#E4E9F5;
  --slate-700:#2A2F3A; --slate-500:#5C6A8C; --slate-400:#B2C2E5;
  --white:#fff;

  /* semantic aliases (theme-switchable) */
  --color-accent:var(--orange-600);
  --color-accent-hover:var(--orange-700);
  --color-accent-fill:var(--orange-500);
  --color-brand:var(--navy-500);
  --surface-dark:var(--navy-900);
  --surface-tint:var(--ink-100);
  --text-body:var(--slate-700);
  --text-muted:var(--slate-500);
  --text-muted-dark:var(--slate-400);
  --text-heading:var(--navy-900);
  --eyebrow-on-dark:var(--periwinkle);
  --hairline:var(--ink-200);

  /* pillar accents, per BRAND-SYSTEM.md section 2 */
  --pillar-bio:var(--orange-500);        --pillar-bio-text:var(--orange-600);
  --pillar-training:var(--navy-500);     --pillar-training-text:var(--navy-500);
  --pillar-ops:var(--green-500);         --pillar-ops-text:var(--green-700);

  /* type */
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* layout */
  --container:1200px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px;
  --shadow-card:0 8px 24px rgba(3,11,66,.08);
  --shadow-card-hover:0 14px 36px rgba(3,11,66,.14);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text-body);background:var(--white);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-heading);line-height:1.15;margin:0 0 .5em}
h1{font-size:44px;font-weight:700}
h2{font-size:32px;font-weight:700}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em}
a{color:var(--color-brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
ul,ol{padding-left:1.25em}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--white);color:var(--navy-900);padding:12px 20px;font-weight:600}
.skip-link:focus{left:8px;top:8px}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tint{background:var(--surface-tint)}
.section--dark{background:var(--surface-dark);color:var(--white)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--white)}
.section--tight{padding:56px 0}

.eyebrow{font-family:var(--font-display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--color-accent);margin:0 0 12px}
.eyebrow--on-dark{color:var(--eyebrow-on-dark)}
.lead{font-size:18px;color:var(--text-muted)}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head p:last-child{margin-bottom:0}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);font-weight:600;font-size:16px;line-height:1.2;padding:15px 30px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);text-decoration:none}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--color-accent);color:var(--white);box-shadow:var(--shadow-card)}
.btn--primary:hover{background:var(--color-accent-hover);color:var(--white);transform:translateY(-1px)}
.btn--outline-dark{border-color:rgba(255,255,255,.5);color:var(--white)}
.btn--outline-dark:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn--outline{border-color:var(--hairline);color:var(--navy-900);background:var(--white)}
.btn--outline:hover{border-color:var(--color-brand);color:var(--color-brand)}
.btn--sm{padding:10px 18px;font-size:14px}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{background:var(--navy-900);color:rgba(255,255,255,.75);font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.1)}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.75)}
.topbar a:hover{color:var(--white);text-decoration:none}
.topbar .sep{opacity:.4;margin:0 8px}

.site-header{position:sticky;top:0;z-index:50;background:var(--navy-900);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:16px;padding-bottom:16px}
.brand-chip{background:var(--white);border-radius:10px;padding:7px 14px;display:inline-block;line-height:0}
.brand-chip:hover{text-decoration:none}
.brand-chip img{height:32px;width:auto}
.brand-chip--text{font-family:var(--font-display);font-weight:700;color:var(--navy-900);font-size:19px;line-height:1.2;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:34px}
.nav ul{list-style:none;display:flex;align-items:center;gap:34px;margin:0;padding:0}
.nav a{color:rgba(255,255,255,.9);font-size:15px;font-weight:500}
.nav a:hover{color:var(--white);text-decoration:none}
.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-parent>a,.nav .current_page_parent>a,.nav .current-menu-ancestor>a{color:var(--yellow-500)}

/* dropdown submenus */
.nav li{position:relative}
.nav .menu-item-has-children>a{display:inline-flex;align-items:center;gap:6px}
.nav .menu-item-has-children>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--ease)}
.nav .sub-menu{position:absolute;top:100%;left:-16px;min-width:220px;background:var(--navy-700);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);box-shadow:0 16px 48px rgba(3,11,66,.4);padding:8px 0;margin:0;list-style:none;display:block;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:60}
.nav .sub-menu li{width:100%}
.nav .sub-menu a{display:block;padding:10px 20px;font-size:14.5px;color:rgba(255,255,255,.88);white-space:nowrap}
.nav .sub-menu a:hover{background:rgba(255,255,255,.08);color:var(--white)}
.nav .menu-item-has-children:hover>.sub-menu,
.nav .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .menu-item-has-children:hover>a::after,
.nav .menu-item-has-children:focus-within>a::after{transform:rotate(-135deg) translateY(-2px)}
/* a hover bridge so the pointer can travel from the parent to the panel */
.nav .menu-item-has-children>.sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.header-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);padding:9px 11px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--white);margin:4px 0;transition:transform .22s var(--ease),opacity .22s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   Hero + page header
   ========================================================================== */
.hero{position:relative;isolation:isolate;color:var(--white);overflow:hidden;background:var(--navy-900)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,11,66,.94) 0%,rgba(3,11,66,.78) 45%,rgba(3,11,66,.30) 100%)}
.hero__inner{position:relative;padding-top:104px;padding-bottom:104px;max-width:660px}
.hero h1{font-size:52px;font-weight:700;color:var(--white);letter-spacing:-.01em;margin-bottom:20px}
.hero__lead{font-size:18px;color:var(--text-muted-dark);margin:0 0 32px;max-width:56ch}
.hero__rule{width:64px;height:4px;background:var(--color-accent-fill);border-radius:2px;margin-bottom:26px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}

.page-header{position:relative;background:var(--navy-900);color:var(--white);min-height:300px;display:grid;align-items:center;text-align:center;overflow:hidden;padding:64px 0}
.page-header__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-header::after{content:"";position:absolute;inset:0;background:radial-gradient(85% 95% at 50% 48%,rgba(3,11,66,.74) 0%,rgba(3,11,66,.56) 55%,rgba(3,11,66,.26) 100%);z-index:1}
.page-header__inner{position:relative;z-index:2}
.page-header h1{color:var(--white);font-size:44px;font-weight:700;margin-bottom:14px}
.page-header p{color:rgba(255,255,255,.9);font-size:18px;max-width:62ch;margin:0 auto}

/* ==========================================================================
   Cards, grids
   ========================================================================== */
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* Service card. Laid out as a column so the call to action can be pushed to
   the bottom edge: the cards carry different amounts of text, and a row of
   links at different heights reads as a mistake. */
.card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:32px 26px 26px;overflow:hidden;transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease)}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.card__accent{position:absolute;left:0;right:0;top:0;height:4px}
.card__icon{width:44px;height:44px;object-fit:contain;margin-bottom:18px}
.card h3{font-size:20px;font-weight:700;color:var(--color-brand);margin-bottom:10px}
.card__kicker{font-weight:600;margin:0 0 10px}
.card__body{color:var(--text-muted);font-size:15px;margin:0 0 18px}
.card .tags{margin-bottom:22px}

/* The call to action is a real button, and it stretches an invisible layer over
   the whole card so the card itself is clickable. The link text stays the
   accessible name, so screen readers still announce where it goes. */
.card__more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:14.5px;line-height:1.2;padding:11px 20px;border-radius:var(--radius-md);border:1px solid var(--card-accent,var(--color-brand));color:var(--card-accent,var(--color-brand));background:var(--white);transition:background .22s var(--ease),color .22s var(--ease)}
.card__more::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius-lg)}
.card__more:hover{text-decoration:none}
.card:hover .card__more,.card:focus-within .card__more{background:var(--card-accent,var(--color-brand));color:var(--white)}
.card:focus-within{box-shadow:var(--shadow-card-hover)}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;list-style:none;padding:0}
.tag{font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--radius-md);display:inline-block}
.tag--bio{background:rgba(243,92,39,.12);color:var(--pillar-bio-text)}
.tag--training{background:rgba(23,48,157,.10);color:var(--pillar-training-text)}
.tag--ops{background:rgba(69,136,45,.14);color:var(--pillar-ops-text)}

/* stat rail + prose split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}
.stat-rail{display:grid;gap:28px}
.stat{border-top:1px solid var(--hairline);padding-top:16px}
.stat__n{font-family:var(--font-display);font-size:44px;font-weight:700;color:var(--navy-900);line-height:1;font-variant-numeric:tabular-nums}
.stat__l{font-size:14px;color:var(--text-muted);margin-top:6px}
.prose h2{margin-bottom:16px}
.prose p{color:var(--text-muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;list-style:none;padding:0}
.chip{border:1px solid var(--hairline);background:var(--ink-150);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--navy-900)}

/* work list */
.work-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.work{display:block;background:var(--white);border:1px solid var(--hairline);border-left:3px solid var(--color-accent-fill);border-radius:var(--radius-md);padding:20px 22px;transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.work:hover{box-shadow:var(--shadow-card);transform:translateY(-2px);text-decoration:none}
.work__meta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin-bottom:8px}
.work h3,.work h4{font-size:16.5px;font-weight:600;line-height:1.35;color:var(--navy-900);margin:0}
.work--project{border-left-color:var(--green-500)}
.work--project .work__meta{color:var(--green-700)}
.center-more{text-align:center;margin-top:36px}

/* partners */
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;align-items:center;list-style:none;padding:0;margin:0}
.logo-wall img{height:56px;width:100%;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.85;transition:filter .22s var(--ease),opacity .22s var(--ease)}
.logo-wall a:hover img,.logo-wall li:hover img{filter:grayscale(0);opacity:1}

/* news */
.news-card{display:flex;flex-direction:column;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);overflow:hidden;transition:background .22s var(--ease)}
.news-card:hover{background:rgba(255,255,255,.1);text-decoration:none}
.news-card__thumb{aspect-ratio:16/9;overflow:hidden;background:var(--navy-700)}
.news-card__thumb img{width:100%;height:100%;object-fit:cover}
.news-card__body{padding:24px}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:14px;background:rgba(102,153,255,.2);color:#9DB6FF}
.news-card h3{color:var(--white);font-size:17px;font-weight:600;line-height:1.35;margin-bottom:10px}
.news-card p{color:var(--text-muted-dark);font-size:14.5px;margin:0 0 14px}
.news-card__date{font-size:13px;color:rgba(255,255,255,.5);margin-top:auto}

/* post list (light) */
.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.post-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px);text-decoration:none}
.post-card__thumb{aspect-ratio:16/9;overflow:hidden;background:var(--ink-100)}
.post-card__thumb img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:24px}
.post-card h2,.post-card h3{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:10px;color:var(--navy-900)}
.post-card p{color:var(--text-muted);font-size:15px;margin-bottom:12px}
.post-meta{font-size:13px;color:var(--text-muted);letter-spacing:.02em}

/* team */
.person__photo{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-100);margin-bottom:14px}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person h3{font-size:16.5px;margin-bottom:3px}
.person__role{font-size:14px;color:var(--color-accent);font-weight:600;margin:0 0 8px}
.person__bio{font-size:14px;color:var(--text-muted);margin:0}
.person__link{display:block;color:inherit}
.person__link:hover{text-decoration:none}
.person__link:hover h3{color:var(--color-brand)}
.person__link h3{transition:color .22s var(--ease)}
.person__link .person__photo img{transition:transform .4s var(--ease)}
.person__link:hover .person__photo img{transform:scale(1.03)}
.person__links{margin-top:10px;font-size:14px;font-weight:600;display:flex;gap:14px;flex-wrap:wrap}
.person__links-alt{color:var(--text-muted)}
.person__links-alt:hover{color:var(--color-brand)}

/* service sections (Our Services page) */
/* Services chooser: situation on the left, the service and its first step on the
   right. Replaced the old per-service blocks, which repeated the cards above. */
.chooser{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.chooser__row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start;padding:26px 0;border-bottom:1px solid var(--hairline)}
.chooser__case{display:flex;gap:16px;align-items:flex-start}
.chooser__case p{margin:0;font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--text-heading);line-height:1.35}
.chooser__rule{flex:0 0 auto;width:4px;height:1.35em;border-radius:2px;margin-top:.1em}
.chooser__answer{padding-top:2px}
.chooser__service{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:17px;margin-bottom:6px}
.chooser__step{margin:0;color:var(--text-muted);font-size:15.5px}
.chooser__note{max-width:820px;margin:34px 0 0;color:var(--text-muted)}
.sub-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.sub-list li{position:relative;padding-left:28px;font-weight:600;color:var(--navy-900)}
.sub-list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;border-radius:1px;background:currentColor;opacity:.5}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:start}
.office{border-top:1px solid var(--hairline);padding-top:18px;margin-bottom:26px}
.office h3{font-size:17px;margin-bottom:6px}
.office p{color:var(--text-muted);margin:0;font-size:15px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 textarea,.wpcf7 input[type=tel]{width:100%;padding:13px 15px;border:1px solid var(--hairline);border-radius:var(--radius-md);font-family:var(--font-body);font-size:15px;color:var(--text-body);background:var(--white)}
.wpcf7 input:focus,.wpcf7 textarea:focus{outline:2px solid var(--color-accent);outline-offset:1px;border-color:transparent}
.wpcf7 label{display:block;font-weight:600;font-size:14px;color:var(--navy-900);margin-bottom:18px}
.wpcf7 input[type=submit]{background:var(--color-accent);color:var(--white);border:0;font-weight:600;font-size:16px;padding:15px 30px;border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-body)}
.wpcf7 input[type=submit]:hover{background:var(--color-accent-hover)}

/* single post */
.entry{max-width:760px;margin:0 auto}
.entry img{border-radius:var(--radius-md)}
.entry h2{font-size:26px;margin-top:1.6em}
.entry h3{font-size:20px;margin-top:1.4em}
.entry ul,.entry ol{color:var(--text-muted)}
.entry blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--color-accent-fill);color:var(--navy-900);font-size:18px}
.entry-hero{aspect-ratio:2/1;overflow:hidden;border-radius:var(--radius-lg);margin-bottom:36px}
.entry-hero img{width:100%;height:100%;object-fit:cover}

/* work cards (success stories, related work) */
.work-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.work-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px);text-decoration:none}
.work-card__accent{position:absolute;left:0;right:0;top:0;height:4px;z-index:2}
.work-card__thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ink-100)}
.work-card__thumb img{width:100%;height:100%;object-fit:cover}
.work-card__body{padding:22px 24px 26px}
.work-card .work__meta{display:block;margin-bottom:8px}
.work-card h3{font-size:17px;font-weight:600;line-height:1.35;color:var(--navy-900);margin:0}

/* lead story on the news list */
.feature-post{display:grid;grid-template-columns:1.25fr 1fr;gap:0;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.feature-post:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px);text-decoration:none}
.feature-post__media{overflow:hidden;background:var(--ink-100);min-height:280px}
.feature-post__media img{width:100%;height:100%;object-fit:cover}
.feature-post__body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center}
.feature-post__body h2{font-size:26px;line-height:1.25;margin-bottom:12px}
.feature-post__body p{color:var(--text-muted);margin-bottom:14px}

/* single portfolio / staff */
.work-single{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.work-single__main{min-width:0}
/* Publication figures are often only 450-750px wide. Stretching one to fill the
   column makes it soft, so cap at the file's natural width and centre it. */
.work-single__media{margin:0 0 32px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hairline);text-align:center;background:var(--ink-150)}
.work-single__media img{max-width:100%;height:auto;display:inline-block;vertical-align:middle}
.fact-card{position:relative;background:var(--ink-150);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:28px 26px;overflow:hidden}
.fact-card__rule{position:absolute;left:0;right:0;top:0;height:4px}
.fact-card h2{font-size:20px;margin-bottom:16px}
.facts{margin:0 0 22px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.facts dt{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.facts dd{margin:0;font-size:15px;color:var(--navy-900);font-weight:600}
.link-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px;font-weight:600;font-size:15px}

.person-single{display:grid;grid-template-columns:320px minmax(0,1fr);gap:56px;align-items:start}
.person-single__main{min-width:0}
.person-single__photo{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px;background:var(--ink-100)}
.person-single__photo img{width:100%;height:auto;display:block}

/* process flow: horizontal stepped diagram, stacking on narrow screens */
.flow-block{margin:48px 0 8px;padding:34px 30px;background:var(--ink-150);border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.flow-block__title{font-size:22px;margin:0 0 26px}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
.flow__step{position:relative;padding:0 16px 0 0;display:flex;flex-direction:column;align-items:flex-start}
/* the connector between steps */
.flow__step::before{content:"";position:absolute;top:17px;left:34px;right:-2px;height:2px;background:var(--flow-accent);opacity:.28}
.flow__step:last-child::before{display:none}
.flow__marker{position:relative;z-index:1;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--flow-accent);color:var(--white);font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:14px;flex:0 0 auto}
.flow__name{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--navy-900);line-height:1.25;margin-bottom:6px;min-height:2.5em}
.flow__note{font-size:13.5px;color:var(--text-muted);line-height:1.45}

/* the closing "next step" panel on a service page */
.next-step{margin:40px 0 0;padding:30px 32px;border-radius:var(--radius-lg);background:var(--navy-900);color:var(--white);position:relative;overflow:hidden}
.next-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--flow-accent,var(--color-accent-fill))}
.next-step .eyebrow{margin-bottom:10px;filter:brightness(1.9)}
.next-step__text{font-size:18px;color:var(--white);margin-bottom:20px;max-width:52ch}

/* service detail page */
.service-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.service-detail__main{min-width:0}
/* the old page-builder plugin still wraps content in .codeless-content and
   styles it full-width; keep it inside the column */
.entry .codeless-content{width:auto;max-width:100%}
.service-detail__illus{margin:0 0 36px;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy-900)}
.service-detail__illus img{width:100%;height:auto;display:block}
.service-detail__aside{position:sticky;top:104px}
.service-detail .entry{max-width:none;margin:0}
.service-detail .entry .lead{font-size:19px;color:var(--navy-900);font-weight:500;line-height:1.55;margin-bottom:1.4em}
.service-detail .entry h2{font-size:26px;margin-top:1.8em;margin-bottom:.6em}
.service-detail .entry ul,.service-detail .entry ol{color:var(--text-muted);padding-left:1.2em}
.service-detail .entry li{margin-bottom:.6em}
.service-detail .entry li strong{color:var(--navy-900)}
.service-detail .entry ol{counter-reset:step;list-style:none;padding-left:0}
.service-detail .entry ol>li{counter-increment:step;position:relative;padding-left:44px}
.service-detail .entry ol>li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:999px;background:var(--ink-100);color:var(--navy-900);font-family:var(--font-display);font-weight:700;font-size:14px;display:grid;place-items:center}

/* service banner */

/* team strip (about page preview) */
.team-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-strip--six{grid-template-columns:repeat(6,1fr);gap:20px}
.team-strip--six .team-strip__photo{border-radius:999px}
.team-strip--six h3{font-size:14.5px;text-align:center}
.team-strip--six .person__role{font-size:12.5px;text-align:center}
.team-strip__person{display:block;color:inherit}
.team-strip__person:hover{text-decoration:none}
.team-strip__person:hover h3{color:var(--color-brand)}
.team-strip__photo{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);margin-bottom:12px;border:1px solid var(--hairline)}
.team-strip__photo img{width:100%;height:100%;object-fit:cover}
.team-strip h3{font-size:15.5px;margin-bottom:2px;transition:color .22s var(--ease)}
.team-strip .person__role{font-size:13.5px;margin:0}

/* pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:48px;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--hairline);border-radius:var(--radius-md);font-weight:600;color:var(--navy-900);background:var(--white)}
.pagination .page-numbers:hover{border-color:var(--color-brand);text-decoration:none}
.pagination .page-numbers.current{background:var(--color-brand);border-color:var(--color-brand);color:var(--white)}

/* cta band */
.cta-band{background:var(--color-brand);color:var(--white);text-align:center;padding:64px 0}
.cta-band h2{color:var(--white);margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.85);margin:0 0 26px;font-size:18px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{position:relative;background:var(--navy-900);color:var(--white);padding:72px 0 0;overflow:hidden}
.site-footer__art{position:absolute;left:0;right:0;bottom:0;z-index:0;opacity:.5}
.site-footer__art img{width:100%;height:170px;object-fit:cover;object-position:bottom}
.site-footer .wrap{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:56px}
.footer-grid h2{font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--eyebrow-on-dark);margin:0 0 18px;font-weight:600}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer-grid a{color:rgba(255,255,255,.85);font-size:15px}
.footer-grid a:hover{color:var(--white)}
.footer-tagline{color:var(--text-muted-dark);margin:16px 0 20px;font-size:15px}
.footer-addr{color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.7;margin:0 0 14px}
.footer-addr strong{color:var(--white);display:block;font-weight:600}
/* Social icons. The default styling assumes a light surface; the dark-surface
   variant is applied inside the footer and any .section--dark. */
.socials{display:flex;gap:10px;list-style:none;padding:0;margin:0}
.socials a{width:36px;height:36px;border-radius:8px;background:var(--ink-100);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--navy-900)}
.socials a:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--white);text-decoration:none}
.socials svg{width:17px;height:17px;fill:currentColor}
.site-footer .socials a,.section--dark .socials a{background:rgba(255,255,255,.1);border-color:transparent;color:var(--white)}
.site-footer .socials a:hover,.section--dark .socials a:hover{background:var(--color-accent);color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:22px 0 26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.7)}

/* 404 / search */
.notice-page{text-align:center;max-width:640px;margin:0 auto}
.notice-page__code{font-family:var(--font-display);font-size:96px;font-weight:700;color:var(--ink-200);line-height:1;margin-bottom:8px}
.search-form{display:flex;gap:10px;max-width:520px;margin:24px auto 0}
.search-form input[type=search]{flex:1;padding:13px 15px;border:1px solid var(--hairline);border-radius:var(--radius-md);font-family:var(--font-body);font-size:15px}
.search-form button{background:var(--color-accent);color:var(--white);border:0;border-radius:var(--radius-md);padding:13px 24px;font-weight:600;cursor:pointer;font-family:var(--font-body)}

/* WordPress core alignment classes */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text{font-size:13px;color:var(--text-muted);margin-top:6px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .split,.contact-grid{grid-template-columns:1fr;gap:36px}
  .chooser__row{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .logo-wall{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .work-single,.person-single,.service-detail{grid-template-columns:1fr;gap:36px}
  .flow{grid-auto-flow:row;gap:22px}
  .flow__step{padding:0 0 0 48px}
  .flow__name{min-height:0}
  .flow__marker{position:absolute;left:0;top:0;margin-bottom:0}
  .flow__step::before{top:38px;bottom:-22px;left:16px;right:auto;width:2px;height:auto}
  .flow__step:last-child::before{display:none}
  .service-detail__aside{position:static}
  .team-strip{grid-template-columns:repeat(3,1fr)}
  .team-strip--six{grid-template-columns:repeat(3,1fr)}
  .feature-post{grid-template-columns:1fr}
  .feature-post__media{min-height:0;aspect-ratio:16/9}
}
@media (max-width:900px){
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--navy-900);border-top:1px solid rgba(255,255,255,.12);padding:8px 24px 20px;display:none;box-shadow:0 16px 48px rgba(3,11,66,.22)}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .nav li{width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav li:last-child{border-bottom:0}
  .nav a{display:block;padding:14px 0;font-size:16px}
  .nav-toggle{display:block}
  .site-header__inner{position:relative}
  /* submenus become an inline block on mobile, no hover needed */
  .nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:0 0 10px 14px;min-width:0;border-left:2px solid rgba(255,255,255,.15);margin-left:2px}
  .nav .sub-menu li{border-bottom:0}
  .nav .sub-menu a{padding:9px 0;font-size:15px}
  .nav .sub-menu a:hover{background:transparent}
  .nav .menu-item-has-children>a::after{display:none}
  .header-actions .btn--sm{white-space:nowrap;padding:10px 14px;font-size:13.5px}
}
@media (max-width:700px){
  .section{padding:56px 0}
  h1{font-size:30px}
  h2{font-size:26px}
  .hero h1{font-size:34px}
  .hero__inner{padding-top:72px;padding-bottom:72px}
  .page-header{min-height:220px;padding:48px 0}
  .page-header h1{font-size:30px}
  .grid--2,.grid--3,.grid--4,.work-list,.footer-grid{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
    .topbar__inner{justify-content:center;text-align:center;gap:4px 12px}
  .team-strip,.team-strip--six{grid-template-columns:repeat(2,1fr)}
  .feature-post__body{padding:26px 24px}
  .feature-post__body h2{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
