/* danielsolves.ai shared stylesheet — single source for tokens + shared components. Page-specific rules stay in each page's inline <style> and load AFTER this sheet. Nav styles live in site-nav.js. */

/* Fonts — self-hosted from this origin, so no visitor IP reaches Google on page load.
   Both families are variable fonts (SIL Open Font License, see fonts/LICENSE-*.txt), so
   one file per subset covers every weight the site uses instead of eight static cuts.
   The latin subsets are preloaded in each page head; keep those hrefs byte-identical to
   the urls below or the browser fetches each file twice. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens */
:root {
  /* Dark is the default. Every value that differs in light mode lives here as a
     token, so the light block below is a flat override with no arithmetic. */
  color-scheme: dark;

  --bg: oklch(0.15 0.012 260);
  --bg-2: oklch(0.18 0.012 260);
  --surface: oklch(0.21 0.012 260 / 0.6);          /* cards */
  --surface-2: oklch(0.24 0.012 260 / 0.72);       /* elevated: bubbles, menus */
  --surface-sunken: oklch(0.12 0.012 260 / 0.7);   /* inputs, insets */
  --shell: oklch(0.13 0.012 260 / 0.8);            /* demo shells */

  --line: oklch(0.95 0.01 260 / 0.09);
  --line-strong: oklch(0.95 0.01 260 / 0.16);
  --line-input: oklch(0.95 0.01 260 / 0.34);       /* control borders, WCAG 1.4.11 */
  --wash: oklch(0.95 0.01 260 / 0.05);             /* hover tint */
  --grid-line: oklch(0.95 0.01 260 / 0.045);

  --text: oklch(0.97 0.008 260);
  --muted: oklch(0.72 0.015 260);
  --faint: oklch(0.63 0.015 260);                  /* 0.56 measured 4.24:1, failed AA */

  --accent: oklch(0.82 0.14 195);
  --accent-2: oklch(from var(--accent) l c calc(h - 45));
  --accent-3: oklch(from var(--accent) l c calc(h + 85));
  --glow: oklch(from var(--accent) l c h / var(--glow-strength, 0.5));
  --on-accent: oklch(0.16 0.01 260);               /* text on an accent fill */
  --accent-soft: oklch(from var(--accent) l c h / 0.10);

  --danger: oklch(0.7 0.2 25);
  --shadow: oklch(0 0 0 / 0.35);
  --hatch-a: oklch(0.22 0.016 260);
  --hatch-b: oklch(0.2 0.016 260);
  --aurora-opacity: 0.45;
  --grain-opacity: 0.035;

  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --fs-display: clamp(48px, 8.5vw, 104px);
  --fs-h1: clamp(38px, 6.2vw, 76px);
  --fs-h2: clamp(29px, 4.4vw, 48px);
  --fs-card-copy: 16px;
  --fs-lede: clamp(16px, 1.8vw, 19px);
  --fs-hero-lede: clamp(18px, 2.1vw, 22px);
  --r-shell: 24px;
  --r-card: 18px;
  --r-control: 12px;
  --r-pill: 999px;
  /* Halved: two stacked sections contributed 192px of empty space at desktop
     width (96 bottom + 96 top), which read as a gap rather than a rhythm. */
  --section-pad: clamp(32px, 4.5vw, 48px);
}

