:root{
  --bg:#F2EAE2;
  --bg-soft:#EBDDD4;
  --bg-deep:#1D1A17;
  --ink:#1D1A17;
  --ink-2:#5A4F47;
  --ink-3:#8B7E73;
  --rule:rgba(29,26,23,0.12);
  --accent:#927C6F;
  --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink)}
body{font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;font-weight:400;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
main{flex:1}
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.caption{font-size:13px;color:var(--ink-2);line-height:1.5}

/* top nav */
.topnav{position:sticky;top:0;z-index:100;background:rgba(242,234,226,.94);backdrop-filter:blur(8px);padding:18px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}
.topnav .brand img{height:70px;width:auto;display:block;background:transparent}
.topnav nav{display:flex;gap:36px}
.topnav nav a{font-size:13px;letter-spacing:.06em;color:var(--ink);font-weight:500;text-transform:uppercase}
.topnav nav a:hover,.topnav nav a.active{color:var(--accent)}

/* HOME — hero */
.home-hero{padding:60px 32px 80px;max-width:var(--max);margin:0 auto}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:end}
.hero-text h1{font-weight:200;font-size:clamp(56px,8vw,124px);line-height:.95;letter-spacing:-.04em}
.hero-text h1 em{font-style:italic;font-weight:300}
.hero-text p{margin-top:36px;max-width:420px;font-size:16px;color:var(--ink-2);line-height:1.7}
.hero-image{aspect-ratio:4/5;overflow:hidden;max-width:680px;margin-left:auto}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-meta{max-width:var(--max);margin:0 auto;padding:0 32px 60px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);flex-wrap:wrap;gap:12px}
.hero-meta .left{font-size:13px;color:var(--ink-2)}
.hero-meta .left em{font-style:italic;color:var(--ink);font-weight:500;margin-left:6px}
.hero-meta .right{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

/* page hero (non-home) */
.page-hero{max-width:var(--max);margin:0 auto;padding:80px 32px 40px}
.page-hero .label{display:block;margin-bottom:14px}
.page-hero h1{font-weight:200;font-size:clamp(48px,7vw,96px);letter-spacing:-.04em;line-height:.95}
.page-hero h1 em{font-style:italic;font-weight:300;color:var(--ink-2)}
.page-hero .lead{margin-top:28px;max-width:640px;color:var(--ink-2);line-height:1.7;font-size:17px}

/* selected work */
.work{max-width:var(--max);margin:80px auto;padding:0 32px}
.work-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:48px;flex-wrap:wrap;gap:16px}
.work-head h2{font-weight:300;font-size:clamp(32px,3.5vw,48px);letter-spacing:-.02em}
.work-head h2 em{font-weight:200;color:var(--ink-2);font-style:normal}
.work-head a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px;font-weight:500}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 56px}
.work-item{display:block;max-width:540px}
.work-item .img{aspect-ratio:4/5;overflow:hidden;margin-bottom:18px}
.work-item .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.work-item:hover .img img{transform:scale(1.04)}
.work-item h3{font-size:24px;font-weight:500;letter-spacing:-.01em}
.work-item .formal{font-size:12px;color:var(--ink-3);font-style:italic;font-weight:300;margin-top:4px;letter-spacing:.01em}
.work-item .sub{font-size:14px;color:var(--ink-2);margin-top:2px;font-weight:300}
.work-item .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;font-weight:500}

/* studio strip on home */
.studio-strip{max-width:var(--max);margin:120px auto;padding:0 32px;display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:center}
.studio-strip .img{aspect-ratio:3/4;background:var(--bg-soft);display:grid;place-items:center;border:1px dashed rgba(29,26,23,.18);overflow:hidden;max-width:480px}
.studio-strip .img .placeholder{font-style:italic;color:var(--ink-3);font-size:14px;text-align:center;padding:0 24px;font-weight:300;line-height:1.5}
.studio-strip .text h2{font-weight:300;font-size:clamp(32px,3.5vw,52px);letter-spacing:-.02em;line-height:1.05;max-width:540px}
.studio-strip .text p{margin-top:28px;max-width:520px;color:var(--ink-2);line-height:1.7}
.studio-strip .text a.cta{display:inline-block;margin-top:32px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px;font-weight:500}

