:root {
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --paper: #f6f0e6;
  --ivory: #fffaf2;
  --sand: #dccab2;
  --camel: #b99778;
  --brown: #6d5543;
  --blue: #9c8068;
  --orange: #b6855d;
  --ink: #211a15;
  --gold: #aa8656;
  --paper-line: rgba(33, 26, 21, .22);
  --blue-line: rgba(33, 26, 21, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-sans), Arial, sans-serif; }
body:before { content: ""; position: fixed; inset: 0; z-index: 50; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.27'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
address { font-style: normal; }
::selection { color: var(--ivory); background: var(--brown); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
#about, #expertise, #approach, #contact { scroll-margin-top: 30px; }

.hero { min-height: 100vh; min-height: 100svh; padding: 0 clamp(20px, 3.5vw, 58px); overflow: hidden; position: relative; background: var(--paper); }
.site-header { height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1.5px solid var(--ink); position: relative; z-index: 3; }
.brand { display: flex; align-items: center; gap: 14px; width: max-content; }
.brand-crop { width: 52px; height: 52px; overflow: hidden; position: relative; border: 1px solid rgba(17,18,15,.2); border-radius: 50%; background: #faf9f5; flex: none; }
.brand-crop img { position: absolute; width: 236px; max-width: none; left: -91px; top: -17px; }
.brand-name { font-size: 18px; font-weight: 750; letter-spacing: .16em; line-height: .9; }
.brand-name small { display: block; font-size: 7px; letter-spacing: .42em; margin-top: 8px; color: var(--gold); }
.site-header nav { display: flex; gap: 34px; font-size: 12px; }
.site-header nav a { border-bottom: 1px solid transparent; padding: 12px 0; }
.site-header nav a:hover { border-color: var(--orange); }
.header-cta { justify-self: end; padding: 13px 16px; border: 1.5px solid var(--ink); border-radius: 99px; font-size: 11px; font-weight: 650; transition: color .2s, background .2s; }
.header-cta span { margin-left: 18px; }
.header-cta:hover { color: var(--paper); background: var(--ink); }

.hero-grid { min-height: calc(100vh - 154px); min-height: calc(100svh - 154px); display: grid; grid-template-columns: 1fr; padding: 18px 0; position: relative; z-index: 2; }
.hero-copy { border: 1.5px solid var(--ink); padding: clamp(26px, 3.2vw, 50px); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; background-image: linear-gradient(rgba(17,18,15,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,15,.055) 1px, transparent 1px); background-size: 64px 64px; }
.hero-copy > *:not(.hero-geometry) { position: relative; z-index: 2; }
.hero-geometry { position: absolute; z-index: 1; inset: 0 0 0 auto; width: 35%; overflow: hidden; border-left: 1.5px solid var(--ink); background-color: var(--sand); background-image: conic-gradient(from 90deg, var(--ivory) 25%, var(--sand) 0 50%, var(--ivory) 0 75%, var(--sand) 0); background-size: 112px 112px; }
.hero-geometry span { position: absolute; display: block; }
.geo-blue { inset: 0; background: linear-gradient(135deg, transparent 0 51%, rgba(109,85,67,.22) 51% 100%); }
.geo-paper { z-index: 2; width: 120%; height: 36%; right: -38%; bottom: -7%; background: rgba(255,250,242,.92); border-top: 1.5px solid var(--ink); transform: rotate(-31deg); }
.geo-circle { z-index: 3; width: clamp(145px, 15vw, 235px); aspect-ratio: 1; border-radius: 50%; background: var(--brown); top: 20%; left: 18%; box-shadow: 0 0 0 18px rgba(246,240,230,.5); }
.geo-line { z-index: 4; width: 150%; height: 1.5px; background: var(--ink); left: -18%; top: 58%; transform: rotate(-38deg); transform-origin: center; }
.geo-gold { z-index: 4; width: 1.5px; height: 120%; background: var(--gold); top: -10%; left: 72%; transform: rotate(17deg); }
.hero-geometry > b { position: absolute; z-index: 5; top: 24px; right: 25px; color: var(--ink); background: var(--ivory); padding: 8px 10px; border: 1px solid var(--ink); font: 8px var(--font-mono); letter-spacing: .14em; }
.eyebrow { width: 62%; margin: 0; display: flex; justify-content: space-between; gap: 20px; font: 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow b { color: var(--blue); font-weight: 500; }
h1 { max-width: 62%; margin: clamp(30px, 5vh, 60px) 0; font-size: clamp(54px, 6.25vw, 100px); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; font-weight: 760; }
h1 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; text-transform: none; }
.hero-bottom { width: 62%; display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 28px; align-items: end; }
.hero-bottom p { margin: 0; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.55; letter-spacing: -.025em; }
.primary-button { min-width: 230px; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: var(--orange); color: var(--ink); border: 1.5px solid var(--orange); font-size: 11px; font-weight: 700; transition: background .2s, color .2s; }
.line-arrow { width: 17px; height: 10px; display: inline-block; position: relative; flex: none; }
.line-arrow:before { content: ""; position: absolute; left: 0; right: 1px; top: 5px; height: 1px; background: currentColor; }
.line-arrow:after { content: ""; position: absolute; width: 6px; height: 6px; right: 1px; top: 2px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.primary-button:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.hero-capabilities { width: 62%; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-top: 1px solid var(--paper-line); }
.hero-capabilities span { padding-top: 15px; font: 9px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.hero-capabilities span + span { padding-left: 16px; border-left: 1px solid var(--paper-line); }
.hero-capabilities b { color: var(--orange); margin-right: 10px; font-weight: 500; }
.hero-strip { min-height: 62px; margin: 0 calc(clamp(20px, 3.5vw, 58px) * -1); padding: 0 clamp(20px, 3.5vw, 58px); background: var(--brown); color: var(--ivory); display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 2; font: 9px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.hero-strip i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }

.section-label { display: flex; align-items: center; gap: 15px; font: 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.section-label > span { width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 8px; }
.section-label-light { color: rgba(255,250,242,.78); }
.manifesto { background: var(--paper); padding: 125px clamp(24px, 7vw, 112px) 0; }
.manifesto-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: start; margin: 86px 0 116px; }
.manifesto h2, .services h2, .global-copy h2, .approach h2, .principles h2, .contact h2 { margin: 0; font-size: clamp(52px, 6.3vw, 102px); line-height: .95; letter-spacing: -.065em; font-weight: 650; }
.manifesto h2 em, .services h2 em, .global-copy h2 em, .approach h2 em, .principles h2 em, .contact h2 em { font-family: Georgia, serif; font-weight: 400; }
.manifesto-copy { max-width: 520px; }
.manifesto-copy p { margin: 0 0 24px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.65; letter-spacing: -.02em; color: #4c504b; }
.manifesto-copy p:first-child { color: var(--ink); }
.text-link { display: flex; justify-content: space-between; border-bottom: 1px solid var(--paper-line); margin-top: 42px; padding: 17px 0; font: 9px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.text-link span { color: var(--orange); font-size: 16px; }
.promise-line { min-height: 118px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1.5px solid var(--ink); font-size: clamp(17px, 1.7vw, 25px); letter-spacing: -.035em; }
.promise-line span:nth-child(2) { text-align: center; }
.promise-line strong { text-align: right; color: var(--blue); font-family: Georgia, serif; font-style: italic; font-weight: 400; }

.services { padding: 120px clamp(20px, 3.5vw, 58px); color: var(--ink); background: var(--sand); }
.services .section-label-light { color: var(--brown); }
.services-head { display: flex; align-items: flex-start; justify-content: space-between; }
.services-head > p { margin: 0; text-align: right; color: rgba(33,26,21,.62); font: 9px/1.7 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.services h2 { max-width: 1080px; margin: 78px 0 88px; }
.services h2 em { color: var(--brown); }
.service-list { border-top: 1px solid var(--paper-line); }
.service-row { min-height: 180px; display: grid; grid-template-columns: 120px minmax(250px, .9fr) 1.1fr; gap: 30px; align-items: center; border-bottom: 1px solid var(--paper-line); padding: 28px 10px; transition: color .25s, background .25s, padding .25s; }
.service-number { align-self: start; padding-top: 12px; color: rgba(33,26,21,.55); font: 8px var(--font-mono); letter-spacing: .14em; }
.service-row h3 { margin: 0; font-size: clamp(25px, 2.3vw, 37px); line-height: 1.05; letter-spacing: -.045em; font-weight: 570; }
.service-row p { margin: 0; max-width: 570px; color: rgba(33,26,21,.66); font-size: 14px; line-height: 1.65; }
.service-row:hover { color: var(--ink); background: var(--ivory); padding-left: 26px; padding-right: 26px; }
.service-row:hover p, .service-row:hover .service-number { color: #5e625b; }

.global-section { min-height: 820px; display: grid; grid-template-columns: 1.15fr .85fr; background: var(--ivory); color: var(--ink); overflow: hidden; }
.global-board { min-height: 820px; position: relative; overflow: hidden; border-right: 1.5px solid var(--ink); background-color: var(--ivory); background-image: conic-gradient(from 90deg, var(--sand) 25%, var(--ivory) 0 50%, var(--sand) 0 75%, var(--ivory) 0); background-size: clamp(90px, 10vw, 158px) clamp(90px, 10vw, 158px); }
.global-board:after { content: ""; position: absolute; inset: 8%; border: 1.5px solid rgba(33,26,21,.65); }
.board-coordinate { position: absolute; z-index: 3; color: rgba(33,26,21,.64); font: 8px var(--font-mono); letter-spacing: .16em; }
.board-top { top: 4%; left: 10%; right: 10%; word-spacing: clamp(16px, 3vw, 52px); }
.board-side { top: 11%; bottom: 11%; left: 4%; display: flex; flex-direction: column; justify-content: space-between; line-height: 6.5; }
.board-path { position: absolute; z-index: 4; width: 86%; height: 2px; left: 7%; top: 54%; background: var(--brown); transform: rotate(-32deg); box-shadow: 0 0 0 1px rgba(255,250,242,.25); }
.board-start, .board-target { position: absolute; z-index: 5; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ink); font: 7px var(--font-mono); letter-spacing: .1em; }
.board-start { left: 13%; bottom: 20%; background: var(--ivory); }
.board-target { right: 15%; top: 18%; color: var(--ivory); background: var(--brown); }
.global-board > b { position: absolute; z-index: 5; right: 12%; bottom: 12%; font-size: clamp(33px, 4vw, 62px); line-height: .83; letter-spacing: -.06em; text-align: right; }
.global-copy { padding: clamp(70px, 8vw, 128px) clamp(35px, 6vw, 98px); display: flex; flex-direction: column; justify-content: center; }
.global-copy h2 { margin: 72px 0 35px; }
.global-copy h2 em { color: var(--brown); }
.global-copy > p { max-width: 570px; margin: 0; font-size: 17px; line-height: 1.7; letter-spacing: -.02em; }
.region-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.region-list span { padding: 10px 14px; border: 1px solid rgba(17,18,15,.5); border-radius: 99px; font: 8px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }

.approach { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; padding: 130px clamp(24px, 7vw, 112px); background: var(--paper); }
.approach-intro { position: sticky; top: 50px; align-self: start; }
.approach h2 { margin: 76px 0 38px; }
.approach h2 em { color: var(--blue); }
.approach-intro > p { max-width: 500px; margin: 0; color: #565a54; font-size: 17px; line-height: 1.7; }
.approach-steps { border-top: 1px solid var(--paper-line); }
.approach-steps article { min-height: 170px; display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: center; border-bottom: 1px solid var(--paper-line); }
.approach-steps article > span { align-self: start; padding-top: 40px; color: var(--orange); font: 9px var(--font-mono); letter-spacing: .13em; }
.approach-steps h3 { margin: 0 0 10px; font-size: clamp(28px, 2.4vw, 40px); letter-spacing: -.045em; font-weight: 600; }
.approach-steps p { max-width: 480px; margin: 0; color: #666a63; font-size: 14px; line-height: 1.65; }

.principles { padding: 120px clamp(20px, 3.5vw, 58px); color: var(--ink); background: #e6d8c7; }
.principles .section-label-light { color: var(--brown); }
.principles h2 { margin: 78px 0 80px; }
.principles h2 em { color: var(--brown); }
.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--paper-line); border-left: 1px solid var(--paper-line); }
.principle-grid article { min-height: 340px; display: flex; flex-direction: column; padding: 27px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); background: rgba(255,250,242,.16); }
.principle-grid article:nth-child(even) { background: rgba(185,151,120,.18); }
.principle-grid article > span { color: var(--brown); font: 9px var(--font-mono); letter-spacing: .13em; }
.principle-grid h3 { margin: auto 0 18px; font-size: clamp(25px, 2.1vw, 34px); letter-spacing: -.04em; font-weight: 560; }
.principle-grid p { margin: 0; color: rgba(33,26,21,.64); font-size: 14px; line-height: 1.65; }

.contact { padding: 105px clamp(24px, 7vw, 112px) 120px; color: var(--ink); background: var(--sand); }
.contact .section-label-light { color: var(--brown); }
.contact-top { display: flex; justify-content: space-between; align-items: center; }
.contact-top > p { margin: 0; color: rgba(33,26,21,.62); font: 9px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.contact h2 { margin: 90px 0 90px; font-size: clamp(76px, 10.5vw, 166px); line-height: .8; }
.contact h2 em { color: var(--orange); }
.contact-grid { display: grid; grid-template-columns: .7fr 1.55fr .55fr; gap: 40px; align-items: end; padding-top: 32px; border-top: 1px solid var(--paper-line); }
.contact-grid > p { margin: 0; font-size: 17px; line-height: 1.55; }
.email-link { font-size: clamp(17px, 2vw, 30px); letter-spacing: -.035em; white-space: nowrap; }
.email-link span { color: var(--orange); margin-left: 18px; }
.contact address { justify-self: end; color: rgba(33,26,21,.66); font: 9px/1.7 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.form-status { margin: 52px 0 0; padding: 18px 20px; border: 1.5px solid var(--ink); font-size: 14px; line-height: 1.5; }
.form-success { background: var(--ivory); }
.form-error { color: var(--ivory); background: var(--brown); }
.form-error a { text-decoration: underline; }
.contact-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 64px; padding-top: 38px; border-top: 1px solid var(--paper-line); }
.contact-form label { display: flex; flex-direction: column; gap: 10px; }
.contact-form label > span, .form-consent { font: 8px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; border: 1.5px solid var(--ink); border-radius: 0; padding: 15px 16px; color: var(--ink); background: rgba(255,250,242,.55); font: 15px/1.45 var(--font-sans); appearance: none; }
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--brown); outline-offset: 2px; background: var(--ivory); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.form-message { grid-column: 1 / -1; }
.form-consent { grid-column: 1 / 3; max-width: 600px; margin: 0; align-self: center; color: rgba(33,26,21,.64); }
.contact-form button { grid-column: 3; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1.5px solid var(--ink); padding: 16px 18px; color: var(--ivory); background: var(--brown); font: 700 11px var(--font-sans); cursor: pointer; }
.contact-form button:hover { color: var(--ink); background: var(--ivory); }
.contact-form button span { font-size: 18px; }
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

footer { padding: 72px clamp(24px, 5vw, 76px) 30px; display: grid; grid-template-columns: 1fr .7fr .5fr; gap: 45px; color: #cdbda9; background: #2a211b; }
.brand-footer { color: var(--paper); align-self: start; }
.brand-footer .brand-crop { border-color: rgba(242,239,230,.25); }
.footer-statement { margin: 0; font-size: 13px; line-height: 1.65; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
.footer-nav a:hover { color: var(--orange); }
.footer-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(242,239,230,.14); color: #666861; font: 8px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.footer-bottom a:nth-child(2) { text-align: center; }
.footer-bottom a:last-child { text-align: right; }
.footer-bottom a:hover { color: var(--paper); }

@media (max-width: 1180px) {
  .site-header nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
}

@media (max-width: 1050px) {
  .hero-geometry { width: 32%; }
  .eyebrow { width: 65%; }
  h1, .hero-bottom, .hero-capabilities { max-width: none; width: 65%; }
  .manifesto-grid, .approach { grid-template-columns: 1fr; }
  .approach-intro { position: static; }
  .service-row { grid-template-columns: 85px .8fr 1.2fr; }
  .global-section { grid-template-columns: .85fr 1.15fr; }
  .global-copy { padding-left: 45px; padding-right: 45px; }
  .principle-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1.6fr; }
  .contact address { grid-column: 1 / -1; justify-self: start; }
  .contact-form { grid-template-columns: repeat(2, 1fr); }
  .form-consent { grid-column: 1; }
  .contact-form button { grid-column: 2; }
}

@media (max-width: 800px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero-grid { min-height: auto; }
  .hero-geometry { width: 28%; }
  .eyebrow { width: 69%; }
  h1, .hero-bottom, .hero-capabilities { width: 69%; }
  .hero-bottom { grid-template-columns: 1fr; }
  .primary-button { width: 100%; }
  .geo-circle { width: 120px; left: 10%; }
  .hero-strip span:nth-of-type(2), .hero-strip i:nth-of-type(2) { display: none; }
  .manifesto { padding-top: 90px; }
  .manifesto-grid { margin: 60px 0 78px; }
  .promise-line { grid-template-columns: 1fr; gap: 10px; padding: 30px 0; }
  .promise-line span:nth-child(2), .promise-line strong { text-align: left; }
  .services { padding-top: 90px; padding-bottom: 90px; }
  .services h2 { margin: 58px 0 60px; }
  .service-row { min-height: 220px; grid-template-columns: 65px 1fr; gap: 20px; }
  .service-row p { grid-column: 2 / 3; }
  .global-section { grid-template-columns: 1fr; }
  .global-board { min-height: 520px; border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .global-copy { min-height: 640px; }
  .approach { padding-top: 90px; padding-bottom: 90px; }
  .principles { padding-top: 90px; padding-bottom: 90px; }
  .contact { padding-top: 90px; padding-bottom: 90px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact address { grid-column: auto; }
  .contact-form { grid-template-columns: 1fr; }
  .form-message, .form-consent, .contact-form button { grid-column: 1; }
  footer { grid-template-columns: 1fr 1fr; }
  .brand-footer { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-header { height: 84px; }
  .brand-crop { width: 44px; height: 44px; }
  .brand-crop img { width: 200px; left: -77px; top: -14px; }
  .brand-name { font-size: 14px; }
  .header-cta { padding: 10px 12px; font-size: 0; }
  .header-cta:before { content: "Contact"; font-size: 9px; }
  .header-cta span { margin-left: 7px; }
  .hero-copy { min-height: 650px; padding: 24px; }
  .hero-geometry { inset: auto 18px 18px auto; width: 132px; height: 132px; border: 1.5px solid var(--ink); }
  .hero-geometry > b { top: 10px; right: 10px; font-size: 6px; }
  .geo-circle { width: 68px; top: 17%; left: 12%; }
  .geo-paper { height: 62%; bottom: -18%; }
  .eyebrow b { display: none; }
  .eyebrow { width: 100%; }
  h1 { width: 100%; font-size: clamp(46px, 13.5vw, 59px); margin: 38px 0; }
  .hero-bottom { width: 100%; grid-template-columns: 1fr; padding-right: 0; }
  .primary-button { width: 100%; }
  .hero-capabilities { width: calc(100% - 155px); grid-template-columns: 1fr; margin-top: 26px; }
  .hero-capabilities span { min-height: 43px; padding: 9px 0; font-size: 7px; }
  .hero-capabilities span + span { padding-left: 0; border-left: 0; border-top: 1px solid var(--paper-line); }
  .hero-capabilities b { display: inline; margin: 0 7px 0 0; }
  .hero-strip { justify-content: center; }
  .hero-strip span:nth-of-type(3), .hero-strip i:nth-of-type(3) { display: none; }
  .manifesto h2, .services h2, .global-copy h2, .approach h2, .principles h2 { font-size: 46px; }
  .manifesto-grid { gap: 45px; }
  .services-head > p { display: none; }
  .service-row { min-height: 270px; grid-template-columns: 45px 1fr; padding: 22px 4px; }
  .service-row h3 { font-size: 27px; }
  .service-row:hover { padding-left: 10px; padding-right: 10px; }
  .global-board { min-height: 420px; background-size: 82px 82px; }
  .global-board > b { font-size: 33px; }
  .board-start, .board-target { width: 52px; height: 52px; }
  .global-copy { min-height: 610px; padding: 70px 24px; }
  .approach { gap: 60px; }
  .approach h2 { margin-top: 55px; }
  .approach-steps article { grid-template-columns: 50px 1fr; }
  .principles h2 { margin: 58px 0 60px; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article { min-height: 300px; }
  .contact-top { align-items: flex-start; gap: 20px; }
  .contact-top > p { max-width: 120px; text-align: right; line-height: 1.6; }
  .contact h2 { margin: 70px 0; font-size: 69px; }
  .email-link { display: flex; align-items: flex-start; font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
  .email-link span { margin-left: 6px; }
  footer { grid-template-columns: 1fr 1fr; }
  .footer-bottom { grid-template-columns: 1fr; gap: 12px; }
  .footer-bottom a:nth-child(2), .footer-bottom a:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Photographic editorial direction */
.hero-stage { min-height: calc(100vh - 154px); min-height: calc(100svh - 154px); position: relative; z-index: 2; margin: 18px 0; overflow: hidden; border: 1.5px solid var(--ink); background: #2d241e; }
.hero-media { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.hero-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,15,12,.18), transparent 62%), linear-gradient(0deg, rgba(20,15,12,.45), transparent 42%); pointer-events: none; }
.hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 56%; }
.hero-media figcaption { position: absolute; z-index: 2; right: 24px; bottom: 22px; display: flex; gap: 28px; padding: 11px 14px; border: 1px solid rgba(255,250,242,.6); color: var(--ivory); background: rgba(33,26,21,.48); backdrop-filter: blur(12px); font: 8px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.hero-panel { width: min(760px, 57%); min-height: calc(100vh - 154px); min-height: calc(100svh - 154px); position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(30px, 4vw, 64px); border-right: 1.5px solid rgba(33,26,21,.7); background: rgba(255,250,242,.92); backdrop-filter: blur(14px); }
.hero-panel .eyebrow, .hero-panel h1, .hero-panel .hero-bottom, .hero-panel .hero-capabilities { width: 100%; max-width: none; }
.hero-panel h1 { margin: clamp(36px, 6vh, 72px) 0; font-size: clamp(58px, 6.6vw, 108px); }
.hero-panel .hero-bottom { grid-template-columns: minmax(230px,1fr) auto; }
.hero-panel .primary-button { color: var(--ivory); background: var(--brown); border-color: var(--brown); }
.hero-panel .primary-button:hover { color: var(--ink); background: var(--ivory); }

.story { min-height: 760px; display: grid; grid-template-columns: 1fr 1fr; color: var(--ink); background: var(--paper); }
.story-media { min-height: 760px; position: relative; margin: 0; overflow: hidden; background: var(--brown); }
.story-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(25,18,14,.38), transparent 44%); pointer-events: none; }
.story-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .8s ease; }
.story:hover .story-media img { transform: scale(1.025); }
.story-media figcaption { position: absolute; z-index: 2; left: 26px; bottom: 24px; padding: 11px 14px; border: 1px solid rgba(255,250,242,.65); color: var(--ivory); background: rgba(33,26,21,.42); backdrop-filter: blur(10px); font: 8px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.story-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(70px, 8vw, 130px) clamp(38px, 7vw, 110px); }
.story h2 { margin: 72px 0 38px; font-size: clamp(52px, 6.3vw, 102px); line-height: .92; letter-spacing: -.065em; font-weight: 650; }
.story h2 em { color: var(--brown); font-family: Georgia,serif; font-weight: 400; }
.story-copy > p { max-width: 590px; margin: 0 0 22px; color: rgba(33,26,21,.68); font-size: 16px; line-height: 1.7; letter-spacing: -.015em; }
.story-copy > .story-lead { color: var(--ink); font-size: clamp(18px,1.5vw,23px); line-height: 1.55; }
.story-copy .text-link { max-width: 520px; }
.story-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 38px; padding-top: 23px; border-top: 1px solid var(--paper-line); font: 8px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.story-points strong { color: var(--brown); font-weight: 500; }
.story-reverse { background: var(--ivory); }
.story-reverse .story-media { order: 2; }
.story-reverse .story-copy { order: 1; }

@media (max-width: 1050px) {
  .hero-panel { width: 62%; }
  .hero-panel h1 { font-size: clamp(54px,7.2vw,78px); }
  .hero-panel .hero-bottom { grid-template-columns: 1fr; }
  .story { min-height: 680px; }
  .story-media { min-height: 680px; }
  .story-copy { padding: 76px 46px; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-stage { min-height: 0; display: flex; flex-direction: column; }
  .hero-media { height: clamp(320px, 46vh, 460px); height: clamp(320px, 46svh, 460px); position: relative; inset: auto; order: 1; flex: none; }
  .hero-media:after { background: linear-gradient(0deg, rgba(20,15,12,.34), transparent 56%); }
  .hero-media figcaption { right: 14px; bottom: 14px; left: 14px; justify-content: space-between; }
  .hero-panel { width: 100%; min-height: 0; order: 2; padding: 38px 32px 32px; border-top: 1.5px solid var(--ink); border-right: 0; background: var(--ivory); backdrop-filter: none; }
  .hero-panel h1 { width: 100%; margin: 40px 0; font-size: clamp(51px,11vw,78px); }
  .hero-panel .eyebrow { width: 100%; }
  .hero-panel .hero-bottom { width: 100%; }
  .hero-panel .hero-capabilities { width: 100%; grid-template-columns: repeat(3,1fr); }
  .story { min-height: 0; grid-template-columns: 1fr; }
  .story-media, .story-reverse .story-media { min-height: clamp(360px,62vw,520px); order: 1; }
  .story-copy, .story-reverse .story-copy { order: 2; padding: 78px 38px; }
  .story h2 { margin: 55px 0 32px; font-size: clamp(50px,10vw,72px); }
}

@media (max-width: 560px) {
  .hero-stage { margin: 12px 0; }
  .hero-media { height: 300px; }
  .hero-media img { object-position: 57% center; }
  .hero-media figcaption { gap: 12px; font-size: 6px; }
  .hero-panel { padding: 30px 24px 26px; }
  .hero-panel h1 { margin: 34px 0; font-size: clamp(43px,13vw,58px); line-height: .84; }
  .hero-panel .hero-bottom { gap: 22px; }
  .hero-panel .hero-capabilities { width: 100%; grid-template-columns: 1fr; margin-top: 28px; }
  .hero-panel .hero-capabilities span { min-height: 0; padding: 10px 0; }
  .story-media, .story-reverse .story-media { min-height: 300px; }
  .story-copy, .story-reverse .story-copy { padding: 62px 24px; }
  .story h2 { margin: 45px 0 28px; font-size: 47px; }
  .story-points { grid-template-columns: 1fr; gap: 12px; }
  .story-media figcaption { left: 15px; bottom: 15px; }
  .contact-top { flex-direction: column; }
  .contact-top > p { max-width: none; text-align: left; }
  .contact h2 { font-size: clamp(46px, 15vw, 64px); }
  footer { grid-template-columns: 1fr; }
  .brand-footer { grid-column: auto; }
}

@media (max-width: 900px) and (max-height: 560px) {
  .hero-media { height: 260px; }
  .hero-panel { padding-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-media img { transition: none; }
}

/* Keep flexible content within its column at intermediate and mobile widths. */
@media (hover: none) and (pointer: coarse) {
  .contact-form input, .contact-form textarea { font-size: 16px; }
}

.hero-panel > *, .hero-bottom > *, .story > *, .story-copy > *,
.service-row > *, .approach > *, .approach-steps article > *,
.principle-grid > *, .contact-grid > *, .contact-form > *, footer > * {
  min-width: 0;
}
.hero-panel .primary-button { min-width: 230px; }
.email-link, .form-status { overflow-wrap: anywhere; }
.section-label > span { flex-shrink: 0; }

@media (min-width: 1051px) and (max-width: 1120px) {
  .hero-panel .hero-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* A definite media box avoids percentage-height image sizing in Safari. */
  .hero-media { width: 100%; }
  .story-media img { position: absolute; inset: 0; }
  .story-media figcaption { max-width: calc(100% - 52px); }
  .contact-form input, .contact-form textarea { font-size: 16px; }
}

@media (max-width: 560px) {
  .hero-panel .hero-bottom { grid-template-columns: minmax(0, 1fr); }
  .hero-panel .primary-button { min-width: 0; }
  .hero-media figcaption { flex-wrap: wrap; }
  .story-media figcaption { max-width: calc(100% - 30px); }
}
