:root{
  --bg: #f4eadc;
  --ink: #161616;
  --muted: rgba(22,22,22,.72);
  --line: rgba(22,22,22,.14);
  --glass: rgba(244,234,220,.55);
  --glass-strong: rgba(244,234,220,.78);
  /* Subtle grain to prevent gradient banding on large fades */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
  --shadow: 0 22px 70px rgba(0,0,0,.18);
  --radius: 22px;
  --radius-lg: 30px;
  --serif: "Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max: 1160px;
  --pad: 24px;
  --navH: 64px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* Prevent background scroll when overlays are open. */
html.scroll-locked{ overflow: hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: .01em;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.inner{
  width: min(var(--max), calc(100% - 2*var(--pad)));
  margin: 0 auto;
}

.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left: 16px; top: 16px; width:auto; height:auto;
  padding: 10px 12px; border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  z-index: 9999;
}

header{
  position: fixed;
  top: 14px;
  left: 0; right: 0;
  z-index: 70;
  pointer-events: none;
}
.navbar{
  width: min(var(--max), calc(100% - 2*var(--pad)));
  margin: 0 auto;
  height: var(--navH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 36px rgba(0,0,0,.10);
  pointer-events: auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .navbar{ background: var(--glass-strong); }
}

.brand{
  display:flex;
  gap: 10px;
  align-items:center;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .02em;
}


.brand-logo{
  width: 26px;
  height: 26px;
  display: block;
  flex: 0 0 auto;
  border-radius: 6px;
}

.brand-wordmark{
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.brand strong{ font-size: 18px; }
.brand span{ font-size: 12px; opacity: .75; }

.navlinks{
  display:flex;
  gap: 18px;
  align-items:center;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.navlinks a{
  padding: 10px 10px;
  border-radius: 999px;
  opacity: .92;
}
.navlinks a[aria-current="page"]{
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(22,22,22,.10);
  text-decoration: none;
}

.actions{
  display:flex;
  gap: 10px;
  align-items:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.30);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
}
.btn:hover{ text-decoration:none; filter: brightness(1.02); }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: rgba(22,22,22,.88);
  color: #fff;
  border-color: rgba(22,22,22,.22);
}
.btn-ghost{ background: rgba(255,255,255,.22); }

.menu-btn{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.22);
}
.menu-btn:hover{ filter: brightness(1.02); }
.hamburger{ width:18px; height:12px; display:grid; gap:3px; }
.hamburger span{ height:2px; width:100%; background: rgba(22,22,22,.78); border-radius: 2px; }

.menu{
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 90;
}
.menu.open{
  opacity: 1;
  pointer-events: auto;
}
.menu .panel{
  position:absolute;
  top: 14px;
  right: 14px;
  left: 14px;
  margin: 0 auto;
  width: min(var(--max), calc(100% - 2*var(--pad)));
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 20px;
}
.menu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.menu-close{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.25);
  display:grid; place-items:center;
}
.menu-links{
  display:grid;
  gap: 10px;
  margin-top: 18px;
}
.menu-links a{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.26);
  border: 1px solid rgba(22,22,22,.10);
}
.menu-meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

.kicker{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

main{ position: relative; }

/* Fullscreen image panels */
.panel-section{
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  background: var(--bg);
  overflow: clip;
  isolation: isolate;
}
.panel-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index: 0;
}
.panel-bg img{
  width: 112%;
  height: 112%;
  object-fit: cover;
  transform: translate3d(0,0,0) scale(1.06);
  filter: contrast(1.02) saturate(1.03);
}


.panel-section.panel-short{
  min-height: 62vh;
  min-height: 62svh;
}

.panel-section.panel-short::after{ height: clamp(140px, 18vh, 280px); }
/* Fade image into beige and back out */
.panel-section::before,
.panel-section::after{
  content:"";
  position:absolute;
  left:0; right:0;
  pointer-events:none;
  z-index: 2;
}
.panel-section::before{
  /* Slight overscan prevents 1px seams on some displays */
  top:-4px;
  height: clamp(160px, 24vh, 360px);
  background-image:
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgba(244,234,220,.985) 12%,
      rgba(244,234,220,.92) 22%,
      rgba(244,234,220,.68) 42%,
      rgba(244,234,220,.38) 62%,
      rgba(244,234,220,.14) 78%,
      rgba(244,234,220,0) 100%),
    var(--grain);
  background-size: 100% 100%, 180px 180px;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, normal;
  transform: translateZ(0);
  filter: blur(.35px);
}
.panel-section::after{
  /* Slight overscan prevents 1px seams on some displays */
  bottom:-4px;
  height: clamp(180px, 26vh, 420px);
  background-image:
    linear-gradient(to top,
      var(--bg) 0%,
      rgba(244,234,220,.985) 12%,
      rgba(244,234,220,.92) 22%,
      rgba(244,234,220,.68) 42%,
      rgba(244,234,220,.38) 62%,
      rgba(244,234,220,.14) 78%,
      rgba(244,234,220,0) 100%),
    var(--grain);
  background-size: 100% 100%, 180px 180px;
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, normal;
  transform: translateZ(0);
  filter: blur(.35px);
}
.panel-section.first::before{ display:none; }

