/* =====================================================================
   Nirvana Recruitment — combined stylesheet
   Shared by: index.html, submit-resume.html, submit-requirement.html
   (cv-template.html is a standalone entity and does NOT use this file)

   CONTENTS
   01. Tokens
   02. Reset & base
   03. Utilities (wrap, eyebrow, buttons)
   04. Navigation
   05. Footer
   06. Forms (shared field styles)
   07a. Home — masthead (arch hero)
   07. Home — split (the two audiences)
   09. Home — about
   10. Home — why us
   11. Home — process
   11a. Home — voices (testimonials)
   12. Home — CTA band
   13. Home — blog
   14. Submit resume — builder + CV preview
   15. Submit requirement — cards + job blocks
   17. Static content pages (about, why us, process, blog, article)
   18. Contact page — form, details card, map
   16. Responsive
   ===================================================================== */

/* ---------- 01. TOKENS ---------- */
:root{
  --ink:#15171c;
  --paper:#ffffff;
  --red:#cc2121;
  --red-deep:#8f1717;
  --navy:#2c3d7e;
  --navy-deep:#1c2854;
  --sand:#e9e3d4;
  --ash:#eff0f2;      /* light neutral band, slightly cool against the white base */
  --line:rgba(21,23,28,0.12);
  --muted:#6a6c72;

  /* Cards used to separate themselves by being white on cream. Against a
     white page that job falls to elevation, so they carry a real shadow. */
  --surface:#ffffff;
  --shadow-card:0 1px 2px rgba(21,23,28,0.04), 0 8px 24px rgba(21,23,28,0.06);
  /* Fields sit one step below the card surface. Neutral, not warm —
     a cream fill would read as a stain now that the base is white. */
  --field-bg:#f6f6f7;
  /* Pale navy field behind the masthead — the same value the employer
     track and add-job button already use. */
  --tint:#eef1fb;

  /* per-page accent: candidates = red, employers = navy */
  --accent:var(--red);

  /* Type roles — corporate grotesque pairing.
     Archivo carries authority in headings; IBM Plex Sans carries
     long-form legibility and dense form UI. No third family. */
  --font-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;

  --wrap:1240px;
  --section-y:72px;   /* vertical rhythm for every content section */
  --nav-h:82px;
}
body.page-requirement{--accent:var(--navy);}

/* ---------- 02. RESET & BASE ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:clip;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* Archivo tightens well at display sizes and wants near-neutral
   tracking at UI sizes — so tracking is set per role, not globally. */
h1,h2,h3,h4,.display{font-family:var(--font-display); font-weight:600;}
h1,h2{letter-spacing:-0.022em; line-height:1.1;}
h3{letter-spacing:-0.012em;}
h4{letter-spacing:-0.005em;}

/* Figures read as data, not prose: same-width digits so stats and
   counters don't jitter as they update. */
