:root {
  --color-primary: #0B493E;
  --color-ivory: #F6F1E8;
  --color-stone: #D8D0C2;
  --color-terracotta: #B86F55;
  --color-charcoal: #1E2422;
  --color-white: #FFFFFF;
  --hero-zoom-duration: 6s;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-base: 16px;
  --line-height: 1.45;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Layout */
  --container-max: 1280px;
  --header-height: 96px;

  /* Breakpoints */
  --bp-md: 768px;
  --bp-desktop: 900px;
}

/* -------------------------------------------------------------------------
   Cinematic hero / header polish overrides (final overrides placed at EOF)
   These intentionally override earlier rules to keep edits minimal and safe.
------------------------------------------------------------------------- */

/* Slightly larger logo on desktop while preserving aspect ratio */
@media (min-width: 900px) {
  .brand-logo { height: 92px !important; max-width: 260px !important; }
}
@media (min-width: 1200px) {
  .brand-logo { height: 96px !important; }
}

/* Ensure the hero content has enough width on desktop so headline reads as
   two editorial lines rather than wrapping aggressively. */
.hero--cinematic .hero__content {
  /* Allow a bit more horizontal room on desktop so the headline fits on two lines */
  width: clamp(520px, 46vw, 820px) !important;
  max-width: 820px !important;
  padding-top: 6vh !important; /* anchor slightly lower-center */
}

.hero--cinematic .hero__title {
  font-size: clamp(42px, 6.2vw, 76px) !important;
  line-height: 1.02 !important;
  max-width: 820px !important;
}

/* Localized dark gradient for better left-side text legibility while
   preserving rich photography on the right. Left is stronger, center
   softened, right remains transparent. */
.hero--cinematic::before {
  /* Localized left-to-right readability gradient — subtle and restrained.
     The first (horizontal) gradient is sized to the left portion of the
     visual so the right side of the photograph remains bright and natural.
     A second very light vertical fade softens the bottom edge. */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.18) 28%, rgba(0,0,0,0.08) 42%, rgba(0,0,0,0.00) 62%),
    linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.00) 60%);
  background-repeat: no-repeat;
  /* Limit the horizontal gradient to the left side so centre/right stay untouched. */
  background-size: 68% 100%, 100% 100%;
}

/* Responsive tweaks: slightly stronger localized treatment on smaller viewports
   (text occupies more of the image) and a tighter left band on very wide screens. */
@media (max-width: 899px) {
  .hero--cinematic::before {
    background-image:
      linear-gradient(90deg, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.24) 36%, rgba(0,0,0,0.12) 52%, rgba(0,0,0,0) 78%),
      linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 60%);
    background-size: 86% 100%, 100% 100%;
  }
}

@media (min-width: 1200px) {
  .hero--cinematic::before {
    /* On very wide screens, keep the dark band narrower so the photo remains dominant. */
    background-size: 56% 100%, 100% 100%;
  }
}

/* Subtle Ken Burns — softened scale and horizontal shift */
@keyframes hero-kenburns {
  from { transform: scale(1.04) translateX(0); }
  to   { transform: scale(1.07) translateX(-1.2%); }
}
.hero__slide.active.animate {
  animation: hero-kenburns var(--hero-zoom-duration, 6s) ease-in-out forwards !important;
}

/* Meta (counter + scroll) kept understated and positioned lower-right on wide screens */
.hero--cinematic .hero__meta { width: auto !important; align-items: flex-end !important; }
.hero--cinematic .hero__counter { color: rgba(255,255,255,0.82) !important; font-size: 0.95rem !important; }
.hero--cinematic .hero__scroll { color: rgba(255,255,255,0.68) !important; font-size: 0.78rem !important; }

/* Ensure desktop height remains within 80-88vh and is not overly tall */
@media (min-width: 900px) {
  .hero--cinematic { height: 86vh !important; }
}

/* Respect reduced motion: disable animations and keep first slide visible */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none !important; animation: none !important; transform: none !important; }
}


/* Base resets */
*,
*::before,
*::after { box-sizing: border-box; }
html { font-size: var(--fs-base); scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-charcoal);
  background: var(--color-ivory);
  line-height: var(--line-height);
  -webkit-font-smoothing:antialiased;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Typography scale */
h1, h2, h3, h4 { color: var(--color-charcoal); margin: 0 0 var(--space-3) 0; font-weight: 600; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
p { margin: 0 0 var(--space-3) 0; }

/* Buttons & links */
a { color: inherit; text-decoration: none; }
.btn { display: inline-block; padding: 0.875rem 1.5rem; border-radius: 4px; font-weight: 600; text-align: center; cursor: pointer; border: 0; }
.btn:focus { outline: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-ghost { background: transparent; border: 1px solid var(--color-stone); color: var(--color-charcoal); }

/* Header / Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  /* Warm ivory header background (keeps logo visible) */
  background: var(--color-ivory);
  backdrop-filter: blur(4px);
  /* Subtle architectural deep-green bottom border */
  border-bottom: 1px solid rgba(11,73,62,0.15);
}
.header-inner { min-height: var(--header-height); display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; }
/* Logo area: wraps the brand mark + its adjacent architectural divider.
   Positioned naturally via flex — no absolute positioning / transforms. */
.logo-area { display:flex; align-items:center; gap: 18px; }
.logo-divider { width: 1px; height: 46px; background: rgba(11,73,62,0.20); display:block; flex: 0 0 auto; }
/* Mobile logo size: confident but leaves room for the hamburger */
.brand-logo { display:block; width: auto; height: 58px; max-width: 160px; object-fit: contain; }

/* Ensure the logo is never clipped and is vertically centered in the header. */
.site-header { overflow: visible; }
.logo-area { overflow: visible; }
.brand { overflow: visible; }
.site-header .brand-logo { height: auto; max-height: calc(var(--header-height) - 12px); width: auto; }

/* Brand lockup: logo + textual brand name beside it */
.brand { display:inline-flex; align-items:center; gap: 14px; }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-name {
  color: var(--color-primary);
  font-size: 26px; /* desktop target: ~25-30px */
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  display: block;
}
.brand-tagline {
  color: rgba(30,36,34,0.65);
  font-size: 10px; /* ~9-11px */
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 4px;
}

.nav-toggle { background: none; border: 0; padding: 8px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.nav-toggle:focus { outline: 3px solid var(--color-stone); outline-offset: 2px; }
.hamburger { width:22px; height:2px; background:var(--color-charcoal); position:relative; display:inline-block; }
.hamburger::before, .hamburger::after { content: ""; position:absolute; left:0; right:0; height:2px; background:var(--color-charcoal); }
.hamburger::before { top:-7px; }
.hamburger::after { top:7px; }

/* Primary nav (mobile-first overlay) */
.primary-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 100%;
  max-width: 360px;
  transform: translateX(100%);
  transition: transform 300ms ease-in-out;
  /* Mobile menu uses the same warm-ivory background for consistency */
  background: var(--color-ivory);
  /* keep overlay minimal and architectural (no heavy shadow) */
  box-shadow: none;
  padding: var(--space-5) var(--space-3);
  display:flex; flex-direction:column; gap: var(--space-4);
  z-index: 120;
}
.primary-nav[data-visible="true"] { transform: translateX(0); }
.nav-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: var(--space-3); }
.nav-list a {
  padding: 12px 8px;
  display:inline-block;
  color: var(--color-charcoal);
  font-size: 1.05rem;
  white-space: nowrap;
  border-radius: 0; /* avoid pill backgrounds */
  transition: color 200ms ease;
  position: relative;
}
.nav-list a:focus, .nav-list a:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.nav-cta { margin-top: auto; }