/* Renderings page: feathered glass seam (no hard cutoff lines) */
.renderings-bg .panel-section::before,
.renderings-bg .panel-section::after{
  /* keep the transition thin so the image stays visible */
  height: clamp(52px, 7.5vh, 108px);
  /* "liquid glass" feel without a hard edge */
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  filter: none;
  background-blend-mode: normal, normal, normal;
}

/* Top seam: beige -> image */
.renderings-bg .panel-section::before{
  top: -3px;
  background-image:
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgba(244,234,220,.70) 18%,
      rgba(244,234,220,.30) 44%,
      rgba(244,234,220,.10) 70%,
      rgba(244,234,220,0) 100%),
    radial-gradient(120% 240% at 50% 0%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 66%),
    var(--grain);
  background-size: 100% 100%, 100% 100%, 180px 180px;
  background-repeat: no-repeat, no-repeat, repeat;

  /* Mask the element itself so backdrop-filter feather-outs (removes hard lines) */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,0) 100%);
}

/* Bottom seam: image -> beige */
.renderings-bg .panel-section::after{
  bottom: -3px;
  background-image:
    linear-gradient(to top,
      var(--bg) 0%,
      rgba(244,234,220,.70) 18%,
      rgba(244,234,220,.30) 44%,
      rgba(244,234,220,.10) 70%,
      rgba(244,234,220,0) 100%),
    radial-gradient(120% 240% at 50% 100%,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,0) 66%),
    var(--grain);
  background-size: 100% 100%, 100% 100%, 180px 180px;
  background-repeat: no-repeat, no-repeat, repeat;

  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,0) 100%);
}


.renderings-bg .panel-section::after{
  bottom: -3px;
  background-image:
    linear-gradient(to top,
      var(--bg) 0%,
      rgba(244,234,220,.92) 16%,
      rgba(244,234,220,.58) 40%,
      rgba(244,234,220,.18) 70%,
      rgba(244,234,220,0) 100%),
    radial-gradient(130% 220% at 50% 100%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 62%),
    var(--grain);
  background-size: 100% 100%, 100% 100%, 180px 180px;
  background-repeat: no-repeat, no-repeat, repeat;
}


/* The beige content bar that sits between images */
.bandbar{
  position: relative;
  width: 100%;
  background: transparent;
  padding: 0;
  overflow: visible;
  scroll-margin-top: 96px;
}

/* The moving beige surface (parallaxed as a single sheet) */
.band-surface{
  background: var(--bg);
  padding: 46px 0 54px;
  position: relative;
  /* Keep the transition into the image fades perfectly seamless */
  border: 0;
  box-shadow: none;
}
.band-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items:start;
}
@media (max-width: 980px){
  .navlinks{ display:none; }
  .band-grid{ grid-template-columns: 1fr; }
}

h1,h2,h3{
  font-family: var(--serif);
  letter-spacing: .01em;
  margin: 0;
}
h1{ font-size: clamp(40px, 5vw, 64px); line-height: 1.05; }
h2{ font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; }
h3{ font-size: 22px; line-height: 1.16; }

.lede{
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 74ch;
}
.quote{
  margin-top: 16px;
  color: rgba(22,22,22,.62);
  font-size: 14px;
}

.card{
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(22,22,22,.12);
  border-radius: var(--radius-lg);
  padding: 18px;
}

