/* =========================================================
   Multi-page extension
   Performance-first: transform + opacity for recurring motion.
   ========================================================= */

:root {
  --page-pad-top: 144px;
  --soft-ink: #4c4a45;
  --warm: #dedbd3;
}

html { background: var(--paper); }
body.inner-page { min-height: 100vh; }
body.inner-page main { min-height: 70vh; }

.desktop-nav a.active { background: var(--white); box-shadow: 0 1px 0 rgba(17,17,15,.04); }
.mobile-menu-panel a.active { opacity: .52; }
.mobile-panel-cta { margin-top: 6px; background: var(--ink) !important; color: #fff; border-radius: 12px; }
.text-link { position: relative; font-size: 13px; font-weight: 600; }
.text-link::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(1); transform-origin:left; transition:transform .3s var(--motion-out); }
@media (hover:hover) and (pointer:fine) { .text-link:hover::after { transform:scaleX(.22); } }

/* Global page transition + progress */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  background: var(--ink);
  transform: translate3d(0,-101%,0);
  transition: transform .46s var(--motion-out);
  will-change: transform;
}
.page-wipe.is-covering { transform: translate3d(0,0,0); }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2200; pointer-events:none; }
.scroll-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:var(--ink); will-change:transform; }

/* Shared editorial hero */
.page-hero { max-width:var(--max); margin:0 auto; padding:var(--page-pad-top) var(--gutter) 98px; }
.page-hero-meta { display:flex; justify-content:space-between; gap:24px; padding-bottom:25px; border-bottom:1px solid var(--line); font-size:10px; line-height:1.1; text-transform:uppercase; letter-spacing:.075em; color:#5f5e58; }
.page-title-row { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr); gap:60px; align-items:end; padding-top:34px; }
.page-title-row h1 { margin:0; font-size:clamp(76px,10.8vw,166px); line-height:.79; letter-spacing:-.083em; font-weight:500; }
.page-title-row h1 span { color:#99968f; }
.page-hero-side { justify-self:end; max-width:430px; padding-bottom:10px; }
.page-hero-side p, .about-hero-copy { margin:0; font-size:clamp(17px,1.5vw,22px); line-height:1.28; letter-spacing:-.035em; color:#3f3e39; }
.tiny-label { display:block; margin-top:25px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#6d6b65; }
.compact-page-hero { padding-bottom:80px; }

/* Dedicated page hero entrance. Uses only opacity/transform. */
.motion-init:not(.motion-start) .page-hero-meta,
.motion-init:not(.motion-start) .page-title-row h1,
.motion-init:not(.motion-start) .page-hero-side,
.motion-init:not(.motion-start) .about-hero-copy,
.motion-init:not(.motion-start) .project-number,
.motion-init:not(.motion-start) .project-detail-title-row h1,
.motion-init:not(.motion-start) .project-intro {
  opacity:0;
  transform:translate3d(0,34px,0);
}
.motion-init:not(.motion-start) .page-title-row h1,
.motion-init:not(.motion-start) .project-detail-title-row h1 { transform:translate3d(0,56px,0); }
.motion-init .page-hero-meta,
.motion-init .page-title-row h1,
.motion-init .page-hero-side,
.motion-init .about-hero-copy,
.motion-init .project-number,
.motion-init .project-detail-title-row h1,
.motion-init .project-intro {
  transition:opacity .68s ease, transform .86s var(--motion-out);
}
.motion-init.motion-start .page-hero-meta,
.motion-init.motion-start .page-title-row h1,
.motion-init.motion-start .page-hero-side,
.motion-init.motion-start .about-hero-copy,
.motion-init.motion-start .project-number,
.motion-init.motion-start .project-detail-title-row h1,
.motion-init.motion-start .project-intro { opacity:1; transform:translate3d(0,0,0); }
.motion-init.motion-start .page-hero-meta,.motion-init.motion-start .project-number { transition-delay:70ms; }
.motion-init.motion-start .page-title-row h1,.motion-init.motion-start .project-detail-title-row h1 { transition-delay:130ms; }
.motion-init.motion-start .page-hero-side,.motion-init.motion-start .about-hero-copy,.motion-init.motion-start .project-intro { transition-delay:230ms; }

/* Generic reveal variants */
.motion-init .reveal-item.reveal-title { transform:translate3d(0,46px,0); }
.motion-init .reveal-item.reveal-scale { transform:translate3d(0,20px,0) scale(.96); }
.motion-init .reveal-item.reveal-right { transform:translate3d(30px,0,0); }
.motion-init .reveal-item.reveal-clip { opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path .95s var(--motion-out); }
.motion-init .reveal-item.reveal-clip.is-visible { clip-path:inset(0 0 0 0); }

/* Project index */
.project-filter { display:flex; gap:8px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid var(--line); }
.filter-pill { border:1px solid var(--line); background:transparent; border-radius:999px; padding:11px 14px; font-size:11px; line-height:1; transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .25s var(--motion-out); }
.filter-pill span { margin-left:8px; opacity:.55; }
.filter-pill.active { background:var(--ink); color:#fff; border-color:var(--ink); }
@media (hover:hover) and (pointer:fine) { .filter-pill:hover { transform:translate3d(0,-2px,0); } }
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:64px 12px; margin-top:52px; }
.work-card { grid-column:span 5; display:block; min-width:0; transition:opacity .38s ease,transform .45s var(--motion-out); }
.work-card:nth-child(4n+2), .work-card:nth-child(4n+3) { grid-column:span 7; }
.work-card-large { grid-column:span 7 !important; }
.work-card-tall { grid-column:span 5 !important; }
.work-card.is-filtered-out { opacity:0; transform:scale(.97); pointer-events:none; display:none; }
.work-media { height:clamp(480px,54vw,790px); overflow:hidden; background:#ddd; }
.work-media.portrait { height:clamp(600px,67vw,900px); }
.work-media.landscape { height:clamp(360px,38vw,570px); }
.work-media.square { height:auto; aspect-ratio:1; }
.work-media img { transform:scale(1.001); transition:transform .9s var(--motion-out); }
.work-meta { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; padding-top:15px; }
.work-meta span { font-size:10px; text-transform:uppercase; letter-spacing:.075em; color:#66645d; }
.work-meta h2 { margin:7px 0 0; font-size:clamp(30px,3.7vw,58px); line-height:.9; letter-spacing:-.06em; font-weight:500; }
.work-year { padding-bottom:5px; white-space:nowrap; }
@media (hover:hover) and (pointer:fine) {
  .work-card:hover .work-media img { transform:scale(1.035); }
  .work-card:hover .work-year { color:var(--ink); }
}

/* Large CTA */
.big-link-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.big-link { max-width:var(--max); margin:0 auto; min-height:330px; padding:45px var(--gutter); display:grid; grid-template-columns:.45fr 1.4fr auto; gap:50px; align-items:center; }
.big-link > span { font-size:11px; text-transform:uppercase; letter-spacing:.075em; color:#6b6963; }
.big-link strong { font-size:clamp(50px,7.4vw,110px); line-height:.84; letter-spacing:-.07em; font-weight:500; }
.big-link i { font-style:normal; width:70px; height:70px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:24px; transition:transform .4s var(--motion-out),background-color .2s ease,color .2s ease; }
@media (hover:hover) and (pointer:fine) { .big-link:hover i { transform:rotate(45deg) scale(1.08); background:var(--ink); color:#fff; } }

/* Project detail */
.project-detail-hero { padding-top:124px; }
.project-detail-head { padding-top:30px; padding-bottom:48px; }
.project-number { font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding-bottom:24px; border-bottom:1px solid var(--line); }
.project-detail-title-row { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.4fr); align-items:end; gap:60px; padding-top:28px; }
.project-detail-title-row h1 { margin:0; font-size:clamp(90px,14vw,215px); line-height:.7; letter-spacing:-.09em; font-weight:500; }
.project-intro { max-width:430px; justify-self:end; padding-bottom:10px; }
.project-intro p { margin:0 0 25px; font-size:clamp(18px,1.55vw,23px); line-height:1.3; letter-spacing:-.04em; }
.project-cover { height:min(88vh,1040px); overflow:hidden; background:#d7d5cf; }
.project-cover img { transform:scale(1.06); will-change:transform; }
.overview-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:90px; }
.overview-grid h2 { margin:0; font-size:clamp(50px,6.3vw,94px); line-height:.92; letter-spacing:-.068em; font-weight:500; }
.overview-copy { align-self:end; max-width:580px; }
.overview-copy p { margin:0 0 18px; font-size:17px; line-height:1.5; letter-spacing:-.025em; color:#474640; }
.project-facts { display:grid; grid-template-columns:repeat(4,1fr); margin-top:88px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.project-facts div { padding:20px 20px 22px 0; display:flex; flex-direction:column; gap:10px; border-right:1px solid var(--line); }
.project-facts div:not(:first-child) { padding-left:20px; }
.project-facts div:last-child { border-right:0; }
.project-facts span { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#727069; }
.project-facts strong { font-size:13px; font-weight:500; }
.case-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.case-shot { grid-column:span 5; margin:0; }
.case-shot-wide { grid-column:span 7; }
.case-shot-tall { grid-column:span 7; }
.case-shot img { height:clamp(520px,60vw,880px); }
.case-shot-wide img { height:clamp(420px,48vw,720px); }
.case-shot-tall img { height:clamp(640px,74vw,1040px); }
.case-shot figcaption { padding-top:9px; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#66645f; }
.process-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.process-sticky { position:sticky; top:110px; align-self:start; }
.process-sticky h2 { margin:0 0 22px; max-width:650px; font-size:clamp(47px,5.4vw,80px); line-height:.92; letter-spacing:-.065em; font-weight:500; }
.process-sticky p { max-width:430px; font-size:16px; line-height:1.45; color:#55534d; }
.process-steps { border-top:1px solid var(--line); }
.process-step { min-height:260px; display:grid; grid-template-columns:60px 1fr; gap:15px 25px; align-content:start; padding:28px 0 55px; border-bottom:1px solid var(--line); }
.process-step span { grid-row:1/3; font-size:10px; letter-spacing:.08em; }
.process-step h3 { margin:0; font-size:clamp(31px,3vw,46px); letter-spacing:-.05em; font-weight:500; }
.process-step p { max-width:650px; margin:0; font-size:16px; line-height:1.5; color:#55534e; }
.case-fullbleed { height:min(92vh,1040px); overflow:hidden; }
.case-fullbleed img { object-position:center 42%; }
.result-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:end; }
.result-grid > h2 { margin:0; font-size:clamp(52px,6.5vw,96px); line-height:.9; letter-spacing:-.068em; font-weight:500; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.result-stats div { padding:24px 12px; border-right:1px solid var(--line); }
.result-stats div:last-child { border-right:0; }
.result-stats strong { display:block; font-size:clamp(42px,4.5vw,72px); line-height:1; font-weight:500; letter-spacing:-.06em; }
.result-stats span { display:block; margin-top:10px; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#6b6963; }
.next-project { background:var(--ink); color:#fff; }
.next-project-link { max-width:var(--max); min-height:620px; margin:0 auto; padding:80px var(--gutter); display:grid; grid-template-columns:1fr minmax(260px,420px) auto; gap:60px; align-items:center; }
.next-project-link > div:first-child span { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#aaa8a1; }
.next-project-link h2 { margin:25px 0 0; font-size:clamp(68px,9vw,136px); line-height:.76; letter-spacing:-.08em; font-weight:500; }
.next-project-image { height:420px; overflow:hidden; }
.next-project-image img { transition:transform .8s var(--motion-out); }
.next-project-link i { font-style:normal; font-size:28px; }
@media (hover:hover) and (pointer:fine) { .next-project-link:hover .next-project-image img { transform:scale(1.04); } }

/* About */
.about-title-row { align-items:start; }
.about-title-row .about-hero-copy { align-self:end; margin-bottom:12px; max-width:430px; justify-self:end; }
.about-collage { position:relative; height:clamp(650px,66vw,980px); margin-top:70px; background:#e6e3dc; overflow:hidden; }
.about-photo { position:absolute; margin:0; overflow:hidden; box-shadow:0 20px 55px rgba(17,17,15,.1); }
.photo-one { width:42%; height:74%; left:29%; top:8%; z-index:2; }
.photo-two { width:22%; height:31%; left:6%; top:48%; transform:rotate(-4deg); }
.photo-three { width:25%; height:38%; right:4%; top:22%; transform:rotate(3deg); }
.about-story-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:110px; }
.about-story-grid h2 { margin:0; font-size:clamp(55px,6.7vw,98px); line-height:.9; letter-spacing:-.07em; font-weight:500; }
.about-copy { align-self:end; max-width:600px; }
.about-copy p { font-size:17px; line-height:1.5; letter-spacing:-.025em; color:#4b4944; }
.numbers-band { background:var(--ink); color:#fff; }
.numbers-grid { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.numbers-grid > div { padding:60px var(--gutter); min-height:220px; border-right:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; justify-content:space-between; }
.numbers-grid > div:last-child { border-right:0; }
.numbers-grid strong { font-size:clamp(48px,5vw,78px); letter-spacing:-.06em; font-weight:500; }
.numbers-grid span { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:#aaa8a2; }
.timeline-list { margin-top:10px; border-top:1px solid var(--line); }
.timeline-list article { min-height:250px; display:grid; grid-template-columns:130px minmax(260px,.65fr) 1fr; gap:50px; align-items:start; padding:30px 0 65px; border-bottom:1px solid var(--line); }
.timeline-year { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#696760; }
.timeline-list h3 { margin:0; font-size:clamp(34px,3.5vw,54px); line-height:1; letter-spacing:-.055em; font-weight:500; }
.timeline-list p { max-width:620px; margin:0; font-size:16px; line-height:1.5; color:#52504a; }
.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.principle-card { min-height:520px; padding:25px; display:flex; flex-direction:column; }
.principle-card span { font-size:10px; letter-spacing:.08em; }
.principle-card h3 { margin:auto 0 24px; font-size:clamp(36px,4.1vw,62px); line-height:.93; letter-spacing:-.06em; font-weight:500; }
.principle-card p { margin:0; max-width:360px; font-size:14px; line-height:1.45; }
.principle-card.acid { background:var(--acid); }
.principle-card.dark { background:var(--ink); color:#fff; }
.principle-card.dark p { color:#bbb9b3; }
.principle-card.light { background:#dedbd3; }
.marquee-section { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; }
.marquee-track { display:flex; width:max-content; gap:58px; align-items:center; will-change:transform; animation:marquee 25s linear infinite; }
.marquee-track span { font-size:clamp(31px,3vw,46px); letter-spacing:-.05em; font-weight:500; }
@keyframes marquee { to { transform:translate3d(-50%,0,0); } }

/* Services */
.services-list { padding-bottom:90px; }
.service-row { display:grid; grid-template-columns:80px minmax(260px,.75fr) minmax(320px,1fr) 45px; gap:35px; align-items:start; padding:34px 0 60px; border-top:1px solid var(--line); transition:background-color .25s ease; }
.service-row:last-child { border-bottom:1px solid var(--line); }
.service-index { font-size:10px; letter-spacing:.08em; padding-top:8px; }
.service-title h2 { margin:0 0 10px; font-size:clamp(39px,4.2vw,64px); line-height:.95; letter-spacing:-.06em; font-weight:500; }
.service-title span { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#6a6862; }
.service-copy p { margin:5px 0 28px; max-width:620px; font-size:16px; line-height:1.45; }
.service-copy ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; }
.service-copy li { font-size:12px; padding-left:16px; position:relative; color:#55534d; }
.service-copy li::before { content:"+"; position:absolute; left:0; }
.service-mark { font-size:20px; transition:transform .35s var(--motion-out); }
@media (hover:hover) and (pointer:fine) { .service-row:hover .service-mark { transform:rotate(45deg); } }
.service-showcase { padding:0 12px 110px; }
.service-showcase-grid { display:grid; grid-template-columns:1.2fr .8fr .85fr; gap:12px; }
.service-showcase figure { margin:0; height:680px; overflow:hidden; }
.service-showcase figure:nth-child(2) { height:520px; align-self:end; }
.service-showcase figure:nth-child(3) { height:590px; align-self:center; }
.engagement-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.engagement-grid > div:first-child h2 { margin:0; max-width:620px; font-size:clamp(48px,5.5vw,82px); line-height:.92; letter-spacing:-.065em; font-weight:500; }
.engagement-cards { display:grid; gap:10px; }
.engagement-cards article { min-height:230px; padding:22px; background:#e5e2db; display:grid; grid-template-columns:50px 1fr; align-content:start; gap:12px 18px; transition:transform .38s var(--motion-out),background-color .2s ease; }
.engagement-cards article > span { grid-row:1/4; font-size:10px; }
.engagement-cards h3 { margin:0; font-size:34px; letter-spacing:-.05em; font-weight:500; }
.engagement-cards p { margin:0; max-width:520px; color:#55534e; line-height:1.4; }
.engagement-cards strong { font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-top:16px; font-weight:500; }
@media (hover:hover) and (pointer:fine) { .engagement-cards article:hover { transform:translate3d(0,-4px,0); background:#ddd9d0; } }

/* Contact */
.availability { display:flex; align-items:center; gap:8px; }
.availability i { width:7px; height:7px; border-radius:50%; background:#62ae4d; box-shadow:0 0 0 5px rgba(98,174,77,.11); }
.contact-email { display:inline-block; margin-top:24px; font-size:14px; font-weight:600; border-bottom:1px solid currentColor; }
.contact-layout { display:grid; grid-template-columns:.45fr 1.1fr; gap:90px; align-items:start; }
.contact-notes { position:sticky; top:115px; display:grid; border-top:1px solid var(--line); }
.contact-notes div { padding:18px 0 24px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.contact-notes span { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#74726b; }
.contact-notes strong { font-size:14px; line-height:1.35; font-weight:500; }
.project-form { background:var(--ink); color:#fff; padding:34px; }
.form-intro { display:flex; justify-content:space-between; gap:30px; padding-bottom:70px; }
.form-intro span { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#aaa8a0; }
.form-intro strong { max-width:420px; font-size:clamp(34px,3vw,48px); line-height:.94; letter-spacing:-.055em; font-weight:500; text-align:right; }
.field-row { display:grid; grid-template-columns:180px 1fr; align-items:center; gap:25px; border-top:1px solid rgba(255,255,255,.16); min-height:78px; }
.field-row label { font-size:11px; color:#aaa8a0; }
.field-row input,.field-row select,.field-row textarea { width:100%; border:0; outline:0; background:transparent; color:#fff; padding:18px 0; font-size:17px; letter-spacing:-.02em; box-shadow:none; }
.field-row input::placeholder,.field-row textarea::placeholder { color:#686760; opacity:1; }
.field-row select { color-scheme:dark; }
.field-row textarea { resize:vertical; min-height:150px; line-height:1.45; }
.field-message { align-items:start; padding-top:14px; }
.field-message label { padding-top:20px; }
.field-row:focus-within { border-top-color:rgba(255,255,255,.62); }
.form-submit-row { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding-top:35px; border-top:1px solid rgba(255,255,255,.16); }
.form-submit-row p { margin:0; max-width:330px; font-size:11px; line-height:1.45; color:#8e8c85; }
.form-submit { min-width:220px; border:0; border-radius:999px; padding:17px 19px; display:flex; justify-content:space-between; gap:20px; background:var(--acid); color:#111; font-size:13px; font-weight:600; transition:transform .3s var(--motion-out); }
@media (hover:hover) and (pointer:fine) { .form-submit:hover { transform:translate3d(0,-3px,0); } }
.form-status { min-height:18px; margin-top:17px; font-size:11px; color:#b9ff77; }
.project-form.form-sent .form-submit { background:#fff; }
.contact-link-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.contact-link-grid a { min-height:200px; padding:24px 18px 24px 0; border-right:1px solid var(--line); display:grid; grid-template-columns:1fr auto; align-content:space-between; gap:15px; }
.contact-link-grid a:not(:first-child) { padding-left:18px; }
.contact-link-grid a:last-child { border-right:0; }
.contact-link-grid span { grid-column:1/-1; font-size:10px; text-transform:uppercase; letter-spacing:.075em; color:#706e67; }
.contact-link-grid strong { align-self:end; font-size:clamp(27px,3vw,44px); line-height:.95; letter-spacing:-.055em; font-weight:500; }
.contact-link-grid i { align-self:end; font-style:normal; }

/* FAQ page */
.faq-categories { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px; }
.faq-large .accordion-item { transition:opacity .32s ease,transform .4s var(--motion-out); }
.faq-large .accordion-item.is-filtered-out { display:none; }
.faq-large .accordion-button { font-size:clamp(25px,2.5vw,38px); padding:28px 0; }
.faq-large .accordion-body { max-width:800px; padding:0 0 35px; font-size:16px; line-height:1.55; }

/* Legal */
.legal-hero .page-title-row h1 { font-size:clamp(76px,10vw,150px); }
.legal-layout { display:grid; grid-template-columns:.35fr 1fr; gap:100px; border-top:1px solid var(--line); padding-top:30px; }
.legal-layout aside { display:flex; flex-direction:column; gap:8px; font-size:11px; }
.legal-layout aside span { color:#73716b; text-transform:uppercase; letter-spacing:.07em; }
.legal-layout aside strong { font-weight:500; }
.legal-layout article { max-width:820px; }
.legal-layout article h2 { margin:0 0 18px; padding-top:55px; font-size:clamp(34px,3.6vw,54px); letter-spacing:-.055em; font-weight:500; }
.legal-layout article h2:first-child { padding-top:0; }
.legal-layout article p { font-size:16px; line-height:1.6; color:#4c4a45; }

/* 404 */
.error-page { overflow:hidden; }
.error-page .site-footer { display:none; }
.not-found-page { position:relative; min-height:100vh; padding:150px var(--gutter) 50px; display:grid; place-items:center; overflow:hidden; }
.not-found-content { position:relative; z-index:5; text-align:center; max-width:1000px; }
.not-found-content > span { display:block; margin-bottom:25px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.not-found-content h1 { margin:0; font-size:clamp(76px,11vw,170px); line-height:.78; letter-spacing:-.085em; font-weight:500; }
.not-found-content p { max-width:460px; margin:34px auto; font-size:16px; color:#55534e; }
.not-found-content .pill-button { margin-inline:auto; }
.not-found-cards figure { position:absolute; margin:0; overflow:hidden; box-shadow:0 18px 45px rgba(17,17,15,.12); }
.nf-one { width:170px; height:210px; left:7%; top:23%; transform:rotate(-7deg); }
.nf-two { width:190px; height:190px; right:8%; top:19%; transform:rotate(8deg); }
.nf-three { width:190px; height:250px; right:13%; bottom:5%; transform:rotate(-4deg); }
.motion-start .nf-one { animation:nfFloat 7s ease-in-out infinite alternate; }
.motion-start .nf-two { animation:nfFloat 8.5s ease-in-out -2s infinite alternate-reverse; }
.motion-start .nf-three { animation:nfFloat 9s ease-in-out -3s infinite alternate; }
@keyframes nfFloat { to { transform:translate3d(0,-16px,0) rotate(-2deg); } }

/* Homepage cards become keyboard/click navigable without changing layout. */
.collection-card[data-href] { cursor:pointer; }
.collection-card[data-href]:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* Rendering budget for deep sections */
@supports (content-visibility:auto) {
  .timeline-section,.principles-section,.engagement-section,.contact-alt,.result-section,.legal-copy { content-visibility:auto; contain-intrinsic-size:800px; }
}

@media (max-width:1100px) {
  :root { --page-pad-top: 120px; }
  .page-title-row,.project-detail-title-row { grid-template-columns:1fr; gap:34px; }
  .page-hero-side,.project-intro,.about-title-row .about-hero-copy { justify-self:start; max-width:620px; }
  .work-card,.work-card:nth-child(4n+2),.work-card:nth-child(4n+3),.work-card-large,.work-card-tall { grid-column:span 6 !important; }
  .project-facts { grid-template-columns:1fr 1fr; }
  .project-facts div:nth-child(2) { border-right:0; }
  .project-facts div:nth-child(3),.project-facts div:nth-child(4) { border-top:1px solid var(--line); }
  .process-layout,.engagement-grid,.contact-layout { grid-template-columns:1fr; gap:55px; }
  .process-sticky,.contact-notes { position:relative; top:auto; }
  .about-story-grid,.result-grid { grid-template-columns:1fr; gap:55px; }
  .numbers-grid { grid-template-columns:1fr 1fr; }
  .numbers-grid > div:nth-child(2) { border-right:0; }
  .numbers-grid > div:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.14); }
  .service-row { grid-template-columns:55px 1fr 1fr 30px; gap:25px; }
  .service-showcase-grid { grid-template-columns:1fr 1fr; }
  .service-showcase figure:nth-child(3) { grid-column:1/-1; height:560px; }
  .contact-link-grid { grid-template-columns:1fr; }
  .contact-link-grid a { border-right:0; border-bottom:1px solid var(--line); padding-left:0 !important; }
  .contact-link-grid a:last-child { border-bottom:0; }
}

@media (max-width:767px) {
  :root { --page-pad-top: 104px; }
  .scroll-progress { height:1px; }
  .page-wipe { transition-duration:.28s; }
  .page-hero { padding:var(--page-pad-top) 18px 68px; }
  .page-hero-meta { gap:14px; font-size:9px; }
  .page-title-row { padding-top:25px; gap:28px; }
  .page-title-row h1 { font-size:clamp(66px,19vw,105px); line-height:.82; }
  .page-hero-side p,.about-hero-copy { font-size:17px; }
  .project-filter { flex-wrap:nowrap; overflow-x:auto; padding-bottom:20px; scrollbar-width:none; }
  .project-filter::-webkit-scrollbar,.faq-categories::-webkit-scrollbar { display:none; }
  .filter-pill { flex:0 0 auto; }
  .work-grid { display:block; margin-top:34px; }
  .work-card { margin-bottom:48px; }
  .work-media,.work-media.portrait,.work-media.landscape { height:auto; aspect-ratio:4/5; }
  .work-card:nth-child(2n) .work-media { aspect-ratio:1/1; }
  .work-meta h2 { font-size:38px; }
  .big-link { min-height:265px; padding:35px 18px; grid-template-columns:1fr auto; gap:18px; }
  .big-link > span { grid-column:1/-1; }
  .big-link strong { font-size:52px; }
  .big-link i { width:52px; height:52px; }
  .project-detail-hero { padding-top:96px; }
  .project-detail-head { padding-top:20px; padding-bottom:32px; }
  .project-detail-title-row h1 { font-size:clamp(86px,28vw,136px); line-height:.72; }
  .project-intro p { font-size:17px; }
  .project-cover { height:70svh; min-height:520px; }
  .project-cover img { transform:none !important; will-change:auto; }
  .overview-grid { grid-template-columns:1fr; gap:35px; }
  .overview-grid h2 { font-size:52px; }
  .project-facts { margin-top:55px; grid-template-columns:1fr; }
  .project-facts div,.project-facts div:not(:first-child) { padding:16px 0; border-right:0; border-top:1px solid var(--line); }
  .project-facts div:first-child { border-top:0; }
  .case-grid { grid-template-columns:1fr; gap:38px; }
  .case-shot,.case-shot-wide,.case-shot-tall { grid-column:auto; }
  .case-shot img,.case-shot-wide img,.case-shot-tall img { height:auto; aspect-ratio:4/5; }
  .case-shot:nth-child(2n) img { aspect-ratio:1/1; }
  .process-sticky h2 { font-size:50px; }
  .process-step { min-height:0; grid-template-columns:42px 1fr; padding:22px 0 38px; }
  .process-step h3 { font-size:31px; }
  .process-step p { font-size:14px; }
  .case-fullbleed { height:70svh; min-height:500px; }
  .result-grid > h2 { font-size:52px; }
  .result-stats { grid-template-columns:1fr; }
  .result-stats div { border-right:0; border-bottom:1px solid var(--line); }
  .result-stats div:last-child { border-bottom:0; }
  .next-project-link { min-height:0; padding:62px 18px; grid-template-columns:1fr; gap:35px; }
  .next-project-link h2 { font-size:72px; }
  .next-project-image { height:auto; aspect-ratio:4/5; }
  .about-collage { height:670px; margin-top:45px; }
  .photo-one { width:74%; height:61%; left:13%; top:8%; }
  .photo-two { width:39%; height:27%; left:3%; top:65%; }
  .photo-three { width:42%; height:31%; right:2%; top:56%; }
  .about-story-grid h2 { font-size:52px; }
  .numbers-grid { grid-template-columns:1fr; }
  .numbers-grid > div { min-height:160px; padding:32px 18px; border-right:0; border-top:1px solid rgba(255,255,255,.14); }
  .numbers-grid > div:first-child { border-top:0; }
  .timeline-list article { grid-template-columns:60px 1fr; gap:12px 18px; padding:22px 0 38px; }
  .timeline-list p { grid-column:2; font-size:14px; }
  .principle-grid { grid-template-columns:1fr; }
  .principle-card { min-height:390px; }
  .marquee-track { animation:none; width:100%; flex-wrap:wrap; justify-content:center; gap:20px 28px; padding:0 18px; }
  .marquee-track span:nth-child(n+9) { display:none; }
  .marquee-track span { font-size:25px; }
  .service-row { grid-template-columns:35px 1fr 28px; gap:15px; padding:25px 0 38px; }
  .service-title { grid-column:2; }
  .service-copy { grid-column:2/4; }
  .service-copy ul { grid-template-columns:1fr; }
  .service-mark { grid-column:3; grid-row:1; }
  .service-showcase { padding:0 8px 70px; }
  .service-showcase-grid { grid-template-columns:1fr; gap:8px; }
  .service-showcase figure,.service-showcase figure:nth-child(2),.service-showcase figure:nth-child(3) { grid-column:auto; height:auto; aspect-ratio:4/5; }
  .engagement-grid > div:first-child h2 { font-size:50px; }
  .engagement-cards article { min-height:210px; }
  .contact-layout { gap:35px; }
  .project-form { padding:22px 18px; margin-inline:-18px; }
  .form-intro { padding-bottom:42px; flex-direction:column; }
  .form-intro strong { text-align:left; }
  .field-row { grid-template-columns:1fr; gap:2px; padding:15px 0; min-height:0; }
  .field-row input,.field-row select,.field-row textarea { padding:7px 0; font-size:16px; }
  .field-message label { padding-top:0; }
  .form-submit-row { align-items:stretch; flex-direction:column; }
  .form-submit { width:100%; }
  .faq-categories { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .faq-large .accordion-button { font-size:24px; }
  .legal-layout { grid-template-columns:1fr; gap:45px; }
  .not-found-page { padding-inline:18px; }
  .not-found-cards { opacity:.45; }
  .nf-one { width:110px; height:140px; left:-4%; top:22%; }
  .nf-two { width:120px; height:120px; right:-5%; top:21%; }
  .nf-three { display:none; }
  .motion-start .nf-one,.motion-start .nf-two,.motion-start .nf-three { animation:none; }

  /* Clip-path reveals can trigger extra paint on low-end phones; use compositor motion instead. */
  .motion-init .reveal-item.reveal-clip { opacity:0; clip-path:none; transform:translate3d(0,16px,0); transition:opacity .5s ease,transform .58s var(--motion-out); }
  .motion-init .reveal-item.reveal-clip.is-visible { opacity:1; transform:translate3d(0,0,0); }
}

@media (max-width:0px) {
  .page-wipe,.scroll-progress { display:none; }
  .marquee-track,.motion-start .nf-one,.motion-start .nf-two,.motion-start .nf-three { animation:none !important; }
  .project-cover img { transform:none !important; }
  .motion-init .reveal-item.reveal-clip { clip-path:none !important; }
}

/* CMS security honeypot: intentionally invisible to humans, still present for bot detection. */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* SEO-friendly visible breadcrumbs: accessible, compact, and visually quiet. */
.seo-breadcrumb{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1.25rem;font-size:.78rem;letter-spacing:.02em;color:rgba(17,17,17,.5)}
.seo-breadcrumb a{color:inherit;text-decoration:none;transition:color .2s ease}
.seo-breadcrumb a:hover{color:#111}
.seo-breadcrumb span[aria-current="page"]{color:rgba(17,17,17,.72)}
@media(max-width:767.98px){.seo-breadcrumb{font-size:.72rem;margin-bottom:1rem}}