/* Oliven Works · single stylesheet, mobile-first
   1 tokens · 2 base · 3 utilities · 4 buttons · 5 header · 6 sections · 7 footer · 8 motion */

/* 1. TOKENS ---------------------------------------------------------- */
:root {
  --lime: #C5F03C;    /* blocks, buttons and highlights, always with ink text on top. Never a text colour on light backgrounds */
  --ink: #0F140A;
  --ember: #FF5B2E;
  --sprout: #EFF7D2;
  --paper: #FAFBF5;
  --surface: #EEF1E4;
  --bark: #5A6050;
  --line: #DFE3D3;
  --white: #FFFFFF;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", "Songti SC", serif;

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 104px; --s8: 168px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(72px, 11vw, 168px);
  --radius: 2px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* One treatment for every photo, calibrated on the hero shot (pexels 20044377):
     restrained colour, soft contrast, "washed" blacks and a slight warmth. */
  --photo-filter: saturate(.72) contrast(.93) brightness(1.03) sepia(.10);
  --photo-black: #1C222B;   /* how far the blacks lift (matte film effect) */
}

/* 2. BASE ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
fieldset { border: 0; min-width: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--display); letter-spacing: -.025em; line-height: 1.05;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
/* German has long compound words: automatic hyphenation helps there */
:lang(de) :is(h1, h2, h3, h4) { hyphens: auto; }
p { max-width: 62ch; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: var(--radius); }
::selection { background: var(--lime); color: var(--ink); }

/* 3. UTILITIES ------------------------------------------------------- */
.container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: var(--white); padding: 12px 16px; border-radius: var(--radius); }
.skip:focus { top: 12px; }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.eyebrow::before { content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .62em; background: var(--lime); }
.section-head { display: grid; gap: var(--s4); max-width: 900px; margin-bottom: var(--s6); }
.section-head h2, .split-head h2, .contact h2 { font-size: clamp(34px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.lede, .big { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; }
.lede { color: var(--bark); }
.photo { overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo:hover img { transform: scale(1.03); }

.split { display: grid; gap: var(--s5); }
.split-head { display: grid; gap: var(--s4); align-content: start; }
.split-body { display: grid; gap: var(--s4); }
@media (min-width: 1024px) {
  .split { grid-template-columns: 5fr 6fr; gap: var(--s7); }
  .split-head { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* 4. BUTTONS --------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 22px;
  font: 600 16px/1.2 var(--body); text-decoration: none; text-align: left; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ember { background: var(--ember); color: var(--ink); }
.btn-ember:hover { background: var(--white); color: var(--ink); }
.site-header .btn-ember:hover { background: var(--ink); color: var(--white); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--ink); color: var(--white); }
.btn-ghost-inv { border-color: var(--white); color: var(--white); }
.btn-ghost-inv:hover { background: var(--white); color: var(--ink); }
.link { color: var(--ink); font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.link:hover { background: var(--lime); }

/* 5. HEADER ---------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.site-header.scrolled { border-color: var(--line); }
.bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.logo svg { width: 34px; height: 34px; }
.logo-word { font: 400 22px/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.logo-word b { font-weight: 800; }
.logo:hover svg circle { animation: pulse .6s var(--ease); transform-origin: 25px 24px; }

.menu-btn { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--ink); margin-right: -12px; }
.menu-ico, .menu-ico::before, .menu-ico::after { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .25s var(--ease), background-color .2s; }
.menu-ico { position: relative; }
.menu-ico::before, .menu-ico::after { content: ""; position: absolute; left: 0; }
.menu-ico::before { top: -7px; } .menu-ico::after { top: 7px; }
.menu-btn[aria-expanded="true"] .menu-ico { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-ico::before { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico::after { transform: translateY(-7px) rotate(-45deg); }

.menu {
  /* absolute, not fixed: the header backdrop-filter becomes the containing block */
  position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--paper);
  padding: var(--s5) var(--gutter) var(--s6); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s5);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
}
.menu.open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html:not(.js) .menu { position: static; visibility: visible; opacity: 1; transform: none; display: none; }
.nav { display: grid; gap: var(--s2); }
.nav a { display: block; padding: 8px 0; font: 600 30px/1.15 var(--display); letter-spacing: -.03em; text-decoration: none; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }

.lang { position: relative; }
.lang-btn { display: none; }
.lang-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lang-list a {
  display: inline-flex; align-items: center; font: 500 15px/1 var(--body); padding: 10px 14px; min-height: 40px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
}
.lang-list a[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.header-cta { align-self: flex-start; }

/* Perspectives in the menu: its own emphasis (another page, not an anchor) */
.nav-insights { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding-block: var(--s4); border-block: 1px solid var(--line); text-decoration: none; }
.ni-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ember); }
.ni-label { font: 600 30px/1.15 var(--display); letter-spacing: -.03em; color: var(--ink); }
.nav-insights small { grid-column: 2; font-size: 15px; color: var(--bark); }
.nav-insights:hover .ni-label { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .ni-dot { animation: ni-pulse 2.8s ease-out infinite; } }
@keyframes ni-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 91 46 / .5); } 50% { box-shadow: 0 0 0 7px rgb(255 91 46 / 0); } }