/* Testimonials (index): frosted deck */
.testimonials-wrap{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) + 10px);
  padding: 18px;
  background: rgba(245,239,228,.40);
  border: 1px solid rgba(22,22,22,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.testimonials-wrap::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image: var(--testimonials-bg);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.2);
  transform: scale(1.08);
  opacity: .85;
  z-index:0;
}
.testimonials-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(245,239,228,.82), rgba(245,239,228,.70));
  z-index:1;
}
.testimonial-track{
  position:relative;
  z-index:2;
  display:grid;
  gap: 12px;
}
.testimonial-card{
  position: relative;
  border-radius: 22px;
  padding: 16px 16px 14px;
  background: rgba(248,244,236,.58);
  border: 1px solid rgba(22,22,22,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.testimonial-card::before{
  content:"“";
  position:absolute;
  left: 14px;
  top: -10px;
  font-family: var(--serif);
  font-size: 68px;
  line-height: 1;
  opacity: .12;
  pointer-events:none;
}
.testimonial-card.feature{
  padding: 18px 18px 16px;
}
.testimonial-card.feature .testimonial-quote{
  font-family: var(--serif);
  font-size: 15.5px;
  letter-spacing: .01em;
}
.testimonial-quote{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}
.testimonial-byline{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(22,22,22,.70);
}
.testimonials-wrap .pills{
  position:relative;
  z-index:2;
  margin-top: 12px;
}
@media (hover:hover){
  .testimonial-card{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .testimonial-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
  }
}
/* Testimonials (index): reworked split layout */
.span-all{ grid-column: 1 / -1; }

.testimonials-stage{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) + 14px);
  padding: 22px;
  background: rgba(245,239,228,.40);
  border: 1px solid rgba(22,22,22,.14);
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.testimonials-stage::before{
  content:"";
  position:absolute;
  inset:-46px;
  background-image: var(--testimonials-bg);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.12) contrast(1.02);
  transform: scale(1.10);
  opacity: .90;
  z-index:0;
}
.testimonials-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(245,239,228,.80) 0%,
      rgba(245,239,228,.70) 46%,
      rgba(245,239,228,.88) 100%);
  z-index:1;
}

.testimonials-layout{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}

.testimonials-left{ padding: 4px 4px 2px; }
.testimonials-right{
  padding-left: 18px;
  border-left: 1px solid rgba(22,22,22,.10);
}

.testimonial-feature{
  margin-top: 16px;
}
.testimonial-feature .testimonial-quote{
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .01em;
}

.testimonial-extras{
  margin-top: 14px;
}
.testimonial-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.tchip{
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(22,22,22,.12);
  color: rgba(22,22,22,.86);
  font-size: 13px;
  text-decoration: none;
}
.tchip:hover{
  background: rgba(255,255,255,.40);
}

.testimonial-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.testimonial-grid .testimonial-card{
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

@media (max-width: 980px){
  .testimonials-stage{ padding: 18px; }
  .testimonials-layout{ grid-template-columns: 1fr; }
  .testimonials-right{
    padding-left: 0;
    border-left: 0;
    margin-top: 6px;
  }
  .testimonial-grid{ grid-template-columns: 1fr; }
}


.card p{ margin: 10px 0 0 0; color: rgba(22,22,22,.78); line-height: 1.6; }

.stack{ display:grid; gap: 14px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

.pills{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.36);
  border: 1px solid rgba(22,22,22,.12);
  color: rgba(22,22,22,.84);
  font-size: 13px;
}

.thumb-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.thumb{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(22,22,22,.12);
  background: rgba(255,255,255,.18);
}
.thumb img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
@media (max-width: 900px){
  .thumb-row{ grid-template-columns: 1fr; }
  .thumb img{ height: 160px; }
}

.list{
  display:grid;
  gap: 10px;
  margin: 12px 0 0 0;
  padding: 0;
  list-style: none;
}
.list li{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.36);
  border: 1px solid rgba(22,22,22,.10);
}
.list strong{ font-weight: 600; }
.list small{ color: rgba(22,22,22,.72); }

.form{ display:grid; gap: 12px; }
.field{ display:grid; gap: 8px; }
label{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(22,22,22,.70); }
input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(22,22,22,.16);
  background: rgba(255,255,255,.55);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}
textarea{ min-height: 160px; resize: vertical; }
input:focus, textarea:focus{
  outline: 2px solid rgba(22,22,22,.25);
  outline-offset: 2px;
}

