/* One stylesheet for every page. The light, card-based layout comes from the
   Figma Make reference (Website Development Services Business Page) with
   Proventa's copy kept as it was. Icons in the markup are Lucide (ISC),
   inlined so the CSP stays 'self'. */

:root{
  --bg:#FFFFFF;
  --bg-tint:#F8F8FA;
  --fg:#0B0B0F;
  --fg-soft:#3F3F46;
  --muted:#717182;
  --line:rgba(0,0,0,.10);
  --line-strong:rgba(0,0,0,.16);
  --chip:#ECECF0;
  --footer:#0B0B0F;
  --footer-text:#C9C9D1;
  --footer-dim:#8A8A96;

  --radius:12px;
  --radius-sm:8px;
  --pad-x:40px;
  --section-y:96px;
  --content:1200px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;font-weight:500;color:var(--fg)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}

:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

.wrap{
  width:100%;
  max-width:calc(var(--content) + var(--pad-x) * 2);
  margin:0 auto;
  padding-inline:var(--pad-x);
}

section{padding-block:var(--section-y)}
.tint{background:var(--bg-tint)}

/* ---------- where we are: the map sits behind the right half ---------- */
.place{position:relative;overflow:hidden;isolation:isolate;padding-block:128px}
.place .wrap{position:relative;z-index:1}
.place-map{
  position:absolute;
  z-index:0;
  top:50%;
  right:clamp(24px,8vw,140px);
  height:175%;
  width:auto;
  transform:translateY(-50%);
  pointer-events:none;
  user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);
  mask-image:linear-gradient(90deg,transparent 0,#000 38%);
}
@media (max-width:900px){
  .place-map{height:120%;right:-40px;opacity:.7}
}
@media (max-width:640px){
  .place-map{height:100%;right:-90px;opacity:.5}
}

/* ---------- type scale ---------- */
.h2{font-size:38px;line-height:1.15;letter-spacing:-.02em}
.h3{font-size:18px;line-height:1.35;font-weight:500}
.lede{color:var(--muted);font-size:18px;line-height:1.6}

.section-head{max-width:760px;margin:0 auto 56px;text-align:center}
.section-head .lede{margin-top:16px}
.section-head.left{margin-inline:0;text-align:left}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border:1px solid var(--fg);
  border-radius:var(--radius-sm);
  background:var(--fg);
  color:#fff;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{background:#26262E;border-color:#26262E}
.btn svg{width:16px;height:16px}
.btn-outline{
  background:transparent;
  color:var(--fg);
  border-color:var(--line-strong);
}
.btn-outline:hover{background:var(--bg-tint);border-color:var(--line-strong)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-block{width:100%;justify-content:center}

/* ---------- cards ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
}
.icon{
  width:28px;
  height:28px;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.icon-sm{width:20px;height:20px}

.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:var(--chip);
  color:var(--fg);
  font-size:12px;
  font-weight:500;
  line-height:1.6;
}

.more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:500;
  color:var(--fg);
}
.more svg{width:16px;height:16px;transition:transform .15s}
.more:hover svg{transform:translateX(3px)}

/* ---------- 01 Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:68px;
}
.wordmark{
  font-size:17px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--fg);
}
.nav{display:flex;align-items:center;gap:36px}
.nav-list{display:flex;align-items:center;gap:32px}
.nav-link{
  display:inline-block;
  padding:8px 0;
  font-size:15px;
  color:var(--fg-soft);
  white-space:nowrap;
}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--fg)}
.nav-toggle{
  display:none;
  padding:8px;
  border:0;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
}
.nav-toggle svg{width:24px;height:24px}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:12px 20px;
  background:var(--fg);
  color:#fff;
  font-size:14px;
  font-weight:500;
}
.skip-link:focus{left:0}

/* ---------- 02 Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-block:120px 96px;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%,var(--bg-tint) 100%);
}
/* The film was graded near-black for the old dark theme. Inverted it reads as
   pale silk, and the scrim keeps the headline on what is effectively white.
   The last stop is the hero's own bottom colour, so the film dissolves into
   the cards instead of stopping at a hard edge. */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:invert(1) grayscale(1);
  opacity:.75;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%,
    rgba(255,255,255,.22) 40%,
    rgba(255,255,255,.70) 72%,
    var(--bg-tint) 100%);
}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:url("/media/hero-poster.jpg") center/cover no-repeat;
    filter:invert(1) grayscale(1);
    opacity:.75;
  }
}
.hero h1{
  margin:0 auto;
  max-width:22ch;
  font-size:64px;
  line-height:1.08;
  letter-spacing:-.03em;
}
.hero-sub{
  margin:28px auto 0;
  max-width:62ch;
  font-size:19px;
  color:var(--muted);
}
.hero-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:40px;
}

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:88px;
  text-align:center;
}
.feature .icon{margin:0 auto 20px}
.feature .step-num{
  display:block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--muted);
}
.feature h3{margin-bottom:10px}
.feature p{color:var(--muted);font-size:15px}