/* services block */
.services-block{background:var(--bg-soft);padding:120px 32px;margin-top:60px}
.services-inner{max-width:var(--max);margin:0 auto}
.services-inner > .label{display:block;margin-bottom:18px}
.services-inner > h2{font-weight:200;font-size:clamp(48px,6vw,96px);letter-spacing:-.04em;line-height:1;max-width:840px;margin-bottom:80px}
.services-inner > h2 em{font-style:italic;font-weight:300;color:var(--ink-2)}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.service{padding-top:32px;border-top:1px solid rgba(29,26,23,.18)}
.service .num{font-weight:300;font-style:italic;color:var(--ink-3);font-size:14px;margin-bottom:24px;display:block}
.service h3{font-size:36px;margin-bottom:18px;font-weight:300;letter-spacing:-.02em}
.service > p{color:var(--ink-2);max-width:440px;margin-bottom:28px;line-height:1.7}
.service ul{list-style:none;padding:0;margin-top:24px}
.service li{font-size:14px;color:var(--ink-2);padding:10px 0;border-top:1px solid var(--rule);letter-spacing:.01em}
.service li:last-child{border-bottom:1px solid var(--rule)}

/* contact CTA */
.contact-cta{background:var(--bg-deep);color:#F2EAE2;padding:140px 32px;text-align:center}
.contact-cta h2{font-weight:200;font-size:clamp(44px,6vw,96px);letter-spacing:-.03em;line-height:1}
.contact-cta h2 em{font-style:italic;font-weight:300;color:rgba(242,234,226,.7)}
.contact-cta p{color:rgba(242,234,226,.65);max-width:520px;margin:24px auto 36px;line-height:1.7}
.contact-cta .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.contact-cta .actions a{padding:14px 28px;border:1px solid #F2EAE2;font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:inline-block;font-weight:500}
.contact-cta .actions a:first-child{background:#F2EAE2;color:var(--bg-deep)}

/* PROJECTS index */
.projects-grid{max-width:1440px;margin:20px auto 80px;padding:0 32px}
.projects-tabs{display:flex;gap:32px;margin-bottom:64px;border-bottom:1px solid var(--rule);padding-bottom:18px}
.projects-tabs button{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:0 0 6px;font-weight:500;background:transparent;border:none;cursor:pointer;font-family:inherit;position:relative}
.projects-tabs button.active{color:var(--ink)}
.projects-tabs button.active::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:1px;background:var(--ink)}
.projects-tabs button:hover{color:var(--ink)}
.projects-rows{display:grid;gap:90px}
.project-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.project-row.alt .img-wrap{order:2}
.project-row .img-wrap{aspect-ratio:4/5;overflow:hidden;max-width:560px;width:100%}
.project-row.landscape .img-wrap{aspect-ratio:3/2;max-width:none}
.project-row .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.project-row a.tile{display:block;width:100%;height:100%}
.project-row a.tile:hover img{transform:scale(1.03)}
.project-row .meta{padding:16px 0}
.project-row .meta h3{font-size:36px;font-weight:400;margin-top:8px;letter-spacing:-.02em}
.project-row .meta h3 a{color:inherit;border-bottom:1px solid transparent;transition:border-color .2s}
.project-row .meta h3 a:hover{border-bottom-color:var(--ink)}
.project-row .meta .formal{font-size:13px;color:var(--ink-3);font-style:italic;font-weight:300;margin-top:6px;letter-spacing:.01em}
.project-row .meta .sub{font-size:18px;color:var(--ink-2);margin-top:4px;font-weight:300}
.project-row .meta p{color:var(--ink-2);margin-top:18px;max-width:380px;line-height:1.7}
.project-row .meta .info{display:flex;gap:24px;margin-top:24px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500;flex-wrap:wrap}
.project-row .meta .view{display:inline-block;margin-top:24px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px;font-weight:500}

/* PROJECT DETAIL */
.project-hero{aspect-ratio:21/9;overflow:hidden;max-height:780px}
.project-hero img{width:100%;height:100%;object-fit:cover}
.project-info{max-width:var(--max);margin:60px auto;padding:0 32px;display:grid;grid-template-columns:4fr 8fr;gap:60px}
.project-info .meta dl{display:grid;grid-template-columns:max-content 1fr;gap:14px 24px;font-size:13px}
.project-info .meta dt{color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase;font-size:10px;align-self:baseline;font-weight:500}
.project-info .meta dd{color:var(--ink);font-weight:400}
.project-info .text h1{font-weight:200;font-size:clamp(40px,5vw,80px);letter-spacing:-.03em;line-height:1}
.project-info .text .formal-name{font-size:13px;color:var(--ink-3);font-weight:400;margin-top:14px;letter-spacing:.14em;text-transform:uppercase}
.project-info .text .sub{font-size:22px;color:var(--ink-2);margin-top:8px;font-weight:300}
.project-info .text p{margin-top:24px;color:var(--ink-2);max-width:640px;line-height:1.7}
.project-gallery{max-width:1440px;margin:0 auto 80px;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.project-gallery .full{grid-column:1/-1}
.project-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.project-gallery .full img{aspect-ratio:21/9;max-height:720px}
.next-project{max-width:var(--max);margin:80px auto;padding:40px 32px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.next-project .label-pair{display:flex;flex-direction:column;gap:6px}
.next-project h3{font-size:32px;font-weight:300;letter-spacing:-.01em}
.next-project a.all{font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px;font-weight:500}

/* STUDIO */
.studio-page{max-width:var(--max);margin:60px auto 0;padding:0 32px}
.studio-grid{display:grid;grid-template-columns:5fr 7fr;gap:80px}
.studio-grid .img{aspect-ratio:3/4;background:var(--bg-soft);display:grid;place-items:center;border:1px dashed rgba(29,26,23,.18);max-width:480px}
.studio-grid .img .placeholder{color:var(--ink-3);font-style:italic;font-size:14px;text-align:center;padding:0 24px;font-weight:300;line-height:1.5}
.studio-grid h1{font-weight:200;font-size:clamp(48px,6vw,96px);letter-spacing:-.04em;line-height:.95}
.studio-grid h1 em{font-style:italic;font-weight:300;color:var(--ink-2)}
.studio-grid p{margin-top:24px;color:var(--ink-2);max-width:540px;line-height:1.7}
.approach{max-width:var(--max);margin:120px auto;padding:0 32px}
.approach > .label{display:block;margin-bottom:14px}
.approach h2{font-weight:200;font-size:clamp(36px,4.5vw,64px);letter-spacing:-.03em;margin-bottom:48px;max-width:540px}
.approach-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.approach-step .num{font-style:italic;font-size:24px;color:var(--ink-3);font-weight:300}
.approach-step h3{font-size:24px;margin-top:14px;font-weight:500;letter-spacing:-.01em}
.approach-step p{color:var(--ink-2);margin-top:14px;font-size:14px;max-width:300px;line-height:1.7}
.recognition{max-width:var(--max);margin:80px auto;padding:60px 32px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.recognition .item{font-size:13px;color:var(--ink-2);line-height:1.6}
.recognition .item strong{display:block;font-size:18px;color:var(--ink);font-weight:400;margin-bottom:6px;letter-spacing:-.01em}

/* CONTACT */
.contact-page{max-width:var(--max);margin:60px auto;padding:0 32px;display:grid;grid-template-columns:7fr 5fr;gap:80px}
.contact-page h1{font-weight:200;font-size:clamp(48px,6vw,96px);letter-spacing:-.04em;line-height:.95;margin-bottom:24px}
.contact-page h1 em{font-style:italic;font-weight:300;color:var(--ink-2)}
.contact-page > div > p{color:var(--ink-2);margin-bottom:36px;max-width:520px;line-height:1.7}
.contact-form{display:grid;gap:8px;max-width:520px}
.contact-form .field{display:block;margin-bottom:8px}
.contact-form .field .label{display:block;margin-bottom:6px}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:12px 0;background:transparent;border:none;border-bottom:1px solid var(--rule);color:var(--ink);font-family:inherit;font-size:16px;font-weight:400}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-bottom-color:var(--ink)}
.contact-form button{margin-top:32px;padding:14px 32px;background:var(--ink);color:var(--bg);border:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-family:inherit;width:max-content;cursor:pointer;font-weight:500}
.contact-info{padding-top:80px}
.contact-info dl{display:grid;gap:28px}
.contact-info dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px;font-weight:500}
.contact-info dd{font-size:22px;font-weight:400;letter-spacing:-.01em}
.contact-info dd a{color:inherit}

/* footer */
footer{background:var(--bg-deep);color:rgba(242,234,226,.65);padding:80px 32px 36px}
footer .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:6fr 3fr 3fr;gap:60px}
footer .brand-block img{height:80px;width:auto;display:block;margin-bottom:24px;background:transparent}
footer .brand-block .sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,234,226,.55);margin-bottom:24px;font-weight:500}
footer .brand-block p{font-size:14px;line-height:1.7;max-width:380px}
footer h4{color:#F2EAE2;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
footer p,footer a{font-size:13px;line-height:1.9;color:rgba(242,234,226,.65)}
footer a:hover{color:#F2EAE2}
footer .bottom{max-width:var(--max);margin:80px auto 0;padding-top:24px;border-top:1px solid rgba(242,234,226,.1);display:flex;justify-content:space-between;font-size:12px;color:rgba(242,234,226,.5);flex-wrap:wrap;gap:12px}

/* responsive */
@media (max-width:900px){
  .hero-grid,.studio-strip,.studio-grid,.contact-page,.work-grid,.project-row,.services-grid,.approach-steps,.project-info,.recognition,footer .inner{grid-template-columns:1fr !important;gap:40px}
  .topnav{flex-direction:column;gap:14px;align-items:flex-start}
  .topnav nav{flex-wrap:wrap;gap:18px}
  .hero-image,.work-item,.studio-strip .img,.studio-grid .img,.project-row .img-wrap{max-width:100%}
  .project-row.alt .img-wrap{order:0}
}

/* v5 additions — palette shift, reveal states, accessibility */
:root{
  /* palette pulled cooler by ~30% saturation — reads considered off-white, not beige */
  --bg:#EEE7DE;
  --bg-soft:#E4D8CE;
  --bg-cool:#ECEFF0;
  --ink:#1A1815;
  --ink-2:#57534D;
  --ink-3:#8C847B;
}

/* Reduce type weight vocabulary to 200/300/400/600 only — no 500 */
body { font-weight: 400; }
.topnav nav a { font-weight: 600; }
.work-head a, .work-item h3, .project-row .meta h3, .project-row .meta .view,
.contact-form button, .next-project a.all, .studio-strip .text a.cta,
footer h4, footer .brand-block .sub, .services-inner > .label,
.mockup-page-label h2, .approach-step h3, .contact-info dt,
.hero-meta .left em, .hero-meta .right,
.recognition .item strong, .page-hero .label, .label { font-weight: 600 !important; }
.hero-text h1, .page-hero h1, .studio-grid h1, .contact-page h1, .contact-cta h2,
.services-inner > h2 { font-weight: 200; }
.work-head h2, .studio-strip .text h2, .approach h2, .work-item h3,
.project-row .meta h3, .next-project h3 { font-weight: 300; }

/* Reveal initial state (JS handles the show) */
.reveal { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; visibility: visible !important; }
}

/* Skip link — accessibility */
.skip { position: absolute; left: -9999px; top: 0; padding: 12px 24px; background: var(--ink); color: var(--bg); z-index: 200; }
.skip:focus { left: 8px; top: 8px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Project detail: figure resets margin */
.project-gallery figure { margin: 0; overflow: hidden; }
.project-gallery figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; }

/* Loading strategy: subtle image placeholder — content images only, not logos */
.work-item .img img,
.project-row .img-wrap img,
.hero-image img,
.project-hero img,
.project-gallery img,
.studio-strip .img img,
.studio-grid .img img { background: var(--bg-soft); }

/* v5 fixes — logo discolouration + portrait presentation */

/* Footer logo: pure white silhouette on dark bg (was: invert filter that shifted colors) */
footer .brand-block img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Studio strip: portrait image fills the frame */
.studio-strip .img,
.studio-grid .img {
  background: var(--bg-soft);
  border: none;
  overflow: hidden;
}
.studio-strip .img img,
.studio-grid .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* --------------------------------------------------------------
   Splash — Acknowledgment of Country
   Shown once per session, drone footage of rocky coast, white
   logo + white text overlaid. 3.5s then fades out.
   -------------------------------------------------------------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0b0f14;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: splashAutoHide 10.8s ease forwards;
}
#splash.hide {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
#splash.instant-hide {
  animation: none;
  display: none;
}
@keyframes splashAutoHide {
  0%   { opacity: 1; visibility: visible; }
  92.6% { opacity: 1; visibility: visible; }        /* 10s visible */
  100% { opacity: 0; visibility: hidden;   }        /* .8s fade */
}
html.splash-active, body.splash-active { overflow: hidden; height: 100%; }

