/* Aunera Group — main stylesheet
   Design tokens mirror theme.json so the block editor and templates stay in sync. */

:root{
  --navy: #1B2A47;
  --navy-ink: #16233B;
  --offwhite: #F7F5F0;
  --emerald: #1E7F5C;
  --gold: #FFC800;
  --terracotta: #C1502E;
  --navy-40: rgba(27,42,71,0.45);
  --navy-65: rgba(27,42,71,0.68);
  --white-line: rgba(247,245,240,0.14);
  --max: 1200px;
  --gutter: clamp(24px, 5vw, 72px);
  --radius: 2px;
  --ease: cubic-bezier(.4,0,.2,1);
}

body{
  background:var(--offwhite); color:var(--navy);
  font-family:'Poppins', sans-serif; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Poppins',sans-serif; font-weight:600; letter-spacing:-0.01em; margin:0; color:var(--navy); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--emerald); font-weight:500;
}
.eyebrow.on-dark{ color:#8FD6BB; }
/* A single restrained detail replaces the previous repeated A-mark icon:
   a short gold rule before each eyebrow. One consistent signature, used
   sparingly, rather than an icon repeated throughout every card. */
.eyebrow::before{ content:''; display:inline-block; width:20px; height:2px; background:var(--gold); flex-shrink:0; }
.eyebrow.on-dark::before{ background:var(--gold); }
/* a-mark rules retained only for any future, deliberately rare, use */
.a-mark{ color:var(--navy); }
.a-mark path{ vector-effect:non-scaling-stroke; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
section{ padding:clamp(60px,7.5vw,110px) 0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--emerald); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; font-size:14.5px; font-weight:500;
  border-radius:var(--radius); border:1px solid transparent;
  transition:transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--navy); color:var(--offwhite); }
.btn-primary:hover{ background:var(--navy-ink); transform:translateY(-1px); }
.btn-primary.gold{ background:var(--gold); color:var(--navy); }
.btn-primary.gold:hover{ background:#E8B600; }
.btn-outline{ border-color:rgba(27,42,71,0.28); color:var(--navy); background:transparent; }
.btn-outline:hover{ border-color:var(--navy); transform:translateY(-1px); }
.btn-outline.on-dark{ border-color:rgba(247,245,240,0.35); color:var(--offwhite); }
.btn-outline.on-dark:hover{ border-color:var(--offwhite); }
.btn-text{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--emerald); }
.btn-text svg{ width:13px; height:13px; transition:transform 180ms var(--ease); }
.btn-text:hover svg{ transform:translateX(3px); }
.btn svg{ width:14px; height:14px; }

.cta-pair{ display:flex; gap:16px; flex-wrap:wrap; }
.cta-note{ font-size:12.5px; color:var(--navy-40); margin-top:14px; }
.cta-note.on-dark{ color:rgba(247,245,240,0.5); }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(247,245,240,0.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(27,42,71,0.08); }
.nav-inner{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; height:104px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:0.01em; }
/* The logo needs to register "Aunera Group" on arrival, not read like a
   favicon. Sized generously against the 104px header without forcing the
   nav to grow further. */
.logo img, .logo .aunera-logo-fallback img{ max-height:72px; width:auto; }
.logo-word{ display:none; }
.site-footer .logo img{ max-height:52px; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links li{ list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--navy); position:relative; padding:6px 0; white-space:nowrap; }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--emerald); transform:scaleX(0); transform-origin:left; transition:transform 220ms var(--ease); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-right{ display:flex; align-items:center; gap:16px; }
.nav-cta{ padding:12px 20px; font-size:13.5px; }

/* Hamburger, animates to an X via the button's own aria-expanded state,
   no extra JS needed beyond what already sets that attribute. */
