/* ==========================================================================
   CY Design Builders — stylesheet
   ========================================================================== */

:root{
  /* palette */
  --cream:       #f6f1e7;
  --cream-2:     #efe6d4;
  --sand:        #ccba9f;
  --sand-dark:   #a68a63;
  --ink:         #211d18;
  --ink-soft:    #4a433a;
  --white:       #fffdf9;
  --line:        rgba(33,29,24,.14);
  --line-strong: rgba(33,29,24,.28);

  /* type */
  --f-display: "Fraunces", serif;
  --f-sans:    "Archivo", sans-serif;

  --fs-hero:  clamp(2.6rem, 6.2vw, 5.6rem);
  --fs-h2:    clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.6rem);

  --container: 1280px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(.16,.8,.24,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{
  max-width: 100%;
  display: block;
  /* unifies exposure/contrast across photos pulled from different Instagram sources */
  filter: saturate(1.05) contrast(1.05) brightness(1.02);
}

/* fixed film-grain layer: ties every photo together and masks light compression/blur */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}

/* shared inner-image parallax rig: frame clips, inner img is oversized and translated by JS */
.parallax-frame{
  position: absolute;
  inset: -15% 0;
  width: 100%;
  height: 130%;
  will-change: transform;
}
.parallax-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .parallax-frame{ position: absolute; inset: 0; height: 100%; transform: none !important; }
}

a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 500;
  margin: 0 0 .5em;
  line-height: 1.08;
  letter-spacing: -.01em;
}
em{ font-style: italic; font-weight: 400; }

p{ margin: 0 0 1em; color: var(--ink-soft); }

.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--white); padding: .8em 1.2em; z-index: 999;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

.eyebrow{
  font-family: var(--f-sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--sand-dark);
  margin: 0 0 1em;
}

.br-desktop{ display: none; }
@media (min-width: 640px){ .br-desktop{ display: inline; } }

section{ position: relative; }

.section-head{
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  padding: 0 var(--pad);
  text-align: left;
}
.section-sub{ max-width: 46ch; font-size: 1.05rem; }

/* ---------------------------------- buttons ---------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9em 1.8em;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.btn-line{
  border-color: currentColor;
  background: transparent;
}
.btn-line:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn-solid{
  background: var(--ink);
  color: var(--white);
  width: 100%;
}
.btn-solid:hover{ background: var(--sand-dark); }

.btn-circle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: clamp(96px, 10vw, 128px);
  height: clamp(96px, 10vw, 128px);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.25;
  flex: none;
  transition: transform .4s var(--ease), background .4s var(--ease);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.btn-circle:hover{ transform: scale(1.06); background: var(--sand); }

.link-underline{
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: .3em;
  border-bottom: 1px solid rgba(255,255,255,.5);
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.link-underline:hover{ border-color: #fff; }

/* ---------------------------------- nav --------------------------------- */

.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: clamp(.9rem, 2vw, 1.6rem) var(--pad);
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  background: rgba(246,241,231,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
  padding-block: .8rem;
}

.nav-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-logo{
  /* How far the logo should sit from the viewport's left edge on desktop,
     regardless of how wide the screen is -- tweak this one value. */
  --logo-target-left-desktop: 32px;
  display: flex;
  align-items: center;
}
@media (min-width: 980px){
  /* .nav-logo's natural position isn't a margin on the logo itself -- it's
     .nav's own padding-left (clamp(1.25rem,4vw,3.5rem), i.e. up to 56px)
     PLUS the auto-centering margin .nav-inner (max-width: var(--container))
     picks up once the viewport is wider than container + 2*padding (that
     margin keeps growing with viewport width, e.g. ~80px at 1440px,
     ~320px at 1920px). A flat translateX only ever cancels a sliver of
     that, which is why the previous -20px barely moved it. This calc()
     cancels both terms using the same --pad/--container the rest of the
     header already uses, so the logo lands at exactly
     --logo-target-left-desktop from the edge at any desktop width.
     Transform only, so it can't push .nav-pill/.nav-actions/.nav-toggle or
     otherwise affect the rest of the row. Applies in both header states. */
  .nav-logo{
    transform: translateX(calc(
      var(--logo-target-left-desktop) - var(--pad) -
      max(0px, (100vw - 2 * var(--pad) - var(--container)) / 2)
    ));
  }
}