/* Light mode. Elevation stops being "lighter than the background" and becomes
   shadow plus a hairline, which is why the surfaces are defined, not derived. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg: oklch(0.985 0.003 260);
    --bg-2: oklch(0.96 0.004 260);
    --surface: oklch(1 0 0 / 0.86);
    --surface-2: oklch(1 0 0 / 0.96);
    --surface-sunken: oklch(0.965 0.004 260 / 0.9);
    --shell: oklch(1 0 0 / 0.8);

    --line: oklch(0.25 0.02 260 / 0.12);
    --line-strong: oklch(0.25 0.02 260 / 0.2);
    --line-input: oklch(0.25 0.02 260 / 0.36);
    --wash: oklch(0.25 0.02 260 / 0.045);
    --grid-line: oklch(0.25 0.02 260 / 0.06);

    --text: oklch(0.22 0.015 260);
    --muted: oklch(0.44 0.015 260);
    --faint: oklch(0.52 0.015 260);

    /* The teal is too light to carry text or thin strokes on white. */
    --accent: oklch(0.58 0.13 195);
    --glow: oklch(from var(--accent) l c h / var(--glow-strength, 0.22));
    --on-accent: oklch(0.99 0 0);
    --accent-soft: oklch(from var(--accent) l c h / 0.08);

    --danger: oklch(0.52 0.2 25);
    --shadow: oklch(0.2 0.02 260 / 0.14);
    --hatch-a: oklch(0.93 0.006 260);
    --hatch-b: oklch(0.96 0.004 260);
    --aurora-opacity: 0.18;
    --grain-opacity: 0.02;
}
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: oklch(0.985 0.003 260);
  --bg-2: oklch(0.96 0.004 260);
  --surface: oklch(1 0 0 / 0.86);
  --surface-2: oklch(1 0 0 / 0.96);
  --surface-sunken: oklch(0.965 0.004 260 / 0.9);
  --shell: oklch(1 0 0 / 0.8);

  --line: oklch(0.25 0.02 260 / 0.12);
  --line-strong: oklch(0.25 0.02 260 / 0.2);
  --line-input: oklch(0.25 0.02 260 / 0.36);
  --wash: oklch(0.25 0.02 260 / 0.045);
  --grid-line: oklch(0.25 0.02 260 / 0.06);

  --text: oklch(0.22 0.015 260);
  --muted: oklch(0.44 0.015 260);
  --faint: oklch(0.52 0.015 260);

  /* The teal is too light to carry text or thin strokes on white. */
  --accent: oklch(0.58 0.13 195);
  --glow: oklch(from var(--accent) l c h / var(--glow-strength, 0.22));
  --on-accent: oklch(0.99 0 0);
  --accent-soft: oklch(from var(--accent) l c h / 0.08);

  --danger: oklch(0.52 0.2 25);
  --shadow: oklch(0.2 0.02 260 / 0.14);
  --hatch-a: oklch(0.93 0.006 260);
  --hatch-b: oklch(0.96 0.004 260);
  --aurora-opacity: 0.18;
  --grain-opacity: 0.02;
}

/* Reset / base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--bg); }

/* Aurora backdrop (variant A: index + portfolio) */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: var(--aurora-opacity);
}
.aurora::before {
  width: 60vw; height: 60vw; top: -20vw; left: -10vw;
  background: radial-gradient(circle, var(--accent), transparent 65%);
  animation: drift1 22s ease-in-out infinite alternate;
}
.aurora::after {
  width: 50vw; height: 50vw; top: 10vw; right: -15vw;
  background: radial-gradient(circle, var(--accent-3), transparent 65%);
  animation: drift2 26s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(12vw, 14vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-10vw, 10vh) scale(1.1); } }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Aurora backdrop (variant B: case pages) */
.aurora--case::before, .aurora--case::after { opacity: calc(var(--aurora-opacity) * 0.9); }
.aurora--case::before { width: 55vw; height: 55vw; top: -22vw; right: -12vw; left: auto; background: radial-gradient(circle, var(--accent), transparent 65%); animation: driftCase1 24s ease-in-out infinite alternate; }
.aurora--case::after { width: 45vw; height: 45vw; top: 30vw; left: -15vw; right: auto; background: radial-gradient(circle, var(--accent-3), transparent 65%); animation: driftCase2 28s ease-in-out infinite alternate; }
@keyframes driftCase1 { to { transform: translate(-10vw, 12vh) scale(1.15); } }
@keyframes driftCase2 { to { transform: translate(10vw, 8vh) scale(1.1); } }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

/* Section scaffolding */
section { padding: var(--section-pad) 0; position: relative; }
.eyebrow { font-family: var(--mono); font-size: 12.5px; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.025em; font-weight: 600; max-width: 760px; text-wrap: balance; }
.lede, .section-lede { color: var(--muted); color: color-mix(in oklch, oklch(0.99 0.005 260) var(--brighten, 0%), var(--muted)); font-size: var(--fs-lede); max-width: 640px; margin-top: 24px; line-height: 1.6; text-wrap: pretty; }
.lede b, .section-lede b { color: var(--text); font-weight: 500; }