.nav-toggle{ display:none; background:none; border:0; padding:6px; width:36px; height:36px; position:relative; cursor:pointer; flex-shrink:0; }
.nav-toggle__line{
  position:absolute; left:7px; right:7px; height:2px; background:var(--navy);
  transition:transform 220ms var(--ease), opacity 180ms var(--ease);
}
.nav-toggle__line:nth-child(1){ top:12px; }
.nav-toggle__line:nth-child(2){ top:17px; }
.nav-toggle__line:nth-child(3){ top:22px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Locks the page behind the open mobile panel. Toggled on <html> by JS. */
html.nav-open{ overflow:hidden; height:100%; }
html.nav-open body{ overflow:hidden; height:100%; }

@media (max-width:1080px){
  .nav-toggle{ display:block; }

  /* The desktop inline nav (#navLinks) is simply hidden on mobile, its
     own markup and CSS are otherwise completely untouched. The "Book a
     Strategy Session" button also leaves the collapsed header on mobile,
     per direction: it moves inside the opened panel instead, so the
     collapsed mobile header shows only the logo and the toggle. */
  nav[aria-label="Primary"]{ display:none; }
  .nav-right .nav-cta{ display:none; }

  /* A shorter, tighter header reads as more deliberately "mobile" rather
     than the desktop bar simply carried over, and gets the hero's value
     proposition into view sooner. */
  .nav-inner{ height:76px; }
  .logo img, .logo .aunera-logo-fallback img{ max-height:48px; }
}

@media (min-width:1081px){
  /* The mobile panel never renders on desktop, regardless of JS state. */
  .nav-panel{ display:none !important; }
}

/* ---------- mobile navigation panel ---------- */
/* z-index is deliberately LOWER than .site-header's (100). The header
   stays in normal document flow at the very top and visually occludes
   the portion of this full-viewport panel that sits behind it, so the
   logo and the toggle/close button remain visible and clickable without
   needing to hardcode or measure the header's exact height anywhere.
   That measurement-dependent approach is what made the previous version
   fragile across different viewport widths. */
.nav-panel{
  position:fixed; inset:0; z-index:90;
  background:var(--offwhite);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 220ms var(--ease);
}
.nav-panel.open{ opacity:1; visibility:visible; pointer-events:auto; }

.nav-panel__scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:104px var(--gutter) 40px;
  display:flex; flex-direction:column; min-height:100%;
}

.nav-panel__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.nav-panel__list li{ list-style:none; border-top:1px solid rgba(27,42,71,0.1); }
.nav-panel__list li:first-child{ border-top:none; }
.nav-panel__list a{
  display:block; padding:19px 2px; font-size:19px; font-weight:500;
  color:var(--navy); letter-spacing:-0.01em;
}

.nav-panel__cta{ margin-top:auto; padding-top:32px; }
.nav-panel__cta .btn{ width:100%; justify-content:center; padding:17px 24px; font-size:15px; }

@media (max-height:680px){
  .nav-panel__list a{ padding:14px 2px; font-size:17px; }
  .nav-panel__scroll{ padding-top:84px; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--navy); color:var(--offwhite); overflow:hidden;
  padding-top:clamp(84px,12vw,150px); padding-bottom:clamp(64px,9vw,110px);
  min-height:600px;
}
.hero-inner{ position:relative; z-index:1; }
.hero-content{ max-width:560px; }
.hero h1{ color:var(--offwhite); font-size:clamp(36px, 4.8vw, 60px); line-height:1.1; letter-spacing:-0.02em; margin:18px 0 22px; max-width:16ch; }
.hero .sub{ font-size:clamp(16px,1.6vw,18.5px); color:rgba(247,245,240,0.78); max-width:46ch; font-weight:300; margin-bottom:34px; }

/* Editorial photography, replacing the old geometric A graphic. An
   understated diagonal edge (echoing the A mark's angled strokes) plus a
   navy gradient blend, so the photo reads as part of the hero rather
   than a bolted-on image card. No rounded corners, no motion. */
.hero-photo{
  position:absolute; top:0; right:0; bottom:0; width:45vw;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-photo picture, .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, var(--navy) 0%, rgba(27,42,71,0.5) 12%, rgba(27,42,71,0.15) 30%, rgba(27,42,71,0) 46%);
}

