:root{
    --charcoal:#1c1b19;
    --charcoal-deep:#121110;
    --charcoal-light:#2b2926;
    --stone:#e7e0d2;
    --stone-dim:#a49c8c;
    --rust:#c25a2a;
    --rust-bright:#e07a42;
    --rust-dim:#8a3f1e; 
    --indigo:#414d73;
    --line:#4a4640;
    --sand:#c9b896;
    --space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
    --space-s: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    --space-m: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --space-l: clamp(3.5rem, 2.8rem + 2.8vw, 6rem);
    --space-xl: clamp(5rem, 4rem + 4vw, 9rem);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}

  body{
    background:var(--charcoal);
    color:var(--stone);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
  }

  ::selection{ background:var(--rust); color:var(--charcoal-deep); }
  a{ color:inherit; text-decoration:none; }
  :focus-visible{ outline:2px solid var(--rust-bright); outline-offset:4px; }

  h1,h2,h3{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.05;
  }

  .label{
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sand);
  }

  .wrap{
    max-width:1300px;
    margin:0;
    padding-left:var(--space-s);
    padding-right:var(--space-xl);
  }

  /* ================= FLOWING ARCHITECTURAL PATTERN LAYER ================= */
  .blueprint-grid{
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    opacity:0.05;
  }

  .flow-svg{
    position:fixed; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0;
    opacity:0.14;
  }
  .flow-svg path{ fill:none; stroke-width:1.1; }
  .flow-svg .fl-rust{ stroke:var(--rust); }
  .flow-svg .fl-stone{ stroke:var(--stone-dim); }

  /* diagonal hatch used on gray/utility surfaces */
  .hatch{
    background-image:repeating-linear-gradient(
      -45deg,
      rgba(231,224,210,0.05) 0px,
      rgba(231,224,210,0.05) 1px,
      transparent 1px,
      transparent 10px
    );
  }

  /* ================= NAV ================= */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:var(--space-xs) 0;
    background:linear-gradient(var(--charcoal) 55%, transparent);
  }
  .header-inner{
    display:flex; justify-content:space-between; align-items:center;
    gap:var(--space-m);
  }
  header .mark{
    font-weight:800; font-size:1.1rem; letter-spacing:0.02em;
    flex-shrink:0;
  }
  .logo-font{
    font-family:'Unbounded', sans-serif;
    font-weight:800;
  }
  header nav{ display:flex; gap:var(--space-m); flex-wrap:wrap; justify-content:flex-end; }
  header nav a{
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--stone-dim); transition:color .2s ease; position:relative;
    white-space:nowrap;
  }
  header nav a:hover{ color:var(--stone); }
  header nav a::after{
    content:''; position:absolute; left:0; bottom:-4px;
    width:0; height:1px; background:var(--rust-bright);
    transition:width .25s ease;
  }
  header nav a:hover::after{ width:100%; }
  @media (max-width:820px){ header nav{ display:none; } }

  section{ position:relative; z-index:1; }

  /* ================= HERO — full-bleed background with overlaid copy ================= */
  .hero{
    min-height:100svh;
    position:relative;
    display:flex;
    align-items:flex-end;
    padding-top:var(--space-xl); padding-bottom:var(--space-l);
    overflow:hidden;
    isolation:isolate;
  }

  .hero-bg{
    position:absolute; inset:0;
    z-index:-2;
    display:flex; align-items:center; justify-content:center;
    background:var(--charcoal);
  }
  .hero-bg video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .hero-bg svg{ width:60%; max-width:520px; height:auto; opacity:0.5; }
  .hero-bg path, .hero-bg line, .hero-bg circle{
    fill:none; stroke:var(--stone-dim); stroke-width:1;
    stroke-dasharray:1600; stroke-dashoffset:1600;
    animation:draw 2.8s ease forwards .3s;
  }
  .hero-bg .accent{ stroke:var(--rust-bright); stroke-width:1.4; }

  .hero-overlay{
    position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(28,27,25,0.55) 0%, rgba(28,27,25,0.75) 55%, rgba(28,27,25,0.92) 100%);
  }

  .hero-copy{ position:relative; max-width:56ch; }
  .hero-copy .label{ margin-bottom:var(--space-s); display:block; }
  .hero h1{
    font-size:clamp(2.1rem, 1.6rem + 3vw, 3.9rem);
    max-width:13ch;
  }
  .hero h1 .pop{ color:var(--rust-bright); }
  .hero p.deck{
    margin-top:var(--space-s); max-width:42ch;
    color:var(--stone-dim); font-size:0.92rem;
    min-height:6.6em;
    position:relative;
  }
  .deck-cursor{
    display:inline-block;
    width:2px;
    background:var(--rust-bright);
    margin-left:2px;
    animation:blink 0.9s step-end infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }
  .hero .coords{
    margin-top:var(--space-m);
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem; color:var(--stone-dim); letter-spacing:0.05em;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  /* ================= LEGEND SECTION SCAFFOLD ================= */
  .legend-section{ padding:var(--space-l) 0; border-top:1px solid var(--line); }
  .legend-grid{ display:grid; grid-template-columns:80px 1fr; gap:var(--space-m); }
  @media (max-width:760px){ .legend-grid{ grid-template-columns:1fr; gap:var(--space-s); } }
  .legend-grid .tag, .services-header .tag{
    font-family:'JetBrains Mono', monospace; font-size:0.72rem;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--sand);
    display:flex; align-items:flex-start; gap:0.5rem;
  }
  .legend-grid .tag::before, .services-header .tag::before{ content:'—'; color:var(--rust-bright); }
  .section-title{
    font-size:clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
    max-width:20ch; margin-bottom:var(--space-s);
  }

  /* ================= ABOUT ================= */
  .about{ overflow:hidden; }
  .about-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0.35;
    overflow:hidden;
  }
  .about-bg canvas{ width:100%; height:100%; display:block; }
  @media (max-width:700px){
    .about-bg{ opacity:0.28; }
  }
  .about .legend-grid{ position:relative; z-index:1; }
  .about p{ max-width:62ch; color:var(--stone-dim); font-size:1.02rem; }

  /* ================= VISION — photo collage background ================= */
  .vision-section{
    position:relative;
    padding:var(--space-xl) 0;
    overflow:hidden;
    isolation:isolate;
    border-top:1px solid var(--line);
  }
  .vision-bg{
    position:absolute; inset:0; z-index:-2;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(2, 1fr);
    gap:2px;
  }
  .photo-tile{
    background:var(--charcoal-light);
    position:relative;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    transform:scale(1);
    transition:transform 1.1s ease, filter 1.1s ease;
    will-change:transform;
  }
  .photo-tile img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .photo-tile.random-hover{
    transform:scale(1.12);
    filter:brightness(1.15);
    z-index:1;
  }
  .photo-tile::before{
    content:'';
    position:absolute; inset:0;
    background:repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(231,224,210,0.04) 8px, rgba(231,224,210,0.04) 9px);
  }
  .photo-tile:nth-child(1){ background:#3d3934; }
  .photo-tile:nth-child(2){ background:#221f1c; }
  .photo-tile:nth-child(3){ background:#55504a; }
  .photo-tile:nth-child(4){ background:#2b2926; }
  .photo-tile:nth-child(5){ background:#181613; }
  .photo-tile:nth-child(6){ background:#4a453e; }
  .photo-tile:nth-child(7){ background:#332f2a; }
  .photo-tile:nth-child(8){ background:#5c564e; }
  @media (max-width:700px){
    .vision-bg{ grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(4, 1fr); }
  }
  .vision-overlay{
    position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(28,27,25,0.82) 0%, rgba(28,27,25,0.92) 100%);
  }
  .vision-lede{ color:var(--stone); font-size:1.15rem; max-width:56ch; margin-bottom:var(--space-s); }
  .about p + p{ margin-top:1rem; }
  .about .lede{ color:var(--stone); font-size:1.15rem; max-width:56ch; margin-bottom:var(--space-s); }
  .name-breakdown{ display:flex; gap:var(--space-m); margin-top:var(--space-m); flex-wrap:wrap; }
  .name-breakdown div{ border-left:1px solid var(--rust); padding-left:var(--space-xs); }
  .name-breakdown .syll{ font-family:'Bricolage Grotesque', sans-serif; color:var(--rust-bright); font-size:1.4rem; font-weight:700; }
  .name-breakdown .mean{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--stone-dim); }

  /* ================= SERVICES CAROUSEL ================= */
  .services-section{
    padding: var(--space-l) 0;
    border-top: 1px solid var(--line);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  .services-header{
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-m);
    margin-bottom: var(--space-m);
    align-items: start;
  }
  @media (max-width:760px){ .services-header{ grid-template-columns:1fr; } }
  .services-header-right{ display:flex; flex-direction:column; gap:var(--space-s); }
  .services-header .section-title{ margin-bottom:0; }
  
  .carousel-outer{
  display:flex;align-items:center;gap:0.6rem;padding:0 var(--space-s);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--rust) transparent;
}
.carousel-outer::-webkit-scrollbar{ height:6px; }
.carousel-outer::-webkit-scrollbar-track{ background:transparent; }
.carousel-outer::-webkit-scrollbar-thumb{ background:var(--rust); border-radius:3px; }
.carousel-btn{
  background:transparent;
  border:none;
  color:var(--line);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  padding:0.2rem 0.4rem;
  transition:color .2s;
}
.carousel-btn:hover{color:var(--rust-bright);}
  /* Cards */
  .svc-card{
    flex:0 0 calc(33.333% - 0.67rem);
    min-width:240px;
    height:clamp(340px,55vh,500px);
    background-color:#1e1d1b;
    background-image:var(--card-bg);
    background-size:cover;
    background-position:center;
    position:relative;
    padding:var(--space-s);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    border:1px solid var(--line);
    transition:border-color .3s;
    scroll-snap-align:start;
  }
  .svc-link{
    display:inline-flex; align-items:center; gap:0.4rem;
    margin-top:0.6rem;
    font-family:'JetBrains Mono', monospace;
    font-size:0.65rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--stone-dim);
    border-bottom:1px solid var(--line);
    padding-bottom:0.15rem;
    transition:color .2s, border-color .2s, gap .2s;
    width:fit-content;
  }
  .svc-link:hover{ color:var(--rust-bright); border-color:var(--rust-bright); gap:0.6rem; }

  .svc-card:hover{ border-color: var(--rust); }
  .svc-card::before{
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
      to top,
      rgba(18,17,16,0.96) 0%,
      rgba(18,17,16,0.6) 50%,
      rgba(18,17,16,0.15) 100%
    );
    z-index: 1;
    transition: opacity .3s;
  }
  .svc-card:hover::before{
    background: linear-gradient(
      to top,
      rgba(18,17,16,0.98) 0%,
      rgba(18,17,16,0.7) 50%,
      rgba(18,17,16,0.25) 100%
    );
  }
  .svc-card-inner{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-s);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .svc-card .code{
    font-family: 'JetBrains Mono', monospace;
    color: var(--rust-bright);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .svc-card h3{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.3rem);
    font-weight: 600;
    color: var(--stone);
    line-height: 1.2;
  }
  .svc-card p{
    color: var(--stone-dim);
    font-size: 0.85rem;
    line-height: 1.55;
    max-width: 36ch;
  }
  .svc-card:hover p{
    opacity: 1;
    transform: translateY(0);
  }
  .enquire{
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--rust-bright);
    width: fit-content;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, gap .2s;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .3s .1s, transform .3s .1s, border-color .2s, gap .2s;
  }
  .svc-card:hover .enquire{
    opacity: 1;
    transform: translateY(0);
  }
  .enquire:hover{ border-color: var(--rust-bright); gap: 0.6rem; }

  @media (max-width:900px){
    .svc-card{ flex: 0 0 calc(50% - 0.6rem); }
  }
  @media (max-width:560px){
    .svc-card{ flex: 0 0 85%; }
  }

  /* Hero + footer primary CTA button */
  .cta-btn{
    display:inline-flex; align-items:center; gap:0.5rem;
    margin-top:var(--space-s);
    padding:0.85rem 1.4rem;
    background:var(--rust);
    color:var(--charcoal-deep);
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    font-weight:500;
    border:1px solid var(--rust);
    transition:background .2s ease, color .2s ease;
  }
  .cta-btn:hover{ background:transparent; color:var(--rust-bright); }
  .cta-btn.ghost{
    background:transparent; color:var(--stone);
    border:1px solid var(--line);
  }
  .cta-btn.ghost:hover{ border-color:var(--rust-bright); color:var(--rust-bright); }
  .cta-row{ display:flex; gap:var(--space-s); flex-wrap:wrap; }

  /* ================= CONTACT FORM ================= */
  .form-field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:var(--space-s); }
  .form-field label{
    font-family:'JetBrains Mono', monospace; font-size:0.68rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--sand);
  }
  .form-field input, .form-field select, .form-field textarea{
    background:var(--charcoal-light);
    border:1px solid var(--line);
    color:var(--stone);
    font-family:'Inter', sans-serif;
    font-size:0.95rem;
    padding:0.75rem 0.9rem;
    border-radius:2px;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{
    outline:none; border-color:var(--rust-bright);
  }
  .form-field textarea{ resize:vertical; min-height:110px; font-family:'Inter', sans-serif; }
  .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-s); }
  @media (max-width:600px){ .form-row-2{ grid-template-columns:1fr; } }
  .form-submit{
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.9rem 1.6rem;
    background:var(--rust);
    color:var(--charcoal-deep);
    font-family:'JetBrains Mono', monospace;
    font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
    font-weight:500;
    border:1px solid var(--rust);
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .form-submit:hover{ background:transparent; color:var(--rust-bright); }
  .form-submit:disabled{ opacity:0.5; cursor:wait; }
  .form-status{
    margin-top:var(--space-s);
    font-family:'JetBrains Mono', monospace;
    font-size:0.8rem;
    display:none;
  }
  .form-status.ok{ color:var(--rust-bright); display:block; }
  .form-status.err{ color:#c96a5c; display:block; }
  .quick-picks{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:var(--space-m); }
  .quick-pick{
    padding:0.6rem 1rem;
    border:1px solid var(--line);
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--stone-dim);
    background:transparent;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  .quick-pick:hover, .quick-pick.active{ border-color:var(--rust-bright); color:var(--rust-bright); }

  /* ================= BECOME A CLIENT — MODAL ================= */
  .modal-overlay{
    position:fixed; inset:0; z-index:200;
    background:rgba(18,17,16,0.86);
    display:flex; align-items:center; justify-content:center;
    padding:var(--space-s);
    animation:modalFade .2s ease;
  }
  .modal-overlay[hidden]{ display:none; }
  @keyframes modalFade{ from{ opacity:0; } to{ opacity:1; } }
  .modal-dialog{
    position:relative;
    background:var(--charcoal);
    border:1px solid var(--line);
    width:100%; max-width:640px;
    max-height:88svh; overflow-y:auto;
    padding:var(--space-m);
  }
  @media (max-width:600px){ .modal-dialog{ padding:var(--space-s); } }
  .modal-title{ font-size:clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); }
  .modal-close{
    position:absolute; top:var(--space-s); right:var(--space-s);
    width:2rem; height:2rem;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--line);
    color:var(--stone-dim);
    font-size:1.3rem; line-height:1;
    cursor:pointer;
    transition:color .2s ease, border-color .2s ease;
  }
  .modal-close:hover{ color:var(--rust-bright); border-color:var(--rust-bright); }
  .modal-dialog .form-field:last-of-type,
  .modal-dialog form > .form-field{ margin-bottom:var(--space-s); }

  /* ================= MANIFESTO — bold pop panel ================= */
  .manifesto{
    position:relative;
    background:var(--rust);
    color:var(--charcoal-deep);
    padding:var(--space-xl) 0;
    overflow:hidden;
    isolation:isolate;
  }
  .manifesto::before{
    content:'';
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(115deg, rgba(18,17,16,0.10) 0 2px, transparent 2px 46px),
      repeating-linear-gradient(25deg, rgba(18,17,16,0.08) 0 2px, transparent 2px 64px);
    z-index:-1;
  }
  .manifesto .truss{
    position:absolute; right:-5%; top:0; bottom:0; width:60%;
    opacity:0.5; z-index:-1;
  }
  .manifesto .label{ color:var(--charcoal-deep); opacity:0.7; margin-bottom:var(--space-s); }
  .manifesto .m-lines p{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700; line-height:1.2;
    font-size:clamp(1.3rem, 1rem + 1.8vw, 2.1rem);
    max-width:22ch;
    margin-bottom:0.2em;
  }
  .manifesto .m-close{
    margin-top:var(--space-m);
    max-width:46ch;
    font-size:1.05rem;
    color:var(--charcoal-deep);
    opacity:0.85;
  }

  /* ================= WORK ================= */
  .work-legend-grid{ padding-right:var(--space-l); }
  .work-content{ max-width:980px; }
  @media (max-width:900px){ .work-legend-grid{ padding-right:0; } }
  .work-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--line); margin-top:var(--space-m);
  }
  @media (max-width:760px){ .work-grid{ grid-template-columns:1fr 1fr; } }
  .work-item{
    background:var(--charcoal-light);
    aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end;
    padding:var(--space-s); position:relative; overflow:hidden;
  }
  .work-item img{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
  }
  .work-item:hover img{ transform:scale(1.04); }
  .work-item::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(
      to top,
      rgba(18,17,16,0.92) 0%,
      rgba(18,17,16,0.55) 45%,
      rgba(18,17,16,0.1) 100%
    );
  }
  .work-item::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(194,90,42,0.05) 8px, rgba(194,90,42,0.05) 9px);
  }
  .work-item .wcode{ font-family:'JetBrains Mono', monospace; font-size:0.65rem; color:var(--rust-bright); letter-spacing:0.1em; position:relative; z-index:2; }
  .work-item h4{ font-family:'Bricolage Grotesque', sans-serif; font-size:1.1rem; margin-top:0.3rem; position:relative; z-index:2; }
  .work-item .status{ color:var(--stone-dim); font-size:0.8rem; position:relative; z-index:2; }
  .work-item .w-enquire{
    position:relative; z-index:2;
    display:inline-block; margin-top:0.5rem;
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--rust-bright);
    border-bottom:1px solid var(--rust-bright);
  }

  /* ================= THINKING ================= */
  .thinking-list{ display:flex; flex-direction:column; gap:var(--space-s); margin-top:var(--space-s); }
  .thinking-item{
    display:grid; grid-template-columns:120px 1fr; gap:var(--space-s);
    padding-bottom:var(--space-s); border-bottom:1px solid var(--line);
  }
  @media (max-width:600px){ .thinking-item{ grid-template-columns:1fr; gap:0.3rem; } }
  .thinking-item .t-tag{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--sand); text-transform:uppercase; letter-spacing:0.08em; }
  .thinking-item h4{ font-family:'Bricolage Grotesque', sans-serif; font-size:1.05rem; margin-bottom:0.2rem; }
  .thinking-item p{ color:var(--stone-dim); font-size:0.93rem; max-width:52ch; }

  /* ================= COLLABORATIONS — gray hatch panel ================= */
  .collab{
    background:var(--charcoal-light);
    position:relative;
  }
  #collaborations.legend-section .legend-grid{
    grid-template-columns:140px 1fr;
    gap:var(--space-l);
  }
  @media (max-width:760px){
    #collaborations.legend-section .legend-grid{ grid-template-columns:1fr; gap:var(--space-s); }
  }
  .collab-grid{
    margin-top:var(--space-m);
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:1px;
    background:var(--line);
  }
  .collab-cell{
    background:var(--charcoal-light);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0.6rem;
    padding:var(--space-m) var(--space-s);
    position:relative;
    transition:background .2s ease;
  }
  .collab-cell:hover{ background:rgba(194,90,42,0.06); }
  .collab-photo{
    width:84px; height:84px; border-radius:50%;
    background:var(--charcoal);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    flex-shrink:0;
  }
  .collab-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .collab-photo .initials{
    font-family:'JetBrains Mono', monospace;
    font-size:0.9rem; color:var(--stone-dim); letter-spacing:0.05em;
  }
  .collab-name{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:600; font-size:1.05rem; color:var(--stone);
  }
  .collab-role{
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--rust-bright);
    margin-top:0.1rem;
  }

  /* ================= CONTACT / FOOTER ================= */
  footer{ padding:var(--space-l) 0 var(--space-m); border-top:1px solid var(--line); }
  footer .foot-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--space-m); }
  @media (max-width:760px){ footer .foot-grid{ grid-template-columns:1fr; } }
  footer h2{ font-size:clamp(2rem, 1.6rem + 2vw, 3rem); max-width:12ch; }
  footer .col .label{ margin-bottom:var(--space-xs); }
  footer .col a, footer .col p{ display:block; color:var(--stone-dim); font-size:0.95rem; margin-bottom:0.4rem; transition:color .2s ease; }
  footer .col a:hover{ color:var(--rust-bright); }
  footer .bottom{
    margin-top:var(--space-l); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
    font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--stone-dim); letter-spacing:0.08em;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .hero-bg path, .hero-bg line, .hero-bg circle{ animation:none; stroke-dashoffset:0; }
    .photo-tile{ transition:none; }
    .photo-tile.random-hover{ transform:none; filter:none; }
  }