.about-stats .num, .summary-strip .num, .step-n, .why-card-num, .post-meta{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
a{color:inherit; text-decoration:none;}
p, li, h1, h2, h3, h4, blockquote, address{overflow-wrap:break-word;}
img{display:block; width:100%; height:100%; object-fit:cover;}

/* Keyboard users get a ring the design owns, not the browser default.
   No border-radius here — the outline already follows the element's own,
   and setting it would square off the pill buttons on focus. */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
::selection{background:var(--ink); color:#fff;}

/* ---------- 03. UTILITIES ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px;}
.wrap--narrow{max-width:1080px;}
.wrap--flush{padding:0;}

.eyebrow{
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:600; display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:16px; height:2px; background:currentColor; display:inline-block;}
.eyebrow--red{color:var(--red);}
.eyebrow--navy{color:var(--navy);}
.eyebrow--center{justify-content:center;}
.eyebrow--right{justify-content:flex-end;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:999px; font-weight:600; font-size:14.5px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
/* Remix Icon glyphs. Sized off the label rather than a fixed px so they
   track the button they sit in; the .btn gap already spaces them. */
.btn i{font-size:1.15em; line-height:1;}
.btn i.ri-arrow-right-line{transition:transform .18s ease;}
.btn:hover i.ri-arrow-right-line{transform:translateX(3px);}
.btn-red{background:var(--red); color:#fff;}
.btn-red:hover{background:var(--red-deep);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-deep);}
.btn-outline{background:transparent; border-color:rgba(255,255,255,0.55); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,0.12);}
.btn-ink{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-ink:hover{background:var(--ink); color:#fff;}

/* ---------- 04. NAVIGATION ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap{
  max-width:var(--wrap);
  display:flex; align-items:center; justify-content:space-between; height:var(--nav-h);
}
.logo{font-size:20px; font-weight:700;}
.logo span{color:var(--red);}
.logo img{height:40px;}
@media (min-width:992px){.logo img{height:75px;}}
.nav-links{display:flex; gap:34px; font-size:14px; font-weight:500;}
.nav-links a{position:relative; padding:6px 0;}
.nav-links a::after{
  content:""; position:absolute; bottom:0; left:0; width:100%; height:2px;
  background:var(--red);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .2s ease;
}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.is-active::after{transform:scaleX(1);}
.nav-cta{display:flex; gap:10px;}
.nav-cta .btn{padding:11px 20px; font-size:13.5px;}

/* --- mobile menu toggle: three bars that fold into a cross --- */
.nav-toggle{
  display:none; width:44px; height:44px; padding:0; margin-right:-10px;
  border:none; background:none; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:""; display:block; width:22px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .26s ease, opacity .18s ease;
}
.nav-toggle-bars{position:relative;}
.nav-toggle-bars::before{position:absolute; top:-7px; left:0;}
.nav-toggle-bars::after{position:absolute; top:7px; left:0;}
body.nav-open .nav-toggle-bars{background:transparent; transition:background 0s;}
body.nav-open .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg);}

/* --- drawer --- */
.nav-scrim{
  position:fixed; inset:0; z-index:98;
  background:rgba(21,23,28,0.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .26s ease, visibility .26s;
}
.nav-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:99;
  width:min(86vw,340px); background:var(--surface);
  box-shadow:-14px 0 40px rgba(21,23,28,0.18);
  transform:translateX(100%); visibility:hidden;
  transition:transform .3s cubic-bezier(.16,.84,.44,1), visibility .3s;
  overflow-y:auto; overscroll-behavior:contain;
}
body.nav-open .nav-scrim{opacity:1; visibility:visible;}
body.nav-open .nav-drawer{transform:translateX(0); visibility:visible;}
/* 2. The drawer (z 99) would otherwise cover the toggle inside the nav
   (z 50), leaving no way to close it. Lift the bar above the panel while
   open so the close control stays reachable. */
body.nav-open nav{z-index:100;}
/* The scroll lock is applied by JS, which also compensates for the
   scrollbar so the page underneath does not shift as it opens. */
body.nav-open{overflow:hidden;}

.nav-drawer-inner{
  display:flex; flex-direction:column; min-height:100%;
  padding:calc(var(--nav-h) + 16px) 26px 30px;
}
.nav-drawer-links{display:flex; flex-direction:column;}
.nav-drawer-links a{
  font-family:var(--font-display); font-size:19px; font-weight:600;
  letter-spacing:-0.012em; padding:15px 0; border-bottom:1px solid var(--line);
}
.nav-drawer-links a:first-child{border-top:1px solid var(--line);}
.nav-drawer-links a.is-active{color:var(--red);}
.nav-drawer-cta{display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:32px;}
.nav-drawer-cta .btn{justify-content:center;}

@media (prefers-reduced-motion:reduce){
  .nav-scrim, .nav-drawer,
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{transition-duration:0.01ms;}
}
/* Above the breakpoint the drawer can never be reached. */
@media (min-width:901px){
  .nav-scrim, .nav-drawer{display:none;}
}

/* ---------- 05. FOOTER ---------- */
footer{background:var(--ink); color:#d8d8d4;}

/* full sitemap footer (home) */
.site-footer{padding:80px 0 30px;}
.foot-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr; gap:40px;
  padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.foot-logo{font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:16px;}
.foot-logo span{color:var(--red);}
.foot-logo img{filter:brightness(0) invert(1);}
.foot-grid p{font-size:13.5px; color:#9a9a96; max-width:280px; line-height:1.6;}
.foot-col h4{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:#fff; margin-bottom:18px;}
.foot-col a{display:block; font-size:13.5px; color:#a8a8a4; margin-bottom:12px;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:26px; font-size:12.5px; color:#77776f;}

/* --- social --- */
.foot-social{display:flex; gap:10px; list-style:none; margin:22px 0 0; padding:0;}
.foot-social a{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  color:#d8d8d4; background:rgba(255,255,255,0.07);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.foot-social a:hover{background:var(--red); color:#fff; transform:translateY(-2px);}

/* --- contact --- */
.foot-contact address{font-style:normal; font-size:13.5px; line-height:1.7; color:#a8a8a4; margin-bottom:14px;}
.foot-tel{
  display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:16px; color:#fff; font-variant-numeric:tabular-nums; margin-bottom:14px;
}
.foot-tel:hover{color:var(--red);}
.foot-hours{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#9a9a96;}
.foot-hours-dot{width:7px; height:7px; border-radius:50%; background:#3fa96a; flex-shrink:0;}

/* single-line footer (form pages) */
.footer-slim{padding:40px 0; text-align:center; font-size:12.5px; color:#a8a8a4;}

/* ---------- 06. FORMS (shared) ---------- */
.page-head{padding:64px 0 40px; text-align:center;}
.page-head h1{font-size:clamp(30px,4vw,44px); margin-top:16px;}
.page-head p{color:#5a5c62; font-size:15px; margin-top:12px; max-width:520px; margin-left:auto; margin-right:auto;}

label{font-size:12.5px; font-weight:600; color:#4a4c54; display:block; margin-bottom:6px;}
input, textarea, select{
  width:100%; padding:11px 14px; border-radius:12px; border:1.5px solid var(--line);
  font-family:var(--font-body); font-size:13.5px; background:var(--field-bg); color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
/* Fields signal focus with their border; the ring is added for keyboard
   focus only. The old blanket `outline:none` here suppressed it entirely. */
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent); background:#fff;}
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
::placeholder{color:#9a9ba1; opacity:1;}
textarea{resize:vertical; min-height:70px;}

.row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.row.three{grid-template-columns:1fr 1fr 1fr;}
.row.single{grid-template-columns:1fr;}

.submit-row{display:flex; gap:14px; align-items:center; margin-top:30px;}
.submit-row .btn{flex:1; justify-content:center;}
.fine-print{font-size:11.5px; color:#9a9a96; margin-top:16px; text-align:center;}

/* ---------- 07a. HOME — MASTHEAD (swept curve + circle pair) ----------
   A single large ellipse sweeps the white copy field into a tinted
   panel; two circular portraits overlap across the seam. The tint is
   the same #eef1fb already used by the employer track and add-job
   button, so this introduces no new colour. */
.masthead{
  position:relative; overflow:hidden;
  background:var(--tint);
  padding:96px 0 56px;
}
/* The sweep. rx controls how far the bulge reaches, ry how gentle it
   is — a large ry keeps the arc lazy instead of pointed. */
.masthead-sweep{
  position:absolute; inset:0; z-index:0;
  background:var(--paper);
  clip-path:ellipse(54% 120% at 0% 50%);
}
.masthead-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:72px; align-items:center;
}

.masthead-copy h1{
  font-size:clamp(30px,3.6vw,50px); line-height:1.08; letter-spacing:-0.024em;
  font-weight:700; color:var(--navy); margin-bottom:20px;
}
.masthead-copy h1 em{font-style:normal; color:var(--red);}
.masthead-lede{
  font-size:16px; line-height:1.6; color:#4a4c54;
  max-width:46ch; margin-bottom:30px;
}
.masthead-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px;}

.masthead-proof{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--muted);
  padding-top:22px; border-top:1px solid var(--line);
  max-width:46ch;
}
.masthead-proof .pulse{
  width:8px; height:8px; border-radius:50%; background:#3fa96a; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(63,169,106,0.45);
}

/* --- the circle pair --- */
.masthead-figure{position:relative; justify-self:center; width:100%; max-width:520px;}
.masthead-figure::after{content:""; display:block; padding-bottom:105%;}

.masthead-circle{
  position:absolute; aspect-ratio:1; border-radius:50%;
  overflow:hidden; margin:0;
}
.masthead-circle--lead{
  top:0; left:0; width:76%;
  box-shadow:0 22px 50px rgba(21,23,28,0.18);
}
/* The ring is the page colour, so the trailing circle reads as sitting
   in front rather than punched through. */
.masthead-circle--trail{
  right:0; bottom:0; width:59%; z-index:2;
  border:7px solid var(--paper);
  box-shadow:0 18px 40px rgba(21,23,28,0.20);
}

/* Desktop only: pull the pair up and out toward the section edge so it
   sits off the copy's baseline instead of squarely beside it. The paired
   +bottom margin keeps the centred margin-box height intact, so the -60px
   reads in full rather than being halved by align-items:center. */
@media (min-width:1024px){
  .masthead-figure{
    justify-self:end;
    margin-top:-60px;
    margin-bottom:60px;
    margin-right:-60px;
  }
}

/* One authored entrance. Elements are visible by default; motion is
   added only where it is welcome. */
@media (prefers-reduced-motion:no-preference){
  .masthead-copy > *{animation:mast-rise .62s cubic-bezier(.16,.84,.44,1) both;}
  .masthead-copy > *:nth-child(1){animation-delay:.06s;}
  .masthead-copy > *:nth-child(2){animation-delay:.13s;}
  .masthead-copy > *:nth-child(3){animation-delay:.20s;}
  .masthead-copy > *:nth-child(4){animation-delay:.27s;}
  .masthead-circle{animation:mast-pop .7s cubic-bezier(.16,.84,.44,1) both;}
  .masthead-circle--lead{animation-delay:.10s;}
  .masthead-circle--trail{animation-delay:.26s;}
  .masthead-proof .pulse{animation:mast-pulse 2.6s ease-out infinite;}
}
@keyframes mast-rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes mast-pop{from{opacity:0; transform:scale(.9);} to{opacity:1; transform:none;}}
@keyframes mast-pulse{
  0%{box-shadow:0 0 0 0 rgba(63,169,106,0.45);}
  70%{box-shadow:0 0 0 9px rgba(63,169,106,0);}
  100%{box-shadow:0 0 0 0 rgba(63,169,106,0);}
}

/* ---------- 07. HOME — SPLIT (the two audiences) ----------
   Contained rather than full-bleed now that it sits mid-page: the wrap
   holds it to the grid, and a small gap replaces the old centre divider. */
.hero{padding:var(--section-y) 0;}
.hero-split{position:relative; display:flex; gap:16px;}
.hero-half{
  flex:1; position:relative; display:flex; flex-direction:column;
  justify-content:flex-end; padding:48px 44px; min-height:560px;
  overflow:hidden; border-radius:24px;
}
.hero-half img{position:absolute; inset:0; width:100%; height:100%;}
.hero-half::before{content:""; position:absolute; inset:0; z-index:1;}
.hero-half.left::before{
  background:linear-gradient(180deg,
    rgba(60,8,8,0) 0%,
    rgba(48,8,8,0.34) 20%,
    rgba(26,6,6,0.72) 44%,
    rgba(15,4,4,0.94) 100%);
}
.hero-half.right::before{
  background:linear-gradient(180deg,
    rgba(12,18,45,0) 0%,
    rgba(12,18,45,0.34) 20%,
    rgba(9,13,32,0.72) 44%,
    rgba(6,9,26,0.95) 100%);
}
.hero-content{position:relative; z-index:2; color:#fff; max-width:440px;}
.hero-content.align-right{margin-left:auto; text-align:right;}
.hero-content .eyebrow{color:#fff; opacity:0.85; margin-bottom:18px;}
.hero-content h2{font-size:clamp(26px,2.6vw,34px); line-height:1.12; margin-bottom:14px;}
.hero-content p{font-size:15px; color:rgba(255,255,255,0.82); margin-bottom:26px; max-width:380px;}
.hero-content.align-right p{margin-left:auto;}
/* Straddles the gap, so it reads as the join between the two sides. */
.hero-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:6; width:96px; height:96px; border-radius:50%;
  background:var(--paper); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px; text-align:center; line-height:1.2;
  box-shadow:0 12px 30px rgba(0,0,0,0.25); border:4px solid var(--paper);
}

/* ---------- 09. HOME — ABOUT ---------- */
.about{padding:var(--section-y) 0; position:relative;}
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
.about-copy .eyebrow{color:var(--red); margin-bottom:20px;}
.about-copy h2{font-size:clamp(30px,3.6vw,46px); line-height:1.12; margin-bottom:22px;}
.about-copy p{font-size:16px; color:#4a4c54; max-width:480px; margin-bottom:16px;}
.about-stats{display:flex; gap:36px; margin-top:36px;}
.about-stats div{border-left:2px solid var(--red); padding-left:14px;}
.about-stats .num{font-family:var(--font-display); font-size:30px; font-weight:700;}
.about-stats .lbl{font-size:12.5px; color:var(--muted);}
.about-visual{position:relative; height:520px; border-radius:28px; overflow:hidden;}
.about-visual img{filter:saturate(1.05);}
.about-visual .tag{
  position:absolute; bottom:24px; left:24px; right:24px;
  background:rgba(21,23,28,0.72); backdrop-filter:blur(6px); color:#fff;
  padding:16px 20px; border-radius:16px; font-size:13.5px; display:flex; gap:12px; align-items:center;
}
.about-visual .tag .dot{width:8px; height:8px; border-radius:50%; background:#5ed48a; flex-shrink:0;}

/* ---------- 10. HOME — WHY US ---------- */
.why{background:var(--ash); padding:var(--section-y) 0;}
.why-head{max-width:640px; margin-bottom:60px;}
.why-head h2{font-size:clamp(30px,3.6vw,44px); margin-top:18px; line-height:1.12;}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.why-card{
  border-radius:24px; overflow:hidden; position:relative; height:420px;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
}
.why-card:nth-child(2){height:480px; margin-top:-30px;}
.why-card img{position:absolute; inset:0;}
.why-card::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(15,15,20,0) 0%,
    rgba(15,15,20,0.20) 35%,
    rgba(15,15,20,0.68) 62%,
    rgba(15,15,20,0.94) 100%);
}
.why-card-body{position:relative; z-index:2; padding:28px;}
.why-card-num{font-family:var(--font-display); font-size:13px; color:var(--red); font-weight:700; margin-bottom:10px; display:block;}
.why-card h3{font-size:20px; margin-bottom:8px;}
.why-card p{font-size:13.5px; color:rgba(255,255,255,0.78);}

/* ---------- 11. HOME — PROCESS ---------- */
.process{padding:var(--section-y) 0;}
.process-head{text-align:center; max-width:600px; margin:0 auto 70px;}
.process-head h2{font-size:clamp(30px,3.6vw,44px); margin-top:18px;}
.tracks{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:28px; overflow:hidden; border:1px solid var(--line);}
.track{padding:44px 40px; position:relative;}
.track.candidates{background:#fff5f0;}
.track.companies{background:var(--tint);}
.track-head{display:flex; align-items:center; gap:12px; margin-bottom:32px;}
.track-head .icon{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px;}
.track-head .icon i{line-height:1;}
.candidates .icon{background:var(--red);}
.companies .icon{background:var(--navy);}
.track-head h3{font-size:19px;}
.step{display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line);}
.step:first-of-type{border-top:none;}
.step-n{font-family:var(--font-display); font-weight:700; font-size:15px; color:#9a9a9a; flex-shrink:0; width:26px;}
.step-body h4{font-size:17px; margin-bottom:5px;}
.step-body p{font-size:15px; line-height:1.55; color:#5b5d63;}

/* ---------- 11a. HOME — VOICES (testimonials) ----------
   Not all four voices are equal, so the layout says so: one featured
   placement with a real portrait, three in brief beside it as hairline-
   separated rows. Each carries the outcome it produced — that is the
   evidence; the quote is the colour around it. */
.voices{padding:var(--section-y) 0;}
.voices-head{max-width:560px; margin-bottom:48px;}
.voices-head h2{font-size:clamp(28px,3.2vw,40px); line-height:1.12; margin-bottom:12px;}
.voices-head p{font-size:15.5px; color:var(--muted);}

.voices-grid{
  display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:56px; align-items:start;
}

/* --- the featured voice --- */
.voice-lead{margin:0;}
.voice-portrait{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:7/8; margin-bottom:24px;}
.voice-portrait img{width:100%; height:100%; object-fit:cover;}
.voice-lead blockquote{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(17px,1.45vw,19.5px); line-height:1.48;
  letter-spacing:-0.011em; color:var(--ink); margin:0 0 18px;
}
.voice-lead figcaption{display:flex; flex-direction:column; gap:2px;}

/* --- the three in brief --- */
.voice-list{list-style:none; margin:0; padding:0;}
.voice-item{padding:26px 0; border-top:1px solid var(--line);}
.voice-item:first-child{padding-top:0; border-top:none;}
.voice-item:last-child{padding-bottom:0;}
.voice-item blockquote{
  font-size:15.5px; line-height:1.6; color:#3c3e45; margin:0 0 18px; max-width:56ch;
}
.voice-item figcaption{display:flex; align-items:center; gap:13px; flex-wrap:wrap;}
.voice-item figcaption img{width:42px; height:42px; border-radius:50%; flex-shrink:0; object-fit:cover;}

.voice-who{display:flex; flex-direction:column; min-width:0;}
.voice-name{font-family:var(--font-display); font-size:14px; font-weight:600;}
.voice-role{font-size:12.5px; color:var(--muted); line-height:1.4;}

/* The outcome is the point of each quote, so it is set as data: tabular
   figures, and coloured by which side of the table it came from. */
.voice-outcome{
  font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.voice-item .voice-outcome{margin-left:auto; flex-shrink:0;}
/* On the portrait it sits over the image, so it needs its own ground. */
.voice-portrait .voice-outcome{
  position:absolute; left:16px; bottom:16px; z-index:2;
  background:var(--surface); box-shadow:0 4px 14px rgba(21,23,28,0.18);
}
.voice--candidate .voice-outcome{color:var(--red-deep);}
.voice--employer  .voice-outcome{color:var(--navy-deep);}
.voice-item.voice--candidate .voice-outcome{background:#fdeceb;}
.voice-item.voice--employer  .voice-outcome{background:var(--tint);}

/* ---------- 12. HOME — CTA BAND ---------- */
.cta-band{position:relative; min-height:420px; display:flex; align-items:center; overflow:hidden;}
.cta-band img{position:absolute; inset:0;}
.cta-band::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(15,10,10,0.9), rgba(44,61,126,0.82));}
.cta-inner{position:relative; z-index:2; color:#fff; text-align:center; width:100%;}
.cta-inner h2{font-size:clamp(28px,4vw,46px); margin-bottom:16px; max-width:680px; margin-left:auto; margin-right:auto;}
.cta-inner p{color:rgba(255,255,255,0.8); font-size:15.5px; margin-bottom:32px;}
.cta-btns{display:flex; gap:16px; justify-content:center;}

/* ---------- 13. HOME — BLOG ---------- */
.blog{padding:var(--section-y) 0;}
.blog-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px;}
.blog-head .eyebrow{color:var(--navy); margin-bottom:16px;}
.blog-head h2{font-size:clamp(28px,3.2vw,38px);}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.post{border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card);}
.post-img{height:200px; position:relative;}
.post-body{padding:24px;}
.post-tag{font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; color:var(--red);}
.post h3{font-size:17px; margin:10px 0 8px; line-height:1.3;}
.post p{font-size:13.5px; color:var(--muted);}
.post-meta{font-size:12px; color:#9a9a9a; margin-top:16px;}

/* ---------- 14. SUBMIT RESUME ---------- */
.builder{display:grid; grid-template-columns:1.05fr 0.95fr; gap:36px; padding:20px 0 120px; align-items:flex-start;}

.form-card{background:var(--surface); border-radius:28px; border:1px solid var(--line); box-shadow:var(--shadow-card); padding:40px; position:relative; overflow:hidden;}
.form-card::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, var(--red), var(--navy));}
.f-section{margin-bottom:34px;}
.f-section:last-child{margin-bottom:0;}
.f-section h3{font-size:15px; display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.f-section h3 .n{
  width:26px; height:26px; border-radius:50%; background:var(--sand); color:var(--ink);
  font-family:var(--font-display); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.skill-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.skill-tag{background:var(--sand); padding:6px 12px; border-radius:999px; font-size:12px; font-weight:500; display:flex; align-items:center; gap:6px;}
.skill-tag button{border:none; background:none; cursor:pointer; color:#8a8a86; font-size:13px; line-height:1;}
.add-row-btn{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--navy);
  background:none; border:1.5px dashed var(--navy); border-radius:12px; padding:10px 16px;
  cursor:pointer; width:100%; justify-content:center;
}
.exp-block{border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:14px; background:var(--field-bg); position:relative;}
.exp-remove{position:absolute; top:12px; right:12px; border:none; background:none; color:#b0413a; font-size:13px; cursor:pointer; font-weight:600;}

/* photo upload */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.photo-field .opt{color:var(--muted); font-weight:400;}
.photo-drop{
  display:flex; align-items:center; gap:14px;
  border:1.5px dashed var(--line); border-radius:16px; padding:14px 16px;
  background:var(--field-bg); transition:border-color .15s ease, background .15s ease;
}
.photo-drop.is-over{border-color:var(--navy); background:var(--sand);}
.photo-thumb{
  width:56px; height:56px; border-radius:12px; flex-shrink:0; overflow:hidden;
  background:var(--sand); color:#9a9a96; font-size:22px;
  display:flex; align-items:center; justify-content:center;
}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-drop-copy{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.photo-drop-copy strong{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.photo-drop-copy span{font-size:11.5px; color:var(--muted);}
.photo-drop-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.photo-btn{
  font-size:12.5px; font-weight:600; color:var(--navy); cursor:pointer;
  border:1.5px solid var(--navy); border-radius:10px; padding:8px 14px; background:none;
  margin:0; white-space:nowrap;
}
.photo-btn:hover{background:var(--navy); color:#fff;}
.photo-clear{border:none; background:none; color:#b0413a; font-size:12.5px; font-weight:600; cursor:pointer;}
.photo-error{color:#b0413a; font-size:12px; margin-top:8px;}

/* live CV preview */
.preview-sticky{position:sticky; top:110px;}
.preview-label{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:#9a9a96; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.preview-label .dot{width:7px; height:7px; border-radius:50%; background:#5ed48a;}
.cv-sheet{
  background:var(--surface); border-radius:8px;
  box-shadow:0 30px 60px rgba(21,23,28,0.14), 0 4px 14px rgba(21,23,28,0.08);
  padding:44px 40px; min-height:640px; font-family:var(--font-body);
}
.cv-head{
  border-bottom:3px solid var(--ink); padding-bottom:16px; margin-bottom:20px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
}
.cv-head-text{min-width:0;}
.cv-photo-slot:empty{display:none;}
.cv-photo{
  width:88px; height:88px; border-radius:6px; object-fit:cover; flex-shrink:0;
  border:1px solid var(--line); background:var(--sand); display:block;
}
.cv-name{font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:-0.02em; color:var(--ink);}
.cv-role{font-size:14px; color:var(--red); font-weight:600; margin-top:2px;}
.cv-contact{display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--muted); margin-top:10px;}
.cv-section{margin-bottom:20px;}
.cv-section h4{
  font-family:var(--font-display); font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--navy); margin-bottom:10px; padding-bottom:4px; border-bottom:1px solid var(--line);
}
.cv-section p, .cv-section li{font-size:13px; color:#33343a; line-height:1.6;}
.cv-exp-item{margin-bottom:12px;}
.cv-exp-top{display:flex; justify-content:space-between; gap:16px; font-size:13px; font-weight:600;}
.cv-exp-top span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap; color:#6a6c72; font-weight:500;}
.cv-exp-sub{font-size:12px; color:#7a7c82; margin-bottom:4px;}
.cv-skills{display:flex; flex-wrap:wrap; gap:8px;}
.cv-skills span{background:var(--sand); font-size:11.5px; padding:4px 10px; border-radius:999px; color:#3a3a36;}
.cv-placeholder{color:#c4c4be; font-style:italic;}
.cv-placeholder--bare{background:none; padding:0;}

/* ---------- 15. SUBMIT REQUIREMENT ---------- */
.layout{padding:20px 0 120px;}

.card{background:var(--surface); border-radius:28px; border:1px solid var(--line); box-shadow:var(--shadow-card); padding:40px; position:relative; overflow:hidden; margin-bottom:28px;}
.card::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, var(--navy), var(--red));}
.card h3{font-size:16px; display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.card h3 .n{
  width:28px; height:28px; border-radius:50%; background:var(--sand);
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

#jobsContainer{display:flex; flex-direction:column; gap:20px;}
.job-block{border:1.5px solid var(--line); border-radius:20px; padding:26px; position:relative; background:var(--field-bg);}
.job-block-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.job-index{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--navy);}
.job-index .badge{width:24px; height:24px; border-radius:8px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px;}
.job-remove{border:none; background:none; color:#b0413a; font-size:12.5px; font-weight:600; cursor:pointer;}
.job-remove:disabled{color:#c7c7c2; cursor:not-allowed;}

.add-job-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:600; color:var(--navy);
  background:var(--tint); border:1.5px dashed var(--navy); border-radius:16px; padding:16px; cursor:pointer; margin-top:20px; width:100%;
}
.add-job-btn:hover{background:#e2e7f8;}

.summary-strip{
  display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#fff;
  border-radius:20px; padding:20px 28px; margin-bottom:28px;
}
.summary-strip .num{font-family:var(--font-display); font-size:26px; font-weight:700;}
.summary-strip .lbl{font-size:12.5px; color:#c9d1ec;}
.summary-strip-item{display:flex; align-items:center; gap:10px;}

/* ---------- 17. STATIC CONTENT PAGES (about, why us, process, blog, article) ---------- */
.section{padding:var(--section-y) 0;}
.section--tint{background:var(--ash);}
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
.section-head h2{font-size:clamp(26px,3vw,34px); margin-top:14px;}
.section-head p{color:#5a5c62; font-size:15px; margin-top:12px;}

/* blog listing reuses .blog-grid / .post from the home page */
.post-link{display:block; height:100%; transition:transform .18s ease, box-shadow .18s ease;}
.post-link:hover{transform:translateY(-3px);}
.post-link:hover .post{box-shadow:0 14px 34px rgba(21,23,28,0.12);}
.post{height:100%;}
.blog-grid + .blog-grid{margin-top:28px;}

/* featured post row */
.post-feature{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; overflow:hidden;
  border-radius:24px; border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-card); margin-bottom:36px;
}
.post-feature-img{min-height:320px;}
.post-feature-body{padding:44px; display:flex; flex-direction:column; justify-content:center;}
.post-feature-body h2{font-size:clamp(22px,2.4vw,30px); margin:12px 0 12px;}
.post-feature-body p{color:var(--muted); font-size:14.5px;}

/* long-form article */
.article-head{padding:56px 0 32px; text-align:center;}
.article-head h1{font-size:clamp(28px,3.6vw,42px); margin:16px auto 0; max-width:760px;}
.article-meta{font-size:12.5px; color:var(--muted); margin-top:18px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.article-hero{max-width:900px; margin:0 auto 44px; height:400px; border-radius:20px; overflow:hidden;}
.prose{max-width:720px; margin:0 auto; padding-bottom:80px;}
.prose h2{font-size:22px; margin:38px 0 14px;}
.prose h3{font-size:17px; margin:28px 0 10px;}
.prose p{font-size:16px; line-height:1.75; color:#33343a; margin-bottom:18px;}
.prose ul, .prose ol{margin:0 0 18px 20px;}
.prose li{font-size:16px; line-height:1.75; color:#33343a; margin-bottom:8px;}
.prose a{color:var(--navy); text-decoration:underline; text-underline-offset:2px;}
.prose strong{font-weight:600;}
.prose blockquote{
  border-left:3px solid var(--red); padding:6px 0 6px 22px; margin:26px 0;
  font-size:17px; line-height:1.6; color:var(--ink);
}
.prose-lede{font-size:18px; line-height:1.7; color:#4a4c54; margin-bottom:26px;}
.prose hr{border:none; border-top:1px solid var(--line); margin:38px 0;}
.article-foot{
  max-width:720px; margin:0 auto; padding:26px 0 90px;
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border-top:1px solid var(--line);
}
.article-foot p{font-size:14px; color:var(--muted);}

/* faq */
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; max-width:960px; margin:0 auto;}
.faq-item h3{font-size:15.5px; margin-bottom:8px;}
.faq-item p{font-size:14px; color:#4a4c54; line-height:1.65;}

/* ---------- 18. CONTACT PAGE ---------- */
body.page-contact{--accent:var(--red);}

.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:28px; align-items:start;
}
/* The form card owns the whole column; the shared .card bottom margin
   would otherwise leave a gap under the taller of the two columns. */
.contact-form-card{margin-bottom:0;}
.contact-form-card h3 .n{background:var(--red); color:#fff; font-size:14px;}

label .opt{font-weight:400; color:#9a9ba1;}

/* Checkbox has to opt out of the blanket 100%-width field rule. */
.consent{
  display:flex; align-items:flex-start; gap:10px; margin-top:6px;
  font-size:12.5px; font-weight:400; color:#5a5c62; line-height:1.5; cursor:pointer;
}
.consent input[type="checkbox"]{
  width:16px; height:16px; flex-shrink:0; margin-top:1px; padding:0;
  accent-color:var(--red); border-radius:4px;
}

input.is-invalid, textarea.is-invalid, select.is-invalid{border-color:var(--red); background:#fdf4f4;}

.form-status{font-size:13px; line-height:1.5; margin-top:16px; display:none;}
.form-status.is-error{display:block; padding:12px 14px; border-radius:12px;
  background:#fdf1f1; color:var(--red-deep); border:1px solid #f0d3d3;}

/* --- details column --- */
.contact-aside{display:flex; flex-direction:column; gap:20px; position:sticky; top:calc(var(--nav-h) + 20px);}

.contact-detail-card{
  background:var(--navy); color:#fff; border-radius:28px; padding:34px;
  box-shadow:var(--shadow-card);
}
.contact-detail-card h3{font-size:16px; margin-bottom:22px;}

.contact-list{list-style:none; display:flex; flex-direction:column; gap:22px;}
.contact-list li{display:flex; gap:14px; align-items:flex-start;}
.ci{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background:rgba(255,255,255,0.12); color:#fff;
}
.contact-list h4{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.62); margin-bottom:6px; font-weight:600;}
.contact-list address{font-style:normal; font-size:14px; line-height:1.6; color:#fff;}
.contact-note{font-size:12.5px; color:rgba(255,255,255,0.62); margin-top:4px;}
.contact-hours{display:flex; gap:10px; font-size:13.5px; color:#fff; font-variant-numeric:tabular-nums;}
.contact-hours span:first-child{width:74px; color:rgba(255,255,255,0.62); flex-shrink:0;}

.contact-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#fff; opacity:0.85; margin-top:6px;}
.contact-link:hover{opacity:1; text-decoration:underline;}
.contact-link--strong{font-size:15px; font-weight:600; opacity:1; margin-top:0; word-break:break-word;}

.contact-social{list-style:none; display:flex; gap:10px; margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.15);}
.contact-social a{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10); color:#fff; font-size:15px;
  transition:background .15s ease;
}
.contact-social a:hover{background:var(--red);}

/* --- the two shortcut cards under the details --- */
.contact-shortcuts{display:flex; flex-direction:column; gap:14px;}
.contact-shortcut{
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px 20px;
  color:var(--ink); box-shadow:var(--shadow-card);
  transition:border-color .15s ease, transform .15s ease;
}
.contact-shortcut:hover{border-color:var(--navy); transform:translateY(-2px);}
.contact-shortcut .ci--red{background:#fbeaea; color:var(--red);}
.contact-shortcut .ci--navy{background:var(--tint); color:var(--navy);}
.contact-shortcut-copy{display:block; font-size:12.5px; color:#5a5c62; line-height:1.5;}
.contact-shortcut-copy strong{display:block; font-family:var(--font-display); font-size:14px; color:var(--ink); margin-bottom:2px;}
.contact-shortcut-go{margin-left:auto; color:var(--navy); font-size:17px; flex-shrink:0;}

/* --- map --- */
.contact-map-section{background:var(--ash); padding:var(--section-y) 0;}
.map-frame{
  border-radius:28px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-card); background:#fff; line-height:0;
}
.map-frame iframe{display:block; width:100%;}

@media(max-width:980px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-aside{position:static;}
}
@media(max-width:620px){
  .contact-detail-card{padding:26px; border-radius:22px;}
  .map-frame{border-radius:18px;}
  .map-frame iframe{height:320px;}
}

/* ---------- 16. RESPONSIVE ---------- */
@media(max-width:960px){
  .builder{grid-template-columns:1fr;}
  .preview-sticky{position:static;}
}
@media(max-width:900px){
  :root{--section-y:52px;}
  .masthead{padding:56px 0 40px;}
  .masthead-grid{grid-template-columns:1fr; gap:40px;}
  /* Image leads on mobile; the copy follows it. */
  .masthead-figure{order:-1; max-width:400px;}
  .masthead-lede, .masthead-proof{max-width:52ch;}
  /* Stacked, the sweep divides top from bottom — and since the figure is
     now on top, the tint belongs up there with it and the white below,
     behind the copy. */
  .masthead-sweep{clip-path:ellipse(150% 56% at 50% 100%);}

  .hero-split{flex-direction:column;}
  .hero-half{min-height:420px;}
  .about-grid, .why-grid, .tracks, .blog-grid{grid-template-columns:1fr;}
  /* Image leads on mobile here too. Shorter than the desktop 520px so it
     does not push the copy off the first screen, and a tighter gap since
     image-into-copy is a closer pairing than copy-into-image. */
  .about-grid{gap:36px;}
  .about-visual{order:-1; height:340px;}
  /* One stat per row — three abreast cramps the labels at phone widths. */
  .about-stats{flex-direction:column; gap:16px; margin-top:28px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .foot-brand{grid-column:1 / -1;}
  .voices-grid{grid-template-columns:1fr; gap:40px;}
  .voice-portrait{aspect-ratio:16/10;}
  .why-card:nth-child(2){margin-top:0;}
  .nav-links, .nav-cta{display:none;}
  .nav-toggle{display:flex;}
  .foot-bottom{flex-direction:column; gap:8px;}
}
@media(max-width:760px){
  .wrap{padding:0 22px;}

  /* --- section rhythm --- */
  :root{--section-y:44px;}
  .masthead{padding:36px 0 32px;}
  .why-head{margin-bottom:32px;}
  .process-head{margin:0 auto 34px;}
  .voices-head{margin-bottom:30px;}
  .blog-head{margin-bottom:30px;}
  .track{padding:28px 22px;}
  .site-footer{padding:52px 0 26px;}
  .foot-grid{padding-bottom:36px;}

  /* --- section titles: the clamp minimums were still desktop-sized --- */
  .masthead-copy h1, .page-head h1{font-size:28px;}
  .about-copy h2, .why-head h2, .process-head h2, .cta-inner h2{font-size:25px;}
  .voices-head h2, .blog-head h2{font-size:24px;}
  .hero-content h2{font-size:21px;}
  .voice-lead blockquote{font-size:17px;}

  /* --- controls: smaller, but still a 44px+ touch target --- */
  .btn{padding:13px 22px; font-size:13.5px;}
  .masthead-sweep{clip-path:ellipse(170% 60% at 50% 100%);}
  .masthead-circle--trail{border-width:5px;}
  /* Let the outcome drop under the name rather than force the row wider. */
  .voice-item .voice-outcome{margin-left:55px; margin-top:4px;}
  .voice-who{flex:1 1 auto;}
  .masthead-actions .btn{flex:1 1 100%; justify-content:center;}
  .row, .row.three{grid-template-columns:1fr;}
  .form-card, .card{padding:26px;}
  .summary-strip{flex-direction:column; align-items:flex-start; gap:14px;}
  .foot-grid{grid-template-columns:1fr; gap:30px;}
  .cta-btns{flex-direction:column; align-items:center;}
}

/* static content pages */
@media(max-width:900px){
  .post-feature{grid-template-columns:1fr;}
  .post-feature-img{min-height:220px;}
  .post-feature-body{padding:30px;}
  .faq-grid{grid-template-columns:1fr;}
  .article-hero{height:240px; border-radius:14px;}
}
@media(max-width:620px){
  .prose p, .prose li{font-size:15px;}
}