/* Two identically-sized logo images, only one visible at a time: the white
   mark reads on the transparent-over-hero (dark) nav, the black mark reads
   once .is-scrolled gives the nav a cream bar. Same height + width:auto on
   both means the swap never changes size or position. See project notes:
   the footer still uses the plain text mark (dark background) — worth
   revisiting with these same two PNGs later. */
.nav-logo-img{
  /* Tweak these to resize the initial (pre-scroll) logo -- the scrolled/
     cream-bar size never changes. --logo-scale-tablet is a safety-clamped
     in-between value for the 561-1149px band, where .nav-pill / .nav-actions
     are already visible but there isn't enough room for the full desktop
     size without the logo overlapping them (verified empirically -- at
     561-1149px, scale(3) runs into .nav-pill; 1.6 is the largest value that
     stays clear at the tightest point, ~985px). */
  --logo-scale-desktop: 3;
  --logo-scale-tablet: 1.6;
  --logo-scale-mobile: 2;
  /* Vertical offset for the enlarged mobile logo only -- lines its top
     edge up with the hamburger icon's middle bar (measured, not guessed:
     31px is exactly the gap between them at the ≤560px logo size). */
  --logo-offset-y-mobile: 31px;

  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
  transform: scale(var(--logo-scale-tablet));
  transform-origin: left center;
  transition: transform .35s var(--ease);
}
.nav-logo-img-light{ display: none; }
.nav.is-scrolled .nav-logo-img-dark{ display: none; }
.nav.is-scrolled .nav-logo-img-light{ display: block; }
@media (min-width: 1150px){
  .nav-logo-img{ transform: scale(var(--logo-scale-desktop)); }
  /* At scale(3), the logo grows symmetrically from its own vertical center
     and the top edge lands above the viewport (clipped) unless the bar
     has more headroom above that center point. Extra padding-top only --
     .nav.is-scrolled overrides this back down (it's more specific), and
     the change already rides .nav's existing padding transition. */
  .nav{ padding-top: 3.6rem; }
}
/* Two states: large over the hero (default), back to true size once the
   cream scrolled bar appears — .is-scrolled always wins regardless of
   breakpoint since it's more specific than the width-scoped rules here. */
.nav.is-scrolled .nav-logo-img{ transform: scale(1); }
@media (prefers-reduced-motion: reduce){
  .nav-logo-img{ transition: none; }
}

/* still used by the footer wordmark (dark background, plain text) */
.nav-logo-mark{
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.nav-logo-word{
  font-size: .78rem;
  font-family: var(--f-sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  display: none;
}
@media (min-width: 560px){ .nav-logo-word{ display: inline; } }

@media (max-width: 560px){
  .nav-logo-img{ height: 32px; transform: translateY(var(--logo-offset-y-mobile)) scale(var(--logo-scale-mobile)); }
  .nav.is-scrolled .nav-logo-img{ transform: scale(1); }
}

.nav-pill{
  display: none;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px;
  padding: .35rem;
  backdrop-filter: blur(10px);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-scrolled .nav-pill{
  background: var(--white);
  border-color: var(--line);
}
@media (min-width: 980px){ .nav-pill{ display: flex; } }

.nav-pill a{
  padding: .55em 1.1em;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--white);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav.is-scrolled .nav-pill a{ color: var(--ink-soft); }
.nav-pill a:hover{ background: var(--sand); color: var(--ink); }

.nav-actions{
  display: none;
  align-items: center;
  gap: 1.4rem;
}
@media (min-width: 760px){ .nav-actions{ display: flex; } }

.nav-phone{
  font-size: .85rem;
  font-weight: 600;
  color: var(--white);
  transition: color .4s var(--ease);
}
.nav.is-scrolled .nav-phone{ color: var(--ink); }

.nav-actions .btn-line{ color: var(--white); border-color: rgba(255,255,255,.6); }
.nav.is-scrolled .nav-actions .btn-line{ color: var(--ink); border-color: var(--line-strong); }
.nav-actions .btn-line:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }

.nav-toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
@media (min-width: 760px){ .nav-toggle{ display: none; } }
.nav-toggle span{
  display: block; height: 2px; width: 100%;
  background: var(--nav-fg, var(--white));
  transition: background .4s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.nav.is-scrolled .nav-toggle span{ background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav-mobile{
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 6rem var(--pad) 3rem;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .5s var(--ease), opacity .5s var(--ease), visibility 0s linear .5s;
  z-index: 90;
}
.nav-mobile.is-open{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .5s var(--ease), opacity .5s var(--ease), visibility 0s;
}
.nav-mobile a{
  font-family: var(--f-display);
  font-size: 1.7rem;
}
.nav-mobile .nav-phone{ color: var(--ink); font-family: var(--f-sans); font-size: 1rem; }
.nav-mobile .btn{ color: var(--ink); border-color: var(--line-strong); margin-top: .5rem; font-size: 1rem; }

/* ---------------------------------- hero -------------------------------- */

.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.hero-media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown once the video finishes playing (or immediately, in place of the
   video, under prefers-reduced-motion) — an exact still of the video's own
   last frame, crossfaded in so the freeze is guaranteed crisp and static
   regardless of how a given browser renders a paused <video> element. */
.hero-lastframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .6s var(--ease);
  will-change: opacity;
}
.hero-lastframe.is-visible{ opacity: 1; }

.hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,17,12,.18) 0%, rgba(20,17,12,.3) 45%, rgba(20,17,12,.68) 100%),
    linear-gradient(90deg, rgba(20,17,12,.7) 0%, rgba(20,17,12,.1) 58%);
}

