/* Hopper: the perspective shift. Photography, a paired study and clear next steps. */
.perspective-study { background:#29252b; color:#f4f0e8; padding-block:4rem 3rem; }
.perspective-study .section-meta { border-color:#d9bc9945; color:#d9bc99; }
.perspective-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:end; padding-block:3rem 2.5rem; }
.perspective-heading h2 { font-size:clamp(2.8rem,5vw,6rem); line-height:1.08; }
.perspective-heading h2 em { color:#d9bc99; }
.perspective-heading>div { max-width:40ch; justify-self:end; }
.perspective-heading .study-lead { font:400 clamp(1.25rem,1.6vw,1.8rem)/1.45 var(--brand); color:#f4f0e8; margin-bottom:.85rem; }
.perspective-heading p { color:#c8bfb7; font-size:.85rem; line-height:1.8; }
.study-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem; }
.study-toolbar>.eyebrow { color:#d9bc99; font-size:.6875rem; letter-spacing:.09em; }
.study-presets { display:flex; gap:.25rem; border:1px solid #d9bc9955; padding:3px; }
.study-presets button { min-height:40px; padding:.5rem 1rem; color:#d5c9bb; font-size:.7rem; transition:background .2s,color .2s; }
.study-presets button[aria-pressed=true] { background:#d9bc99; color:#29252b; }
.site-comparison { position:relative; display:grid; grid-template-columns:1fr 1fr; aspect-ratio:1.97; overflow:hidden; background:#665d51; isolation:isolate; margin:0; }
.comparison-frame { position:relative; min-width:0; margin:0; }
.comparison-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.comparison-frame figcaption { position:absolute; top:1.1rem; left:1.1rem; padding:.55rem .75rem; background:#29252be8; color:#f4f0e8; font-size:.6875rem; letter-spacing:.05em; pointer-events:none; }
.comparison-after figcaption { left:auto; right:1.1rem; background:#f4f0e8f2; color:#29252b; }
.site-comparison.is-interactive { display:block; aspect-ratio:1.97; --split:50%; --cut:50%; }
.site-comparison.is-interactive .comparison-frame { position:absolute; inset:0; overflow:hidden; }
.site-comparison.is-interactive .comparison-frame img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.site-comparison.is-interactive .comparison-before { z-index:2; clip-path:inset(0 var(--cut) 0 0); }
.site-comparison.is-interactive .comparison-after { z-index:1; }
.comparison-range { position:absolute; z-index:5; inset:0; margin:0; width:100%; height:100%; appearance:none; -webkit-appearance:none; background:transparent; cursor:ew-resize; opacity:0; touch-action:pan-y; }
.comparison-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:48px; height:100%; }
.comparison-range::-moz-range-thumb { width:48px; height:48px; border:0; background:transparent; }
.comparison-handle { position:absolute; z-index:4; left:var(--split); top:0; bottom:0; width:2px; transform:translateX(-50%); background:#f4f0e8; box-shadow:0 0 12px #0004; pointer-events:none; }
.comparison-handle>span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#f4f0e8; color:#29252b; font:400 1.6rem/1 Arial,sans-serif; box-shadow:0 3px 20px #0003; }
.comparison-handle>span:after { content:'↔'; }
.site-comparison:focus-within { outline:3px solid #d9bc99; outline-offset:5px; }
.comparison-instruction { position:absolute; z-index:4; bottom:1.1rem; left:50%; transform:translateX(-50%); padding:.5rem .8rem; color:#fff; background:#29252be8; font-size:.6875rem; white-space:nowrap; pointer-events:none; }
.study-caption { display:flex; align-items:start; justify-content:space-between; gap:2rem; padding-block:1rem 1.8rem; color:#bfb1a5; font-size:.8125rem; line-height:1.6; }
.study-caption p { max-width:65ch; }
.study-caption>span { flex-shrink:0; color:#d9bc99; font-family:monospace; letter-spacing:.08em; }
.study-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem; border-top:1px solid #d9bc9940; padding-top:1.5rem; }
.study-principles article { display:grid; grid-template-columns:1.5rem 1fr; gap:.6rem 1rem; }
.study-principles article>span { color:#d9bc99; font-size:.6875rem; padding-top:.4rem; }
.study-principles h3 { font:400 clamp(1.35rem,1.8vw,2rem)/1.2 var(--brand); letter-spacing:-.025em; }
.study-principles p { grid-column:2; color:#c8bfb7; font-size:.78rem; line-height:1.8; max-width:32ch; }
.study-outro { display:flex; justify-content:space-between; align-items:center; gap:2rem; border-top:1px solid #d9bc9940; padding-top:1.5rem; margin-top:2rem; }
.study-outro>p { font:400 clamp(1.1rem,1.6vw,1.6rem)/1.4 var(--brand); color:#d9bc99; }
.study-outro .text-link { color:#f4f0e8; font-size:.75rem; }
.perspective-study :focus-visible { outline-color:#d9bc99; }

/* The expertise index is intentionally photographic and generous. */
.competencies { padding-block:4rem 4rem; }
.expertise-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.5vw,3rem); }
.expertise-card { min-width:0; display:flex; flex-direction:column; border-bottom:1px solid #bca68e; padding-bottom:1rem; }
.expertise-image { position:relative; aspect-ratio:1.18; overflow:hidden; margin:0 0 1.5rem; background:#d0c5b4; }
.expertise-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .85s var(--ease),filter .85s; filter:saturate(.78); }
.expertise-card:hover img { transform:scale(1.045); filter:saturate(1); }
.expertise-image:after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#29252b8c); }
.expertise-image .expertise-register { position:absolute; top:.9rem; left:.9rem; z-index:1; padding:.4rem .6rem; background:#f4f0e8ed; color:#29252b; font:400 .6875rem/1.4 Plex,Arial,sans-serif; letter-spacing:.06em; }
.expertise-image figcaption { position:absolute; z-index:1; bottom:1rem; left:1rem; right:1rem; font:400 clamp(1.25rem,1.8vw,1.9rem)/1.15 var(--brand); color:#fff; }
.expertise-copy { flex:1; }
.expertise-copy>.eyebrow { font-size:.6875rem; line-height:1.75; letter-spacing:.07em; color:#87533b; min-height:2.1rem; display:block; }
.expertise-copy h3 { font:400 clamp(1.7rem,2.5vw,2.9rem)/1.12 var(--brand); letter-spacing:-.045em; margin:.65rem 0 1rem; }
.expertise-copy>p:last-child { font-size:.85rem; line-height:1.85; color:var(--muted); max-width:34ch; }
.expertise-entry { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.7rem; font-size:.72rem; color:#87533b; min-height:44px; }
.expertise-card:focus-visible { outline:2px solid #87533b; outline-offset:7px; }
.expertise-footnote { display:flex; justify-content:space-between; align-items:start; gap:2rem; border-bottom:1px solid var(--line); padding-block:1rem; margin-top:1rem; }
.expertise-footnote>p { color:var(--muted); font-size:.6875rem; line-height:1.7; }
.expertise-footnote>a { color:#87533b; font-size:.69rem; text-decoration:underline; text-underline-offset:4px; flex-shrink:0; }

/* Service detail pages continue the same photographic language. */
.detail-title-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem,5vw,6rem); align-items:center; }
.detail-title-grid h1 { font-size:clamp(2.8rem,4.7vw,5.5rem); }
.expertise-portrait { margin:0; min-width:0; position:relative; }
.expertise-portrait img { width:100%; aspect-ratio:1.05; object-fit:cover; display:block; }
.expertise-portrait figcaption { display:flex; justify-content:space-between; align-items:start; gap:1rem; padding-top:.85rem; border-top:1px solid #bca68e; margin-top:.65rem; color:var(--muted); font-size:.6875rem; line-height:1.7; }
.expertise-portrait figcaption>span { color:#87533b; font-family:monospace; white-space:nowrap; }

/* An actionable ending: visitors see the starting point that fits their role. */
.project-compass { background:#e6ddcf; padding-block:4rem; }
.compass-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:4rem; padding-bottom:2.5rem; }
.compass-heading h2 { margin-top:1.4rem; font-size:clamp(2.7rem,4.5vw,5.1rem); }
.compass-heading>p { font-size:.92rem; line-height:1.9; color:var(--muted); max-width:42ch; justify-self:end; }
.compass-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,6rem); border-top:1px solid #bca68e; padding-top:2rem; }
.compass-choices { display:flex; flex-direction:column; gap:0; }
.compass-choice { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; gap:1rem; align-items:center; text-align:left; border-bottom:1px solid #bca68e; min-height:90px; padding:1rem .5rem; }
.compass-choice>span:first-child { font-size:.6875rem; color:#87533b; }
.compass-choice strong { display:block; font:400 clamp(1.3rem,2vw,2rem)/1.3 var(--brand); }
.compass-choice small { color:var(--muted); display:block; margin-top:.35rem; font-size:.72rem; }
.compass-choice .compass-arrow { color:#87533b; font-size:1.5rem; transition:transform .25s; }
.compass-choice[aria-pressed=true] { background:#f4f0e8; padding-inline:1rem; }
.compass-choice[aria-pressed=true] .compass-arrow { transform:rotate(-35deg); }
.compass-panel { border-left:1px solid #bca68e; padding-left:clamp(2rem,4vw,4rem); align-self:center; }
.compass-panel>.eyebrow { color:#87533b; font-size:.6875rem; }
.compass-panel h3 { font:400 clamp(1.8rem,2.7vw,3rem)/1.2 var(--brand); letter-spacing:-.035em; margin:1rem 0; }
.compass-panel>p:not(.eyebrow) { color:var(--muted); font-size:.88rem; line-height:1.9; max-width:46ch; }
.compass-panel ul { margin:1.4rem 0 1.8rem; padding-left:1rem; color:#87533b; font-size:.78rem; line-height:2; }
.compass-panel .button { font-size:.75rem; gap:2rem; }
.compass-note { border-top:1px solid #bca68e; padding-top:1.2rem; margin-top:2rem; font-size:.6875rem; color:var(--muted); }

@media(min-width:1700px) {
 .site-comparison { aspect-ratio:2.1; }
 .expertise-image { aspect-ratio:1.3; }
}
@media(max-width:1000px) {
 .perspective-heading { gap:2rem; }
 .perspective-heading h2 { font-size:3.5rem; }
 .study-principles { gap:1.3rem; }
 .expertise-copy h3 { font-size:2rem; }
 .expertise-copy>.eyebrow { min-height:3rem; }
 .detail-title-grid { grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:2rem; }
 .detail-title-grid h1 { font-size:3.1rem; }
}
@media(max-width:767px) {
 .perspective-study { padding-block:2.5rem; }
 .perspective-study .section-meta>span { display:none; }
 .perspective-heading { grid-template-columns:1fr; gap:1.5rem; padding-block:2rem; }
 .perspective-heading h2 { font-size:clamp(2.6rem,9vw,4rem); }
 .perspective-heading>div { max-width:48ch; justify-self:start; }
 .perspective-heading .study-lead { font-size:1.4rem; }
 .perspective-heading p { font-size:.83rem; }
 .study-toolbar { flex-wrap:wrap; gap:.8rem; }
 .study-toolbar>.eyebrow { font-size:.6875rem; }
 .study-presets { width:100%; }
 .study-presets button { flex:1; padding:.5rem; font-size:.6875rem; }
 .site-comparison,.site-comparison.is-interactive { aspect-ratio:1.16; }
 .comparison-frame figcaption { font-size:.6875rem; padding:.4rem .5rem; top:.65rem; left:.65rem; }
 .comparison-after figcaption { left:auto; right:.65rem; }
 .comparison-handle>span { width:46px; height:46px; font-size:1.4rem; }
 .comparison-instruction { font-size:.6875rem; bottom:.7rem; }
 .study-caption { gap:1rem; padding-bottom:1.4rem; font-size:.8125rem; }
 .study-caption>span { display:none; }
 .study-principles { grid-template-columns:1fr; gap:1.3rem; }
 .study-principles article { grid-template-columns:1.5rem 1fr; gap:.3rem .75rem; }
 .study-principles h3 { font-size:1.5rem; }
 .study-principles p { max-width:48ch; font-size:.77rem; }
 .study-outro { flex-direction:column; align-items:start; gap:1rem; padding-top:1.4rem; margin-top:1.5rem; }
 .study-outro .text-link { font-size:.7rem; }
 .competencies { padding-block:3rem; }
 .expertise-grid { grid-template-columns:1fr; gap:2rem; }
 .expertise-image { aspect-ratio:1.45; margin-bottom:1.2rem; }
 .expertise-image figcaption { font-size:1.5rem; }
 .expertise-copy>.eyebrow { min-height:0; font-size:.6875rem; }
 .expertise-copy h3 { font-size:2.2rem; margin:.6rem 0 .8rem; }
 .expertise-copy>p:last-child { max-width:47ch; font-size:.85rem; }
 .expertise-entry { margin-top:.9rem; font-size:.72rem; }
 .expertise-footnote { flex-direction:column; gap:.6rem; margin-top:.4rem; }
 .expertise-footnote>p { font-size:.6875rem; }
 .expertise-footnote>a { font-size:.6875rem; }
 .detail-title-grid { grid-template-columns:1fr; gap:2rem; }
 .detail-title-grid h1 { font-size:clamp(2.5rem,8.5vw,4rem); }
 .expertise-portrait img { aspect-ratio:1.35; }
 .expertise-portrait figcaption { font-size:.6875rem; }
 .project-compass { padding-block:3rem; }
 .compass-heading { grid-template-columns:1fr; gap:1.3rem; padding-bottom:1.5rem; }
 .compass-heading h2 { font-size:clamp(2.5rem,8.5vw,3.5rem); margin-top:1rem; }
 .compass-heading>p { justify-self:start; font-size:.86rem; }
 .compass-layout { grid-template-columns:1fr; gap:1.5rem; padding-top:1rem; }
 .compass-choice { min-height:85px; gap:.6rem; }
 .compass-choice strong { font-size:1.6rem; }
 .compass-choice small { font-size:.6875rem; }
 .compass-panel { border-left:0; padding:1.5rem 0 0; border-top:1px solid #bca68e; }
 .compass-panel h3 { font-size:2.1rem; }
 .compass-note { font-size:.6875rem; }
}
@media(prefers-reduced-motion:reduce) {
 .expertise-image img,.compass-arrow { transition:none!important; }
 .expertise-card:hover img { transform:none; }
}
@media print {
 .study-toolbar,.comparison-range,.comparison-handle,.comparison-instruction { display:none!important; }
 .perspective-study,.project-compass { background:white; color:black; }
 .site-comparison.is-interactive { display:grid; grid-template-columns:1fr 1fr; aspect-ratio:auto; }
 .site-comparison.is-interactive .comparison-frame { position:relative; clip-path:none; }
 .site-comparison.is-interactive .comparison-frame img { height:auto; }
 .expertise-grid { display:block; }
 .expertise-card { break-inside:avoid; margin-bottom:2rem; }
 .expertise-image { max-width:25rem; }
}