/* Hero */
h1.hero {
  font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.03em; font-weight: 600;
}
h1.hero .grad {
  background: linear-gradient(110deg, var(--accent), var(--accent-3) 60%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-lede { font-size: var(--fs-hero-lede); color: var(--text); max-width: 620px; margin-top: 28px; line-height: 1.45; text-wrap: pretty; }
.hero-lede[data-i18n="hero.lede"] { max-width: 800px; }
.hero-intro { max-width: 800px; margin-top: 18px; font-size: var(--fs-hero-lede); line-height: 1.45; color: var(--text); text-wrap: pretty; }
.hero-lede b { color: var(--accent); font-weight: 500; }

/* Buttons share the control radius. Labels and arrows have separate segments,
   divided by a hairline inside the rounded edge. */
.btn {
  font-family: var(--mono); font-size: 14px; padding: 14px 22px; border-radius: var(--r-control); text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: box-shadow 0.22s, border-color 0.22s, color 0.22s, background 0.22s; cursor: pointer; border: 1px solid transparent;
}
/* Only buttons that carry an arrow get separate segments. Ones with bare text --
   the Fiona trigger, the pipeline demo's run button -- keep their own padding. */
.btn:has(.arw) { padding: 0; align-items: stretch; gap: 0; overflow: hidden; }
/* The divider is drawn on the label, not on the arrow: .arw paints itself with
   a mask, and a mask clips the border box too, so a border there is erased
   along with everything outside the glyph. */
.btn:has(.arw) > span:not(.arw) {
  display: inline-flex; align-items: center; padding: 14px 22px;
  border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* The arrow's box becomes the segment; the glyph keeps its own size, centred,
   so widening the segment never scales the icon. */
.btn .arw, .plan-cta .arw {
  align-self: stretch; height: auto; width: 48px;
  -webkit-mask-size: 17px; mask-size: 17px;
}
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { box-shadow: 0 0 32px var(--glow); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* One arrow for the whole site. Every CTA affordance renders this span, so the
   glyph and its size are controlled here instead of drifting between an inline
   SVG, a "→" character in the markup, and a "→" baked into translated copy. */
.arw {
  display: inline-block; flex: none;
  width: 17px; height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.copy-btn:focus-visible,
.code-copy:focus-visible,
.slot-card:focus-visible,
.lang-btn:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Projects */
.projects { margin-top: 38px; display: flex; flex-direction: column; gap: 22px; }
.project { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-shell); overflow: hidden; background: var(--surface); transition: border-color 0.3s, box-shadow 0.3s; }
.project:hover { border-color: var(--line-strong); box-shadow: 0 18px 44px var(--shadow); }
.project:nth-child(even) { grid-template-columns: 1fr 1.1fr; }
.project:nth-child(even) .p-media { order: 2; }
.p-body { padding: 40px; display: flex; flex-direction: column; }
.p-tag { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-bottom: 14px; }
.p-body h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
.p-body h3 a { color: inherit; text-decoration: none; transition: color 0.2s; }
.p-body h3 a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.p-body p { color: var(--muted); font-size: var(--fs-card-copy); line-height: 1.6; margin-top: 16px; text-wrap: pretty; }
.p-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.p-stack span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.p-links { display: flex; gap: 18px; margin-top: 28px; }
.p-links a { font-family: var(--mono); font-size: 13px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color 0.2s; }
.p-links a:hover { color: var(--accent); }
.p-links a.disabled { color: var(--faint); border-bottom-color: var(--line); cursor: default; }
.p-links a.disabled:hover { color: var(--faint); }
.p-media { position: relative; min-height: 280px; background:
  repeating-linear-gradient(135deg, var(--hatch-a) 0 12px, var(--hatch-b) 12px 24px);
  display: flex; align-items: center; justify-content: center; }
.p-media .ph { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.1em; border: 1px dashed var(--line-strong); padding: 10px 16px; border-radius: 8px; }
@media (max-width: 820px) { .project, .project:nth-child(even) { grid-template-columns: 1fr; } .project:nth-child(even) .p-media { order: 0; } }
.work-more { margin-top: 34px; display: flex; justify-content: flex-start; }

/* Phone: the page gutter and the card padding stacked up to 146px of the 390px
   viewport, leaving 244px for text. Halving the gutter and trimming the card
   padding gives the content back ~30% width. Kept above 640px so tablets, where
   the boxed look reads fine, are untouched. */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .p-body { padding: 26px 20px; }
  .p-links { padding-top: 20px; }
}

/* Case-study shared */
.crumb { font-family: var(--mono); font-size: 12.5px; color: var(--faint); letter-spacing: 0.04em; margin-bottom: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { color: var(--line-strong); }

/* Problem / outcome panels */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-card); padding: 32px; background: var(--surface); backdrop-filter: blur(8px); }
.panel .ph { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 9px; }
.panel.problem .ph { color: var(--faint); }
.panel.problem .ph::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--faint); }
.panel.outcome { border-color: oklch(from var(--accent) l c h / 0.3); }
.panel.outcome .ph { color: var(--accent); }
.panel.outcome .ph::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.panel ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.panel li { font-size: var(--fs-card-copy); line-height: 1.55; color: var(--muted); padding-left: 26px; position: relative; }
.panel li::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 14px; }
.panel.problem li::before { content: "\2715"; color: var(--faint); }
.panel.outcome li::before { content: "\2713"; color: var(--accent); }
.panel.outcome li b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .twoup { grid-template-columns: 1fr; } }