@media (max-width: 700px){
  /* no room for a left-to-right gradient on narrow screens: a stronger flat overlay instead */
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(20,17,12,.35) 0%, rgba(20,17,12,.4) 40%, rgba(20,17,12,.72) 100%);
  }
}

.hero-content{
  position: relative;
  z-index: 2;
  padding: 9rem var(--pad) 2.5rem;
  max-width: 900px;
  color: var(--white);
}

.hero .eyebrow{ color: var(--sand); }

.hero-title{
  font-size: var(--fs-hero);
  font-weight: 400;
  color: var(--white);
  margin-bottom: .4em;
}

.hero-sub{
  color: rgba(255,253,250,.82);
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.hero-ctas{
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 2rem;
}

.hero-cards{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0 var(--pad) clamp(2rem, 5vw, 3.5rem);
  max-width: var(--container);
}
@media (min-width: 640px){
  .hero-cards{ grid-template-columns: 1fr 1fr; max-width: 620px; }
}

.glass-card{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem;
  border-radius: 20px;
  /* flat tint instead of backdrop-filter: these cards sit directly over the
     hero video, and backdrop-filter forces the browser to re-blur the live
     video frame behind them on every repaint — a real, continuous cost that
     a plain semi-opaque background doesn't have. */
  background: rgba(20,17,12,.42);
  border: 1px solid rgba(255,253,250,.22);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.glass-card:hover{ background: rgba(20,17,12,.58); transform: translateY(-3px); }
.glass-card img{
  width: 56px; height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}
.glass-card-text h4{
  font-family: var(--f-sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 .2em;
}
.glass-card-text p{
  font-size: .78rem;
  color: rgba(255,253,250,.72);
  margin: 0;
}

.scroll-cue{
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: clamp(2rem, 5vw, 3.5rem);
  display: none;
  align-items: center;
  gap: .6rem;
  color: rgba(255,253,250,.7);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .2em;
}
@media (min-width: 640px){ .scroll-cue{ display: flex; } }
.scroll-cue span{
  width: 1px; height: 34px;
  background: rgba(255,253,250,.5);
  position: relative;
  overflow: hidden;
}
.scroll-cue span::after{
  content: "";
  position: absolute;
  top: -100%; left: 0; right: 0; height: 100%;
  background: var(--sand);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ top: -100%; } 60%{ top: 100%; } 100%{ top: 100%; }
}
@media (prefers-reduced-motion: reduce){ .scroll-cue span::after{ animation: none; } }

/* ---------------------------------- stats -------------------------------- */

.stats{
  background: var(--ink);
  color: var(--white);
  padding: clamp(3rem, 7vw, 5.5rem) var(--pad);
}
.stats-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  text-align: center;
}
.stat{ display: flex; flex-direction: column; gap: .35rem; }
.stat-num{
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--sand);
  font-weight: 500;
}
.stat-label{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,253,250,.68);
}
.stat-divider{
  width: 1px;
  height: 50px;
  background: rgba(255,253,250,.18);
  display: none;
}
@media (min-width: 700px){ .stat-divider{ display: block; } }

