:root {
  --navy: #102238;
  --navy-soft: #18314c;
  --ink: #1f2b32;
  --muted: #69747a;
  --warm: #f4f0e8;
  --paper: #fbfaf6;
  --gold: #a9874e;
  --line: rgba(31,43,50,.14);
  --line-dark: rgba(255,255,255,.16);
  --serif: "Noto Serif JP", serif;
  --sans: "Noto Sans JP", sans-serif;
  --side-pad: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.68; letter-spacing: .01em; font-size: 16px; word-break: normal; overflow-wrap: break-word; line-break: strict; }
a { color: inherit; text-decoration: none; }

/* ---------- Header ---------- */
.site-header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--side-pad); }
.brand { font-weight: 700; letter-spacing: .16em; font-size: 1rem; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0; font-size: .78rem; letter-spacing: .03em; font-family: var(--sans); }
.nav a:not(.nav-contact) { display: none; }
.nav-contact { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.nav a { opacity: .85; transition: opacity .2s ease; }
.nav a:hover { opacity: 1; }

/* ---------- Layout basics ---------- */
.section-pad { padding: 34px var(--side-pad); }
.section-pad-compact { padding: 24px var(--side-pad); }
.narrow { width: min(1160px, 100%); margin: 0 auto; }
.eyebrow, .section-number { font-family: var(--sans); font-size: .68rem; letter-spacing: .14em; font-weight: 600; color: var(--gold); margin: 0 0 14px; }
.section-number.light { color: #c6aa78; }
h1,h2,h3,p { margin-top: 0; }

/* Prevent orphaned line fragments (e.g. a lone "る。") in multi-line headings */
h1, h2 { text-wrap: balance; }

/* Typographic hierarchy: Hero (max) > Statement (~65-75%) > Section h2 (~40-50%) */
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 5.2vw, 2.7rem); line-height: 1.42; letter-spacing: 0; }
h2.statement { font-size: clamp(1.7rem, 6.5vw, 4rem); line-height: 1.3; }
h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(1rem, 3vw, 1.2rem); }

.body-copy { font-family: var(--sans); font-size: clamp(.97rem, 2vw, 1.05rem); line-height: 1.75; }
.body-copy p { margin-bottom: .6em; }
.emphasis { font-family: var(--serif); font-size: 1.1em; }
.note { color: var(--muted); font-size: .78rem; }
.warm-section { background: var(--warm); }
.navy-section { background: var(--navy); color: #f7f3ea; }

/* Section group label (used to group related list items without boxes) */
.group-label { font-size: .68rem; letter-spacing: .14em; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.group-label-spaced { margin-top: 28px; }

/* ---------- Photo frames ---------- */
.photo-frame { margin: 0; }
.photo-frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; display: block; }
.photo-frame figcaption { margin-top: 8px; }
.photo-frame figcaption p { margin: 0; font-family: var(--serif); font-size: .92rem; }
.photo-credit { font-size: .64rem; color: var(--muted); letter-spacing: .03em; }
.photo-caption { display: flex; flex-direction: column; gap: 2px; }
.photo-caption span:first-child { font-family: var(--serif); font-size: .84rem; color: var(--ink); }

.local-image { margin-top: 16px; }
.project-image { margin: 8px 0; }

/* Mobile: control photo HEIGHT directly so a photo is never larger than ~1 viewport (desktop grid untouched) */
@media (max-width: 767px) {
  .photo-frame img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 240px;
    aspect-ratio: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  .local-image, .project-card.featured .project-image { text-align: center; }
}

/* ---------- Hero ---------- */
.hero { display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; padding-top: 88px; padding-bottom: 34px; }
.hero-inner { width: 100%; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 10.5vw, 5.6rem); line-height: 1.22; letter-spacing: -.01em; margin-bottom: 16px; }
.hero h1 span { color: var(--navy); }
.hero-copy { max-width: 620px; color: #4c585e; font-size: clamp(1rem, 2.3vw, 1.08rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 20px; }
.hero-note { font-family: var(--serif); font-size: .9rem; color: var(--muted); margin-top: 32px; }
.text-link { display: inline-flex; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--ink); font-size: .85rem; font-weight: 600; min-height: 40px; }
.text-link span { color: var(--gold); font-size: .92em; }
.text-link.muted { color: var(--muted); border-color: rgba(105,116,122,.4); }