/* ---------- 03 Platform ---------- */
.product{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:56px;
  padding:40px;
}
.product > *{min-width:0}
.product-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:18px}
.product-head .icon{width:32px;height:32px}
.product-name{font-size:28px;line-height:1.2;letter-spacing:-.02em}
.product-kicker{color:var(--muted);font-size:15px;margin-bottom:18px}
.product-body{color:var(--fg-soft);max-width:56ch}
.product .more{margin-top:24px}
.product-list h3{
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}
.product-list li{
  display:flex;
  gap:12px;
  padding:14px 0;
  border-top:1px solid var(--line);
  color:var(--fg-soft);
  font-size:15px;
}
.product-list li:last-child{border-bottom:1px solid var(--line)}
.product-list .icon-sm{flex:none;margin-top:2px;width:18px;height:18px}

/* ---------- 04 Industries ---------- */
.industries{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.industry{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px 22px;
  transition:border-color .15s,box-shadow .15s;
}
.industry:hover{border-color:var(--line-strong);box-shadow:0 8px 24px rgba(11,11,15,.06)}
.industry .icon{margin-bottom:8px}
.industry-name{font-size:17px;line-height:1.3;font-weight:500}
.industry-note{font-size:14px;color:var(--muted)}

/* ---------- 05 Why we exist / how we work ---------- */
/* Second film, same treatment as the hero. Both ends of the scrim are solid
   white so the footage never reaches a section boundary. */
.film{position:relative;overflow:hidden;isolation:isolate}
.film-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:invert(1) grayscale(1);
  opacity:.7;
}
.film::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    #fff 0%,
    rgba(255,255,255,.55) 18%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.55) 82%,
    #fff 100%);
}
@media (prefers-reduced-motion:reduce){
  .film-video{display:none}
  .film::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:url("/media/why-poster.jpg") center/cover no-repeat;
    filter:invert(1) grayscale(1);
    opacity:.7;
  }
}

.about{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:72px;
  align-items:start;
}
.about-lead{
  margin-top:24px;
  font-size:22px;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--fg);
}
.about-sub{margin-top:18px;color:var(--muted);font-size:17px}
.about .more{margin-top:28px}
.principles{display:flex;flex-direction:column;gap:16px}
.principle h3{margin-bottom:8px}
.principle p{color:var(--muted);font-size:15px}

/* ---------- 06 Early access ---------- */
.access{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 2fr;
  gap:32px;
  align-items:start;
}
.info-stack{display:flex;flex-direction:column;gap:16px}
.info-card{padding:24px}
.info-card .info-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-size:16px;
  font-weight:500;
}
.info-card .info-head .icon-sm{width:20px;height:20px}
.info-card p{color:var(--muted);font-size:15px}
.info-card a{color:var(--fg-soft)}
.info-card a:hover{color:var(--fg)}