/* Contact page: card stack (replaces the form) */
.contactStack{
  display: grid;
  gap: 14px;
  align-content: start;
}
.contactCard{
  padding: 18px;
}
.contactCardPrimary{
  position: relative;
  overflow: hidden;
}
.contactCardPrimary:before{
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -180px;
  top: -210px;
  border-radius: 999px;
  background: rgba(255,255,255,.50);
  opacity: .55;
  pointer-events: none;
}
.contactCta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.contactEmail{
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(22,22,22,.70);
}
.contactChecklist{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}
.contactChecklist li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(22,22,22,.88);
}
.contactChecklist .check{
  width: 18px;
  height: 18px;
  border-radius: 7px;
  background: rgba(0,0,0,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  flex: 0 0 18px;
  margin-top: 2px;
}
.contactCardMini{
  padding: 16px 18px;
}
.contactMiniRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.footer{
  background: var(--bg);
  border-top: 1px solid rgba(22,22,22,.10);
  padding: 40px 0 54px;
  color: rgba(22,22,22,.86);
}
.footer .inner{
  width: min(var(--max), calc(100% - 2*var(--pad)));
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.3fr .9fr .8fr;
  gap: 18px;
}
.footer .inner a{ color: rgba(22,22,22,.88); }
.footer .brandline{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
}

.footer .footer-logo{
  /* Preserve aspect ratio on all screens.
     Avoid max-width + fixed-height squish by letting the browser
     scale the image proportionally using max-height/max-width. */
  max-height: 56px;
  height: auto;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 0 14px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
  opacity: .95;
}
@media (max-width: 980px){
  .footer .footer-logo{ max-height: 52px; margin-bottom: 12px; }
}

@media (max-width: 980px){
  .footer .inner{ grid-template-columns: 1fr; }
}

[data-reveal]{
  opacity: 0;
  transition: opacity .6s ease;
}
.revealed{
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transition:none; }
  .panel-bg img{ will-change: auto; }
}



/* Portfolio tabs + gallery */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}
button.pill{
  cursor: pointer;
  font-family: var(--sans);
}
.pill .tabcount{
  margin-left: 8px;
  font-size: 12px;
  opacity: .72;
}
.pill.tab.active{
  background: rgba(22,22,22,.92);
  border-color: rgba(22,22,22,.92);
  color: rgba(244,234,220,.98);
}
.pill.tab.active .tabcount{ opacity: .92; }

.portfolio-panel{
  margin-top: 24px;
}

/* Portfolio grid
   Justified rows: each row has a consistent height, widths vary to preserve
   true aspect ratio, and rows are flush to both edges.
*/
.gallery-grid{
  --gallery-gap: 14px;
  display: block;
}
.justified-row{
  display:flex;
  gap: var(--gallery-gap);
  margin-bottom: var(--gallery-gap);
  align-items: stretch;
}
.justified-row:last-child{ margin-bottom: 0; }
.gallery-item{
  position: relative;
  display: block;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(22,22,22,.14);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  align-self: start;
}
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}
.gallery-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
}
.gallery-item:focus-visible{
  outline: 3px solid rgba(22,22,22,.55);
  outline-offset: 3px;
}

.gallery-tag{
  position:absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(244,234,220,.72);
  border: 1px solid rgba(22,22,22,.16);
  color: rgba(22,22,22,.85);
  font-size: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
}
.lightbox.open{ display:block; }
.lightbox-backdrop{
  position:absolute;
  inset: 0;
  background: rgba(10,10,10,.72);
}
.lightbox-stage{
  position:absolute;
  inset: 0;
  display:grid;
  grid-template-columns: 84px 1fr 84px;
  align-items:center;
  padding: 28px;
}
.lightbox-figure{
  margin: 0;
  justify-self: center;
  width: min(1320px, calc(100vw - 220px));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-media{
  width: auto;
  max-width: min(1100px, calc(100vw - 220px));
  max-height: calc(100vh - 190px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  box-shadow: none;
}

.lightbox-img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 28px;
  border: none;
  background: #000;
  box-shadow: none;
}

.lightbox-video{
  display: none;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 28px;
  box-shadow: none;
  background: #000;
  outline: none;
  margin: 0 auto;
  object-fit: contain;
}

.lb-video-ui{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px 10px;
  display: none;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
}

.lightbox.show-video-ui .lb-video-ui{ display: flex; }

.lb-ui-btn{
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 999px;
  padding: 10px 12px;
  line-height: 1;
  cursor: pointer;
}

.lb-ui-btn:hover{ background: rgba(255,255,255,0.18); }

.lb-ui-time{
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.9;
  white-space: nowrap;
}

.lb-ui-sep{ padding: 0 6px; opacity: 0.7; }

.lb-ui-scrub{
  flex: 1;
  min-width: 120px;
  height: 24px;
  margin: 0;
  background: transparent;
}

.lb-ui-scrub:focus{ outline: none; }

.lb-ui-scrub::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.30);
}

