/* ============================================================================
   XPRESS RECRUITERS
   Design language: "Chambers" -- editorial legal publishing.
   Deep ink, warm paper stock, brass rules, clause numbering, and display
   typography with real authority. Character comes from typography, hairlines
   and spatial confidence, never from decoration.

   Typefaces (self-hosted variable woff2, assets/fonts/):
     Newsreader -- display serif, editorial, optical-size axis
     Archivo    -- grotesque, UI + body + letterspaced labels
   ============================================================================ */

@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url("/wp-content/themes/xpress-recruiters/assets/fonts/archivo.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:200 800;
  font-display:swap; src:url("/wp-content/themes/xpress-recruiters/assets/fonts/newsreader.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader"; font-style:italic; font-weight:200 800;
  font-display:swap; src:url("/wp-content/themes/xpress-recruiters/assets/fonts/newsreader-italic.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens */
/* BLUE RAMP SCHEME. Surfaces run down a single 5-step blue scale; gold is the
   only accent. Earlier themes kept at site-light-theme.css.bak (paper) and
   site-dark-neutral.css.bak (black/gold) - copy either back to revert.

   The top two steps of the ramp are structural only. Measured on this scale,
   gold reads 4.1:1 on Polynesian and 2.5:1 on Celtic, and muted text 3.2:1 and
   1.9:1 - all below AA. They are used for borders, hover fills and highlights,
   never behind body text. */
:root{
  /* the ramp */
  --bg:#000919;            /* Rich Black  - page ground */
  --surface:#001D3F;       /* Oxford Blue - alternating sections, bands */
  --surface-2:#04356A;     /* Yale Blue   - cards, panels, inputs */
  --surface-3:#054E98;     /* Polynesian  - raised: dropdowns, active chips */
  --celtic:#0A6ED3;        /* Celtic Blue - hairlines, focus, highlights */

  /* band colours, drawn from the same ramp */
  --ink:#001D3F;
  --ink-deep:#000919;
  --ink-soft:#04356A;

  /* gold - the single accent, and the logo colour */
  --brass:#fca311;
  --brass-lt:#ffcb52;
  --brass-dk:#c8820c;

  /* light tones - on this ground they carry TEXT, not background */
  --bone:#e9e7e2;
  --bone-2:#d6d3cc;
  --bone-3:#b9b6ae;

  /* rules, tinted with the ramp rather than neutral white */
  --line:rgba(10,110,211,.30);
  --line-soft:rgba(10,110,211,.17);
  --line-dk:rgba(10,110,211,.34);

  /* text. muted lifted from #9aa2ae to #a8b2c0 so it still clears AA on a
     Yale Blue card (5.7:1 rather than a marginal 4.7:1) */
  --text:#e9e7e2;
  --muted:#a8b2c0;
  --muted-dk:#b6bfcb;

  --display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --max:1240px;
  --measure:700px;
  --gutter:clamp(20px, 4vw, 44px);

  --shadow-sm:0 2px 10px -4px rgba(0,5,15,.6);
  --shadow-md:0 24px 48px -28px rgba(0,5,15,.85);
  --shadow-lg:0 40px 84px -40px rgba(0,5,15,.95);

  --grain:url("/wp-content/themes/xpress-recruiters/assets/img/grain.svg");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  background-color:var(--bg);
  background-image:var(--grain);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  color:#fdfcfa;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem, 5vw, 3.9rem);}
h2{font-size:clamp(1.85rem, 3.1vw, 2.7rem);}
h3{font-size:1.32rem; line-height:1.22;}
h4{font-size:1.02rem; letter-spacing:-.005em;}
p{margin:0 0 1.15em;}
a{color:var(--brass); text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--brass-lt);}
strong{font-weight:600;}
em{font-style:italic;}
img,svg{max-width:100%; display:block;}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible, details:focus-visible{
  outline:2px solid var(--celtic); outline-offset:3px; border-radius:1px;
}

::selection{background:var(--brass); color:#0b0c0f;}

/* the editorial label -- small, letterspaced, uppercase. Used everywhere. */
.kicker{
  display:block; font-family:var(--sans); font-weight:600;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:0 0 14px;
}
.kicker::before{
  content:""; display:inline-block; width:20px; height:1px;
  background:var(--brass); vertical-align:middle; margin-right:10px;
  transform:translateY(-1px);
}

.lede{
  font-size:clamp(1.1rem, 1.5vw, 1.24rem); line-height:1.6;
  color:var(--muted); max-width:60ch; font-weight:400;
}

hr.rule{width:100%; height:1px; background:var(--line); border:0; margin:32px 0;}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
.measure{max-width:var(--measure);}
section{padding:clamp(64px, 8vw, 110px) 0;}
.section-alt{background-color:var(--surface); background-image:var(--grain);}
.center{text-align:center;}
.center .kicker::before{display:none;}
.center .lede{margin-left:auto; margin-right:auto;}

/* asymmetric editorial grid: narrow label column + wide content column */
.two-col{
  display:grid; grid-template-columns:minmax(200px, .8fr) minmax(0, 1.7fr);
  gap:clamp(32px, 5vw, 76px); align-items:start;
}

/* ---------------------------------------------------------------- skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; z-index:200;
  background:var(--brass); color:#0b0c0f; padding:14px 20px;
  font-weight:600; font-size:.9rem; letter-spacing:.02em;
}
.skip-link:focus{left:20px; top:20px;}

/* ---------------------------------------------------------------- buttons */
.btn{
  --btn-fg:var(--bone); --btn-bg:var(--ink); --btn-bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:.87rem;
  letter-spacing:.07em; text-transform:uppercase;
  padding:15px 28px; border:1px solid var(--btn-bd); border-radius:0;
  background:var(--btn-bg); color:var(--btn-fg); text-decoration:none; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0);}
.btn-primary{--btn-bg:var(--brass); --btn-fg:#0b0c0f; --btn-bd:var(--brass);}
.btn-primary:hover{--btn-bg:var(--brass-lt); --btn-bd:var(--brass-lt); color:#0b0c0f;}
.btn-gold{--btn-bg:var(--brass); --btn-fg:var(--ink-deep); --btn-bd:var(--brass);}
.btn-gold:hover{--btn-bg:var(--brass-lt); --btn-bd:var(--brass-lt); color:var(--ink-deep);}
.btn-outline{--btn-bg:transparent; --btn-fg:var(--bone); --btn-bd:rgba(255,255,255,.28);}
.btn-outline:hover{--btn-bg:var(--brass); --btn-bd:var(--brass); color:#0b0c0f;}
.btn-outline-light{--btn-bg:transparent; --btn-fg:var(--bone); --btn-bd:rgba(247,244,237,.4);}
.btn-outline-light:hover{--btn-bg:rgba(247,244,237,.1); --btn-bd:var(--bone); color:#fff;}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;}

/* ---------------------------------------------------------------- header */
header.site-header{
  position:sticky; top:0; z-index:80;
  background-color:var(--bg);
  background-image:var(--grain);
  border-bottom:1px solid rgba(10,110,211,.4);
}
header.site-header::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--brass) 0%, var(--brass-lt) 38%, var(--brass) 100%);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:var(--max); margin:0 auto; padding:16px var(--gutter);
}
.logo{display:inline-flex; align-items:center; text-decoration:none;}
.logo-img{
  height:54px; width:auto; display:block;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.logo:hover .logo-img{transform:scale(1.03); opacity:.92;}
.footer-grid .logo-img{height:58px;}

nav.primary-nav > ul{list-style:none; display:flex; gap:30px; margin:0; padding:0; align-items:center;}
nav.primary-nav a{
  position:relative; display:inline-block; padding:8px 0;
  font-size:.76rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:#c3cbd9; text-decoration:none; transition:color .22s ease;
}
nav.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
nav.primary-nav a:hover{color:#fff;}
nav.primary-nav a:hover::after, nav.primary-nav a[aria-current="page"]::after{transform:scaleX(1);}
nav.primary-nav a[aria-current="page"]{color:#fff;}

nav.primary-nav li.has-sub{position:relative;}
nav.primary-nav li.has-sub > .sub{
  position:absolute; top:100%; left:-18px; min-width:272px; margin:0; padding:10px;
  list-style:none; background:var(--surface-3); border:1px solid rgba(10,110,211,.55);
  border-top:2px solid var(--brass); box-shadow:0 26px 50px -18px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s;
}
nav.primary-nav li.has-sub:hover > .sub,
nav.primary-nav li.has-sub:focus-within > .sub{opacity:1; visibility:visible; transform:translateY(0);}
nav.primary-nav .sub a{
  display:block; padding:11px 14px; font-size:.8rem; letter-spacing:.04em;
  text-transform:none; font-weight:500; color:#eef2f8;
}
nav.primary-nav .sub a::after{display:none;}
nav.primary-nav .sub a:hover{background:rgba(255,255,255,.12); color:#fff;}

.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-cta .btn{padding:13px 22px; font-size:.76rem;}
.hamburger{
  display:none; background:none; border:1px solid rgba(247,244,237,.28); padding:11px 12px; cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.hamburger:hover{border-color:var(--brass); background:rgba(252,163,17,.12);}
.hamburger span{display:block; width:20px; height:1.5px; background:#f7f4ed; margin:4px 0;}
#mobile-nav{display:none;}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink-deep); color:var(--bone);
  padding:clamp(70px, 9vw, 130px) 0 clamp(64px, 8vw, 112px);
}
/* layered atmosphere: warm glow, cool depth, faint brass ring, engraved grid */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    var(--grain),
    radial-gradient(60% 90% at 78% 8%, rgba(252,163,17,.16), transparent 62%),
    radial-gradient(58% 85% at 6% 92%, rgba(10,110,211,.30), transparent 66%),
    linear-gradient(163deg, #04356A 0%, #001D3F 55%, #000919 100%);
}
.hero::after{
  content:""; position:absolute; right:-14%; top:-32%;
  width:min(760px, 74vw); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(10,110,211,.42); pointer-events:none;
  box-shadow:inset 0 0 140px rgba(10,110,211,.10);
}
.hero > .wrap{position:relative; z-index:2;}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(38px, 6vw, 84px); align-items:center;
}
.hero h1{
  color:#fdfcfa; font-size:clamp(2.6rem, 6vw, 4.7rem); line-height:.99;
  letter-spacing:-.025em; margin-bottom:.42em; font-weight:400;
}
.hero h1 em{
  font-style:italic; color:var(--brass-lt);
  font-weight:400;
}
.hero .lede{color:#c9d0d9; max-width:52ch; font-size:clamp(1.06rem,1.5vw,1.2rem);}
.hero-note{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-dk);
  font-size:.9rem; color:var(--muted-dk);
}
.hero-note a{color:var(--brass-lt); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(220,174,99,.4); padding-bottom:2px;}
.hero-note a:hover{color:#fff; border-bottom-color:#fff;}
.hero-figure{position:relative; z-index:2;}

/* the hero panel reads as a directory / index card */
.hero-panel{
  background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line-dk); padding:clamp(24px,3vw,34px);
  backdrop-filter:blur(2px);
}
.hero-panel h2{
  font-family:var(--sans); color:var(--brass-lt); font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; margin:0 0 20px;
  padding-bottom:14px; border-bottom:1px solid var(--line-dk); line-height:1.4;
}
.hero-panel ul{margin:0; padding:0; list-style:none;}
.hero-panel li{
  position:relative; color:#d3d9e1; font-size:.97rem; line-height:1.5;
  padding:13px 0 13px 26px; border-bottom:1px solid rgba(247,244,237,.07);
}
.hero-panel li:last-child{border-bottom:0; padding-bottom:0;}
.hero-panel li::before{
  content:""; position:absolute; left:2px; top:21px;
  width:9px; height:1px; background:var(--brass);
}

/* interior page hero */
.page-hero{
  position:relative; overflow:hidden; color:var(--bone);
  background:var(--ink-deep);
  padding:clamp(56px, 7vw, 92px) 0 clamp(50px, 6vw, 78px);
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    var(--grain),
    radial-gradient(70% 100% at 82% 0%, rgba(252,163,17,.14), transparent 60%),
    radial-gradient(60% 90% at 4% 100%, rgba(10,110,211,.26), transparent 64%),
    linear-gradient(160deg, #04356A 0%, #001D3F 58%, #000919 100%);
}
.page-hero::after{
  content:""; position:absolute; right:-8%; top:-46%;
  width:min(560px,60vw); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(10,110,211,.38); pointer-events:none;
}
.page-hero > .wrap{position:relative; z-index:2;}
.page-hero h1{color:#fdfcfa; font-weight:400; margin-bottom:.4em;}
.page-hero .lede{color:#c9d0d9;}
.page-hero .breadcrumb{color:var(--muted-dk); margin:0 0 20px;}
.page-hero .breadcrumb a{color:#cfd5dd; text-decoration:none;}
.page-hero .breadcrumb a:hover{color:var(--brass-lt);}
.page-hero .btn-row{margin-top:32px;}

/* ---------------------------------------------------------------- trust bar */
.trust-bar{background-color:var(--surface); background-image:var(--grain); position:relative;}
.trust-bar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(10,110,211,.7), transparent);
}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.trust-item{
  padding:clamp(28px,3.4vw,44px) clamp(18px,2.4vw,32px);
  border-right:1px solid var(--line-dk);
}
.trust-item:last-child{border-right:0;}
.trust-num{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem, 2.6vw, 2.5rem); line-height:1;
  color:#fdfcfa; letter-spacing:-.02em; margin-bottom:12px;
}
.trust-label{
  display:block; font-size:.76rem; line-height:1.5; color:var(--muted-dk);
  letter-spacing:.055em; text-transform:uppercase; font-weight:500;
}

/* ---------------------------------------------------------------- answer + takeaways */
.answer-block{
  position:relative; background:var(--surface);
  border-left:2px solid var(--brass); padding:26px 30px; margin:30px 0 36px;
  max-width:74ch;
}
.answer-block p{
  margin:0; font-family:var(--display); font-size:1.16rem; line-height:1.55;
  color:#fdfcfa;
}
.answer-block strong{font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  display:block; margin-bottom:10px;}

.takeaways{
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(24px,3vw,32px); margin:34px 0; position:relative;
}
.takeaways h2{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brass); margin:0 0 18px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.takeaways ul{margin:0; padding:0; list-style:none;}
.takeaways li{
  position:relative; padding:9px 0 9px 28px; font-size:.98rem; line-height:1.6;
}
.takeaways li::before{
  content:""; position:absolute; left:2px; top:19px; width:12px; height:1px; background:var(--brass);
}

.note-box{
  background:transparent; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; margin:34px 0; font-size:.96rem; color:var(--muted);
}
.note-box a{font-weight:600;}

/* ---------------------------------------------------------------- cards */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);
  margin-top:8px;
}
.card{
  position:relative; background:transparent;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(28px,3.2vw,40px); display:flex; flex-direction:column;
  transition:background-color .35s ease;
  counter-increment:cardnum;
}
.card::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--brass); transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.card:hover{background:var(--surface-2);}
.card:hover::before{width:100%;}
.card h3{margin-bottom:10px;}
.card p{color:var(--muted); font-size:.97rem; margin-bottom:22px;}
.card .card-link{
  margin-top:auto; font-size:.73rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--brass);
  display:inline-flex; align-items:center; gap:9px;
}
.card .card-link::after{
  content:"→"; font-size:1rem; transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-link::after{transform:translateX(5px);}
.card:hover .card-link{color:var(--brass-lt);}

/* roles: a set index, hairline separated */
.roles-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  border-top:1px solid var(--line); margin-top:8px;
}
.roles-grid div{
  padding:15px 18px 15px 0; border-bottom:1px solid var(--line);
  font-size:.96rem; color:var(--text);
}

.practice-list{columns:2; column-gap:56px; padding:0; list-style:none; margin:24px 0 0;}
.practice-list li{
  break-inside:avoid; padding:12px 0; border-bottom:1px solid var(--line-soft);
  font-size:.97rem;
}

/* audience pathways */
.audience-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.5vw,30px); margin-top:8px;}
.audience-card{
  background:var(--surface-2); border:1px solid var(--line);
  padding:clamp(28px,3.4vw,42px); display:flex; flex-direction:column;
  transition:border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.audience-card:hover{border-color:var(--brass); transform:translateY(-3px); box-shadow:var(--shadow-md);}
.audience-card h3{font-size:1.5rem; margin-bottom:12px;}
.audience-card p{color:var(--muted); font-size:.98rem;}
.audience-card ul{padding:0; margin:0 0 26px; list-style:none;}
.audience-card li{
  position:relative; padding:8px 0 8px 24px; color:var(--muted); font-size:.95rem;
  border-bottom:1px solid var(--line-soft);
}
.audience-card li::before{content:""; position:absolute; left:0; top:18px; width:11px; height:1px; background:var(--brass);}
.audience-card .btn{margin-top:auto; align-self:flex-start;}
.section-alt .audience-card{background:var(--surface-2);}

/* ---------------------------------------------------------------- process */
.process-list{margin-top:8px; border-top:1px solid var(--line);}
.process-item{
  display:grid; grid-template-columns:clamp(70px,8vw,110px) 1fr;
  gap:clamp(20px,3vw,44px); padding:clamp(24px,3vw,34px) 0;
  border-bottom:1px solid var(--line); transition:background-color .35s ease;
}
.process-item:hover{background:var(--surface);}
.process-num{
  font-family:var(--display); font-size:clamp(2rem,3.4vw,3rem); line-height:.9;
  font-weight:300; color:rgba(255,255,255,.20); letter-spacing:-.03em;
  transition:color .35s ease;
}
.process-item:hover .process-num{color:var(--brass);}
.process-item h3{margin-bottom:8px; font-size:1.28rem;}
.process-item p{color:var(--muted); margin:0; font-size:.98rem; max-width:62ch;}

/* ---------------------------------------------------------------- why grid */
.why-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:8px;
}
.why-item{
  padding:clamp(26px,3vw,38px); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color .35s ease;
}
.why-item:hover{background:var(--surface-2);}
.section-alt .why-item:hover{background:var(--surface-2);}
.why-item h3{
  font-size:1.16rem; margin-bottom:12px; padding-bottom:12px;
  border-bottom:1px solid var(--line); display:block;
}
.why-item p{color:var(--muted); font-size:.96rem; margin:0;}

/* ---------------------------------------------------------------- team */
.team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.6vw,32px); margin-top:8px;}
.team-card{
  background:var(--surface-2); border:1px solid var(--line); overflow:hidden;
  transition:border-color .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.team-card:hover{border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--shadow-md);}
.team-card .portrait{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 22%;
  background:var(--surface-3); filter:grayscale(.16) contrast(1.02) brightness(1.04);
  transition:filter .5s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.team-card:hover .portrait{filter:grayscale(0) contrast(1); transform:scale(1.03);}
.team-info{padding:clamp(20px,2.4vw,28px);}
.team-info h3{font-size:1.3rem; margin-bottom:6px;}
.team-info .role{
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brass); margin:0 0 16px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.team-info p{color:var(--muted); font-size:.94rem; line-height:1.65; margin-bottom:.9em;}
.team-info a{font-size:.8rem; font-weight:600; text-decoration:none; letter-spacing:.04em;}
.team-info a:hover{text-decoration:underline;}

/* ---------------------------------------------------------------- locations */
.ncr-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.ncr-chips span, .ncr-chips a{
  display:inline-block; padding:10px 20px; font-size:.8rem; font-weight:500;
  letter-spacing:.05em; color:var(--text); background:var(--surface-2);
  border:1px solid var(--line); text-decoration:none;
  transition:border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s ease;
}
.ncr-chips a:hover{border-color:var(--brass); background:var(--brass); color:#0b0c0f; transform:translateY(-2px);}

.loc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:8px;}
.loc-card{
  position:relative; padding:clamp(26px,3vw,38px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color .35s ease;
}
.loc-card::before{
  content:""; position:absolute; left:0; top:0; width:0; height:2px; background:var(--brass);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.loc-card:hover{background:var(--surface-2);}
.loc-card:hover::before{width:100%;}
.loc-card h3{margin-bottom:10px;}
.loc-card p{color:var(--muted); font-size:.95rem; margin-bottom:20px;}
.loc-card a{
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.loc-card a::after{content:"→"; font-size:1rem; transition:transform .3s ease;}
.loc-card:hover a::after{transform:translateX(5px);}

/* ---------------------------------------------------------------- Q&A + FAQ */
.qa-item{padding:30px 0; border-top:1px solid var(--line);}
.qa-item:last-child{border-bottom:1px solid var(--line);}
.qa-item h3{font-size:1.3rem; margin-bottom:12px;}
.qa-item p{color:var(--muted); margin:0; max-width:74ch;}

.faq-item{border-top:1px solid var(--line);}
.faq-item:last-of-type{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:baseline; gap:24px; padding:24px 0;
  font-family:var(--display); font-size:1.18rem; font-weight:500; color:#fdfcfa;
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--brass);}
.faq-item summary::after{
  content:"+"; flex-shrink:0; font-family:var(--sans); font-weight:400;
  font-size:1.4rem; line-height:1; color:var(--brass);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 0 26px; color:var(--muted); max-width:72ch;}
.faq-item .faq-a p:last-child{margin-bottom:0;}

/* ---------------------------------------------------------------- insights */
.insight-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.6vw,30px); margin-top:8px;}
.insight-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
  transition:border-color .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.insight-card:hover{border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--shadow-md);}
.insight-card .thumb{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.insight-card:hover .thumb{transform:scale(1.04);}
.insight-body{padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; flex:1;}
.insight-card p.topic-label{
  font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin:0 0 12px;
}
.insight-card h3{font-size:1.14rem; line-height:1.3; margin:0;}
.insight-card h3 a{color:#fdfcfa; text-decoration:none;}
.insight-card:hover h3 a{color:var(--brass);}
.insight-card .meta{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:.76rem; color:var(--muted); letter-spacing:.03em;
}
.insight-note{margin-top:28px; font-size:.95rem; color:var(--muted);}

/* ---------------------------------------------------------------- conversion */
.conversion{
  position:relative; overflow:hidden; background:var(--ink-deep); color:var(--bone);
}
.conversion::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    var(--grain),
    radial-gradient(65% 100% at 88% 12%, rgba(252,163,17,.16), transparent 62%),
    radial-gradient(55% 90% at 6% 96%, rgba(10,110,211,.26), transparent 64%),
    linear-gradient(158deg, #04356A 0%, #001D3F 60%, #000919 100%);
}
.conversion::after{
  content:""; position:absolute; left:-6%; bottom:-58%;
  width:min(460px,52vw); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(10,110,211,.34); pointer-events:none;
}
.conversion > .wrap{position:relative; z-index:2;}
.conversion h2{color:#fdfcfa; font-weight:400; max-width:17ch;}
.conversion p, .conversion .lede{color:#c9d0d9;}
.conversion .kicker{color:var(--brass-lt);}
.conversion .kicker::before{background:var(--brass-lt);}

/* ---------------------------------------------------------------- contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(34px,5vw,72px);}
.contact-details h3{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass);
  margin:32px 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.contact-details p{margin-bottom:6px; font-size:1.02rem;}
.contact-details a{text-decoration:none; font-weight:500;}
.contact-details a:hover{text-decoration:underline;}

form{background:var(--surface); border:1px solid var(--line); padding:clamp(26px,3.4vw,42px);}
.section-alt form{background:var(--surface-2);}
fieldset{border:0; padding:0; margin:0 0 26px;}
legend{
  font-family:var(--display); font-size:1.5rem; font-weight:500; color:#fdfcfa;
  padding:0; margin-bottom:8px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
label{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:20px 0 8px;
}
fieldset > label:first-of-type, .form-row label{margin-top:0;}
input, select, textarea{
  width:100%; padding:13px 15px; font-family:var(--sans); font-size:.98rem; color:var(--text);
  background:#001731; border:1px solid var(--line); border-radius:0;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--celtic); background:#002347;
  box-shadow:0 0 0 3px rgba(10,110,211,.28);
}
textarea{resize:vertical; min-height:130px; line-height:1.6;}
.privacy-note{font-size:.83rem; color:var(--muted); margin-top:18px; line-height:1.6;}

/* ---------------------------------------------------------------- article */
.breadcrumb{font-size:.78rem; letter-spacing:.04em; color:var(--muted); margin:24px 0 8px;}
.breadcrumb a{color:var(--muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--brass-dk);}

.blog-hero{
  position:relative; overflow:hidden; background:var(--ink-deep);
  background-size:cover; background-position:center;
  padding:clamp(56px,7vw,96px) 0 clamp(44px,5vw,64px);
}
.blog-hero::before{
  content:""; position:absolute; inset:0;
  /* Left-weighted scrim. The headline sits in a 700px measure column on the
     left, so the ink is heaviest there for legibility and clears toward the
     right -- which is where the hero image's subject is composed to sit.
     A photograph dropped in here still reads; a full-coverage scrim crushed it. */
  background:var(--grain),
             linear-gradient(96deg,
               rgba(0,9,25,.95) 0%,
               rgba(0,9,25,.89) 34%,
               rgba(0,29,63,.64) 62%,
               rgba(4,53,106,.42) 100%),
             linear-gradient(180deg, rgba(0,9,25,.32) 0%, transparent 38%, rgba(0,9,25,.50) 100%);
}
.blog-hero > .wrap{position:relative; z-index:2;}
.blog-hero h1{color:#fdfcfa; font-weight:400; margin:16px 0 .45em; font-size:clamp(2.1rem,4.2vw,3.4rem);}
.blog-hero .breadcrumb, .blog-hero .breadcrumb a{color:var(--muted-dk);}
.blog-hero .breadcrumb a:hover{color:var(--brass-lt);}

.pillar-tag{
  display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; padding:7px 15px; text-decoration:none;
  background:rgba(220,174,99,.13); border:1px solid rgba(220,174,99,.36); color:var(--brass-lt);
  transition:background-color .25s ease, color .25s ease;
}
.pillar-tag:hover{background:var(--brass); color:var(--ink-deep);}

.byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:.83rem; color:var(--muted-dk); letter-spacing:.02em;
  margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line-dk);
}
.byline strong{color:#e4e8ed; font-weight:600;}
.byline .avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:.95rem; font-weight:500;
  background:rgba(220,174,99,.16); border:1px solid rgba(220,174,99,.35); color:var(--brass-lt);
}

article{padding:clamp(34px,4vw,52px) 0 10px; font-size:1.06rem; line-height:1.78;}
article h2{font-size:clamp(1.55rem,2.4vw,2rem); margin:2em 0 .55em;}
article h3{font-size:1.25rem; margin:1.6em 0 .5em;}
article p{margin:0 0 1.3em;}
article > p:first-of-type{font-size:1.16rem; line-height:1.66; color:#fdfcfa;}
article ul, article ol{margin:0 0 1.4em; padding-left:0; list-style:none;}
article ul li{position:relative; padding:8px 0 8px 26px;}
article ul li::before{content:""; position:absolute; left:0; top:19px; width:12px; height:1px; background:var(--brass);}

.article-hero{width:100%; aspect-ratio:16/9; object-fit:cover; margin:0 0 10px;}

.cta-box{
  position:relative; overflow:hidden; background:var(--ink-deep); color:var(--bone);
  padding:clamp(30px,3.6vw,44px); margin:48px 0;
}
.cta-box::before{
  content:""; position:absolute; inset:0;
  background:var(--grain),
             radial-gradient(70% 120% at 88% 10%, rgba(252,163,17,.18), transparent 60%),
             radial-gradient(60% 100% at 4% 100%, rgba(10,110,211,.28), transparent 62%),
             linear-gradient(158deg, #04356A, #001D3F);
}
.cta-box > *{position:relative; z-index:2;}
.cta-box p{
  color:#dfe4ea; margin-bottom:22px; font-family:var(--display);
  font-size:1.28rem; line-height:1.4; max-width:34ch;
}

.related{border-top:1px solid var(--line); padding-top:30px; margin:44px 0 0; background:transparent;}
.related h2{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brass); margin:0 0 20px;
}
.related-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);}
.related-grid a{
  display:block; padding:18px 20px; text-decoration:none; color:var(--bone);
  font-weight:500; font-size:.95rem; line-height:1.4;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color .3s ease, color .3s ease;
}
.related-grid a:hover{background:var(--surface-2); color:var(--brass);}
.related-grid a small{
  display:block; margin-top:8px; font-weight:500; font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}

.prevnext{
  display:flex; justify-content:space-between; gap:28px;
  margin:44px 0; padding-top:26px; border-top:1px solid var(--line); font-size:.95rem;
}
.prevnext a{
  max-width:47%; text-decoration:none; color:var(--bone); font-weight:500;
  font-family:var(--display); font-size:1.05rem; line-height:1.35;
  transition:color .25s ease;
}
.prevnext a:hover{color:var(--brass);}
.prevnext a:last-child{text-align:right; margin-left:auto;}
.prevnext span{
  display:block; margin-bottom:8px; font-family:var(--sans); font-weight:600;
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--brass);
}

/* blog hub */
.pillar-heading{
  margin:clamp(52px,6vw,76px) 0 8px; padding-bottom:14px;
  border-bottom:2px solid var(--brass); display:inline-block;
  font-size:clamp(1.5rem,2.4vw,2rem);
}
.hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(18px,2.4vw,26px); margin:22px 0 50px;}
.hub-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
  transition:border-color .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.hub-card:hover{border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--shadow-md);}
