/* Revision 2: full-bleed photography, an overlaid header and a moving works gallery. */
:root { --paper:#f8f7f2; --cream:#f1f0e9; --ink:#30332f; --muted:#686f68; --green:#364a3d; --line:#dbded7; }
body { background:var(--paper); }
:root { scroll-padding-top:20px; }
.section-pad { padding-left:clamp(28px,7vw,112px); padding-right:clamp(28px,7vw,112px); }

.site-header { position:fixed; z-index:60; top:0; left:0; width:100%; height:130px; padding:29px clamp(28px,3.8vw,64px); align-items:flex-start; gap:30px; border:0; background:transparent; color:#fff; box-shadow:none; transition:background .35s,height .35s,color .35s,box-shadow .35s; }
.site-header .brand { align-items:center; gap:12px; flex-shrink:0; }
.site-header .brand-mark { width:47px; height:47px; border:2px solid currentColor; border-radius:2px; font-size:28px; line-height:1; font-weight:500; }
.site-header .brand-name { font-size:25px; letter-spacing:.075em; font-weight:600; line-height:1.05; }
.site-header .brand-name small { font-size:9px; letter-spacing:.29em; margin-top:8px; font-weight:500; }
.header-right { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:13px; }
.header-utility { display:flex; align-items:center; justify-content:flex-end; gap:25px; height:31px; }
.social-links { display:flex; gap:7px; align-items:center; }
.social-link { border:1px solid rgba(255,255,255,.75); width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:transparent; color:inherit; font-size:10px; font-weight:700; letter-spacing:-.04em; padding:0; transition:background .2s,color .2s; }
.social-link:nth-child(2) { font-size:7px; letter-spacing:-.07em; }
.social-link:hover { background:#fff; color:var(--green); }
.phone-display { display:flex; flex-direction:column; line-height:1.05; text-align:right; }
.phone-display span { font-size:9px; letter-spacing:.08em; opacity:.85; }
.phone-display strong { font-family:var(--sans); font-size:22px; font-weight:500; white-space:nowrap; letter-spacing:.02em; }
.phone-display strong small { font-family:var(--serif); font-size:13px; margin-right:3px; }
.desktop-nav { display:flex; align-items:center; gap:clamp(20px,2.6vw,42px); margin:0 0 0 auto; }
.desktop-nav a { font-size:12px; letter-spacing:.1em; font-weight:700; color:inherit; }
.desktop-nav a:hover { color:inherit; opacity:.65; }
.menu-toggle { display:flex; position:absolute; right:clamp(28px,3.8vw,64px); bottom:25px; width:35px; height:33px; margin:0; padding:0; border:0; background:transparent; color:inherit; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px; }
.menu-toggle span { width:28px; height:2px; background:currentColor; transition:transform .25s,width .25s; }
.menu-toggle span:nth-child(2) { width:20px; }
.menu-toggle:hover span:nth-child(2) { width:28px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-8px) rotate(-45deg); }
.site-header.is-scrolled { height:72px; padding-top:13px; background:rgba(248,247,242,.98); color:var(--ink); box-shadow:0 5px 20px rgba(21,31,21,.07); }
.site-header.is-scrolled .brand-mark { width:39px; height:39px; font-size:23px; }
.site-header.is-scrolled .brand-name { font-size:20px; }
.site-header.is-scrolled .brand-name small { font-size:7px; margin-top:5px; }
.site-header.is-scrolled .header-utility { display:none; }
.site-header.is-scrolled .header-right { align-self:center; }
.site-header.is-scrolled .menu-toggle { bottom:18px; }
.site-header .desktop-nav { padding-right:57px; }
.site-header.is-menu-open { background:var(--green); color:#fff; }
.mobile-nav:not([hidden]) { display:flex; position:fixed; z-index:55; top:0; right:0; left:auto; width:min(470px,100vw); height:100svh; overflow:auto; padding:150px 55px 50px; flex-direction:column; background:var(--green); color:#fff; box-shadow:-20px 0 50px rgba(0,0,0,.22); }
.mobile-nav a { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid rgba(255,255,255,.3); padding:14px 0; font-family:var(--serif); font-size:29px; }
.mobile-nav a small { font-family:var(--sans); font-size:11px; opacity:.75; }
.mobile-bottom-nav { display:none; }

.hero { display:block; position:relative; min-height:600px; height:100svh; width:100%; overflow:hidden; color:#fff; background:#5a6259; }
.hero-slides,.hero-slide,.hero-slide img,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-slide { opacity:0; z-index:0; clip-path:circle(0% at 54% 52%); transition:clip-path 1.45s cubic-bezier(.3,.05,.18,1); }
.hero-slide.is-current { opacity:1; z-index:2; clip-path:circle(150% at 54% 52%); }
.hero-slide.is-previous { opacity:1; z-index:1; clip-path:circle(150% at 54% 52%); }
.hero-slide img { object-fit:cover; object-position:center; transform:scale(1); }
.hero-slide.is-current img { animation:hero-breathe 7s ease-out both; }
@keyframes hero-breathe { from { transform:scale(1.055); } to { transform:scale(1); } }
.hero-shade { z-index:3; pointer-events:none; background:linear-gradient(90deg,rgba(10,20,14,.48) 0%,rgba(10,20,14,.12) 47%,transparent 80%),linear-gradient(0deg,rgba(5,12,7,.50) 0%,rgba(5,12,7,.10) 45%,rgba(5,12,7,.14) 100%); }
.hero-copy { position:absolute; z-index:4; left:clamp(30px,6.7vw,110px); right:32%; bottom:clamp(94px,12vh,150px); display:block; padding:0; color:#fff; }
.hero-overline { font-size:12px; letter-spacing:.25em; font-weight:700; margin-bottom:20px; }
.hero h1 { color:#fff; font-family:var(--serif); font-size:clamp(51px,5.2vw,83px); line-height:1.38; letter-spacing:.12em; margin:0 0 20px; white-space:normal; text-shadow:0 3px 18px rgba(0,0,0,.2); }
.hero-lead { color:#fff; font-family:var(--serif); font-size:clamp(14px,1.25vw,18px); line-height:1.95; letter-spacing:.08em; margin:0 0 21px; text-shadow:0 2px 12px rgba(0,0,0,.32); }
.hero-link { display:inline-flex; align-items:center; gap:24px; border-bottom:1px solid rgba(255,255,255,.8); padding:0 0 7px; font-size:12px; font-weight:600; letter-spacing:.1em; }
.hero-link:hover { opacity:.75; }
.hero-controls { position:absolute; z-index:5; right:clamp(30px,5vw,80px); bottom:45px; display:flex; gap:11px; align-items:center; margin:0; padding:0; }
.scene-dot { color:rgba(255,255,255,.6); font-size:12px; font-family:var(--sans); font-weight:600; width:42px; padding:5px 0 10px; border:0; border-bottom:2px solid rgba(255,255,255,.36); background:transparent; }
.scene-dot.active { color:#fff; border-bottom:2px solid #fff; }
.hero-photo-label { position:absolute; z-index:5; right:clamp(30px,5vw,80px); bottom:91px; font-size:11px; letter-spacing:.12em; margin:0; text-shadow:0 2px 8px #333; }
.scroll-cue { position:absolute; z-index:5; bottom:40px; left:clamp(30px,6.7vw,110px); color:#fff; font-size:11px; font-weight:600; letter-spacing:.2em; }
.scroll-cue span { margin-left:20px; font-size:17px; }
.demo-corner { position:absolute; z-index:5; right:clamp(30px,5vw,80px); top:150px; color:#fff; font-size:10px; letter-spacing:.07em; text-shadow:0 2px 8px #333; }

.intro { display:grid; grid-template-columns:minmax(300px,.95fr) 1.05fr; align-items:center; gap:clamp(48px,8vw,130px); min-height:0; padding-top:clamp(90px,10vw,155px); padding-bottom:clamp(90px,10vw,155px); }
.intro-photo { position:relative; align-self:stretch; min-height:530px; overflow:hidden; }
.intro-photo img { width:100%; height:100%; object-fit:cover; }
.intro-photo span { position:absolute; bottom:23px; left:26px; color:#fff; font-size:10px; letter-spacing:.22em; font-weight:700; text-shadow:0 2px 7px #333; }
.intro-content { max-width:650px; }
.intro-content .section-label { margin-bottom:35px; }
.intro-content .kicker { color:var(--sage); }
.intro-content h2 { font-size:clamp(31px,3vw,47px); }
.intro-content>p:last-child { max-width:565px; }

.gallery { background:#fff; padding-top:clamp(95px,10vw,150px); padding-bottom:clamp(80px,8vw,125px); overflow:hidden; }
.gallery-heading { max-width:860px; margin:0 auto; text-align:center; }
.gallery-heading .section-label { justify-content:center; }
.gallery-heading h2 { font-family:var(--serif); font-size:clamp(35px,3.7vw,57px); line-height:1.55; letter-spacing:.1em; margin:24px 0 21px; }
.gallery-heading>p:not(.section-label) { font-size:14px; color:var(--muted); line-height:2; margin:0; }
.gallery-heading small { display:block; font-size:10px; color:#929890; margin-top:11px; }
.gallery-wrap { position:relative; margin-top:55px; }
.gallery-viewport { overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.gallery-viewport::-webkit-scrollbar { display:none; }
.gallery-track { display:flex; gap:22px; width:max-content; }
.gallery-card { flex:0 0 auto; width:calc((100vw - 14vw - 66px)/4); min-width:0; scroll-snap-align:start; text-align:center; }
.gallery-image { position:relative; width:100%; aspect-ratio:1; overflow:hidden; background:var(--cream); }
.gallery-image img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.gallery-card:hover .gallery-image img { transform:scale(1.055); }
.gallery-image span { position:absolute; top:0; right:0; background:rgba(48,56,48,.65); color:#fff; padding:6px 9px; font-size:9px; letter-spacing:.08em; }
.gallery-card strong { display:block; margin-top:17px; font-family:var(--serif); font-weight:600; font-size:17px; }
.gallery-card small { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.gallery-arrow { position:absolute; z-index:3; top:calc((100vw - 14vw - 66px)/8 - 24px); width:52px; height:52px; display:grid; place-items:center; border:1px solid #d1d7cf; border-radius:50%; background:rgba(255,255,255,.95); color:var(--ink); font-size:22px; line-height:1; box-shadow:0 3px 14px rgba(0,0,0,.08); }
.gallery-prev { left:-25px; }.gallery-next { right:-25px; }
.gallery-arrow:hover { background:var(--green); color:#fff; }
.gallery-bottom { display:flex; align-items:center; justify-content:space-between; margin:36px auto 0; max-width:1140px; }
.gallery-bottom p { margin:0; font-family:var(--serif); color:var(--sage); letter-spacing:.18em; }
.gallery-bottom p span { color:var(--green); font-size:20px; }
.gallery-bottom a { font-size:12px; letter-spacing:.08em; border-bottom:1px solid var(--ink); padding-bottom:7px; }
.gallery-bottom a span { margin-left:18px; }
.approach { background:#f0f0ea; }
.approach-img { aspect-ratio:1.28; }
.examples { background:var(--paper); }
.contact-button { border:0; }
.social-dialog { width:min(90vw,520px); border:0; background:var(--paper); color:var(--ink); padding:55px; box-shadow:0 25px 75px rgba(0,0,0,.26); }
.social-dialog::backdrop { background:rgba(20,30,20,.5); }
.social-dialog h2 { font-family:var(--serif); font-size:32px; margin:20px 0; }
.social-dialog p:not(.section-label) { font-size:14px; line-height:2; }
.social-dialog small { font-size:11px; color:var(--muted); }

/* Give each desktop chapter a complete first view; the two case studies each get one view. */
@media(min-width:801px) {
  .intro { min-height:100svh; padding-top:clamp(74px,9svh,110px); padding-bottom:clamp(74px,9svh,110px); }
  .intro-photo { min-height:0; height:min(72svh,540px); align-self:center; }
  .gallery { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(65px,8svh,100px); padding-bottom:clamp(14px,2svh,45px); }
  .gallery-heading h2 { font-size:clamp(39px,3.5vw,50px); line-height:1.35; margin:13px 0; }
  .gallery-wrap { --gallery-card-width:calc((min(1000px,86vw) - 66px)/4); width:min(1000px,86vw); margin:27px auto 0; }
  .gallery-card { width:var(--gallery-card-width); }
  .gallery-arrow { top:calc(var(--gallery-card-width)/2 - 26px); }
  .gallery-bottom { width:min(1000px,86vw); margin-top:20px; }
  .approach { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(68px,8svh,105px); padding-bottom:clamp(55px,7svh,95px); }
  .approach .section-heading { margin-bottom:28px; }
  .approach .section-heading h2 { font-size:clamp(34px,3vw,43px); line-height:1.43; }
  .approach-img { aspect-ratio:1.45; }
  .approach-card .card-no { margin-top:15px; }
  .examples { padding-top:0; padding-bottom:0; }
  .examples-screen { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:65px; padding-bottom:55px; }
  .examples-screen-primary .section-heading { margin-bottom:20px; }
  .examples-screen-primary .section-heading h2 { font-size:clamp(34px,3vw,43px); line-height:1.43; margin-bottom:10px; }
  .example-feature { grid-template-columns:52% 48%; margin-top:0; }
  .example-photos { padding:0 12% 5% 0; }
  .feature-main { aspect-ratio:1.55; }
  .example-text { padding:0 0 0 clamp(28px,5vw,70px); }
  .example-text h3 { font-size:clamp(27px,2.45vw,35px); line-height:1.43; margin:12px 0; }
  .example-text>p:not(.card-no) { line-height:1.8; }
  .example-text dl { margin-top:18px; }
  .example-text dl div { padding:8px 0; }
  .example-secondary { margin-top:0; }
  .example-secondary img { aspect-ratio:1.55; }
  .photo-study-link { align-self:flex-end; margin-top:28px; }
  .flow { min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
  .flow-list { margin-top:45px; }
  .contact { min-height:100svh; }
  .contact-image { min-height:0; }
}

@media(max-width:1000px) {
  .site-header .brand-name { font-size:20px; }
  .site-header .brand-mark { width:40px; height:40px; font-size:24px; }
  .header-utility { gap:14px; }.phone-display strong { font-size:18px; }
  .desktop-nav { gap:18px; }.desktop-nav a { font-size:11px; }
  .hero-copy { right:20%; }
}
@media(max-width:800px) {
  body { padding-bottom:67px; }
  .site-header { height:77px; padding:19px 24px; align-items:center; }
  .site-header.is-scrolled { height:65px; padding:12px 24px; }
  .site-header .brand-mark { width:36px; height:36px; font-size:21px; }
  .site-header .brand-name { font-size:18px; }
  .site-header .brand-name small { font-size:7px; margin-top:5px; }
  .header-utility,.desktop-nav { display:none!important; }
  .menu-toggle,.site-header.is-scrolled .menu-toggle { top:22px; right:24px; bottom:auto; width:33px; height:30px; }
  .site-header.is-scrolled .menu-toggle { top:18px; }
  .mobile-nav:not([hidden]) { width:100vw; padding:110px 30px 95px; }
  .mobile-bottom-nav { display:grid; grid-template-columns:repeat(3,1fr); position:fixed; z-index:45; bottom:0; left:0; right:0; height:67px; background:var(--green); color:#fff; box-shadow:0 -3px 12px rgba(0,0,0,.12); }
  .mobile-bottom-nav>* { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:#fff; border:0; border-right:1px solid rgba(255,255,255,.2); background:transparent; font-size:10px; letter-spacing:.05em; }
  .mobile-bottom-nav>*:last-child { border-right:0; }
  .mobile-bottom-nav span { font-size:20px; line-height:1; }
  .hero { min-height:620px; height:100svh; }
  .hero-copy { left:28px; right:26px; bottom:146px; }
  .hero h1 { font-size:clamp(39px,7.5vw,58px); line-height:1.45; }
  .hero-overline { font-size:9px; }
  .hero-lead { font-size:13px; }
  .hero-controls { right:25px; bottom:85px; }
  .hero-photo-label { right:25px; bottom:123px; font-size:9px; }
  .scroll-cue { display:none; }
  .demo-corner { top:91px; right:24px; bottom:auto; font-size:9px; }
  .intro { grid-template-columns:1fr; gap:44px; }
  .intro-photo { min-height:0; aspect-ratio:1.4; }
  .intro-content { max-width:690px; }
  .gallery-card { width:calc((100vw - 56px - 22px)/2); }
  .gallery-arrow { top:calc((100vw - 56px - 22px)/4 - 24px); }
  .intro { padding-top:70px; padding-bottom:65px; gap:30px; }
  .intro-content h2 { line-height:1.5; }
  .intro-content>p:last-child { margin-top:18px; }
  .gallery { padding-top:75px; padding-bottom:55px; }
  .gallery,.approach { min-height:calc(100svh - 67px); }
  .gallery-heading h2 { line-height:1.4; margin:14px 0; }
  .gallery-wrap { margin-top:28px; }
  .gallery-bottom { margin-top:18px; }
  .approach { padding-top:75px; padding-bottom:65px; }
  .approach .section-heading { margin-bottom:30px; }
  .approach .section-heading h2 { line-height:1.45; }
  .approach-img { aspect-ratio:1.55; }
  .examples { padding-top:75px; padding-bottom:70px; }
  .examples .section-heading { margin-bottom:30px; }
  .examples .section-heading h2 { line-height:1.45; }
  .examples-screen-secondary { margin-top:65px; }
  .example-secondary { margin-top:0; }
  .contact { min-height:calc(100svh - 67px); padding:0; display:flex; flex-direction:column; }
  .contact-panel { order:0; padding:70px 28px 45px; }
  .contact-image { order:1; height:270px; min-height:0; }
  .flow { min-height:calc(100svh - 67px); display:flex; flex-direction:column; justify-content:center; }
}
@media(max-width:600px) {
  .hero-slide img { object-position:center; }
  .hero-slide:nth-child(3) img { object-position:58% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(6,16,8,.58) 0%,rgba(6,16,8,.04) 62%,rgba(6,16,8,.18) 100%); }
  .hero-copy { left:24px; right:22px; bottom:154px; }
  .hero h1 { font-size:clamp(38px,9vw,52px); margin-bottom:13px; }
  .hero-lead { font-size:12px; margin-bottom:14px; }
  .hero-link { font-size:11px; }
  .scene-dot { width:32px; font-size:10px; }
  .hero-controls { bottom:86px; gap:8px; }
  .hero-photo-label { bottom:123px; }
  .section-pad { padding-left:25px; padding-right:25px; }
  .intro { padding-top:70px; padding-bottom:65px; }
  .intro-photo { aspect-ratio:1.15; }
  .intro-content .section-label { margin-bottom:25px; }
  .gallery { padding-top:75px; padding-bottom:55px; }
  .gallery-heading h2 { font-size:34px; }
  .gallery-heading>p:not(.section-label) { font-size:12px; }
  .gallery-wrap { margin-top:28px; }
  .gallery-card { width:72vw; }
  .gallery-arrow { top:calc(36vw - 23px); width:46px; height:46px; }
  .gallery-prev { left:-18px; }.gallery-next { right:-18px; }
  .gallery-bottom { gap:15px; align-items:flex-end; }
  .gallery-bottom a { font-size:10px; text-align:right; }
  .gallery-image span { font-size:8px; }
  .approach-grid { gap:28px; }
  .approach-img { aspect-ratio:1.75; }
  .examples { padding-top:70px; padding-bottom:45px; }
  .examples-screen-secondary { margin-top:20px; }
  .example-text { padding-top:20px; }
  .example-text h3 { margin:11px 0; line-height:1.45; }
  .example-text dl { margin-top:20px; }
  .example-text dl div { padding:8px 0; }
  .contact-panel { padding:76px 25px 34px; }
  .contact h2 { font-size:28px; line-height:1.5; letter-spacing:.03em; }
  .contact-image { height:170px; }
  .social-dialog { padding:35px 25px; }
}
@media(max-width:600px) and (max-height:700px) {
  .hero-copy { bottom:calc(max(0px, 620px - 100svh) + 205px); }
  .hero-controls { bottom:calc(max(0px, 620px - 100svh) + 82px); }
  .hero-photo-label { bottom:calc(max(0px, 620px - 100svh) + 119px); }
}
@media(prefers-reduced-motion:reduce) {
  .hero-slide,.hero-slide.is-current img,.gallery-viewport,.gallery-image img { transition:none; animation:none; scroll-behavior:auto; }
}