@media (max-width:1200px){ .hero-photo{ width:42vw; } }

@media (max-width:860px){
  /* The value proposition must read first: headline, description, CTAs,
     then the photograph, in that normal document order. The photo
     leaves absolute positioning entirely and becomes a plain block. */
  .hero{ padding-top:32px; padding-bottom:0; min-height:0; }
  .hero-content{ max-width:none; }
  .hero-photo{
    position:static; width:100%; height:auto; aspect-ratio:4/3;
    clip-path:none; margin-top:36px;
  }
  .hero-photo::after{ display:none; }
}

/* ---------- compact internal-page hero (Research, Perspective, Our Approach) ---------- */
/* A shorter, content-driven hero, replacing the old tall empty-navy
   block. Same navy/photo split mechanics as the homepage hero where a
   photograph is used (.hero-photo, reused as-is); pages using a
   decorative geometric composition instead of a photograph use
   .hero-decorative, positioned the same way but with no navy-blend
   overlay needed, it's line art drawn directly on the navy background,
   not a separate image panel. */
.hero-compact{ padding-top:clamp(70px,9vw,104px); padding-bottom:clamp(44px,6vw,64px); min-height:0; }
.hero-compact .hero-content{ max-width:600px; }

.hero-decorative{
  position:absolute; top:0; right:0; bottom:0; width:44vw;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero-decorative svg{ width:76%; height:76%; max-width:420px; }

@media (max-width:1200px){ .hero-decorative{ width:40vw; } }
@media (max-width:860px){
  /* Purely decorative, adds no information, so it is simply hidden on
     mobile rather than squeezed in, keeping the compact hero genuinely
     compact on small screens too. */
  .hero-decorative{ display:none; }
  .hero-compact{ padding-top:36px; padding-bottom:36px; }
}

/* ---------- section head ---------- */
.section-head{ max-width:660px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(26px,3.1vw,37px); margin-top:14px; letter-spacing:-0.015em; }
.section-head p.desc{ margin-top:14px; font-size:16px; color:var(--navy-65); max-width:58ch; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.on-dark h2{ color:var(--offwhite); }
.section-head.on-dark p.desc{ color:rgba(247,245,240,0.7); }

/* ---------- challenges: editorial "challenge navigator" ---------- */
.challenges{ background:#FFFFFF; border-top:1px solid rgba(27,42,71,0.08); border-bottom:1px solid rgba(27,42,71,0.08); }

.challenge-nav{ display:grid; grid-template-columns:repeat(4, 1fr); gap:48px; margin-top:12px; }
.challenge-group{ border-top:1px solid rgba(27,42,71,0.18); padding-top:22px; }
.challenge-group .num{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.05em; color:var(--gold); }
.challenge-group h3{
  font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--navy); margin:12px 0 18px;
}
.challenge-group ul{ display:flex; flex-direction:column; }
.challenge-group li{ border-top:1px solid rgba(27,42,71,0.08); }
.challenge-group li:first-child{ border-top:none; }
.challenge-group a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 0; font-size:15px; line-height:1.35; color:var(--navy);
  transition:color 160ms var(--ease);
}
.challenge-group a .arrow{
  color:var(--emerald); flex-shrink:0; opacity:0; transform:translateX(-4px);
  transition:opacity 160ms var(--ease), transform 160ms var(--ease);
}
.challenge-group a:hover{ color:var(--emerald); }
.challenge-group a:hover .arrow{ opacity:1; transform:translateX(0); }

@media (max-width:1100px){ .challenge-nav{ grid-template-columns:repeat(2,1fr); gap:36px 48px; } }
@media (max-width:640px){ .challenge-nav{ grid-template-columns:1fr; gap:36px; } }

/* .chip / .chip-grid remain in use as a non-clickable summary list on the
   Research page ("What we help organisations understand"). */
.chip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.chip{
  display:flex; align-items:center; gap:12px; padding:18px 18px;
  border:1px solid rgba(27,42,71,0.14); background:var(--offwhite);
  font-size:14px; font-weight:500; transition:border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}
.chip{ border-left:2px solid transparent; }
.chip:hover{ border-color:var(--emerald); background:#fff; transform:translateY(-1px); }
@media (max-width:900px){ .chip-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .chip-grid{ grid-template-columns:1fr; } }

/* ---------- why aunera ---------- */
.why-story{ max-width:760px; margin-bottom:56px; }
.why-story .kicker-line{ font-size:clamp(21px,2.6vw,28px); font-weight:500; line-height:1.5; color:var(--navy); }
.why-story .kicker-line em{ font-style:normal; color:var(--emerald); }
.cred-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(27,42,71,0.1); border:1px solid rgba(27,42,71,0.1); }
.cred-card{ background:#fff; padding:28px 26px; display:flex; flex-direction:column; gap:12px; }
.cred-card .a-mark{ width:18px; height:18px; color:var(--emerald); }
.cred-card h4{ font-size:15.5px; }
.cred-card p{ font-size:13.5px; color:var(--navy-65); }
@media (max-width:900px){ .cred-grid{ grid-template-columns:1fr; } }

/* ---------- research ---------- */
.research{ background:var(--navy); color:var(--offwhite); }
.research-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.research-lead p{ font-size:16px; color:rgba(247,245,240,0.75); margin-top:16px; max-width:44ch; }
.research-disciplines{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--white-line); border:1px solid var(--white-line); }
.rd-item{ background:var(--navy); padding:18px 20px; font-size:14px; color:rgba(247,245,240,0.88); display:flex; align-items:center; gap:10px; }
.rd-item .a-mark{ width:12px; height:12px; color:var(--gold); flex-shrink:0; }
@media (max-width:860px){ .research-grid{ grid-template-columns:1fr; } .research-disciplines{ grid-template-columns:1fr; } }

/* ---------- capabilities ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:rgba(27,42,71,0.1); border:1px solid rgba(27,42,71,0.1); }
.cap-card{
  background:var(--offwhite); padding:32px 28px; min-height:260px;
  display:flex; flex-direction:column; justify-content:space-between; gap:18px;
  transition:background 200ms var(--ease), transform 200ms var(--ease);
  scroll-margin-top:100px;
}
.cap-card:hover{ background:#ffffff; transform:translateY(-2px); }
.cap-card .cat{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy-40); }
.cap-card h3{ font-size:19px; margin:9px 0 11px; line-height:1.3; }
.cap-card p{ font-size:14px; color:var(--navy-65); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.tags span{ font-size:11px; color:var(--navy-65); border:1px solid rgba(27,42,71,0.16); padding:4px 9px; border-radius:20px; }
.cap-card .go{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--emerald); }
.cap-card .go svg{ width:13px; height:13px; transition:transform 180ms var(--ease); }
.cap-card:hover .go svg{ transform:translateX(3px); }
@media (max-width:1100px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---------- how we work ---------- */
.method{ background:#fff; border-top:1px solid rgba(27,42,71,0.08); border-bottom:1px solid rgba(27,42,71,0.08); }
.method-flow{ display:flex; align-items:stretch; border:1px solid rgba(27,42,71,0.12); margin-bottom:20px; }
.mf-stage{ flex:1; padding:24px 18px; border-right:1px solid rgba(27,42,71,0.12); position:relative; }
.mf-stage:last-child{ border-right:none; }
.mf-stage .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--terracotta); }
.mf-stage h4{ font-size:15px; margin:10px 0 8px; }
.mf-stage p{ font-size:12.5px; color:var(--navy-65); }
.method-note{ font-size:14px; color:var(--navy-65); max-width:74ch; margin-bottom:52px; }
.method-note strong{ color:var(--navy); font-weight:500; }
@media (max-width:900px){
  .method-flow{ flex-direction:column; }
  .mf-stage{ border-right:none; border-bottom:1px solid rgba(27,42,71,0.12); }
  .mf-stage:last-child{ border-bottom:none; }
}

