@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --bg: #faf7ef;
  --bg-soft: #eee6dc;
  --black: #0a0a0a;
  --muted: #4b4b4b;
  --muted-2: #8a8a8a;
  --white: #ffffff;
  --border: rgba(10, 10, 10, .13);
  --container: 1280px;
  --space-section-desktop: 72px;
  --space-section-mobile: 56px;
  --space-section-compact-desktop: 56px;
  --space-section-compact-mobile: 44px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--black);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img, picture { display: block; max-width: 100%; }
/* Image download deterrence: blocks casual drag/selection/long-press save UI. */
img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
picture {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
picture { width: 100%; }
picture > img { width: 100%; height: auto; }
:focus-visible { outline: 2px solid #58595b; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 9999; left: 12px; top: -80px; background: #fff; color: #000; padding: 10px 14px; border-radius: 999px; }
.skip-link:focus { top: 12px; }
.container { margin-inline: auto; }
section[id] { scroll-margin-top: 88px; }
.eyebrow { margin: 0; font-size: 12px; line-height: 1.35; font-weight: 700; letter-spacing: .06em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.04em; }
h2 { font-size: 40px; line-height: 1.08; margin-bottom: 32px; font-weight: 800; }
h3 { line-height: 1.08; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 1000; height: 72px; transition: background .18s ease, border-color .18s ease; }
.site-header.scrolled { background: rgba(250,247,239,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.header-inner { height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; line-height: 1; }
.brand-logo { display: block; width: auto; height: 48px; max-width: none; }
.desktop-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.desktop-nav a { text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.desktop-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.language-switch { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.language-switch button, .site-footer button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.button { min-height: 48px; border-radius: 999px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; line-height: 1; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; transition: transform .18s ease-out, background .18s ease-out, color .18s ease-out; }
.button-primary { background: var(--black); color: var(--white); }
.button-primary:hover { background: #333; transform: translateY(-1px); }
.button-light { background: var(--bg-soft); color: var(--black); }
.button-light:hover { background: #fff; transform: translateY(-1px); }
.header-cta { min-height: 42px; padding-inline: 22px; font-size: 13px; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-toggle span { width: 20px; height: 1.5px; background: #000; display: block; }
.mobile-menu { display: none; }

/* Hero */
.hero-grid { align-items: center; }
.hero-title { line-height: 1; margin: 18px 0 24px; font-weight: 800; letter-spacing: -.045em; }
.hero-title-line { display: block; white-space: nowrap; }
.lead { max-width: 590px; font-size: 20px; line-height: 1.5; margin-bottom: 28px; color: #333; }
.hero-actions { display: flex; align-items: center; gap: 32px; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link span[aria-hidden="true"] { margin-left: 6px; }
.hero-microcopy { margin-top: 20px; display: flex; align-items: center; gap: 22px; color: #383838; font-size: 13px; }
.micro-divider { height: 18px; width: 1px; background: rgba(0,0,0,.5); }
.hero-media { min-width: 0; overflow: hidden; }
.hero-media picture, .hero-media img { width: 100%; height: auto; }

/* Need */
.need { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.need-grid { align-items: stretch; }
.need h2 { font-size: 32px; margin: 0; align-self: center; }
.need article { display: flex; gap: 15px; align-items: flex-start; justify-content: center; flex-direction: column; }
.need article h3 { font-size: 17px; margin: 0 0 6px; }
.need article p { font-size: 16px; line-height: 1.45; margin: 0; color: #333; }
.need-icon { display: none; }

/* Portfolio */
.portfolio-intro { align-items: end; }
.portfolio-intro > p:last-child { font-size: 17px; line-height: 1.55; margin-bottom: 0; }
.cases { display: flex; flex-direction: column; }
.case { align-items: center; }
.case-copy { align-self: center; }
.case-meta { display: flex; gap: 20px; margin-bottom: 18px; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .02em; }
.case h3 { margin: 0 0 18px; font-weight: 800; }
.case-title-trigger { display: inline; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.case-title-trigger:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.case-copy > p:not(.case-meta) { max-width: 400px; margin-bottom: 20px; font-size: 17px; line-height: 1.52; color: #333; }
.case-media { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; width: 100%; overflow: hidden; }
.case-media picture, .case-media img { width: 100%; height: auto; }
.case-media img { transition: opacity .18s ease-out; }
.case-media:hover img { opacity: .92; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { min-height: 28px; display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 999px; background: rgba(255,255,255,.28); font-size: 12px; line-height: 1; white-space: nowrap; }

/* Competencies */
.competencies { border-top: 1px solid var(--border); }
.section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.section-heading-title { min-width: 0; flex: 1; }
.offer-scope { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #555; }
.section-kicker { margin-bottom: 12px; }
.section-heading-row > p { margin: 12px 0 0; font-size: 14px; color: #555; }
.competency-grid article img { width: 100%; height: auto; }
.competency-gallery-trigger { cursor: pointer; }
.competency-grid article h3 { font-size: 19px; margin: 0 0 8px; }
.competency-grid article p { font-size: 16px; line-height: 1.5; margin: 0; }
.competency-legal { margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: #58595b; }

/* Process */
.process-list { list-style: none; padding: 0; margin: 0; position: relative; }
.process-list li { position: relative; }
.step { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.process-list h3 { font-size: 18px; margin: 0 0 10px; }
.process-list p { font-size: 15px; line-height: 1.45; margin: 0; color: #333; }

/* Roles */
.roles h2 { font-size: 32px; margin-bottom: 28px; }
.roles-grid h3 { font-size: 18px; margin: 0 0 10px; }
.roles-grid ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.5; }
.roles-grid p { font-size: 16px; line-height: 1.5; margin: 0; }
.small-note { margin-top: 14px !important; font-size: 13px !important; }

/* About */
.about-left h2 { margin-bottom: 28px; }
.about-left picture, .about-left img { width: 100%; }
.about-copy h3 { line-height: 1.02; margin: 0 0 20px; }
.about-copy > p { max-width: 650px; font-size: 17px; line-height: 1.55; margin-bottom: 26px; }
.facts { display: flex; gap: 42px; align-items: flex-start; }
.facts > div { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.25; max-width: 175px; }
.fact-icon { font-size: 22px; line-height: 1; }

/* Terms */
.terms { border-top: 1px solid var(--border); }
.terms h2 { font-size: 17px; margin: 0; }
.terms ul { list-style: none; padding: 0; margin: 0; }
.terms li { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.terms li span { font-size: 20px; }
.trial-cta { min-height: 50px; font-size: 13px; }

/* Contact */
.contact { position: relative; overflow: hidden; background: #0d0d0d; color: #fff; }
.contact::before, .contact::after { content: ""; position: absolute; background: var(--bg-soft); border-radius: 50%; pointer-events: none; z-index: 0; }
.contact-grid { position: relative; z-index: 1; }
.contact-copy h2 { line-height: 1.06; margin: 0 0 20px; }
.contact-copy p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; }
.honeypot { display: none !important; }
.field { position: relative; margin-bottom: 10px; }
.field label { position: absolute; left: 11px; top: 5px; z-index: 1; font-size: 10px; color: rgba(255,255,255,.7); pointer-events: none; }
.field input, .field textarea { width: 100%; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 2px; padding: 18px 10px 5px; min-height: 48px; outline: none; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border: 2px solid #fff; box-shadow: 0 0 0 2px #d1cabd; }
.field [aria-invalid="true"] { border-width: 2px; border-color: #fff; }
.field-error { margin: 5px 0 2px; font-size: 11px; font-weight: 600; color: #fff; }
.consent { display: flex; gap: 9px; align-items: flex-start; font-size: 11px; line-height: 1.3; margin: 12px 0; }
.consent input { width: 16px; height: 16px; margin-top: 1px; accent-color: #fff; }
.form-general-error { margin: 0 0 8px; font-size: 12px; font-weight: 600; }
.submit-button { width: 100%; min-height: 42px; border-radius: 2px; }
.safe-link-note { margin: 9px 0 0; font-size: 11px; color: rgba(255,255,255,.7); line-height: 1.35; }
.form-success { display: flex; gap: 13px; align-items: center; min-height: 58px; background: var(--bg-soft); color: #111; padding: 9px 12px; border-radius: 5px; }
.form-success strong { font-size: 13px; }
.form-success p { margin: 2px 0 0; font-size: 11px; }
.success-icon { width: 28px; height: 28px; border-radius: 50%; background: #333; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.contact-details { font-style: normal; font-size: 14px; }
.contact-details a { text-decoration: none; }
.site-footer { border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 11px; }
.site-footer a, .site-footer button { color: rgba(255,255,255,.78); text-decoration: none; font-size: inherit; }
.site-footer p { font-size: 10px; line-height: 1.4; margin: 0; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2200; background: rgba(0,0,0,.78); display: none; }
.lightbox.is-open { display: grid; }
.lightbox-shell { background: var(--bg); color: #000; position: relative; }
.lightbox-topbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.lightbox-counter { font-weight: 700; font-size: 14px; }
.lightbox-close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 34px; line-height: 1; cursor: pointer; }
.lightbox-gallery { position: relative; min-width: 0; }
.lightbox-image { width: 100%; height: auto; max-width: 100%; max-height: 78dvh; object-fit: contain; object-position: center; background: #111; }
.lightbox-nav { position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(250,247,239,.88); font-size: 32px; cursor: pointer; }
.lightbox-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin-top: 10px; }
.lightbox-thumbs button { border: 1px solid transparent; padding: 0; background: transparent; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; opacity: .65; }
.lightbox-thumbs button[aria-current="true"] { border-color: #000; opacity: 1; }
.lightbox-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-brand { font-size: 12px; font-weight: 700; letter-spacing: .03em; margin-bottom: 8px; }
.lightbox-copy h2 { line-height: 1.02; margin-bottom: 16px; }
.lightbox-description { font-size: 16px; line-height: 1.45; color: #333; }
.lightbox-responsibility { margin: 18px 0; font-size: 14px; line-height: 1.5; font-weight: 650; color: #111; }
.lightbox-caption { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: #58595b; }

/* =========================
   DESKTOP >= 1200
   ========================= */
@media (min-width: 1200px) {
  .container, .header-inner { width: min(var(--container), calc(100% - 96px)); }
  .hero { padding: 52px 0 68px; }
  .hero-grid { display: grid; grid-template-columns: minmax(540px, .95fr) minmax(0, 1.05fr); gap: 48px; }
  .hero-title { font-size: clamp(44px, 3.6vw, 50px); }
  .hero-media { border-radius: 0; }

  .need { padding: 48px 0; }
  .need-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .need h2 { padding-right: 48px; }
  .need article { padding: 8px 34px; border-left: 1px solid rgba(0,0,0,.22); }

  .portfolio { padding: var(--space-section-desktop) 0 80px; }
  .portfolio-intro { display: grid; grid-template-columns: 1fr 3.8fr; gap: 56px; margin-bottom: 56px; }
  .cases { gap: 68px; }
  .case { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.35fr); gap: 52px; }
  .case:nth-child(even) { grid-template-columns: minmax(0, 2.35fr) minmax(280px, 1fr); }
  .case.case--reverse .case-copy { grid-column: 2; grid-row: 1; }
  .case.case--reverse .case-media { grid-column: 1; grid-row: 1; }
  .case h3 { font-size: 40px; }

  .competencies { padding: 50px 0; }
  .section-heading-row h2 { margin: 0; }
  .offer-scope { margin: 12px 0 9px; }
  .competency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
  .competency-grid article img { margin-bottom: 18px; }

  .process { padding: 44px 0; }
  .process h2 { margin-bottom: 48px; }
  .process-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
  .process-list::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 1px; background: rgba(0,0,0,.28); }
  .process-list li { padding-right: 30px; }
  .step { margin-bottom: 20px; }

  .roles { padding: 44px 0; }
  .roles-grid { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 0; border-top: 1px solid var(--border); padding-top: 30px; }
  .roles-grid article { padding: 0 34px 0 0; }
  .roles-grid article + article { border-left: 1px solid rgba(0,0,0,.22); padding-left: 34px; }

  .about { padding: 50px 0; }
  .about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: end; }
  .about-left img { border-radius: 64px 64px 64px 10px; }
  .about-copy h3 { font-size: 38px; }

  .terms { padding: 34px 0; }
  .terms-grid { display: grid; grid-template-columns: .8fr 2.2fr 1.25fr; gap: 42px; align-items: center; }
  .terms ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .terms li { font-size: 13px; }
  .terms-grid > * { min-width: 0; }
  .trial-cta { width: 100%; white-space: normal; text-align: center; padding-inline: 16px; }

  .contact { padding: 56px 0 28px; }
  .contact::before { width: 190px; height: 190px; left: -112px; bottom: -106px; }
  .contact::after { width: 190px; height: 190px; right: -108px; top: -108px; }
  .contact-grid { display: grid; grid-template-columns: 1.1fr 1.15fr .75fr; grid-template-areas: "copy form details" "footer footer footer"; column-gap: 50px; row-gap: 40px; }
  .contact-copy { grid-area: copy; }
  .contact-copy h2 { font-size: 36px; }
  .contact-form { grid-area: form; }
  .form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact-details { grid-area: details; align-self: center; display: flex; flex-direction: column; gap: 16px; }
  .site-footer { grid-area: footer; padding-top: 20px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
  .site-footer p { text-align: right; }

  .lightbox { padding: 32px; place-items: center; }
  .lightbox-shell { width: min(1180px, 100%); max-height: calc(100dvh - 64px); overflow: auto; }
  .lightbox-topbar { min-height: 58px; padding: 0 20px; }
  .lightbox-grid { display: grid; grid-template-columns: 1.6fr .8fr; }
  .lightbox-gallery { padding: 20px; }
  .lightbox-nav { top: 44%; }
  .lightbox-prev { left: 34px; }
  .lightbox-next { right: 34px; }
  .lightbox-copy { padding: 34px 32px 32px 10px; }
  .lightbox-copy h2 { font-size: 38px; }
}

/* =========================
   MOBILE / NARROW <= 1199
   ========================= */
@media (max-width: 1199px) {
  html { scroll-padding-top: 76px; }
  body { font-size: 16px; line-height: 1.56; }
  section[id] { scroll-margin-top: 76px; }
  .container, .header-inner { width: min(calc(100% - 64px), 1040px); margin-inline: auto; }

  .site-header { height: 64px; background: rgba(250,247,239,.98); }
  .header-inner { gap: 8px; }
  .brand-logo { height: 38px; }
  .desktop-nav, .desktop-language { display: none; }
  .header-actions { gap: 8px; }
  .header-cta { min-height: 44px; padding-inline: 18px; font-size: 12px; }
  .menu-toggle { display: flex; }
  .mobile-menu { position: fixed; z-index: 2100; inset: 0; background: #050505; color: #fff; padding: 0 20px 24px; flex-direction: column; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .mobile-menu.is-open { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mobile-menu-top { height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
  .brand-on-dark { color: #fff; }
  .brand-on-dark .brand-logo { filter: invert(1); }
  .menu-close { width: 44px; height: 44px; background: transparent; color: #fff; border: 0; font-size: 34px; line-height: 1; }
  .mobile-menu nav { display: flex; flex-direction: column; padding-top: 8px; }
  .mobile-menu nav a { min-height: 56px; display: flex; align-items: center; text-decoration: none; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.13); }
  .mobile-menu-bottom { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
  .language-on-dark { margin-bottom: 20px; font-size: 14px; }
  .language-on-dark button { color: #fff; }
  .mobile-menu-bottom .button { width: 100%; min-height: 48px; }

  h2 { font-size: 30px; line-height: 1.1; }

  .hero { padding: 32px 0 48px; }
  .hero-grid { display: flex; flex-direction: column; gap: 32px; }
  .hero-copy, .hero-media { width: 100%; min-width: 0; }
  .hero-title { font-size: clamp(36px, 4.5vw, 44px); line-height: 1.03; margin: 14px 0 18px; }
  .lead { max-width: none; font-size: 16px; line-height: 1.55; margin-bottom: 22px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-actions .button { min-height: 48px; padding-inline: 22px; }
  .hero-microcopy { margin-top: 14px; display: block; font-size: 13px; line-height: 1.65; }
  .hero-microcopy span { display: block; }
  .micro-divider { display: none !important; }
  .hero-microcopy span:last-child::before { content: "│"; margin-right: 10px; }
  .hero-media { border-radius: 0; }

  .need { border-top: 0; padding: 0 0 48px; }
  .need-grid { display: block; }
  .need h2 { font-size: 28px; padding: 0; margin: 0 0 20px; }
  .need article, .need article:first-of-type { border-left: 0; border-top: 1px solid var(--border); min-height: 0; padding: 20px 0; display: flex; gap: 16px; flex-direction: row; justify-content: flex-start; }
  .need-icon { display: block; flex: 0 0 auto; width: 18px; height: 18px; border: 1.4px solid #000; border-radius: 50%; margin-top: 3px; position: relative; }
  .need article:nth-of-type(2) .need-icon { border-left-color: transparent; }
  .need article:nth-of-type(3) .need-icon { border-top-color: transparent; border-bottom-color: transparent; }
  .need article h3 { font-size: 17px; margin-bottom: 5px; }
  .need article p { font-size: 16px; line-height: 1.5; }

  .portfolio { padding: 54px 0 64px; }
  .portfolio-intro { display: block; width: 100%; margin-bottom: 42px; }
  .portfolio-intro .eyebrow { margin-bottom: 14px; }
  .portfolio-intro > p:last-child { font-size: 16px; line-height: 1.55; }
  .cases { width: 100%; gap: 54px; }
  .case, .case:nth-child(even) { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 0; }
  .case .case-copy, .case:nth-child(even) .case-copy { order: 1; width: 100%; max-width: none; padding: 0 0 22px; }
  .case .case-media, .case:nth-child(even) .case-media { order: 2; width: 100%; min-width: 0; }
  .case-meta { margin-bottom: 12px; gap: 16px; }
  .case h3 { font-size: 29px; line-height: 1.04; margin-bottom: 14px; }
  .case-copy > p:not(.case-meta) { max-width: none; font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
  .case-media { border-radius: 0; }

  .competencies { padding: 54px 0; }
  .section-heading-row { display: block; width: 100%; }
  .section-heading-row h2 { margin: 0; }
  .offer-scope { margin: 12px 0 30px; font-size: 14px; line-height: 1.5; }
  .section-heading-row > p { display: none; }
  .competency-grid { display: flex; flex-direction: column; width: 100%; gap: 0; border-top: 1px solid var(--border); }
  .competency-grid article { display: grid; grid-template-columns: clamp(104px, 22vw, 180px) minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: start; width: 100%; padding: 20px 0; border-bottom: 1px solid var(--border); }
  .competency-grid article picture { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .competency-grid article h3, .competency-grid article p { grid-column: 2; min-width: 0; }
  .competency-grid article h3 { margin: 0; font-size: 19px; line-height: 1.15; }
  .competency-grid article p { font-size: 16px; line-height: 1.45; }
  .competency-legal { grid-column: 2 !important; margin-top: 2px !important; font-size: 13px !important; line-height: 1.42 !important; }

  .process { padding: 54px 0; }
  .process h2 { margin-bottom: 30px; }
  .process-list { display: flex; flex-direction: column; gap: 0; }
  .process-list::before { content: ""; position: absolute; left: 11.5px; top: 12px; bottom: 12px; width: 1px; background: rgba(0,0,0,.25); }
  .process-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 28px; padding: 0 0 32px; width: 100%; }
  .process-list li:last-child { padding-bottom: 0; }
  .step { width: 24px; height: 24px; margin: 0; font-size: 9px; }
  .process-list h3 { font-size: 18px; margin-bottom: 6px; line-height: 1.15; }
  .process-list p { font-size: 16px; line-height: 1.5; }

  .roles { padding: 54px 0; border-top: 1px solid var(--border); }
  .roles h2 { font-size: 30px; margin-bottom: 32px; }
  .roles-grid { display: flex; flex-direction: column; width: 100%; gap: 28px; border-top: 0; padding-top: 0; }
  .roles-grid article, .roles-grid article + article, .roles-grid .collaboration-models { width: 100%; border: 0; padding: 0; margin: 0; }
  .roles-grid h3 { font-size: 20px; margin-bottom: 10px; }

  .about { padding: 54px 0; border-top: 1px solid var(--border); }
  .about-grid { display: flex; flex-direction: column; gap: 0; }
  .about-left { display: contents; }
  .about-left picture { order: 1; width: 100%; margin-bottom: 28px; }
  .about-left picture img { border-radius: 42px 42px 42px 8px; }
  .about-left h2 { order: 2; font-size: 30px; margin: 0 0 20px; }
  .about-copy { order: 3; }
  .about-copy h3 { font-size: 28px; line-height: 1.04; margin-bottom: 16px; }
  .about-copy > p { font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
  .facts { display: flex; flex-direction: column; gap: 18px; }
  .facts > div { max-width: none; font-size: 14px; line-height: 1.3; }
  .fact-icon { font-size: 20px; }

  .terms { padding: 42px 0; }
  .terms-grid { display: block; }
  .terms h2 { font-size: 18px; margin: 0 0 20px; }
  .terms ul { display: block; }
  .terms li { min-height: 48px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 16px; }
  .terms li:last-child { border-bottom: 1px solid var(--border); }
  .trial-cta { margin-top: 24px; width: 100%; min-height: 50px; font-size: 14px; white-space: normal; }

  .contact { padding: 48px 0 24px; }
  .contact::before, .contact::after { display: none; }
  .contact-grid { display: block; width: min(calc(100% - 40px), 820px); }
  .contact-copy h2 { font-size: 30px; line-height: 1.08; margin-bottom: 16px; }
  .contact-copy p { font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
  .form-row.two-col { display: block; }
  .field { margin-bottom: 12px; }
  .field input, .field textarea { min-height: 48px; padding-top: 18px; font-size: 16px; }
  .field textarea { min-height: 120px; }
  .field label { font-size: 11px; top: 4px; }
  .consent { font-size: 12px; margin: 14px 0; }
  .submit-button { min-height: 48px; font-size: 14px; }
  .safe-link-note { font-size: 12px; margin-top: 10px; }
  .contact-details { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
  .contact-details > * { min-height: 44px; display: flex; align-items: center; }
  .site-footer { margin-top: 28px; padding-top: 20px; display: block; text-align: center; }
  .footer-links { justify-content: center; font-size: 11px; gap: 6px 9px; }
  .site-footer p { margin-top: 14px; font-size: 10px; line-height: 1.45; text-align: center; }

  .lightbox { padding: 0; background: #050505; color: #fff; place-items: stretch; }
  .lightbox.is-open { display: block; }
  .lightbox-shell { width: 100%; max-height: none; height: 100dvh; overflow-y: auto; background: #050505; color: #fff; }
  .lightbox-topbar { min-height: 64px; border-bottom: 0; padding: 0 16px; }
  .lightbox-counter { font-size: 15px; }
  .lightbox-close { color: #fff; font-size: 36px; }
  .lightbox-grid { display: block; }
  .lightbox-gallery { padding: 0 14px; }
  .lightbox-image { max-height: 72dvh; border-radius: 6px; }
  .lightbox-nav { top: 40%; width: 44px; height: 44px; background: rgba(238,230,220,.86); color: #000; font-size: 26px; }
  .lightbox-prev { left: 22px; }
  .lightbox-next { right: 22px; }
  .lightbox-thumbs { gap: 5px; }
  .lightbox-thumbs button[aria-current="true"] { border-color: #fff; }
  .lightbox-copy { padding: 18px 14px 28px; }
  .lightbox-brand { font-size: 12px; margin-bottom: 5px; }
  .lightbox-copy h2 { font-size: 28px; margin-bottom: 10px; color: #fff; }
  .lightbox-description { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.78); margin-bottom: 12px; }
  .lightbox-responsibility { color: rgba(255,255,255,.92); font-size: 14px; margin: 16px 0; }
  .lightbox-caption { color: rgba(255,255,255,.68); font-size: 13px; margin-top: 10px; }
  .lightbox-tags span { color: #fff; border-color: rgba(255,255,255,.25); background: transparent; }
}

/* Keep compact 20 px side padding on phone widths. */
@media (max-width: 767px) {
  .container, .header-inner { width: min(calc(100% - 40px), 1040px); }
  .hero-title { font-size: clamp(30px, 8vw, 36px); }
}

/* =========================
   OPTIONAL SMALL MOBILE <= 390
   ========================= */
@media (max-width: 390px) {
  .hero-title { font-size: clamp(30px, 8vw, 36px); }
  .header-cta { min-width: 105px; }
  .competency-grid article { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}