/* ESRL Development Inc., v2 Editorial Design System */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,500;0,700;0,900;1,200;1,300;1,400;1,500&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper:#EFEFEA; --paper2:#E4E3DD; --ink:#161717; --muted:#5A5C5A; --accent:#3E4848; --accentDark:#252B2B;
  --serif:'Fraunces',serif; --sans:'Inter Tight',sans-serif; --mono:'JetBrains Mono',monospace;
}
html.dark {
  --paper:#161717; --paper2:#1F2120; --ink:#CBCAC4; --muted:#7E807D; --accent:#7E8B8B; --accentDark:#3E4848;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--sans); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { position: relative; overflow-x: hidden; min-height:100vh; }
/* grain overlay removed, caused blurriness on non-retina screens */
html.dark body::before { display: none; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-weight: 400; }
img { max-width:100%; display:block; }

/* NAV */
.nav { position: sticky; top: 16px; z-index: 50; margin: 16px 24px 0; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in oklab, var(--paper) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ink); border-radius: 999px;
}
.nav .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1; text-decoration: none; }
.nav .brand-mark { font-family: var(--serif); font-weight: 900; font-style: normal; line-height: 0.85; letter-spacing: -0.06em; text-transform: uppercase; font-size: 28px; color: var(--ink); }
.nav .brand-mark .brand-ac { color: var(--accent); }
.nav .brand-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 3px; border-top: 1.5px solid var(--ink); font-family: var(--mono); font-size: 7px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); font-weight: 600; width: 100%; justify-content: space-between; }
.nav .brand-dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; display: inline-block; flex-shrink: 0; }
.nav .links { display: flex; gap: 4px; }
.nav .links a { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: background 0.15s, color 0.15s; }
.nav .links a:hover.nav .links a.active { background: var(--ink); color: var(--paper); }
.nav .right { display: flex; gap: 12px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.nav .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.6s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.nav .menu-btn { display:none; background:none; border:1px solid var(--ink); border-radius:999px; padding:8px 14px; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; color:var(--ink); }

/* STRIP */
.strip { display: grid; grid-template-columns: repeat(6, 1fr); margin: 16px 24px 0; border: 1px solid var(--ink); }
.strip > div { padding: 11px 16px; border-right: 1px solid var(--ink); font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.strip > div:last-child { border-right: none; }
.strip b { display: block; color: var(--ink); margin-top: 4px; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: -0.01em; text-transform: none; }
.strip b em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }

/* HERO */
.hero-wrap { margin: 24px 24px 0; border: 1px solid var(--ink); border-bottom:none; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 76vh; }
.hero .text { padding: 56px 44px 36px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--ink); border-radius: 999px; }
.tags span.f { background: var(--ink); color: var(--paper); }
.tags span.o { background: var(--accent); color: var(--paper); border-color: var(--accent); }