/* ---------------------------------- about -------------------------------- */

.about{ padding: clamp(5rem, 10vw, 8rem) var(--pad); }
.about-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px){
  .about-inner{ grid-template-columns: .8fr 1fr; }
}

.about-media{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4/5;
  max-width: 460px;
}
.about-media-frame{
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,253,250,.5);
  border-radius: 14px;
  pointer-events: none;
}

.about-copy h2{ font-size: var(--fs-h2); }

.about-traits{
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem 1rem;
}
.about-traits li{
  font-size: .88rem;
  color: var(--ink-soft);
  padding-left: 1.3em;
  position: relative;
}
.about-traits li::before{
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand-dark);
}

.about-quote{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.about-quote span{
  display: block;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sand-dark);
  margin-top: .6rem;
}

/* ---------------------------------- services ------------------------------ */

.services{ padding: clamp(4rem, 9vw, 7rem) 0; background: var(--cream-2); }

.services-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px){ .services-grid{ grid-template-columns: repeat(4,1fr); } }

.service-card{
  background: var(--cream-2);
  padding: clamp(2rem, 3vw, 2.6rem) clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  transition: background .35s var(--ease);
}
.service-card:hover{ background: var(--cream); }
.service-num{
  font-family: var(--f-display);
  font-size: .95rem;
  color: var(--sand-dark);
  margin-bottom: 2rem;
}
.service-icon{
  width: 40px; height: 40px;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.service-card h3{ font-size: 1.2rem; margin-bottom: .5rem; }
.service-card p{ font-size: .92rem; margin: 0; }

/* ---------------------------------- gallery ------------------------------- */

.projects{ padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem); }

.gallery{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.8rem, 2vw, 1.4rem);
}
@media (min-width: 720px){
  .gallery{
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
  }
  .gallery-item.span-big{ grid-column: span 2; grid-row: span 2; }
  .gallery-item.span-wide{ grid-column: span 2; }
}

.gallery-item{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4/5;
}
@media (min-width: 720px){ .gallery-item{ aspect-ratio: auto; } }

.gallery-item:hover .parallax-frame img{ transform: scale(1.07); }