.delivery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.delivery-card{ display:flex; flex-direction:column; gap:10px; }
.delivery-card .a-mark{ width:16px; height:16px; color:var(--terracotta); }
.delivery-card h4{ font-size:15.5px; }
.delivery-card p{ font-size:13.5px; color:var(--navy-65); }
@media (max-width:900px){ .delivery-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- perspective ---------- */
.perspective{ background:var(--offwhite); }
.cascade{ display:flex; flex-direction:column; gap:0; margin-top:8px; }
.cascade li{ display:grid; grid-template-columns:140px 1fr; gap:20px; align-items:baseline; padding:16px 0; border-top:1px solid rgba(27,42,71,0.1); }
.cascade li:last-child{ border-bottom:1px solid rgba(27,42,71,0.1); }
.cascade .term{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--terracotta); }
.cascade .def{ font-size:16.5px; color:var(--navy); font-weight:500; }
@media (max-width:700px){ .cascade li{ grid-template-columns:100px 1fr; } }

/* ---------- trust centre ---------- */
.trust{ background:#FFFFFF; border-top:1px solid rgba(27,42,71,0.08); }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:36px; }
.trust-card{ border:1px solid rgba(27,42,71,0.12); padding:28px 24px; display:flex; flex-direction:column; gap:14px; transition:border-color 180ms var(--ease), transform 180ms var(--ease); }
.trust-card:hover{ border-color:var(--navy); transform:translateY(-2px); }
.trust-card .icon{ width:24px; height:24px; color:var(--navy); }
.trust-card h4{ font-size:16px; }
.trust-card p{ font-size:13.5px; color:var(--navy-65); }
.trust-foot{ display:flex; justify-content:center; }
@media (max-width:800px){ .trust-grid{ grid-template-columns:1fr; } }

/* ---------- final cta ---------- */
.final-cta{ background:var(--navy); color:var(--offwhite); text-align:center; }
.final-cta .section-head{ margin-bottom:32px; }
.final-cta h2{ font-size:clamp(28px,3.8vw,44px); max-width:17ch; margin:0 auto; }
.final-cta .cta-pair{ justify-content:center; }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-ink); color:rgba(247,245,240,0.72); padding-top:72px; }
.foot-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:48px; border-bottom:1px solid var(--white-line); }
.foot-brand p{ font-size:14px; max-width:34ch; margin-top:14px; color:rgba(247,245,240,0.6); }
.site-footer h5{ color:var(--offwhite); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px; font-weight:500; }
.site-footer .foot-col a{ display:block; font-size:13.5px; padding:5px 0; color:rgba(247,245,240,0.72); transition:color 160ms var(--ease); }
.site-footer .foot-col a:hover{ color:var(--gold); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:24px 0; font-size:12px; color:rgba(247,245,240,0.5); }
.foot-legal{ display:flex; gap:18px; flex-wrap:wrap; }
@media (max-width:900px){ .foot-top{ grid-template-columns:repeat(2,1fr); } }