/* Header actions container (hamburger + desktop CTA) */
.header-actions { display:flex; align-items:center; gap: var(--space-3); }
.header-cta { display:none; }

/* Desktop layout */
@media (min-width: 900px) {
    /* Desktop header layout: explicit three-part grid so the logo anchors
       left, navigation centers, and CTA anchors right. We use sensible
       minmax columns so the nav remains centered and the sides never
       collapse into the center navigation. */
    .header-inner {
      display: grid;
      grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
      align-items: center;
      gap: var(--space-4);
      min-height: var(--header-height);
      position: relative; /* anchor for absolutely positioned logo */
    }

  /* Ensure the logo area sits in the left column and aligns with the container
     padding on desktop. Avoid absolute positioning so the logo aligns to the
     same content container used by the nav and CTA (not the viewport edge). */
  .logo-area { grid-column: 1; justify-self: start; padding-left: 0; }
  .site-header .logo-area {
    /* keep normal flow so it aligns with the container padding */
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
  /* Slightly reduce divider height when logo is absolute to avoid overlap */
  .site-header .logo-area .logo-divider { height: 42px; }
  .brand { display:flex; align-items:center; justify-self: start; }
  /* Keep the nav centered in the middle column and constrain its max width so it cannot underlap the brand */
  .primary-nav { grid-column: 2; order: 0; position: static; transform: none; width: auto; padding: 0; box-shadow: none; background: transparent; justify-self: center; max-width: 760px; }
  .header-actions { grid-column: 3; justify-self: end; padding-right: 0; }

  .nav-toggle { display: none; }

    /* Desktop nav — horizontal row and slightly more breathing room between items */
    .primary-nav > .nav-list { display:flex; flex-direction:row; gap:36px; align-items:center; justify-content:center; }
    .nav-list a { padding: 6px 0; white-space: nowrap; font-size: 16px; font-weight: 500; }
    /* Active nav underline (architectural thin line) */
    .nav-list a::after { content: ""; display:block; height:2px; background: transparent; width:0; margin-top:8px; transition: width 180ms ease, background 180ms ease; }
    .nav-list a.active::after, .nav-list a[aria-current="true"]::after { width: 100%; background: var(--color-primary); }

  /* Hide mobile nav CTA (we expose desktop CTA in header actions) */
  .primary-nav .nav-cta { display: none; }
  .header-cta { display: block; }

  /* Brand area: keep logo natural aspect ratio and vertically centered. Do not crop or add white background. */
  .brand { align-items: center; }
    .brand-logo { height: 82px; max-width: 240px; width: auto; object-fit: contain; display: block; }
    /* Desktop CTA styling */
    .header-cta .btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 58px; padding: 0 22px; border-radius: 5px; font-weight: 600; max-width: 320px; }
    .header-cta .btn-primary .cta-arrow { display: inline-block; margin-left: 10px; transition: transform 160ms ease; }
    .header-cta .btn-primary:hover .cta-arrow { transform: translateX(6px); }

  /* Keep the same desktop size on wide screens to preserve layout consistency */
  @media (min-width: 1200px) {
    .brand-logo { height: 86px; }
  }
}

/* Responsive adjustments for header */
@media (max-width: 899px) {
  .brand-logo { height: 58px; }
}

    /* Active nav link style */
    .nav-list a.active, .nav-list a[aria-current="true"] { color: var(--color-primary); font-weight: 600; }

/* Footer — refined editorial, compact architectural closing element */
.site-footer {
  /* Compact, generous but controlled whitespace for a clean footer block */
  padding: 40px 0 20px;
  background: var(--color-ivory);
  color: var(--color-charcoal);
  position: relative;
}

/* ABOUT */
.about { background: linear-gradient(180deg, rgba(246,241,232,0.98), rgba(246,241,232,0.99)); padding: 120px 0; }
.about__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-6); align-items: start; padding: var(--space-4) 0; }
.about__lead { max-width: 62ch; }
.about__visual { min-height: 320px; position: relative; }
.about__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.16em; font-weight:600; font-size:0.85rem; margin-bottom: var(--space-3); opacity:0; transform:translateY(8px); }
.about__title { color: var(--color-primary); font-size: clamp(2rem, 3.6vw, 3.2rem); margin: 0 0 var(--space-4) 0; opacity:0; transform:translateY(8px); }
.about__copy { color: var(--color-charcoal); font-size:1rem; line-height:1.6; opacity:0; transform:translateY(8px); }

/* About visual panel */
.about__visual-inner { position:relative; width:100%; height:100%; border-radius:14px; overflow:hidden; display:block; background: linear-gradient(180deg, rgba(216,208,194,0.95), rgba(246,241,232,0.95)); }
.about__visual-decor { position:absolute; top:18px; left:18px; font-weight:700; color: rgba(11,73,62,0.08); font-size:3.2rem; pointer-events:none; }
.about__visual-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.about__visual-placeholder-inner { text-align:center; }
.about__visual-title { font-weight:700; color: var(--color-primary); letter-spacing:0.12em; margin-bottom:6px; }
.about__visual-sub { color: var(--color-charcoal); opacity:0.85; }
.about__visual-image { width:100%; height:100%; object-fit: cover; display:block; }