.lb-ui-scrub::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  margin-top: -4px;
}

.lb-ui-scrub::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.30);
}

.lb-ui-scrub::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  border: 0;
}

/* Native video controls are disabled in the lightbox; use our custom UI instead. */
.lightbox-caption{
  margin-top: 10px;
  max-width: 100%;
  color: rgba(244,234,220,.92);
  font-size: 14px;
  letter-spacing: .01em;
}
.lightbox-title{
  font-family: var(--serif);
  font-size: 16px;
}

.lightbox-arrow{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 1px solid rgba(244,234,220,.22);
  background: rgba(244,234,220,.10);
  color: rgba(244,234,220,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lightbox-arrow:hover{
  transform: scale(1.04);
  background: rgba(244,234,220,.16);
}
.lightbox-arrow:focus-visible{
  outline: 3px solid rgba(244,234,220,.52);
  outline-offset: 3px;
}
.lightbox-arrow.left{ justify-self: start; }
.lightbox-arrow.right{ justify-self: end; }

.lightbox-close{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(244,234,220,.22);
  background: rgba(244,234,220,.10);
  color: rgba(244,234,220,.95);
  cursor:pointer;
  display:grid;
  place-items:center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lightbox-close span{
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}
.lightbox-close:hover{
  background: rgba(244,234,220,.16);
}

@media (max-width: 820px){
  .lightbox-stage{
    grid-template-columns: 54px 1fr 54px;
    padding: 18px;
  }
  .lightbox-figure{ width: min(1320px, calc(100vw - 140px)); }
  .lightbox-arrow{ width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce){
  .gallery-item{ transition: none; }
  .lightbox-arrow{ transition: none; }
}

button.pill{ appearance: none; -webkit-appearance: none; }
button.gallery-item{ appearance:none; -webkit-appearance:none; }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .94em; }


/* --- Renderings page: soft gradient background --- */
body.renderings-bg{
  position: relative;
  z-index: 0;
  background: transparent;
}
body.renderings-bg::before{
  content: "";
  position: fixed;
  inset: -120px;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 650px at 18% 12%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(820px 620px at 86% 20%, rgba(214,194,168,.42), rgba(214,194,168,0) 60%),
    radial-gradient(900px 700px at 62% 86%, rgba(255,255,255,.38), rgba(255,255,255,0) 65%),
    radial-gradient(700px 520px at 8% 80%, rgba(210,186,156,.28), rgba(210,186,156,0) 62%),
    linear-gradient(180deg, #f4eadc 0%, #efe1cf 52%, #f6ecde 100%);
  filter: blur(18px);
  transform: translateZ(0);
}
body.renderings-bg::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .10;
  mix-blend-mode: multiply;
}

/* Slightly more opaque beige sections so the gradient reads behind them. */
body.renderings-bg .band-surface{
  background: rgba(244,234,220,.86);
}

/* Renderings CTA layout */
.cta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
}
@media (max-width: 820px){
  .cta{ flex-direction: column; align-items: flex-start; }
}


/* ------------------------------
   Renderings: split stacked layout
------------------------------ */
.renders-split{
  padding: calc(var(--navH) + 56px) 0 96px;
}

/* Renderings: full-width stack (no quote cards, no split columns) */
.renders-full{
  padding: calc(var(--navH) + 28px) 0 96px;
}
.renders-full .renders-two.renders-fullwidth{
  display: block;
  padding: 0;
}
.renders-full .renders-two.renders-fullwidth::before,
.renders-full .renders-two.renders-fullwidth::after{
  display: none;
}
.renders-full .renders-divider{ display: none; }
.renders-fullstack{
  gap: clamp(18px, 2.2vw, 30px);
}

/* Ensure the tile itself receives the click (videos can swallow clicks in some browsers) */
.renders-full .render-tile img,
.renders-full .render-tile video{
  pointer-events: none;
}


.quote-slot{
  height: var(--renders-offset, clamp(520px, 55vh, 820px));
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.quote-slot-bottom{
  align-items: flex-end;
}
.renders-two{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  gap: clamp(18px, 2.4vw, 36px);
  align-items: start;
  padding: 0 clamp(10px, 1.2vw, 16px);
}

.renders-two::before,
.renders-two::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(170, 150, 120, .18);
  pointer-events: none;
}

.renders-two::before{ left: 0; }
.renders-two::after{ right: 0; }

.renders-divider{
  width: 1px;
  background: rgba(170, 150, 120, .28);
  border-radius: 999px;
}

.renders-col{
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
}

.renders-stack{
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 26px);
}

.renders-stack-stagger{
  margin-top: 0;
}


.renders-bottom-space{height: 0;}

.quote-panel{
  background: rgba(244, 234, 220, .92);
  border: 1px solid rgba(170, 150, 120, .25);
  border-radius: 26px;
  padding: clamp(18px, 2vw, 24px);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}

.quote-panel .kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(26,26,26,.66);
  margin-bottom: 10px;
}

