/* ─── RESET & BASE ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }

    /* ─── BRAND TOKENS ─────────────────────────────── */
    :root {
      --deep:    #1C2B20;
      --forest:  #2D4B38;
      --moss:    #3D6B4A;
      --sage:    #7A9E7D;
      --mist:    #C4CEBD;
      --linen:   #F4F0E6;
      --sand:    #EBE0C8;
      --terrace: #C4956A;
      --clay:    #7D5A3C;

      --ff-serif: 'Cormorant Garamond', Georgia, serif;
      --ff-sans:  'Jost', system-ui, sans-serif;

      --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body {
      font-family: var(--ff-sans);
      font-weight: 300;
      color: var(--deep);
      background: var(--linen);
      overflow-x: hidden;
    }

    /* ─── UTILITIES ────────────────────────────────── */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .label {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.65rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--sage);
    }

    .divider {
      width: 36px;
      height: 1px;
      background: var(--terrace);
      display: block;
      margin: 16px 0;
    }

    /* ─── NAVIGATION ───────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      transition: background var(--transition), box-shadow var(--transition);
      padding: 0 40px;
    }
    nav.scrolled {
      background: rgba(28, 43, 32, 0.97);
      backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(255,255,255,0.06);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 84px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .nav-logo svg {
      width: 64px;
      height: auto;
      flex-shrink: 0;
    }
    /* Brighter strokes for nav context */
    .nav-logo svg path:nth-child(1) { stroke: #d6eace !important; stroke-width: 2 !important; }
    .nav-logo svg path:nth-child(2) { stroke: #b8d9a2 !important; stroke-width: 1.8 !important; }
    .nav-logo svg path:nth-child(3) { stroke: #b8d9a2 !important; stroke-width: 1.8 !important; }
    .nav-logo svg path:nth-child(4) { stroke: #d4a87a !important; stroke-width: 2.5 !important; }
    .nav-wordmark {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .nav-wordmark span:first-child {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: 1.1rem;
      letter-spacing: 0.22em;
      color: var(--linen);
      line-height: 1;
    }
    .nav-wordmark span:last-child {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.5rem;
      letter-spacing: 0.38em;
      color: var(--mist);
      text-transform: uppercase;
      opacity: 0.75;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
    }
    .nav-links a {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--mist);
      text-decoration: none;
      opacity: 0.8;
      transition: opacity var(--transition), color var(--transition);
    }
    .nav-links a:hover { opacity: 1; color: var(--linen); }
    .nav-cta {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--deep) !important;
      background: var(--sand);
      padding: 10px 22px;
      text-decoration: none;
      opacity: 1 !important;
      transition: background var(--transition) !important;
    }
    .nav-cta:hover { background: var(--linen) !important; }

    /* Mobile menu toggle */
    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }
    .nav-toggle span {
      display: block;
      width: 22px;
      height: 1px;
      background: var(--mist);
      transition: var(--transition);
    }

    /* ─── HERO ─────────────────────────────────────── */
    #home {
      min-height: 100vh;
      background-color: var(--deep);
      background-image: url('https://static.wixstatic.com/media/ce3658_53280402318843e9a31d2f9ccb4718c0~mv2.jpg/v1/fill/w_1920,h_1080,al_c,q_85,enc_auto/ce3658_53280402318843e9a31d2f9ccb4718c0~mv2.jpg');
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        160deg,
        rgba(18,34,22,0.62) 0%,
        rgba(28,43,32,0.42) 30%,
        rgba(28,43,32,0.58) 65%,
        rgba(18,34,22,0.82) 100%
      );
    }
    /* Subtle fine grid overlay */
    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(122,158,125,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,158,125,0.05) 1px, transparent 1px);
      background-size: 72px 72px;
      pointer-events: none;
      z-index: 1;
    }
    /* Decorative canopy circle motif */
    .hero-motif {
      position: absolute;
      right: -80px;
      top: 50%;
      transform: translateY(-50%);
      width: 680px;
      height: 680px;
      border-radius: 50%;
      border: 1px solid rgba(196,149,106,0.14);
      pointer-events: none;
      z-index: 1;
    }
    .hero-motif::before {
      content: '';
      position: absolute;
      inset: 60px;
      border-radius: 50%;
      border: 1px solid rgba(196,149,106,0.09);
    }
    .hero-motif::after {
      content: '';
      position: absolute;
      inset: 130px;
      border-radius: 50%;
      border: 1px solid rgba(196,149,106,0.06);
    }
    /* ─── Hero ghost logo — fixed, draws, spins, fades ─ */
    .hero-logo-wrap {
      position: fixed;
      /* Right edge bleeds off-screen; left arc sweeps into the headline */
      right: -15vw;
      top: -8vh;
      width: min(1550px, 118vw);
      height: auto;
      z-index: 1;
      pointer-events: none;
      /* JS drives opacity & translateY; start hidden */
      opacity: 0;
      will-change: transform, opacity;
    }
    /* The SVG rotates slowly and independently of the wrapper */
    .hero-logo-bg {
      width: 100%;
      height: auto;
      display: block;
      transform-origin: 50% 44%; /* rotate around the visual center of the canopy */
      animation: heroLogoSpin 140s linear infinite;
      /* Don't start spinning until after the draw — delayed via JS class */
      animation-play-state: paused;
    }
    .hero-logo-bg.spinning {
      animation-play-state: running;
    }
    @keyframes heroLogoSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    /* Main form strokes — brand light green palette */
    .hero-logo-bg .hlb-ring {
      stroke: rgba(196,218,186,0.26);
      stroke-width: 0.55;
      fill: none;
    }
    .hero-logo-bg .hlb-inner {
      stroke: rgba(160,196,150,0.18);
      stroke-width: 0.45;
      fill: none;
    }
    .hero-logo-bg .hlb-trunk {
      stroke: rgba(210,162,108,0.34);
      stroke-width: 0.75;
      stroke-linecap: round;
      fill: none;
    }
    /* ── Blueprint annotation layer ──────────────────────── */
    /* All annotation elements start invisible; JS fades them in */
    .hero-logo-bg .bp-cross,
    .hero-logo-bg .bp-dim,
    .hero-logo-bg .bp-tick,
    .hero-logo-bg .bp-dot,
    .hero-logo-bg .bp-reg,
    .hero-logo-bg .bp-text  { opacity: 0; }

    /* Dashed crosshair guide lines */
    .hero-logo-bg .bp-cross {
      stroke: rgba(196,218,186,0.16);
      stroke-width: 0.28;
      stroke-dasharray: 1.8 1.2;
      fill: none;
    }
    /* Solid dimension & leader lines */
    .hero-logo-bg .bp-dim {
      stroke: rgba(196,218,186,0.20);
      stroke-width: 0.28;
      fill: none;
    }
    /* Short tick marks at dimension ends */
    .hero-logo-bg .bp-tick {
      stroke: rgba(196,218,186,0.26);
      stroke-width: 0.30;
      fill: none;
    }
    /* Center origin dots */
    .hero-logo-bg .bp-dot {
      fill: rgba(196,218,186,0.48);
      stroke: none;
    }
    /* Corner registration marks */
    .hero-logo-bg .bp-reg {
      stroke: rgba(196,218,186,0.18);
      stroke-width: 0.28;
      fill: none;
    }
    /* Annotation text — Courier, brand sage green */
    .hero-logo-bg .bp-text {
      fill: rgba(196,218,186,0.38);
      font-family: 'Courier New', monospace;
      font-weight: 400;
      letter-spacing: 0.4px;
    }
    /* Hide on mobile — too much at small sizes */
    @media (max-width: 768px) {
      .hero-logo-wrap { display: none; }
    }

    /* Small registration-mark cross — top right corner */
    .hero-cross {
      position: absolute;
      right: 56px;
      top: 88px;
      width: 48px;
      height: 48px;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      animation: fadeIn 0.8s ease 1.8s forwards;
    }
    .hero-cross::before, .hero-cross::after {
      content: '';
      position: absolute;
      background: rgba(196,149,106,0.45);
    }
    .hero-cross::before { top: 50%; left: 0; width: 100%; height: 1px; }
    .hero-cross::after  { left: 50%; top: 0; height: 100%; width: 1px; }
    /* Corner L-tick — bottom left of hero content area */
    .hero-tick {
      position: absolute;
      bottom: 96px;
      left: 42px;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      animation: fadeIn 0.8s ease 2s forwards;
    }
    .hero-tick::before, .hero-tick::after {
      content: '';
      position: absolute;
      background: rgba(122,158,125,0.55);
    }
    .hero-tick::before { top: 0; left: 0; width: 32px; height: 1px; }
    .hero-tick::after  { top: 0; left: 0; width: 1px; height: 32px; }
    .hero-content {
      position: relative;
      z-index: 2;
      padding: 0 40px 100px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }
    .hero-eyebrow {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.72rem;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: var(--mist);
      margin-bottom: 28px;
      opacity: 0;
      animation: heroSlideUp 1s cubic-bezier(0.22,1,0.36,1) 0.4s forwards;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .hero-eyebrow::before {
      content: '';
      display: inline-block;
      width: 0;
      height: 1px;
      background: var(--terrace);
      animation: eyebrowLine 0.8s cubic-bezier(0.22,1,0.36,1) 1.1s forwards;
    }
    @keyframes eyebrowLine {
      to { width: 40px; }
    }
    .hero-headline {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: clamp(3.5rem, 8vw, 7.5rem);
      line-height: 0.92;
      color: var(--linen);
      letter-spacing: 0.02em;
      max-width: 800px;
      opacity: 0;
      animation: heroSlideUp 1.2s cubic-bezier(0.22,1,0.36,1) 0.65s forwards;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--sage);
    }
    .hero-tagline {
      font-family: var(--ff-serif);
      font-style: italic;
      font-weight: 300;
      font-size: 1.25rem;
      color: var(--mist);
      margin-top: 36px;
      opacity: 0;
      animation: heroSlideUp 1s cubic-bezier(0.22,1,0.36,1) 1.0s forwards;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-top: 52px;
      opacity: 0;
      animation: heroSlideUp 1s cubic-bezier(0.22,1,0.36,1) 1.25s forwards;
    }
    .btn-primary {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--deep);
      background: var(--sand);
      padding: 16px 36px;
      text-decoration: none;
      transition: background var(--transition), color var(--transition);
      display: inline-block;
    }
    .btn-primary:hover { background: var(--linen); }
    .btn-ghost {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--mist);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      opacity: 0.8;
      transition: opacity var(--transition), gap var(--transition);
    }
    .btn-ghost::after {
      content: '→';
      font-size: 0.9rem;
      transition: transform var(--transition);
    }
    .btn-ghost:hover { opacity: 1; }
    .btn-ghost:hover::after { transform: translateX(4px); }

    .hero-scroll {
      position: absolute;
      bottom: 40px;
      right: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: var(--sage);
      font-family: var(--ff-sans);
      font-size: 0.55rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      opacity: 0.6;
      z-index: 2;
    }
    .hero-scroll::after {
      content: '';
      display: block;
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, var(--sage), transparent);
    }

    /* ─── ABOUT ────────────────────────────────────── */
    #about {
      background: var(--linen);
      padding: 120px 0;
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .about-left {
      position: sticky;
      top: 100px;
    }
    .about-left .label { margin-bottom: 20px; }
    .about-headline {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: clamp(2.2rem, 4vw, 3.6rem);
      line-height: 1.1;
      color: var(--deep);
      margin-bottom: 28px;
    }
    .about-headline em {
      font-style: italic;
      color: var(--moss);
    }
    .about-body {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.85;
      color: var(--forest);
      opacity: 0.92;
      max-width: 440px;
    }
    .about-body + .about-body { margin-top: 18px; }
    .about-stat-row {
      display: flex;
      gap: 48px;
      margin-top: 52px;
      padding-top: 40px;
      border-top: 1px solid var(--sand);
    }
    .stat-item {}
    .stat-num {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: 2.8rem;
      color: var(--deep);
      line-height: 1;
      letter-spacing: 0.02em;
    }
    .stat-label {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.62rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--sage);
      margin-top: 4px;
    }

    .about-pillars {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
    }
    .pillar {
      background: var(--forest);
      padding: 40px 36px;
      position: relative;
      overflow: hidden;
    }
    .pillar:nth-child(2) { background: var(--deep); }
    .pillar:nth-child(3) { background: var(--sand); }
    .pillar:nth-child(4) { background: var(--moss); }
    .pillar-num {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: 3.5rem;
      line-height: 1;
      color: rgba(255,255,255,0.08);
      position: absolute;
      top: 16px;
      right: 20px;
    }
    .pillar:nth-child(3) .pillar-num { color: rgba(28,43,32,0.08); }
    .pillar-title {
      font-family: var(--ff-serif);
      font-style: italic;
      font-weight: 300;
      font-size: 1.35rem;
      color: var(--linen);
      margin-bottom: 14px;
      line-height: 1.2;
    }
    .pillar:nth-child(3) .pillar-title { color: var(--forest); }
    .pillar-text {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.84rem;
      line-height: 1.75;
      color: rgba(244,240,230,0.84);
    }
    .pillar:nth-child(3) .pillar-text { color: rgba(28,43,32,0.78); }

    /* ─── SERVICES ─────────────────────────────────── */
    #services {
      background: var(--deep);
      padding: 120px 0;
      position: relative;
      overflow: hidden;
    }
    .services-bg-motif {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(122,158,125,0.06);
      pointer-events: none;
    }
    .services-bg-motif::before {
      content: '';
      position: absolute;
      inset: 80px;
      border-radius: 50%;
      border: 1px solid rgba(122,158,125,0.04);
    }
    .services-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 72px;
    }
    .services-headline {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      line-height: 1.1;
      color: var(--linen);
    }
    .services-headline em {
      font-style: italic;
      color: var(--sage);
    }
    .services-subtext {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.9rem;
      line-height: 1.75;
      color: var(--mist);
      opacity: 0.78;
      max-width: 320px;
      text-align: right;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
    }
    .service-card {
      background: rgba(45,75,56,0.3);
      padding: 48px 32px 40px;
      position: relative;
      overflow: hidden;
      transition: background var(--transition);
      cursor: default;
    }
    .service-card:hover {
      background: rgba(45,75,56,0.55);
    }
    .service-card.featured {
      background: var(--forest);
    }
    .service-card.featured:hover {
      background: var(--moss);
    }
    .service-icon {
      width: 36px;
      height: 36px;
      margin-bottom: 28px;
      color: var(--sage);
      opacity: 0.8;
    }
    .service-name {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: 1.4rem;
      color: var(--linen);
      margin-bottom: 16px;
      line-height: 1.2;
    }
    .service-card.featured .service-name {
      font-style: italic;
    }
    .service-desc {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.88rem;
      line-height: 1.75;
      color: var(--mist);
      opacity: 0.85;
    }
    .service-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.52rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--terrace);
      border: 1px solid var(--terrace);
      padding: 4px 10px;
      opacity: 0.8;
    }

    /* Service detail strip */
    .services-detail {
      margin-top: 80px;
      display: grid;
      grid-template-columns: 1fr 2px 1fr 2px 1fr;
      align-items: center;
      gap: 0;
    }
    .detail-col {
      padding: 0 40px;
      text-align: center;
    }
    .detail-col:first-child { padding-left: 0; text-align: left; }
    .detail-col:last-child { padding-right: 0; text-align: right; }
    .detail-col .detail-title {
      font-family: var(--ff-serif);
      font-style: italic;
      font-size: 1rem;
      color: var(--linen);
      margin-bottom: 8px;
    }
    .detail-col .detail-body {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.75rem;
      line-height: 1.7;
      color: var(--mist);
      opacity: 0.78;
    }
    .detail-sep {
      width: 2px;
      height: 60px;
      background: rgba(122,158,125,0.15);
    }

    /* ─── PORTFOLIO ────────────────────────────────── */
    #portfolio {
      background: var(--linen);
      padding: 120px 0;
    }
    .portfolio-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 64px;
    }
    .portfolio-headline {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      color: var(--deep);
      line-height: 1.1;
    }
    .portfolio-headline em {
      font-style: italic;
      color: var(--moss);
    }
    .portfolio-filter {
      display: flex;
      gap: 24px;
      align-items: center;
    }
    .filter-btn {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.65rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--deep);
      opacity: 0.4;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: opacity var(--transition);
    }
    .filter-btn.active, .filter-btn:hover { opacity: 1; }
    .filter-btn.active {
      border-bottom: 1px solid var(--terrace);
      padding-bottom: 2px;
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .project-card {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
      cursor: pointer;
    }
    .project-card.large {
      grid-column: span 2;
      aspect-ratio: 8/5;
    }
    .project-placeholder {
      width: 100%;
      height: 100%;
      display: block;
    }
    /* Real project images */
    .project-placeholder {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 0.6s ease;
    }
    .project-card:hover .project-placeholder {
      transform: scale(1.04);
    }

    .project-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(28,43,32,0.92) 0%, rgba(28,43,32,0.2) 50%, transparent 80%);
      opacity: 0;
      transition: opacity var(--transition);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 32px;
    }
    .project-card:hover .project-overlay { opacity: 1; }
    .project-tag {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.6rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--sage);
      margin-bottom: 8px;
    }
    .project-title {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: 1.3rem;
      color: var(--linen);
      line-height: 1.2;
    }
    .project-location {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.68rem;
      color: var(--mist);
      opacity: 0.65;
      margin-top: 6px;
      letter-spacing: 0.08em;
    }

    .portfolio-cta {
      text-align: center;
      margin-top: 60px;
    }
    .btn-outline {
      display: inline-block;
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.68rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--deep);
      border: 1px solid var(--deep);
      padding: 15px 40px;
      text-decoration: none;
      transition: background var(--transition), color var(--transition);
      opacity: 0.7;
    }
    .btn-outline:hover { background: var(--deep); color: var(--linen); opacity: 1; }

    /* ─── SOUTH FLORIDA BAND ───────────────────────── */
    .sf-band {
      background: var(--forest);
      padding: 80px 0;
      overflow: hidden;
      position: relative;
    }
    .sf-inner {
      display: flex;
      align-items: center;
      gap: 80px;
    }
    .sf-text-block { flex: 1; }
    .sf-headline {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      color: var(--linen);
      line-height: 1.2;
      margin-bottom: 20px;
    }
    .sf-headline em {
      font-style: italic;
      color: var(--sage);
    }
    .sf-body {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.92rem;
      line-height: 1.8;
      color: var(--mist);
      opacity: 0.82;
      max-width: 380px;
    }
    .sf-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 32px;
    }
    .sf-tag {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sage);
      border: 1px solid rgba(122,158,125,0.3);
      padding: 7px 16px;
    }
    .sf-features { flex: 1; }
    .sf-feature {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 24px 0;
      border-bottom: 1px solid rgba(122,158,125,0.12);
    }
    .sf-feature:last-child { border-bottom: none; }
    .sf-feature-icon {
      width: 20px;
      height: 20px;
      color: var(--terrace);
      flex-shrink: 0;
      margin-top: 2px;
    }
    .sf-feature-title {
      font-family: var(--ff-serif);
      font-style: italic;
      font-size: 1.1rem;
      color: var(--linen);
      margin-bottom: 4px;
    }
    .sf-feature-desc {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.85rem;
      line-height: 1.7;
      color: var(--mist);
      opacity: 0.78;
    }

    /* ─── CONTACT ──────────────────────────────────── */
    #contact {
      background: var(--deep);
      padding: 120px 0;
      position: relative;
      overflow: hidden;
    }
    .contact-motif {
      position: absolute;
      right: -200px;
      bottom: -200px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      border: 1px solid rgba(122,158,125,0.07);
      pointer-events: none;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: start;
    }
    .contact-left .label { margin-bottom: 20px; }
    .contact-headline {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: clamp(2rem, 4vw, 3.2rem);
      color: var(--linen);
      line-height: 1.15;
      margin-bottom: 28px;
    }
    .contact-headline em {
      font-style: italic;
      color: var(--sage);
    }
    .contact-body {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.95rem;
      line-height: 1.8;
      color: var(--mist);
      opacity: 0.8;
      max-width: 380px;
      margin-bottom: 48px;
    }
    .contact-info-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .contact-info-item {}
    .contact-info-label {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.58rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--sage);
      margin-bottom: 5px;
    }
    .contact-info-value {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.85rem;
      color: var(--linen);
      opacity: 0.85;
    }
    .contact-info-value a {
      color: inherit;
      text-decoration: none;
      transition: color var(--transition);
    }
    .contact-info-value a:hover { color: var(--sand); }

    /* Form */
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .form-group label {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.6rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--sage);
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(122,158,125,0.2);
      color: var(--linen);
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.85rem;
      padding: 14px 16px;
      outline: none;
      transition: border-color var(--transition), background var(--transition);
      appearance: none;
      width: 100%;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: rgba(196,206,189,0.3); font-weight: 200; }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: rgba(122,158,125,0.5);
      background: rgba(255,255,255,0.07);
    }
    .form-group select { color: rgba(196,206,189,0.6); cursor: pointer; }
    .form-group select option { background: var(--deep); color: var(--linen); }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .form-submit {
      display: inline-block;
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--deep);
      background: var(--sand);
      padding: 16px 40px;
      border: none;
      cursor: pointer;
      transition: background var(--transition);
      align-self: flex-start;
      margin-top: 4px;
    }
    .form-submit:hover { background: var(--linen); }

    /* ─── FOOTER ───────────────────────────────────── */
    footer {
      background: var(--deep);
      border-top: 1px solid rgba(122,158,125,0.1);
      padding: 48px 0;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .footer-logo svg { width: 24px; color: var(--sage); opacity: 0.6; }
    .footer-brand {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: 0.9rem;
      letter-spacing: 0.2em;
      color: var(--mist);
      opacity: 0.5;
    }
    .footer-copy {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      color: var(--mist);
      opacity: 0.55;
    }
    .footer-links {
      display: flex;
      gap: 28px;
    }
    .footer-links a {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--mist);
      text-decoration: none;
      opacity: 0.4;
      transition: opacity var(--transition);
    }
    .footer-links a:hover { opacity: 0.8; }

    /* ─── ARCHITECT SECTION ────────────────────────── */
    #architect {
      background: var(--sand);
      padding: 120px 0;
      position: relative;
      overflow: hidden;
    }
    #architect::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 40%;
      height: 100%;
      background: var(--linen);
      z-index: 0;
    }
    .architect-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .architect-portrait-wrap {
      position: relative;
    }
    .architect-portrait {
      position: relative;
      aspect-ratio: 3/4;
      overflow: hidden;
      background: var(--forest);
    }
    .architect-portrait img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: grayscale(20%);
      transition: transform 0.8s ease, filter 0.6s ease;
    }
    .architect-portrait:hover img {
      transform: scale(1.04);
      filter: grayscale(0%);
    }
    /* Portrait placeholder if no photo */
    .architect-portrait-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(160deg, var(--forest) 0%, var(--deep) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 480px;
    }
    .arch-portrait-initials {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: 5rem;
      color: rgba(196,206,189,0.15);
      letter-spacing: 0.2em;
    }
    /* Decorative corner frame on portrait */
    .architect-portrait-wrap::before {
      content: '';
      position: absolute;
      top: -12px; left: -12px;
      width: 60px; height: 60px;
      border-top: 1px solid var(--terrace);
      border-left: 1px solid var(--terrace);
      opacity: 0.5;
      z-index: 2;
      pointer-events: none;
    }
    .architect-portrait-wrap::after {
      content: '';
      position: absolute;
      bottom: -12px; right: -12px;
      width: 60px; height: 60px;
      border-bottom: 1px solid var(--terrace);
      border-right: 1px solid var(--terrace);
      opacity: 0.5;
      z-index: 2;
      pointer-events: none;
    }
    /* Accent tag on portrait */
    .portrait-tag {
      position: absolute;
      bottom: 28px; left: -1px;
      background: var(--deep);
      color: var(--mist);
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.58rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      padding: 10px 20px;
      z-index: 3;
    }
    .architect-bio {
      padding-left: 20px;
    }
    .arch-name {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: clamp(2.2rem, 3.5vw, 3.2rem);
      line-height: 1.1;
      color: var(--deep);
      margin-bottom: 6px;
    }
    .arch-credentials-line {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--terrace);
      margin-bottom: 24px;
    }
    .arch-bio-text {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.98rem;
      line-height: 1.85;
      color: var(--forest);
      opacity: 0.9;
      max-width: 460px;
    }
    .arch-bio-text + .arch-bio-text { margin-top: 16px; }
    .arch-stats {
      display: flex;
      gap: 40px;
      margin-top: 48px;
      padding-top: 36px;
      border-top: 1px solid rgba(61,107,74,0.15);
    }
    .arch-stat-val {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: 2.4rem;
      color: var(--deep);
      line-height: 1;
    }
    .arch-stat-lbl {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.6rem;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--sage);
      margin-top: 4px;
    }
    .arch-accolades {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 32px;
    }
    .arch-badge {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--forest);
      border: 1px solid rgba(61,107,74,0.25);
      padding: 6px 14px;
    }

    /* ─── ALLIANCE BAND ─────────────────────────────── */
    .alliance-band {
      background: var(--deep);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }
    .alliance-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 600px 400px at 80% 50%, rgba(45,75,56,0.4) 0%, transparent 70%);
    }
    .alliance-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .alliance-left {}
    .alliance-eyebrow {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.6rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--terrace);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .alliance-eyebrow::before {
      content: '';
      display: inline-block;
      width: 28px; height: 1px;
      background: var(--terrace);
      opacity: 0.6;
    }
    .alliance-headline {
      font-family: var(--ff-serif);
      font-weight: 300;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      color: var(--linen);
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .alliance-headline em {
      font-style: italic;
      color: var(--sage);
    }
    .alliance-body {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.9rem;
      line-height: 1.8;
      color: var(--mist);
      opacity: 0.82;
      max-width: 500px;
    }
    .alliance-link-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 16px;
      flex-shrink: 0;
    }
    .alliance-logo-label {
      font-family: var(--ff-sans);
      font-weight: 200;
      font-size: 0.58rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--sage);
    }
    .alliance-cta {
      display: inline-block;
      font-family: var(--ff-serif);
      font-style: italic;
      font-size: 1.4rem;
      color: var(--linen);
      text-decoration: none;
      border: 1px solid rgba(244,240,230,0.2);
      padding: 20px 36px;
      transition: background var(--transition), border-color var(--transition);
      position: relative;
      overflow: hidden;
    }
    .alliance-cta::after {
      content: '→';
      margin-left: 10px;
      display: inline-block;
      transition: transform var(--transition);
    }
    .alliance-cta:hover {
      background: rgba(255,255,255,0.06);
      border-color: rgba(244,240,230,0.4);
    }
    .alliance-cta:hover::after { transform: translateX(4px); }
    .alliance-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 48px;
      background: rgba(122,158,125,0.08);
    }
    .alliance-feature {
      background: rgba(28,43,32,0.8);
      padding: 28px 24px;
    }
    .af-title {
      font-family: var(--ff-serif);
      font-style: italic;
      font-size: 1rem;
      color: var(--linen);
      margin-bottom: 8px;
    }
    .af-body {
      font-family: var(--ff-sans);
      font-weight: 300;
      font-size: 0.8rem;
      line-height: 1.7;
      color: var(--mist);
      opacity: 0.72;
    }

    /* ─── KEYFRAMES ────────────────────────────────── */
    @keyframes heroSlideUp {
      from { opacity: 0; transform: translateY(36px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes lineGrowH {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
    @keyframes lineGrowV {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
    @keyframes logoDraw {
      from { stroke-dashoffset: 1; opacity: 0; }
      to   { stroke-dashoffset: 0; opacity: 1; }
    }
    @keyframes pulseRing {
      0%   { transform: scale(1);    opacity: 0.4; }
      100% { transform: scale(1.06); opacity: 0; }
    }

    /* ─── SCROLL ANIMATIONS ────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.visible {
      opacity: 1;
      transform: none;
    }
    .reveal-delay-1 { transition-delay: 0.10s; }
    .reveal-delay-2 { transition-delay: 0.18s; }
    .reveal-delay-3 { transition-delay: 0.28s; }
    .reveal-delay-4 { transition-delay: 0.38s; }

    /* ─── DECORATIVE LINE SYSTEM ───────────────────── */

    /* Full-width horizontal rule that grows from center */
    .hr-line {
      position: relative;
      height: 1px;
      overflow: hidden;
      margin: 0;
    }
    .hr-line::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--terrace) 30%, var(--terrace) 70%, transparent 100%);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 1.4s cubic-bezier(0.22,1,0.36,1);
    }
    .hr-line.line-visible::after { transform: scaleX(1); }

    /* Short decorative rule below section labels */
    .divider {
      width: 0;
      height: 1px;
      background: var(--terrace);
      display: block;
      margin: 16px 0;
      transition: width 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s;
    }
    .reveal.visible .divider { width: 36px; }

    /* Animated section corner bracket */
    .section-bracket {
      position: relative;
      display: inline-block;
    }
    .section-bracket::before {
      content: '';
      position: absolute;
      top: -8px; left: -16px;
      width: 0; height: 0;
      border-top: 1px solid var(--terrace);
      border-left: 1px solid var(--terrace);
      transition: width 0.5s ease 0.6s, height 0.5s ease 1.1s;
      opacity: 0.5;
    }
    .reveal.visible .section-bracket::before { width: 16px; height: 16px; }

    /* Card bottom line reveal on hover */
    .service-card {
      position: relative;
    }
    .service-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      height: 2px;
      width: 0;
      background: var(--terrace);
      transition: width 0.55s cubic-bezier(0.22,1,0.36,1);
    }
    .service-card:hover::after { width: 100%; }

    /* Project card corner L-bracket reveal */
    .project-card::before {
      content: '';
      position: absolute;
      top: 16px; left: 16px;
      width: 0; height: 0;
      border-top: 1px solid rgba(196,149,106,0);
      border-left: 1px solid rgba(196,149,106,0);
      transition: width 0.35s ease, height 0.35s ease 0.35s, border-color 0.2s ease;
      z-index: 3;
      pointer-events: none;
    }
    .project-card:hover::before {
      width: 44px; height: 44px;
      border-color: rgba(196,149,106,0.65);
    }
    .project-card::after {
      content: '';
      position: absolute;
      bottom: 16px; right: 16px;
      width: 0; height: 0;
      border-bottom: 1px solid rgba(196,149,106,0);
      border-right: 1px solid rgba(196,149,106,0);
      transition: width 0.35s ease, height 0.35s ease 0.35s, border-color 0.2s ease;
      z-index: 3;
      pointer-events: none;
    }
    .project-card:hover::after {
      width: 44px; height: 44px;
      border-color: rgba(196,149,106,0.65);
    }

    /* Heading underline line accent */
    .line-accent {
      display: block;
      width: 0;
      height: 1px;
      background: linear-gradient(90deg, var(--terrace), rgba(196,149,106,0));
      margin-top: 14px;
      margin-bottom: 4px;
      transition: width 1s cubic-bezier(0.22,1,0.36,1) 0.3s;
    }
    .reveal.visible .line-accent { width: 80px; }

    /* Vertical rule element */
    .v-rule {
      display: inline-block;
      width: 1px;
      height: 0;
      background: rgba(122,158,125,0.3);
      transition: height 1s cubic-bezier(0.22,1,0.36,1) 0.4s;
    }
    .reveal.visible .v-rule { height: 60px; }

    /* About section vertical timeline line */
    .about-pillars { position: relative; }
    .about-pillars::before {
      content: '';
      position: absolute;
      left: -2px; top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--terrace) 20%, var(--terrace) 80%, transparent);
      opacity: 0.3;
    }

    /* Services section floating line accents */
    #services {
      position: relative;
    }
    .services-line-top {
      position: absolute;
      top: 60px; left: 40px; right: 40px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(122,158,125,0.15) 20%, rgba(122,158,125,0.15) 80%, transparent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 1.6s cubic-bezier(0.22,1,0.36,1);
    }
    .services-line-top.line-visible { transform: scaleX(1); }

    /* Pillar card inner line */
    .pillar::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      height: 1px; width: 0;
      background: rgba(196,149,106,0.25);
      transition: width 0.6s ease;
    }
    .pillar:hover::after { width: 100%; }

    /* Stat divider lines */
    .about-stat-row {
      position: relative;
    }
    .stat-item {
      position: relative;
    }
    .stat-item + .stat-item::before {
      content: '';
      position: absolute;
      left: -24px; top: 10%; bottom: 10%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(122,158,125,0.25) 30%, rgba(122,158,125,0.25) 70%, transparent);
    }

    /* Contact section diagonal line */
    #contact::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 1px;
      height: 100%;
      background: linear-gradient(to bottom, transparent, rgba(122,158,125,0.12) 30%, rgba(122,158,125,0.12) 70%, transparent);
      left: 42%;
    }

    /* Logo draw animation via JS */
    .nav-logo svg path.logo-animated {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: logoDraw 2s cubic-bezier(0.4,0,0.2,1) forwards;
    }

    /* Scroll indicator line */
    .hero-scroll::after {
      content: '';
      display: block;
      width: 1px;
      height: 0;
      background: linear-gradient(to bottom, var(--sage), transparent);
      animation: scrollLineGrow 1s cubic-bezier(0.22,1,0.36,1) 2s forwards;
    }
    @keyframes scrollLineGrow {
      from { height: 0; }
      to   { height: 48px; }
    }

    /* Nav logo pulse ring (very subtle) */
    .nav-logo svg {
      position: relative;
    }
    .nav-logo::after {
      content: '';
      position: absolute;
      top: 50%; left: 2px;
      width: 64px; height: 64px;
      border-radius: 50%;
      border: 1px solid rgba(196,149,106,0);
      transform: translate(0,-50%) scale(0.9);
      pointer-events: none;
    }
    .nav-logo:hover::after {
      animation: pulseRing 0.6s ease forwards;
      border-color: rgba(196,149,106,0.3);
    }

    /* Footer accent line */
    footer {
      position: relative;
    }
    footer::before {
      content: '';
      position: absolute;
      top: 0; left: 10%; right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(196,149,106,0.25) 30%, rgba(196,149,106,0.25) 70%, transparent);
    }

    /* Form field line focus effect */
    .form-group {
      position: relative;
    }
    .form-group::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      height: 1px; width: 0;
      background: var(--sage);
      transition: width 0.4s ease;
    }
    .form-group:focus-within::after { width: 100%; }

    /* SF feature item line left accent */
    .sf-feature {
      position: relative;
    }
    .sf-feature::before {
      content: '';
      position: absolute;
      left: -20px; top: 24px; bottom: 24px;
      width: 1px;
      background: rgba(196,149,106,0);
      transition: background 0.3s ease;
    }
    .sf-feature:hover::before {
      background: rgba(196,149,106,0.4);
    }

    /* ─── RESPONSIVE ───────────────────────────────── */
    @media (max-width: 1024px) {
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .about-grid { gap: 56px; }
      .contact-grid { gap: 60px; }
      .services-detail { display: none; }
    }

    @media (max-width: 768px) {
      .container { padding: 0 24px; }
      nav { padding: 0 24px; }

      .nav-links { display: none; }
      .nav-links.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        top: 72px;
        background: rgba(28,43,32,0.98);
        padding: 48px 32px;
        gap: 28px;
        backdrop-filter: blur(12px);
      }
      .nav-links.open a { font-size: 1.2rem; letter-spacing: 0.15em; }
      .nav-toggle { display: flex; }
      .nav-cta-wrapper { display: none; }

      .hero-content { padding: 0 24px 80px; }
      .hero-scroll { display: none; }

      .about-grid { grid-template-columns: 1fr; }
      .about-left { position: static; }
      .about-pillars { grid-template-columns: 1fr; }

      .services-grid { grid-template-columns: 1fr; }
      .services-header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .services-subtext { text-align: left; }

      .portfolio-grid { grid-template-columns: 1fr; }
      .project-card.large { grid-column: span 1; aspect-ratio: 4/3; }
      .portfolio-header { flex-direction: column; align-items: flex-start; gap: 20px; }
      .portfolio-filter { display: none; }

      .sf-inner { flex-direction: column; gap: 48px; }

      .architect-grid { grid-template-columns: 1fr; gap: 48px; }
      #architect::before { display: none; }
      .architect-bio { padding-left: 0; }

      .alliance-inner { grid-template-columns: 1fr; }
      .alliance-link-wrap { align-items: flex-start; }
      .alliance-features { grid-template-columns: 1fr; }

      .contact-grid { grid-template-columns: 1fr; gap: 56px; }
      .form-row { grid-template-columns: 1fr; }

      .footer-inner { flex-direction: column; gap: 20px; text-align: center; }
      .footer-links { justify-content: center; flex-wrap: wrap; }

      /* Gallery header: stack vertically on mobile */
      .gallery-header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .gallery-subtext { text-align: left; max-width: 100%; }

      /* Stats rows: wrap so they don't squeeze */
      .about-stat-row { flex-wrap: wrap; gap: 28px; }
      .arch-stats { flex-wrap: wrap; gap: 24px; }

      /* Hero headline: slightly smaller floor on mobile */
      .hero-headline { font-size: clamp(2.6rem, 8vw, 7.5rem); }

      .gallery-masonry { columns: 2; }
      .gallery-masonry .g-item.tall { break-inside: avoid; }
    }

    @media (max-width: 480px) {
      .gallery-masonry { columns: 1; }
    }

    /* (sketch slider removed) */
    #vision {
      display: none;
    }
    .ba-header {
      text-align: center;
      padding: 0 40px 64px;
    }
    .ba-header .section-tag  { color: var(--sage); }
    .ba-header .section-title { color: var(--linen); margin: 8px 0 20px; }
    .ba-header .section-sub  {
      color: rgba(196,206,189,0.65);
      font-family: var(--sans);
      font-size: 0.95rem;
      max-width: 540px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── outer wrapper ── */
    .ba-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      cursor: col-resize;
      user-select: none;
      -webkit-user-select: none;
    }
    /* ── both sides fill the wrapper ── */
    .ba-side {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .ba-side img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── sketch side — hand-drawn SVG ── */
    #sketchSvg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: #F8F5EE;
    }

    /* ── photo side (right, revealed by slider) ── */
    .ba-photo { z-index: 2; }

    /* ── labels ── */
    .ba-label {
      position: absolute;
      bottom: 28px;
      font-family: 'Courier New', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 6px 14px;
      border: 1px solid;
      pointer-events: none;
    }
    .ba-sketch .ba-label {
      left: 28px;
      color: rgba(61,107,74,0.85);
      border-color: rgba(61,107,74,0.30);
      background: rgba(244,240,230,0.75);
    }
    .ba-photo .ba-label {
      right: 28px;
      color: rgba(196,206,189,0.80);
      border-color: rgba(196,206,189,0.25);
      background: rgba(28,43,32,0.55);
    }

    /* ── divider line + handle ── */
    .ba-divider {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(244,240,230,0.55);
      transform: translateX(-50%);
      z-index: 10;
      cursor: col-resize;
    }
    .ba-divider::before,
    .ba-divider::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 40px;
      background: rgba(244,240,230,0.35);
    }
    .ba-divider::before { top: 0; }
    .ba-divider::after  { bottom: 0; }

    .ba-handle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--linen);
      border: 1.5px solid rgba(45,75,56,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 16px rgba(0,0,0,0.25);
    }
    .ba-handle svg {
      width: 20px;
      height: 20px;
    }

    @media (max-width: 768px) {
      #vision { padding: 72px 0 0; }
      .ba-wrap { aspect-ratio: 4 / 3; }
      .ba-label { font-size: 0.58rem; bottom: 16px; padding: 5px 10px; }
      .ba-sketch .ba-label { left: 14px; }
      .ba-photo  .ba-label { right: 14px; }
      .ba-handle { width: 36px; height: 36px; }
    }
  