/* Thin subtle architectural line */
.about__visual-inner::after { content: ""; position:absolute; right:12px; top:12px; bottom:12px; width:1px; background: rgba(30,36,34,0.04); }

/* Founder block — refined editorial layout */
.about__founder {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: var(--space-5);
  align-items: center; /* vertically align content with the portrait */
  padding: 72px 0; /* reduced vertical padding for a more compact section */
  border-top: 1px solid rgba(11,73,62,0.06);
}

.founder__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: var(--color-stone);
  /* keep shadow very subtle (mostly editorial depth) */
  box-shadow: 0 6px 18px rgba(30,36,34,0.04);
  max-height: 64vh; /* prevent the portrait from becoming excessively tall */
}

.founder__media-decor {
  position: absolute;
  left: -10px;
  top: -8px;
  width: calc(100% + 20px);
  height: calc(100% + 16px);
  border-radius: 30px;
  border: 1px solid rgba(11,73,62,0.04);
  transform: rotate(-1.2deg);
  z-index: 1;
  pointer-events: none;
}

.founder__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 36%;
  display: block;
  border-radius: 28px;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .founder__image { transition: none; }
}

.founder__details { color: var(--color-charcoal); padding-left: var(--space-4); max-width: 56ch; }
.founder__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.16em; font-weight:700; margin-bottom: 8px; font-size: 0.82rem; }
.founder__label { color: var(--color-terracotta); text-transform: uppercase; letter-spacing: 0.18em; font-weight:700; font-size: 0.78rem; display:flex; align-items:center; gap: 14px; margin-bottom: 10px; }
.founder__label-rule { display:inline-block; flex: 1 1 auto; height:1px; background: rgba(30,36,34,0.06); margin-left: 12px; }

.founder__name { font-family: Georgia, "Times New Roman", serif; color: var(--color-primary); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.06; margin: 0 0 14px 0; font-weight: 500; }

.founder__bio p { margin: 0 0 12px 0; color: var(--color-charcoal); line-height: 1.7; font-size: 1rem; max-width: 48ch; }

.founder__philosophy { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding: 12px 0; border-top: 1px solid rgba(11,73,62,0.06); border-bottom: 1px solid rgba(11,73,62,0.04); align-items: center; }
.founder__philosophy .phil { padding: 6px 10px; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.founder__philosophy .phil:not(:first-child) { border-left: 1px solid rgba(30,36,34,0.04); padding-left: 18px; }
.founder__philosophy li { list-style: none; }
.founder__philosophy li::marker { display: none; }
.phil-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.86rem; color: var(--color-primary); }

.founder__quote { margin-top: 26px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--color-charcoal); padding-left: 18px; position: relative; }
.founder__quote::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: rgba(184,111,85,0.16); border-radius: 2px; }

.founder__signature { margin-top: 14px; font-family: Georgia, "Times New Roman", serif; color: var(--color-charcoal); }
.sig-name { font-style: italic; font-weight: 500; margin-bottom: 4px; }
.sig-role { font-size: 0.92rem; color: rgba(30,36,34,0.7); }

@media (max-width: 899px) {
  .about__founder { grid-template-columns: 1fr; padding: 80px 0; }
  .founder__media { aspect-ratio: 3 / 2; border-radius: 18px; }
  .founder__details { padding-left: 0; }
  .founder__philosophy { grid-template-columns: 1fr; }
  .founder__philosophy .phil:not(:first-child) { border-left: none; border-top: 1px solid rgba(30,36,34,0.04); padding-top: 12px; margin-top: 12px; }
}

/* Responsive behavior */
@media (max-width: 899px) {
  .about__inner { flex-direction: column; }
  .about__visual { order: 2; height: 40px; }
  .about__founder { flex-direction: column; align-items:flex-start; }
  /* Slightly reduce the zoom on smaller screens to keep Tina's face fully visible */
  .founder__media { width:100%; height:320px; }
  .founder__image { object-position: 50% 36%; transform: scale(1.12); }
}

/* About responsive adjustments */
@media (max-width: 899px) {
  .about { padding: 80px 0; }
  .about__inner { grid-template-columns: 1fr; }
  .about__visual-inner::after { display: none; }
}

.services { background: var(--color-ivory); padding: 100px 0; }
.services__intro { max-width: 880px; margin: 0 auto 48px auto; text-align: left; }
.services__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing:0.14em; font-weight:600; margin-bottom:12px; }
.services__title { color: var(--color-primary); font-size: clamp(1.6rem, 3.2vw, 2.6rem); margin:0 0 12px 0; }
.services__lead { color: var(--color-charcoal); max-width: 64ch; }

/* Editorial asymmetric grid: featured cards span two columns each on desktop */
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* slightly tighter row rhythm so cards read as an editorial list rather
     than oversized tiles */
  grid-auto-rows: minmax(140px, auto);
  gap: 24px;
  max-width: 1200px;
  margin: 32px auto 0 auto;
}

.service-card {
  background: var(--color-ivory);
  border: 1px solid rgba(30,36,34,0.06);
  padding: 24px 26px;
  border-radius: 6px; /* restrained rounding for a more architectural feel */
  display:flex;
  flex-direction:column;
  transition: border-color 200ms ease, transform 180ms ease;
  position: relative;
  min-height: 180px;
}
.service-card:focus-within,
.service-card:hover {
  border-color: rgba(11,73,62,0.12);
  transform: translateY(-4px);
}
.service-card__num {
  font-weight:700;
  color: rgba(11,73,62,0.22);
  font-size: 1.15rem; /* a touch larger so numbers feel editorial */
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.service-card__title { color: var(--color-charcoal); font-size: 1.06rem; margin:0 0 10px 0; font-weight:600; }
.service-card__desc { color: rgba(30,36,34,0.85); margin-bottom: 12px; line-height:1.6; }
.service-card__more { margin-top:auto; color: var(--color-primary); font-weight:700; transition: transform 200ms ease; }
.service-card__more:hover { transform: translateX(6px); }

/* Featured cards: prominent editorial treatment */
.service-card--featured {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 40px;
  border: none;
  min-height: 280px;
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
}
.service-card--featured .service-card__title { font-size:1.25rem; color: var(--color-white); }
.service-card--featured .service-card__desc { color: rgba(255,255,255,0.92); }
.service-card--featured .service-card__num { color: rgba(255,255,255,0.16); font-size:1.15rem; }
.service-card--featured .service-card__more { color: var(--color-white); }

/* Position featured as first-row wide cards */
.services__grid > .service-card--featured:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.services__grid > .service-card--featured:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; }