.quote-panel .quote-title{
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.06;
  margin: 0 0 10px 0;
}

.quote-panel .lede{
  margin: 0 0 14px 0;
  color: rgba(26,26,26,.72);
}

.render-tile{
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(170, 150, 120, .22);
  background: rgba(255,255,255,.22);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

.render-tile{
  cursor: pointer;
}
.render-tile:focus-visible{
  outline: 3px solid rgba(26,26,26,.22);
  outline-offset: 4px;
}

.render-tile img{
  width: 100%;
  height: auto;
  display: block;
}

.render-caption{
  padding: 14px 16px 16px;
  background: rgba(244, 234, 220, .92);
  border-top: 1px solid rgba(170, 150, 120, .20);
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -.01em;
}

@media (max-width: 980px){
  .renders-two{
    grid-template-columns: 1fr;
  }
  .renders-divider{ display: none; }
  .renders-two::before,
  .renders-two::after{ display: none; }
  .renders-stack-stagger{
  margin-top: 0;
}

  .renders-bottom-space{height: 0;}
  .renders-quote-bottom{ margin-top: 18px; }
}


/* Renderings stagger: half-step column offset (no top quote card) */
:root{
  /* fallback while JS measures the stack */
  --renders-stagger: clamp(160px, 18vh, 280px);
}

.renders-left,
.renders-right{
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

/* left column starts slightly lower to create the stagger */
.renders-stack-stagger{
  margin-top: var(--renders-stagger);
}

/* bottom quote card sits inline under the right stack */
.quote-panel-inline{
  margin-top: 22px;
}

/* video tiles behave like images */
.render-tile video{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 980px){
  .renders-stack-stagger{ margin-top: 0; }
  .quote-panel-inline{ margin-top: 18px; }
}


/* Contact page: above-the-fold panel with blurred background */
.page-contact .contact-hero{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0; /* clears fixed nav and centers content */
  box-sizing: border-box;
  background: transparent;
}
@media (max-width: 980px){
  .page-contact .contact-hero{ padding: 96px 0 72px; }
}
.page-contact .contact-hero .contact-bg{
  position: absolute;
  inset: -90px;
  z-index: 0;
  /* NOTE: this URL is relative to assets/style.css (so it's images/, not assets/images/). */
  background-image: url('images/contact-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) saturate(1.45) contrast(1.20) brightness(.92);
  transform: scale(1.14);
  opacity: 1;
}
.page-contact .contact-hero .contact-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 18% 28%, rgba(255,255,255,.28), transparent 62%),
    radial-gradient(56% 46% at 84% 30%, rgba(255,255,255,.20), transparent 66%),
    radial-gradient(78% 60% at 50% 90%, rgba(244,238,228,.12), transparent 70%),
    linear-gradient(to bottom, rgba(244,238,228,.06), rgba(244,238,228,.30));
  opacity: .22;
}

/* soften the transition into the footer so it doesn't hard-cut */
.page-contact .contact-hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 260px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(244,238,228,0) 0%,
    rgba(244,238,228,.40) 55%,
    rgba(244,238,228,1) 100%
  );
}
.page-contact .contact-hero .band-surface{
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - 2*var(--pad)));
  margin: 0 auto;
  background: rgba(244,234,220,.72);
  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
  padding: 38px var(--pad) 44px;
  border: 1px solid rgba(22,22,22,.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 54px rgba(0,0,0,.12);
  overflow: hidden;
}
.page-contact .contact-hero .inner{
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
}

/* the contact page already fades into the footer, so drop the hard top rule */
.page-contact .footer{
  border-top-color: transparent;
}