@font-face{font-family:Barlow Condensed;src:url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Barlow Condensed;src:url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Barlow Condensed;src:url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:DM Sans;src:url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:DM Sans;src:url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:DM Sans;src:url('/fonts/dm-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:DM Sans;src:url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:IBM Plex Mono;src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:IBM Plex Mono;src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

:root{--paper:#f4f3ee;--ink:#191b19;--dark:#181a19;--red:#f54031;--button-red:#da3025;--line:#cfcfc7;--mono:"IBM Plex Mono",monospace;--display:"Barlow Condensed","Arial Narrow",sans-serif;--body:"DM Sans",Arial,sans-serif;--gutter:clamp(26px,5vw,92px);--header:70px}
*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:var(--header);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--paper);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,ul{margin:0}
h1,h2,h3{line-height:1.05}
button,input,textarea,select{font:inherit}
button,a{color:inherit;-webkit-tap-highlight-color:transparent}
a{text-decoration:none}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:wait}
button,select,input,textarea{border-radius:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f35a40;outline-offset:4px}
img{display:block;max-width:100%}
button svg,a svg{flex:none}
::selection{background:#f55544;color:#121312}
.container{width:calc(100% - var(--gutter)*2);max-width:1600px;margin-inline:auto}
.sr-only,.trap{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;clip:rect(0,0,0,0)!important;overflow:hidden!important;white-space:nowrap!important;border:0!important}
.skip{position:fixed;left:12px;top:-100px;z-index:100;background:white;padding:10px 18px;color:var(--ink)}
.skip:focus{top:8px}
.accent{color:var(--red)}
.kicker,.micro{font:500 10.5px/1.45 var(--mono);letter-spacing:.105em;text-transform:uppercase}
.kicker{display:flex;align-items:center;gap:12px}
.red-rule{display:block;flex:0 0 27px;height:3px;background:var(--red)}
.kicker-divider{opacity:.55}
.section-pad{padding-block:clamp(55px,5.3vw,92px)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:13px 0 35px}
.section-heading h2,.about h2,.contact-band h2,.dialog h2{font-family:var(--display);font-weight:700;font-size:clamp(48px,4.65vw,81px);line-height:.99;letter-spacing:-.018em}
.section-heading h2{font-weight:600}
.button{min-height:49px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:23px;font:600 14px/1.2 var(--body);transition:background .2s,transform .2s,color .2s}
.button:hover{transform:translateY(-2px)}
.button svg,.hero-secondary svg,.head-contact svg,.about-link svg,.text-link svg{transition:transform .22s}
.button:hover svg,.head-contact:hover svg,.hero-secondary:hover svg,.text-link:hover svg{transform:translate(2px,-2px)}
.red-button{background:var(--button-red);color:#fff}
.red-button:hover{background:#c3251c}
.ink-button{background:#191b19;color:#fff}
.ink-button:hover{background:#353632}

.site-header{position:sticky;top:0;z-index:20;background:#171917;color:#f6f5f0;border-bottom:1px solid #383a36}
.header-inner{height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:35px}
.brand-home,.footer-brand>a{display:inline-block;width:max-content}
.brand-logo{width:clamp(185px,15vw,238px);height:auto}
.desktop-nav{height:100%;display:flex;align-items:stretch;gap:clamp(24px,2.7vw,49px)}
.desktop-nav a{display:flex;align-items:center;color:#e1e3db;font-size:13px;font-weight:500;position:relative;transition:color .2s}
.desktop-nav a::after{content:"";height:2px;background:var(--red);position:absolute;bottom:13px;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .22s}
.desktop-nav a:hover,.desktop-nav a[aria-current]{color:#fff}
.desktop-nav a:hover::after,.desktop-nav a[aria-current]::after{transform:scaleX(1)}
.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:13px}
.head-contact{border:1px solid #62645f;min-height:38px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:22px;color:#fff;font-size:12px;font-weight:600;transition:background .2s,border-color .2s}
.head-contact:hover{background:#323431;border-color:#c9cbc2}
.head-contact svg{color:#ff6252}
.menu-toggle,.mobile-menu,.mobile-shade{display:none}

.hero{position:relative;isolation:isolate;overflow:hidden;height:clamp(548px,min(46.5vw,74svh),770px);background:#393b38;color:#f6f5ef}
.hero-photo,.hero-photo picture,.hero-photo img,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-photo{z-index:-3;animation:photo-in .55s ease-out both}
.hero-photo img{object-fit:cover;object-position:var(--scene-position);filter:grayscale(1) contrast(1.14) brightness(1.02)}
.hero-shade{z-index:-2;background:linear-gradient(90deg,rgba(15,17,16,.90) 0%,rgba(17,19,18,.78) 21%,rgba(18,19,19,.51) 39%,rgba(17,18,18,.10) 62%,rgba(18,18,17,.02) 80%),linear-gradient(0deg,rgba(12,14,13,.82),rgba(14,15,14,.20) 22%,transparent 50%,rgba(13,15,14,.06) 80%,rgba(12,14,13,.18))}
.hero-inner{position:relative;display:flex;flex-direction:column;height:100%}
.hero-copy{margin-block:auto;padding:35px 0 25px;position:relative;z-index:1;align-self:flex-start;max-width:660px}
.hero-copy .kicker{color:#f1f0ea;font-size:10.5px;letter-spacing:.154em;gap:12px}
.hero h1{font:700 clamp(105px,8.95vw,159px)/.837 var(--display);text-transform:uppercase;letter-spacing:-.018em;margin:26px 0 22px}
.hero h1 .accent{margin-left:1px}
.hero-copy>p{font-size:clamp(15px,1.06vw,18px);line-height:1.55;max-width:410px;color:#e2e3dc;text-wrap:pretty}
.hero-actions{display:flex;align-items:center;gap:27px;margin-top:25px}
.hero .red-button{background:#dc3226}
.hero .red-button:hover{background:#d92d21}
.hero .red-button:hover svg{transform:translateY(3px)}
.hero-secondary{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;position:relative;min-height:38px}
.hero-secondary::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:#d2d3c8;opacity:.55}
.survey-mark{position:absolute;right:.2%;top:29px;width:19px;height:19px;opacity:.68;pointer-events:none}
.survey-mark span{position:absolute;background:#eeeeea}
.survey-mark span:first-child{width:100%;height:1px;left:0;top:9px}
.survey-mark span:last-child{height:100%;width:1px;top:0;left:9px}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid rgba(238,239,230,.36);height:72px;flex:none}
.slide-position,.frame-info,.frame-control,.slide-marks,.hero-counter{display:flex;align-items:center}
.slide-position{gap:19px}
.hero-counter{font:400 11px/1 var(--mono);gap:8px;letter-spacing:.08em;color:#c2c5bb}
.hero-counter strong{color:#fff;font-size:15px;font-weight:500}
.hero-counter>span{color:#aaa}
.slide-marks{gap:5px}
.slide-marks button{height:36px;width:33px;display:grid;align-items:center}
.slide-marks span{height:2px;background:#83877f;transition:background .3s}
.slide-marks button.selected span,.slide-marks button:hover span{background:var(--red)}
.frame-info{gap:18px}
.frame-caption{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:12px;color:#e2e3dd}
.frame-ident{display:flex;align-items:center;gap:8px;font:500 9px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:#fff}
.frame-ident i,.tiny-square{width:5px;height:5px;background:var(--red);display:inline-block}
.frame-control{gap:5px}
.frame-control button{width:38px;height:38px;border:1px solid #999b94;display:grid;place-items:center;color:white;transition:background .18s}
.frame-control button:hover{background:#ffffff27}


.expertise{background:var(--paper);color:var(--ink)}
.expertise .section-heading{margin:0 0 clamp(25px,3vw,45px)}
.expertise-grid{display:grid;grid-template-columns:1.06fr 1fr;gap:clamp(28px,6vw,120px)}
.service-panel{border-top:1px solid #a9aca1}
.service{border-bottom:1px solid #c5c9bd}
.service h3>button{display:grid;align-items:center;grid-template-columns:33px 1fr 24px;gap:11px;width:100%;color:var(--ink);text-align:left;min-height:76px}
.service h3>button>span:nth-child(2){font:600 clamp(27px,2.36vw,42px)/1.1 var(--display)}
.service h3>button:hover,.service.active h3>button>svg{color:#ab2d21}
.service-index{font:400 10px/1 var(--mono);letter-spacing:.05em;color:#596052}
.service.active .service-index{color:#ae3025}
.service-content{margin:0 35px 22px 44px}
.service-content[hidden]{display:none}
.service-content p{color:#475040;font-size:15px;line-height:1.6;max-width:55ch;text-wrap:pretty}
.text-link,.about-link{font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid #9faaa0;padding-bottom:3px}
.text-link{margin-top:14px}
.service-photo{position:relative;min-width:0;min-height:330px;overflow:hidden;background:#30332e}
.service-photo>img{width:100%;height:100%;position:absolute;object-fit:cover;filter:saturate(.82);animation:photo-in .4s both}
.service-photo::after{content:"";position:absolute;inset:34% 0 0;background:linear-gradient(0deg,#171a17bd,transparent 55%);pointer-events:none}
.service-photo figcaption{position:absolute;z-index:1;bottom:19px;left:20px;right:20px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:#fff;font-size:15px}

.about{background:#eaeae3}
.about-grid{display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;gap:clamp(40px,7vw,135px)}
.about-copy h2{margin:19px 0 23px;font-size:clamp(60px,6.1vw,108px);line-height:.94}
.about-copy h2 em{font-style:normal;color:#60645d}
.about-copy p{font-size:15px;max-width:490px;color:#444840;margin-block:10px}
.about-link{margin-top:15px;border-color:#73776f}
.about-link:hover svg{transform:translateX(3px)}
.territory-board{position:relative;isolation:isolate;min-height:430px;height:clamp(430px,34vw,590px);background-color:#dedfd5;background-image:linear-gradient(#bfc2b859 1px,transparent 1px),linear-gradient(90deg,#bfc2b859 1px,transparent 1px);background-size:26px 26px;border:1px solid #c5c7bc;overflow:hidden}
.map-head{position:absolute;z-index:1;top:18px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between}
.map-head .micro{display:inline-flex;gap:8px;align-items:center}
.map-north{font:500 12px/1 var(--mono)}
.map-island{position:absolute;height:82%;max-width:87%;width:auto;left:50%;transform:translateX(-50%);top:4%;color:#717967}
.island-base{fill:#d4d7c8;stroke:#8f9587;stroke-width:1.2}
.map-point{color:#434b40}
.map-point path{fill:none;stroke:currentColor;stroke-width:1}
.map-point text{font:500 12px var(--mono);fill:#30352c;paint-order:stroke;stroke:#dedfd5;stroke-width:3px;stroke-linejoin:round}
.map-ring{fill:#e2e3d8;stroke:currentColor;stroke-width:1;opacity:.82}
.map-dot{fill:currentColor}
.map-point.current{color:#d72c23}
.map-point.current .map-ring{fill:#f0beb1;stroke-width:1.6}
.map-foot{position:absolute;bottom:0;left:0;right:0;min-height:67px;background:#e9eae2e8;border-top:1px solid #bfc3b6;padding:12px 19px;display:flex;align-items:center;justify-content:space-between}
.map-foot>div{display:flex;flex-direction:column;gap:1px}
.map-foot .micro{font-size:9px;color:#5e6357}
.map-foot strong{font:600 23px/1.15 var(--display)}
.map-foot>a,.map-foot>button{width:34px;height:34px;border:1px solid #999f91;display:grid;place-items:center}
.map-foot>a:hover,.map-foot>button:hover{background:#d4d8c8}

.contact-band{background:#ef4837;color:#1e201c;padding-block:clamp(43px,5.1vw,85px)}
.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
.contact-band h2{margin:0;font-size:clamp(52px,5.8vw,99px);max-width:900px;font-weight:600}
.footer{background:var(--paper);padding-top:46px}
.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1.1fr .55fr;gap:30px;padding-bottom:40px}
.footer h3{font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;color:#595c53}
.footer-main>div:not(.footer-brand) a,.footer-main p{font-size:13px;line-height:1.7}
.footer-main>div:not(.footer-brand) a{display:flex;align-items:center;gap:5px;width:max-content;max-width:100%}
.footer-main>div:not(.footer-brand) a:hover,.footer-bottom a:hover,.footer-bottom button:hover{text-decoration:underline}
.footer-brand .brand-logo{width:200px}
.footer-brand p{margin-top:14px;color:#585c52}
.footer-bottom{display:flex;align-items:center;gap:26px;min-height:64px;border-top:1px solid var(--line);font:400 10px/1.55 var(--mono);color:#55594f}
.footer-bottom>span{margin-right:auto}
.footer-bottom a{display:inline-flex;align-items:center;gap:6px}
.legal-dot{margin-inline:5px}

.dialog{width:min(96vw,780px);max-height:91svh;padding:0;border:0;position:fixed;color:var(--ink);background:var(--paper);box-shadow:0 30px 90px #0006;overscroll-behavior:contain}
.dialog[open]{animation:modal-in .23s ease-out}
.dialog::backdrop{background:rgba(8,11,9,.72);backdrop-filter:blur(4px)}
.modal-close{position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;border:1px solid #b9bdb1;width:38px;height:38px;background:#f6f5f0;color:var(--ink)}
.modal-close:hover{background:#e1e2d8}
.dialog h2{font-size:clamp(43px,4vw,65px);letter-spacing:-.01em}
.contact-dialog,.privacy-dialog{width:min(94vw,650px);padding:clamp(26px,3.55vw,51px)}
.form-intro,.privacy-intro{font-size:15px;color:#55594f}
.form-fields{display:flex;flex-direction:column;gap:13px;border:0;margin:21px 0 0;padding:0;min-width:0}
.form-fields label:not(.trap){font-weight:600;font-size:12px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-fields input:not([type=checkbox]),.form-fields select,.form-fields textarea{width:100%;min-width:0;border:1px solid #b9bcb0;background:#fafaf6;color:#20231d;padding:9px 10px;display:block;margin-top:4px;font:400 16px/1.4 var(--body)}
.form-fields textarea{resize:vertical;min-height:72px;max-height:220px}
.form-fields input[type=checkbox]{margin:0;width:16px;height:16px;flex:none;accent-color:var(--button-red)}
.consent-line{display:flex;align-items:flex-start;gap:8px;padding-top:1px;font-size:12px;line-height:1.5;color:#4d5147}
.consent-line>div>label{font-weight:400!important}
.inline-link{text-decoration:underline;text-underline-offset:2px;text-align:left}
.form-privacy{background:#e8e9df;padding:12px 15px;max-height:200px;overflow:auto}
.privacy-copy h3{font-size:15px;font-weight:600;margin:20px 0 5px}
.privacy-copy p{font-size:13px;line-height:1.6;color:#4d5148}
.privacy-copy a,.form-error a{text-decoration:underline;text-underline-offset:2px}
.form-privacy .privacy-copy section:first-child h3{margin-top:0}
.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-top:3px}
.form-bottom>a,.form-error a{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.form-error{border-left:2px solid #aa2b22;padding:8px 10px;background:#f3ded7;color:#73271f;font-size:13px}
.form-error a{margin-left:3px;font-weight:600}
.success-mark{width:54px;height:54px;display:grid;place-items:center;background:#d9e4d7;color:#314f35;margin-bottom:24px}
.contact-success p{color:#51564b;overflow-wrap:anywhere}
.contact-success .button{margin-top:24px}
@keyframes photo-in{from{opacity:.67;transform:scale(1.012)}to{opacity:1;transform:scale(1)}}
@keyframes modal-in{from{opacity:.7;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:1750px){.hero{height:clamp(680px,74svh,850px)}}
@media(max-width:1000px){
  .section-heading{align-items:flex-start;gap:22px;flex-wrap:wrap}
  .section-heading h2{font-size:56px}
  .expertise-grid{gap:32px}
  .footer-main{grid-template-columns:1.18fr .95fr 1.1fr;gap:24px}
  .footer-main>div:last-child{grid-column:2/4}
  .footer-brand{grid-row:span 2}
  .about-grid{gap:35px;grid-template-columns:1fr 1fr}
  .hero-copy{max-width:54vw}
}
@media(max-width:760px){
  :root{--header:61px;--gutter:clamp(20px,5.2vw,36px)}
  .header-inner{display:flex;justify-content:space-between;gap:14px}
  .brand-logo{width:clamp(154px,31vw,195px)}
  .desktop-nav{display:none}
  .header-actions{gap:10px}
  .head-contact{min-height:33px;padding:0 11px;gap:8px;font-size:11px}
  .head-contact svg{width:13px;height:13px}
  .menu-toggle{width:34px;height:38px;display:grid;place-items:center}
  .mobile-menu{display:flex;flex-direction:column;background:#20231f;position:absolute;z-index:2;left:0;right:0;top:100%;padding:6px var(--gutter) 20px;border-bottom:1px solid #575b50}
  .mobile-menu>a,.mobile-menu>button{display:flex;justify-content:space-between;align-items:center;min-height:54px;color:#f0f1e9;font:600 25px var(--display);border-bottom:1px solid #494d44;text-align:left}
  .mobile-menu svg{color:var(--red)}
  .mobile-shade{display:block;position:fixed;inset:var(--header) 0 0;background:#1216108a}
  .hero{height:clamp(548px,71svh,700px)}
  .hero-copy{max-width:76%}
  .hero h1{font-size:clamp(94px,13vw,117px)}
  .hero-copy>p{font-size:15px}
  .hero-bottom{height:65px}
  .section-heading{margin:10px 0 24px;display:block}
  .section-heading h2{font-size:clamp(41px,7.3vw,57px)}
  .expertise-grid{grid-template-columns:1.1fr .9fr;gap:20px}
  .service h3>button{min-height:63px;grid-template-columns:21px 1fr 18px;gap:5px}
  .service h3>button>span:nth-child(2){font-size:27px}
  .service-content{margin-left:26px;margin-right:0}
  .service-photo{min-height:320px}
  .about-grid{grid-template-columns:1fr 1fr;gap:24px}
  .about-copy h2{font-size:64px}
  .about-copy p{font-size:14px}
  .territory-board{min-height:350px;height:375px}
  .map-island{max-width:99%;height:82%;top:6%}
  .map-foot{min-height:58px}
  .map-head{left:12px;right:12px;top:12px}
  .contact-inner{align-items:flex-start;flex-direction:column;gap:22px}
  .contact-band h2{font-size:57px}
  .footer-main{grid-template-columns:1fr 1fr;gap:26px}
  .footer-main>div:last-child{grid-column:auto}
  .footer-brand{grid-row:auto}
  .footer-bottom{gap:12px}
  .dialog{max-height:92svh}
}
@media(max-width:660px){
  .hero{height:clamp(545px,73svh,665px)}
  .hero-photo img{object-position:var(--mobile-scene-position);filter:grayscale(1) contrast(1.1) brightness(1.04)}
  .hero-shade{background:linear-gradient(0deg,#121512ed 1%,#121512cb 24%,#12151280 48%,#12151224 72%,#1215120a),linear-gradient(90deg,#11141165,transparent 82%)}
  .hero-copy{max-width:100%;margin-top:auto;margin-bottom:0;padding:0 0 31px}
  .hero-copy .kicker{font-size:9px;gap:9px}
  .hero h1{font-size:clamp(83px,18.8vw,110px);line-height:.85;margin:18px 0 17px}
  .hero-copy>p{font-size:14px;max-width:355px;line-height:1.47}
  .hero-actions{margin-top:20px;gap:18px}
  .button{min-height:45px;font-size:13px;padding:0 15px;gap:16px}
  .hero-secondary{font-size:12px;gap:6px}
  .hero-bottom{height:61px;gap:8px}
  .slide-position{gap:9px}
  .hero-counter{font-size:9px;gap:4px}
  .hero-counter strong{font-size:13px}
  .slide-marks{gap:3px}
  .slide-marks button{width:16px}
  .frame-info{gap:9px}
  .frame-caption{font-size:10px;line-height:1.2}
  .frame-ident{font-size:8px;gap:4px;letter-spacing:.04em}
  .frame-control{gap:3px}
  .frame-control button{width:31px;height:31px}
  .survey-mark{width:14px;height:14px;top:20px}
  .survey-mark span:first-child{top:6px}
  .survey-mark span:last-child{left:6px}
  .section-pad{padding-block:45px}
  .kicker,.micro{font-size:9px}
  .red-rule{flex-basis:22px;height:2px}
  .expertise-grid,.about-grid{grid-template-columns:1fr}
  .expertise .section-heading{margin-bottom:21px}
  .service h3>button{min-height:58px;grid-template-columns:25px 1fr 24px}
  .service-content{margin-left:30px}
  .service-photo{min-height:0;height:225px}
  .about-copy h2{font-size:clamp(56px,12vw,74px);margin-block:17px}
  .about-copy p{font-size:15px}

  .territory-board{height:365px}
  .map-foot{padding-inline:16px}
  .map-head{left:16px;right:16px;top:16px}
  .contact-band h2{font-size:clamp(49px,11vw,69px)}
  .footer{padding-top:31px}
  .footer-main{gap:23px 15px;padding-bottom:28px}
  .footer-brand .brand-logo{width:150px}
  .footer-main>div:not(.footer-brand) a,.footer-main p{font-size:12px}
  .footer-bottom{padding-block:16px;display:grid;grid-template-columns:1fr auto;gap:8px 15px}
  .footer-bottom>span{grid-column:1/-1;margin:0}
  .footer-bottom>button{justify-self:start}
  .footer-bottom>a{justify-self:end}
  .dialog{max-height:93svh;width:calc(100% - 20px)}
  .contact-dialog,.privacy-dialog{padding:25px 18px}
  .form-pair{grid-template-columns:1fr;gap:11px}
  .form-fields{gap:11px;margin-top:16px}
  .form-bottom{align-items:flex-start;flex-wrap:wrap}
  .form-bottom>a{align-self:center}
  .modal-close{width:32px;height:32px;right:10px;top:10px}
}
@media(max-width:360px){
  :root{--gutter:15px}
  .header-inner{gap:6px}.brand-logo{width:142px}
  .head-contact{gap:5px;padding:0 7px}
  .frame-caption{display:none}
  .hero h1{font-size:77px}
  .hero-actions{gap:12px}
  .footer-main{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* Photographic comparison, with a draggable contour overlay. */
.hero-photo{z-index:-4}
.hero-shade{z-index:-3}
.hero-inner{pointer-events:none}
.hero-inner a,.hero-inner button{pointer-events:auto}
.hero-mode{position:absolute;top:23px;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:4}
.mode-switch{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:33px;padding:0 10px;background:#191c19b3;border:1px solid #f1f2e765;color:#f7f7ee;font:500 10px/1 var(--mono);letter-spacing:.025em;transition:background .2s,border-color .2s}
.mode-switch:hover,.mode-switch[aria-pressed=true]{background:#22251ff0;border-color:#dcded1}
.mode-indicator{display:block;border:1px solid #c3c8bd;border-radius:8px;width:15px;height:8px;position:relative;margin-left:2px}
.mode-indicator:after{content:"";position:absolute;left:1px;top:1px;width:4px;height:4px;border-radius:50%;background:#d4d8cd;transition:transform .2s}
.mode-switch[aria-pressed=true] .mode-indicator:after{transform:translateX(6px);background:var(--red)}
.mode-hint{font:400 9px/1.3 var(--mono);color:#eeefe5;background:#181c18be;padding:3px 6px}
.technical-comparison{position:absolute;inset:0;pointer-events:none;--handle-y:33%}
.contour-layer{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split));background:#202722}
.contour-layer canvas,.contour-grid{width:100%;height:100%;display:block;position:absolute;inset:0}
.contour-grid{background-image:linear-gradient(90deg,#e8ead20f 1px,transparent 1px),linear-gradient(#e8ead20f 1px,transparent 1px);background-size:34px 34px}
.contour-divider{position:absolute;left:var(--split);top:0;bottom:0;width:1px;background:#ff735c}
.contour-slider{appearance:none;-webkit-appearance:none;position:absolute;pointer-events:auto;top:var(--handle-y);left:0;transform:translateY(-50%);height:39px;margin:0;width:100%;opacity:0;cursor:ew-resize;z-index:2;touch-action:pan-y}
.contour-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1px;height:39px}
.contour-slider::-moz-range-thumb{width:1px;height:39px}
.contour-handle{position:absolute;left:clamp(21px,var(--split),calc(100% - 21px));top:var(--handle-y);transform:translate(-50%,-50%);width:39px;height:32px;display:flex;align-items:center;justify-content:center;gap:2px;background:#f4f3ed;color:#262923;border:1px solid #f4f3ed;pointer-events:none}
.contour-slider:focus-visible+.contour-handle{outline:3px solid var(--red);outline-offset:3px}
@media(min-width:761px){.site-header .brand-logo{width:clamp(202px,16.4vw,255px)}}
@media(max-width:660px){.hero-mode{top:15px}.mode-switch{font-size:9px;min-height:30px}.technical-comparison{--handle-y:22%}}
.contour-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b100edb,transparent 29%),linear-gradient(90deg,#0f130fe0 0%,#0f130f9c 28%,transparent 60%);pointer-events:none}
.under-section{background:var(--paper);margin-top:clamp(40px,5.2vw,88px)}
.under-grid{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:clamp(26px,6vw,90px);border-top:1px solid var(--line);padding-top:clamp(45px,4.9vw,78px)}
.under-copy h3{font:600 clamp(38px,3.8vw,69px)/1.04 var(--display);letter-spacing:-.018em;margin:0 0 17px;text-wrap:balance}
.under-copy p{max-width:365px;font-size:15px;color:#52564b}
.under-copy .about-link{margin-top:21px}
.under-board{background:#e3e5d9;border:1px solid #babfaf;min-width:0}
.under-key{display:flex;justify-content:space-between;padding:12px 16px 0;gap:10px;color:#515749}
.under-key .micro{font-size:9px}
.section-drawing{display:block;width:100%;height:clamp(224px,22vw,345px)}
.drawing-label{font:500 10px var(--mono);fill:#853327;text-transform:uppercase;letter-spacing:.015em}
.trench-bedding,.trench-pipes,.trench-fill{transition:opacity .35s ease}
.under-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #b2b8a8;border-bottom:1px solid #b2b8a8}
.under-steps button{display:flex;align-items:center;justify-content:center;gap:9px;background:#e9ebe0;color:#30362c;min-height:41px;border-right:1px solid #bcc2b1;font-size:13px;font-weight:600}
.under-steps button:last-child{border-right:0}
.under-steps button span{font:400 9px var(--mono);color:#67705f}
.under-steps button[aria-pressed=true]{background:#252923;color:#fff}
.under-steps button[aria-pressed=true] span{color:#ff7b68}
.under-foot{min-height:83px;padding:12px 15px;background:#e9ebe1}
.under-foot h4{font:600 23px/1.15 var(--display);margin:0 0 4px}
.under-foot p{font-size:13px;line-height:1.48;color:#4d5346;max-width:66ch}

@media(max-width:660px){.under-grid{grid-template-columns:1fr}.under-copy h3{font-size:clamp(36px,8.4vw,52px)}.under-key{padding:9px 10px 0}.under-key .micro{font-size:8px}.section-drawing{height:auto}.under-steps button{font-size:12px;gap:6px}.under-foot{min-height:79px}.under-copy p{font-size:14px}}

@font-face{font-family:"Instrument Serif";src:url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
.hq-address{margin:20px 0 0;font:600 clamp(21px,2.1vw,34px)/1.23 var(--display)}
.map-foot strong{font-size:clamp(17px,1.65vw,25px)}
.map-foot>a{flex:none;margin-left:12px}
/* Reading order, line breaks and service headings. */
.headline-line { display:block; white-space:nowrap; }
.phrase { display:inline-block; max-width:100%; }
h1,h2,h3,h4 { text-wrap:balance; }
.hero-copy > p, .about-copy p, .under-copy p, .privacy-copy p,
.form-intro, .under-foot p, .qualification-record p { text-wrap:pretty; }
.hero-copy > p { max-width:44ch; }
.about-copy h2 { margin-top:0; }
.about-copy h2 em { display:block; margin-left:0; }
.contact-band .phrase { white-space:nowrap; color:inherit; }
.service-head { position:relative; padding:16px 0 14px; }
.service-head h3 > button { padding:0; min-height:0; }
.service-head h3 > button::after { content:""; position:absolute; inset:0; }
.service-heading { line-height:1.1; text-wrap:balance; }
.service-summary { margin:4px 34px 0 44px; font:500 12px/1.4 var(--body); color:#535b4e; text-wrap:pretty; }
.service-content .text-link { color:#31372d; border-color:#939b88; }
.service-photo figcaption { font:500 14px/1.4 var(--body); text-wrap:pretty; max-width:42ch; }
.service-illustration { background:#e3e5d9; display:flex; align-items:center; }
.service-illustration .section-drawing { height:auto; width:100%; }
.service-illustration::after { display:none; }
.service-illustration figcaption { color:#343c30; }
.under-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid #b3baaa; background:#eef0e7; }
.under-types button { padding:11px 5px; font:600 13px/1.25 var(--body); border-right:1px solid #c4cabb; }
.under-types button:last-child { border-right:0; }
.under-types button[aria-pressed=true] { background:#2f382d; color:#fff; box-shadow:inset 0 -3px #ed5543; }
.footer-main address { font:400 13px/1.7 var(--body); }
.privacy-copy section + section { margin-top:18px; }
.privacy-copy section:first-child h3 { margin-top:16px; }
.privacy-copy p + p { margin-top:7px; }
.privacy-copy h3 { line-height:1.25; }
.form-privacy[hidden] { display:none; }
.contact-dialog h2,.privacy-dialog h2 { line-height:1.01; margin:0 28px 12px 0; }
.form-fields .consent-line label { font-weight:400; }
.consent-line .inline-link { margin-inline-start:3px; }

/* Credentials have their own section, independent of the service catalogue. */
.qualifications {
  background:#272e27;
  color:#f4f3e9;
}
.qualifications-head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  border-bottom:1px solid #626c5e; padding-bottom:clamp(24px,2.7vw,44px);
}
.qualifications-head h2 {
  font:600 clamp(48px,4.9vw,83px)/1.01 var(--display); letter-spacing:-.02em; margin:0;
}
.qualification-request {
  display:inline-flex; gap:12px; align-items:center; flex:none; border-bottom:1px solid #a8b39d;
  min-height:37px; font-size:13px; font-weight:600;
}
.qualification-request:hover { color:#fff; border-color:#f46a57; }
.qualification-request svg { color:#ff7865; }
.qualification-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.qualification-record { padding:clamp(25px,3.2vw,54px) clamp(18px,2.25vw,42px) 0; min-width:0; }
.qualification-record:first-child { padding-left:0; }
.qualification-record:last-child { padding-right:0; }
.qualification-record + .qualification-record { border-left:1px solid #586351; }
.qualification-kind {
  font:500 10px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:#d1d9c8;
  display:flex; align-items:center; gap:9px;
}
.qualification-kind::before { content:""; display:block; flex:0 0 16px; height:2px; background:#fc6956; }
.qualification-record h3 { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 17px; margin:10px 0 13px; }
.qualification-record h3 > span { font:600 clamp(52px,5.4vw,94px)/.96 var(--display); letter-spacing:-.022em; white-space:nowrap; }
.qualification-record h3 > small { font:500 clamp(12px,1vw,16px)/1.2 var(--mono); text-transform:uppercase; letter-spacing:.04em; color:#d3dbc9; }
.qualification-record p { font-size:15px; line-height:1.65; color:#d2d9c9; max-width:48ch; }

@media(min-width:761px) and (max-width:1020px) {
  .header-inner { grid-template-columns:auto 1fr auto; gap:14px; }
  .desktop-nav { justify-content:center; gap:clamp(11px,1.6vw,17px); }
  .desktop-nav a { font-size:12px; }
  .site-header .brand-logo { width:178px; }
  .head-contact { padding-inline:11px; gap:10px; }
}
@media(max-width:760px) {
  .qualifications-head { align-items:flex-start; flex-direction:column; gap:11px; }
  .qualifications-head h2 { font-size:clamp(42px,7.5vw,60px); }
  .qualification-grid { grid-template-columns:1fr; }
  .qualification-record { padding:22px 0; }
  .qualification-record + .qualification-record { border-left:0; border-top:1px solid #586351; }
  .qualification-record:last-child { padding-bottom:0; }
}
@media(max-width:660px) {
  .hero-copy > p { max-width:38ch; }
  .hero-mode .mode-hint { max-width:130px; text-wrap:balance; }
  .about-copy h2 { font-size:clamp(52px,10.4vw,73px); }
  .contact-band h2 { font-size:clamp(42px,10vw,61px); }
  .footer-main address { font-size:12px; }
  .under-types button { min-height:40px; font-size:12px; }
  .service-head { padding-block:12px; }
  .service-summary { margin:3px 22px 0 30px; font-size:11px; }
  .service-illustration .section-drawing { height:100%; }
  .qualifications-head { padding-bottom:17px; }
  .qualification-record h3 { margin:8px 0 9px; }
}

.qualification-record h3 > small b { font:600 1.45em/1 var(--display); color:#f5f4ed; }
@media(min-width:661px) and (max-width:760px){.service-summary{margin-left:26px;}}

/* Full-colour photographic sequence and contact sheet. */
.photo-archive {
  --archive-bg: #171a18;
  --archive-text: #f5f3eb;
  --archive-muted: #b4baad;
  --archive-rule: #434840;
  background: var(--archive-bg);
  color: var(--archive-text);
  padding-block: clamp(54px, 5.6vw, 100px) clamp(42px, 4.4vw, 78px);
  overflow: clip;
}
.archive-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: clamp(23px, 2.5vw, 42px);
}
.archive-heading h2 {
  font: 600 clamp(52px, 5.2vw, 88px)/.99 var(--display);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.archive-toolbar, .archive-filter, .archive-view-switch, .archive-view-switch button,
.archive-arrows, .archive-enlarge, .archive-count, .archive-position {
  display: flex;
  align-items: center;
}
.archive-toolbar { flex: none; gap: 15px; padding-bottom: 4px; }
.archive-filter {
  min-height: 40px;
  position: relative;
  border-bottom: 1px solid #696e63;
  color: #eff0e6;
}
.archive-filter > svg { position: absolute; left: 3px; pointer-events: none; }
.archive-filter > svg:last-child { left: auto; right: 2px; }
.archive-filter select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  min-height: 40px;
  padding: 0 23px 0 27px;
  font-size: 13px;
  font-weight: 500;
}
.archive-filter select option { color: #1c201b; background: #f3f2ea; }
.archive-view-switch { border: 1px solid #545a50; border-radius: 100px; padding: 3px; gap: 2px; }
.archive-view-switch button {
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  min-width: 78px;
  border-radius: 100px;
  padding: 0 11px;
  color: #d4dacd;
  font-size: 12px;
  font-weight: 600;
  transition: color .18s, background .18s;
}
.archive-view-switch button[aria-pressed=true] { background: #f1f0e7; color: #20241e; }
.archive-view-switch button:hover:not([aria-pressed=true]) { background: #32372f; color: #fff; }
.archive-stage {
  display: grid;
  grid-template-columns: minmax(0, 3.1fr) minmax(0, 1fr);
  gap: clamp(7px, .85vw, 15px);
  height: clamp(320px, min(38.5vw, 59svh), 650px);
}
.archive-stage.portrait-stage { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.archive-stage.single { grid-template-columns: 1fr; }
.archive-exhibit, .archive-next-preview {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: #252924;
}
.archive-exhibit { display: block; touch-action: pan-y pinch-zoom; cursor: zoom-in; user-select: none; }
.archive-image, .archive-image > img, .archive-next-preview > img {
  display: block;
  width: 100%;
  height: 100%;
}
.archive-image {
  background-image: var(--still);
  background-size: cover;
  background-position: center;
  animation: archive-appear .42s cubic-bezier(.2,.7,.3,1) both;
}
.archive-image > img, .archive-next-preview > img { object-fit: cover; }
.archive-stage.single .archive-exhibit.vertical .archive-image { background: #101310; }
.archive-stage.single .archive-exhibit.vertical img { object-fit: contain; object-position: center !important; }
.archive-enlarge, .next-corner {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  min-height: 38px;
  justify-content: center;
  background: #151a16c9;
  color: #fff;
  border: 1px solid #ffffff5a;
  backdrop-filter: blur(8px);
}
.archive-enlarge {
  gap: 7px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}
.archive-exhibit:hover .archive-enlarge { background: #131712ed; }
.archive-next-preview { text-align: left; }
.archive-next-preview > img { transition: transform .55s ease-out; }
.archive-next-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #11150fe0 0%, #161a1226 48%, #171c152b 100%);
  pointer-events: none;
}
.archive-next-preview:hover > img { transform: scale(1.035); }
.next-corner { width: 38px; border-radius: 50%; display: grid; place-items: center; }
.next-copy {
  position: absolute; z-index: 1; left: clamp(13px, 1.7vw, 30px); right: 12px;
  bottom: clamp(17px, 1.9vw, 32px); display: grid; gap: 7px;
}
.next-copy small, .archive-area, .index-number, .archive-index-total {
  font: 500 10px/1.45 var(--mono); letter-spacing: .09em; text-transform: uppercase;
}
.next-copy small { color: #d9ded0; }
.next-copy strong { font: 600 clamp(23px, 2.15vw, 37px)/1.06 var(--display); color: #fff; text-wrap: balance; }
.archive-legend {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 34px); min-height: 103px;
  padding: 17px 0 13px; border-bottom: 1px solid var(--archive-rule);
}
.archive-caption { flex: 1; min-width: 0; }
.archive-area {
  color: #bfc6b8; display: flex; align-items: center; gap: 9px;
  font-size: 10px; line-height: 1.4;
}
.archive-area::before { content: ""; display: block; width: 17px; height: 2px; background: var(--red); flex: none; }
.archive-caption h3 {
  font: 500 clamp(24px, 2.14vw, 39px)/1.16 var(--body); letter-spacing: -.035em;
  color: var(--archive-text); margin-top: 5px; text-wrap: balance;
}
.archive-position { gap: 13px; flex: none; }
.archive-count { color: #c3c9bc; gap: 7px; font: 400 11px var(--mono); font-variant-numeric: tabular-nums; }
.archive-count b { font: 500 17px var(--mono); color: #fff; }
.archive-count > span { color: #838a7b; }
.archive-progress { width: clamp(42px, 5vw, 94px); height: 2px; background: #444a40; }
.archive-progress i { display: block; width: 100%; height: 100%; background: #ff6657; transform-origin: left; transition: transform .3s ease; }
.archive-arrows { gap: 6px; }
.archive-arrows button, .theatre-image > button {
  display: grid; place-items: center; border-radius: 50%; color: #f3f5ec;
  transition: background .18s, color .18s, border-color .18s;
}
.archive-arrows button { width: 44px; height: 44px; border: 1px solid #6b7264; }
.archive-arrows button:hover, .archive-arrows button:focus-visible { background: #f0f1e6; color: #20241e; border-color: #f0f1e6; }
@keyframes archive-appear { from { opacity: .67; transform: scale(1.014); } to { opacity: 1; transform: scale(1); } }

.archive-index {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: clamp(138px, 12.7vw, 237px); grid-auto-flow: row dense; gap: clamp(6px, .7vw, 12px);
}
.archive-index li { min-width: 0; min-height: 0; }
.archive-index:not(.few) li:first-child { grid-column: span 2; grid-row: span 2; }
.archive-index:not(.few) li:nth-child(6n) { grid-column: span 2; }
.archive-index:not(.few) li:nth-child(7n+5) { grid-row: span 2; }
.archive-index.few { grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); grid-auto-rows: clamp(200px, 22vw, 372px); }
.archive-index li > button {
  display: block; width: 100%; height: 100%; isolation: isolate; overflow: hidden;
  position: relative; text-align: left; background: #2c312a;
}
.archive-index img { width: 100%; height: 100%; object-fit: cover; transition: transform .43s ease-out; }
.archive-index button:hover img { transform: scale(1.04); }
.archive-index button::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(0deg,#0c100cc2,transparent 83%); }
.index-number { position: absolute; z-index:1; top:10px; left:11px; padding:2px 6px; color:white; background:#171b16ae; font-size:9px; }
.index-caption { position: absolute; z-index:1; bottom:11px; left:12px; right:12px; color:#fff; font-size:15px; font-weight:600; line-height:1.25; text-wrap:balance; }
.archive-index:not(.few) li:first-child .index-caption { font-size:clamp(21px,2vw,32px); letter-spacing:-.03em; bottom:17px; left:17px; }
.archive-index-total { color:#b6beaf; margin-top:13px; text-align:right; }

/* The full image retains its original proportions in the viewer. */
.dialog.photo-dialog {
  position: fixed; inset: 0; margin: 0; width: 100%; height: 100vh; height: 100dvh;
  max-width: none; max-height: none; padding: 0;
  background: #111412; color: #f5f4eb; box-shadow: none; overflow-y: auto;
}
.dialog.photo-dialog[open] { display:flex; flex-direction:column; }
.photo-dialog .modal-close {
  top: max(10px,env(safe-area-inset-top)); right: max(var(--gutter),env(safe-area-inset-right));
  width: 40px; height: 40px; color:#f7f7f0; border:1px solid #687064; border-radius:50%; background:#272c26;
}
.photo-dialog .modal-close:hover { background:#3a4036; }
.theatre-tools {
  flex:none; display:flex; align-items:center; gap:18px; min-height:62px; border-bottom:1px solid #393e37;
  padding: max(9px,env(safe-area-inset-top)) calc(var(--gutter) + 54px) 9px var(--gutter);
}
.theatre-title { font-size:14px; font-weight:600; }
.theatre-position { font:500 11px var(--mono); letter-spacing:.04em; white-space:nowrap; color:#e1e6d9; }
.theatre-position i { color:#8a9283; padding:0 4px; font-style:normal; }
.theatre-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.theatre-actions button, .theatre-caption > button { display:flex; align-items:center; gap:8px; min-height:40px; padding:0 9px; font-size:12px; font-weight:600; border-radius:2px; }
.theatre-actions button:hover, .theatre-actions button[aria-expanded=true], .theatre-caption > button:hover { background:#2a3028; }
.theatre-image { flex:1 1 0; min-height:95px; position:relative; background:#0b0e0b; touch-action:pan-y pinch-zoom; }
.theatre-image > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; animation:archive-appear .22s ease-out both; }
.theatre-image > button {
  position:absolute; top:50%; transform:translateY(-50%); background:#161b16c7; border:1px solid #f4f6ed70;
  width:46px; height:46px; backdrop-filter:blur(8px);
}
.theatre-previous { left:max(16px,calc(var(--gutter) * .52)); }
.theatre-next { right:max(16px,calc(var(--gutter) * .52)); }
.theatre-image > button:hover { background:#f1f1e7e8; color:#161a16; }
.theatre-caption {
  flex:none; display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:16px var(--gutter) max(18px,env(safe-area-inset-bottom)); border-top:1px solid #393e37;
}
.theatre-caption h2 { font:600 clamp(30px,2.9vw,55px)/1.07 var(--display); margin:4px 0 0; text-wrap:balance; }
.theatre-caption > button { border:1px solid #5b6355; padding:0 13px; white-space:nowrap; }
.theatre-thumbs {
  flex:none; display:flex; gap:7px; overflow-x:auto; margin:0 var(--gutter) max(12px,env(safe-area-inset-bottom));
  padding:2px 0 5px; scrollbar-width:thin; scrollbar-color:#737a6c transparent;
}
.theatre-thumbs[hidden] { display:none; }
.theatre-thumbs button { width:79px; height:52px; flex:none; opacity:.67; border:2px solid transparent; }
.theatre-thumbs button[aria-pressed=true] { opacity:1; border-color:var(--red); }
.theatre-thumbs button:hover { opacity:1; }
.theatre-thumbs img { width:100%; height:100%; object-fit:cover; }
.theatre-copy-link { display:flex; align-items:center; gap:15px; padding:8px var(--gutter); font-size:12px; }
.theatre-copy-link input { flex:1; min-width:0; padding:4px 8px; border:0; font-size:16px; color:#171b15; }

@media(max-width:1020px) {
  .archive-heading { flex-wrap:wrap; align-items:center; gap:17px 24px; }
  .archive-stage { height:clamp(285px,40vw,430px); grid-template-columns:minmax(0,2.85fr) minmax(0,1fr); }
  .archive-heading h2 { font-size:clamp(49px,6vw,66px); }
  .archive-index { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:clamp(128px,15vw,185px); }
}
@media(max-width:680px) {
  .photo-archive { padding-block:43px 33px; }
  .archive-heading { display:block; margin-bottom:17px; }
  .archive-heading h2 { font-size:clamp(44px,9.9vw,63px); }
  .archive-toolbar { width:100%; justify-content:space-between; gap:8px; margin-top:15px; padding:0; }
  .archive-view-switch { padding:2px; }
  .archive-view-switch button { min-height:34px; min-width:0; padding:0 9px; gap:5px; font-size:11px; }
  .archive-view-switch svg { width:14px; height:14px; }
  .archive-filter select { font-size:12px; padding-inline:24px 18px; max-width:100%; }
  .archive-filter > svg { width:14px; }
  .archive-filter > svg:last-child { width:12px; }
  .archive-stage, .archive-stage.portrait-stage { height:clamp(218px,58vw,340px); gap:6px; grid-template-columns:minmax(0,1fr) clamp(36px,11vw,64px); }
  .archive-stage.single { grid-template-columns:1fr; }
  .archive-stage.single.portrait-stage { height:clamp(275px,90vw,390px); }
  .archive-enlarge { right:9px; top:9px; width:34px; min-height:34px; padding:0; }
  .archive-enlarge span, .next-copy { display:none; }
  .next-corner { top:50%; right:50%; transform:translate(50%,-50%); min-height:28px; width:28px; }
  .next-corner svg { width:15px; height:15px; }
  .archive-next-preview::after { inset:0; background:#11160f30; }
  .archive-legend { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; padding:12px 0 15px; min-height:99px; }
  .archive-caption { grid-row:1 / span 2; }
  .archive-caption h3 { font-size:clamp(21px,5.1vw,29px); line-height:1.14; margin-top:5px; }
  .archive-area { font-size:8px; letter-spacing:.08em; gap:6px; }
  .archive-area::before { width:12px; }
  .archive-position { justify-self:end; }
  .archive-count { font-size:9px; gap:4px; }
  .archive-count b { font-size:12px; }
  .archive-progress { display:none; }
  .archive-arrows { justify-self:end; gap:4px; }
  .archive-arrows button { width:36px; height:36px; }
  .archive-index { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(116px,31vw,185px); gap:6px; }
  .archive-index:not(.few) li:first-child { grid-column:span 2; grid-row:span 1; }
  .archive-index.few { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:148px; }
  .archive-index.few li:only-child { grid-column:span 2; }
  .index-number { top:6px; left:6px; font-size:8px; }
  .index-caption { font-size:12px; left:8px; right:8px; bottom:8px; }
  .archive-index:not(.few) li:first-child .index-caption { font-size:17px; left:10px; bottom:8px; }
  .theatre-tools { min-height:56px; gap:8px; padding: max(7px,env(safe-area-inset-top)) 63px 7px 14px; }
  .theatre-title { font-size:12px; max-width:96px; line-height:1.25; }
  .theatre-position { font-size:10px; }
  .theatre-position i { padding:0 1px; }
  .theatre-actions { gap:3px; }
  .theatre-actions button { width:38px; justify-content:center; padding:0; }
  .theatre-actions button span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .photo-dialog .modal-close { right:14px; top:max(8px,env(safe-area-inset-top)); }
  .theatre-tools + .theatre-image { min-height:145px; }
  .theatre-image > button { width:38px; height:38px; }
  .theatre-previous { left:8px; }
  .theatre-next { right:8px; }
  .theatre-caption { flex-wrap:wrap; gap:10px; padding:12px 15px max(15px,env(safe-area-inset-bottom)); }
  .theatre-caption h2 { font-size:30px; }
  .theatre-caption > button { font-size:11px; min-height:34px; }
  .theatre-thumbs { margin:0 14px max(10px,env(safe-area-inset-bottom)); }
  .theatre-thumbs button { width:59px; height:41px; }
}
@media(max-width:365px) {
  .archive-toolbar { flex-wrap:wrap; justify-content:flex-start; gap:6px 12px; }
  .archive-caption h3 { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) {
  .photo-archive *, .photo-dialog * { animation:none !important; transition:none !important; }
}

/* One photographic surface, with the headline and chapters set above the print. */
.family-story {
  --mat: clamp(12px, 2.15vw, 42px);
  padding: var(--mat);
  background: #eae7dc;
  color: #f5f1e7;
}
.family-poster {
  --inset: max(25px, calc(var(--gutter) - var(--mat)));
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 1800px;
  min-height: clamp(575px, 48vw, 785px);
  margin-inline: auto;
  overflow: hidden;
  background: #252823;
}
.family-portrait, .family-print {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.family-portrait {
  z-index: 0;
  background: radial-gradient(ellipse at 36% 29%, #42433c, #292c26 49%, #1d211c);
}
.family-print img {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(85%, 1260px);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 54% 20%;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000);
  transform: translate3d(0, var(--portrait-shift, 0px), 0) scale(1.075);
  transform-origin: 58% 44%;
}
.family-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(18 21 18 / 69%) 0%, rgb(20 23 19 / 76%) 22%, rgb(22 25 21 / 58%) 41%, rgb(22 23 20 / 24%) 56%, transparent 72%),
    linear-gradient(0deg, rgb(12 15 12 / 79%) 0%, rgb(14 17 14 / 30%) 24%, transparent 54%);
}
.family-credit {
  position: absolute;
  z-index: 1;
  right: var(--inset);
  bottom: clamp(29px, 3.6vw, 61px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1px 0 1px 13px;
  border-left: 2px solid #f0644e;
  color: #faf6ec;
  text-shadow: 0 1px 8px #10140f;
}
.family-credit span {
  font: 500 9px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.family-credit strong { font: 500 clamp(16px, 1.4vw, 23px)/1.25 var(--body); }
.family-foreground {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(65px, 6.7vw, 115px) var(--inset) clamp(34px, 3.6vw, 61px);
}
.family-title {
  width: max-content;
  max-width: 100%;
  margin: 0;
  transform: translate3d(0, var(--type-shift, 0px), 0);
  text-shadow: 0 .012em 0 #b2aa96, 0 .024em 0 rgb(92 84 66 / 76%), 0 .085em .16em rgb(4 7 4 / 55%);
}
.family-title > span, .family-title > em { display: block; white-space: nowrap; }
.family-title > span {
  color: #f7f3e9;
  font: 600 clamp(84px, 8.65vw, 148px)/.87 var(--display);
  text-transform: uppercase;
  letter-spacing: -.025em;
}
.family-title > em {
  margin: .015em 0 0 clamp(18px, 4.6vw, 85px);
  padding-right: .12em;
  color: #f6ead3;
  font: italic 400 clamp(91px, 9.7vw, 167px)/.96 "Instrument Serif", Georgia, serif;
  letter-spacing: -.035em;
}
.family-chapters {
  width: min(46%, 515px);
  min-width: 0;
  margin: clamp(27px, 2.5vw, 42px) 0 0;
  padding: 0;
  border: 0;
}
.family-chapter-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-bottom: 1px solid rgb(234 235 222 / 40%);
}
.family-chapter-tabs label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 5px 3px 8px;
  color: #d9d9cd;
  font: 500 clamp(12px, 1.06vw, 16px)/1.25 var(--body);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 4px #171a15;
  cursor: pointer;
}
.family-chapter-tabs label:hover { color: #fff; }
.family-chapter-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: calc(100% / 3);
  height: 3px;
  background: #ff674e;
  pointer-events: none;
  transform: translateX(0);
  transition: transform .36s cubic-bezier(.22,.77,.19,1);
}
#family-choice-generazioni:checked ~ .family-chapter-tabs .family-chapter-line { transform: translateX(100%); }
#family-choice-futuro:checked ~ .family-chapter-tabs .family-chapter-line { transform: translateX(200%); }
#family-choice-origini:checked ~ .family-chapter-tabs label[for="family-choice-origini"],
#family-choice-generazioni:checked ~ .family-chapter-tabs label[for="family-choice-generazioni"],
#family-choice-futuro:checked ~ .family-chapter-tabs label[for="family-choice-futuro"] { font-weight: 700; color: #fff; }
#family-choice-origini:focus-visible ~ .family-chapter-tabs label[for="family-choice-origini"],
#family-choice-generazioni:focus-visible ~ .family-chapter-tabs label[for="family-choice-generazioni"],
#family-choice-futuro:focus-visible ~ .family-chapter-tabs label[for="family-choice-futuro"] { outline: 2px solid #ff8b70; outline-offset: 3px; }
.family-pages { display:grid; margin-top: clamp(15px, 1.4vw, 24px); }
.family-page {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
#family-choice-origini:checked ~ .family-pages #family-text-origini,
#family-choice-generazioni:checked ~ .family-pages #family-text-generazioni,
#family-choice-futuro:checked ~ .family-pages #family-text-futuro {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.family-page p {
  max-width: 49ch;
  margin: 0;
  color: #f2f1e8;
  font: 400 clamp(16px, 1.24vw, 20px)/1.56 var(--body);
  text-wrap: pretty;
  text-shadow: 0 1px 8px rgb(0 0 0 / 55%);
}

@media (min-width: 721px) and (max-width: 1000px) {
  .family-poster { min-height: 535px; }
  .family-foreground { padding-top: 65px; }
  .family-title > span { font-size: clamp(70px, 9vw, 91px); }
  .family-title > em { font-size: clamp(79px, 10vw, 103px); margin-left: 19px; }
  .family-chapters { width: 51%; }
  .family-print img { width: 83%; object-position: 55% 24%; }
}
@media (max-width: 720px) {
  .family-story { --mat: 0px; padding: 10px 0; }
  .family-poster { --inset: var(--gutter); min-height: 610px; }
  .family-print img {
    width: 100%;
    object-position: 52% 21%;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .family-portrait::after {
    background:
      linear-gradient(0deg, rgb(12 15 13 / 96%) 0%, rgb(15 18 16 / 90%) 22%, rgb(16 19 17 / 65%) 42%, rgb(17 20 18 / 14%) 66%, transparent 78%),
      linear-gradient(130deg, rgb(8 11 9 / 44%), transparent 36%);
  }
  .family-credit {
    top: 22px; right: auto; bottom: auto; left: var(--inset); gap: 2px;
    padding-left: 9px;
  }
  .family-credit span { font-size: 8px; }
  .family-credit strong { font-size: 15px; }
  .family-foreground {
    padding: clamp(285px, 39svh, 365px) var(--inset) clamp(28px, 5.6vw, 42px);
  }
  .family-title > span { font-size: clamp(53px, 11vw, 83px); }
  .family-title > em { margin: -.01em 0 0 clamp(14px, 4vw, 24px); font-size: clamp(67px, 14vw, 105px); }
  .family-chapters { width: min(100%, 465px); margin-top: 20px; }
  .family-chapter-tabs label { font-size: 13px; min-height: 44px; }
  .family-pages { margin-top: 13px; }
  .family-page p { font-size: 16px; line-height: 1.5; }
}
@media (max-width: 360px) {
  .family-foreground { padding-top: 270px; }
  .family-chapter-tabs label { font-size: 12px; }
  .family-page p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .family-print img { transform: none; }
  .family-title, .family-page { transform: none; }
  .family-page, .family-chapter-line { transition: none; }
}