/* Remaining cards flow below in the grid */
.services__grid > .service-card:nth-child(n+3) { grid-column: auto; }

/* Make cards more architectural on small screens */
@media (max-width: 899px) {
  .services__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 20px; }
  .service-card { min-height: auto; padding: 18px; }
  .service-card--featured { min-height: 160px; }
}

@media (max-width: 899px) {
  .services { padding: 80px 0; }
  .services__grid { grid-template-columns: 1fr; padding: 0 12px; }
  .service-card { border-radius:10px; }
}

/* Sequential reveal for service cards */
@media (prefers-reduced-motion: no-preference) {
  .service-card { opacity:0; transform: translateY(10px); transition: opacity 420ms ease, transform 420ms ease; }
  .service-card.show { opacity:1; transform:none; }
}

/* PROJECTS */
.projects { background: var(--color-ivory); padding: 120px 0; }
.projects__inner { max-width: 1200px; margin: 0 auto; }
.projects__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing:0.14em; font-weight:600; margin-bottom:12px; }
.projects__title { color: var(--color-primary); font-size: clamp(1.6rem, 3.2vw, 2.6rem); margin:0 0 12px 0; }
.projects__lead { color: var(--color-charcoal); max-width: 64ch; margin-bottom: 18px; }
.projects__filters { list-style:none; padding:0; margin: 16px 0 8px 0; display:flex; flex-wrap:wrap; gap:10px; }
.projects__filters .filter-btn { background: transparent; border: 1px solid rgba(30,36,34,0.06); padding: 8px 12px; border-radius:8px; cursor:pointer; color:var(--color-charcoal); }
.projects__filters .filter-btn[aria-pressed="true"], .projects__filters .filter-btn.active { background: var(--color-primary); color: #fff; border-color: rgba(11,73,62,0.14); }
.projects__grid { margin-top: 18px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; min-height: 160px; }
.projects__empty { grid-column: 1/-1; padding: 48px; text-align:center; color: var(--color-charcoal); background: linear-gradient(180deg, rgba(216,208,194,0.12), rgba(246,241,232,0.06)); border-radius: 10px; }

@media (max-width: 1100px) {
  .projects__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .projects__grid { grid-template-columns: 1fr; }
  .projects { padding: 80px 0; }
}

/* Ensure sticky header doesn't cover section when linking */
/* apply scroll offset for all anchored sections */
section[id] { scroll-margin-top: calc(var(--header-height) + 12px); }

#projects { scroll-margin-top: calc(var(--header-height) + 12px); }

/* About meaning block — refined editorial two-column layout */
.about__meaning { padding: 96px 0; }
.container.about__meaning {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-6);
  align-items: center;
}
.about__meaning-text {
  max-width: 56ch;
  position: relative;
  padding-right: var(--space-5);
}
/* Subtle vertical architectural divider between text and visual */
.about__meaning-text::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(11,73,62,0.12);
}
.about__meaning-eyebrow { text-transform:uppercase; color: var(--color-primary); letter-spacing:0.14em; font-weight:600; margin-bottom:12px; font-size:0.85rem; }
.about__meaning-title { color: var(--color-primary); margin:0 0 16px 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.25; }
.about__meaning-copy { color: var(--color-charcoal); line-height:1.7; }

/* Decorative architectural brand visual (not the official logo) */
.about__meaning-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  max-width: 360px;
  margin: 0 auto;
  background: var(--color-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about__meaning-svg { width: 100%; height: 100%; display:block; }
.about__meaning-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.about__meaning-mark-title {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.about__meaning-mark-sub {
  color: rgba(30,36,34,0.7);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

@media (max-width: 899px) {
  .about__meaning { padding: 64px 0; }
  .container.about__meaning { grid-template-columns: 1fr; gap: var(--space-5); }
  .about__meaning-text { padding-right: 0; max-width: none; }
  .about__meaning-text::after { display: none; }
  .about__meaning-visual { max-width: 280px; }
}

/* Placeholder sections */
.placeholder-section { padding: 80px 0; background: transparent; border-top: 1px solid rgba(30,36,34,0.02); }
.placeholder-section .muted { color: rgba(30,36,34,0.6); }

/* Reveal transitions for About (respect reduced motion in CSS) */
@media (prefers-reduced-motion: no-preference) {
  .about__eyebrow.show, .about__title.show, .about__copy.show, .founder__placeholder.show, .founder__image.show, .founder__label.show, .founder__name.show, .founder__bio.show { opacity:1; transform:none; transition: opacity 420ms ease, transform 420ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .about__eyebrow, .about__title, .about__copy, .founder__placeholder, .founder__image, .founder__label, .founder__name, .founder__bio { transition:none; opacity:1; transform:none; }
}
/* HERO */
  .hero { background: var(--color-ivory); }
  /* Mobile-first: compact spacing, stack content */
  .hero__inner { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) 0; }
  .hero__content { max-width: 62ch; }
  .hero__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing: 4.5px; font-size: 21px; font-weight: 600; margin-bottom: 28px; opacity: 0; transform: translateY(6px); white-space: nowrap; }
  /* Headline: refined editorial sizes */
  .hero__title { color: var(--color-primary); margin: 0 0 var(--space-4) 0; font-weight: 700; line-height: 1.02; font-size: clamp(42px, 6.5vw, 76px); opacity: 0; transform: translateY(8px); }
  .hero__description { color: var(--color-charcoal); font-size: 1.06rem; margin: 0 0 var(--space-3) 0; max-width: 56ch; opacity: 0; transform: translateY(6px); }
  .hero__services { color: var(--color-charcoal); opacity: 0; transform: translateY(6px); margin-bottom: var(--space-4); }
  .hero__actions { display:flex; gap: var(--space-4); align-items:center; opacity: 0; transform: translateY(8px); }
  /* Hero CTA buttons - more editorial, not pill */
  .hero__btn-primary { padding: 14px 24px; border-radius: 4px; background: var(--color-primary); color: var(--color-white); font-weight: 600; }
  .hero__btn-secondary { padding: 14px 24px; border-radius: 4px; background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); font-weight: 600; }
  .hero__image-wrapper { width: 100%; height: 360px; border-radius: 6px; overflow: hidden; background: var(--color-stone); display:block; position:relative; border: 1px solid rgba(30,36,34,0.04); }
  .hero__image { width:100%; height:100%; object-fit: cover; display:block; opacity: 0; transform: scale(1.03); transition: transform 600ms ease, opacity 600ms ease; }

  /* Placeholder inside image wrapper when hero image not available - refined editorial look */
  .hero__placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(216,208,194,0.95), rgba(246,241,232,0.95)); color: var(--color-charcoal); padding: 28px; }
  .hero__placeholder-inner { text-align:center; opacity:0.95; max-width: 88%; }
  .hero__placeholder-title { font-weight:700; color: var(--color-primary); letter-spacing:0.14em; margin-bottom: 8px; font-size:0.95rem; }
  .hero__placeholder-sub { font-size:0.95rem; color: rgba(30,36,34,0.8); }

  /* Subtle architectural accent line on the visual panel */
  .hero__image-wrapper::before { content: ""; position: absolute; left: -28px; top: 8%; bottom: 8%; width: 1px; background: rgba(30,36,34,0.04); }