@media (min-width: 1280px) {
  :root { --header-h: 76px; }
  .menu-btn { display: none; }
  .menu, html:not(.js) .menu {
    position: static; height: auto; visibility: visible; opacity: 1; transform: none; padding: 0; overflow: visible; background: none;
    display: flex; flex-direction: row; align-items: center; gap: var(--s3); transition: none;
  }
  .nav { display: flex; gap: clamp(12px, 1.4vw, 26px); margin-right: var(--s2); }
  .nav a, .nav-insights, .header-cta { white-space: nowrap; }
  .nav a { font: 500 15px/1.2 var(--body); letter-spacing: 0; padding: 8px 0; position: relative; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
  .nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
  .lang-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 10px; font: 600 14px/1 var(--body); background: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer; }
  .lang-btn svg { width: 12px; height: 12px; }
  .lang-btn:hover { border-color: var(--ink); }
  .lang-list {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; flex-direction: column; flex-wrap: nowrap; gap: 0;
    background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius); padding: 6px;
    visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .lang.open .lang-list, html:not(.js) .lang:is(:hover, :focus-within) .lang-list { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .lang-list a { width: 100%; border: 0; display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .lang-list a:hover:not([aria-current="true"]) { background: var(--surface); }
  .header-cta { align-self: auto; min-height: 44px; padding: 10px 18px; font-size: 15px; }
  .nav-insights { display: inline-flex; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); transition: border-color .2s, background-color .2s; }
  .ni-dot { width: 8px; height: 8px; }
  .ni-label { font: 600 15px/1.2 var(--body); letter-spacing: 0; }
  .nav-insights small { display: none; }
  .nav-insights:hover { border-color: var(--ink); }
  .nav-insights[aria-current="page"] { background: var(--sprout); border-color: var(--ink); }
}

/* 6. SECTIONS -------------------------------------------------------- */

/* Hero */
.hero {
  position: relative; isolation: isolate; padding-top: calc(var(--header-h) + clamp(32px, 6vw, 88px));
  background:
    radial-gradient(55% 65% at 88% 28%, var(--sprout) 0%, transparent 70%),
    radial-gradient(38% 45% at 6% 96%, #FFEFE9 0%, transparent 70%);
}
/* generative background (js/hero-canvas.js): olives drifting in the wind and embers. Fades out at the bottom. */
.hero-canvas {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.hero-grid { display: grid; gap: var(--s6); align-items: center; }
.hero-copy { display: grid; gap: var(--s5); }
.hero h1 { font-size: clamp(42px, 7.6vw, 112px); font-weight: 800; letter-spacing: -.045em; line-height: .96; }
.hero h1 em, .pull { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.hero-sub { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.5; color: var(--bark); max-width: 54ch; }

/* The hero artwork. Three versions share one markup; the class next to .hero-visual (templates/home.php) picks one:
   .hv-crescent  the whole photo in a disc, a crescent of colour behind it on the diagonal, the dot on the crescent (in use)
   .hv-logo      the logo itself with the photo inside: open ring + leaf, the dot in the centre
   .hv-cut       a disc cut on the diagonal: photo on one side, a slice of colour on the other, the dot on the cut */
.hero-visual { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 1; }
.hv-photo, .hv-shape { position: absolute; border-radius: 50%; }
.hv-photo { overflow: hidden; background: var(--sprout); }
.hv-photo img { width: 100%; height: 100%; object-fit: cover; }
.hv-shape { background: var(--lime); }
.hv-dot { position: absolute; aspect-ratio: 1; border-radius: 50%; background: var(--ember); transform: translate(-50%, -50%); }
.hv-leaf { display: none; }

/* Same geometry as the logo mark (48 × 48 grid, centre 23 26), with a thinner ring so the photo gets room.
   The photo is placed by hand so the dot lands between the two people: redo it if the photo changes. */
.hv-logo .hv-shape {
  left: 5.82%; top: 15.12%; width: 79.07%; aspect-ratio: 1;
  -webkit-mask: radial-gradient(closest-side, transparent 74.1%, #000 74.7%), conic-gradient(from 25deg, transparent 40deg, #000 40deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(closest-side, transparent 74.1%, #000 74.7%), conic-gradient(from 25deg, transparent 40deg, #000 40deg);
  mask-composite: intersect;
}
.hv-logo .hv-photo { left: 15.82%; top: 25.12%; width: 59.07%; aspect-ratio: 1; }
.hv-logo .hv-photo img { position: absolute; left: 0; top: -24.9%; width: 111.8%; max-width: none; height: auto; }
/* the logo's leaf: same shape, angle and tip. It comes in through the opening and its base goes a little over the photo */
.hv-logo .hv-leaf { display: block; position: absolute; left: 63.77%; top: 3.49%; width: 32.74%; aspect-ratio: 1; fill: var(--lime); }
.hv-logo .hv-dot { left: 45.35%; top: 54.65%; width: 12.1%; }

.hv-crescent .hv-photo { left: 0; top: 0; width: 80%; aspect-ratio: 1; }
.hv-crescent .hv-shape {
  right: 0; bottom: 0; width: 80%; aspect-ratio: 1;
  /* the hole is the photo plus a gap: its centre sits at 25% 25% of this box */
  -webkit-mask: radial-gradient(circle closest-side at 25% 25%, transparent 216%, #000 217%);
  mask: radial-gradient(circle closest-side at 25% 25%, transparent 216%, #000 217%);
}
.hv-crescent .hv-dot { left: 83%; top: 83%; width: 9%; }

.hv-cut .hv-photo, .hv-cut .hv-shape { inset: 0; }
.hv-cut .hv-photo { clip-path: polygon(0 0, 100% 0, 100% 30%, 30% 100%, 0 100%); }
.hv-cut .hv-shape { clip-path: polygon(100% 39%, 100% 100%, 39% 100%); }
.hv-cut .hv-dot { left: 67.25%; top: 67.25%; width: 10%; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 7fr 5fr; gap: var(--s6); }
  .hero-visual { margin-inline: 0 0; justify-self: end; }
}

.proof {
  max-width: none; margin-top: clamp(48px, 7vw, 104px); padding-block: var(--s4); border-block: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; align-items: center; font-size: 17px;
}
.proof a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); text-underline-offset: 5px; white-space: nowrap; }
.proof a svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.proof a:hover svg { transform: translateY(3px); }

/* Manifesto */
.manifesto .split-body p { color: var(--bark); }
.manifesto .split-body .big { color: var(--ink); }
.pull { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.2; color: var(--ink) !important; max-width: 24ch; margin-top: var(--s4); padding-top: var(--s5); border-top: 3px solid var(--ember); }

/* What we do */
.services { background: var(--surface); }
.rows { border-top: 1px solid var(--ink); }
.row { display: grid; gap: var(--s3); padding-block: var(--s5); border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); position: relative; transition: padding-left .4s var(--ease); }
.row h3 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 600; letter-spacing: -.035em; transition: color .3s; }
.row p { color: var(--bark); }
/* Services: only the title is visible; the text opens on the arrow (native details, works without JS). */
.row details { grid-column: 1 / -1; }
.row summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); cursor: pointer; list-style: none; }
.row summary::-webkit-details-marker { display: none; }
.row summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 6px; }
.row-arrow { flex: none; width: 14px; height: 14px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform .3s var(--ease); }
.row details[open] .row-arrow { transform: translateY(3px) rotate(225deg); }
.row details p { margin-top: var(--s4); max-width: 62ch; }
.row::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--ember); transform: translateY(-50%) scale(0); transition: transform .4s var(--ease); }
@media (min-width: 860px) {
  .row { grid-template-columns: 6fr 5fr; gap: var(--s6); align-items: baseline; }
  .row:hover { padding-left: 36px; }
  .row:hover h3 { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .row:hover::before { transform: translateY(-50%) scale(1); }
}

/* Size in numbers */
.scale { background: var(--ink); color: var(--paper); padding-block: clamp(48px, 7vw, 96px); margin-top: clamp(48px, 7vw, 104px); }
.scale-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.scale-grid > div { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid #3A4230; }
.scale dt { font: 800 clamp(40px, 5vw, 80px)/.95 var(--display); letter-spacing: -.05em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scale-grid > div { min-width: 0; }
.scale dt::after { content: ""; display: block; width: 36px; height: 4px; background: var(--ember); margin-top: var(--s3); }
.scale dd { font-size: 16px; line-height: 1.45; color: #CDD3C0; max-width: 26ch; }
@media (min-width: 900px) { .scale-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero .proof { border-bottom: 0; }

/* How we roll out: closed block on its own background, three steps and a full-width closing line */
.deploy { background: var(--surface); }
.deploy .steps { margin-bottom: var(--s6); }
.deploy .steps li { border-top-color: var(--line); }
.deploy .pull { margin-top: 0; }
@media (min-width: 1024px) { .deploy .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Featured implementations: rotating, straight photo on one side, application on the other */
.case { background: var(--paper); }
.case .carousel-ui { border-top-color: var(--ink); }
.case .car-btn { color: var(--ink); border-color: var(--ink); }
.case .car-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.case-slide { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s5); align-items: stretch; }
/* the photo fills the box instead of sizing it: on iPhone, a lazy image off to the side collapsed the box */
.case-photo { width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--surface); aspect-ratio: 9 / 10; }
.case-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.case-body { display: grid; gap: var(--s3); align-content: center; }
.case-tag { font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.case-body h3 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.case-text { color: var(--bark); font-size: clamp(17px, 1.4vw, 19px); }
.case-app-wrap { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--s3); border-radius: var(--radius); border: 1px solid var(--line); }
.case-app { display: block; width: 100%; height: auto; filter: var(--photo-filter); }
.case-app-wrap::after { content: ""; position: absolute; inset: 0; background: var(--photo-black); mix-blend-mode: lighten; pointer-events: none; }
.case-client { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); max-width: none; padding-top: var(--s3); border-top: 1px solid var(--ink); }
.case-logo { height: 44px; width: auto; border-radius: 8px; }
.case-client { align-items: center !important; }
.case-client b { font: 600 20px/1.2 var(--display); letter-spacing: -.02em; }
.case-logo-link { display: block; line-height: 0; border-radius: 8px; transition: opacity .2s; }
.case-logo-link:hover { opacity: .85; }
.case-visit { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.case-visit svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.case-visit:hover span { text-decoration: underline; text-underline-offset: 5px; }
.case-visit:hover svg { transform: translate(2px, -2px); }
/* Narrow screens: no carousel. Each case is taller than the screen, so a swipe left the reader
   at the bottom of the previous one. The three cases stack and read top to bottom. */
@media (max-width: 959px) {
  .case .track { flex-direction: column; overflow: visible; scroll-snap-type: none; gap: var(--s7); }
  .case .slide { flex: none; }
  .case .carousel-ui { display: none; }
  .case-photo { aspect-ratio: 4 / 3; }
}
/* Wide screens: one arrow on each side of the slide, centred on its height, so they stay in view
   while the case is read. Above or below the slides, arrows and case never fit the screen together.
   Each arrow sits in a lane made of the page gutter plus a little padding taken from the slide. */
@media (min-width: 960px) {
  .case .carousel { position: relative; --lane: 28px; }
  .case .carousel-ui { margin: 0; padding: 0; border: 0; }
  .case .slide { padding-inline: var(--lane); }
  .case .car-btn { position: absolute; top: 50%; z-index: 1; margin-top: -26px; }
  .case .car-prev { left: calc((var(--lane) - var(--gutter)) / 2 - 26px); }
  .case .car-next { right: calc((var(--lane) - var(--gutter)) / 2 - 26px); }
}
/* Past the container's max width the page margin alone fits the arrows: the slide lines up with the heading again. */
@media (min-width: 1480px) {
  .case .carousel { --lane: 0px; }
  .case .car-prev { left: -76px; }
  .case .car-next { right: -76px; }
}
@media (min-width: 960px) {
  .case-slide { grid-template-columns: 5fr 6fr; gap: var(--s7); }
  .case-photo { aspect-ratio: auto; min-height: 560px; }
}

/* How we work */
.steps { display: grid; gap: var(--s5); counter-reset: step; margin-bottom: var(--s7); }
.steps li { counter-increment: step; display: grid; gap: var(--s3); align-content: start; padding-top: var(--s4); border-top: 1px solid var(--ink); position: relative; }
.steps li::before { content: counter(step); font: 800 15px/1 var(--display); color: var(--ink); }
.steps li::after { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ember); }
.steps h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; }
.steps p, .diffs p { color: var(--bark); font-size: 16px; }
.method-lower { display: grid; gap: var(--s6); align-items: center; }
.diffs { display: grid; gap: var(--s5); }
.diffs li { display: grid; gap: var(--s2); }
.diffs h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
  .method-lower { grid-template-columns: 6fr 5fr; gap: var(--s7); }
}

/* People */
.people { padding-top: var(--section); }
.mosaic { display: grid; gap: var(--s3); margin-block: var(--s6) var(--s7); }
/* Phone: the three photos become a swipe strip, edge to edge, with the next one peeking in */
@media (max-width: 719px) {
  .mosaic { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .mosaic::-webkit-scrollbar { display: none; }
  .mosaic .photo { flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
}
@media (min-width: 720px) {
  .mosaic { grid-template-columns: 5fr 3fr; grid-template-rows: 1fr 1fr; gap: var(--s4); }
  .m1 { grid-row: span 2; }
}
.sub-title { font: 600 13px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s4); }
.values { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.values li { display: grid; gap: var(--s2); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.values h4 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; }
.values p { color: var(--bark); }
@media (min-width: 720px) { .values li { grid-template-columns: 2fr 3fr; gap: var(--s5); align-items: baseline; } }


/* Testimonials (scroll-snap carousel: works with touch, keyboard and without JS) */
.voices { background: var(--lime); color: var(--ink); }
.voices .eyebrow { color: var(--ink); opacity: .85; }
.voices .eyebrow::before { background: var(--ink); }
.voices-head { display: grid; gap: var(--s4); max-width: 820px; margin-bottom: var(--s6); }
.voices-head h2 { font-size: clamp(30px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--s5); border-radius: var(--radius); }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.voice { display: grid; gap: var(--s5); align-items: center; }
.voice-photo { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; width: min(60%, 300px); background: var(--ink); }
.voice-photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.voice-photo::after { content: ""; position: absolute; inset: 0; background: var(--photo-black); mix-blend-mode: lighten; pointer-events: none; }
.voice-body { display: grid; gap: var(--s4); }
.voice blockquote p { font: italic 400 clamp(23px, 3vw, 42px)/1.24 var(--serif); letter-spacing: -.01em; max-width: 26em; }
.voice figcaption { display: grid; line-height: 1.35; }
.voice figcaption b { font: 600 22px/1.2 var(--display); letter-spacing: -.02em; }
.voice figcaption span { font-size: 15px; opacity: .85; }
@media (min-width: 860px) { .voice { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s7); } .voice-photo { width: 100%; } }
/* Phone: the arrows sit in the empty space beside the photo. At the bottom of the tallest slide they fell under Safari's toolbar and a tap opened the toolbar instead. */
@media (max-width: 859px) {
  .voices .carousel { position: relative; }
  .voice-photo { width: min(60%, 100% - 132px, 300px); }
  .voices .carousel-ui { position: absolute; top: 0; right: 0; margin: 0; padding: 0; border: 0; }
}
/* Testimonials (scroll-snap carousel: works with touch, keyboard and without JS) */
.voices { background: var(--lime); color: var(--ink); }
.voices .eyebrow { color: var(--ink); opacity: .85; }
.voices .eyebrow::before { background: var(--ink); }
.voices-head { display: grid; gap: var(--s4); max-width: 820px; margin-bottom: var(--s6); }
.voices-head h2 { font-size: clamp(30px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--s5); border-radius: var(--radius); }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.slide figure { display: grid; gap: var(--s5); }
.slide blockquote p { font: italic 400 clamp(24px, 3.6vw, 50px)/1.22 var(--serif); letter-spacing: -.01em; max-width: 26ch; max-width: min(100%, 30em); }
.slide figcaption { display: flex; align-items: center; gap: var(--s3); }
.slide figcaption img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--ink); }
.slide figcaption > span { display: grid; line-height: 1.35; }
.slide figcaption b { font: 600 20px/1.2 var(--display); letter-spacing: -.02em; }
.slide figcaption span span { font-size: 15px; opacity: .85; }
.carousel-ui { display: flex; align-items: center; justify-content: flex-end; gap: var(--s4); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgb(15 20 10 / .25); }
/* the counter is for screen readers only */
.count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.count b { font: 800 28px/1 var(--display); }
.carousel-nav { display: flex; gap: var(--s2); }
.car-btn { width: 52px; height: 52px; display: grid; place-items: center; background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s, opacity .2s; }
.car-btn svg { width: 22px; height: 22px; }
.car-prev svg { transform: rotate(180deg); }
.car-btn:hover:not(:disabled) { background: var(--ink); color: var(--lime); }
.car-btn:disabled { opacity: .35; cursor: default; }
html:not(.js) .carousel-ui { display: none; }