.gallery-overlay{
  position: absolute; inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
  background: linear-gradient(180deg, rgba(20,17,12,0) 40%, rgba(20,17,12,.88) 100%);
  color: var(--white);
}
.gallery-index{
  font-family: var(--f-display);
  font-size: .8rem;
  color: var(--sand);
  margin-bottom: .4rem;
}
.gallery-overlay h3{
  font-size: 1.25rem;
  margin: 0 0 .15em;
  color: var(--white);
}
.gallery-overlay p{
  font-size: .8rem;
  margin: 0;
  color: rgba(255,253,250,.75);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Portfolio page (projects/index.html): the same photo grid as .gallery
   above, just organized into named categories (Kitchens, Bathrooms,
   Furnishing) stacked inside one .projects section — each
   .portfolio-category gets its own section-head, with a smaller gap
   between categories than .projects' own top/bottom padding would give if
   it were repeated per category. */
.portfolio-category + .portfolio-category{ margin-top: clamp(4rem, 8vw, 6rem); }

/* .section-head is capped at 760px everywhere else (a paragraph-reading
   width, meant to sit above prose) but here it sits above a much wider
   photo grid (var(--container), 1280px) — left at 760px its "PORTFOLIO" /
   category title visibly don't line up with the grid's left edge. Match
   the grid's width so eyebrow, title and grid all share one left edge. */
.portfolio-category .section-head{
  max-width: var(--container);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.portfolio-category .eyebrow{ margin-bottom: .9rem; }

.gallery-portfolio{
  grid-template-columns: 1fr;
}
@media (min-width: 560px){
  .gallery-portfolio{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
  .gallery-portfolio{ grid-template-columns: repeat(4, 1fr); }
}
.gallery-portfolio .gallery-item{ aspect-ratio: 4/5; }

/* ---------------------------------- my work (before/after) ---------------------------------- */

.mywork{ padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem); }

.mywork-list{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.ba-title{
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 1rem;
}

/* .ba-frame stacks two full-bleed, identically-cropped photos: the "after"
   photo underneath (always full width) and the "before" photo on top,
   clipped from the left via clip-path so only its right-hand sliver shows.
   Moving the clip-path boundary is what reveals more of the "before" photo
   as the handle is dragged left. An invisible, frame-sized <input
   type="range"> is the actual drag surface — it gives us mouse + touch +
   keyboard + click-to-position for free, with no custom pointer-event code. */
.ba-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 20px 50px rgba(33,29,24,.16);
}
@media (min-width: 720px){
  .ba-frame{ aspect-ratio: 16/9; }
}

.ba-after, .ba-before{ position: absolute; inset: 0; }
.ba-after{ z-index: 1; }
.ba-before{
  z-index: 2;
  clip-path: inset(0 0 0 72%);
}
.ba-after img, .ba-before img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

.ba-tag{
  position: absolute;
  top: 1rem;
  z-index: 3;
  pointer-events: none;
  font-family: var(--f-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(20,17,12,.55);
  backdrop-filter: blur(6px);
  padding: .45em .9em;
  border-radius: 100px;
}
.ba-tag-after{ left: 1rem; }
.ba-tag-before{ right: 1rem; }

.ba-handle{
  position: absolute;
  top: 0; bottom: 0;
  left: 72%;
  width: 0;
  z-index: 4;
  pointer-events: none;
  transform: translateX(-50%);
}
.ba-handle::before{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,253,250,.9);
  box-shadow: 0 0 0 1px rgba(20,17,12,.15);
}
.ba-handle-circle{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .3s var(--ease);
}
.ba-frame:hover .ba-handle-circle{ transform: translate(-50%,-50%) scale(1.08); }

.ba-range{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 5;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.ba-range::-webkit-slider-runnable-track{ background: transparent; }
.ba-range::-webkit-slider-thumb{
  /* deliberately a sliver, not the full track: a thumb that covers the whole
     element would make Chrome treat every click as "on the thumb" (grab
     only, no jump) instead of "on the track" (jump straight to that point,
     then keep dragging) — this is what gives us click-to-position. */
  -webkit-appearance: none;
  width: 2px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.ba-range::-moz-range-track{ background: transparent; border: none; }
.ba-range::-moz-range-thumb{
  width: 2px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: ew-resize;
}
.ba-range:focus-visible ~ .ba-handle .ba-handle-circle{
  outline: 2px solid var(--sand-dark);
  outline-offset: 2px;
}

/* ---------------------------------- why us -------------------------------- */

.why-us{ padding: clamp(5rem, 10vw, 8rem) var(--pad); background: var(--cream-2); }

.why-grid{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}
@media (min-width: 700px){ .why-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px){ .why-grid{ grid-template-columns: repeat(3,1fr); } }

.why-item{
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-strong);
}
.why-num{
  font-family: var(--f-display);
  font-size: .85rem;
  color: var(--sand-dark);
  display: block;
  margin-bottom: 1rem;
}
.why-item h3{ font-size: 1.1rem; margin-bottom: .5rem; }
.why-item p{ font-size: .92rem; margin: 0; }

/* ---------------------------------- process -------------------------------- */

.process{ padding: clamp(5rem, 10vw, 8rem) 0; }

.process-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}
@media (min-width: 640px){ .process-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px){ .process-grid{ grid-template-columns: repeat(5,1fr); gap: 1.75rem 1.5rem; } }

.process-item{
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-strong);
}
.process-num{
  font-family: var(--f-display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--sand-dark);
  display: block;
  margin-bottom: 1rem;
  line-height: 1;
}
.process-item h3{ font-size: 1.05rem; margin-bottom: .5rem; }
.process-item p{ font-size: .88rem; margin: 0; }

/* ---------------------------------- testimonials -------------------------------- */

.testimonials{ padding: clamp(5rem, 10vw, 8rem) var(--pad); }

.testimonial-grid{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 780px){ .testimonial-grid{ grid-template-columns: repeat(3,1fr); } }

.testimonial-card{
  margin: 0;
  padding: 2rem 1.8rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.testimonial-card p{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.testimonial-card footer{
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.testimonial-card cite{
  font-style: normal;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink);
}
.testimonial-card footer span{
  font-size: .78rem;
  color: var(--sand-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------------------------------- faq -------------------------------- */

.faq{ padding: clamp(5rem, 10vw, 8rem) var(--pad); background: var(--cream-2); }

.faq-list{
  max-width: 860px;
  margin: 0 auto;
}
.faq-item{
  border-top: 1px solid var(--line-strong);
}
.faq-item:last-child{ border-bottom: 1px solid var(--line-strong); }

.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--ink);
}
.faq-icon{
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.faq-icon::before,
.faq-icon::after{
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq-icon::before{ top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-icon::after{ top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-question[aria-expanded="true"] .faq-icon::after{ transform: translateX(-50%) rotate(90deg); opacity: 0; }

.faq-answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.faq-answer > p{
  overflow: hidden;
  min-height: 0;
  font-size: .95rem;
  margin: 0 0 1.4rem;
  max-width: 62ch;
}
.faq-item.is-open .faq-answer{ grid-template-rows: 1fr; }
.faq-verify{
  color: var(--sand-dark);
  font-style: italic;
}

/* ---------------------------------- contact -------------------------------- */

.contact{
  background: var(--ink);
  color: var(--white);
  padding: clamp(5rem, 10vw, 8rem) var(--pad);
}
.contact-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px){ .contact-inner{ grid-template-columns: .9fr 1fr; } }

.contact .eyebrow{ color: var(--sand); }
.contact h2{ color: var(--white); font-size: var(--fs-h2); }
.contact-copy > p{ color: rgba(255,253,250,.75); max-width: 42ch; }

.contact-details{
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.contact-detail{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,253,250,.16);
  width: fit-content;
  transition: opacity .3s;
}
a.contact-detail:hover{ opacity: .7; }
.contact-detail-label{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,253,250,.55);
}
.contact-detail-value{
  font-family: var(--f-display);
  font-size: 1.3rem;
}

.contact-form{
  background: var(--cream);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.form-row{ display: flex; flex-direction: column; gap: .45rem; }
.form-row-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-split > div{ display: flex; flex-direction: column; gap: .45rem; }
@media (max-width: 760px){
  .form-row-split{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .form-row-split > div{ min-width: 0; }
  .contact-form input,
  .contact-form textarea{ min-width: 0; width: 100%; }
}

.contact-form label{
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--ink-soft);
}
.contact-form input,
.contact-form textarea{
  font-family: var(--f-sans);
  font-size: .95rem;
  padding: .8em .9em;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline: 2px solid var(--sand-dark);
  outline-offset: 1px;
}

.form-note{
  min-height: 1.2em;
  font-size: .85rem;
  color: var(--sand-dark);
  margin: 0;
}
.form-note.is-error{
  color: #a3402c;
}

/* ---------------------------------- footer -------------------------------- */

.footer{
  background: var(--ink);
  color: rgba(255,253,250,.7);
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad) 1.5rem;
  border-top: 1px solid rgba(255,253,250,.12);
}
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 760px){ .footer-inner{ grid-template-columns: 1.2fr 1fr 1fr; align-items: start; } }

.footer-brand{ color: var(--white); }
.footer-brand .nav-logo-mark,
.footer-brand .nav-logo-word{ color: var(--white); }
/* Fixed size, no transform -- unlike .nav-logo-img, this logo has nothing
   above it to grow into and the tagline sits directly below it. */
.footer-logo-img{ height: 40px; width: auto; object-fit: contain; display: block; }
.footer-brand p{ color: rgba(255,253,250,.6); margin-top: 1rem; font-style: italic; font-family: var(--f-display); }

.footer-nav{ display: flex; flex-direction: column; gap: .7rem; }
.footer-nav a:hover{ color: var(--white); }

.footer-contact{ display: flex; flex-direction: column; gap: .7rem; }
.footer-contact a:hover{ color: var(--white); }

.footer-bottom{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,253,250,.12);
  font-size: .78rem;
}

/* ---------------------------------- project detail pages ------------------- */

.back-link{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,253,250,.85);
  padding-bottom: .3em;
  border-bottom: 1px solid rgba(255,253,250,.4);
}
.back-link:hover{ border-color: #fff; }

.project-hero{
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  padding: 9rem var(--pad) 3.5rem;
}
.project-hero-media{
  position: absolute;
  inset: 0;
}
.project-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,17,12,.15) 0%, rgba(20,17,12,.35) 55%, rgba(20,17,12,.82) 100%),
    linear-gradient(90deg, rgba(20,17,12,.55) 0%, rgba(20,17,12,.05) 55%);
}
.project-hero-content{
  position: relative;
  z-index: 2;
  max-width: 900px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.project-hero-content .eyebrow{ color: var(--sand); margin: 0; }
.project-hero-content h1{
  color: var(--white);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  margin: 0;
}

.project-detail{
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad) 0;
  max-width: var(--container);
  margin: 0 auto;
}
.project-detail-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px){
  .project-detail-inner{ grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.project-detail-inner h2{ font-size: var(--fs-h3); }
.project-detail-inner .placeholder-note{
  color: var(--sand-dark);
  font-style: italic;
  font-size: .85rem;
}

.project-meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1rem;
  margin: 0;
  align-content: start;
}
.project-meta dt{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sand-dark);
  margin-bottom: .3rem;
}
.project-meta dd{
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--ink);
}