/* Desktop two-column layout */
@media (min-width: 900px) {
  /* Desktop editorial two-column composition */
  .hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-6); padding: calc(var(--space-6) * 1.2) 0; min-height: 700px; }
  .hero__content { grid-column: 1; padding-right: var(--space-6); }
  .hero__image-wrapper { grid-column: 2; height: 560px; align-self: center; }
  .hero__title { font-size: clamp(42px, 5.4vw, 68px); }
}

/* Mobile specifics: image below text */
@media (max-width: 899px) {
  .hero__image-wrapper { order: 2; }
  .hero__content { order: 1; }
  .hero__inner { padding: var(--space-5) 0; }
  .hero__title { font-size: clamp(2.2rem, 6vw, 3rem); }
}

/* Entrance animations (prefers-reduced-motion respects user setting) */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow.show,
  .hero__title.show,
  .hero__description.show,
  .hero__services.show,
  .hero__actions.show { opacity: 1; transform: none; transition: opacity 420ms ease, transform 420ms ease; }
  .hero__image.show { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__description,
  .hero__services,
  .hero__actions,
  .hero__image { transition: none; opacity: 1; transform: none; }
}

/* Cinematic hero — overrides and additions for full-width slideshow */
.hero--cinematic {
  position: relative;
  overflow: hidden;
  background: #000;
  color: var(--color-white);
  min-height: 72vh;
  height: 80vh;
  display: block;
}
.hero--cinematic .container.hero__container { position: relative; z-index: 6; height: 100%; display: flex; align-items: center; padding: 0 var(--space-5); }
.hero__slideshow { position: absolute; inset: 0; z-index: 0; display:block; }
.hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0; transform: scale(1.03); transition: opacity 1200ms ease-in-out; will-change: opacity, transform; }
.hero__slide.active { opacity: 1; z-index: 1; }

/* subtle multi-directional gradient overlay to improve legibility without hiding photography */
.hero--cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Localized left-to-right readability gradient (kept in sync with the
     earlier override higher in this file). The horizontal band is sized
     to the left so image detail on the right stays bright. */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.18) 28%, rgba(0,0,0,0.08) 42%, rgba(0,0,0,0.00) 62%),
    linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.00) 60%);
  background-repeat: no-repeat;
  background-size: 68% 100%, 100% 100%;
}

/* Ken Burns zoom on the active slide */
@keyframes hero-kenburns {
  from { transform: scale(1.04) translateX(0); }
  to   { transform: scale(1.07) translateX(-1.2%); }
}
.hero__slide.active.animate {
  animation: hero-kenburns var(--hero-zoom-duration, 6s) ease-in-out forwards;
}

/* Content layout — editorial left column */
.hero__content { width: clamp(520px, 46vw, 820px); max-width: 820px; color: var(--color-white); padding-top: 8vh; }
.hero__eyebrow { color: rgba(255,255,255,0.88); letter-spacing: 0.18em; font-size: 0.85rem; }
.hero__title { color: var(--color-white); font-size: clamp(1.8rem, 5.2vw, 3.8rem); line-height: 1.02; }
.hero__description, .hero__services { color: rgba(255,255,255,0.9); }
.hero__actions .btn-ghost { border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.95); }

.hero__meta { position: relative; margin-left: auto; display:flex; flex-direction:column; gap:12px; align-items:flex-end; width: auto; z-index:6; }
.hero__counter { font-family: var(--font-sans); color: rgba(255,255,255,0.78); font-weight:700; letter-spacing:0.08em; font-size:0.95rem; background: transparent; }
.hero__scroll { color: rgba(255,255,255,0.68); font-size:0.78rem; text-align:right; line-height:1.1; }

/* Responsive adjustments */
@media (min-width: 900px) {
  .hero--cinematic { height: 86vh; }
}
@media (max-width: 899px) {
  .hero--cinematic { height: auto; min-height: 70vh; padding: calc(var(--space-5) * 1.2) 0; }
  .hero__slideshow { position: absolute; }
  .hero__content { width: 100%; padding: 6vh var(--space-4) 4vh var(--space-4); }
  .hero__meta { width: 100%; align-items: center; margin-top: 18px; }
  .hero__counter { display: none; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none !important; animation: none !important; }
}

/* Focus-visible for keyboard users */
:focus-visible { outline: 3px solid var(--color-stone); outline-offset: 2px; }

/* Small helpers */
.hidden { display:none !important; }

/* Social links — refined editorial text links */
.social__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.14em; font-weight:700; margin-bottom: 10px; }
.social__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.social__list li { margin: 0; }
.social__list a { color: var(--color-charcoal); font-weight: 600; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 200ms ease, border-color 200ms ease, transform 160ms ease; }
.social__list a:hover, .social__list a:focus { color: var(--color-primary); border-color: rgba(11,73,62,0.08); transform: translateX(4px); }
.social__list a span { color: rgba(30,36,34,0.4); margin-left: 8px; }

/* Contact area specifics */
.contact__inner { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-4) 0; }
.contact__inner { display: grid; grid-template-columns: 55% 45%; gap: var(--space-6); align-items: start; padding: var(--space-6) 0; }
.contact__intro { flex: 1 1 60%; }
.contact__intro--threshold { position: relative; padding: 18px 0; }
.contact__intro-inner { position: relative; z-index: 2; max-width: 520px; }
.contact__social { flex: 0 0 320px; }