.hub-card .thumb{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.hub-card:hover .thumb{transform:scale(1.04);}
.hub-body{padding:clamp(18px,2.2vw,26px);}
.hub-card a.hub-title{
  font-family:var(--display); font-size:1.14rem; font-weight:500; line-height:1.3;
  color:#fdfcfa; text-decoration:none; display:block;
}
.hub-card:hover a.hub-title{color:var(--brass);}
.hub-card .meta{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:.75rem; color:var(--muted); letter-spacing:.03em;
}

/* ---------------------------------------------------------------- footer */
footer.site-footer{
  position:relative; background-color:var(--ink-deep); background-image:var(--grain); color:#b9c0ca;
  padding:clamp(56px,7vw,88px) 0 30px; font-size:.93rem;
}
footer.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--brass) 0%, rgba(184,134,59,.15) 55%, transparent 100%);
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(28px,3.4vw,46px);
  padding-bottom:44px; border-bottom:1px solid var(--line-dk);
}
.footer-grid h4{
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brass-lt); margin:0 0 18px;
}
.footer-grid ul{list-style:none; padding:0; margin:0;}
.footer-grid li{margin-bottom:11px; font-size:.9rem;}
.footer-grid a{color:#b9c0ca; text-decoration:none; transition:color .22s ease;}
.footer-grid a:hover{color:var(--brass-lt);}
.footer-secondary{font-size:.85rem; color:#8b93a0; margin-top:20px; line-height:1.7;}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:26px; font-size:.8rem; color:#79818e; letter-spacing:.03em;
}
.footer-bottom a{color:#9aa2ae; text-decoration:none;}
.footer-bottom a:hover{color:var(--brass-lt);}

/* ---------------------------------------------------------------- mobile bar */
.mobile-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:70;
  background:var(--ink-deep); border-top:1px solid var(--line-dk);
  box-shadow:0 -8px 26px -14px rgba(0,0,0,.6);
}
.mobile-bar .wrap{display:flex; padding:0;}
.mobile-bar a{
  flex:1; text-align:center; padding:16px 8px; color:var(--bone); text-decoration:none;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  border-right:1px solid var(--line-dk);
}
.mobile-bar a:last-child{border-right:0; color:var(--brass-lt);}

/* ---------------------------------------------------------------- article extras */
.reading-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:95; pointer-events:none;}
.reading-progress-bar{height:100%; width:0%; background:var(--brass); transition:width .1s linear;}

