@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&family=Nunito:ital,wght@0,300;0,400;1,300&display=swap');

/*
  THE VISION: shapes within shapes within shapes.
  Each section is a distinct geometric vibe — angular containers
  nested and overlapping each other, yin-yang style.
  You begin in deep forest and descend into darkness.

  JOURNEY (revised — darker, moodier, more geometric):
  Body:        #1B1611  (deep forest floor)
  Hero:        #1B1611  forest dark
  Statement:   #2a2118  deeper moss
  Scroll-gal:  #3F4634  canopy
  Gallery:     #3F4E40  grove
  Projects:    #413324  roots
  Footer:      #1B1611  underground
*/

:root {
    --pitch-black: #1B1611;
    --charcoal:    #3F4634;
    --granite:     #3F4E40;
    --taupe:       #413324;
    --ash-brown:   #584738;
    --grey-olive:  #959581;
    --alabaster:   #E1E2E3;

    --primary:    #1B1611;
    --secondary:  #E1E2E3;
    --accent:     #3F4E40;
    --accent2:    #3F4634;
    --accent3:    #584738;
    --gray:       #959581;
    --gray-light: #c2c3be;
    --card-bg:    #2a2118;
    --radius:     0px;
    --radius-sm:  4px;
    --radius-lg:  12px;
    --overlap:    -48px;
}

/* FONTS */
.lobster-regular {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.playfair-display{
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

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

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  background: #1B1611;
  /* No padding — portals go edge to edge, overlapping */
}

/* ══════════════════════════════════════════
   PORTALS — geometric, overlapping, yin-yang
   Each portal uses clip-path or border-radius
   on specific corners only for angular feel.
   Negative margin-bottom creates the overlap.
   ══════════════════════════════════════════ */

.portal {
  position: relative;
  z-index: 1;
  /* Each portal defined individually below */
}

/* Stacking so overlapping portal sits above the one before */
.portal + .portal { z-index: 2; }
.portal + .portal + .portal { z-index: 3; }
.portal + .portal + .portal + .portal { z-index: 4; }

#hero-portal {
  background: #1B1611;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%);
  margin-bottom: var(--overlap);
  padding-bottom: 80px;
}

#statement-portal {
  background: #2a2118;
  clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%, 0 60px);
  margin-bottom: var(--overlap);
  padding-top: 80px;
  padding-bottom: 80px;
}

#scroll-gallery-portal {
  background: #3F4634;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%);
  margin-bottom: var(--overlap);
  padding-top: 80px;
  padding-bottom: 80px;
}