/* ---------- generic page / single capability ---------- */
.generic-page .page-content p{ margin-bottom:18px; font-size:16px; color:var(--navy-65); }
.cap-single h2{ letter-spacing:-0.01em; }

/* ---------- forms (contact, capability pack, modal) ---------- */
.field{ margin-bottom:16px; display:flex; flex-direction:column; gap:6px; align-self:start; }
.field label{ font-size:12.5px; font-weight:500; color:var(--navy); }
.field input, .field select, textarea{
  box-sizing:border-box; font-family:inherit; font-size:14px; padding:12px 14px; border:1px solid rgba(27,42,71,0.22);
  border-radius:2px; background:var(--offwhite); color:var(--navy); width:100%;
}
/* Inputs and the native <select> render with different intrinsic heights
   across browsers (Chrome in particular gives <select> extra vertical
   padding). Left alone, that mismatch is what produces an unexplained gap
   or overlap between a text field and a select sitting in the same grid
   row. Forcing both to an identical explicit height, and replacing the
   native select chrome with a custom chevron, removes the mismatch at
   its source rather than papering over the symptom. */
.field input, .field select{ height:46px; }
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B2A47' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:36px;
}
.field textarea{ height:auto; }
.field input[type="file"]{ height:auto; padding:10px 12px; font-size:13px; cursor:pointer; }
.field input:focus, .field select:focus, textarea:focus{ outline:2px solid var(--emerald); outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
/* Grid items default to min-width:auto, which refuses to shrink below the
   intrinsic width of their content (a long select option, an unbroken
   label). That is what was pushing Preferred Contact Method into the Phone
   column. Forcing min-width:0 lets grid actually honour the 1fr tracks. */
.field-row > .field{ min-width:0; }
.consent{ display:flex; align-items:flex-start; gap:10px; margin:6px 0 24px; }
.consent input{ margin-top:3px; }
.consent label{ font-size:12.5px; color:var(--navy-65); }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

/* ---------- context banner (contact page, when arriving with ?enquiry=) ---------- */
.context-banner{ background:#EAF4EF; border:1px solid var(--emerald); padding:16px 22px; margin-bottom:28px; font-size:14px; color:var(--navy); }
.context-banner strong{ font-weight:600; }

/* ---------- inline form error ---------- */
.form-error{ background:#FBEAE5; border:1px solid var(--terracotta); padding:16px 22px; margin-bottom:24px; font-size:14px; color:var(--navy); }

/* ---------- confirmation modal (used on the Contact page) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(22,35,59,0.6); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; padding:24px; z-index:200;
}
.modal-overlay.open{ display:flex; }
.enquiry-modal{
  background:#fff; max-width:460px; width:100%; padding:44px 40px; text-align:left;
  animation:modal-in 180ms var(--ease);
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.enquiry-modal__mark{ display:block; width:28px; height:2px; background:var(--emerald); margin-bottom:22px; }
.enquiry-modal .eyebrow{ margin-bottom:4px; }
.enquiry-modal__lede{ font-size:21px; font-weight:600; color:var(--navy); margin:12px 0 14px; letter-spacing:-0.01em; }
.enquiry-modal__body{ font-size:15px; color:var(--navy-65); line-height:1.6; margin-bottom:16px; }
.enquiry-modal__note{ font-size:13px; color:var(--navy-40); line-height:1.6; margin-bottom:28px; }
.enquiry-modal .btn{ width:100%; justify-content:center; }

/* ---------- related capabilities ---------- */
.related-caps{ display:flex; flex-wrap:wrap; gap:12px; }
.related-caps a{ font-size:13.5px; font-weight:500; border:1px solid rgba(27,42,71,0.18); padding:9px 16px; border-radius:20px; color:var(--navy); transition:border-color 160ms var(--ease), color 160ms var(--ease); }
.related-caps a:hover{ border-color:var(--emerald); color:var(--emerald); }

/* ---------- buyer questions ---------- */
.buyer-questions{ display:flex; flex-direction:column; gap:0; }
.buyer-questions li{ padding:12px 0; border-top:1px solid rgba(27,42,71,0.1); font-size:15px; color:var(--navy-65); }

/* ---------- capability discuss band ---------- */
.discuss-band{ background:var(--offwhite); border-top:1px solid rgba(27,42,71,0.1); text-align:center; }
.discuss-band h2{ font-size:clamp(24px,3vw,32px); margin-bottom:24px; }

/* ---------- breadcrumbs ---------- */
.breadcrumbs{ background:var(--offwhite); border-bottom:1px solid rgba(27,42,71,0.08); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; list-style:none; margin:0; padding:12px 0; gap:0; }
.breadcrumbs li{ font-size:12.5px; color:var(--navy-65); }
.breadcrumbs li:not(:last-child)::after{ content:'/'; margin:0 8px; color:rgba(27,42,71,0.3); }
.breadcrumbs a{ color:var(--navy-65); transition:color 160ms var(--ease); }
.breadcrumbs a:hover{ color:var(--emerald); }
.breadcrumbs li[aria-current="page"]{ color:var(--navy); font-weight:500; }

/* ---------- icon system (restrained, used sparingly) ---------- */
.icon{ width:22px; height:22px; color:var(--navy); flex-shrink:0; }
.icon path, .icon rect, .icon circle{ vector-effect:non-scaling-stroke; }

/* ---------- editorial photography panels ---------- */
/* Large, deliberate image moments, not stock-photo cards. One per page,
   generous surrounding whitespace, a short caption rather than dense copy. */
.editorial{ padding:0; }
.editorial > .wrap{ padding-top:72px; padding-bottom:8px; }
.editorial-frame{
  position:relative; width:100%; overflow:hidden; background:var(--navy);
  aspect-ratio:21/9;
}
.editorial-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.editorial-caption{
  position:absolute; left:0; right:0; bottom:0; padding:32px var(--gutter);
  background:linear-gradient(180deg, rgba(22,35,59,0) 0%, rgba(22,35,59,0.75) 100%);
}
.editorial-caption .eyebrow{ color:#8FD6BB; margin-bottom:8px; }
.editorial-caption .eyebrow::before{ background:var(--gold); }
.editorial-caption p{ color:var(--offwhite); font-size:17px; max-width:52ch; font-weight:300; }

/* A quieter, contained variant for pages where photography should support
   rather than lead, paired side-by-side with text ("complement rather
   than dominate", used on the Research page). */
.editorial-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
.editorial-split .editorial-frame{ aspect-ratio:4/3; border-radius:0; }
.editorial-split-text .eyebrow{ margin-bottom:14px; }
.editorial-split-text p{ font-size:16px; color:var(--navy-65); max-width:46ch; }
@media (max-width:860px){
  .editorial-split{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:700px){
  .editorial-frame{ aspect-ratio:4/5; }
  .editorial-caption{ padding:24px var(--gutter); }
  .editorial-caption p{ font-size:15.5px; }
}

/* ---------- editorial text block (precedes/follows a photo, never on it) ---------- */
.editorial-text{ max-width:640px; margin:0 auto 40px; text-align:center; }
.editorial-text .eyebrow{ justify-content:center; }
.editorial-text p{ font-size:18px; color:var(--navy-65); font-weight:300; margin-top:14px; }
.editorial-text.on-dark p{ color:rgba(247,245,240,0.8); }

/* ---------- contact page split ---------- */
/* This is a <section>, which by default inherits the sitewide base
   section{padding:...} rule (up to 110px top/bottom). Left in place,
   that stacks on top of .contact-intro/.contact-form-panel's own
   padding below, that stacking was the actual cause of the excess gap
   between the breadcrumb and the visible contact content. */
.contact-split{ display:grid; grid-template-columns:40% 60%; padding:0; }
.contact-intro{
  background:var(--navy); color:var(--offwhite);
  padding:clamp(44px,5vw,64px) clamp(32px,4vw,56px);
  display:flex; flex-direction:column; justify-content:center;
}
.contact-intro h1{ color:var(--offwhite); font-size:clamp(28px,3vw,38px); margin:16px 0 18px; max-width:14ch; }
.contact-intro .sub{ font-size:16px; color:rgba(247,245,240,0.78); font-weight:300; max-width:38ch; margin-bottom:28px; }
.contact-intro__meta{ margin-top:auto; padding-top:28px; border-top:1px solid var(--white-line); display:flex; flex-direction:column; gap:10px; }
.contact-intro__meta a, .contact-intro__meta span{ font-size:14px; color:rgba(247,245,240,0.75); }
.contact-form-panel{ background:var(--offwhite); padding:clamp(36px,5vw,56px) clamp(32px,5vw,64px); }
.contact-form-panel .form-shell{ max-width:520px; }

@media (max-width:900px){
  .contact-split{ grid-template-columns:1fr; }
  .contact-intro{ padding:44px var(--gutter) 28px; }
  .contact-form-panel{ padding:28px var(--gutter) 56px; }
}

/* ---------- misc ---------- */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.blog-grid a{ color:var(--navy); }
.blog-grid a:hover{ color:var(--emerald); }