.project-gallery{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(4rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 700px){
  .project-gallery{ grid-template-columns: repeat(2, 1fr); }
  .project-gallery .span-full{ grid-column: 1 / -1; }
}
@media (min-width: 1000px){
  /* larger project galleries (up to 18 photos) read better at 3-up than 2 */
  .project-gallery{ grid-template-columns: repeat(3, 1fr); }
}
.project-gallery-item{
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.project-gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.project-gallery-item:hover img{ transform: scale(1.05); }

/* Lightbox for the new project-detail galleries (main.js wires this up and
   also sets cursor:zoom-in on the gallery images, only on pages that have
   this markup — the older 5 detail pages don't, so they're unaffected). */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: rgba(20,17,12,.92);
}
.lightbox.is-open{ display: flex; }
.lightbox img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transition: opacity .22s var(--ease);
}
.lightbox img.is-fading{ opacity: 0; }
.lightbox-close{
  position: absolute;
  top: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,253,250,.12);
  border: 1px solid rgba(255,253,250,.3);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s var(--ease);
}
.lightbox-close:hover{ background: rgba(255,253,250,.22); }

.lightbox-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,253,250,.12);
  border: 1px solid rgba(255,253,250,.3);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lightbox-arrow:hover{ background: rgba(255,253,250,.24); transform: translateY(-50%) scale(1.08); }