#projects-portal {
  background: #413324;
  clip-path: polygon(60px 0, 100% 0, 100% calc(100% - 60px), 60px 100%, 0 calc(100% - 60px));
  padding-top: 80px;
  padding-bottom: 100px;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 26px 52px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.5s;
}
nav.solid {
  background: rgba(27,22,17,0.95);
  backdrop-filter: blur(14px);
  padding: 16px 52px;
  border-bottom: 1px solid rgba(149,149,129,0.15);
}
nav.dark {
  background: rgba(27,22,17,0.95);
  backdrop-filter: blur(14px);
  padding: 16px 52px;
  border-bottom: 1px solid rgba(88,71,56,0.2);
}
.brand {
  font-family: 'Lobster', serif;
  font-size: 2rem; font-style: italic;
  color: #E1E2E3; letter-spacing: 0.04em;
  transition: color 0.5s;
}
nav.dark .brand { color: #959581; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(149,149,129,0.5); text-decoration: none; transition: color 0.3s;
}
nav.dark .nav-links a { color: rgba(149,149,129,0.5); }
.nav-links a:hover { color: #E1E2E3; }
nav.dark .nav-links a:hover { color: #E1E2E3; }

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 101;
}
.nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    background-color: #E1E2E3;
    transition: all 0.3s ease;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── ORB ACCENTS (subtler on dark bg) ── */
.orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(80px); opacity: 0.12;
}
.orb-1 { width: 400px; height: 400px; background: #3F4634; top: -100px; right: -80px; }
.orb-2 { width: 300px; height: 300px; background: #413324; bottom: 0; left: 10%; }
.orb-s { width: 350px; height: 350px; background: #584738; top: 50%; left: -100px; }
.orb-g { width: 400px; height: 400px; background: #3F4634; top: 0; right: -80px; }
.orb-p { width: 300px; height: 300px; background: #3F4E40; bottom: 0; left: 20%; }

/* ═══════════════════════════════════════════════════════
   MOBILE NAV — add this block to the bottom of style-index.css
   AND contact.css (both files need it since each page loads
   one of those as its primary stylesheet)
   ═══════════════════════════════════════════════════════ */

/* ── Hamburger button — hidden on desktop ── */
.nav-toggle {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:            6px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        8px;
  z-index:        200;
  /* Nudge it to align with the right edge of the nav */
  margin-right:   -4px;
}

.nav-toggle span {
  display:    block;
  width:      26px;
  height:     2px;
  background: #E1E2E3;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

/* Animate into an X when active */
.nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Mobile breakpoint ── */
@media (max-width: 680px) {

  /* Show the hamburger */
  .nav-toggle { display: flex; }

  /* Hide the desktop link list by default */
  .nav-links {
    /* Slide in from the right */
    position:   fixed;
    top:        0;
    right:      -100%;
    width:      min(320px, 85vw);
    height:     100vh;
    background: rgba(27, 22, 17, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    flex-direction: column;
    align-items:    flex-start;
    justify-content: center;
    gap:            0;
    padding:        100px 48px 60px;
    list-style:     none;

    border-left: 1px solid rgba(149, 149, 129, 0.15);

    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    z-index:    150;
  }

  /* Slide in when active */
  .nav-links.active { right: 0; }

  /* Each link */
  .nav-links li {
    width:          100%;
    border-bottom:  1px solid rgba(149, 149, 129, 0.08);
  }
  .nav-links li:first-child { border-top: 1px solid rgba(149, 149, 129, 0.08); }

  .nav-links a {
    display:        block;
    padding:        20px 0;
    font-size:      0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          rgba(225, 226, 227, 0.6);
    text-decoration: none;
    transition:     color 0.2s, padding-left 0.2s;
  }
  .nav-links a:hover,
  .nav-links a.nav-active {
    color:        #E1E2E3;
    padding-left: 8px;
  }

  /* Dim overlay behind the open menu */
  .nav-links.active::before {
    content:    '';
    position:   fixed;
    inset:      0;
    right:      min(320px, 85vw);
    background: rgba(0, 0, 0, 0.5);
    z-index:    -1;
  }

  /* Brand name in the menu header area */
  .nav-links::after {
    content:        'Luigi Bianchi';
    font-family:    'Lobster', sans-serif;
    font-size:      1.1rem;
    color:          rgba(149, 149, 129, 0.35);
    letter-spacing: 0.04em;
    position:       absolute;
    bottom:         36px;
    left:           48px;
  }
}
/* ── HERO ── */
#hero {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 120px 52px 80px;
}
.hero-inner-shape {
  position: absolute; z-index: 0;
  width: 45vw; height: 45vw; max-width: 600px; max-height: 600px;
  right: 4vw; top: 50%; transform: translateY(-50%);
  background: rgba(149,149,129,0.22);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1px solid rgba(149,149,129,0.18);
}
.hero-inner-shape-2 {
  position: absolute; z-index: 0;
  width: 30vw; height: 30vw; max-width: 400px; max-height: 400px;
  left: 8vw; bottom: 10%;
  background: rgba(88,71,56,0.25);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: rotate(12deg);
  border: 1px solid rgba(149,149,129,0.12);
}
.hero-content {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 16px;
}
.hero-left { 
  flex: 1; 
  padding-left: 10%;
}
.hero-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: #959581; margin-bottom: 16px;
}
.hero-name {
  font-family: 'Lobster', serif;
  font-size: clamp(90px, 8vw, 140px);
  line-height: 1.0;
  color: #E1E2E3;
  letter-spacing: -0.01em;
}
.hero-name em { color: #E1E2E3; font-style: italic; }
.hero-sub {
  font-size: 1.25rem; color: rgba(225,226,227,0.55);
  margin-top: 20px; max-width: 380px; line-height: 1.7;
}
strong{ font-weight: 550; color: #959581; font-style: normal; }

.hero-right { 
  flex: 0 0 auto; 
  margin-right: 15%;
}
.headshot-link { position: relative; display: block; }
.hero-headshot {
  width: clamp(340px, 28vw, 380px);
  /* Geometric clip instead of circle */
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  display: block;
  filter: grayscale(20%) contrast(1.05);
}
.headshot-hover-label {
  position: absolute; inset: 0;
  background: rgba(27,22,17,0.75);
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
}
.headshot-hover-label span {
  color: #E1E2E3; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.headshot-link:hover .headshot-hover-label { opacity: 1; }

/* ── STATEMENT ── */
#statement {
  position: relative; z-index: 1;
  padding: 80px 52px;
}
.statement-grid {
  display: grid;
  grid-template-columns: 48px 1fr 1.4fr;
  gap: 48px; align-items: center;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.statement-grid.visible { opacity: 1; transform: none; }
.sidebar-label {
   text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(149,149,129,0.45);
}
.sidebar-label-artist-statement{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(149,149,129,0.45);

}
.as-img-wrap { display: block; }
.artist-statement-img {
  width: 100%; max-width: 360px;
  clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%);
  filter: grayscale(25%) contrast(1.1);
}
.statement-text {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(225,226,227,0.8);
  font-style: italic;
  border-left: 2px solid #3F4634;
  padding-left: 32px;
}

.statement-text strong{ font-weight: 550; color: #959581; font-style: normal; }

/* ── SCROLL GALLERY ── */
/* Fix zoomed images in scroll gallery */
.scroll-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

#scroll-gallery {
  position: relative; z-index: 1;
  padding: 60px 0 60px 52px;
  overflow: hidden;
}
.scroll-gallery-label {
  margin-bottom: 28px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}
.scroll-gallery-label.visible { opacity: 1; transform: none; }

.scroll-gallery-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-right: 52px;
  padding-bottom: 4px;
}
.scroll-gallery-track::-webkit-scrollbar { display: none; }

.scroll-gallery-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: rgba(63,70,52,0.6);
  border: 1px solid rgba(149,149,129,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(149,149,129,0.35);
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
  /* Sharp — no border-radius */
}
/* Target the specific item in your scroll track */
.scroll-gallery-item.sg-wide a {
  display: block;   
  width: 100%;
  height: 100%;
  overflow: hidden;  
}

/* Style the thumbnail image itself */
#thumbnail {
  width: 100%;
  height: 100%;
  display: block;    
  object-fit: cover; 
  object-position: center; 
  transition: transform 0.6s ease; 
}

/* Optional: Add a hover effect to make the CTA feel interactive */
.scroll-gallery-item.sg-wide a:hover #thumbnail {
  transform: scale(1.08); /* Slight zoom on hover */
}
.scroll-gallery-item:hover { border-color: rgba(149,149,129,0.35); }

/* Varying shapes via clip-path for the yin-yang / different quality feel */
.scroll-gallery-item:nth-child(odd) {
  clip-path: polygon(0 0, 96% 0, 100% 4%, 100% 100%, 4% 100%, 0 96%);
}
.scroll-gallery-item:nth-child(even) {
  clip-path: polygon(4% 0, 100% 0, 100% 96%, 96% 100%, 0 100%, 0 4%);
}

/* Size varieties */
.sg-tall  { width: 260px; height: 380px; }
.sg-wide  { width: 420px; height: 280px; }
.sg-sq    { width: 300px; height: 300px; }

.scroll-gallery-hint {
  margin-top: 16px;
  padding-right: 52px;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(149,149,129,0.3);
  text-align: center;
}

/* ── GALLERY (masonry) ── */
#gallery { position: relative; z-index: 1; padding: 80px 52px; }
.gallery-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s, transform 0.6s;
}
.gallery-top.visible { opacity: 1; transform: none; }
.sec-num {
  font-size: clamp(60px, 10vw, 120px);
  font-family: 'Lobster', serif;
  color: rgba(225,226,227,0.06);
  line-height: 1; display: block;
}
.sec-title {
  font-family: 'Lobster', serif;
  font-size: clamp(28px, 4vw, 48px);
  color: #959581; letter-spacing: 0.02em;
  margin-top: -12px;
}
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 4px; }
.filter-pill {
  padding: 8px 18px;
  border: 1px solid rgba(149,149,129,0.25);
  background: transparent;
  color: rgba(225,226,227,0.5);
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; transition: all 0.25s;
  /* Sharp — no border-radius */
}
.filter-pill:hover { border-color: #959581; color: #E1E2E3; }
.filter-pill.active { background: #3F4634; border-color: #3F4634; color: #E1E2E3; }

.masonry-grid {
  columns: 3; column-gap: 12px;
}
.masonry-item {
  break-inside: avoid; margin-bottom: 12px;
  position: relative; overflow: hidden; cursor: pointer;
}
.img-ph {
  background: #2a2118;
  display: flex; align-items: center; justify-content: center;
  color: rgba(149,149,129,0.25);
  font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
  transition: transform 0.4s;
}
.masonry-item:hover .img-ph { transform: scale(1.03); }
.img-ph.h-sm  { height: 160px; }
.img-ph.h-md  { height: 240px; }
.img-ph.h-lg  { height: 320px; }
.img-ph.h-xl  { height: 420px; }
.img-ov {
  position: absolute; inset: 0;
  background: rgba(27,22,17,0.6);
  display: flex; align-items: flex-end; padding: 12px;
  opacity: 0; transition: opacity 0.3s;
}
.masonry-item:hover .img-ov { opacity: 1; }
.img-ov span { font-size: 0.65rem; letter-spacing: 0.15em; color: #E1E2E3; }
.masonry-item-button {
  break-inside: avoid; margin-bottom: 12px;
  position: relative; overflow: hidden; cursor: pointer;
}

/* ── PROJECTS ── */
#projects { position: relative; z-index: 1; padding: 80px 52px; }
.sec-head {
  display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: 40px;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s, transform 0.6s;
}
.sec-head.visible { opacity: 1; transform: none; }
.projects-list { display: flex; flex-direction: column; }
.project-row {
  display: flex; align-items: center; gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(149,149,129,0.1);
  cursor: pointer;
  transition: background 0.25s, padding-left 0.25s;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 0.5s, transform 0.5s, background 0.25s, padding-left 0.25s;
}
.project-row.visible { opacity: 1; transform: none; }
.project-row:hover { background: rgba(63,70,52,0.3); padding-left: 12px; }
.proj-idx { font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(149,149,129,0.4); flex: 0 0 36px; }
.proj-name { font-size: 1.1rem; color: #E1E2E3; }
.proj-tag { font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(149,149,129,0.45); margin-top: 4px; }
.proj-arrow { margin-left: auto; color: rgba(149,149,129,0.35); font-size: 1.2rem; transition: transform 0.25s, color 0.25s; }
.project-row:hover .proj-arrow { transform: translateX(6px); color: #E1E2E3; }

/* ── REVEAL ── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── MUSIC PORTAL ── */
#music-portal {
  background: #2a2118;
  clip-path: polygon(60px 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%, 0 60px);
  margin-bottom: var(--overlap);
  padding: 100px 52px;
  position: relative;
  z-index: 3;
}
.music-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 860px;
  margin: 0 auto;
}
.music-eyebrow {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(149,149,129,0.55);
  margin-bottom: 10px;
}
.music-title {
  font-family: 'Lobster', serif;
  font-size: clamp(28px, 4vw, 52px);
  color: #E1E2E3;
  line-height: 1.1;
}
.music-title em { color: #959581; font-style: italic; }
.music-desc {
  font-size: 1rem;
  color: rgba(225,226,227,0.5);
  margin-top: 8px;
  line-height: 1.7;
  font-style: italic;
}
@media (max-width: 680px) {
  #music-portal { padding: 60px 24px; clip-path: none; margin-bottom: 0; }
}

/* ── FOOTER ── */
footer#footer-portal {
  background: #1B1611;
  padding: 60px 52px 36px;
  border-top: 1px solid rgba(149,149,129,0.08);
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 32px;
}
.footer-name {
  font-family: 'Lobster', serif;
  font-size: 2.2rem; line-height: 1.1;
  color: rgba(225,226,227,0.6);
}
.footer-name em { color: #959581; font-style: italic; }
.footer-links { display: flex; gap: 28px; list-style: none; }
.footer-links a {
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(149, 149, 129, 0.662); text-decoration: none; transition: color 0.25s;
}
.footer-links a:hover { color: #E1E2E3; }
.footer-copy { font-size: 0.65rem; color: rgba(225,226,227,0.2); letter-spacing: 0.1em; }

/* ── 1. Scroll gallery hint — more legible ── */
.scroll-gallery-hint {
  /* Override the existing rgba(149,149,129,0.3) — bump opacity significantly */
  color: rgba(149, 149, 129, 0.72) !important;
}
/* GALLERY CTA */

.gallery-cta-btn {
  margin: auto;
  gap: 14px;
  padding: 20px 36px;
  background: transparent;
  border: 1px solid rgba(149,149,129,0.4);
  color: #E1E2E3;
  font-size: 0.72rem; 
  font-style: italic; 
  letter-spacing: 0.22em; 
  text-transform: uppercase;
  clip-path: polygon(0 0, 94% 0, 100% 18%, 100% 100%, 6% 100%, 0 82%);
}

.gallery-cta-btn .btn-text{
  color: #E1E2E3;
  transition: color 0.3s;
}

#scroll-gallery-portal a {
  text-decoration: none;
  display:  block; 
  justify-content: space-around;
  text-align: center; 
}

/* ── 2. Contact CTA Portal ── */
#contact-cta-portal {
  background:    #3F4E40;
  clip-path:     polygon(60px 0, 100% 0, 100% 100%, 0 100%, 0 60px);
  margin-bottom: -48px;
  padding:       100px 52px 120px;
  position:      relative;
  overflow:      hidden;
  z-index: 5;
}

/* Decorative geo shape */
#contact-cta-portal::before {
  content:   '';
  position:  absolute;
  right:     -60px;
  top:       50%;
  transform: translateY(-50%) rotate(15deg);
  width:     280px;
  height:    280px;
  border:    1px solid rgba(149, 149, 129, 0.12);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
#contact-cta-portal::after {
  content:  '';
  position: absolute;
  left:     52px;
  bottom:   40px;
  width:    60px;
  height:   60px;
  border:   1px solid rgba(149, 149, 129, 0.15);
  transform: rotate(8deg);
}

.contact-cta-inner {
  position:    relative;
  z-index:     1;
  display:     flex;
  align-items: center;
  justify-content: space-around;
  gap:         48px;
  flex-wrap:   wrap;
}

.contact-cta-text {}

.contact-cta-eyebrow {
  display:        block;
  font-size:      0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color:          rgba(149, 149, 129, 0.55);
  margin-bottom:  14px;
}

.contact-cta-heading {
  font-family:    'Lobster', serif;
  font-size:      clamp(36px, 5vw, 62px);
  line-height:    1.05;
  color:          #E1E2E3;
  letter-spacing: -0.01em;
}
.contact-cta-heading em {
  color:      #959581;
  font-style: italic;
}

.contact-cta-sub {
  font-size:   1.25rem;
  font-style:  italic;
  color:       rgba(225, 226, 227, 0.5);
  margin-top:  14px;
  line-height: 1.7;
  max-width:   380px;
}

.contact-cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             14px;
  padding:         20px 36px;
  background:      transparent;
  border:          1px solid rgba(149, 149, 129, 0.4);
  color:           #E1E2E3;
  font-size:       0.72rem;
  font-style:      italic;
  letter-spacing:  0.22em;
  text-transform:  uppercase;
  text-decoration: none;
  clip-path:       polygon(0 0, 94% 0, 100% 18%, 100% 100%, 6% 100%, 0 82%);
  transition:      background 0.3s, border-color 0.3s, color 0.3s;
  flex-shrink:     0;
}
.contact-cta-btn:hover {
  background:   rgba(63, 70, 52, 0.5);
  border-color: #959581;
  color:        #E1E2E3;
}
.contact-cta-btn .btn-arrow {
  font-style:  normal;
  font-size:   1.1rem;
  transition:  transform 0.25s;
}
.contact-cta-btn:hover .btn-arrow { transform: translateX(5px); }

/* Responsive */
@media (max-width: 680px) {
  #contact-cta-portal {
    padding:     60px 24px 80px;
    clip-path:   none;
    margin-bottom: 0;
  }
  .contact-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .masonry-grid { columns: 2; }
  .statement-grid { grid-template-columns: 0 1fr; }
  .statement-grid > div:first-child { display: none; }
}

@media (max-width: 680px) {
  nav { padding: 20px 24px; }
  nav.solid, nav.dark { padding: 14px 24px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: 72px; left: -100%;
    width: 100%; height: 100vh;
    background: #1B1611;
    flex-direction: column; align-items: flex-start;
    padding: 2rem 2rem; gap: 2rem;
    transition: left 0.3s ease; z-index: 1000;
  }
  .nav-links.active { left: 0; }
  .nav-links a { font-size: 18px; }

  #hero { padding: 100px 24px 60px; }
  .hero-content { flex-direction: column; }
  .hero-headshot { width: 80vw; }
  #statement { padding: 60px 24px; }
  .statement-grid { grid-template-columns: 1fr; }
  .statement-grid > div:first-child { display: none; }
  #scroll-gallery { padding: 60px 0 40px 24px; }
  #gallery, #projects { padding: 60px 24px; }
  footer#footer-portal { padding: 40px 24px 28px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .masonry-grid { columns: 1; }

  /* Flatten clip-paths on mobile so nothing gets weirdly cut */
  #hero-portal,
  #statement-portal,
  #scroll-gallery-portal,
  #gallery-portal,
  #projects-portal {
    clip-path: none;
    margin-bottom: 0;
  }
}