/* Generated from original HTML page styles. */
/* ===== homepage.html ===== */
:root { --ink:#0E1F33; --paper:#FBF8F2; --coral:#C77B5C; --warm:#F4ECDF; --line: rgba(14,31,51,0.12); }
* { box-sizing: border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family: var(--font-body); }
/* Top utility bar */
.util { display:flex; justify-content:space-between; align-items:center; padding: 10px 56px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(14,31,51,0.6); }
.util .center { display:flex; gap:18px; }
/* Header */
header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); height: 88px; display:flex; align-items:center; }
.h-inner { max-width: 1440px; margin: 0 auto; padding: 0 56px; display:flex; justify-content:space-between; align-items:center; width:100%; }
nav { display:flex; gap: 32px; }
nav a { font-size: 14px; color: var(--ink); text-decoration: none; font-weight: 500; }
.btn { background: var(--ink); color: var(--warm); padding: 10px 22px; border-radius: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }
/* Hero — split with embedded map */
.hero { display:grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 88px - 36px); }
.hero-text { padding: 96px 56px; display:flex; flex-direction:column; justify-content:center; background: var(--warm); position:relative; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 32px; display:inline-flex; align-items:center; gap: 12px; }
.eyebrow::before { content:''; width:32px; height:1px; background:var(--coral); }
.hero h1 { font-family: var(--font-display); font-size: clamp(56px, 5.2vw, 88px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 32px; color: var(--ink); }
.hero h1 em { font-style: italic; color: var(--coral); font-weight: 400; }
.hero p.lede { font-size: 19px; line-height: 1.6; color: rgba(14,31,51,0.78); max-width: 540px; margin: 0 0 40px; }
.hero-ctas { display:flex; gap: 16px; align-items:center; }
.ghost { color: var(--ink); font-size: 14px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--coral); text-decoration: none; }
/* Hero right — cartographic */
.hero-map { background: var(--ink); position:relative; overflow:hidden; }
.hero-map svg.bg { position:absolute; inset:0; width:100%; height:100%; }
.hero-map .pin { position:absolute; top: 46%; left: 38%; }
.hero-map .pin .ring { width: 28px; height: 28px; border-radius:999px; border: 1.5px solid var(--coral); display:flex; align-items:center; justify-content:center; }
.hero-map .pin .dot { width: 8px; height: 8px; border-radius:999px; background: var(--coral); }
.hero-map .pin .label { position:absolute; left: 36px; top: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(244,236,223,0.7); white-space: nowrap; }
.hero-map .pin .label strong { display:block; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: 0; margin-bottom: 4px; color: var(--coral); }
.map-meta { position:absolute; bottom: 28px; left: 32px; right: 32px; display:flex; justify-content:space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(244,236,223,0.55); }
/* Expertises section */
.exp { padding: 120px 56px; max-width: 1440px; margin: 0 auto; }
.exp-head { display:grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 80px; align-items: end; }
.exp-head h2 { font-family: var(--font-display); font-size: 64px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 16px 0 0; }
.exp-head h2 em { color: var(--coral); font-style: italic; }
.exp-head p { font-size: 17px; line-height: 1.7; color: rgba(14,31,51,0.7); margin: 0; }
.pillars { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillar { background:#fff; padding: 56px 40px; position:relative; }
.pillar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--coral); margin-bottom: 32px; font-weight: 600; }
.pillar-num::after { content:''; display:block; width: 32px; height:1px; background: var(--coral); margin-top: 12px; }
.pillar h3 { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 20px; line-height: 1.2; min-height: calc(2 * 1.2em); }
.pillar h3 em { font-style: italic; color: var(--coral); font-weight: 400; }
.pillar p { font-size: 15px; line-height: 1.7; color: rgba(14,31,51,0.75); margin: 0 0 24px; }
.pillar ul { list-style:none; padding:0; margin: 0 0 28px; display:flex; flex-direction:column; gap: 8px; }
.pillar li { font-size: 14px; color: rgba(14,31,51,0.7); padding-left: 20px; position:relative; }
.pillar li::before { content:'—'; position:absolute; left: 0; color: var(--coral); }
.pillar a.more { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration:none; border-bottom:1px solid var(--coral); padding-bottom:2px; }
/* Cartographic interlude — Mayotte map full width */
.interlude { background: var(--ink); color: var(--warm); padding: 96px 56px; position:relative; overflow:hidden; }
.interlude-grid { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items:center; }
.interlude h2 { font-family: var(--font-display); font-size: 56px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin: 16px 0 24px; }
.interlude h2 em { color: var(--coral); font-style: italic; }
.interlude p { font-size: 16px; line-height: 1.7; color: rgba(244,236,223,0.75); margin: 0 0 32px; max-width: 460px; }
.interlude .stat-row { display:flex; gap: 48px; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(244,236,223,0.15); }
.stat .num { font-family: var(--font-display); font-size: 56px; font-weight: 400; letter-spacing: -0.02em; color: var(--coral); line-height: 1; }
.stat .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(244,236,223,0.6); margin-top: 12px; text-transform: uppercase; }
.map-large { aspect-ratio: 4/3; position: relative; }
.map-large svg { width: 100%; height: 100%; }
/* Démarche — small carto cards */
.approach { padding: 120px 56px; max-width: 1440px; margin: 0 auto; }
.approach h2 { font-family: var(--font-display); font-size: 56px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; margin: 16px 0 64px; max-width: 900px; }
.approach h2 em { color: var(--coral); font-style: italic; }
.steps { display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { padding: 32px 24px 32px 0; border-top: 1px solid var(--ink); }
.step .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--coral); margin-bottom: 16px; }
.step h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.2; margin: 0 0 12px; }
.step p { font-size: 14px; line-height: 1.65; color: rgba(14,31,51,0.7); margin: 0; }
/* Quote */
.quote-block { display:grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.quote-img { background: var(--ink); position:relative; overflow:hidden; }
.quote-img svg { width:100%; height:100%; position:absolute; inset:0; }
.quote-text { background: var(--warm); padding: 96px 64px; display:flex; flex-direction:column; justify-content:center; }
.quote-text blockquote { font-family: var(--font-display); font-size: 36px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 32px; }
.quote-text cite { font-style:normal; font-size: 14px; color: rgba(14,31,51,0.65); }
.quote-text cite strong { display:block; color: var(--ink); font-weight:600; margin-bottom: 4px; font-size: 15px; }
/* CTA */
.cta { background: var(--warm); padding: 120px 56px; text-align:center; position:relative; overflow:hidden; }
.cta-bg { position:absolute; inset:0; opacity:0.4; }
.cta h2 { font-family: var(--font-display); font-size: 72px; font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 24px; max-width: 1100px; margin-left:auto; margin-right:auto; position:relative; }
.cta h2 em { color: var(--coral); font-style: italic; }
.cta p { font-size: 18px; color: rgba(14,31,51,0.7); margin: 0 0 40px; position:relative; }
.cta-btn { background: var(--ink); color: var(--warm); padding: 18px 40px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-decoration:none; display:inline-block; position:relative; }
/* Footer */
footer { background: var(--ink); color: var(--warm); padding: 80px 56px 32px; }
.f-grid { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 64px; }
.f-grid h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin: 0 0 20px; font-weight: 600; }
.f-grid ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 12px; }
.f-grid li { font-size: 14px; color: rgba(244,236,223,0.8); }
.f-bottom { max-width: 1440px; margin: 0 auto; padding-top: 32px; border-top: 1px solid rgba(244,236,223,0.15); display:flex; justify-content:space-between; font-size: 12px; color: rgba(244,236,223,0.5); }
nav a.disabled { color: rgba(14,31,51,0.35); cursor: not-allowed; }
.f-grid li.muted { color: rgba(244,236,223,0.35); }
/* ===== expertises.html ===== */
:root { --ink:#0E1F33; --paper:#FBF8F2; --coral:#C77B5C; --warm:#F4ECDF; --line: rgba(14,31,51,0.12); }
* { box-sizing: border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family: var(--font-body); }
/* Top utility bar */
.util { display:flex; justify-content:space-between; align-items:center; padding: 10px 56px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(14,31,51,0.6); }
.util .center { display:flex; gap:18px; }
/* Header */
header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); height: 88px; display:flex; align-items:center; }
.h-inner { max-width: 1440px; margin: 0 auto; padding: 0 56px; display:flex; justify-content:space-between; align-items:center; width:100%; }
nav { display:flex; gap: 32px; }
nav a { font-size: 14px; color: var(--ink); text-decoration: none; font-weight: 500; }
nav a.active { color: var(--coral); }
.btn { background: var(--ink); color: var(--warm); padding: 10px 22px; border-radius: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 32px; display:inline-flex; align-items:center; gap: 12px; }
.eyebrow::before { content:''; width:32px; height:1px; background:var(--coral); }
/* Page hero — DARK now */
.page-hero { background: var(--ink); color: var(--warm); padding: 96px 56px 72px; position:relative; overflow:hidden; }
.page-hero-inner { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; position:relative; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(56px, 5.2vw, 96px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: var(--warm); }
.page-hero h1 em { font-style: italic; color: var(--coral); font-weight: 400; }
.page-hero p { font-size: 19px; line-height: 1.6; color: rgba(244,236,223,0.78); margin: 0; max-width: 520px; }
.page-hero .eyebrow { color: var(--coral); }
.crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: rgba(244,236,223,0.5); margin-bottom: 32px; }
.crumb a { color: rgba(244,236,223,0.5); text-decoration: none; }
/* Anchor strip — SAND now */
.anchors { background: var(--warm); color: var(--ink); padding: 24px 56px; border-bottom: 1px solid var(--line); }
.anchors-inner { max-width: 1440px; margin: 0 auto; display:flex; justify-content:space-between; align-items:center; gap: 48px; flex-wrap: wrap; }
.anchors-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: rgba(14,31,51,0.55); }
.anchors-list { display:flex; gap: 56px; align-items:center; }
.anchors-list a { color: var(--ink); text-decoration:none; display:flex; gap: 16px; align-items:center; font-size: 15px; font-weight: 500; }
.anchors-list .num { font-family: var(--font-mono); font-size: 11px; color: var(--coral); letter-spacing: 0.1em; }
.anchors-list em { font-style: italic; color: var(--coral); font-family: var(--font-display); font-size: 17px; font-weight: 400; }
/* Expertise block */
.expertise { padding: 120px 56px; border-bottom: 1px solid var(--line); }
.expertise-inner { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: start; }
.expertise.flip .expertise-inner { grid-template-columns: 1.2fr 1fr; }
.expertise.flip .left { order: 2; }
.expertise.flip .right { order: 1; }
.expertise .left { position: sticky; top: 120px; }
.expertise .marker { display:flex; align-items:baseline; gap: 24px; margin-bottom: 40px; }
.expertise .marker .idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--coral); font-weight: 600; }
.expertise .marker .rule { flex: 1; height: 1px; background: var(--ink); }
.expertise h2 { font-family: var(--font-display); font-size: clamp(48px, 4.5vw, 72px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 32px; }
.expertise h2 em { font-style: italic; color: var(--coral); font-weight: 400; }
.expertise .lede { font-size: 19px; line-height: 1.6; color: rgba(14,31,51,0.8); margin: 0 0 32px; max-width: 480px; }
.expertise .meta { display:grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; padding-top: 32px; border-top: 1px solid var(--line); max-width: 480px; }
.expertise .meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(14,31,51,0.5); margin-bottom: 6px; text-transform: uppercase; }
.expertise .meta .v { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.35; }
.expertise .meta .v em { font-style: italic; color: var(--coral); font-weight: 400; }
/* Right column — interventions (sub-services) */
.interventions { display:grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intervention { background:#fff; padding: 32px 0; display:grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; }
.intervention .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--coral); padding-top: 6px; }
.intervention h3 { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; }
.intervention p { font-size: 15px; line-height: 1.65; color: rgba(14,31,51,0.72); margin: 0 0 16px; }
.intervention .tags { display:flex; flex-wrap: wrap; gap: 6px; }
.intervention .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; padding: 4px 10px; background: var(--warm); color: var(--ink); border-radius: 2px; text-transform: uppercase; }
/* Case strip — small carto card after each expertise */
.case-strip { display:grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }
.case { background: var(--paper); padding: 32px; border-radius: 2px; position: relative; overflow: hidden; }
.case-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--coral); margin-bottom: 16px; }
.case h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.2; margin: 0 0 12px; }
.case h4 em { font-style: italic; color: var(--coral); font-weight: 400; }
.case p { font-size: 14px; line-height: 1.55; color: rgba(14,31,51,0.7); margin: 0; }
.case .pin-mini { position: absolute; right: 20px; top: 20px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: rgba(14,31,51,0.4); }
/* Method block — sticky element, monoline cartography */
.method { padding: 120px 56px; background: var(--ink); color: var(--warm); position: relative; overflow: hidden; }
.method-bg { position: absolute; inset: 0; opacity: 0.5; }
.method-inner { max-width: 1440px; margin: 0 auto; position: relative; }
.method-head { display:grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 64px; align-items: end; }
.method h2 { font-family: var(--font-display); font-size: 56px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 16px 0 0; color: var(--warm); }
.method h2 em { font-style: italic; color: var(--coral); font-weight: 400; }
.method-head p { font-size: 17px; line-height: 1.7; color: rgba(244,236,223,0.7); margin: 0; }
.method-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(244,236,223,0.15); border-top: 1px solid rgba(244,236,223,0.15); border-bottom: 1px solid rgba(244,236,223,0.15); }
.method-step { background: var(--ink); padding: 40px 28px; }
.method-step .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--coral); margin-bottom: 24px; }
.method-step h4 { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0 0 12px; color: var(--warm); }
.method-step p { font-size: 14px; line-height: 1.6; color: rgba(244,236,223,0.7); margin: 0; }
/* Cross-expertise quote */
.quote-section { padding: 120px 56px; background: var(--warm); }
.quote-section-inner { max-width: 1100px; margin: 0 auto; }
.quote-section blockquote { font-family: var(--font-display); font-size: clamp(36px, 3.4vw, 52px); font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 32px; }
.quote-section blockquote em { color: var(--coral); font-style: italic; font-weight: 400; }
.quote-section cite { font-style:normal; font-size: 14px; color: rgba(14,31,51,0.65); }
.quote-section cite strong { display:block; font-weight:600; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
/* CTA */
.cta { padding: 120px 56px; text-align:center; position:relative; overflow:hidden; border-top: 1px solid var(--line); }
.cta-bg { position:absolute; inset:0; opacity:0.4; }
.cta h2 { font-family: var(--font-display); font-size: 72px; font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 24px; max-width: 1100px; margin-left:auto; margin-right:auto; position:relative; }
.cta h2 em { color: var(--coral); font-style: italic; }
.cta p { font-size: 18px; color: rgba(14,31,51,0.7); margin: 0 0 40px; position:relative; }
.cta-btn { background: var(--ink); color: var(--warm); padding: 18px 40px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-decoration:none; display:inline-block; position:relative; }
/* Footer */
footer { background: var(--ink); color: var(--warm); padding: 80px 56px 32px; }
.f-grid { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 64px; }
.f-grid h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin: 0 0 20px; font-weight: 600; }
.f-grid ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 12px; }
.f-grid li { font-size: 14px; color: rgba(244,236,223,0.8); }
.f-bottom { max-width: 1440px; margin: 0 auto; padding-top: 32px; border-top: 1px solid rgba(244,236,223,0.15); display:flex; justify-content:space-between; font-size: 12px; color: rgba(244,236,223,0.5); }
nav a.disabled { color: rgba(14,31,51,0.35); cursor: not-allowed; }
.f-grid li.muted { color: rgba(244,236,223,0.35); }
/* ===== contact.html ===== */
:root { --ink:#0E1F33; --paper:#FBF8F2; --coral:#C77B5C; --warm:#F4ECDF; --line: rgba(14,31,51,0.12); }
* { box-sizing: border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family: var(--font-body); }
.util { display:flex; justify-content:space-between; align-items:center; padding: 10px 56px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(14,31,51,0.6); }
.util .center { display:flex; gap:18px; }
header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); height: 88px; display:flex; align-items:center; }
.h-inner { max-width: 1440px; margin: 0 auto; padding: 0 56px; display:flex; justify-content:space-between; align-items:center; width:100%; }
nav { display:flex; gap: 32px; }
nav a { font-size: 14px; color: var(--ink); text-decoration: none; font-weight: 500; }
nav a.active { color: var(--coral); }
nav a.disabled { color: rgba(14,31,51,0.35); cursor: not-allowed; }
.btn { background: var(--ink); color: var(--warm); padding: 10px 22px; border-radius: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 32px; display:inline-flex; align-items:center; gap: 12px; }
.eyebrow::before { content:''; width:32px; height:1px; background:var(--coral); }
/* HERO — dark, consistent with expertises */
.page-hero { background: var(--ink); color: var(--warm); padding: 96px 56px 72px; position:relative; overflow:hidden; }
.page-hero-inner { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; position:relative; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(56px, 5.2vw, 96px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: var(--warm); }
.page-hero h1 em { font-style: italic; color: var(--coral); font-weight: 400; }
.page-hero p { font-size: 19px; line-height: 1.6; color: rgba(244,236,223,0.78); margin: 0; max-width: 520px; }
.page-hero .eyebrow { color: var(--coral); }
.crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: rgba(244,236,223,0.5); margin-bottom: 32px; }
.crumb a { color: rgba(244,236,223,0.5); text-decoration: none; }
/* FORM SECTION */
.form-section { padding: 96px 56px; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 96px; align-items: start; }
/* Left rail — contact info */
.rail { position: sticky; top: 120px; }
.rail h2 { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin: 16px 0 24px; }
.rail h2 em { font-style: italic; color: var(--coral); font-weight: 400; }
.rail p { font-size: 16px; line-height: 1.7; color: rgba(14,31,51,0.75); margin: 0 0 40px; }
.info-block { padding-top: 32px; border-top: 1px solid var(--line); margin-bottom: 32px; }
.info-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(14,31,51,0.55); margin-bottom: 8px; text-transform: uppercase; }
.info-v { font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.4; }
.info-v em { font-style: italic; color: var(--coral); font-weight: 400; }
.info-v.small { font-size: 16px; font-family: var(--font-body); font-weight: 500; }
/* Form */
form { display:flex; flex-direction: column; gap: 0; }
.form-step { padding: 32px 0; border-top: 1px solid var(--ink); }
.form-step:first-of-type { border-top: 1px solid var(--ink); }
.form-step:last-of-type { border-bottom: 1px solid var(--ink); }
.step-head { display:flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.step-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--coral); font-weight: 600; }
.step-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.step-title em { font-style: italic; color: var(--coral); font-weight: 400; }
.step-help { font-size: 14px; color: rgba(14,31,51,0.6); margin: 4px 0 24px; line-height: 1.5; max-width: 540px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field-grid .full { grid-column: 1 / -1; }
.field { display:flex; flex-direction:column; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(14,31,51,0.6); margin-bottom: 8px; text-transform: uppercase; font-weight: 600; }
.field label .req { color: var(--coral); margin-left: 4px; }
.field input, .field textarea, .field select {
font-family: var(--font-body);
font-size: 16px;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: 2px;
padding: 14px 16px;
transition: border-color 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-color: var(--coral);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
/* Radio cards — needs */
.radio-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card label {
display: block;
padding: 20px 20px 24px;
border: 1px solid var(--line);
border-radius: 2px;
cursor: pointer;
transition: all 0.15s ease;
background: #fff;
margin: 0;
height: 100%;
}
.radio-card .rc-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--coral); margin-bottom: 12px; font-weight: 600; }
.radio-card .rc-title { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--ink); }
.radio-card .rc-title em { font-style: italic; color: var(--coral); font-weight: 400; }
.radio-card .rc-desc { font-size: 13px; line-height: 1.5; color: rgba(14,31,51,0.6); }
.radio-card input:checked + label { border-color: var(--ink); background: var(--warm); }
.radio-card input:checked + label .rc-num { color: var(--ink); }
/* Profile selector — radio segmented */
.seg-row { display:flex; gap: 8px; flex-wrap: wrap; }
.seg { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display:inline-block; padding: 12px 20px; border: 1px solid var(--line); border-radius: 2px; font-size: 14px; font-weight: 500; cursor: pointer; background: #fff; transition: all 0.15s ease; margin: 0; }
.seg input:checked + label { border-color: var(--ink); background: var(--ink); color: var(--warm); }
/* Submit row */
.submit-row { padding: 40px 0; display:flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.legal { font-size: 12px; line-height: 1.6; color: rgba(14,31,51,0.6); max-width: 460px; }
.legal a { color: var(--ink); text-decoration: underline; }
.submit-btn {
background: var(--ink); color: var(--warm);
border: 0; padding: 18px 36px;
font-family: var(--font-body); font-size: 15px; font-weight: 600;
letter-spacing: 0.04em; cursor: pointer; border-radius: 2px;
display:inline-flex; align-items:center; gap: 12px;
transition: background 0.15s ease;
}
.submit-btn:hover { background: var(--coral); }
/* Reassurance band */
.reassure { background: var(--warm); padding: 80px 56px; border-top: 1px solid var(--line); }
.reassure-inner { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.reassure-item .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--coral); margin-bottom: 16px; font-weight: 600; }
.reassure-item h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0 0 12px; }
.reassure-item h3 em { font-style: italic; color: var(--coral); font-weight: 400; }
.reassure-item p { font-size: 14px; line-height: 1.65; color: rgba(14,31,51,0.7); margin: 0; }
/* Footer */
footer { background: var(--ink); color: var(--warm); padding: 80px 56px 32px; }
.f-grid { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 64px; }
.f-grid h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin: 0 0 20px; font-weight: 600; }
.f-grid ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 12px; }
.f-grid li { font-size: 14px; color: rgba(244,236,223,0.8); }
.f-grid li.muted { color: rgba(244,236,223,0.35); }
.f-bottom { max-width: 1440px; margin: 0 auto; padding-top: 32px; border-top: 1px solid rgba(244,236,223,0.15); display:flex; justify-content:space-between; font-size: 12px; color: rgba(244,236,223,0.5); }
/* ===== PHP integration additions ===== */
.logo-link img { height: 72px; display: block; }
nav a.active { color: var(--coral); }
.form-notice { margin: 0 0 32px; padding: 18px 22px; border: 1px solid var(--coral); background: var(--warm); color: var(--ink); font-size: 14px; line-height: 1.6; }
@media (max-width: 1080px) {
.util { display: none; }
header { height: auto; min-height: 80px; }
.h-inner { padding: 16px 24px; gap: 20px; flex-wrap: wrap; }
nav { order: 3; width: 100%; overflow-x: auto; gap: 20px; padding-bottom: 4px; }
.hero, .page-hero-inner, .exp-head, .interlude-grid, .quote-block, .method-head, .expertise-inner, .expertise.flip .expertise-inner, .form-section { grid-template-columns: 1fr; gap: 48px; }
.expertise.flip .left, .expertise.flip .right { order: initial; }
.expertise .left, .rail { position: static; }
.pillars, .steps, .method-grid, .reassure-inner, .f-grid { grid-template-columns: 1fr; }
.case-strip, .field-grid { grid-template-columns: 1fr; }
.radio-grid { grid-template-columns: 1fr 1fr; }
.hero-text, .exp, .approach, .interlude, .expertise, .method, .quote-section, .cta, .form-section, .reassure, footer, .page-hero { padding-left: 24px; padding-right: 24px; }
.f-bottom { flex-direction: column; gap: 12px; }
}
@media (max-width: 640px) {
.h-inner { padding: 14px 20px; }
.logo-link img { height: 58px; }
.btn { padding: 10px 14px; }
.hero h1, .page-hero h1, .cta h2 { font-size: 46px; }
.radio-grid, .expertise .meta, .anchors-list { grid-template-columns: 1fr; display: grid; gap: 16px; }
.anchors-inner { align-items: flex-start; }
}
.form-notice {
background: var(--brand-lagoon-100, #D8EAE5);
color: var(--ink);
border: 1px solid rgba(47, 138, 120, 0.25);
padding: 20px 24px;
margin-bottom: 24px;
font-size: 15px;
line-height: 1.6;
}
.form-notice-error {
background: var(--brand-accent-100, #FCE8E0);
border-color: rgba(184, 71, 46, 0.25);
}
.hp-field {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}