/* Editorial left column */
.contact__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.14em; font-weight:700; font-size: 0.85rem; margin-bottom: 14px; }
.contact__headline { color: var(--color-charcoal); font-weight: 700; line-height: 1.02; font-size: clamp(2rem, 4.5vw, 3.25rem); margin: 0 0 18px 0; }
.contact__lead { color: rgba(30,36,34,0.9); max-width: 52ch; margin-bottom: 18px; font-size: 1.02rem; line-height: 1.6; }
.contact__meta { text-transform: uppercase; letter-spacing: 0.14em; color: rgba(30,36,34,0.6); font-size: 0.82rem; margin-top: 8px; }

/* Architectural motif positioned behind left content */
.contact__motif { position: absolute; right: -8%; top: 6%; width: 70%; height: 100%; z-index: 1; pointer-events: none; }

/* CTA and actions refinements */
.contact__actions { display:flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.contact__cta-wrap { margin-top: 18px; }
.contact-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 4px; background: var(--color-primary); color: var(--color-white); font-weight:700; text-decoration:none; }
.contact-cta:hover, .contact-cta:focus { transform: translateY(-2px); }

/* Signature bar */
.contact__signature { display:flex; align-items:center; justify-content:space-between; padding: 18px 0; color: rgba(30,36,34,0.6); font-size: 0.9rem; border-top: 1px solid rgba(30,36,34,0.03); margin-top: 18px; }
.contact__signature-left { font-weight:600; }
.contact__signature-right { font-weight:600; letter-spacing:0.08em; }

@media (max-width: 899px) {
  .contact__inner { grid-template-columns: 1fr; }
  .contact__motif { display: none; }
  .contact__intro-inner { max-width: 100%; }
  .contact__signature { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Footer social layout */
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0; position: relative; z-index: 2; }
.footer__brand .footer__name { font-weight:700; margin:0; font-size: 1rem; letter-spacing: 0.06em; }
.footer__brand .footer__tag { margin:6px 0 0 0; color: rgba(30,36,34,0.78); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight:600; }
.footer__social-list { list-style:none; padding:0; margin:0; display:flex; gap:16px; align-items:center; }
.footer__social-list a { color: var(--color-charcoal); font-weight:600; font-size:0.95rem; transition: color 180ms ease; }
.footer__social-list a:hover, .footer__social-list a:focus { color: var(--color-primary); }

/* subtle divider between top and bottom rows */
/* Removed decorative horizontal divider from footer (keep footer visually clean) */

/* Bottom meta row */
.footer__meta { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); padding-top: 6px; color: rgba(30,36,34,0.6); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.12em; font-weight:600; }
.footer__meta-left, .footer__meta-right { white-space: nowrap; }

/* Keep social icons compact and monochrome */
.footer-icon-link { display:inline-flex; align-items:center; justify-content:center; padding: 4px; border-radius: 0; color: var(--color-charcoal); transition: color 160ms ease; }
.footer-icon-link:hover, .footer-icon-link:focus { color: var(--color-primary); background: transparent; }

/* Contact action rows (phone / whatsapp / email) */
.contact__actions { display:flex; flex-direction: column; gap: 12px; }
.contact-action { display: inline-flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--color-charcoal); background: transparent; border: 1px solid rgba(30,36,34,0.04); transition: color 160ms ease, transform 120ms ease, border-color 160ms ease; }
.contact-action:focus, .contact-action:focus-visible { outline: 3px solid var(--color-stone); outline-offset: 2px; }
.contact-action:hover { color: var(--color-primary); border-color: rgba(11,73,62,0.08); transform: translateX(4px); }
.contact-icon { width: 20px; height: 20px; flex-shrink: 0; }
.contact-action__label { font-weight: 600; }
.contact-action__chev { margin-left: auto; color: rgba(30,36,34,0.5); }

/* Social icons used in footer/connect */
.social-icon, .footer-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.footer__social-list { display:flex; gap: 12px; align-items: center; }
.footer-icon-link { display:inline-flex; align-items:center; justify-content:center; padding: 4px; border-radius: 0; color: var(--color-charcoal); transition: color 160ms ease; }
.footer-icon-link:hover, .footer-icon-link:focus { color: var(--color-primary); background: transparent; }

@media (max-width: 899px) {
  .contact-action { padding: 12px; min-height: 44px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer__social-list { gap: 10px; }
  .footer__meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer__meta-left, .footer__meta-right { white-space: normal; }
}

/* Watermark removed per design: no watermark in footer */

/* Connect page specifics */
.connect__social { margin-top: var(--space-4); }
.connect__strap { margin: 6px 0 14px 0; color: rgba(30,36,34,0.85); }
.connect__list { flex-direction: column; }

@media (max-width: 899px) {
  .contact__inner { flex-direction: column; }
  .contact__social { width: 100%; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer__social-list { gap: 12px; }
}

/* Year placeholder style */
#year { font-weight: 600; }

/* Hamburger -> Close icon when expanded */
.nav-toggle .hamburger { transition: background 150ms ease-in-out; }
.nav-toggle .hamburger::before, .nav-toggle .hamburger::after { transition: transform 180ms ease-in-out, top 180ms ease-in-out; }
.nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); top: 0; }
.nav-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); top: 0; }

/* Subtle header shadow when scrolling */
.site-header.scrolled { box-shadow: none; }

/* 3D DESIGNS */
.designs { padding: 120px 0; background: var(--color-ivory); }
.designs__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-6); align-items: start; }
.designs__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.18em; font-weight:700; font-size:0.85rem; margin-bottom:8px; }
.designs__title { color: var(--color-primary); font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin:0 0 12px 0; }
.designs__lead { color: var(--color-charcoal); max-width: 60ch; margin-bottom: 18px; }
.designs__filters { display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }
.designs__filters .filter-btn { background: transparent; border: 1px solid rgba(30,36,34,0.06); padding: 8px 12px; border-radius:8px; cursor:pointer; color:var(--color-charcoal); font-weight:600; font-size:0.95rem; }
.designs__filters .filter-btn.active, .designs__filters .filter-btn[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: rgba(11,73,62,0.14); }

/* Filter icons: compact, monochrome, inherit color via currentColor */
.designs__filters .filter-btn { display: inline-flex; align-items: center; gap: 8px; }
.designs__filters .filter-icon { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; }
.designs__filters .filter-icon[fill] { fill: none; }
.designs__filters .filter-btn .filter-label { line-height: 1; }