/* Tech stack chips */
h2.case-stack-title { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.025em; font-weight: 600; max-width: none; }
.stack-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.stack-grid span { font-family: var(--mono); font-size: 13px; color: var(--text); padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color 0.2s, color 0.2s; }
.stack-grid span:hover { border-color: var(--accent); color: var(--accent); }

/* CTA card */
.cta { text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-shell); padding: 64px 40px; background: var(--surface); backdrop-filter: blur(8px); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; width: 60%; height: 200%; top: -50%; left: 20%; background: radial-gradient(ellipse, var(--glow), transparent 70%); opacity: 0.5; pointer-events: none; }
.cta h2 { margin: 0 auto; max-width: 18ch; position: relative; }
.cta p { color: var(--muted); font-size: var(--fs-card-copy); margin: 20px auto 0; max-width: 48ch; position: relative; }
.cta .btn { margin-top: 36px; position: relative; }

/* Next project card */
.next { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 30px 36px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--text); text-decoration: none; transition: border-color 0.3s; }
.next:hover { border-color: var(--accent); }
.next .k { font-family: var(--mono); font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.next .t { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; }
.next .arw { width: 26px; height: 26px; color: var(--accent); }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 40px 0; margin-top: clamp(28px, 4vw, 45px); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.foot-inner .c { font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.foot-links a { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

/* --- Scroll reveals (reveal.js) ------------------------------------- */
/* Hidden state only applies when JS is running (html.js set inline in <head>),
   so no-JS visitors and failed script loads still see all content. */
html.js [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(24px);
}
[data-reveal].is-revealed {
  animation: reveal-in 0.7s ease backwards;
  animation-delay: var(--reveal-delay, 0s);
}
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.is-revealed) {
    opacity: 1;
    transform: none;
  }
  [data-reveal].is-revealed {
    animation: none;
  }
  .aurora::before,
  .aurora::after {
    animation: none;
  }
}

/* Shared contact closing for the homepage and case studies. */
.upwork-contact { display: none; }
html[data-source="upwork"] [data-direct-only] { display: none !important; }
html[data-source="upwork"] .upwork-contact { display: grid; }
.case-contact { display: grid; }
  :is(.upwork-contact, .case-contact) {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 38px; padding: clamp(28px, 5vw, 54px);
    border: 1px solid var(--line-strong); border-radius: var(--r-shell);
    background: var(--surface); position: relative; overflow: hidden;
  }
  :is(.upwork-contact, .case-contact)::before {
    content: ""; position: absolute; width: 520px; height: 520px;
    right: -220px; top: -250px; border-radius: 50%;
    background: radial-gradient(circle, var(--glow), transparent 70%); pointer-events: none;
  }
  :is(.upwork-contact, .case-contact) > * { position: relative; }
  :is(.upwork-contact, .case-contact) h2 { margin-top: 0; max-width: 18ch; }
  @media (min-width: 1024px) {
    :is(.upwork-contact, .case-contact) h2 { max-width: none; }
  }
  :is(.upwork-contact, .case-contact) .section-lede { margin-top: 18px; }
  .upwork-contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

#main .case-contact h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.025em; text-align: left; }
#main .case-contact .section-lede { color: color-mix(in oklch, var(--text) 75%, var(--muted)); font-size: var(--fs-card-copy); line-height: 1.6; }
.case-contact:first-child { margin-top: 0; }
.case-contact + .next { margin-top: 38px; }

/* Shared colour accent for case-study main headings. */
h1 .case-title-accent, h1.case-title-accented b { color: var(--accent); font-weight: inherit; }