.display { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 9vw, 160px); line-height: 0.84; letter-spacing: -0.045em; margin: 28px 0 18px; }
.display em { font-style: italic; font-weight: 300; color: var(--accent); }
.display .hi { font-style: italic; font-weight: 300; background: linear-gradient(180deg, transparent 70%, color-mix(in oklab, var(--accent) 55%, transparent) 70%, color-mix(in oklab, var(--accent) 55%, transparent) 96%, transparent 96%); padding: 0 0.04em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.display .o { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.display sup { font-family: var(--mono); font-size: 0.085em; vertical-align: super; color: var(--muted); margin-left: 0.3em; font-weight: 400; letter-spacing: 0.1em; font-style: normal; }

.lede { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.4; max-width: 540px; margin-top: 4px; }
.lede em { font-style: normal; color: var(--accent); font-weight: 400; }

.heroFoot { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding-top: 24px; border-top: 1px solid var(--ink); margin-top: 40px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.heroFoot b { display: block; color: var(--ink); margin-top: 6px; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 17px; letter-spacing: -0.01em; text-transform: none; }

.plate { position: relative; background: #15171A; overflow: hidden; }
.plate img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(0.85) brightness(0.96); transition: transform 0.8s cubic-bezier(.2.8.2,1); }
.plate:hover img { transform: scale(1.03); }
.plate::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 60%); mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
.plate::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(15,13,11,0.78) 100%); pointer-events: none; z-index: 2; }
.plate > *:not(img) { position: relative; z-index: 3; }
.plate .corners { position: absolute; inset: 16px; pointer-events: none; z-index: 3; }
.plate .corners::before.plate .corners::after.plate .cTL.plate .cBR { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid rgba(216,215,207,0.55); }
.plate .corners::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.plate .corners::after { bottom: 0; right: 0; border-left: none; border-top: none; }
.plate .cTL { top: 0; right: 0; border-left: none; border-bottom: none; }
.plate .cBR { bottom: 0; left: 0; border-right: none; border-top: none; }
.plate .figref { position: absolute; top: 22px; left: 22px; font-family: var(--serif); font-style: italic; font-size: 16px; color: #D8D7CF; }
.plate .figref em { color: var(--accent); }
.plate .meta { position: absolute; bottom: 22px; left: 22px; right: 22px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(216,215,207,0.65); }
.plate .meta b { display: block; color: #D8D7CF; margin-top: 4px; font-family: var(--sans); font-size: 12px; letter-spacing: -0.01em; text-transform: none; font-weight: 500; }
.plate .ctaWrap { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.plate .cta { width: 132px; height: 132px; border-radius: 50%; background: var(--accent); color: var(--paper); display: grid; place-items: center; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; transition: transform 0.4s cubic-bezier(.2.8.2,1), background 0.2s; }
.plate .cta:hover { background: #D8D7CF; color: var(--ink); transform: scale(1.05); }
.plate .cta b { display: block; font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: -0.02em; text-transform: none; margin: 4px 0 2px; font-weight: 400; }

/* PILL ROW */
.pillRow { display: flex; flex-wrap: wrap; gap: 0; background: var(--ink); color: #FFFAEC; margin: 0 24px; border: 1px solid var(--ink); }
.pillRow .p { flex: 1 1 0; padding: 22px 28px; border-right: 1px solid rgba(245,242,232,0.18); display: flex; align-items: baseline; gap: 14px; min-width: 220px; }
.pillRow .p:last-child { border-right: none; }
.pillRow .p .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.pillRow .p .v { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 22px; letter-spacing: -0.01em; color: #FFFAEC; }

/* SECTION HEAD */
.sec { margin: 0 24px; border: 1px solid var(--ink); border-top: none; padding: 80px 44px; }
.sec.dark { background: var(--ink); color: #F5F2E8; }
.sec.dark .secHead .lab { color: rgba(245,242,232,0.85); }
.sec.dark .secHead .lab em { color: #FFFAEC; }
.sec.dark .secHead h2 { color: #FFFAEC; line-height: 0.95; }
.sec.dark .secHead h2 em { color: #FFFAEC; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.sec.dark .secHead .end { color: rgba(245,242,232,0.85); }
.secHead { display: grid; grid-template-columns: 200px 1fr 200px; gap: 32px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid var(--ink); margin-bottom: 56px; }
.sec.dark .secHead { border-bottom-color: rgba(245,242,232,0.22); }
.secHead .lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.secHead .lab em { color: var(--accent); font-style: normal; }
.secHead h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 7vw, 110px); line-height: 0.9; letter-spacing: -0.04em; }
.secHead h2 em { font-style: italic; color: var(--accent); }
.secHead .end { text-align: right; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); align-self: end; }

/* PRACTICE */
.practice { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; }
.practice .quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -0.02em; }
.practice .quote em { font-style: normal; color: var(--accent); font-weight: 400; }
.practice .body { font-size: 16px; line-height: 1.6; color: var(--muted); }
.practice .body p + p { margin-top: 16px; }
.practice .body b { color: var(--ink); font-weight: 600; }

/* INTERLUDE */
.interlude { margin: 24px; height: 70vh; min-height: 480px; position: relative; overflow: hidden; border: 1px solid var(--ink); }
.interlude img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.9) brightness(0.85); }
.interlude::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 55%); mix-blend-mode: multiply; z-index: 1; }
.interlude::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%); z-index: 1; }
.interlude .il-credit { position: absolute; top: 22px; left: 22px; right: 22px; z-index: 2; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,250,236,0.85); }
.interlude .il-credit em { color: var(--accent); font-style: normal; }
.interlude .il-quote { position: absolute; bottom: 56px; left: 44px; right: 44px; z-index: 2; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(32px, 5vw, 80px); line-height: 1; letter-spacing: -0.025em; color: #FFFAEC; max-width: 1100px; }
.interlude .il-quote em { font-style: normal; color: var(--accent); font-weight: 400; }
.interlude .il-att { position: absolute; bottom: 22px; right: 22px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,250,236,0.7); text-align: right; }
.interlude .il-att b { display: block; color: #FFFAEC; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px; text-transform: none; letter-spacing: -0.01em; margin-top: 4px; }

/* SPECIMENS */
.specHero { position: relative; aspect-ratio: 2.1; border: 1px solid var(--ink); overflow: hidden; }
.specHero img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(0.88) brightness(0.92); transition: transform 0.9s cubic-bezier(.2.8.2,1); }
.specHero:hover img { transform: scale(1.04); }
.specHero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 55%); mix-blend-mode: multiply; z-index: 1; }
.specHero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.75) 100%); z-index: 1; }
.specHero .sh-tag { position: absolute; top: 22px; left: 22px; z-index: 2; background: var(--paper); padding: 8px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.specHero .sh-tag em { color: var(--accent); font-style: normal; font-weight: 600; }
.specHero .sh-meta { position: absolute; top: 22px; right: 22px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,250,236,0.85); text-align: right; }
.specHero .sh-label { position: absolute; bottom: 32px; left: 32px; right: 32px; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 32px; color: #FFFAEC; }
.specHero h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(36px, 5vw, 84px); letter-spacing: -0.03em; line-height: 0.95; max-width: 70%; }
.specHero .sh-cta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 20px; border: 1px solid #FFFAEC; border-radius: 999px; }
.specGrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ink); border-top: none; }
.specGrid3 .spec { aspect-ratio: 1; }
.specGrid3 .spec:nth-child(2n) { border-right: 1px solid var(--ink); }
.specGrid3 .spec:nth-child(3n) { border-right: none; }

.specGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--ink); }
.spec { aspect-ratio: 1.1; position: relative; overflow: hidden; background: #15171A; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); cursor: pointer; }
.spec:nth-child(2n) { border-right: none; }
.spec:nth-last-child(-n+2) { border-bottom: none; }
.spec img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(.2.8.2,1), filter 0.4s; filter: contrast(1.05) saturate(0.85) brightness(0.95); }
.spec:hover img { transform: scale(1.06); filter: contrast(1.08) saturate(1) brightness(1); }
.spec::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(15,13,11,0.85) 100%); z-index: 1; pointer-events: none; }
.spec::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 55%); mix-blend-mode: multiply; z-index: 1; pointer-events: none; transition: opacity 0.4s; }
.spec:hover::after { opacity: 0.4; }
.spec > * { position: relative; z-index: 2; }
.spec .tag { position: absolute; top: 18px; left: 18px; background: var(--paper); padding: 6px 11px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.spec .tag em { color: var(--accent); font-style: normal; }
.spec .label { position: absolute; bottom: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: end; color: #D8D7CF; }
.spec .label h3 { font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 300; letter-spacing: -0.02em; max-width: 70%; line-height: 1.1; }
.spec .label .num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(216,215,207,0.7); }

/* WHY / METHOD */
.whyHero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: 1px solid var(--ink); margin-bottom: 0; border-bottom: none; }
.whyHero .pull { padding: 56px 44px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; }
.whyHero .pull .lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.whyHero .pull q { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; quotes: "\201C" "\201D"; display: block; margin-top: 36px; }
.whyHero .pull q::before { content: open-quote; color: var(--accent); font-style: normal; font-weight: 400; font-size: 1.2em; line-height: 0; vertical-align: -0.18em; margin-right: 0.05em; }
.whyHero .pull q::after { content: close-quote; color: var(--accent); font-style: normal; font-weight: 400; font-size: 1.2em; line-height: 0; vertical-align: -0.4em; margin-left: 0.02em; }
.whyHero .pull .att { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 32px; }
.whyHero .pull .att b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16px; color: var(--ink); margin-top: 4px; letter-spacing: -0.01em; text-transform: none; }
.whyHero .diagram { padding: 32px; display: flex; align-items: center; justify-content: center; background: var(--paper2); position: relative; overflow: hidden; }
.whyHero .diagram::before { content: 'Org. chart · Fig. iii'; position: absolute; top: 18px; left: 22px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.whyHero .diagram::after { content: 'Scale 1 : 1'; position: absolute; bottom: 18px; right: 22px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.whyHero .diagram svg { width: 100%; max-width: 360px; height: auto; }

.methodGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ink); }
.method { padding: 36px 28px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; transition: background 0.25s; position: relative; overflow: hidden; }
.method:hover { background: var(--paper2); }
.method:nth-child(3n) { border-right: none; }
.method:nth-last-child(-n+3) { border-bottom: none; }
.method .top { display: flex; justify-content: space-between; align-items: start; }
.method .num { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.16em; }
.method .arr { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); transition: transform 0.3s; }
.method:hover .arr { transform: translate(4px, -4px); }
.method .icon { width: 56px; height: 56px; margin: 8px 0 16px; }
.method .icon svg { width: 100%; height: 100%; stroke: var(--ink); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.method:hover .icon svg { stroke: var(--accent); }
.method h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; }
.method p { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* TIERS */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid rgba(245,242,232,0.35); }
.tier { padding: 36px 28px; border-right: 1px solid rgba(245,242,232,0.25); display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; transition: background 0.25s; color: #F5F2E8; }
.tier:last-child { border-right: none; }
.tier:hover { background: rgba(255,255,255,0.06); }
.tier .top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,232,0.92); font-weight: 500; }
.tier .top em { color: var(--accent); font-style: normal; font-weight: 700; }
.tier h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; margin-top: 24px; margin-bottom: 14px; color: #FFFAEC; }
.tier p { font-size: 15px; line-height: 1.65; color: rgba(255,250,236,0.96); font-weight: 400; }

