:root {
  --paper: #f4efe5;
  --paper-soft: #faf7f0;
  --ink: #11100e;
  --red: #ec3828;
  --blue: #174bcc;
  --yellow: #f1c819;
  --line: rgba(17, 16, 14, .22);
  --sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --header-h: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); }
body.menu-open, body.dialog-open { overflow: hidden; }
img { display: block; width: 100%; max-width: 100%; background: #e7e0d4; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
address { font-style: normal; }
section[id] { scroll-margin-top: var(--header-h); }
::selection { background: var(--red); color: #fff; }

.paper-section { position: relative; background: var(--paper); }
.ink-section { position: relative; color: var(--paper-soft); background: var(--ink); }
.section-index { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.site-header {
  position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: var(--header-h);
  display: flex; align-items: stretch; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(244, 239, 229, .98);
  transition: background .2s;
}
.site-header.is-compact { background: rgba(250, 247, 240, .96); }
.brand-lockup { position: relative; display: flex; width: 285px; align-items: center; gap: 14px; padding: 13px 24px; border-right: 1px solid var(--line); }
.brand-lockup img { width: 178px; height: 55px; object-fit: contain; object-position: left center; }
.brand-marker { position: relative; display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; }
.brand-marker::before, .brand-marker::after { position: absolute; content: ""; background: var(--ink); }
.brand-marker::before { width: 100%; height: 1px; }
.brand-marker::after { width: 1px; height: 100%; }
.brand-marker i { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px var(--paper); }
.desktop-index { display: flex; min-width: 0; flex: 1; align-items: stretch; justify-content: flex-end; }
.desktop-index a, .index-label { display: flex; align-items: center; padding: 0 clamp(9px, 1.3vw, 22px); border-left: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.desktop-index a { position: relative; overflow: hidden; }
.desktop-index a::before { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; content: ""; background: var(--red); transform: translateY(100%); transition: transform .25s; }
.desktop-index a:hover::before, .desktop-index a:focus-visible::before { transform: translateY(0); }
.index-label { margin-right: auto; color: rgba(17,16,14,.55); }
.menu-toggle { display: none; width: 96px; border: 0; border-left: 1px solid var(--line); background: transparent; cursor: pointer; }
.menu-toggle span { font-size: 11px; text-transform: uppercase; }

.menu-panel { position: fixed; z-index: 75; inset: 0; display: flex; visibility: hidden; padding: 120px 8vw 55px; color: var(--paper); background: var(--blue); opacity: 0; transform: translateY(-3%); transition: opacity .35s, transform .45s, visibility .45s; }
.menu-panel.is-open { visibility: visible; opacity: 1; transform: none; }
.menu-panel nav { width: min(900px, 100%); margin-top: auto; }
.menu-panel nav a { display: flex; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.35); font-family: var(--serif); font-size: clamp(40px, 8vw, 92px); line-height: .98; }
.menu-panel nav a span { width: 72px; font-family: var(--sans); font-size: 11px; letter-spacing: .18em; }
.menu-count { position: absolute; top: 120px; right: 8vw; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }

.hero { min-height: 100svh; padding: calc(var(--header-h) + 44px) 4vw 42px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-word { position: absolute; top: 10vh; left: -1.2vw; width: 105vw; font-family: var(--serif); font-size: clamp(150px, 24vw, 420px); line-height: .78; letter-spacing: -.065em; white-space: nowrap; opacity: .98; pointer-events: none; }
.hero-kicker { position: absolute; z-index: 3; top: calc(var(--header-h) + 27px); left: 4vw; width: 240px; font-size: 10px; font-weight: 700; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; }
.hero-title-wrap { position: absolute; z-index: 5; top: 44%; right: 4.5vw; width: min(40vw, 560px); padding: 20px 0 15px 36px; border-left: 1px solid var(--ink); background: rgba(244,239,229,.88); }
.hero-title-wrap h1 { margin: 0; font-family: var(--serif); font-size: clamp(68px, 7.5vw, 128px); font-weight: 400; line-height: .78; letter-spacing: -.045em; }
.hero-title-wrap h1 em { color: var(--red); font-weight: 400; }
.hero-title-wrap p { width: min(380px, 100%); margin: 28px 0 0 auto; font-size: 14px; line-height: 1.7; }
.hero-figure { position: absolute; z-index: 2; top: 32%; left: 9vw; width: min(49vw, 760px); height: 49vh; margin: 0; overflow: hidden; clip-path: polygon(0 9%, 77% 0, 100% 22%, 93% 100%, 8% 92%); }
.hero-figure::after { position: absolute; inset: 0; content: ""; background: linear-gradient(110deg, transparent 48%, rgba(236,56,40,.18)); mix-blend-mode: multiply; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.02); }
.hero-figure figcaption { position: absolute; z-index: 2; bottom: 22px; left: 34px; padding: 7px 10px; color: var(--paper); background: var(--ink); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.hero-stamp { position: absolute; z-index: 7; top: 36%; left: 46%; display: grid; width: 126px; height: 126px; padding: 18px; place-items: center; border: 2px solid var(--red); border-radius: 50%; color: var(--red); background: var(--paper); transform: rotate(12deg); }
.hero-stamp::before { position: absolute; inset: 7px; border: 1px dashed currentColor; border-radius: 50%; content: ""; }
.hero-stamp span { font-family: var(--serif); font-size: 54px; line-height: 1; }
.hero-stamp small { font-size: 7px; letter-spacing: .13em; text-transform: uppercase; }
.hero-note { position: absolute; bottom: 34px; left: 4vw; width: 260px; padding-top: 14px; border-top: 4px solid var(--blue); font-size: 12px; line-height: 1.6; }
.hero-scroll { position: absolute; right: 4vw; bottom: 34px; display: flex; align-items: center; gap: 28px; padding: 13px 2px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-scroll span { color: var(--red); font-size: 20px; }

.direction { min-height: 1080px; padding: 105px 5vw; overflow: hidden; }
.direction > .section-index { position: absolute; top: 108px; left: 5vw; }
.direction-line { position: absolute; top: 128px; left: 5vw; width: 44vw; height: 1px; background: var(--ink); transform-origin: left; }
.direction-heading { position: absolute; z-index: 4; top: 158px; left: 20vw; width: min(67vw, 1030px); margin: 0; font-family: var(--serif); font-size: clamp(72px, 9.3vw, 148px); font-weight: 400; line-height: .83; letter-spacing: -.045em; }
.direction-heading i { color: var(--blue); font-weight: 400; }
.direction-photo { position: absolute; top: 390px; left: 5vw; width: 35vw; height: 610px; margin: 0; overflow: hidden; clip-path: polygon(6% 0, 100% 4%, 94% 100%, 0 93%); }
.direction-photo img { width: 100%; height: 100%; object-fit: cover; }
.direction-lead { position: absolute; top: 520px; left: 47vw; width: min(37vw, 570px); margin: 0; font-family: var(--serif); font-size: clamp(29px, 3.2vw, 50px); line-height: 1.02; }
.direction-side { position: absolute; top: 790px; right: 6vw; width: min(27vw, 380px); padding-left: 20px; border-left: 6px solid var(--yellow); font-size: 14px; line-height: 1.75; }
.direction-collage { position: absolute; top: 720px; left: 34vw; width: 270px; height: 140px; pointer-events: none; }
.direction-collage b, .direction-collage span, .direction-collage i { position: absolute; padding: 8px 12px; font-size: 11px; letter-spacing: .13em; font-style: normal; }
.direction-collage b { top: 0; left: 5px; color: #fff; background: var(--red); transform: rotate(-8deg); }
.direction-collage span { top: 45px; left: 62px; color: #fff; background: var(--blue); transform: rotate(4deg); }
.direction-collage i { top: 94px; left: 24px; background: var(--yellow); transform: rotate(-3deg); }

.services { padding: 112px 0 30px; }
.services-intro { display: flex; min-height: 365px; align-items: flex-start; gap: 5vw; padding: 0 5vw 65px; }
.services-intro .section-index { flex: 0 0 190px; color: var(--yellow); }
.services-intro h2 { width: min(52vw, 720px); margin: -14px 0 0; font-family: var(--serif); font-size: clamp(58px, 7.2vw, 112px); font-weight: 400; line-height: .84; letter-spacing: -.035em; }
.services-intro p { width: 260px; margin: 140px 0 0 auto; color: rgba(250,247,240,.7); font-size: 12px; line-height: 1.7; }
.service-list { border-top: 1px solid rgba(250,247,240,.25); }
.service-line { position: relative; display: flex; min-height: 152px; align-items: center; gap: 3vw; padding: 25px 5vw; border-bottom: 1px solid rgba(250,247,240,.22); overflow: hidden; isolation: isolate; transition: color .35s; }
.service-line::before { position: absolute; z-index: -1; inset: 0; content: ""; background: var(--paper); transform: translateX(-101%); transition: transform .55s cubic-bezier(.2,.75,.2,1); }
.service-line[data-accent="red"]::after, .service-line[data-accent="blue"]::after, .service-line[data-accent="yellow"]::after { position: absolute; z-index: -1; top: 0; right: 0; width: 18px; height: 100%; content: ""; }
.service-line[data-accent="red"]::after { background: var(--red); }.service-line[data-accent="blue"]::after { background: var(--blue); }.service-line[data-accent="yellow"]::after { background: var(--yellow); }
.service-line:hover { color: var(--ink); }.service-line:hover::before { transform: none; }
.service-number { flex: 0 0 40px; color: var(--yellow); font-size: 11px; font-weight: 700; }
.service-line:hover .service-number { color: var(--red); }
.service-line h3 { flex: 0 0 min(33vw, 470px); margin: 0; font-family: var(--serif); font-size: clamp(30px, 3.1vw, 49px); font-weight: 400; line-height: .95; }
.service-line p { flex: 1; max-width: 430px; margin: 0; color: rgba(250,247,240,.65); font-size: 12px; line-height: 1.65; }
.service-line:hover p { color: rgba(17,16,14,.72); }
.service-line strong { flex: 0 0 180px; font-size: 11px; letter-spacing: .03em; }
.service-request { flex: 0 0 auto; padding: 13px 18px; border: 1px solid rgba(250,247,240,.5); color: var(--paper); background: transparent; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.service-line:hover .service-request { border-color: var(--ink); color: var(--ink); }

.method { min-height: 1120px; padding: 110px 5vw; overflow: hidden; }
.method-heading { width: min(68vw, 950px); margin: 35px 0 0 12vw; font-family: var(--serif); font-size: clamp(68px, 8.6vw, 136px); font-weight: 400; line-height: .85; letter-spacing: -.04em; }
.method-track { position: relative; height: 610px; margin-top: 48px; }
.method-track::before { position: absolute; top: 255px; right: -8vw; left: -8vw; height: 12px; content: ""; background: var(--blue); transform: rotate(-5deg); }
.method-step { position: absolute; z-index: 2; width: min(24vw, 330px); min-height: 215px; padding: 25px; border: 1px solid var(--ink); background: var(--paper-soft); box-shadow: 9px 9px 0 var(--ink); }
.method-step span { display: block; margin-bottom: 37px; color: var(--red); font-size: 11px; font-weight: 700; }
.method-step h3 { margin: 0 0 13px; font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; }
.method-step p { margin: 0; font-size: 11px; line-height: 1.65; }
.step-one { top: 70px; left: 1vw; transform: rotate(-3deg); }.step-two { top: 225px; left: 27%; transform: rotate(2deg); }.step-three { top: 30px; right: 23%; transform: rotate(-1deg); }.step-four { top: 285px; right: 0; transform: rotate(3deg); }
.method-rule { position: absolute; right: 0; bottom: 55px; left: 0; display: flex; align-items: center; justify-content: space-around; padding: 18px 5vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.method-rule i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

.continuity { min-height: 1050px; padding: 100px 5vw; overflow: hidden; }
.continuity-photo { position: absolute; top: 110px; right: 4vw; width: 58vw; height: 590px; margin: 0; overflow: hidden; clip-path: polygon(3% 5%, 100% 0, 96% 93%, 17% 100%, 0 68%); }
.continuity-photo img { width: 100%; height: 100%; object-fit: cover; }
.continuity-copy { position: relative; z-index: 3; width: min(47vw, 690px); padding: 40px 40px 45px 0; background: linear-gradient(90deg, var(--paper) 82%, transparent); }
.continuity-copy h2 { margin: 70px 0 30px; font-family: var(--serif); font-size: clamp(68px, 8.2vw, 130px); font-weight: 400; line-height: .82; letter-spacing: -.04em; }
.continuity-copy p { width: min(420px, 100%); margin-left: 8vw; font-size: 14px; line-height: 1.75; }
.continuity-ribbon { position: absolute; z-index: 4; top: 600px; right: -4vw; left: -4vw; padding: 15px 0; color: var(--paper); background: var(--red); font-family: var(--serif); font-size: clamp(32px, 4vw, 64px); line-height: 1; white-space: nowrap; transform: rotate(3deg); }
.continuity-notes { position: absolute; right: 5vw; bottom: 70px; left: 15vw; display: flex; gap: 7vw; align-items: flex-start; }
.continuity-notes p { flex: 1; margin: 0; padding-top: 13px; border-top: 1px solid var(--ink); font-size: 12px; line-height: 1.65; }
.continuity-notes b { display: block; margin-bottom: 11px; color: var(--blue); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }

.reviews { padding: 105px 0 95px; overflow: hidden; }
.reviews-head { display: flex; align-items: flex-end; padding: 0 5vw 65px; }
.reviews-head .section-index { align-self: flex-start; width: 190px; color: var(--yellow); }
.reviews-head h2 { width: min(60vw, 860px); margin: 0; font-family: var(--serif); font-size: clamp(67px, 8.8vw, 138px); font-weight: 400; line-height: .82; letter-spacing: -.04em; }
.review-controls { display: flex; gap: 8px; margin-left: auto; }
.review-controls button { width: 52px; height: 52px; border: 1px solid rgba(250,247,240,.45); color: var(--paper); background: transparent; font-size: 24px; cursor: pointer; transition: background .25s, color .25s; }
.review-controls button:hover { color: var(--ink); background: var(--yellow); }
.review-rail { display: flex; gap: 18px; overflow-x: auto; padding: 0 5vw 28px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--yellow) transparent; }
.review-card { position: relative; flex: 0 0 min(44vw, 590px); min-height: 390px; padding: 30px 34px; border: 1px solid rgba(250,247,240,.32); scroll-snap-align: start; }
.review-card:nth-child(3n+1) { border-top: 12px solid var(--red); }.review-card:nth-child(3n+2) { border-top: 12px solid var(--blue); }.review-card:nth-child(3n) { border-top: 12px solid var(--yellow); }
.review-card span { display: block; font-size: 11px; color: rgba(250,247,240,.55); }
.review-card blockquote { margin: 70px 0 55px; font-family: var(--serif); font-size: clamp(27px, 2.5vw, 39px); line-height: 1.05; }
.review-card p { position: absolute; right: 34px; bottom: 26px; left: 34px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(250,247,240,.3); color: rgba(250,247,240,.64); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }

.contact { min-height: 820px; padding: 95px 5vw; overflow: hidden; }
.contact::after { position: absolute; right: -10vw; bottom: -22vw; width: 50vw; height: 50vw; border-radius: 50%; content: ""; background: var(--yellow); }
.contact .section-index { position: relative; z-index: 2; }
.contact h2 { position: relative; z-index: 2; width: min(78vw, 1180px); margin: 48px 0 0 10vw; font-family: var(--serif); font-size: clamp(78px, 11vw, 178px); font-weight: 400; line-height: .78; letter-spacing: -.045em; }
.contact-intro { position: relative; z-index: 3; width: min(31vw, 430px); margin: 45px 0 0 45vw; font-size: 14px; line-height: 1.75; }
.contact-button { position: relative; z-index: 4; display: flex; width: min(420px, 100%); align-items: center; justify-content: space-between; margin: -12px 0 0 5vw; padding: 21px 22px; border: 2px solid var(--ink); color: var(--paper); background: var(--blue); box-shadow: 9px 9px 0 var(--ink); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-button span { font-size: 24px; }
.contact-details { position: absolute; z-index: 3; right: 5vw; bottom: 70px; display: flex; width: min(48vw, 720px); gap: 30px; }
.contact-details span { flex: 1; padding-top: 11px; border-top: 1px solid var(--ink); font-size: 11px; line-height: 1.55; }
.contact-details b { display: block; margin-bottom: 7px; color: var(--red); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.contact-mark { position: absolute; top: 50px; right: 5vw; color: var(--red); font-family: var(--serif); font-size: 220px; line-height: 1; transform: rotate(10deg); }

.site-footer { display: flex; position: relative; flex-wrap: wrap; gap: 6vw; padding: 70px 5vw 0; color: var(--paper); background: var(--ink); }
.footer-brand { flex: 1 1 430px; }
.footer-logo { width: fit-content; padding: 0; border: 0; filter: invert(1); }
.footer-logo .brand-marker { filter: invert(1); }
.footer-brand p { width: min(430px, 100%); margin: 35px 0 0 42px; color: rgba(250,247,240,.64); font-size: 12px; line-height: 1.7; }
.footer-links { display: flex; flex: 0 1 180px; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-links h2 { margin: 0 0 18px; color: var(--yellow); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.footer-links a { position: relative; font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.footer-links a::after { position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; content: ""; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.legal-links { flex-basis: 240px; }
.footer-bottom { display: flex; flex: 0 0 calc(100% + 10vw); justify-content: space-between; margin: 55px -5vw 0; padding: 20px 5vw; border-top: 1px solid rgba(250,247,240,.22); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }

.project-dialog { width: min(1080px, calc(100vw - 36px)); max-height: calc(100svh - 36px); padding: 0; border: 1px solid var(--ink); color: var(--ink); background: var(--paper); box-shadow: 18px 18px 0 var(--red); }
.project-dialog::backdrop { background: rgba(17,16,14,.82); }
.dialog-shell { position: relative; display: flex; min-height: 620px; }
.dialog-close { position: absolute; z-index: 3; top: 18px; right: 18px; padding: 9px 12px; border: 1px solid var(--ink); background: transparent; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.dialog-intro { flex: 0 0 40%; padding: 70px 45px 45px; color: var(--paper); background: var(--blue); }
.dialog-intro span { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.dialog-intro h2 { margin: 100px 0 30px; font-family: var(--serif); font-size: clamp(48px, 5vw, 75px); font-weight: 400; line-height: .87; }
.dialog-intro p { font-size: 12px; line-height: 1.7; }
.project-form { display: grid; flex: 1; grid-template-columns: 1fr 1fr; align-content: center; gap: 22px 18px; padding: 76px 48px 45px; }
.project-form label { display: flex; flex-direction: column; gap: 8px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-form input, .project-form textarea, .project-form select { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; text-transform: none; }
.project-form textarea { min-height: 90px; resize: vertical; }
.project-form input:focus, .project-form textarea:focus, .project-form select:focus { border-bottom-color: var(--red); box-shadow: 0 2px 0 var(--red); }
.form-wide { grid-column: 1 / -1; }
.form-submit { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border: 2px solid var(--ink); color: var(--paper); background: var(--ink); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.form-submit:disabled { cursor: wait; opacity: .55; }
.form-submit span { color: var(--yellow); font-size: 20px; }
.form-status { min-height: 22px; margin: 0; color: var(--blue); font-size: 12px; line-height: 1.5; }
.form-status.is-error { color: #b02117; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.reveal, .reveal-image, .reveal.is-visible, .reveal-image.is-visible {
  opacity: 1;
  transform: none;
  clip-path: none;
}
.magnetic { transition: background-color .2s, color .2s, border-color .2s; }
.cursor-orbit { display: none; }

.legal-page { min-height: 100vh; padding-top: var(--header-h); color: var(--ink); background: var(--paper); }
.legal-hero { padding: 75px 7vw 60px; border-bottom: 1px solid var(--line); }
.legal-hero .legal-label { color: var(--red); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.legal-hero h1 { width: min(80vw, 1100px); margin: 24px 0 0; font-family: var(--serif); font-size: clamp(72px, 10vw, 150px); font-weight: 400; line-height: .82; letter-spacing: -.045em; }
.legal-meta { display: flex; gap: 30px; margin-top: 50px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.legal-content { width: min(970px, calc(100% - 36px)); margin: 0 auto; padding: 80px 0 110px; }
.legal-content .legal-summary { margin: 0 0 60px; padding: 25px 30px; border-left: 8px solid var(--blue); background: var(--paper-soft); font-family: var(--serif); font-size: clamp(25px, 3vw, 39px); line-height: 1.1; }
.legal-content h2 { margin: 62px 0 18px; font-family: var(--serif); font-size: clamp(33px, 4vw, 52px); font-weight: 400; line-height: 1; }
.legal-content h3 { margin: 35px 0 12px; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.legal-content p, .legal-content li { color: rgba(17,16,14,.78); font-size: 14px; line-height: 1.8; }
.legal-content ul { padding-left: 22px; }
.legal-contact { margin-top: 72px; padding: 28px; border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--yellow); }
.legal-contact h2 { margin-top: 0; }
.legal-contact p { margin: 7px 0; }

.desktop-index a[aria-current="page"]::before { transform: translateY(0); }
.menu-panel a[aria-current="page"] { color: var(--yellow); }
.footer-links a[aria-current="page"] { color: var(--yellow); }
.inner-page { padding-top: var(--header-h); }

.home-services { min-height: 860px; padding: 105px 5vw; overflow: hidden; }
.home-services-title { position: relative; z-index: 3; width: min(64vw, 920px); }
.home-services-title .section-index { color: var(--yellow); }
.home-services-title h2 { margin: 42px 0 0 8vw; font-family: var(--serif); font-size: clamp(72px, 9.4vw, 148px); font-weight: 400; line-height: .82; letter-spacing: -.045em; }
.home-service-orbit { position: absolute; top: 185px; right: -4vw; width: 44vw; height: 440px; border: 1px solid rgba(250,247,240,.34); border-radius: 50%; transform: rotate(-11deg); }
.home-service-orbit span, .home-service-orbit i, .home-service-orbit b { position: absolute; padding: 8px 13px; font-family: var(--serif); font-size: clamp(24px, 3vw, 48px); font-weight: 400; font-style: normal; background: var(--ink); }
.home-service-orbit span:nth-child(1) { top: -12px; left: 26%; color: var(--red); }
.home-service-orbit i:nth-child(2) { top: 31%; right: -30px; color: var(--yellow); }
.home-service-orbit b:nth-child(3) { right: 16%; bottom: -9px; color: var(--blue); }
.home-service-orbit span:nth-child(4) { bottom: 18%; left: -44px; color: var(--paper); }
.home-service-orbit i:nth-child(5) { top: 21%; left: 4%; color: var(--yellow); }
.home-services-copy { width: min(31vw, 430px); margin: 72px 0 0 55vw; color: rgba(250,247,240,.67); font-size: 13px; line-height: 1.75; }
.page-link { position: relative; z-index: 4; display: flex; width: min(390px, 100%); align-items: center; justify-content: space-between; margin: 45px 0 0 12vw; padding: 18px 20px; border: 1px solid currentColor; box-shadow: 7px 7px 0 var(--red); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.page-link span { color: var(--yellow); font-size: 20px; }
.paper-section .page-link { color: var(--paper); background: var(--blue); box-shadow: 7px 7px 0 var(--ink); }
.home-review { min-height: 710px; padding: 100px 5vw; overflow: hidden; }
.home-review::after { position: absolute; top: -8vw; right: -8vw; width: 35vw; height: 35vw; border: 2px solid var(--blue); border-radius: 50%; content: ""; }
.home-review-quote { position: relative; z-index: 2; width: min(75vw, 1050px); margin-left: 8vw; }
.home-review-quote .section-index { color: var(--yellow); }
.home-review-quote blockquote { margin: 55px 0 32px; font-family: var(--serif); font-size: clamp(50px, 6.5vw, 100px); line-height: .92; letter-spacing: -.025em; }
.home-review-quote p { width: fit-content; margin: 0 0 0 auto; padding-top: 12px; border-top: 1px solid rgba(250,247,240,.35); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.home-review .page-link { margin-left: 0; }

.page-mast { position: relative; min-height: 940px; padding: 70px 5vw; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-number { position: absolute; z-index: 5; top: 70px; left: 5vw; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.page-ghost { position: absolute; top: 22px; right: -2vw; color: transparent; font-family: var(--serif); font-size: clamp(150px, 22vw, 360px); line-height: .8; letter-spacing: -.055em; -webkit-text-stroke: 1px rgba(17,16,14,.2); }
.page-mast h1 { position: absolute; z-index: 4; top: 160px; left: 8vw; width: min(68vw, 1050px); margin: 0; font-family: var(--serif); font-size: clamp(82px, 10vw, 158px); font-weight: 400; line-height: .79; letter-spacing: -.045em; }
.page-mast-photo { position: absolute; z-index: 2; right: 5vw; bottom: 58px; width: min(58vw, 890px); height: 540px; margin: 0; overflow: hidden; clip-path: polygon(5% 0, 100% 3%, 96% 92%, 22% 100%, 0 78%); }
.page-mast-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-mast-photo figcaption, .contact-page-photo figcaption { position: absolute; right: 0; bottom: 0; padding: 10px 14px; color: var(--paper); background: var(--ink); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.page-mast-note { position: absolute; z-index: 4; bottom: 88px; left: 5vw; width: min(28vw, 370px); padding: 22px 22px 22px 0; border-top: 1px solid var(--ink); background: rgba(244,239,229,.9); font-size: 13px; line-height: 1.7; }
.services-mast h1 { width: min(66vw, 980px); }
.services-mast .page-mast-photo { width: min(55vw, 820px); height: 500px; }
.process-mast .page-mast-photo { left: 5vw; right: auto; width: min(59vw, 900px); }
.process-mast .page-mast-note { right: 5vw; left: auto; }

.about-statement { position: relative; min-height: 820px; padding: 105px 5vw; overflow: hidden; }
.about-statement .section-index { color: var(--yellow); }
.about-large { position: relative; z-index: 2; width: min(78vw, 1160px); margin: 50px 0 0 8vw; font-family: var(--serif); font-size: clamp(54px, 7vw, 108px); line-height: .89; letter-spacing: -.03em; }
.about-small { width: min(30vw, 420px); margin: 50px 0 0 56vw; color: rgba(250,247,240,.68); font-size: 13px; line-height: 1.75; }
.about-slash { position: absolute; right: -2vw; bottom: -40px; color: var(--red); font-family: var(--serif); font-size: 260px; line-height: 1; transform: rotate(-8deg); }
.principles { position: relative; min-height: 920px; padding: 100px 5vw; overflow: hidden; }
.principles-heading { width: min(62vw, 870px); margin: 45px 0 0 13vw; font-family: var(--serif); font-size: clamp(70px, 9vw, 140px); font-weight: 400; line-height: .82; letter-spacing: -.04em; }
.principle { position: absolute; z-index: 2; width: min(23vw, 330px); min-height: 220px; padding: 24px; border: 1px solid var(--ink); background: var(--paper-soft); box-shadow: 8px 8px 0 var(--ink); }
.principle span { color: var(--red); font-size: 10px; font-weight: 700; }
.principle h3 { margin: 34px 0 12px; font-family: var(--serif); font-size: 36px; font-weight: 400; }
.principle p { margin: 0; font-size: 11px; line-height: 1.65; }
.principle-a { top: 510px; left: 5vw; transform: rotate(-3deg); }
.principle-b { top: 600px; left: 29vw; transform: rotate(2deg); }
.principle-c { top: 475px; right: 26vw; transform: rotate(-1deg); }
.principle-d { top: 575px; right: 4vw; transform: rotate(3deg); }
.principle-line { position: absolute; top: 640px; right: -5vw; left: -5vw; height: 13px; background: var(--blue); transform: rotate(-5deg); }
.about-scope { min-height: 700px; padding: 95px 5vw; overflow: hidden; border-top: 1px solid var(--line); }
.about-scope-word { position: absolute; top: 35px; left: -2vw; color: var(--yellow); font-family: var(--serif); font-size: clamp(92px, 15vw, 230px); line-height: .85; white-space: nowrap; }
.about-scope h2 { position: relative; z-index: 2; width: min(60vw, 880px); margin: 110px 0 0 23vw; font-family: var(--serif); font-size: clamp(58px, 7.5vw, 114px); font-weight: 400; line-height: .86; }
.about-scope > p { width: min(31vw, 430px); margin: 42px 0 0 55vw; font-size: 13px; line-height: 1.75; }

.page-services { padding-top: 100px; }
.page-services .services-intro { min-height: 440px; }
.service-request { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.service-scope-note { min-height: 520px; padding: 95px 5vw; overflow: hidden; }
.service-scope-note > p { width: min(66vw, 930px); margin: 55px 0 0 16vw; font-family: var(--serif); font-size: clamp(38px, 5vw, 72px); line-height: .98; }
.service-scope-note .page-link { margin-left: 56vw; }

.process-method { min-height: 1150px; }
.process-details { position: relative; min-height: 900px; padding: 100px 5vw; overflow: hidden; }
.process-details > h2 { width: min(67vw, 960px); margin: 0 0 0 11vw; font-family: var(--serif); font-size: clamp(70px, 9vw, 138px); font-weight: 400; line-height: .82; }
.process-detail { position: absolute; width: min(29vw, 420px); padding-top: 14px; border-top: 1px solid rgba(250,247,240,.45); }
.process-detail span { color: var(--yellow); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.process-detail p { margin: 18px 0 0; color: rgba(250,247,240,.68); font-size: 12px; line-height: 1.7; }
.detail-one { top: 480px; left: 5vw; }.detail-two { top: 590px; left: 37vw; }.detail-three { top: 445px; right: 5vw; }.detail-four { bottom: 75px; left: 19vw; }
.process-details .page-link { position: absolute; right: 7vw; bottom: 78px; }

.reviews-intro { position: relative; min-height: 670px; padding: 95px 5vw; overflow: hidden; }
.reviews-intro .page-number { top: 95px; }
.reviews-word { position: absolute; top: -20px; right: -2vw; color: var(--red); font-family: var(--serif); font-size: clamp(160px, 24vw, 390px); line-height: .8; opacity: .95; }
.reviews-intro h1 { position: relative; z-index: 2; width: min(72vw, 1040px); margin: 105px 0 0 8vw; font-family: var(--serif); font-size: clamp(86px, 11vw, 170px); font-weight: 400; line-height: .78; }
.reviews-intro h1 i { color: var(--blue); font-weight: 400; }
.reviews-intro > p { position: relative; z-index: 2; width: min(28vw, 390px); margin: 48px 0 0 58vw; font-size: 13px; line-height: 1.75; }
.reviews-page-list { padding: 100px 0 75px; }
.reviews-page-list .review-rail { padding-bottom: 45px; }
.reviews-page-list .review-card { flex-basis: min(48vw, 640px); min-height: 440px; }
.reviews-page-controls { display: flex; align-items: center; justify-content: space-between; padding: 20px 5vw 0; }
.reviews-page-controls > p { color: rgba(250,247,240,.62); font-size: 11px; letter-spacing: .06em; }

.contact-page { position: relative; min-height: 1050px; padding: 85px 5vw; overflow: hidden; }
.contact-page .page-number { top: 85px; }
.contact-page h1 { position: relative; z-index: 4; width: min(75vw, 1120px); margin: 90px 0 0 8vw; font-family: var(--serif); font-size: clamp(88px, 11vw, 175px); font-weight: 400; line-height: .78; letter-spacing: -.045em; }
.contact-page-letter { position: absolute; z-index: 1; top: -10px; right: 3vw; color: var(--yellow); font-family: var(--serif); font-size: 400px; line-height: 1; transform: rotate(9deg); }
.contact-page-photo { position: absolute; z-index: 2; right: 5vw; bottom: 95px; width: min(55vw, 820px); height: 500px; margin: 0; overflow: hidden; clip-path: polygon(3% 4%, 100% 0, 96% 92%, 17% 100%, 0 73%); }
.contact-page-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-page-copy { position: relative; z-index: 4; width: min(29vw, 400px); margin: 75px 0 0 5vw; padding: 18px 20px 18px 0; background: rgba(244,239,229,.9); font-size: 13px; line-height: 1.75; }
.contact-page .contact-button { margin: 38px 0 0 5vw; }
.contact-page-details { position: absolute; z-index: 5; right: 8vw; bottom: 45px; display: flex; width: min(64vw, 960px); gap: 26px; padding: 23px; color: var(--paper); background: var(--ink); }
.contact-page-details span { flex: 1; font-size: 11px; line-height: 1.55; }
.contact-page-details b { display: block; margin-bottom: 7px; color: var(--yellow); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 1120px) {
  .desktop-index a:nth-of-type(4), .desktop-index a:nth-of-type(5) { display: none; }
  .service-line { flex-wrap: wrap; }.service-line h3 { flex-basis: calc(48% - 60px); }.service-line p { flex-basis: 40%; }.service-line strong { margin-left: 70px; }.service-request { margin-left: auto; }
  .contact-details { width: 54vw; }
  .page-mast h1 { width: 78vw; }
  .page-mast-photo { width: 62vw; }
  .principle { width: 27vw; }
  .principle-b { left: 27vw; }.principle-c { right: 25vw; }
  .contact-page-photo { width: 60vw; }
}

@media (max-width: 780px) {
  :root { --header-h: 72px; }
  .cursor-orbit { display: none; }
  .site-header { height: var(--header-h); }
  .brand-lockup { width: auto; min-width: 0; flex: 1; padding: 8px 16px; border-right: 0; }
  .brand-lockup img { width: 150px; height: 46px; }
  .desktop-index { display: none; }.menu-toggle { display: flex; position: relative; align-items: center; justify-content: center; }
  .menu-toggle i { position: absolute; right: 14px; width: 18px; height: 1px; background: var(--ink); }.menu-toggle i:first-of-type { top: 27px; }.menu-toggle i:last-of-type { top: 42px; }

  .hero { min-height: 950px; padding: calc(var(--header-h) + 34px) 18px 30px; }
  .hero-word { top: 116px; left: -8px; font-size: 33vw; }
  .hero-kicker { top: 90px; left: 18px; width: 210px; }
  .hero-figure { top: 265px; left: 18px; width: calc(100% - 36px); height: 390px; }
  .hero-stamp { top: 575px; left: auto; right: 25px; width: 94px; height: 94px; }
  .hero-title-wrap { top: 648px; right: 18px; left: 18px; width: auto; padding: 20px 0 0 18px; }
  .hero-title-wrap h1 { font-size: 70px; }.hero-title-wrap p { margin: 22px 0 0; }
  .hero-note { bottom: 28px; left: 18px; width: 60%; }.hero-scroll { right: 18px; bottom: 28px; font-size: 0; }

  .direction { min-height: 1230px; padding: 80px 18px; }
  .direction > .section-index { top: 80px; left: 18px; }.direction-line { top: 102px; left: 18px; width: 55vw; }
  .direction-heading { top: 130px; left: 8vw; width: 88vw; font-size: 65px; }
  .direction-photo { top: 350px; left: 18px; width: 68vw; height: 530px; }
  .direction-lead { top: 810px; left: 30vw; width: 64vw; font-size: 29px; }
  .direction-side { top: 1035px; right: 18px; width: 72vw; }.direction-collage { top: 645px; left: 55vw; transform: scale(.75); transform-origin: left; }

  .services { padding-top: 78px; }
  .services-intro { display: block; min-height: auto; padding: 0 18px 55px; }
  .services-intro h2 { width: 95%; margin: 35px 0; font-size: 62px; }.services-intro p { width: 80%; margin: 0 0 0 auto; }
  .service-line { display: block; min-height: 0; padding: 28px 18px 32px 56px; }
  .service-number { position: absolute; top: 34px; left: 18px; }.service-line h3 { margin: 0 0 18px; font-size: 37px; }.service-line p { max-width: none; margin-bottom: 20px; }.service-line strong { display: block; margin: 0 0 20px; }.service-request { margin: 0; }

  .method { min-height: 1440px; padding: 80px 18px; }
  .method-heading { width: 94%; margin: 35px 0 0 5vw; font-size: 64px; }
  .method-track { height: 1020px; }.method-track::before { top: 450px; transform: rotate(79deg); }
  .method-step { width: 72vw; }.step-one { top: 40px; left: 0; }.step-two { top: 280px; right: 0; left: auto; }.step-three { top: 535px; right: auto; left: 3vw; }.step-four { top: 790px; right: 0; }
  .method-rule { bottom: 35px; overflow: hidden; gap: 22px; justify-content: flex-start; white-space: nowrap; }

  .continuity { min-height: 1300px; padding: 76px 18px; }
  .continuity-photo { top: 280px; right: 18px; width: calc(100% - 36px); height: 430px; }
  .continuity-copy { width: 90%; padding: 0; background: transparent; }.continuity-copy h2 { margin: 40px 0 0; font-size: 68px; }.continuity-copy p { margin: 500px 0 0 12vw; width: 75vw; }
  .continuity-ribbon { top: 665px; font-size: 34px; }
  .continuity-notes { right: 18px; bottom: 60px; left: 18px; display: block; }.continuity-notes p { margin-top: 25px; }

  .reviews { padding: 78px 0; }.reviews-head { display: block; padding: 0 18px 45px; }.reviews-head h2 { width: 92%; margin: 35px 0; font-size: 68px; }.review-controls { justify-content: flex-end; }.review-rail { padding-right: 18px; padding-left: 18px; }.review-card { flex-basis: 84vw; min-height: 430px; }

  .contact { min-height: 990px; padding: 75px 18px; }.contact-mark { top: 25px; right: 18px; font-size: 160px; }.contact h2 { width: 93%; margin: 90px 0 0 5vw; font-size: 79px; }.contact-intro { width: 73vw; margin: 45px 0 0 18vw; }.contact-button { width: 86vw; margin: 45px 0 0; }.contact-details { position: absolute; right: 18px; bottom: 60px; left: 18px; display: block; width: auto; }.contact-details span { display: block; margin-top: 20px; }

  .site-footer { display: block; padding: 55px 18px 0; }.footer-brand p { margin-left: 0; }.footer-links { margin-top: 48px; }.footer-bottom { display: block; margin: 48px -18px 0; padding: 18px; line-height: 1.7; }.footer-bottom span { display: block; }
  .footer-logo { padding: 0; }.footer-logo img { width: 170px; }

  .dialog-shell { display: block; max-height: calc(100svh - 36px); overflow-y: auto; }.dialog-intro { padding: 48px 28px 35px; }.dialog-intro h2 { margin: 60px 0 20px; }.project-form { display: block; padding: 35px 28px; }.project-form label { margin-bottom: 20px; }.form-submit { width: 100%; margin-bottom: 18px; }.dialog-close { color: var(--paper); border-color: var(--paper); }
  .legal-hero { padding: 55px 18px 45px; }.legal-hero h1 { width: 100%; font-size: 68px; }.legal-meta { display: block; line-height: 1.8; }.legal-content { padding: 55px 0 80px; }

  .inner-page { padding-top: var(--header-h); }
  .home-services { min-height: 920px; padding: 78px 18px; }.home-services-title { width: 95%; }.home-services-title h2 { margin: 35px 0 0 5vw; font-size: 67px; }
  .home-service-orbit { top: 355px; right: -32vw; width: 100vw; height: 330px; }.home-service-orbit span, .home-service-orbit i, .home-service-orbit b { font-size: 29px; }
  .home-services-copy { width: 72vw; margin: 390px 0 0 17vw; }.page-link, .home-review .page-link { width: 82vw; margin: 38px 0 0; }
  .home-review { min-height: 780px; padding: 78px 18px; }.home-review-quote { width: 92%; margin-left: 4vw; }.home-review-quote blockquote { font-size: 54px; }.home-review-quote p { width: 70%; }

  .page-mast { min-height: 1000px; padding: 55px 18px; }.page-number { top: 55px; left: 18px; }.page-ghost { top: 30px; font-size: 38vw; }
  .page-mast h1 { top: 150px; left: 8vw; width: 88vw; font-size: 72px; }
  .page-mast-photo, .services-mast .page-mast-photo, .process-mast .page-mast-photo { right: 18px; bottom: 205px; left: 18px; width: auto; height: 460px; }
  .page-mast-note, .process-mast .page-mast-note { right: 18px; bottom: 50px; left: auto; width: 76vw; }
  .about-statement { min-height: 930px; padding: 78px 18px; }.about-large { width: 92%; margin: 40px 0 0 4vw; font-size: 56px; }.about-small { width: 72vw; margin: 55px 0 0 18vw; }.about-slash { font-size: 180px; }
  .principles { min-height: 1320px; padding: 78px 18px; }.principles-heading { width: 92%; margin: 35px 0 0 5vw; font-size: 65px; }
  .principle { width: 72vw; }.principle-a { top: 350px; left: 18px; }.principle-b { top: 585px; right: 18px; left: auto; }.principle-c { top: 820px; right: auto; left: 26px; }.principle-d { top: 1055px; right: 18px; }
  .principle-line { top: 730px; transform: rotate(79deg); }
  .about-scope { min-height: 820px; padding: 78px 18px; }.about-scope-word { top: 45px; font-size: 29vw; }.about-scope h2 { width: 91%; margin: 155px 0 0 5vw; font-size: 63px; }.about-scope > p { width: 73vw; margin: 45px 0 0 17vw; }

  .page-services { padding-top: 78px; }.page-services .services-intro { min-height: auto; }
  .service-scope-note { min-height: 700px; padding: 78px 18px; }.service-scope-note > p { width: 92%; margin: 45px 0 0 5vw; font-size: 43px; }.service-scope-note .page-link { margin-left: 0; }

  .process-method { min-height: 1440px; }.process-details { min-height: 1160px; padding: 78px 18px; }.process-details > h2 { width: 93%; margin-left: 5vw; font-size: 64px; }
  .process-detail { width: 74vw; }.detail-one { top: 390px; left: 18px; }.detail-two { top: 555px; right: 18px; left: auto; }.detail-three { top: 720px; right: auto; left: 24px; }.detail-four { top: 885px; right: 18px; bottom: auto; left: auto; }
  .process-details .page-link { right: auto; bottom: 55px; left: 18px; }

  .reviews-intro { min-height: 760px; padding: 78px 18px; }.reviews-intro .page-number { top: 78px; }.reviews-word { top: 12px; font-size: 42vw; }.reviews-intro h1 { width: 94%; margin: 120px 0 0 4vw; font-size: 76px; }
  .reviews-intro > p { width: 73vw; margin: 55px 0 0 17vw; }.reviews-page-list { padding-top: 78px; }.reviews-page-list .review-card { flex-basis: 86vw; min-height: 470px; }
  .reviews-page-controls { display: block; padding: 10px 18px 0; }.reviews-page-controls .review-controls { margin-top: 22px; justify-content: flex-start; }

  .contact-page { min-height: 1170px; padding: 70px 18px; }.contact-page .page-number { top: 70px; }.contact-page h1 { width: 93%; margin: 80px 0 0 4vw; font-size: 76px; }
  .contact-page-letter { top: 0; right: -8vw; font-size: 230px; }.contact-page-photo { right: 18px; bottom: 310px; width: calc(100% - 36px); height: 420px; }
  .contact-page-copy { width: 75vw; margin: 45px 0 0 16vw; }.contact-page .contact-button { width: 86vw; margin: 34px 0 0; }
  .contact-page-details { right: 18px; bottom: 45px; left: 18px; display: block; width: auto; }.contact-page-details span { display: block; margin-top: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-image { opacity: 1; clip-path: none; transform: none; }
}

/* Layout integrity: keep expressive layers in separate, readable zones. */
.hero-word {
  z-index: 0;
  color: rgba(17,16,14,.11);
  opacity: 1;
}
.hero-kicker {
  width: min(300px, calc(100vw - 36px));
  padding: 8px 10px;
  border-left: 4px solid var(--red);
  background: rgba(250,247,240,.94);
}
.page-ghost,
.reviews-word,
.contact-page-letter,
.about-scope-word,
.about-slash { opacity: .14; }
.about-large,
.about-small,
.about-scope h2,
.about-scope > p { position: relative; z-index: 2; }

.contact-page {
  min-height: 0;
  padding-bottom: 90px;
}
.contact-page .page-number,
.contact-page h1,
.contact-page-photo,
.contact-page-copy,
.contact-page-details {
  position: relative;
  inset: auto;
}
.contact-page .page-number { display: block; }
.contact-page h1 {
  width: min(82vw, 1180px);
  margin: 92px 0 56px 7vw;
}
.contact-page-photo {
  width: min(72vw, 900px);
  height: clamp(500px, 46vw, 650px);
  margin: 0 0 0 auto;
}
.contact-page-copy {
  width: min(36vw, 470px);
  margin: 42px 0 0 9vw;
}
.contact-page .contact-button { margin-top: 34px; }
.contact-page-details {
  width: min(76vw, 1040px);
  margin: 68px 0 0 auto;
}

.page-mast {
  min-height: 0;
  padding: 72px 5vw 100px;
}
.page-number,
.page-mast h1,
.page-mast-photo,
.page-mast-note,
.process-mast .page-mast-photo,
.process-mast .page-mast-note {
  position: relative;
  inset: auto;
}
.page-number { display: block; }
.page-mast h1 {
  width: min(78vw, 1120px);
  margin: 84px 0 52px 7vw;
}
.page-mast-photo,
.services-mast .page-mast-photo,
.process-mast .page-mast-photo {
  width: min(72vw, 940px);
  height: clamp(500px, 46vw, 650px);
  margin: 0 0 0 auto;
}
.page-mast-note,
.process-mast .page-mast-note {
  width: min(36vw, 480px);
  margin: 36px 4vw 0 auto;
}

.direction {
  min-height: 0;
  padding: 105px 5vw 120px;
}
.direction > .section-index,
.direction-line,
.direction-heading,
.direction-photo,
.direction-lead,
.direction-side,
.direction-collage {
  position: relative;
  inset: auto;
}
.direction > .section-index { display: block; }
.direction-line { width: 44vw; margin-top: 18px; }
.direction-heading {
  width: min(76vw, 1080px);
  margin: 34px 0 0 14vw;
}
.direction-stage {
  display: flex;
  gap: clamp(48px, 7vw, 118px);
  align-items: flex-start;
  margin-top: 62px;
}
.direction-photo {
  flex: 0 0 min(39vw, 570px);
  width: auto;
  height: clamp(520px, 48vw, 650px);
}
.direction-copy {
  flex: 1 1 0;
  min-width: 0;
  padding-top: clamp(40px, 7vw, 112px);
}
.direction-lead {
  width: min(100%, 610px);
  margin: 0;
}
.direction-side {
  width: min(82%, 430px);
  margin: 54px 0 0 auto;
}
.direction-collage {
  width: 270px;
  height: 140px;
  margin: 52px 0 0 5%;
}

.continuity {
  min-height: 0;
  padding: 110px 5vw 100px;
}
.continuity-stage {
  display: flex;
  gap: clamp(35px, 5vw, 90px);
  align-items: center;
}
.continuity-photo,
.continuity-copy,
.continuity-ribbon,
.continuity-notes {
  position: relative;
  inset: auto;
}
.continuity-copy {
  flex: 1 1 44%;
  width: auto;
  padding: 35px 0;
  background: none;
}
.continuity-copy h2 { margin: 56px 0 30px; }
.continuity-copy p {
  width: min(420px, 86%);
  margin: 0 0 0 auto;
}
.continuity-photo {
  flex: 1 1 56%;
  width: auto;
  height: clamp(500px, 43vw, 640px);
}
.continuity-ribbon {
  z-index: 4;
  margin: 44px -9vw 0;
  padding: 15px 9vw;
  overflow: hidden;
  transform: rotate(1.2deg);
}
.continuity-notes {
  display: flex;
  gap: clamp(24px, 6vw, 90px);
  margin: 76px 0 0 10vw;
}

@media (max-width: 900px) {
  .direction-stage,
  .continuity-stage {
    flex-direction: column;
  }
  .direction-photo {
    flex: none;
    width: min(78vw, 560px);
  }
  .direction-copy { width: 100%; padding-top: 48px; }
  .direction-lead { width: min(72vw, 610px); margin-left: auto; }
  .direction-side { width: min(70vw, 430px); margin-left: 8vw; }
  .continuity-copy,
  .continuity-photo {
    flex: none;
    width: 100%;
  }
  .continuity-copy p { width: min(72vw, 460px); }
}

@media (max-width: 1180px) {
  .page-mast {
    min-height: 0;
    padding: 70px 5vw 90px;
  }
  .page-number,
  .page-mast h1,
  .page-mast-photo,
  .page-mast-note,
  .process-mast .page-mast-photo,
  .process-mast .page-mast-note {
    position: relative;
    inset: auto;
  }
  .page-ghost {
    z-index: 0;
    color: rgba(17,16,14,.055);
    -webkit-text-stroke: 0;
  }
  .page-number { display: block; }
  .page-mast h1 {
    width: min(92%, 900px);
    margin: 76px 0 48px 6vw;
    font-size: clamp(70px, 10.5vw, 112px);
  }
  .page-mast-photo,
  .services-mast .page-mast-photo,
  .process-mast .page-mast-photo {
    width: min(82vw, 820px);
    height: clamp(430px, 59vw, 590px);
    margin: 0 0 0 auto;
  }
  .page-mast-note,
  .process-mast .page-mast-note {
    width: min(52vw, 480px);
    margin: 34px 4vw 0 auto;
  }

  .principles {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding-bottom: 100px;
  }
  .principles-heading { margin-bottom: 20px; }
  .principle {
    position: relative;
    inset: auto;
    width: min(58vw, 480px);
    min-height: 0;
    margin-top: 34px;
  }
  .principle-a, .principle-c { align-self: flex-start; }
  .principle-b, .principle-d { align-self: flex-end; }
  .principle-line { z-index: 0; top: 58%; }

  .process-details {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding-bottom: 95px;
  }
  .process-details > h2 { margin-bottom: 30px; }
  .process-detail {
    position: relative;
    inset: auto;
    width: min(62vw, 520px);
    margin-top: 42px;
  }
  .detail-two, .detail-four { align-self: flex-end; }
  .process-details .page-link {
    position: relative;
    inset: auto;
    align-self: flex-end;
    margin: 58px 7px 0 0;
  }

  .contact-page {
    min-height: 0;
    padding-bottom: 80px;
  }
  .contact-page .page-number,
  .contact-page h1,
  .contact-page-photo,
  .contact-page-copy,
  .contact-page-details {
    position: relative;
    inset: auto;
  }
  .contact-page h1 {
    width: min(92%, 980px);
    margin: 82px 0 46px 5vw;
  }
  .contact-page-photo {
    width: min(82vw, 780px);
    height: clamp(430px, 58vw, 570px);
    margin: 0 0 0 auto;
  }
  .contact-page-copy { width: min(48vw, 470px); margin: 42px 0 0 8vw; }
  .contact-page .contact-button { margin-top: 34px; }
  .contact-page-details {
    width: min(82vw, 920px);
    margin: 64px 0 0 auto;
  }
}

@media (max-width: 780px) {
  .hero {
    min-height: 0;
    padding: calc(var(--header-h) + 22px) 18px 54px;
  }
  .hero-word {
    top: 118px;
    left: -3vw;
    font-size: 34vw;
    color: rgba(17,16,14,.07);
  }
  .hero-kicker {
    position: relative;
    inset: auto;
    z-index: 4;
    display: inline-block;
    width: min(315px, 88vw);
  }
  .hero-figure {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(78vw, 430px);
    margin: 52px 0 0;
  }
  .hero-stamp {
    top: clamp(390px, 92vw, 535px);
    right: 24px;
    left: auto;
  }
  .hero-title-wrap {
    position: relative;
    inset: auto;
    width: calc(100% - 7vw);
    margin: -10px 0 0 7vw;
    padding: 28px 0 0 18px;
  }
  .hero-title-wrap h1 { font-size: clamp(58px, 17vw, 76px); }
  .hero-note {
    position: relative;
    inset: auto;
    width: min(72vw, 340px);
    margin: 42px 0 0;
  }
  .hero-scroll {
    position: relative;
    inset: auto;
    width: fit-content;
    margin: 26px 0 0 auto;
    font-size: 9px;
  }

  .direction { padding: 78px 18px 90px; }
  .direction-heading {
    width: 94%;
    margin: 34px 0 0 5vw;
    font-size: clamp(58px, 16vw, 74px);
  }
  .direction-stage {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 48px;
  }
  .direction-photo {
    flex: none;
    width: min(82vw, 520px);
    height: min(120vw, 560px);
  }
  .direction-copy {
    width: 100%;
    padding: 46px 0 0;
  }
  .direction-lead {
    width: 78vw;
    margin-left: auto;
    font-size: clamp(28px, 8vw, 38px);
  }
  .direction-side {
    width: 78vw;
    margin: 42px 0 0 8vw;
  }
  .direction-collage { margin: 42px 0 0 18vw; }

  .continuity { padding: 78px 18px 82px; }
  .continuity-stage {
    display: flex;
    flex-direction: column;
    gap: 44px;
  }
  .continuity-copy { width: 100%; padding: 0; }
  .continuity-copy h2 {
    margin: 38px 0 28px;
    font-size: clamp(58px, 16vw, 74px);
  }
  .continuity-copy p { width: 78vw; margin: 0 0 0 auto; }
  .continuity-photo {
    flex: none;
    width: 100%;
    height: min(105vw, 500px);
  }
  .continuity-ribbon {
    margin: 42px -18px 0;
    padding: 14px 18px;
    font-size: 30px;
    transform: none;
  }
  .continuity-notes {
    display: block;
    margin: 54px 0 0;
  }
  .continuity-notes p { margin-top: 26px; }

  .home-services {
    min-height: 0;
    padding-bottom: 86px;
  }
  .home-service-orbit {
    position: relative;
    inset: auto;
    width: 115vw;
    height: 330px;
    margin: 60px 0 0 -26vw;
  }
  .home-services-copy { margin-top: 58px; }

  .page-mast { padding: 55px 18px 70px; }
  .page-mast h1 {
    width: 95%;
    margin: 70px 0 38px 4vw;
    font-size: clamp(58px, 16vw, 76px);
  }
  .page-mast-photo,
  .services-mast .page-mast-photo,
  .process-mast .page-mast-photo {
    width: 100%;
    height: min(112vw, 500px);
    margin: 0;
  }
  .page-mast-note,
  .process-mast .page-mast-note {
    width: 82vw;
    margin: 32px 0 0 auto;
  }

  .principles { padding: 78px 18px 90px; }
  .principles-heading { margin-bottom: 10px; }
  .principle {
    width: 78vw;
    margin-top: 30px;
  }
  .principle-line { top: 62%; }

  .method,
  .process-method {
    min-height: 0;
    padding-bottom: 80px;
  }
  .method-track {
    display: flex;
    height: auto;
    flex-direction: column;
    gap: 28px;
    margin-top: 54px;
  }
  .method-track::before { top: 47%; }
  .method-step,
  .step-one,
  .step-two,
  .step-three,
  .step-four {
    position: relative;
    inset: auto;
    width: 78vw;
    min-height: 0;
  }
  .step-two, .step-four { align-self: flex-end; }
  .method-rule {
    position: relative;
    inset: auto;
    margin: 62px -18px 0;
  }

  .process-details { padding: 78px 18px 88px; }
  .process-details > h2 { width: 95%; margin-left: 4vw; }
  .process-detail { width: 78vw; }
  .process-details .page-link { align-self: flex-start; }

  .reviews-intro {
    min-height: 0;
    padding: 78px 18px 80px;
  }
  .reviews-intro .page-number,
  .reviews-intro h1,
  .reviews-intro > p {
    position: relative;
    inset: auto;
  }
  .reviews-word {
    color: rgba(236,56,40,.12);
    opacity: 1;
  }
  .reviews-intro h1 {
    width: 96%;
    margin: 78px 0 0 3vw;
    font-size: clamp(62px, 17vw, 82px);
  }
  .reviews-intro > p { width: 78vw; margin: 46px 0 0 auto; }

  .contact-page { padding: 70px 18px 70px; }
  .contact-page h1 {
    width: 95%;
    margin: 76px 0 40px 3vw;
    font-size: clamp(60px, 16vw, 80px);
  }
  .contact-page-letter { color: rgba(241,200,25,.2); }
  .contact-page-photo { width: 100%; height: min(108vw, 500px); margin: 0; }
  .contact-page-copy { width: 78vw; margin: 38px 0 0 auto; }
  .contact-page .contact-button { width: 100%; margin-left: 0; }
  .contact-page-details {
    display: block;
    width: 100%;
    margin: 52px 0 0;
  }
  .contact-page-details span { display: block; margin-top: 18px; }
}