/* Mobile: reduce icon size slightly and allow horizontal scrolling for the filter row */
@media (max-width: 899px) {
  .designs__filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .designs__filters::-webkit-scrollbar { height: 6px; }
  .designs__filters::-webkit-scrollbar-thumb { background: rgba(30,36,34,0.06); border-radius: 6px; }
  .designs__filters .filter-icon { width: 16px; height: 16px; }
}

.designs__panel { }
.designs__grid {
  /* Restore compact masonry-like layout for 3D designs (desktop: 3 columns).
     The gallery is constrained to the right column and will not expand full
     viewport width; responsive media queries below handle smaller screens. */
  column-gap: 22px;
  column-count: 3;
}
.design-card { display: inline-block; width: 100%; margin: 0 0 22px; background: transparent; border: 1px solid var(--color-stone); border-radius: 6px; overflow: hidden; text-align: left; cursor: pointer; }
.design-card:focus { outline: 3px solid var(--color-stone); outline-offset: 4px; }
.design-card__figure { margin: 0; display:block; background: var(--color-stone); overflow: hidden; }
.design-card__img { width: 100%; height: auto; display:block; max-height: 180px; object-fit: cover; }
.design-card__meta { padding: 12px 14px; }
.design-card__cat { color: var(--color-primary); font-size: 0.78rem; text-transform: uppercase; letter-spacing:0.12em; margin-bottom:6px; font-weight:700; }
.design-card__title { margin: 0; color: var(--color-charcoal); font-size: 1rem; font-weight:600; }
.designs__empty { padding: 36px; text-align:center; color: var(--color-charcoal); background: linear-gradient(180deg, rgba(216,208,194,0.08), rgba(246,241,232,0.03)); border-radius: 10px; border: 1px solid rgba(30,36,34,0.04); }

/* Lightbox */
.designs-lightbox { position: fixed; inset: 0; background: rgba(11,73,62,0.88); display:flex; align-items:center; justify-content:center; z-index:200; padding: 28px; }
.designs-lightbox.hidden { display:none; }
.lightbox__content { max-width: 1100px; width: 100%; max-height: 90vh; overflow: hidden; display:flex; align-items:center; gap:18px; }
.lightbox__image { width: 100%; height: auto; max-height: 84vh; object-fit: contain; display:block; margin: 0 auto; border-radius: 4px; }
.lightbox__meta { margin-left: 18px; color: var(--color-white); min-width: 240px; max-width: 340px; }
.lightbox__category { display:block; color: rgba(255,255,255,0.85); text-transform: uppercase; font-weight:700; letter-spacing:0.12em; margin-bottom:8px; }
.lightbox__title { margin:0; font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.lightbox__close { position: absolute; right: 20px; top: 18px; background: transparent; color: var(--color-white); border: 0; font-size: 34px; line-height:1; cursor:pointer; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; color: var(--color-white); border: 0; font-size: 34px; padding: 12px; cursor:pointer; }
.lightbox__prev { left: 18px; }
.lightbox__next { right: 18px; }

@media (max-width: 1100px) {
  .designs__inner { grid-template-columns: 1fr; }
  .designs__grid { column-count: 2; }
  .lightbox__meta { display: none; }
  .lightbox__content { max-width: 900px; }
}
@media (max-width: 700px) {
  .designs__grid { column-count: 1; }
  .designs { padding: 80px 0; }
  .design-card { border-radius: 8px; }
  .designs__filters { margin-bottom: 12px; }
  .lightbox__content { padding: 0 8px; }
}

/* 3D category landing: explicit, constrained card grid (state: landing) */
#designs-grid[data-state="landing"]{ column-count: 0; }

/* Category grid: constrained right-side grid for compact portfolio cards
   - Right side (grid) uses a centered max-width so cards don't grow full-width
   - Desktop: 3 columns, constrained to ~1050px so each card sits ~330px wide
   - Tablet: 2 columns
   - Mobile: 1 column
*/
#3d-designs .category-grid{

  max-width:820px; /* reduced from 1050 -> smaller cards so all five read together */
  width:100%;
  margin:18px auto 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px; /* slightly reduced gap for denser presentation */
  align-items:start;
  justify-items:stretch;
  box-sizing:border-box;
  justify-content:center;
}

#3d-designs .category-card{
  background:#fff;
  border:1px solid rgba(28,24,20,0.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:0;
  border-radius:6px;
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
  min-height: 0; /* allow smaller image-driven height */
  align-self: start; /* avoid stretching */
  max-width: 260px; /* reduced card width for a more compact landing */
}
#3d-designs .category-card:focus{outline:3px solid rgba(34,86,63,0.12);outline-offset:4px}

#3d-designs .category-card__img{
  width:100%;
  /* smaller visual footprint: reduce image display height so cards are compact */
  height: clamp(130px, 14vw, 160px);
  object-fit:cover;
  display:block;
  flex-shrink:0;
}

/* Placeholder when a cover image isn't yet present in images/3d/main-logo/ */
#3d-designs .category-card__img--placeholder {
  width:100%;
  height:clamp(130px, 18vw, 180px);
  background: linear-gradient(180deg, rgba(216,208,194,0.55), rgba(246,241,232,0.55));
  display:block;
  flex-shrink:0;
}

/* Subtle hover: gentle image scale, arrow nudges right */
#3d-designs .category-card { transition: transform 260ms ease; }
#3d-designs .category-card__img { transition: transform 360ms ease; will-change: transform; }
#3d-designs .category-card:hover .category-card__img { transform: scale(1.025); }
#3d-designs .category-card__cta { transition: transform 300ms ease; }
#3d-designs .category-card:hover .category-card__cta { transform: translateX(6px); }

#3d-designs .category-card__meta{
  padding:8px 10px;
  background:transparent;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#3d-designs .category-card__title{font-size:14px;margin:0;color:#213b33;letter-spacing:0.02em}
#3d-designs .category-card__sub{color:#557069;font-size:11px;margin:0}
#3d-designs .category-card__cta{color:#213b33;font-weight:600;font-size:12px;align-self:flex-end}

#3d-designs .category-hero{display:flex;align-items:center;gap:18px;margin-bottom:18px}
#3d-designs .category-back{background:none;border:0;color:#213b33;font-size:15px;cursor:pointer;padding:6px 0}