/* STEEL */
.steel { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.steel .left h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.03em; }
.steel .left h3 em { font-style: italic; color: var(--accent); }
.steel .left p { font-size: 16px; line-height: 1.6; color: rgba(216,215,207,0.78); margin-top: 20px; max-width: 480px; }
.steel .left p + p { margin-top: 14px; }
.steel .img { aspect-ratio: 1; background: #0F1112; position: relative; border: 1px solid rgba(216,215,207,0.2); overflow: hidden; }
.steel .img img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(0.85) brightness(0.95); transition: transform 0.9s cubic-bezier(.2.8.2,1); }
.steel .img:hover img { transform: scale(1.04); }
.steel .img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 55%); mix-blend-mode: multiply; z-index: 1; pointer-events: none; }
.steel .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 55%, rgba(15,13,11,0.7) 100%); z-index: 1; pointer-events: none; }
.steel .img > *:not(img) { position: relative; z-index: 2; }
.steel .img .caption { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(216,215,207,0.55); }
.steel .img .caption em { color: var(--accent); font-style: normal; }

/* REASONS GRID */
.reasonsGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--ink); }
.rcard { padding: 24px 20px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; flex-direction: column; gap: 12px; min-height: 200px; transition: background 0.25s; }
.rcard:hover { background: var(--paper2); }
.rcard:nth-child(5n) { border-right: none; }
.rcard:nth-last-child(-n+5) { border-bottom: none; }
.rcard .top { display: flex; justify-content: space-between; align-items: baseline; }
.rcard .num { font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: 0.16em; }
.rcard .stat { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.rcard h4 { font-family: var(--sans); font-weight: 600; font-size: 13px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.04em; }
.rcard p { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: auto; }

/* STATS */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--ink); }
.statBox { padding: 32px 24px; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transition: background 0.25s; }
.statBox:hover { background: var(--accent); color: var(--paper); }
.statBox:hover .k.statBox:hover .n em { color: var(--paper); }
.statBox:nth-child(4n) { border-right: none; }
.statBox:nth-last-child(-n+4) { border-bottom: none; }
.statBox .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.statBox .n { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4vw, 64px); letter-spacing: -0.03em; line-height: 0.95; }
.statBox .n em { font-style: italic; color: var(--accent); }

/* SERVICES */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--ink); }
.service { padding: 36px 28px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transition: background 0.25s; }
.service:nth-child(2n) { border-right: none; }
.service:nth-last-child(-n+2) { border-bottom: none; }
.service:hover { background: var(--paper2); }
.service .num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); }
.service h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; margin: 16px 0 10px; }
.service p { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* CONTACT */
.contact { padding: 120px 44px 100px; margin: 0 24px; border: 1px solid var(--ink); border-top: none; }
.contact .lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 32px; }
.contact h2 { font-family: var(--serif); font-weight: 200; font-size: clamp(56px, 11vw, 200px); line-height: 0.85; letter-spacing: -0.05em; }
.contact h2 em { font-style: italic; color: var(--accent); font-weight: 200; }
.contact h2 .o { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.contactBtm { display: flex; gap: 48px; align-items: center; margin-top: 56px; flex-wrap: wrap; justify-content: space-between; }
.contactPhone { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 4vw, 56px); letter-spacing: -0.02em; }
.contactCta { width: 160px; height: 160px; border-radius: 50%; background: var(--accent); color: var(--paper); display: grid; place-items: center; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.4; transition: transform 0.4s cubic-bezier(.2.8.2,1), background 0.2s; }
.contactCta:hover { background: var(--ink); transform: scale(1.05); }
.contactCta b { display: block; font-family: var(--serif); font-style: italic; font-size: 26px; letter-spacing: -0.02em; text-transform: none; margin: 4px 0 2px; font-weight: 400; }

/* CONTACT FORM */
.formCard { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); margin: 0 24px; }
.formCard .left { padding: 56px 44px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; gap: 24px; }
.formCard .left h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.025em; }
.formCard .left h3 em { font-style: normal; color: var(--accent); }
.formCard .left .info { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display:flex; flex-direction:column; gap:14px; margin-top: auto; }
.formCard .left .info b { display:block; color: var(--ink); margin-top:4px; font-family: var(--serif); font-style: italic; font-size: 18px; font-weight:400; letter-spacing:-0.01em; text-transform:none; }
.formCard form { padding: 56px 44px; display: flex; flex-direction: column; gap: 18px; }
.formCard label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display:flex; flex-direction:column; gap:6px; }
.formCard input.formCard select.formCard textarea { padding: 14px 16px; background: var(--paper); border: 1px solid var(--ink); font-family: var(--sans); font-size: 14px; color: var(--ink); border-radius: 0; outline:none; transition: border-color 0.2s, background 0.2s; }
.formCard input:focus.formCard select:focus.formCard textarea:focus { border-color: var(--accent); background: var(--paper2); }
.formCard textarea { resize: vertical; min-height: 120px; }
.formCard button { padding: 16px 24px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s; margin-top: 8px; }
.formCard button:hover { background: var(--accent); border-color: var(--accent); }