.lightbox-prev{ left: clamp(.6rem, 3vw, 1.75rem); }
.lightbox-next{ right: clamp(.6rem, 3vw, 1.75rem); }

.lightbox-counter{
  position: absolute;
  bottom: clamp(.9rem, 3vw, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255,253,250,.8);
  font-family: var(--f-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  background: rgba(255,253,250,.12);
  border: 1px solid rgba(255,253,250,.25);
  padding: .35em 1em;
  border-radius: 100px;
}

@media (max-width: 700px){
  .lightbox-arrow{ width: 38px; height: 38px; font-size: 1.35rem; }
  .lightbox-prev{ left: .5rem; }
  .lightbox-next{ right: .5rem; }
}

@media (prefers-reduced-motion: reduce){
  .lightbox img{ transition: none; }
  .lightbox-arrow{ transition: none; }
  .lightbox-arrow:hover{ transform: translateY(-50%); }
}

.project-cta{
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.project-cta h2{ color: var(--white); font-size: var(--fs-h3); margin: 0; max-width: 30ch; }

/* ---------------------------------- reveal / scroll animation -------------- */

.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.delay-1{ transition-delay: .1s; }
.reveal.delay-2{ transition-delay: .2s; }
.reveal.delay-3{ transition-delay: .3s; }
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}