.form-card{padding:32px}
.form-card h3{font-size:20px;margin-bottom:6px}
.form-card .form-intro{color:var(--muted);font-size:15px;margin-bottom:28px}

.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin-bottom:20px}
.field label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:500;
  color:var(--fg);
}
.field input,
.field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--fg);
  font-family:inherit;
  font-size:15px;
  line-height:1.5;
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,
.field textarea::placeholder{color:#A1A1AA}
.field textarea{resize:vertical;min-height:120px}
.field input:hover,
.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--fg);
  box-shadow:0 0 0 3px rgba(11,11,15,.08);
}

.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

button[type=submit]{font-family:inherit}
button[disabled]{opacity:.55;cursor:default}
.form-note{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.form-status{margin-top:16px;font-size:14px;color:var(--muted)}
.form-status[data-state=error]{color:#B42318}
.form-done h3{margin-bottom:10px}
.form-done p{color:var(--muted)}
[hidden]{display:none !important}

/* ---------- 07 Footer ---------- */
.site-footer{
  background:var(--footer);
  color:var(--footer-text);
  padding-block:64px 32px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer .wordmark{color:#fff}
.footer-tagline{margin-top:16px;max-width:38ch;font-size:15px;color:var(--footer-dim)}
.footer-cols h3{
  font-size:15px;
  font-weight:500;
  color:#fff;
  margin-bottom:16px;
}
.footer-cols li{margin-bottom:10px}
.footer-cols a{font-size:15px;color:var(--footer-dim)}
.footer-cols a:hover{color:#fff}
.footer-legal{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-top:28px;
  font-size:13px;
  line-height:1.7;
  color:var(--footer-dim);
}
.footer-legal a{color:var(--footer-dim)}
.footer-legal a:hover{color:#fff}

/* ---------- photography ---------- */
/* Board images placed per section. Every figure crops to a fixed ratio so a
   portrait source and a landscape one sit at the same height. */
.figure{margin:0 0 44px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-tint)}
.figure img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.figure-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 44px}
.figure-pair .figure{margin:0}
.figure-pair .figure img{aspect-ratio:4/5}
.industry-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:6px}
.sector-figure{margin:20px 0 0;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line)}
.sector-figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (max-width:1024px){
  .figure img{aspect-ratio:16/9}
}
@media (max-width:768px){
  .figure-pair{grid-template-columns:1fr}
  .figure-pair .figure img{aspect-ratio:4/3}
  .sector-figure img{aspect-ratio:16/10}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .industries{grid-template-columns:repeat(3,1fr)}
  .about{gap:48px}
}

@media (max-width:900px){
  :root{--pad-x:28px;--section-y:80px}
  .hero{padding-block:88px 72px}
  .hero h1{font-size:48px}
  .features{grid-template-columns:1fr;gap:16px;margin-top:64px}
  .product{grid-template-columns:1fr;gap:32px;padding:28px}
  .about{grid-template-columns:1fr}
  .access{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}

@media (max-width:768px){
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px var(--pad-x) 20px;
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  .nav.is-open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-link{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .btn{justify-content:center;margin-top:8px}
}

@media (max-width:640px){
  :root{--pad-x:20px;--section-y:64px}
  .hero{padding-block:64px 56px}
  .hero h1{font-size:38px;letter-spacing:-.02em}
  .hero-sub{font-size:17px}
  .hero-actions .btn{width:100%;justify-content:center}
  .h2{font-size:30px}
  .lede{font-size:16px}
  .section-head{margin-bottom:36px}
  .industries{grid-template-columns:1fr}
  .about-lead{font-size:20px}
  .field-pair{grid-template-columns:1fr;gap:0}
  .form-card{padding:22px}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-legal{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* ==========================================================================
   Subpages
   ========================================================================== */

[id]{scroll-margin-top:84px}

.label{
  display:block;
  margin-bottom:16px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- page hero (every page except Home) ---------- */
.page-hero{
  padding-block:96px 80px;
  background:linear-gradient(180deg,#fff 0%,var(--bg-tint) 100%);
  border-bottom:1px solid var(--line);
}
.page-hero h1{
  max-width:20ch;
  font-size:52px;
  line-height:1.1;
  letter-spacing:-.03em;
}
.page-hero .standfirst{margin-top:24px;font-size:19px;color:var(--muted);max-width:62ch}
/* The NEXPORT page runs the code-texture film. Inverted it is dark type on
   white, so it sits lower than the silk, and the scrim opens downward only:
   solid under the header, dissolving into the hero's own bottom colour. */
.page-hero.film .film-video{opacity:.45}
.page-hero.film::after{
  background:linear-gradient(180deg,
    #fff 0%,
    rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.75) 78%,
    var(--bg-tint) 100%);
}
@media (prefers-reduced-motion:reduce){
  .page-hero.film::before{
    background-image:url("/media/statement-poster.jpg");
    opacity:.45;
  }
}
.page-hero .jump-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:32px;
  font-size:14px;
  font-weight:500;
}
.page-hero .jump-links a{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:var(--line-strong);
}
.page-hero .jump-links a:hover{color:var(--fg);text-decoration-color:currentColor}
.page-hero .badge{margin-top:24px}
.page-hero .updated{margin-top:16px;font-size:13px;color:var(--muted)}

.section-head .body{margin-top:16px;color:var(--muted);max-width:72ch}

/* ---------- prose ---------- */
.prose{max-width:68ch;display:flex;flex-direction:column;gap:18px}
.prose p{color:var(--fg-soft);font-size:17px}
.prose p b{color:var(--fg);font-weight:500}
.prose h3{margin-top:8px;margin-bottom:-6px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--fg)}

/* ---------- numbered list ---------- */
.numbered{display:flex;flex-direction:column;gap:16px}
.num-item{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:24px;
  align-items:start;
  padding:28px 32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.num-mark{padding-top:4px;font-size:13px;font-weight:500;color:var(--muted)}
.num-item h3{font-size:20px;line-height:1.3;letter-spacing:-.01em}
.num-item p{margin-top:10px;color:var(--fg-soft);max-width:66ch}
.num-item p b{color:var(--fg);font-weight:500}

/* ---------- principles on Company and Careers ---------- */
.principles-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.principle{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
}
.principle h3{margin-bottom:8px}
.principle p{color:var(--muted);font-size:15px}

/* ---------- the two calls to action that close most pages ---------- */
.cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cta-block{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:36px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s;
}
.cta-block:hover{border-color:var(--line-strong);box-shadow:0 8px 24px rgba(11,11,15,.06)}
.cta-block h2{font-size:22px;line-height:1.3;letter-spacing:-.01em}
.cta-block p{color:var(--muted);font-size:15px;max-width:44ch}
.cta-block .go{margin-top:8px;font-size:15px;font-weight:500;color:var(--fg)}

/* ---------- industries page: one block per sector ---------- */
.sector{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:40px;
  align-items:start;
  padding:32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.sector + .sector{margin-top:16px}
.sector h2{font-size:22px;line-height:1.3;letter-spacing:-.01em}
.sector-note{
  display:block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.sector-lead{margin-top:12px;font-size:16px;line-height:1.55;color:var(--fg-soft)}
/* Four fixed labels per card so sectors can be compared at a glance. */
.sector-body{display:flex;flex-direction:column;gap:18px;margin:0}
.sector-body dt{
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.sector-body dd{margin:6px 0 0;color:var(--fg-soft)}

/* ---------- insights ---------- */
.essay-list{display:flex;flex-direction:column;gap:16px}
.essay-item{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:32px;
  align-items:start;
  padding:28px 32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.essay-date{padding-top:4px;font-size:13px;color:var(--muted)}
.essay-item h2{font-size:22px;line-height:1.3;letter-spacing:-.01em}
.essay-item h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.essay-item p{margin-top:10px;color:var(--muted);max-width:62ch}

.essay{max-width:68ch}
.byline{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.essay-body{margin-top:40px;display:flex;flex-direction:column;gap:22px}
.essay-body p{color:var(--fg-soft);font-size:17px;line-height:1.75}
.essay-body h2{margin-top:24px;font-size:24px;line-height:1.3;letter-spacing:-.01em}
.essay-foot{
  margin-top:64px;
  padding-top:28px;
  border-top:1px solid var(--line);
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
}
.essay-foot a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* ---------- privacy ---------- */
.doc{max-width:68ch;display:flex;flex-direction:column;gap:44px}
.doc h2{font-size:20px;line-height:1.35;margin-bottom:12px}
.doc p{color:var(--fg-soft)}
.doc p + p{margin-top:12px}
.doc ul{
  margin-top:12px;
  padding-left:20px;
  list-style:disc;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--fg-soft);
}
.doc li::marker{color:var(--muted)}
.doc b{color:var(--fg);font-weight:500}
.doc a{text-decoration:underline;text-underline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .page-hero{padding-block:72px 60px}
  .page-hero h1{font-size:40px}
  .num-item{grid-template-columns:1fr;gap:8px;padding:24px}
  .num-mark{padding-top:0}
  .principles-grid{grid-template-columns:1fr}
  .cta-pair{grid-template-columns:1fr}
  .sector{grid-template-columns:1fr;gap:24px;padding:24px}
  .essay-item{grid-template-columns:1fr;gap:8px;padding:24px}
  .essay-date{padding-top:0}
}

@media (max-width:640px){
  .page-hero{padding-block:56px 48px}
  .page-hero h1{font-size:32px;letter-spacing:-.02em;max-width:none}
  .page-hero .standfirst{font-size:17px}
  .prose p,.essay-body p{font-size:16px}
  .cta-block{padding:24px}
  .essay-body{margin-top:32px}
  .doc{gap:36px}
}

/* ---------- careers listing ---------- */
.role-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.role-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:28px 28px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s;
}
.role-card:hover{
  border-color:var(--line-strong);
  box-shadow:0 8px 24px rgba(11,11,15,.04);
}
.role-card .meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:var(--chip);
  color:var(--fg-soft);
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
}
.role-card h3{font-size:22px;letter-spacing:-.02em}
.role-card p{color:var(--muted);font-size:15px;line-height:1.55;flex:1}
.role-card .go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-size:14px;
  font-weight:500;
  color:var(--fg);
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.job-hero{padding-block:80px 48px}
.job-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.job-hero h1{font-size:48px;letter-spacing:-.03em;line-height:1.1;max-width:18ch}
.job-meta{margin-top:18px;color:var(--muted);font-size:15px}
.job-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:64px;
  align-items:start;
}
.job-body{display:flex;flex-direction:column;gap:40px;max-width:68ch}
.job-body h2{font-size:22px;letter-spacing:-.02em}
.job-body p{color:var(--fg-soft);font-size:16.5px;line-height:1.7}
.job-body p + p{margin-top:12px}
.job-body ul{
  margin-top:12px;
  padding-left:20px;
  list-style:disc;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--fg-soft);
}
.job-body li::marker{color:var(--muted)}
.job-aside{
  position:sticky;
  top:96px;
  padding:24px;
  background:var(--bg-tint);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.job-aside h3{font-size:16px;margin-bottom:8px}
.job-aside p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:16px}
.job-aside dl{display:grid;gap:12px;margin-bottom:20px}
.job-aside dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.job-aside dd{margin:4px 0 0;font-size:14px;color:var(--fg)}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  font-size:14px;
  color:var(--muted);
}
.back-link:hover{color:var(--fg)}

@media (max-width:900px){
  .role-grid{grid-template-columns:1fr}
  .job-layout{grid-template-columns:1fr;gap:32px}
  .job-hero h1{font-size:36px}
  .job-aside{position:static}
}