/* STICKY BAR */
.stickyBar { position: fixed; bottom: 24px; right: 24px; z-index: 80; display: flex; align-items: center; gap: 0; background: var(--ink); color: #FFFAEC; border-radius: 999px; padding: 4px 4px 4px 22px; box-shadow: 0 18px 50px -20px rgba(0,0,0,0.45), 0 6px 18px -8px rgba(0,0,0,0.25); transition: transform 0.4s cubic-bezier(.2.8.2,1), opacity 0.4s; }
.stickyBar.hidden { transform: translateY(40px); opacity: 0; pointer-events: none; }
.stickyBar .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding-right: 16px; border-right: 1px solid rgba(245,242,232,0.28); color: #FFFAEC; font-weight: 500; }
.stickyBar .label em { color: #FFFAEC; font-style: italic; font-weight: 700; }
.stickyBar a { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; transition: color 0.2s; color: #FFFAEC; }
.stickyBar a:hover { color: var(--accent); }
.stickyBar .go { background: var(--accent); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; transition: background 0.2s; }
.stickyBar .go:hover { background: var(--paper); color: var(--ink); }

/* QUIET FOOTER */
footer { background: var(--paper); color: var(--ink); padding: 120px 44px 32px; margin: 0; border-top: 1px solid var(--ink); text-align: center; }
.quietBrand { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1; }
.quietBrand-mark { font-family: var(--serif); font-weight: 900; font-style: normal; font-size: clamp(80px, 16vw, 220px); line-height: 0.85; letter-spacing: -0.06em; text-transform: uppercase; color: var(--ink); }
.quietBrand-mark .brand-ac { color: var(--accent); }
.quietBrand-row { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--ink); font-family: var(--mono); font-size: 14px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink); font-weight: 600; width: clamp(280px, 50vw, 520px); justify-content: space-between; }
.quietBrand-row .brand-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; display: inline-block; flex-shrink: 0; }
.quietLine { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.8vw, 26px); margin: 32px auto 0; max-width: 600px; color: var(--muted); }
.quietGrid { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px 48px; padding: 56px 0 32px; margin-top: 56px; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.quietGrid a.quietGrid span { color: var(--ink); }
.quietGrid a:hover { color: var(--accent); }
.quietBtm { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 24px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; flex-wrap:wrap; gap:12px; }

/* PALETTE TWEAKS PANEL */
.tweaks { position: fixed; top: 100px; right: 24px; z-index: 60; background: var(--paper); border: 1px solid var(--ink); padding: 16px; min-width: 200px; transition: transform 0.3s, opacity 0.3s; }
.tweaks.collapsed { transform: translateX(calc(100% - 44px)); }
.tweaks .toggle { position: absolute; left: 0; top: 0; width: 44px; height: 44px; background: var(--ink); color: var(--paper); border: none; cursor: pointer; font-family: var(--mono); font-size: 14px; }
.tweaks .body { padding-left: 36px; }
.tweaks h4 { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tweaks select { width: 100%; padding: 6px 8px; border: 1px solid var(--ink); background: var(--paper); font-family: var(--sans); font-size: 12px; color: var(--ink); margin-bottom: 8px; }
.tweaks label { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; cursor: pointer; }
.tweaks input[type=checkbox] { accent-color: var(--accent); }

/* MODAL */
.modal { position: fixed; inset: 0; z-index: 300; background: rgba(15,13,11,0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 32px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal.on { opacity: 1; pointer-events: auto; }
.modal .mb { width: 100%; max-width: 1280px; max-height: 92vh; background: var(--paper); border: 1px solid var(--ink); display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden; transform: translateY(20px); transition: transform 0.4s cubic-bezier(.2.8.2,1); position: relative; }
.modal.on .mb { transform: translateY(0); }
.modal .mImg { background: #15171A; position: relative; min-height: 480px; }
.modal .mImg img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.9); }
.modal .mBody { padding: 44px 36px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
.modal .mTag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.modal .mb h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 40px; letter-spacing: -0.025em; line-height: 1; }
.modal .mFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.modal .mFacts > div { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.modal .mFacts > div b { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 4px; letter-spacing: -0.01em; text-transform: none; }
.modal .mDesc { font-size: 14px; line-height: 1.65; color: var(--muted); }
.modal .mDesc b { color: var(--ink); font-weight: 600; }
.modal .mClose { position: absolute; top: 24px; right: 24px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--mono); font-size: 14px; border: none; cursor: pointer; }

/* MOBILE NAV */
.mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--paper); z-index: 100; padding: 80px 32px 32px; flex-direction: column; gap: 20px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--serif); font-style: italic; font-size: 32px; padding: 12px 0; border-bottom: 1px solid var(--ink); }
.mobile-menu .close-btn { position: absolute; top: 24px; right: 24px; background: var(--ink); color: var(--paper); border: none; padding: 10px 18px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .hero.practice.steel.whyHero.formCard { grid-template-columns: 1fr; }
  /* MOBILE: put image FIRST so visitors see the steel cutaway immediately */
  .hero .text { order: 2; }
  .hero .plate { order: 1; aspect-ratio: 4/3; min-height: 320px; }
  .steelHero .text { order: 2; }
  .steelHero .plate { order: 1; aspect-ratio: 4/3; min-height: 320px; }
  .archHero .text { order: 2; }
  .archHero .plate { order: 1; aspect-ratio: 4/3; min-height: 280px; }
  .aboutHero .text { order: 2; }
  .aboutHero .plate { order: 1; aspect-ratio: 4/3; min-height: 280px; }
  .steel .img { aspect-ratio: 4/3; min-height: 280px; }
  .specGrid.specGrid3.services { grid-template-columns: 1fr; }
  .methodGrid.tiers.stats { grid-template-columns: 1fr 1fr; }
  .reasonsGrid { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: 1fr 1fr; }
  .secHead { grid-template-columns: 1fr; }
  .stickyBar .label { display: none; }
  .modal .mb { grid-template-columns: 1fr; max-height: 96vh; }
  .modal .mImg { min-height: 280px; max-height: 40vh; }
  .nav .links { display:none; }
  .nav .right > span:not(.pulse) { display:none; }
  .nav .menu-btn { display:block; }
  .hero .text { border-right: none; border-bottom: 1px solid var(--ink); padding: 36px 28px; }
  .sec { padding: 56px 28px; }
  .formCard .left.formCard form { padding: 36px 28px; }
  .formCard .left { border-right:none; border-bottom:1px solid var(--ink); }
  .reasonsGrid .rcard:nth-child(5n) { border-right: 1px solid var(--ink); }
  .reasonsGrid .rcard:nth-child(2n) { border-right: none; }
  .reasonsGrid .rcard:nth-last-child(-n+5) { border-bottom: 1px solid var(--ink); }
  .reasonsGrid .rcard:nth-last-child(-n+2) { border-bottom: none; }

  /* ── Mobile blur fixes ── */
  /* Remove backdrop-filter on mobile, causes entire page to blur on iOS Safari */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  /* Remove CSS image filters on mobile, each one creates a GPU layer, stacking = blur/artifacts */
  .plate img { filter: none; }
  .interlude img { filter: none; }
  .specHero img { filter: none; }
  .spec img { filter: none; }
  .steel .img img { filter: none; }
  /* Disable scale-on-hover transforms, touch devices don't have hover; sub-pixel scale = blur */
  .plate:hover img.specHero:hover img.spec:hover img.steel .img:hover img { transform: none; }
}