/* Careers */
.careers { background: var(--sprout); }
.careers .lede { color: var(--ink); }
.careers-top { display: grid; gap: var(--s5); align-items: end; margin-bottom: var(--s6); }
.careers-top .section-head { margin-bottom: 0; }
.reasons { display: grid; gap: var(--s5) var(--s4); margin-bottom: var(--s6); }
.reasons li { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s4); border-top: 1px solid var(--ink); }
.reasons h3 { font-size: 22px; font-weight: 600; line-height: 1.15; }
.reasons p { font-size: 16px; color: #3C4433; }
@media (min-width: 720px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .careers-top { grid-template-columns: 6fr 5fr; gap: var(--s7); }
  .reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* an invitation, without promising an open role */
.careers-note { font: italic 400 clamp(19px, 1.7vw, 23px)/1.3 var(--serif); color: var(--ink); max-width: 28ch; }

/* Contact */
.contact { background: var(--ink); color: var(--paper); }
.contact .eyebrow { color: var(--ember); }
.contact .lede { color: #CDD3C0; }
.contact-grid { display: grid; gap: var(--s6); }
.contact-copy { display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 6fr; gap: var(--s7); } }

.form { display: grid; gap: var(--s4); }
.who { display: flex; flex-wrap: wrap; gap: var(--s2); }
.who legend, .field label { font-size: 14px; font-weight: 600; letter-spacing: .02em; margin-bottom: var(--s2); display: block; }
.field label small { font-weight: 400; color: #A9B09A; }
/* Turnstile only shows up when it needs the person (interaction-only): no space reserved */
.captcha:empty { display: none; }
/* Sent: nothing disappears or turns into a coloured box. The fields recede, the thanks arrives in the site's typography. */
.form .field, .form .who, .form .btn { transition: opacity .6s var(--ease), background-color .4s, color .4s, border-color .4s; }
.form--sent .field, .form--sent .who { opacity: .38; pointer-events: none; }
.form--sent .btn, .form--sent .btn:hover { background: transparent; color: var(--paper); border-color: #4B5340; box-shadow: none; cursor: default; opacity: 1; }
.form--sent .btn svg { display: none; }
.form--sent .btn span::after { content: ""; display: inline-block; width: .42em; height: .78em; margin-left: .7em; border: solid var(--ember); border-width: 0 2px 2px 0; transform: translateY(-.12em) rotate(45deg); }
.form-status[data-state="sent"] { padding: 0; background: none; color: var(--paper); font: 600 clamp(20px, 2.1vw, 26px)/1.25 var(--display); letter-spacing: -.02em; max-width: 24ch; outline: 0; animation: sent-in .7s var(--ease) both; }
.form-status[data-state="sent"]::before { content: ""; display: block; width: 36px; height: 4px; background: var(--ember); margin-bottom: var(--s3); }
@keyframes sent-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-status[data-state="sent"] { animation: none; } }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
.chip span { display: block; white-space: nowrap; padding: 12px 16px; font-size: 15px; font-weight: 500; line-height: 1.2; border: 1px solid #4B5340; border-radius: 999px; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: var(--paper); }
.chip input:checked + span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.chip input:focus-visible + span { outline: 3px solid var(--ember); outline-offset: 3px; }
/* Phone: the three subjects on one line (on very narrow screens it wraps as before). */
@media (max-width: 520px) {
  .who { gap: 6px; }
  .chip span { padding: 10px 11px; font-size: 13px; letter-spacing: -.01em; }
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; font: 400 17px/1.4 var(--body); color: var(--paper); background: transparent;
  border: 0; border-bottom: 1px solid #6C7460; border-radius: 0; padding: 10px 0 12px; transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
/* Phone: country code + number on one line; the select matches the other fields. */
.tel { display: grid; grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr); gap: var(--s4); align-items: end; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 22px; text-overflow: ellipsis;
  background: no-repeat right 2px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9CDE6' stroke-width='2'/%3E%3C/svg%3E"); }
.field select option { color: var(--ink); background: var(--paper); }
@media (max-width: 520px) { .tel { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: var(--s3); } }
.field ::placeholder { color: #8F9682; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--paper); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 0; border-color: var(--ember); box-shadow: 0 2px 0 var(--ember); }
.field [aria-invalid="true"] { border-color: #FF8A6B; }
.err { font-size: 14px; color: #FF9D83; min-height: 0; margin-top: 6px; }
.err:empty { display: none; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 0 12px; align-items: start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ember); }
.check label { margin: 0; font-weight: 400; font-size: 15px; }
.check .err { grid-column: 2; }
.form .btn { justify-self: start; }
/* Phone: the whole form fits on one screen, from the subjects to the button */
@media (max-width: 719px) {
  .form { gap: var(--s3); }
  .who legend, .field label { font-size: 13px; margin-bottom: 0; }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { font-size: 16px; padding: 6px 0 8px; }
  .field textarea { min-height: 0; height: 84px; }
  .check label { font-size: 14px; }
}
/* form honeypot: off screen for people, visible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-weight: 600; padding: 14px 16px; border-radius: var(--radius); }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { background: #12382B; color: #9FF0CB; }
.form-status[data-state="demo"] { background: #3A2A12; color: #FFD79A; }
.form-status[data-state="fail"] { background: #3A1A12; color: #FFB49E; }

/* 7. FOOTER ---------------------------------------------------------- */
.site-footer { background: var(--ink); color: #CDD3C0; padding-block: var(--s6) var(--s5); border-top: 1px solid #2B3320; font-size: 15px; }
.foot-grid { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
.site-footer .logo { color: var(--paper); }
.foot-brand { display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.foot-map { width: 100%; max-width: 420px; margin-top: var(--s3); }
.foot-cities { color: var(--paper); font: 600 20px/1.3 var(--display); letter-spacing: -.02em; }
.site-footer .foot-ig ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.foot-ig a { display: block; overflow: hidden; border-radius: var(--radius); padding: 0 !important; aspect-ratio: 4 / 5; background: #1A2112; box-shadow: inset 0 0 0 1px #2B3320; outline: 1px solid #2B3320; outline-offset: -1px; }
.foot-ig img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.foot-ig a:hover img { transform: scale(1.05); opacity: .85; }
@media (min-width: 720px) { .site-footer .foot-ig ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.site-footer .foot-social { display: flex; gap: var(--s2); margin-top: var(--s2); }
@media (max-width: 719px) { .site-footer .foot-social { margin-top: var(--s4); } } /* on phones the lone icon sat too close to the tagline */
.site-footer .foot-social li a { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--paper); border: 1px solid #3A4230; border-radius: 50%; transition: background-color .2s, color .2s, border-color .2s; }
.site-footer .foot-social li a:hover { text-decoration: none; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.foot-social svg { width: 20px; height: 20px; }
.foot-tag { font: italic 400 22px/1.2 var(--serif); color: var(--paper); }
.site-footer h2 { font: 600 12px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #8F9682; margin-bottom: var(--s3); hyphens: none; }
.site-footer ul { display: grid; gap: var(--s2); }
.site-footer a { text-decoration: none; }
.site-footer li a { display: inline-block; padding-block: 4px; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.copy { max-width: none; padding-top: var(--s4); border-top: 1px solid #2B3320; font-size: 14px; color: #8F9682; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 2fr 1fr; } .foot-ig { grid-column: 1 / -1; order: 3; } }
@media (min-width: 1024px) { .foot-ig { grid-column: auto; order: 0; } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 3fr 6fr 2fr; gap: var(--s6); } .foot-brand { grid-column: auto; } }

/* Legal popups (native <dialog>: focus trapped, Esc closes) */
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.site-footer .linklike { text-decoration: none; padding-block: 4px; }
.site-footer .linklike:hover { color: var(--paper); text-decoration: underline; }
.legal { width: min(720px, calc(100vw - 32px)); max-height: min(84vh, 760px); padding: 0; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px -20px rgb(15 20 10 / .5); overflow: hidden; }
.legal[open] { display: flex; flex-direction: column; }
.legal::backdrop { background: rgb(15 20 10 / .6); backdrop-filter: blur(4px); }
.legal header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.legal header h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em; }
.dlg-close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); cursor: pointer; }
.dlg-close:hover { border-color: var(--ink); }
.dlg-close svg { width: 18px; height: 18px; }
.legal-body { overflow-y: auto; padding: var(--s4) clamp(20px, 4vw, 40px); display: grid; gap: var(--s3); font-size: 16px; }
.legal-body h3 { font-size: 19px; font-weight: 600; margin-top: var(--s3); }
.legal-body p { color: var(--bark); max-width: none; }
.legal-body a { color: var(--ink); }
.legal-body mark { background: #FFE9E2; color: #9A2C0E; padding: 0 4px; border-radius: 2px; }
.legal-date { max-width: none; padding: var(--s3) clamp(20px, 4vw, 40px); border-top: 1px solid var(--line); font-size: 13px; color: var(--bark); }
@media (prefers-reduced-motion: no-preference) {
  .legal[open] { animation: rise .35s var(--ease); }
}

/* Photographic standard: applies to every photo of people except the hero (which is the reference) */
.photo img, .case-photo img { filter: var(--photo-filter); }
.photo, .case-photo { position: relative; isolation: isolate; }
.photo::after, .case-photo::after { content: ""; position: absolute; inset: 0; background: var(--photo-black); mix-blend-mode: lighten; pointer-events: none; }

/* photos from the hero series already carry the reference look */
.photo[data-raw] img { filter: none; }
.photo[data-raw]::after { display: none; }

/* 8. MOTION ---------------------------------------------------------- */
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes disc { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes slice { from { opacity: 0; transform: translate(7%, 7%); } to { opacity: 1; transform: none; } }
@keyframes leaf { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fire {
  0% { transform: translate(-50%, -50%) scale(0); }
  45% { transform: translate(-50%, -50%) scale(1.5); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes ember { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 91 46 / .45); } 50% { box-shadow: 0 0 0 16px rgb(255 91 46 / 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* One orchestrated moment: the photo appears, the shape around it follows, the dot fires. */
  .js .hero-copy > * { animation: rise .9s var(--ease) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .js .hero-copy > :nth-child(3) { animation-delay: .24s; }
  .js .hv-photo { animation: disc 1s var(--ease) .2s both; }
  .js .hv-shape { animation: slice .8s var(--ease) .6s both; }
  .js .hv-logo .hv-shape { animation: disc 1s var(--ease) .35s both; }
  .js .hv-logo .hv-leaf { transform-origin: bottom left; animation: leaf .7s var(--ease) .8s both; }
  .js .hv-dot { animation: fire .7s var(--ease) 1.2s both, ember 2.8s ease-out 2s infinite; }

  .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js [data-reveal].in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Review mode (?revisao in the URL): outlines everything fictional or to be confirmed */
.review [data-ph] { outline: 2px dashed var(--ember); outline-offset: 4px; }

/* the reveal must not swallow the hover transition of the service rows */
@media (prefers-reduced-motion: no-preference) {
  .js .row[data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease), padding-left .4s var(--ease); }
}

/* 9. PERSPECTIVES (content area) -------------------------------------- */

/* Cards: landing, "read also" */
.insights, .related { background: var(--surface); }
.cards { display: grid; gap: var(--s6) var(--s5); }
.card a { display: grid; gap: var(--s3); align-content: start; text-decoration: none; height: 100%; }
.card-photo .photo { aspect-ratio: 25 / 17; }
.card-photo { margin-bottom: var(--s2); }
.card h3 { font-size: clamp(23px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; transition: color .3s; }
.card-dek { color: var(--bark); font-size: 16px; }
.card-more { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bark); padding-top: var(--s3); border-top: 1px solid var(--ink); margin-top: auto; max-width: none; }
.card-more span { font-weight: 600; color: var(--ink); }
.card-more svg { width: 18px; height: 18px; margin-left: auto; color: var(--ink); transition: transform .25s var(--ease); }
.card a:hover h3 { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.card a:hover .card-more svg { transform: translateX(4px); }
.card a:hover .photo img { transform: scale(1.03); }
.cards-all { max-width: none; margin-top: var(--s6); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Phone, home page: the latest articles become a swipe strip, like the people photos */
@media (max-width: 719px) {
  .insights .cards { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .insights .cards::-webkit-scrollbar { display: none; }
  .insights .card { flex: 0 0 86%; scroll-snap-align: start; }
}

/* Article head */
.art-head { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 72px)); }
.art-head .container:first-child { display: grid; gap: var(--s4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bark); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 10px; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.art-head h1 { font-size: clamp(36px, 5.4vw, 80px); font-weight: 800; letter-spacing: -.04em; line-height: 1; max-width: 20ch; }
.art-dek { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.45; color: var(--bark); max-width: 58ch; }
.art-meta { font-size: 14px; color: var(--bark); max-width: none; }
.art-meta b { color: var(--ink); font-weight: 600; }
.art-cover { margin-top: var(--s6); }
.art-cover .photo { aspect-ratio: 3 / 2; }
@media (min-width: 720px) { .art-cover .photo { aspect-ratio: 2 / 1; } }

/* Body: sticky table of contents aside, text in a reading column */
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-block: var(--s6) var(--section); }
.art-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.toc { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); }
.toc h2, .summary h2 { font: 600 13px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s3); }
.toc ol { display: grid; gap: 2px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 26px 1fr; padding: 7px 0; font-size: 15px; line-height: 1.35; text-decoration: none; color: var(--bark); }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 600 12px/1.6 var(--display); color: var(--ink); }
.toc a:hover { color: var(--ink); }
@media (min-width: 1100px) {
  .art-grid { grid-template-columns: 280px minmax(0, 760px); gap: var(--s7); justify-content: center; }
  .toc { position: sticky; top: calc(var(--header-h) + 32px); padding: 0; border: 0; max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; }
}

/* "In short": the brief answer, before everything (the passage search engines and AIs quote) */
.summary { background: var(--sprout); padding: var(--s5) clamp(20px, 4vw, 40px); border-left: 4px solid var(--ink); border-radius: var(--radius); }
.summary ul { display: grid; gap: var(--s3); }
.summary li { position: relative; padding-left: 26px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; }
.summary li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); }

/* Running text */
.prose { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.7; }
.prose > * + * { margin-top: var(--s4); }
.prose p { max-width: none; }
.prose h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin-top: var(--s6); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: clamp(21px, 2vw, 26px); font-weight: 600; line-height: 1.2; margin-top: var(--s5); }
.prose h2 + *, .prose h3 + * { margin-top: var(--s3); }
.prose a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); }
.prose strong { font-weight: 600; }
.prose code { font-size: .9em; background: var(--surface); padding: 2px 6px; border-radius: var(--radius); }
.prose ul, .prose ol { display: grid; gap: var(--s2); padding-left: 0; }
.prose ul > li, .prose ol > li { position: relative; padding-left: 30px; }
.prose ul > li::before { content: ""; position: absolute; left: 6px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.prose ol { counter-reset: item; }
.prose ol > li { counter-increment: item; }
.prose ol > li::before { content: counter(item); position: absolute; left: 0; top: .2em; font: 800 15px/1.6 var(--display); color: var(--ink); }
.prose blockquote { margin-block: var(--s5); padding-top: var(--s4); border-top: 3px solid var(--ember); }
.prose blockquote p { font: italic 400 clamp(24px, 2.8vw, 36px)/1.25 var(--serif); letter-spacing: -.01em; }
.note { background: var(--surface); padding: var(--s4) clamp(20px, 3vw, 32px); border-radius: var(--radius); font-size: .94em; }
.note > * + * { margin-top: var(--s3); }
.art-figure { margin-block: var(--s5); }
.art-figure .photo { aspect-ratio: 5 / 3; }
.prose figcaption { margin-top: var(--s2); font-size: 14px; line-height: 1.45; color: var(--bark); }

.table-wrap { overflow-x: auto; margin-block: var(--s5); border-top: 1px solid var(--ink); }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.prose thead th { font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom-color: var(--ink); }
.prose tbody th { font: 600 17px/1.3 var(--display); letter-spacing: -.01em; width: 24%; }
.prose td { color: var(--bark); }

/* HTML diagrams (indexable, translatable text): step flow and 2×2 matrix */
.flow, .matrix { margin-block: var(--s5); }
.prose .flow { display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); counter-reset: flow; padding: 0; }
.prose .flow > li { counter-increment: flow; padding: var(--s3) 0 0; border-top: 1px solid var(--ink); display: grid; gap: 6px; align-content: start; font-size: 15px; line-height: 1.45; color: var(--bark); }
.prose .flow > li::before { content: counter(flow); position: static; font: 800 15px/1 var(--display); color: var(--ink); }
.prose .flow > li::after { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ember); }
.prose .flow b { font: 600 18px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.matrix { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--ink); border-radius: var(--radius); }
.matrix > div { padding: var(--s4); display: grid; gap: 6px; align-content: start; font-size: 15px; line-height: 1.45; color: var(--bark); border-bottom: 1px solid var(--line); }
.matrix > div:last-child { border-bottom: 0; }
@media (min-width: 620px) {
  .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix > div:nth-child(odd) { border-right: 1px solid var(--line); }
  .matrix > div:nth-last-child(-n+2) { border-bottom: 0; }
}
.matrix b { font: 600 18px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.matrix small { font: 600 11px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.matrix .hit { background: var(--sprout); }
.diagram-cap { margin-top: calc(var(--s3) - var(--s5)) !important; font-size: 14px; color: var(--bark); }

.faq h3 { padding-top: var(--s4); border-top: 1px solid var(--line); }
.faq h2 + h3 { border-top-color: var(--ink); }

/* Closing: always hands back to the conversation */
.art-close { background: var(--ink); color: var(--paper); padding-block: clamp(64px, 9vw, 128px); }
.art-close .eyebrow { color: var(--ember); margin-bottom: var(--s3); }
.art-close h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.art-close .lede { color: #CDD3C0; }
.art-close .lede a { color: var(--paper); }
.art-close-grid { display: grid; gap: var(--s5); }
.art-close-body { display: grid; gap: var(--s5); justify-items: start; align-content: start; }
@media (min-width: 1024px) { .art-close-grid { grid-template-columns: 6fr 5fr; gap: var(--s7); align-items: end; } }
.related-title { font-size: clamp(28px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.04em; margin-bottom: var(--s6); }
.page-article .site-footer { border-top-color: #2B3320; }

/* Index: chronological list that scales to hundreds of articles */
.idx { padding-block: calc(var(--header-h) + clamp(32px, 5vw, 72px)) var(--section); }
.idx h1 { font-size: clamp(34px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.idx-filter { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.idx-chip { font: 500 15px/1.2 var(--body); padding: 10px 16px; min-height: 40px; background: none; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.idx-chip:hover { border-color: var(--ink); }
.idx-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Phone: the topics on a single line that slides sideways, edge to edge, instead of one per line */
@media (max-width: 719px) {
  .idx-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); margin-bottom: var(--s4); }
  .idx-filter::-webkit-scrollbar { display: none; }
  .idx-chip { flex: none; white-space: nowrap; font-size: 14px; padding: 8px 14px; min-height: 36px; }
}
.idx-list { border-top: 1px solid var(--ink); }
.idx-row a { display: grid; gap: var(--s2); padding-block: var(--s4); border-bottom: 1px solid var(--line); text-decoration: none; transition: padding-left .4s var(--ease); }
.idx-row p { font-size: 14px; color: var(--bark); }
.idx-row h2 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; transition: color .3s; }
.idx-row a:hover h2 { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (min-width: 860px) {
  .idx-row a { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s5); align-items: baseline; }
  .idx-row a:hover { padding-left: 24px; }
}