#splash .splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0b0f14;
}
#splash .splash-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,15,20,.55) 0%, rgba(11,15,20,.75) 55%, rgba(11,15,20,.65) 100%);
}
#splash .splash-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: 40px 32px;
  text-align: center;
  color: #fff;
}
#splash .splash-logo {
  height: 80px;
  width: auto;
  margin: 0 auto 48px;
  display: block;
  background: transparent;
  filter: drop-shadow(0 2px 24px rgba(0,0,0,.35));
}
#splash .splash-text {
  color: rgba(255,255,255,.94);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  letter-spacing: .005em;
  margin-bottom: 20px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 20px rgba(0,0,0,.35);
}
#splash .splash-text:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  #splash .splash-logo { height: 56px; margin-bottom: 32px; }
  #splash .splash-text { font-size: 15px; line-height: 1.7; }
  #splash .splash-content { padding: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  #splash .splash-video { display: none; }
  #splash { background: #0b0f14; }
}

/* Two-dimensional filter layout */
.filter-group {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.filter-group:last-of-type { margin-bottom: 48px; }
.filter-group .filter-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; min-width: 76px;
}
.filter-group .projects-tabs {
  margin: 0; padding: 0; border: none; gap: 24px;
}
.filter-group .projects-tabs button.active::after { display: none; }
.filter-group .projects-tabs button.active { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; }