@media (max-width: 720px) {
  .nav.pillRow.hero-wrap.interlude.sec.formCard.contact { margin-left: 12px; margin-right: 12px; }
  .strip { display: none; }
  .reasonsGrid.stats.methodGrid.tiers { grid-template-columns: 1fr; }
  .reasonsGrid .rcard.statBox.method.tier { border-right: none !important; border-bottom: 1px solid var(--ink); }
  .reasonsGrid .rcard:last-child.statBox:last-child.method:last-child.tier:last-child { border-bottom: none; }
  .quietGrid { gap: 16px 24px; }
  .stickyBar { right: 12px; bottom: 12px; padding: 4px 4px 4px 12px; }
  .display { font-size: clamp(40px, 12vw, 84px); line-height: 0.95; letter-spacing: -0.03em; }
  .secHead h2 { font-size: clamp(36px, 10vw, 72px); line-height: 1; letter-spacing: -0.025em; }
  .contact h2 { line-height: 0.95; font-size: clamp(48px, 13vw, 100px); }
  .quietBrand-mark { line-height: 0.95; font-size: clamp(64px, 18vw, 180px); }
  .bigBenefit h3 { line-height: 1; font-size: clamp(36px, 9vw, 88px); }
  .interlude .il-quote { font-size: clamp(28px, 7vw, 60px); line-height: 1.1; bottom: 80px; left: 24px; right: 24px; }
  .lede { font-size: 16px; line-height: 1.45; }
  .nav .brand-mark { font-size: 22px; }
  .nav .brand-row { font-size: 6px; gap: 4px; }
  .nav .brand-dot { width: 3px; height: 3px; }
  .pillRow { flex-direction: column; }
  .pillRow .p { flex: 1 1 100%; padding: 16px 20px; min-width: 0; border-right: none; border-bottom: 1px solid rgba(245,242,232,0.18); align-items: baseline; gap: 12px; }
  .pillRow .p:last-child { border-bottom: none; }
  .pillRow .p .v { font-size: 18px; }
  .heroFoot { grid-template-columns: 1fr; gap: 12px; }
  .plate .ctaWrap { display:none; }
  /* keep image-first order from 1100px breakpoint; ensure plate is visible */
  .plate { aspect-ratio: 4/3; min-height: 280px; }
  .hero { min-height: auto; }
}

