/* Current page layouts and artwork. Shared typography lives in site.css. */
.site-header .brand { flex-shrink:0; }
.wordmark img { width:32px; }
.site-header nav { align-items:center; }
.site-header nav a { min-height:32px; display:flex; align-items:center; }
.site-header nav a[aria-current=page] { padding-bottom:0; }
.hero { background-image:none; }
.wave-legend { color:var(--blue); }
.wave-legend small { max-width:230px; }
.building-layout { grid-template-columns:57% 43%; grid-template-rows:minmax(0,1fr); }
.building-art { order:0; min-height:0; }
.building-copy { order:1; padding:0 0 0 35px; }
.building-art .company-building { width:100%; height:100%; min-height:0; }
.building-sticky { --depth-muted:#606066; --depth-accent:var(--blue); }
.building-instruction,.building-skip,.building-sticky .reference { color:var(--depth-muted); }
.building-sticky .blue,.building-instruction span { color:var(--depth-accent); }
.depth-choice { color:var(--depth-muted); }
.depth-choice .depth-choice-label { display:block; min-height:2.7em; margin-top:7px; font:12px/1.35 'Instrument Sans',sans-serif; letter-spacing:0; }
.depth-choice svg { height:38px; margin-bottom:8px; }
.depth-choice { opacity:.76; }
.depth-choice[aria-current=step] { color:var(--depth-accent); border-color:var(--depth-accent); }
.building-sticky .depth-choice:focus-visible { outline-color:var(--depth-accent); }
.case-section h2 { margin-top:20px; }
.people-hero { max-width:1420px; margin:auto; padding:180px var(--gutter) 95px; }
.people-hero h1 { margin:30px 0 45px; max-width:1000px; }
.people-opening { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,5vw,72px); }
.people-opening>p { max-width:500px; }
.people-opening>p:last-child { font-size:16px; color:#5c5b58; }
.people-hero .text-link { margin-top:35px; }
.people-section h2 { margin-top:0; }
.people-note { color:#76716b; font-size:12px; max-width:530px; margin-top:20px; }
.people-list { margin-top:45px; }
.person { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; border-top:1px solid var(--rule); padding:35px 0; align-items:start; }
.person .eyebrow { font-size:10px; color:#6c6a63; letter-spacing:.1em; }
.person h3 { margin-top:12px; font-size:31px; }
.person-bio { font-size:15px; color:#5c5b58; max-width:520px; }
@media (min-width:760px) and (max-width:1050px) {
  .site-header nav { gap:12px; font-size:10px; letter-spacing:.04em; }
  .site-header nav .nav-home { display:none; }
  .site-header nav a { min-height:44px; min-width:44px; }
  .site-header .nav-views { display:flex; }
  .building-copy { padding-left:20px; }
  .depth-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:none; margin-top:18px; }
  .depth-choice { display:grid; grid-template-columns:28px minmax(0,1fr); gap:4px 8px; min-height:62px; padding:8px; text-align:left; align-items:center; }
  .depth-choice svg { grid-row:1 / 3; width:28px; height:28px; margin:0; }
  .depth-choice .depth-choice-number { grid-column:2; }
  .depth-choice .depth-choice-label { grid-column:2; min-height:0; margin-top:0; }
  .person { grid-template-columns:1fr 1.25fr; gap:24px; }
}
@media(max-width:759px) {
  .site-header { align-items:flex-start; flex-wrap:wrap; gap:6px; padding-bottom:16px; }
  .wordmark img { width:26px; }
  .site-header nav { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:8px; font-size:11px; letter-spacing:.025em; line-height:1.35; width:100%; }
  .site-header nav a { min-height:44px; min-width:0; }
  .site-header nav a.nav-work { display:flex; }
  .site-header nav .nav-team,.site-header nav .nav-agents { justify-content:center; }
  .site-header nav .nav-views { justify-content:flex-end; text-align:right; }
  .site-header nav .nav-home { display:none; }
  .site-header nav .nav-contact { position:absolute; top:20px; right:var(--gutter); gap:6px; justify-content:flex-end; }
  .hero { height:900px; }
  .hero-copy { bottom:72px; }
  .wave-legend { top:128px; }
  .hero .figure-caption { bottom:25px; }
  .building-layout { flex-direction:column; }
  .building-copy { order:0; padding:20px 0 0; }
  .building-art { order:1; }
  .depth-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; max-width:none; margin:0 0 16px; }
  .depth-choice { min-height:44px; padding:8px 10px; gap:8px; border:1px solid currentColor; opacity:1; text-align:left; }
  .depth-choice svg { display:none; }
  .depth-choice .depth-choice-number { flex:none; width:17px; font-size:11px; letter-spacing:0; }
  .depth-choice .depth-choice-label { display:block; min-height:0; margin-top:0; font-family:inherit; font-size:13px; line-height:1.25; letter-spacing:0; }
  .depth-choice.visited { opacity:1; }
  .depth-choice[aria-current=step] { background:var(--depth-accent); border-color:var(--depth-accent); color:var(--building-paper,var(--paper)); }
  .people-hero { padding-top:140px; padding-bottom:60px; }
  .people-hero h1 { font-size:clamp(38px,9vw,48px); margin:25px 0 32px; }
  .people-opening { grid-template-columns:1fr; gap:25px; }
  .people-opening>p:last-child { font-size:15px; }
  .people-section h2 { margin-top:0; }
  .person { grid-template-columns:1fr; gap:20px; padding:28px 0; }
  .person h3 { font-size:27px; }
  .person .eyebrow { font-size:9px; }
  .person-bio { grid-column:1; font-size:14px; }
}
@media(max-height:600px) and (min-width:760px) {
  .building-copy { padding-left:20px; }
  .depth-panels { min-height:135px; }
  .depth-panel h3 { font-size:23px; margin-top:12px; }
  .depth-choices { margin-top:10px; }
  .depth-choice svg { height:27px; margin-bottom:4px; }
}
@media(max-height:680px) and (max-width:759px) {
  .building-enhanced .building-sticky { padding-top:18px; }
  .building-enhanced .building-heading h2 { font-size:23px; }
  .building-enhanced .building-instruction { display:none; }
  .building-enhanced .building-layout { height:calc(100% - 82px); margin-top:14px; }
  .building-enhanced .building-copy { padding-top:0; }
  .building-enhanced .depth-panels { min-height:112px; }
  .building-enhanced .depth-panel h3 { font-size:22px; margin-top:9px; }
  .building-enhanced .depth-choices { margin-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .building-layout { height:570px; }
  .building-art { min-height:0; }
}
@media(prefers-reduced-motion:reduce) and (max-width:759px) {
  .building-layout { height:auto; }
  .building-art { flex:auto; min-height:360px; }
}

/* The reef continues the building descent at its exact final water colour. */
.reef-section { background:var(--deep); color:var(--paper); padding:65px 0 0; }
.reef-heading { max-width:1420px; margin:auto; padding:0 var(--gutter); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.reef-heading h2 { font:11px var(--label-font); letter-spacing:.16em; color:#a9b6cf; }
.reef-heading>i { height:1px; background:rgba(243,240,232,.18); flex:1; }
.reef-motion-toggle { background:transparent; border:1px solid rgba(243,240,232,.2); color:#a9b6cf; padding:10px 13px; font:10px var(--label-font); cursor:pointer; }
.reef-motion-toggle:hover { color:var(--paper); border-color:#b7c6ff; }
.reef-section .reef-canvas { height:690px; margin-top:24px; }
.reef-canvas canvas { position:absolute; inset:0; display:block; pointer-events:none; }
@media(max-width:759px) {
  .reef-section { padding-top:42px; }
  .reef-section .reef-canvas { height:570px; }
  .reef-heading { gap:14px; }
  .reef-motion-toggle { font-size:9px; padding:11px 9px; }
}
@media(prefers-reduced-motion:reduce) { .reef-motion-toggle { display:none; } }