#3d-designs .gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; /* slightly tighter thumbnails */
  max-width: 900px; /* reduced overall gallery width for smaller thumbnails */
  margin: 18px auto 0;
}
#3d-designs .gallery-item{ margin: 0; }
#3d-designs .gallery-item > .gallery-btn { display: block; width: 100%; height: 0; padding-bottom: calc(3 / 4 * 100%); position: relative; border: 0; background: transparent; }
#3d-designs .gallery-item > .gallery-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }

@media (max-width: 1199px) {
  #3d-designs .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 920px; }
}
@media (max-width: 900px) {
  #3d-designs .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}
@media (max-width: 600px) {
  #3d-designs .gallery-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 420px; }
  #3d-designs .gallery-item > .gallery-btn { padding-bottom: calc(3 / 4 * 100%); }
}

@media (max-width:1199px){
  /* Slightly narrower desktop/tablet: keep 3 columns but free up width */
  #3d-designs .category-grid{grid-template-columns: repeat(3, minmax(0, 1fr)); gap:18px; max-width:920px}
  #3d-designs .category-card__img{height: clamp(160px, 16vw, 200px)}
}
@media (max-width:900px){
  /* Tablet: 2 columns */
  #3d-designs .category-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; max-width:720px}
  #3d-designs .category-card__img{height: clamp(150px, 18vw, 180px)}
}
@media (max-width:600px){
  /* Mobile: single column, keep images reasonable */
  #3d-designs .category-grid{grid-template-columns:repeat(1,1fr);gap:14px;max-width:420px}
  #3d-designs .category-card__img{height: clamp(160px, 34vw, 210px)}
  #3d-designs .category-card__meta{padding:10px}
}
@media (prefers-reduced-motion: reduce){#3d-designs .category-card__img{transition:none}}

/* -------------------------------------------------------------------------
   Targeted visual fixes (small, non-invasive overrides)
   - Founder philosophy: remove list markers, editorial 3-column layout with
     thin vertical dividers and centered items
   - Header / Logo: ensure the official logo is fully visible, vertically
     centered and not clipped by any parent
------------------------------------------------------------------------- */
.founder__philosophy {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(11,73,62,0.06);
  border-bottom: 1px solid rgba(11,73,62,0.04);
  align-items: center;
}
.founder__philosophy .phil {
  padding: 6px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.founder__philosophy .phil:not(:first-child) {
  border-left: 1px solid rgba(30,36,34,0.04);
  padding-left: 18px;
}
.founder__philosophy li { list-style: none; }
.founder__philosophy li::marker { display: none; }

/* Mobile: stack vertically and switch divider to top between items */
@media (max-width: 899px) {
  .founder__philosophy { grid-template-columns: 1fr; }
  .founder__philosophy .phil:not(:first-child) { border-left: none; border-top: 1px solid rgba(30,36,34,0.04); padding-top: 12px; margin-top: 12px; }
}

/* Ensure header and logo wrappers do not clip the official logo */
.site-header,
.site-header .logo-area,
.site-header .brand { overflow: visible; }
.site-header .logo-area { display: flex; align-items: center; }
.site-header .brand-logo { height: auto; max-height: calc(var(--header-height) - 12px); width: auto; display: block; }


/* -------------------------------------------------------------------------
   NIVARA — brand meaning editorial section
   Two-column editorial block (text left, minimal architectural motif right)
 ------------------------------------------------------------------------- */
.nivara {
  background: var(--color-ivory);
  /* Final spacing refinement: reduce vertical whitespace while keeping an
     editorial feel. Use a slightly smaller responsive padding and reduce
     the min-height so the section no longer feels excessively tall. We
     still vertically center the inner container so the text and motif
     remain balanced. */
  padding: clamp(28px, 4.5vh, 48px) 0; /* smaller top/bottom padding */
  min-height: 50vh; /* more conservative desktop presence */
  display: flex;
  align-items: center; /* vertical center the inner container */
}
.container.nivara__inner { display: grid; grid-template-columns: 1fr 420px; gap: var(--space-6); align-items: center; }
.nivara__text { max-width: 62ch; }
.nivara__eyebrow { color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.14em; font-weight:700; font-size: 0.82rem; margin-bottom: 10px; }
.nivara__title { color: var(--color-primary); font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.12; margin: 0 0 var(--space-4) 0; }
.nivara__copy p { color: var(--color-charcoal); line-height: 1.7; font-size: 1rem; margin-bottom: var(--space-3); }

.nivara__motif { display:flex; align-items:center; justify-content:center; padding-left: var(--space-4); }
.nivara__svg { width: 100%; height: auto; max-width: 360px; display: block; }

/* Keep motif compact on small screens and stack layout */
@media (max-width: 899px) {
  .container.nivara__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .nivara__motif { padding-left: 0; margin-top: var(--space-4); justify-content: flex-start; }
  .nivara__svg { max-width: 280px; }
  /* Mobile: remove the enforced min-height and reduce vertical padding so
     the section stacks naturally without excessive whitespace. */
  .nivara { min-height: auto; padding: 32px 0; display: block; }
}

/* Slight visual restraint on very large screens */
@media (min-width: 1200px) {
  .container.nivara__inner { grid-template-columns: 1fr 420px; }
}


/* -------------------------------------------------------------------------
   Subtle transition refinement: hero -> about/founder

   Goals:
   - Make the transition feel intentional and editorial without changing
     the existing hero or founder content/layout.
   - Remove the excessive top padding on `.about` while keeping a
     comfortable visual distance from the hero.
   - Add a restrained architectural divider at the top of the About block
     to signal a deliberate section boundary (thin line, soft shadow).
   - Keep the warm-ivory background and preserve all existing markup.
------------------------------------------------------------------------- */
.about {
  /* slightly reduced top padding for a closer, premium transition */
  padding-top: 72px !important;
  /* keep generous bottom spacing so the founder block still breathes */
  padding-bottom: 96px !important;
  position: relative; /* anchor the subtle divider */
}

.about::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px; /* sits just under the hero, not touching content */
  width: clamp(96px, 26%, 420px);
  height: 1px;
  background: rgba(11,73,62,0.06); /* architectural, but very subtle */
  border-radius: 1px;
  box-shadow: 0 6px 18px rgba(11,73,62,0.02); /* gentle depth to read as intentional */
  pointer-events: none;
  opacity: 0.98;
}

/* Mobile: keep transition compact and proportional */
@media (max-width: 899px) {
  .about { padding-top: 56px !important; padding-bottom: 72px !important; }
  .about::before { top: 6px; width: 84px; box-shadow: none; background: rgba(11,73,62,0.05); }
}