/* Tablet line-height fixes */
@media (max-width: 1100px) and (min-width: 721px) {
  .display { line-height: 0.92; }
  .secHead h2 { line-height: 0.95; }
  .contact h2 { line-height: 0.92; }
  .quietBrand-mark { line-height: 0.92; }
  .bigBenefit h3 { line-height: 0.95; }
}

/* ============================================================
   EDITORIAL INTRO OVERLAY, added 2026-05-10 (merged from V1)
   ============================================================ */
@keyframes intro-kb { 0%{transform:scale(1)} 100%{transform:scale(1.12)} }
@keyframes intro-cycle {
  0%,32%   { opacity:1 }
  38%,66%  { opacity:0 }
  72%,100% { opacity:0 }
}
@keyframes intro-cycle-2 {
  0%,32%   { opacity:0 }
  38%,66%  { opacity:1 }
  72%,100% { opacity:0 }
}
@keyframes intro-cycle-3 {
  0%,66%   { opacity:0 }
  72%,100% { opacity:1 }
}
@keyframes intro-drop   { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:none} }
@keyframes intro-rise   { from{opacity:0;transform:translateY(16px)}  to{opacity:1;transform:none} }
@keyframes intro-fade-bar { from{opacity:0} to{opacity:1} }

.site-intro {
  position: fixed; inset: 0; z-index: 99999;
  overflow: hidden; cursor: default;
  background: #161717;
}
.site-intro.intro-fade-out {
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.4,0.2,1);
  pointer-events: none;
}
.site-intro.intro-done { display: none; }

.intro-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: intro-kb 8s ease-in-out infinite alternate;
}
.intro-img-1 { opacity:1; animation: intro-kb 8s ease-in-out infinite alternate, intro-cycle 16s linear infinite; }
.intro-img-2 { opacity:0; animation: intro-kb 8s ease-in-out infinite alternate, intro-cycle-2 16s linear infinite; animation-delay: 0s, 5.3s; }
.intro-img-3 { opacity:0; animation: intro-kb 8s ease-in-out infinite alternate, intro-cycle-3 16s linear infinite; animation-delay: 0s, 10.6s; }

.intro-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,13,11,0.28) 0%, rgba(15,13,11,0) 30%, rgba(15,13,11,0) 45%, rgba(15,13,11,0.88) 100%);
  pointer-events: none;
}
.intro-tint {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(62,72,72,0.38) 0%, transparent 60%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.intro-corners { position: absolute; inset: 22px; pointer-events: none; }
.ic-tl.ic-tr.ic-bl.ic-br {
  position: absolute; width: 18px; height: 18px;
  border: 1px solid rgba(216,215,207,0.5);
}
.ic-tl { top:0; left:0;  border-right:none; border-bottom:none; }
.ic-tr { top:0; right:0; border-left:none;  border-bottom:none; }
.ic-bl { bottom:0; left:0;  border-right:none; border-top:none; }
.ic-br { bottom:0; right:0; border-left:none;  border-top:none; }

.intro-figref {
  position: absolute; top: 28px; left: 28px; z-index: 2;
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: rgba(216,215,207,0.75);
  animation: intro-rise 0.9s 0.3s both;
}
.intro-figref em { color: var(--accent); font-style: normal; font-weight: 600; }

.intro-meta-top {
  position: absolute; top: 28px; right: 28px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(216,215,207,0.65);
  animation: intro-rise 0.9s 0.4s both;
}
.intro-meta-top em { color: var(--accent); font-style: normal; }

.intro-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  text-align: center; padding: 60px 24px;
}