/* ── SUBPAGE SYSTEM ─────────────────────────────── */
main{display:block}
.page-hero{position:relative;padding:180px 0 90px;background:linear-gradient(160deg,var(--deep) 0%,var(--forest) 60%,var(--moss) 130%);color:var(--linen);overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(122,158,125,.25),transparent 55%);pointer-events:none}
.page-hero .container{position:relative;z-index:2}
.breadcrumb{font-family:var(--ff-sans);font-weight:300;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:22px}
.breadcrumb a{color:var(--mist);text-decoration:none}
.breadcrumb a:hover{color:var(--linen)}
.breadcrumb span{margin:0 8px;opacity:.5}
.page-hero h1{font-family:var(--ff-serif);font-weight:400;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;letter-spacing:-.01em;max-width:16ch}
.page-hero .lede{font-family:var(--ff-serif);font-style:italic;font-weight:300;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--mist);margin-top:22px;max-width:52ch;line-height:1.5}
.page-hero.has-img{background:var(--deep);padding:210px 0 100px}
.page-hero.has-img::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(150deg,rgba(28,43,32,.90),rgba(28,43,32,.66) 55%,rgba(45,75,56,.60)),var(--hero);background-size:cover;background-position:center;background-repeat:no-repeat}
.page-hero.has-img .container{position:relative;z-index:2}
@media(max-width:768px){.page-hero.has-img{padding:150px 0 66px}}
.prose{padding:80px 0}
.prose .container{max-width:760px}
.prose h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--forest);margin:48px 0 18px;line-height:1.15}
.prose h3{font-family:var(--ff-sans);font-weight:400;font-size:1.15rem;letter-spacing:.02em;color:var(--moss);margin:34px 0 12px}
.prose p{font-size:1.05rem;line-height:1.8;color:#33413a;margin-bottom:20px;font-weight:300}
.prose ul{margin:0 0 22px 0;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:12px;line-height:1.7;color:#33413a;font-weight:300}
.prose ul li::before{content:"";position:absolute;left:0;top:12px;width:10px;height:1px;background:var(--terrace)}
.prose a{color:var(--moss);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mist)}
.prose a:hover{text-decoration-color:var(--moss)}
.section-alt{background:var(--sand)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin:36px 0}
.s-card{background:#fff;border:1px solid var(--mist);border-radius:4px;padding:32px 28px;transition:transform var(--transition),box-shadow var(--transition);display:block;text-decoration:none}
.s-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,43,32,.10)}
.s-card .label{color:var(--terrace);margin-bottom:14px}
.s-card h3{font-family:var(--ff-serif);font-weight:500;font-size:1.35rem;color:var(--forest);margin:0 0 10px}
.s-card p{font-size:.95rem;line-height:1.65;color:#55635a;font-weight:300;margin:0}
.s-card .more{display:inline-block;margin-top:16px;font-family:var(--ff-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--moss)}
.cta-band{background:var(--deep);color:var(--linen);padding:90px 0;text-align:center}
.cta-band h2{font-family:var(--ff-serif);font-weight:300;font-size:clamp(1.9rem,4vw,3rem);max-width:20ch;margin:0 auto 14px;color:var(--linen)}
.cta-band p{color:var(--mist);font-weight:300;max-width:48ch;margin:0 auto 34px;line-height:1.6}
.btn{display:inline-block;font-family:var(--ff-sans);font-weight:400;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;padding:16px 40px;border-radius:2px;text-decoration:none;transition:all var(--transition)}
.btn-gold{background:var(--terrace);color:var(--deep)}
.btn-gold:hover{background:#d4a87a}
.btn-ghost{border:1px solid var(--sage);color:var(--linen)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.meta-row{font-family:var(--ff-sans);font-size:.8rem;letter-spacing:.05em;color:var(--sage);margin-bottom:14px}
.faq-item{border-bottom:1px solid var(--mist);padding:26px 0}
.faq-item h3{font-family:var(--ff-serif);font-weight:500;font-size:1.3rem;color:var(--forest);margin:0 0 12px}
.faq-item p{margin:0;font-size:1.02rem;line-height:1.75;color:#33413a;font-weight:300}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px;margin-top:20px}
.post-card{display:block;text-decoration:none;border:1px solid var(--mist);border-radius:4px;overflow:hidden;background:#fff;transition:transform var(--transition),box-shadow var(--transition)}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,43,32,.10)}
.post-card .pc-body{padding:26px}
.post-card .label{color:var(--terrace);margin-bottom:10px}
.post-card h3{font-family:var(--ff-serif);font-weight:500;font-size:1.3rem;color:var(--forest);line-height:1.2;margin:0 0 10px}
.post-card p{font-size:.92rem;color:#55635a;line-height:1.6;font-weight:300;margin:0}
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:28px}
.loc-grid a{display:block;padding:18px 20px;border:1px solid var(--mist);border-radius:3px;text-decoration:none;color:var(--forest);font-family:var(--ff-serif);font-size:1.1rem;background:#fff;transition:all var(--transition)}
.loc-grid a:hover{border-color:var(--terrace);color:var(--moss)}
.loc-grid a small{display:block;font-family:var(--ff-sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-top:4px}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px}
.pill{font-family:var(--ff-sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss);border:1px solid var(--mist);border-radius:40px;padding:7px 16px}
@media(max-width:768px){.page-hero{padding:140px 0 66px}.prose{padding:56px 0}}

.nav-links.open{display:flex !important}
main.reveal,.reveal{will-change:opacity,transform}