/* ---------- 02 私たちが向き合うこと ---------- */
.human-intro h2 { max-width: 760px; margin-bottom: 18px; }
.intro-copy { max-width: 640px; }
.intro-copy p { margin-bottom: .5em; }
.human-intro .emphasis { margin-bottom: 0; }

/* ---------- 03 YOHAVAの考え方 ---------- */
.philosophy { padding-top: 34px; padding-bottom: 34px; }
.small-heading { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 16px; }
.philosophy .statement { margin-bottom: 26px; }
.philosophy .statement span { color: var(--gold); }
.philosophy-copy { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); max-width: 640px; }
.philosophy-copy p { margin-bottom: .5em; }

/* ---------- 04 私たちの進め方 ---------- */
.model h2 { max-width: 820px; margin-bottom: 26px; }
.journey { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-dark); }
.journey-step {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid var(--line-dark);
}
.journey-step:nth-child(odd) { border-right: 1px solid var(--line-dark); padding-right: 10px; }
.journey-step:nth-child(even) { padding-left: 10px; }
.journey-step--last { grid-column: 1 / -1; border-right: none; padding-left: 0; padding-top: 16px; }
.step-no { display: block; color: #b9a27b; font-size: .66rem; letter-spacing: .05em; margin-bottom: 4px; }
.step-title { font-family: var(--sans); font-weight: 600; font-size: clamp(.95rem, 2.8vw, 1.1rem); margin: 0 0 2px; }
.step-desc { color: #cbd1d5; font-size: .76rem; margin: 0; line-height: 1.5; }

/* ---------- 05 地域との接点 ---------- */
.local h2 { margin-bottom: 16px; }
.local-copy p { margin-bottom: .55em; }
.local-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; margin: 12px 0 10px; }
.local-facts > div { display: flex; flex-direction: column; gap: 2px; }
.fact-label { font-size: .68rem; letter-spacing: .08em; color: var(--muted); }
.fact-value { font-family: var(--serif); font-size: .95rem; }

/* ---------- Reusable: compact word list (Problem section) ---------- */
.shrink-list { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 14px 0; font-family: var(--serif); font-size: .95rem; color: var(--muted); }
.shrink-list li:not(:last-child)::after { content: "　／　"; color: var(--gold); }
.shrink-note { margin-top: 2px; }

/* ---------- Reusable: flow list — plain typography + thin arrow, no pill/border ---------- */
.flow-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0; }
.flow-item { font-size: .82rem; letter-spacing: .01em; }
.flow-arrow { color: var(--gold); font-size: .78rem; }
.flow-list-dark .flow-item { color: #f0ece3; }
.flow-list-dark .flow-arrow { color: #c6aa78; }
.flow-no { color: var(--gold); font-size: .68rem; margin-right: 5px; letter-spacing: .04em; }
.lead-copy.light { color: inherit; }
.contact-flow { margin-top: 18px; }

/* ---------- 06 地域の仕組み — brand illustration is the star, not a text diagram ---------- */
.loop h2 { margin-bottom: 12px; }
.loop-lead { max-width: 640px; margin: 0 0 24px; }

.loop-visual { margin: 0 auto; max-width: 960px; }
.loop-visual img { width: 100%; height: auto; display: block; border-radius: 2px; border: 1px solid var(--line); }
.loop-closing { margin: 14px 0 0; font-family: var(--serif); font-size: .92rem; color: var(--muted); text-align: center; }

/* ---------- 07 たとえば — relationship, not cards ---------- */
.example h2 { margin-bottom: 12px; }
.example-visual { max-width: 640px; margin: 0 auto; }
.example-visual img { width: 100%; height: auto; display: block; border-radius: 3px; }
.example-relation { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 22px 0 20px; }
.example-block { text-align: center; max-width: 380px; }
.example-connector { width: 1px; height: 20px; background: var(--gold); opacity: .55; }
.example-role { font-size: .68rem; letter-spacing: .08em; color: var(--gold); margin: 0 0 6px; }
.example-center .example-role { color: var(--navy); font-weight: 700; }
.example-quote { font-family: var(--serif); font-size: .92rem; margin: 0; line-height: 1.6; color: var(--ink); }
.example-bridge { text-align: center; margin: 6px 0 6px; }
.example-note { color: var(--muted); font-size: .82rem; margin-top: 18px; max-width: 680px; }
.example-flow-inline { display: block; margin-top: 6px; font-size: .92em; color: #8a939a; }

/* ---------- 08 サービス — editorial divider list, no card ---------- */
.services h2 { margin-bottom: 10px; }
.service-list { border-top: 1px solid var(--line); margin-top: 22px; }
.service-row { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.service-no { flex: 0 0 26px; color: var(--gold); font-family: var(--sans); font-weight: 600; font-size: .78rem; }
.service-row h3 { font-family: var(--sans); font-size: .96rem; color: var(--navy); margin: 0 0 4px; }
.service-row p { color: var(--muted); font-size: .78rem; margin: 0; line-height: 1.5; }

/* ---------- 09 取り組み ---------- */
.section-head-row { display: block; margin-bottom: 22px; }
.section-head-row h2 { margin-bottom: 10px; }
.section-head-row > p { color: var(--muted); font-size: .88rem; }

.project-card.featured {
  position: relative;
  padding: 0;
  margin-bottom: 12px;
}
.project-card.featured h3 { font-family: var(--sans); margin-top: 0; margin-bottom: 3px; font-size: clamp(1.05rem, 3.4vw, 1.4rem); color: var(--navy); }
.project-card.featured .proj-en-solo { font-size: .7rem; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
.project-card.featured > p:not(.proj-en-solo) { color: var(--ink); max-width: 480px; margin: 0; font-size: .9rem; }
.project-card.featured .card-arrow { position: absolute; right: 0; top: 0; color: var(--gold); }
.project-card.featured .status { color: var(--gold); font-size: .64rem; letter-spacing: .08em; }

.project-list { border-top: 1px solid var(--line); }
.project-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.proj-jp { font-family: var(--sans); font-weight: 600; font-size: .94rem; margin: 0 0 1px; color: var(--navy); }
.proj-en { font-size: .66rem; letter-spacing: .04em; color: var(--muted); margin: 0 0 3px; }
.proj-status { color: var(--gold); margin-left: 10px; letter-spacing: .02em; }
.proj-desc { font-size: .8rem; color: var(--muted); margin: 0; max-width: 460px; line-height: 1.55; }
.project-row .card-arrow { color: var(--gold); font-size: .9rem; flex-shrink: 0; }

/* ---------- 10 WORKS ---------- */
.works h2 { margin-bottom: 8px; }
.work-list { display: flex; flex-direction: column; gap: 26px; margin: 22px 0 24px; }
.work-card { display: flex; flex-direction: column; gap: 14px; }
.work-visual { margin: 0; position: relative; }
.work-demo-tag { position: absolute; top: 8px; right: 8px; font-size: .58rem; letter-spacing: .1em; color: var(--muted); background: rgba(251,250,246,.85); padding: 2px 6px; border-radius: 2px; }
.work-eyebrow { font-size: .64rem; letter-spacing: .1em; color: var(--muted); margin: 0 0 3px; }
.work-category { font-size: .64rem; letter-spacing: .1em; color: var(--gold); margin: 0 0 6px; }
.work-card h3 { font-family: var(--sans); font-size: 1rem; margin: 0 0 6px; color: var(--navy); }
.work-card p { color: var(--muted); font-size: .82rem; margin: 0 0 8px; max-width: 480px; }
.work-link { font-size: .72rem; min-height: auto; }
.works-all { cursor: default; }

/* Abstract UI skeletons (no real data, structure only) */
.skeleton { width: 100%; height: 100%; background: var(--warm); border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
.skeleton i { display: block; font-style: normal; }

.work-visual--wide { aspect-ratio: 16 / 10; }
.skeleton-dashboard { display: flex; gap: 8px; }
.skeleton-dashboard .sk-sidebar { width: 20%; background: rgba(16,34,56,.12); border-radius: 3px; }
.skeleton-dashboard .sk-main { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.skeleton-dashboard .sk-header { height: 12%; display: flex; align-items: center; gap: 5px; padding: 0 2px; }
.skeleton-dashboard .sk-header i { width: 6px; height: 6px; border-radius: 50%; background: rgba(169,135,78,.5); }
.skeleton-dashboard .sk-header i:nth-child(2) { background: rgba(16,34,56,.18); }
.skeleton-dashboard .sk-header i:nth-child(3) { background: rgba(16,34,56,.12); }
.skeleton-dashboard .sk-kpis { display: flex; gap: 6px; height: 20%; }
.skeleton-dashboard .sk-kpis span { flex: 1; display: block; background: rgba(169,135,78,.3); border-radius: 3px; }
.skeleton-dashboard .sk-chart { flex: 1; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(16,34,56,.22) 0 8%, transparent 8% 14%); background-position: bottom; background-size: 100% 100%; }
.skeleton-dashboard .sk-table { display: flex; flex-direction: column; gap: 5px; height: 22%; justify-content: center; }
.skeleton-dashboard .sk-table i { height: 6px; background: rgba(16,34,56,.13); border-radius: 2px; }
.skeleton-dashboard .sk-table i:nth-child(1) { width: 88%; }
.skeleton-dashboard .sk-table i:nth-child(2) { width: 68%; }
.skeleton-dashboard .sk-table i:nth-child(3) { width: 78%; }

.work-visual--split { aspect-ratio: 16 / 11; }
.skeleton-meeting { display: flex; gap: 10px; }
.skeleton-meeting .sk-wave { flex: 0 0 42%; display: flex; align-items: center; gap: 3px; }
.skeleton-meeting .sk-wave i { flex: 1; background: rgba(169,135,78,.4); border-radius: 2px; }
.skeleton-meeting .sk-wave i:nth-child(odd) { height: 35%; background: rgba(16,34,56,.22); }
.skeleton-meeting .sk-wave i:nth-child(even) { height: 68%; }
.skeleton-meeting .sk-wave i:nth-child(3n) { height: 90%; }
.skeleton-meeting .sk-transcript { flex: 1; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.skeleton-meeting .sk-label { font-size: .56rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 2px; }
.skeleton-meeting .sk-transcript i { height: 9px; border-radius: 2px; background: rgba(16,34,56,.12); width: 100%; }
.skeleton-meeting .sk-transcript i:nth-child(3) { width: 70%; }
.skeleton-meeting .sk-transcript i.hl { background: rgba(169,135,78,.4); }

.work-visual--mobile { aspect-ratio: 3 / 4; max-width: 220px; margin: 0 auto; }
.skeleton-phone { display: flex; align-items: center; justify-content: center; }
.skeleton-phone .sk-phone { width: 100%; height: 100%; border: 1.5px solid rgba(16,34,56,.18); border-radius: 16px; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.skeleton-phone .sk-notch { width: 30%; height: 5px; border-radius: 3px; background: rgba(16,34,56,.14); margin: 0 auto; }
.skeleton-phone .sk-tasks { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.skeleton-phone .sk-tasks i { height: 9px; border-radius: 2px; background: rgba(16,34,56,.14); }
.skeleton-phone .sk-tasks i:nth-child(2) { width: 80%; }
.skeleton-phone .sk-tasks i:nth-child(3) { width: 60%; }
.skeleton-phone .sk-progress { height: 8px; border-radius: 4px; background: rgba(16,34,56,.1); overflow: hidden; }
.skeleton-phone .sk-progress span { display: block; width: 55%; height: 100%; background: var(--gold); opacity: .8; }
.skeleton-phone .sk-growth { flex: 1; border-radius: 10px; background: rgba(169,135,78,.22); }

/* ---------- 11 つくる前に、確かめる ---------- */
.build .section-number { margin-bottom: 10px; }
.lead-copy { max-width: 600px; }
.lead-copy p { margin-bottom: .45em; }

/* ---------- 12 YOHAVAについて ---------- */
.story h2 { margin-bottom: 16px; }
.humanity { display: flex; flex-direction: column; gap: 18px; }
.profile-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.profile-photo {
  width: clamp(160px, 42vw, 220px);
  height: clamp(160px, 42vw, 220px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-bottom: 4px;
}
.profile-name { font-family: var(--serif); font-size: 1.05rem; margin-top: 4px; margin-bottom: 0; }
.profile-role { font-size: .7rem; letter-spacing: .08em; color: var(--muted); margin: 0; }
.profile-quote { font-family: var(--serif); font-size: .92rem; color: var(--ink); max-width: 320px; margin: 10px 0 0; line-height: 1.65; }
.story-copy { max-width: 600px; margin: 0 auto; }
.story-copy p { margin-bottom: .5em; }
.story .text-link { margin-top: 10px; }

.origin-block { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 480px; }
.origin-title { font-size: .68rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 6px; }
.origin-formula { font-family: var(--serif); font-size: .92rem; margin-bottom: 8px; }
.origin-copy { font-size: .82rem; color: var(--muted); line-height: 1.6; margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact { min-height: 34vh; display: flex; align-items: center; }
.contact-inner > p:not(.section-number):not(.placeholder-note) { color: #c9d0d4; font-size: .95rem; }
.contact-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; font-family: var(--serif); font-size: clamp(1.05rem, 3.6vw, 1.5rem); border-bottom: 1px solid #c6aa78; padding: 8px 0; min-height: 44px; }
.contact-link span { color: #c6aa78; font-size: .9em; }
.placeholder-note { margin-top: 10px; font-size: .64rem; color: #83909a; }

/* ---------- Footer ---------- */
.footer { display: flex; flex-direction: column; gap: 6px; padding: 22px var(--side-pad); background: #0b1929; color: #dce1e3; border-top: 1px solid rgba(255,255,255,.12); }
.footer > p { margin-bottom: 0; font-size: .75rem; color: #8e9aa2; }

/* ================= Breakpoints ================= */

@media (max-width: 374px) {
  :root { --side-pad: 18px; }
}

/* Mobile-only density pass (carried from v0.9/v0.10, extended for v0.12 sections) */
@media (max-width: 767px) {
  .section-pad { padding: 26px var(--side-pad); }
  .section-pad-compact { padding: 20px var(--side-pad); }
  .philosophy { padding-top: 30px; padding-bottom: 30px; }

  h2 { font-size: clamp(1.3rem, 5.4vw, 1.5rem); }
  h2.statement { font-size: clamp(1.5rem, 6.5vw, 1.7rem); }

  /* v0.13→v0.14 correction: re-derived from the actual cascade (see report) —
     at <768px, .hero's own padding-top:88px is overridden by the LATER,
     equal-specificity `.section-pad { padding: 26px ... }` mobile rule below
     (both are single-class selectors; source order decides the winner), so
     the real mobile padding-top in effect is 26px, not 88px. The previous
     30px margin-top was sized against the wrong (88px) assumption and left
     the logo→headline gap short of the 32–40px target. Re-tuned to 40px here,
     still touching only .hero h1 — Hero's effective top offset and the
     header/CTA positions remain unchanged. */
  .hero h1 { margin-top: 40px; }

  .body-copy { font-size: .84rem; line-height: 1.6; }
  .body-copy p { margin-bottom: .48em; }
  .lead-copy { font-size: .9rem; }
  .emphasis { font-size: 1.08em; }
  .note { font-size: .74rem; }

  .eyebrow, .section-number { font-size: .68rem; margin-bottom: 10px; }
  .proj-en, .project-card.featured .proj-en-solo, .project-card.featured .status, .proj-status { font-size: .7rem; }
  .step-no { font-size: .64rem; }

  .proj-jp { font-size: .88rem; }
  .proj-desc { font-size: .78rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .project-row { padding: 8px 0; gap: 10px; }
  .step-desc { font-size: .72rem; }
  .step-title { font-size: .9rem; }

  .photo-credit { font-size: .58rem; }
  .photo-frame figcaption p { font-size: .84rem; }
  .photo-caption span:first-child { font-size: .78rem; }

  .story-copy { font-size: .84rem; }
  .profile-quote { font-size: .86rem; margin-top: 8px; }
  .profile-name { font-size: 1rem; }
  .profile-role { font-size: .68rem; }
  .humanity { gap: 14px; }
  .story h2 { margin-bottom: 12px; }

  .origin-block { margin-top: 16px; padding-top: 12px; }
  .origin-copy { font-size: .78rem; }
  .origin-formula { font-size: .88rem; }

  .local-facts { padding: 8px 0; margin: 10px 0 8px; gap: 10px 20px; }
  .fact-label { font-size: .64rem; }
  .fact-value { font-size: .88rem; }

  .contact-inner > p:not(.section-number):not(.placeholder-note) { font-size: .86rem; }

  .shrink-list { font-size: .86rem; margin: 10px 0; }
  .flow-item { font-size: .76rem; }
  .flow-arrow { font-size: .72rem; }

  .loop-lead { margin-bottom: 16px; }
  .loop-closing { font-size: .86rem; margin-top: 12px; }

  .example-relation { margin: 18px 0 16px; gap: 3px; }
  .example-connector { height: 16px; }
  .example-quote { font-size: .84rem; }
  .example-note { font-size: .76rem; margin-top: 12px; }

  .service-list { margin-top: 18px; }
  .service-row { padding: 11px 0; gap: 12px; }
  .service-row h3 { font-size: .88rem; }
  .service-row p { font-size: .72rem; }

  .group-label { font-size: .64rem; }
  .group-label-spaced { margin-top: 20px; }

  .work-list { gap: 22px; margin: 18px 0 20px; }
  .work-card h3 { font-size: .95rem; }
  .work-card p { font-size: .78rem; }
  .work-visual--wide, .work-visual--split { aspect-ratio: 4 / 3; }
}

@media (min-width: 768px) {
  :root { --side-pad: 5vw; }
  .site-header { padding: 24px 4.5vw; }
  .nav { gap: 22px; }
  .nav a:not(.nav-contact) { display: inline; }
  .section-pad { padding: 76px 5vw; }
  .section-pad-compact { padding: 52px 5vw; }

  .hero { min-height: 88vh; padding-top: 126px; }

  .journey { grid-template-columns: repeat(5, 1fr); }
  .journey-step,
  .journey-step:nth-child(odd),
  .journey-step:nth-child(even) {
    grid-column: auto;
    border-right: 1px solid var(--line-dark);
    padding: 16px 14px;
  }
  .journey-step--last { grid-column: auto; border-right: none; padding: 16px 14px; }

  .section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 34px; }
  .section-head-row h2 { margin-bottom: 0; }
  .section-head-row > p { max-width: 300px; }

  .project-card.featured { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .project-card.featured .project-image { margin: 0; }
  .project-card.featured .card-top { grid-column: 1 / -1; }

  .project-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: none; column-gap: 32px; }
  .project-row { border-top: 1px solid var(--line); }

  .local .narrow { display: grid; grid-template-columns: 1.05fr .95fr; gap: 6vw; align-items: center; }
  .local-image { margin: 0; }

  .humanity { flex-direction: row; align-items: center; gap: 6vw; text-align: left; }
  .profile-block { flex: 0 0 240px; text-align: center; }
  .profile-quote { max-width: none; }
  .story-copy { margin: 0; }

  .example-relation { flex-direction: row; align-items: flex-start; justify-content: center; gap: 0; }
  .example-block { flex: 1; max-width: 280px; }
  .example-connector { width: 60px; height: 1px; margin-top: 10px; }
  .example-center { transform: translateY(-4px); }

  .service-list { column-count: 2; column-gap: 40px; }
  .service-row { break-inside: avoid; }

  .work-card { flex-direction: row; align-items: center; gap: 40px; }
  .work-card.reverse { flex-direction: row-reverse; }
  .work-visual, .work-body { flex: 1; }
}

@media (min-width: 1024px) {
  .hero { min-height: 92vh; }
  .hero h1 { font-size: clamp(3.4rem, 6.4vw, 6.8rem); }
  .profile-block { flex: 0 0 260px; }
}

@media (min-width: 1440px) {
  .section-pad { padding: 96px 5vw; }
  .section-pad-compact { padding: 64px 5vw; }
}

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