.intro-logo-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1;
  animation: intro-drop 0.9s 0.2s cubic-bezier(.2.8.2,1) both;
}
.intro-logo-mark {
  font-family: var(--serif); font-weight: 900; font-style: normal;
  font-size: clamp(52px, 10vw, 110px); line-height: 0.85;
  letter-spacing: -0.06em; text-transform: uppercase;
  color: #FFFAEC;
}
.intro-logo-ac { color: var(--accent); }
.intro-logo-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding-top: 5px;
  border-top: 1.5px solid rgba(255,250,236,0.55);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase;
  color: rgba(216,215,207,0.8); font-weight: 600; width: 100%; justify-content: space-between;
}
.intro-logo-dot {
  width: 5px; height: 5px; background: var(--accent); border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}

.intro-rule {
  width: 48px; height: 1.5px; background: var(--accent);
  animation: intro-rise 0.8s 0.55s both;
}

.intro-tagline {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 5vw, 72px);
  line-height: 0.92; letter-spacing: -0.04em;
  color: #FFFAEC;
  animation: intro-rise 0.9s 0.5s both;
}
.intro-tagline em { font-style: italic; color: var(--accent); font-weight: 300; }

.intro-sub {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(216,215,207,0.7);
  animation: intro-rise 0.9s 0.65s both;
}

.intro-tags {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  animation: intro-rise 0.9s 0.75s both;
}
.intro-tags span {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 5px 12px;
  border: 1px solid rgba(216,215,207,0.45); border-radius: 999px;
  color: rgba(216,215,207,0.85);
}
.intro-tag-accent {
  background: var(--accent) !important; color: rgba(216,215,207,0.95) !important;
  border-color: var(--accent) !important;
}

.intro-cta {
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--accent); color: rgba(216,215,207,0.95);
  border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: transform 0.35s cubic-bezier(.2.8.2,1), background 0.2s;
  animation: intro-rise 0.9s 0.9s both;
  margin-top: 6px;
}
.intro-cta:hover { background: #D8D7CF; color: #161717; transform: scale(1.07); }
.intro-cta-label { display: block; }
.intro-cta-word {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 20px; letter-spacing: -0.02em; text-transform: none;
  margin: 2px 0; font-weight: 400;
}
.intro-cta-arr { display: block; font-family: var(--serif); font-size: 14px; }

.intro-meta-btm {
  position: absolute; bottom: 28px; left: 28px; right: 28px; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(216,215,207,0.55);
  animation: intro-rise 0.9s 0.95s both;
}
.intro-meta-btm > div { display: flex; flex-direction: column; gap: 4px; }
.intro-meta-btm > div:nth-child(2) { text-align: center; }
.intro-meta-btm > div:last-child { text-align: right; }
.intro-meta-k { display: block; }
.intro-meta-v {
  display: block; color: rgba(216,215,207,0.88);
  font-family: var(--sans); font-size: 11px;
  letter-spacing: -0.01em; text-transform: none; font-weight: 500;
}

.intro-progress-bar {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0%;
  background: var(--accent); z-index: 4;
  transition: none;
  animation: intro-fade-bar 0.4s 0.3s both;
}

@media (max-width: 640px) {
  .intro-logo-mark { font-size: clamp(44px, 16vw, 72px); }
  .intro-tagline { font-size: clamp(32px, 10vw, 56px); }
  .intro-meta-btm { display: none; }
  .intro-cta { width: 96px; height: 96px; }
  .intro-cta-word { font-size: 17px; }
}

/* ============================================================
   MOBILE-FIRST FIXES, added 2026-05-13
   - Voices/Reviews/Portfolio grids stack on phones
   - Inline-styled grids inside #voices, #area, etc. forced to 1col
   ============================================================ */
@media (max-width: 720px) {
  /* Force inline-styled grids to single column on phone */
  #voices > div[style*="grid-template-columns"],
  #voices section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Inner card borders need cleanup when stacked */
  #voices > div[style*="grid-template-columns"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--ink);
  }
  #voices > div[style*="grid-template-columns"] > div:last-child {
    border-bottom: none;
  }

  /* Pull row of pills (Brentwood, Palisades, etc.) wraps cleanly */
  .pillRow { flex-direction: column; gap: 0; }

  /* Sticky CTA bar shouldn't crowd the screen on phones */
  .stickyBar { padding: 6px 12px; font-size: 11px; }
  .stickyBar .go { padding: 8px 14px; font-size: 11px; }

  /* Section padding tighter on phones */
  .sec { padding: 40px 18px; }
  .secHead { padding-bottom: 24px; margin-bottom: 24px; }

  /* All h2 headlines easier to read */
  .secHead h2 { font-size: clamp(32px, 9vw, 60px); line-height: 1; }
}

/* Even tighter for small phones (≤375px iPhone SE width) */
@media (max-width: 380px) {
  .nav .brand-mark { font-size: 20px; }
  .nav .menu-btn { padding: 6px 10px; font-size: 10px; }
  .sec { padding: 32px 14px; }
}