.share-bar{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:26px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.share-label{
  font-size:.66rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); margin-right:4px;
}
.share-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--bone); text-decoration:none;
  font-family:var(--sans); font-weight:600; font-size:.8rem;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background-color .28s ease, color .28s ease;
}
.share-btn:hover{transform:translateY(-3px); background:var(--brass); border-color:var(--brass); color:#0b0c0f;}
.share-btn svg{width:17px; height:17px;}
.share-copy[data-copied="true"]::after{
  content:"Copied"; position:absolute; bottom:125%; left:50%; transform:translateX(-50%);
  background:var(--brass); color:#0b0c0f; font-size:.66rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; white-space:nowrap;
}

.article-layout article > p:first-of-type::first-letter{
  font-family:var(--display); font-size:3.6em; font-weight:400; float:left;
  line-height:.8; padding:.06em .1em 0 0; color:var(--brass);
}

.author-card{
  display:flex; gap:22px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(22px,2.6vw,30px); margin:40px 0;
}
.author-card img{width:70px; height:70px; border-radius:50%; object-fit:cover; flex-shrink:0; filter:grayscale(.2);}
.author-card h3{font-size:1.15rem; margin-bottom:6px;}
.author-card p{color:var(--muted); font-size:.94rem; margin-bottom:10px;}
.author-card a{font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; text-decoration:none;}

/* ---------------------------------------------------------------- tags */
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.tag-chip{
  display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; padding:6px 13px; text-decoration:none;
  border:1px solid var(--line); color:var(--muted); background:transparent;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.tag-chip:hover{background:var(--brass); border-color:var(--brass); color:#0b0c0f; transform:translateY(-2px);}
.blog-hero .tag-chip{border-color:rgba(247,244,237,.24); color:var(--muted-dk);}
.blog-hero .tag-chip:hover{background:var(--brass); border-color:var(--brass); color:var(--ink-deep);}

.tag-filter{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 34px;}
.tag-filter button{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; padding:9px 16px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.tag-filter button:hover{border-color:var(--brass); color:var(--bone); transform:translateY(-2px);}
.tag-filter button.active{background:var(--brass); border-color:var(--brass); color:#0b0c0f;}
.tag-filter .count{opacity:.55; font-weight:500; margin-left:3px;}
.hub-card[hidden], .insight-card[hidden]{display:none;}
.tag-empty{display:none; color:var(--muted); font-style:italic; padding:22px 0;}
.tag-empty.show{display:block;}

/* ---------------------------------------------------------------- motion */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease-out, transform .5s ease-out;}
.reveal.is-visible{opacity:1; transform:none;}

/* orchestrated entrance -- CSS only, so it never waits on JS or the observer */
@keyframes riseIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: no-preference){
  .hero .kicker{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) both;}
  .hero h1{animation:riseIn .85s cubic-bezier(.2,.8,.2,1) .06s both;}
  .hero .lede{animation:riseIn .85s cubic-bezier(.2,.8,.2,1) .14s both;}
  .hero .btn-row{animation:riseIn .85s cubic-bezier(.2,.8,.2,1) .22s both;}
  .hero .hero-note{animation:riseIn .85s cubic-bezier(.2,.8,.2,1) .3s both;}
  .hero-panel{animation:riseIn .9s cubic-bezier(.2,.8,.2,1) .26s both;}

  .page-hero .breadcrumb{animation:riseIn .6s cubic-bezier(.2,.8,.2,1) both;}
  .page-hero h1{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) .05s both;}
  .page-hero .lede{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) .12s both;}
  .page-hero .btn-row{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) .2s both;}

  .blog-hero .breadcrumb{animation:riseIn .6s cubic-bezier(.2,.8,.2,1) both;}
  .blog-hero .pillar-tag{animation:riseIn .6s cubic-bezier(.2,.8,.2,1) .06s both;}
  .blog-hero h1{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) .12s both;}
  .blog-hero .byline{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) .2s both;}
  .blog-hero .tag-row{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) .26s both;}
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1040px){
  nav.primary-nav{display:none;}
  .hamburger{display:inline-block;}
  #mobile-nav.open{
    display:block; position:fixed; inset:0; z-index:90; overflow-y:auto;
    background:var(--ink-deep); padding:28px var(--gutter) 60px;
  }
  #mobile-nav.open::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(70% 60% at 85% 5%, rgba(184,134,59,.16), transparent 62%);
  }
  #mobile-nav ul{position:relative; list-style:none; padding:0; margin:62px 0 0;}
  #mobile-nav > ul > li > a{
    display:block; padding:16px 0; border-bottom:1px solid var(--line-dk);
    font-family:var(--display); font-size:1.7rem; font-weight:400;
    color:#fdfcfa; text-decoration:none;
  }
  #mobile-nav .sub{list-style:none; padding:4px 0 14px 16px; margin:0;}
  #mobile-nav .sub a{
    display:block; padding:9px 0; font-size:.95rem; color:#aeb6c1; text-decoration:none;
    letter-spacing:.02em;
  }
  .mobile-close{
    position:absolute; top:26px; right:var(--gutter); z-index:2;
    background:none; border:1px solid var(--line-dk); color:var(--bone);
    padding:10px 15px; cursor:pointer;
    font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  }
  .hero-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr; gap:18px;}
  .contact-grid{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .trust-item{border-bottom:1px solid var(--line-dk);}
  .trust-item:nth-child(2n){border-right:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .practice-list{columns:1;}
}
@media (max-width:760px){
  body{font-size:16.5px; padding-bottom:56px;}
  /* the two-line wordmark stops being legible at this size, so show the mark
     alone rather than an illegible full lockup */
  .site-header .logo-img{content:url("/wp-content/themes/xpress-recruiters/assets/img/logo-icon.png"); height:40px;}
  .mobile-bar{display:block;}
  /* the sticky bottom bar carries Call / Enquire here, so the header CTA
     would only crowd the logo -- drop it and let the wordmark breathe */
  .nav-cta > .btn{display:none;}
  .nav-inner{padding-top:13px; padding-bottom:13px;}
  .form-row{grid-template-columns:1fr;}
  .prevnext{flex-direction:column; gap:22px;}
  .prevnext a, .prevnext a:last-child{max-width:100%; text-align:left; margin-left:0;}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  .trust-grid{grid-template-columns:1fr;}
  .trust-item{border-right:0;}
  .article-layout article > p:first-of-type::first-letter{font-size:3em;}
  .author-card{flex-direction:column; gap:16px;}
}

/* ============================================================
   Tables, and the cookie consent panel
   ============================================================ */
table{
  width:100%; border-collapse:collapse; margin:26px 0; font-size:.94rem;
  border-top:1px solid var(--line);
}
th, td{
  text-align:left; vertical-align:top; padding:13px 18px 13px 0;
  border-bottom:1px solid var(--line);
}
th{
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brass); white-space:nowrap;
}
td code{font-size:.88em; background:var(--surface-2); padding:2px 6px;}
.muted{color:var(--muted); font-size:.86em;}

.linklike{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:inherit; text-decoration:underline; text-underline-offset:3px;
}
.footer-bottom .linklike{color:#9aa2ae;}
.footer-bottom .linklike:hover{color:var(--brass-lt);}

.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background-color:var(--surface); background-image:var(--grain);
  border-top:2px solid var(--brass);
  box-shadow:0 -26px 60px -28px rgba(0,0,0,.8);
  color:#c3cbd9;
  animation:consentUp .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes consentUp{from{transform:translateY(100%);} to{transform:none;}}
@media (prefers-reduced-motion: reduce){ .consent{animation:none;} }
.consent-inner{
  max-width:var(--max); margin:0 auto; padding:clamp(20px,3vw,30px) var(--gutter);
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);
  gap:clamp(20px,3vw,44px); align-items:center;
}
.consent h2{color:#fdfcfa; font-size:1.32rem; margin-bottom:8px;}
.consent p{font-size:.92rem; margin-bottom:14px; max-width:70ch;}
.consent a{color:var(--brass-lt);}
.consent-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px;}
.consent-row label{
  display:flex; gap:10px; align-items:flex-start; margin:0; cursor:pointer;
  font-size:.85rem; letter-spacing:0; text-transform:none; color:#c3cbd9; font-weight:400;
}
.consent-row input{width:auto; margin:3px 0 0; accent-color:var(--brass); flex-shrink:0;}
.consent-row strong{display:block; color:#fdfcfa; font-weight:600; font-size:.88rem;}
.consent-row em{display:block; font-style:normal; color:#98a1ae; font-size:.8rem; line-height:1.5; max-width:44ch;}
.consent-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;}
.consent-actions .btn{padding:12px 20px; font-size:.74rem;}
@media (max-width:900px){
  .consent-inner{grid-template-columns:1fr; gap:18px;}
  .consent-actions{justify-content:flex-start;}
}
@media (max-width:760px){
  .consent{bottom:52px;}  /* clear the sticky mobile call/enquire bar */
}

/* ============================================================================
   HERO DESIGN SYSTEM
   Shared decorative layer for .hero, .page-hero, .blog-hero and .conversion.
   Four elements, all pure CSS so they cost nothing to load:
     1. a blueprint dot-grid, fading out toward the content
     2. corner registration marks, borrowed from print
     3. a gold rule anchoring the content column
     4. a soft vignette that settles the edges
   ============================================================================ */
.hero, .page-hero, .blog-hero, .conversion{ isolation:isolate; }

/* 1 + 4 -- dot grid and vignette, on one pseudo-element */
.hero > .hero-deco,
.page-hero > .hero-deco,
.blog-hero > .hero-deco,
.conversion > .hero-deco{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(circle at center, rgba(10,110,211,.55) 1px, transparent 1.6px),
    radial-gradient(120% 80% at 50% 50%, transparent 38%, rgba(0,9,25,.55) 100%);
  background-size:26px 26px, 100% 100%;
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, transparent 38%, #000 78%, #000 100%);
          mask-image:linear-gradient(100deg, transparent 0%, transparent 38%, #000 78%, #000 100%);
  opacity:.5;
}

/* 2 -- corner registration marks */
.hero-deco::before, .hero-deco::after{
  content:""; position:absolute; width:34px; height:34px; opacity:.65;
}
.hero-deco::before{
  top:22px; left:22px;
  border-top:1px solid var(--brass); border-left:1px solid var(--brass);
}
.hero-deco::after{
  bottom:22px; right:22px;
  border-bottom:1px solid var(--brass); border-right:1px solid var(--brass);
}

/* 3 -- gold rule anchoring the content column */
.hero > .wrap, .page-hero > .wrap, .blog-hero > .wrap, .conversion > .wrap{
  position:relative; z-index:2;
}
.page-hero > .wrap::before,
.blog-hero > .wrap::before{
  content:""; position:absolute; left:calc(var(--gutter) * -1 + 6px); top:6px; bottom:6px;
  width:2px; background:linear-gradient(180deg, var(--brass), rgba(252,163,17,0));
}
@media (max-width:760px){
  .page-hero > .wrap::before, .blog-hero > .wrap::before{display:none;}
  .hero-deco::before, .hero-deco::after{width:22px; height:22px;}
  .hero-deco{background-size:20px 20px, 100% 100%;}
}

/* load-more button, injected by site.js (absent when JS is off, where every
   card is simply shown) */
.load-more{
  display:block; margin:6px auto 52px; cursor:pointer;
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:14px 34px; color:var(--brass);
  background:transparent; border:1px solid rgba(252,163,17,.45);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.load-more:hover{background:var(--brass); border-color:var(--brass); color:#0b0c0f; transform:translateY(-2px);}
.load-more[hidden]{display:none;}

/* ============================================================================
   16:9 enforcement for every blog image slot.
   The <img> tags carry width/height attributes (good for CLS), but without an
   explicit height:auto the attribute wins over aspect-ratio and the thumbnails
   render near-vertical. This pins every blog image container to true 16:9 on
   the home page, the Insights hub and article pages alike.
   ============================================================================ */
.insight-card .thumb,
.hub-card .thumb,
.article-hero{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.team-card .portrait{height:auto;}

/* ============================================================================
   ARTICLE PAGE: full-bleed uncropped hero + right-hand related sidebar
   ============================================================================ */

/* Hero. Full viewport width, height driven by the image's own 16:9 ratio, so
   nothing is cropped. On a wide monitor that is tall - see the max-height note
   below if the fold becomes a problem. */
.blog-hero-full{
  width:100%; margin:0; padding:0; line-height:0;
  background:var(--surface);
  border-bottom:2px solid var(--brass);
}
.blog-hero-img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:contain;   /* contain, so the whole frame shows */
}

/* Title block, now below the image rather than over it */
.blog-head{
  position:relative; overflow:hidden;
  background:var(--grain),
             radial-gradient(70% 100% at 84% 0%, rgba(252,163,17,.13), transparent 60%),
             radial-gradient(60% 90% at 4% 100%, rgba(10,110,211,.24), transparent 64%),
             linear-gradient(160deg, #04356A 0%, #001D3F 62%, #000919 100%);
  padding:clamp(34px,4.5vw,58px) 0 clamp(30px,4vw,48px);
}
.blog-head > .wrap{position:relative; z-index:2;}
.blog-head h1{color:#fdfcfa; font-weight:400; margin:16px 0 .45em; font-size:clamp(2.1rem,4.2vw,3.4rem);}
.blog-head .breadcrumb, .blog-head .breadcrumb a{color:var(--muted-dk);}
.blog-head .breadcrumb a:hover{color:var(--brass-lt);}
.blog-head .byline{color:var(--muted-dk);}
.blog-head .tag-chip{border-color:rgba(247,244,237,.24); color:var(--muted-dk);}
.blog-head .tag-chip:hover{background:var(--brass); border-color:var(--brass); color:var(--ink-deep);}
@media (prefers-reduced-motion: no-preference){
  .blog-head .breadcrumb{animation:riseIn .6s cubic-bezier(.2,.8,.2,1) both;}
  .blog-head .pillar-tag{animation:riseIn .6s cubic-bezier(.2,.8,.2,1) .06s both;}
  .blog-head h1{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) .12s both;}
  .blog-head .byline{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) .2s both;}
  .blog-head .tag-row{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) .26s both;}
}

/* Two-column body: measure-width article, related list on the right */
.article-layout{
  display:grid;
  grid-template-columns:minmax(0, var(--measure)) minmax(0, 320px);
  gap:clamp(32px, 4vw, 64px);
  justify-content:center;
  align-items:start;
}
.article-layout > article{min-width:0;}
.article-side{position:sticky; top:104px; min-width:0;}
.article-side .related{margin:38px 0 0; padding-top:0; border-top:0;}
.article-side .related-grid{grid-template-columns:1fr; border-left:1px solid var(--line);}
.article-side .related-grid a{font-size:.9rem; padding:14px 16px;}
.article-foot{grid-column:1 / -1;}

@media (max-width:1040px){
  .article-layout{grid-template-columns:minmax(0,1fr); }
  .article-side{position:static;}
  .article-side .related{margin-top:10px;}
  .article-side .related-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
}

/* ---------------------------------------------------------------- testimonials */
.t-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(18px,2.4vw,28px); margin-top:8px;}
.t-card{
  position:relative; margin:0; padding:clamp(26px,3vw,36px);
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:border-color .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.t-card:hover{border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--shadow-md);}
.t-card::before{
  content:"\201C"; position:absolute; top:6px; right:20px;
  font-family:var(--display); font-size:5rem; line-height:1;
  color:var(--brass); opacity:.22;
}
.t-card blockquote{
  margin:0 0 24px; padding:0; border:0;
  font-family:var(--display); font-size:1.16rem; line-height:1.55; color:#fdfcfa;
}
.t-card figcaption{display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line);}
.t-avatar{width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.t-initial{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(252,163,17,.16); border:1px solid rgba(252,163,17,.4);
  color:var(--brass); font-family:var(--display); font-size:1.3rem; font-weight:500;
}
.t-name{display:block; font-weight:600; font-size:.98rem; color:var(--bone);}
.t-name a{color:var(--bone); text-decoration:none;}
.t-name a:hover{color:var(--brass);}
.t-meta{display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px;}

.author-card .author-role{
  font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brass); margin:0 0 10px;
}

/* ---------------------------------------------------------------
   Utility classes replacing inline style="" attributes.
   Keeping the stylesheet the only source of style lets the
   Content-Security-Policy forbid inline styles outright, which
   removes a whole class of injection.
   --------------------------------------------------------------- */
.audience-grid-1{ grid-template-columns:1fr; }
.lede-bright{ color:#d9dce3; }
.mt-xl{ margin-top:44px; }
.table-scroll{ overflow-x:auto; }
.foot-blurb{ margin-top:14px; color:#a9aeb8; }

/* ---------------------------------------------------------------
   LinkedIn links
   Inline SVG inheriting currentColor, so one rule themes the mark,
   the text and the hover state together.
   --------------------------------------------------------------- */
.li-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border:1px solid rgba(255,255,255,.2); border-radius:999px;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.03em; line-height:1;
  color:var(--muted); text-decoration:none; vertical-align:middle;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.li-link:hover,
.li-link:focus-visible{
  color:var(--brass-lt); border-color:var(--brass); background:rgba(252,163,17,.08);
}
.li-link .li-icon{ flex:0 0 auto; }

/* icon-only variant, used beside a name that is already visible */
.li-link-icon{
  padding:0; border:0; background:none; margin-left:9px;
  color:var(--muted);
}
.li-link-icon:hover,
.li-link-icon:focus-visible{ background:none; border:0; color:var(--brass-lt); }

.team-links, .author-links{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }

/* ---------------------------------------------------------------
   Breathing room around buttons.
   A call to action needs air above it - pressed against the
   paragraph it follows, it reads as part of the text block.
   --------------------------------------------------------------- */
.btn-row{ margin-top:34px; gap:16px; }
p + .btn, ul + .btn, ol + .btn,
p + .btn-row, ul + .btn-row, ol + .btn-row,
.answer-block + .btn-row{ margin-top:28px; }
.audience-card p{ margin-bottom:26px; }
.hero-note{ margin-top:28px; }
.team-links, .author-links{ margin-top:20px; }
.consent-actions{ margin-top:20px; }

/* ---------------------------------------------------------------
   Jobs page
   Each role is a <details> so the full JD is one click away and the
   list stays scannable. It works with JavaScript disabled.
   --------------------------------------------------------------- */
.job-filter{
  display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 30px;
}
.jf-btn{
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:transparent; color:var(--muted);
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.jf-btn:hover{ color:var(--text); border-color:rgba(255,255,255,.34); }
.jf-btn.is-on{ background:var(--brass); border-color:var(--brass); color:var(--ink-deep); }

.job-list{ display:grid; gap:20px; }

.job-card{
  background:var(--surface-2);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--brass);
  padding:30px 32px;
}
.job-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap;
}
.job-card h3{ margin:6px 0 0; font-size:1.32rem; line-height:1.3; }
.job-cat{
  margin:0; font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
}
.job-ref{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.1em;
  color:var(--muted); border:1px solid rgba(255,255,255,.14);
  padding:5px 11px; white-space:nowrap;
}
.job-meta{
  list-style:none; margin:20px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px 34px;
}
.job-meta li{
  font-family:var(--sans); font-size:.9rem; color:var(--text);
}
.job-meta span{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.job-summary{ margin:20px 0 0; color:var(--muted); }

.job-detail{ margin-top:22px; border-top:1px solid rgba(255,255,255,.09); }
.job-detail > summary{
  cursor:pointer; list-style:none; padding:16px 0 0;
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brass);
}
.job-detail > summary::-webkit-details-marker{ display:none; }
.job-detail > summary::after{ content:" +"; }
.job-detail[open] > summary::after{ content:" \2212"; }
.job-detail > summary:hover{ color:var(--brass-lt); }
.job-detail-body{ padding-top:8px; }
.job-detail-body h4{
  margin:24px 0 10px; font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text);
}
.job-detail-body ul{ margin:0; padding-left:20px; color:var(--muted); }
.job-detail-body li{ margin-bottom:9px; }
.job-apply{ margin-top:30px; }
.job-none{ margin-top:26px; color:var(--muted); }

@media (max-width:640px){
  .job-card{ padding:24px 20px; }
  .job-ref{ order:-1; }
}

/* Section link colours (.team-info a, .author-card a) out-specify .li-link,
   which left the chip permanently gold and its hover state invisible.
   a.li-link matches those on specificity and restores the intended states. */
a.li-link{ color:var(--muted); }
a.li-link:hover, a.li-link:focus-visible{ color:var(--brass-lt); }
a.li-link-icon{ color:var(--muted); }
a.li-link-icon:hover, a.li-link-icon:focus-visible{ color:var(--brass-lt); }

/* Email/phone fallback under a form, and the note under an apply button. */
.form-fallback{ margin-top:18px; font-size:.9rem; color:var(--muted); }
.job-apply{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.job-apply-note{ font-size:.85rem; color:var(--muted); }
/* the LinkedIn mark sitting beside the header CTA */
.nav-cta .nav-li{ margin-left:0; margin-right:4px; }

/* ---------------------------------------------------------------
   Article header + hero, revised.

   The title block used to sit in a 700px column pinned to the left
   of the full page wrap, while the article grid below it is centred.
   On a wide screen those two left edges did not line up. The header
   now uses the SAME grid as .article-layout, so the H1, the hero and
   the body text all share one left edge.
   --------------------------------------------------------------- */
.blog-head > .head-grid{
  display:grid;
  grid-template-columns:minmax(0, var(--measure)) minmax(0, 320px);
  gap:clamp(32px, 4vw, 64px);
  justify-content:center;
  align-items:start;
  text-align:left;
}
.blog-head .head-col{ grid-column:1; min-width:0; }
.blog-head{ padding-bottom:clamp(26px,3.4vw,40px); }

/* hero, now inside the article column directly under the title */
.article-hero-figure{
  margin:0 0 34px;
  line-height:0;
  border:1px solid rgba(255,255,255,.1);
  border-bottom:3px solid var(--brass);
  background:var(--surface);
  overflow:hidden;
}
.article-hero-img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
}

@media (max-width:1040px){
  .blog-head > .head-grid{ grid-template-columns:minmax(0,1fr); }
  .article-hero-figure{ margin-bottom:26px; }
}

/* ---------------------------------------------------------------
   Header LinkedIn call to action.
   Sits next to the gold CTA, so it needs enough weight to be seen
   without competing with it: outlined rather than filled.
   --------------------------------------------------------------- */
.nav-cta .nav-li{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px; margin-right:10px;
  border:1px solid var(--brass); border-radius:0;
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; line-height:1;
  color:var(--brass); text-decoration:none; white-space:nowrap;
  transition:background-color .22s ease, color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.nav-cta .nav-li:hover,
.nav-cta .nav-li:focus-visible{
  background:var(--brass); color:var(--ink-deep); transform:translateY(-2px);
}
.nav-cta .nav-li .li-icon{ flex:0 0 auto; }

@media (max-width:1140px){
  .nav-cta .nav-li .nav-li-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .nav-cta .nav-li{ padding:12px 13px; }
}

/* ---------------------------------------------------------------
   Live vacancies vs representative roles.
   The distinction has to be visible, not just stated: a live search
   gets a gold "Open now" flag and a heavier card.
   --------------------------------------------------------------- */
.section-lead{ margin:52px 0 6px; font-size:clamp(1.5rem,2.6vw,2rem); }
.section-lead:first-of-type{ margin-top:38px; }
.section-lead-note{ margin:0 0 26px; color:var(--muted); }

.job-list-live{ margin-bottom:8px; }
.job-card-live{
  border:1px solid rgba(252,163,17,.34);
  border-left:4px solid var(--brass);
  background:linear-gradient(180deg, rgba(252,163,17,.05), transparent 220px), var(--surface-2);
}
.job-open{
  display:inline-block; margin-right:10px; padding:4px 9px;
  background:var(--brass); color:var(--ink-deep);
  font-size:.64rem; font-weight:800; letter-spacing:.12em;
}
.job-client{
  margin:10px 0 0; color:var(--muted);
  font-family:var(--sans); font-size:.92rem; font-style:italic;
}
.job-card-live .job-detail-body h4:first-of-type{ margin-top:18px; }
.job-card-live .job-detail-body > p{ color:var(--muted); margin:0 0 12px; }