/* ==========================================================
   GreenOlivz Studio — index.css
   ========================================================== */

  :root {
    --g1: #0a3625;
    --g2: #0f2e14;
    --g3: #1a4a22;
    --g4: #2d7a3a;
    --g5: #3da854;
    --g6: #5dc470;
    --g7: #8edc9e;
    --g8: #c4f0cc;
    --g9: #e8faea;
    --g10: #0a1a0d;
    --gold: #c9a84c;
    --cream: #f5f0e8;
    --wattle: #ccda47;
  }

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

  html {
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* NOTE: scroll-behavior: smooth intentionally omitted —
         smooth scroll is handled by Lenis library at the bottom */
  }

  body {
    background: var(--g1);
    color: var(--cream);
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden; /* prevent horizontal scroll on mobile */
    cursor: none;       /* hide default cursor — custom one used instead */
    -webkit-font-smoothing: antialiased;    /* smoother text on Mac/iOS */
    -moz-osx-font-smoothing: grayscale;     /* smoother text on Firefox/Mac */
  }

  .index-body{
    background: var(--g10);
  }

  img, video {
    content-visibility: auto;
  }

  /* ─── HERO ─── */
  .hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #040402;
  }

  .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Default (landscape / desktop): fill width, crop height */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 0;
  }

  /* ── Portrait / mobile video ───────────────────────────────
     On any device in portrait orientation the mobile source
     is already preferred by the browser via the <source media>
     attribute. These rules make sure the element itself also
     fills the full viewport height correctly in portrait mode,
     where the video is taller than it is wide.
  ────────────────────────────────────────────────────────── */
  @media (orientation: portrait) {
    .hero-video {
      /* Let height anchor the fill so the tall video covers
         the full screen without cropping top/bottom */
      width: auto;
      height: 100%;
      min-width: 100%;
      object-fit: cover;
      object-position: center top;
    }
  }

  /* Narrow portrait phones — anchor to top so faces/subjects
     in the top portion of the mobile video stay in frame */
  @media (orientation: portrait) and (max-width: 480px) {
    .hero-video {
      object-position: center top;
    }
  }

  /* Pause hero video for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .hero-video {
      animation: none;
      display: none;
    }
  }

  /* ==========================================================
     NAVIGATION — desktop bar + hamburger + panel overlay
     ========================================================== */

  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
  }

  nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 26, 13, 0.95), transparent);
    pointer-events: none;
  }

  .nav-logo {
    width: 12vw;
    height: 8vh;
    position: relative;
    z-index: 1;
  }

  .nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .nav-links {
    display: flex;
    gap: 3rem;
    list-style: none;
    position: relative;
    z-index: 1;
  }

  .nav-links a {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--g8);
    text-decoration: none;
    opacity: 0.7;
    -webkit-transition: opacity 0.3s, color 0.3s;
    transition: opacity 0.3s, color 0.3s;
  }

  .nav-links a:hover, .nav-links a.active {
    opacity: 1;
    color: var(--g6);
  }

  /* Hamburger button — 3 horizontal lines that animate to an X */
  .hamburger {
    display: none; /* shown only on mobile via media query below */
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: none;
    padding: 4px;
    position: relative;
    z-index: 1001;
  }

  .hamburger span {
    display: block;
    width: 26px;
    height: 1.5px;
    background: var(--g7);
    -webkit-transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, width 0.3s;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, width 0.3s;
    transform-origin: center;
  }

  .hamburger.open span:nth-child(1) { transform: translateY(7.5px)  rotate(45deg);  }
  .hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Overlay — display:none removes from render tree, no GPU cost when closed */
  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
  }

  .nav-overlay.open {
    display: block;
    pointer-events: all;
  }

  /* Backdrop */
  .nav-backdrop {
    position: absolute; inset: 0;
    background: rgba(4, 12, 6, 0.82);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1);
  }

  .nav-overlay.open .nav-backdrop { opacity: 1; }

  /* Slide-in panel */
  .nav-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(400px, 85vw);
    background: #060d07;
    border-left: 1px solid rgba(93, 196, 112, 0.12);
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem;
    transform: translateX(100%);
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
    overflow: hidden;
  }

  .nav-panel::-webkit-scrollbar { display: none; }
  .nav-overlay.open .nav-panel { transform: translateX(0); }

  .nav-panel::before {
    content: ''; position: absolute; top: -80px; left: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(45,122,58,0.18) 0%, transparent 70%);
    pointer-events: none;
  }

  .nav-close {
    position: absolute; top: 1.5rem; right: 1.5rem;
    width: 38px; height: 38px;
    background: none; border: 1px solid rgba(93,196,112,0.18);
    cursor: none; display: flex; align-items: center; justify-content: center;
    color: rgba(142,220,158,0.5);
    transition: border-color 0.3s, color 0.3s; padding: 0;
  }

  .nav-close:hover { border-color: rgba(93,196,112,0.5); color: var(--g6); }

  .nav-panel-label {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.48rem; letter-spacing: 0.55em; text-transform: uppercase;
    color: var(--g5); margin-bottom: 1.5rem; margin-top: 2rem;
    display: flex; align-items: center; gap: 0.8rem;
  }

  .nav-panel-label::before { content: ''; width: 24px; height: 1px; background: var(--g5); }

  .nav-overlay-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .nav-overlay-links::-webkit-scrollbar { display: none; }

  .nav-overlay-links li { border-bottom: 1px solid rgba(93,196,112,0.07); }
  .nav-overlay-links li:first-child { border-top: 1px solid rgba(93,196,112,0.07); }

  .nav-overlay-links a {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 0;
    text-decoration: none;
    position: relative;
    transition: padding-left 0.3s ease;
  }

  .nav-overlay-links a:hover { padding-left: 0.5rem; }

  .nav-overlay-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--g5);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }

  .nav-overlay-links a:hover::before { transform: scaleY(1); }

  .nav-link-num {
    font-family: 'Cormorant Garamond', serif; font-size: 0.85rem;
    font-style: italic; color: rgba(93,196,112,0.35); min-width: 1.8rem;
    transition: color 0.3s;
  }

  .nav-overlay-links a:hover .nav-link-num { color: var(--g5); }

  .nav-link-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 300; font-style: italic;
    color: var(--wattle); flex: 1; transition: color 0.3s;
  }

  .nav-overlay-links a:hover .nav-link-text,
  .nav-overlay-links a.active .nav-link-text { color: var(--g6); }

  .nav-link-arrow {
    color: rgba(93,196,112,0.25); flex-shrink: 0;
    transition: color 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }

  .nav-overlay-links a:hover .nav-link-arrow { color: var(--g6); transform: translateX(4px); }

  .nav-panel-rule {
    height: 1px;
    background: linear-gradient(to right, rgba(93,196,112,0.15), transparent);
    margin: 2rem 0 1.5rem;
  }

  .nav-panel-foot { display: flex; justify-content: space-between; align-items: center; }

  .nav-panel-tagline {
    font-family: 'Syncopate', sans-serif; font-size: 0.38rem;
    letter-spacing: 0.35em; text-transform: uppercase; color: rgba(142,220,158,0.2);
  }

  .nav-year {
    font-family: 'Cormorant Garamond', serif; font-size: 0.9rem;
    font-style: italic; color: rgba(93,196,112,0.2);
  }

  @media (max-width: 1024px) { nav { padding: 1.6rem 2.5rem; } .nav-links { gap: 1.5rem; } }
  @media (max-width: 768px)  { nav { padding: 1.4rem 1.8rem; } .hamburger { display: flex; } .nav-links { display: none; } }
  @media (max-width: 480px)  { nav { padding: 1.2rem 1.4rem; } .nav-panel { padding: 2.5rem 2rem 2rem; } }

  /* ─── SERVICES ─── */
  .services {
    padding: 10rem 6rem;
    position: relative;
    overflow: hidden;
  }

  .services::before {
    content: '';
    position: absolute;
    top: 0; right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(45,122,58,0.2) 0%, transparent 70%);
    pointer-events: none;
  }

  .section-label {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.5em;
    color: var(--g5);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .section-label::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--g5);
    flex-shrink: 0;
  }

  .services-header {
    max-width: 700px;
    margin-bottom: 6rem;
  }
  .services-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--wattle);
  }
  .services-title em {
    font-style: italic;
    color: var(--g6);
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    position: relative;
  }

  .service-card {
    position: relative;
    padding: 3rem 2.5rem;
    background: var(--g2);
    overflow: hidden;
    cursor: none;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .service-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(135deg, rgba(45,122,58,0.15), transparent);
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
  }
  .service-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(to right, var(--g5), var(--g6));
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .service-card:hover { -webkit-transform: translateY(-4px) scale(1.01); transform: translateY(-4px) scale(1.01); }
  .service-card:hover::before { opacity: 1; }
  .service-card:hover::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

  .card-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4rem;
    font-weight: 300;
    color: rgba(93,196,112,0.15);
    line-height: 1;
    margin-bottom: 2rem;
    transition: color 0.4s;
  }
  .service-card:hover .card-num { color: rgba(93,196,112,0.4); }

  .card-icon {
    margin-bottom: 1.5rem;
    color: var(--g5);
  }

  .card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 2.5vw, 2.3rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--wattle);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
  }

  .card-title em { 
    font-style: italic;
    color: var(--g6);
  }
  
  .card-desc {
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(196,240,204,0.6);
    position: relative;
    z-index: 1;
  }

  /* ── Hero Top Bar ── */
  .hero-top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 4rem;
    border-bottom: 1px solid rgba(93,196,112,0.1);
    background: linear-gradient(to bottom, rgba(4,10,5,0.75), transparent);
    opacity: 0;
    -webkit-animation: fadeUp 0.8s ease forwards 0.4s;
    animation: fadeUp 0.8s ease forwards 0.4s;
  }
  .hero-top-label {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.52rem;
    letter-spacing: 0.45em;
    color: var(--g5);
    text-transform: uppercase;
  }
  .hero-top-year {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.52rem;
    letter-spacing: 0.4em;
    color: rgba(142,220,158,0.35);
    text-transform: uppercase;
  }

  /* ── Hero Center ── */
  /* ── Hero: full-height flex column, space-between ── */
  .hero-content {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8rem 5rem 4rem;
  }

  /* Title sits in the middle via flex growth */
  .hero-title-wrap {
    width: 100%;
    min-width: 0;
  }

  /* Bottom bar */
  .hero-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 2rem;
    border-top: 1px solid rgba(93,196,112,0.1);
    opacity: 0;
    -webkit-animation: fadeUp 0.8s ease forwards 1s;
    animation: fadeUp 0.8s ease forwards 1s;
  }

  /* Slide up from below + fade in (used for hero title) */
  @-webkit-keyframes slideUp {
    to { opacity: 1; -webkit-transform: translateY(0); }
  }
  @keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
  }
  @-webkit-keyframes fadeUp {
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
  }
  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-sub {
    font-size: clamp(0.78rem, 1.2vw, 0.95rem);
    font-weight: 300;
    color: rgba(196,240,204,0.45);
    line-height: 1.7;
    max-width: 220px;
  }
  .hero-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
  .btn-primary {
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--g4), var(--g5));
    color: var(--cream);
    font-family: 'Syncopate', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(135deg, var(--g5), var(--g6));
    opacity: 0;
    transition: opacity 0.4s;
  }
  .btn-primary:hover::before { opacity: 1; }
  .btn-primary:hover { transform: translateY(-2px); }
  .btn-primary span { position: relative; z-index: 1; }

  .btn-secondary {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--g7);
    text-decoration: none;
    border-bottom: 1px solid rgba(142,220,158,0.3);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
    cursor: none;
  }
  .btn-secondary:hover { color: var(--g6); border-color: var(--g6); }

  /* Scroll indicator */
  .scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    -webkit-animation: fadeUp 1s ease forwards 2.5s;
    animation: fadeUp 1s ease forwards 2.5s;
    z-index: 10;
  }
  .scroll-text {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--g5);
    margin-top: 0.6rem;
  }
  .scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, var(--g5), transparent);
    -webkit-animation: scrollPulse 2s ease-in-out infinite;
    animation: scrollPulse 2s ease-in-out infinite;
  }
  @-webkit-keyframes scrollPulse {
    0%, 100% { -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1; }
    50% { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); opacity: 0.5; }
  }
  @keyframes scrollPulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.5); opacity: 0.5; }
  }


  /* ─── MARQUEE ─── */
  .marquee-section {
    padding: 0.5rem 0;
    background: var(--g3);
    overflow: hidden;
    border-top: 1px solid rgba(93,196,112,0.2);
    border-bottom: 1px solid rgba(93,196,112,0.2);
  }
  .marquee-track {
    display: -webkit-flex;
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    will-change: transform;
  }
  .marquee-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 3rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--g7);
    white-space: nowrap;
  }
  .marquee-dot {
    width: 4px; height: 4px;
    background: var(--g5);
    border-radius: 50%;
    flex-shrink: 0;
  }
  @-webkit-keyframes marquee {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }


  /* ─── SHOWCASE ─── */
  .showcase {
    padding: 5rem;
    position: relative;
    overflow: hidden;
    background: rgb(28, 68, 38);
  }

  .showcase-inner {
    padding: 1rem;
    max-width: 100%;
    margin: 0 auto;
  }

  /* ── Bauhaus 3×3 grid ── */
  .showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    gap: 10px;
    margin-top: 4rem;
  }

  .photo-frame {
    position: relative;
    overflow: hidden;
    background: var(--g2);
    cursor: none;
    aspect-ratio: 1 / 1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .photo-frame:hover { transform: scale(0.97); }

  /* Bauhaus border-radius pattern — alternating arch directions */
  .photo-frame:nth-child(1)  { border-radius: 999px 999px 0 999px; }
  .photo-frame:nth-child(2)  { border-radius: 999px 999px 0 0; }
  .photo-frame:nth-child(3)  { border-radius: 999px 999px 999px 0; }
  .photo-frame:nth-child(4)  { border-radius: 999px 0 999px 999px; }
  .photo-frame:nth-child(5)  { border-radius: 50%; }
  .photo-frame:nth-child(6)  { border-radius: 999px 999px 999px 0; }
  .photo-frame:nth-child(7)  { border-radius: 999px 0 999px 999px; }
  .photo-frame:nth-child(8)  { border-radius: 0 0 999px 999px; }
  .photo-frame:nth-child(9)  { border-radius: 0 999px 999px 999px; }

  .frame-bg {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .photo-frame:hover .frame-bg { transform: scale(1.06); }

  /* Lazy load shimmer placeholder */
  .lazy-bg, .lazy-video {
    background-color: var(--g2);
  }
  .lazy-bg:not(.loaded), .lazy-video:not(.loaded) {
    background: linear-gradient(90deg, var(--g2) 25%, var(--g3) 50%, var(--g2) 75%);
    background-size: 200% 100%;
    -webkit-animation: shimmer 1.5s infinite;
    animation: shimmer 1.5s infinite;
  }
  @-webkit-keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Portrait videos in showcase grid */
  .frame-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .photo-frame--video:hover .frame-video { -webkit-transform: scale(1.06); transform: scale(1.06); }

  .frame-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
    background: rgba(10,26,13,0.55);
    opacity: 0;
    transition: opacity 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  .photo-frame:hover .frame-overlay { opacity: 1; }

  .overlay-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--g8);
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .photo-frame:hover .overlay-text { transform: translateY(0); }

  /* Showcase responsive — grid stays 3×3 at all sizes */
  @media (max-width: 1024px) {
    .showcase-inner { padding: 0 2rem; max-width: 100%; }
    .showcase-grid  { grid-gap: 8px; gap: 8px; }
    .showcase { padding: 3rem;  }
  }
  @media (max-width: 768px) {
    .showcase { padding: 1.5rem;  }
  }
  @media (max-width: 480px) {
    .showcase { padding: 1rem;  }
    .showcase-inner { padding: 0 0.5rem; }
    .showcase-grid  { grid-gap: 4px; gap: 4px; }
  }

  /* ─── PROCESS ─── */
  .process {
    padding: 10rem 6rem;
    /* background: var(--g2); */
    background: #141418;
    position: relative;
    overflow: hidden;
  }
  .process::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(135deg, transparent, rgb(37, 37, 41), transparent);
    pointer-events: none;
  }

  .process-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    z-index: 2;
    grid-gap: 8rem;
    gap: 8rem;
    align-items: start;
    position: relative;
  }

  .process-left .services-title { max-width: 100%; }

  .process-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2rem;
  }

  .step {
    display: flex;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(93,196,112,0.1);
    position: relative;
    cursor: none;
    transition: padding-left 0.3s;
  }
  .step:hover { padding-left: 1rem; }

  .step-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--g5);
    min-width: 2rem;
    padding-top: 0.2rem;
  }
  .step-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--cream);
    margin-bottom: 0.5rem;
  }
  .step-desc {
    font-size: 0.78rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(196,240,204,0.5);
  }

  /* ─── PROCESS RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .process { padding: 7rem 3rem; }
    .process-content { grid-template-columns: 1fr; gap: 4rem; }
  }

  @media (max-width: 768px) {
    .process { padding: 5rem 1.8rem; }
    .process-content { gap: 3rem; }
    .step { gap: 1.5rem; padding: 1.5rem 0; }
    .step-title { font-size: 1.2rem; }
    .step-desc { font-size: 0.8rem; }
  }

  @media (max-width: 480px) {
    .process { padding: 4rem 1.2rem; }
    .process-content { gap: 2.5rem; }
    .step { gap: 1rem; padding: 1.2rem 0; }
    .step-num { font-size: 0.9rem; min-width: 1.5rem; }
    .step-title { font-size: 1.1rem; }
    .step-desc { font-size: 0.78rem; line-height: 1.7; }
  }

  /* ─── FOOTER CTA ─── */
  .work-cta {
    padding: 10rem 6rem;
    background: var(--g3);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .work-cta::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: 
      radial-gradient(ellipse 60% 80% at 50% 100%, rgba(10,26,13,0.8), transparent);
    pointer-events: none;
  }

  .cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--wattle);
    margin-bottom: 1.5rem;
    position: relative;
  }
  .cta-title em { font-style: italic; color: var(--g6); }

  .cta-sub {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--g7);
    font-weight: 300;
    margin-bottom: 3rem;
    position: relative;
  }

  /* Footer */
  footer {
    padding: 3rem 6rem;
    background: var(--g1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(93,196,112,0.1);
  }
  .footer-logo {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    color: var(--g5);
  }
  .footer-copy {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: rgba(142,220,158,0.3);
  }

  /* ─── FOOTER RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .work-cta { padding: 7rem 3rem; }
    footer { padding: 2.5rem 3rem; }
  }
  @media (max-width: 768px) {
    .work-cta { padding: 5rem 2rem; }
    footer { padding: 2rem 1.8rem; flex-direction: column; gap: 1rem; text-align: center; }
  }
  @media (max-width: 480px) {
    .work-cta { padding: 4rem 1.2rem; }
    footer { padding: 1.8rem 1.2rem; }
  }
  
  .gradient-border {
    position: relative;
    display: inline-block;
  }
  .gradient-border::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(to right, transparent, var(--g5), var(--g6), transparent);
    animation: borderSlide 3s ease-in-out infinite;
  }
  @keyframes borderSlide {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }

  /* Reveal animation */
  .reveal {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.visible {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  /* ==========================================================
     REELS SECTION
     Cards are 85vh tall with width derived from 9:16 ratio —
     fills the viewport height like dyou.co, feels immersive.
     ========================================================== */

  .reels-section {
    content-visibility: auto;
    padding: 6rem 0 0;
    position: relative;
    overflow: hidden;
    background: #080e09;
    border-top: 1px solid rgba(93, 196, 112, 0.06);
  }

  .reels-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 80% 30%, rgba(45, 122, 58, 0.10) 0%, transparent 65%),
      radial-gradient(ellipse 40% 50% at 10% 70%, rgba(26, 74, 34, 0.15) 0%, transparent 60%);
    pointer-events: none;
  }

  /* ── Header ── */
  .reels-header {
    padding: 0 6rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
  }

  .reels-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    color: var(--wattle);
    margin-bottom: 0.8rem;
  }

  .reels-title em {
    font-style: italic;
    color: var(--g6);
  }

  .reels-sub {
    font-size: clamp(0.78rem, 1vw, 0.88rem);
    font-weight: 300;
    color: rgba(196, 240, 204, 0.38);
    line-height: 1.8;
    max-width: 440px;
  }

  /* ── Track wrapper ── */
  .reels-track-wrap {
    position: relative;
    z-index: 1;
  }

  /* Scrollable strip — padding aligns first card with section header */
  .reels-track {
    display: flex;
    gap: 4px;
    padding: 0 6rem 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }

  .reels-track:active { cursor: grabbing; }
  .reels-track::-webkit-scrollbar { display: none; }

  /* Fade edges */
  .reels-fade-left,
  .reels-fade-right {
    position: absolute;
    top: 0;
    bottom: 4px;
    width: 60px;
    pointer-events: none;
    z-index: 2;
  }

  .reels-fade-left  {
    left: 0;
    background: linear-gradient(to right, #080e09, transparent);
  }

  .reels-fade-right {
    right: 0;
    background: linear-gradient(to left, #080e09, transparent);
  }

  /* ── Reel card ──
     Height = 85vh. Width derived from 9:16 ratio.
     min-width / max-width clamp for extreme viewports.        */
  .reel-card {
    position: relative;
    flex-shrink: 0;
    height: 85vh;
    width: calc(85vh * 9 / 16);
    min-width: 240px;
    max-width: 480px;
    background: #0a0f0b;
    overflow: hidden;
    cursor: none;
    scroll-snap-align: start;
    border: 1px solid rgba(93, 196, 112, 0.06);
    -webkit-transition: border-color 0.35s;
            transition: border-color 0.35s;
  }

  .reel-card:hover {
    border-color: rgba(93, 196, 112, 0.22);
  }

  /* ── Video fills the card ── */
  .reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Prevent browser native drag on the video element */
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;   /* card handles all click/touch events */
  }

  /* ── Paused overlay + icon ── */
  .reel-card.is-paused::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 15, 7, 0.55);
    z-index: 2;
    pointer-events: none;
  }

  .reel-pause-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border: 1.5px solid rgba(196, 240, 204, 0.6);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: rgba(196, 240, 204, 0.85);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    background: rgba(10, 26, 13, 0.35);
  }

  .reel-card.is-paused .reel-pause-icon {
    display: flex;
  }

  /* ── Unmute button — top-right, always visible ── */
  .reel-unmute {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(196, 240, 204, 0.3);
    border-radius: 50%;
    background: rgba(6, 14, 7, 0.6);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    color: rgba(196, 240, 204, 0.7);
    padding: 0;
    opacity: 1;
    -webkit-transition: background 0.3s, border-color 0.3s, color 0.3s;
            transition: background 0.3s, border-color 0.3s, color 0.3s;
  }

  .reel-unmute:hover {
    background:   rgba(26, 74, 34, 0.8);
    border-color: rgba(93, 196, 112, 0.6);
    color:        var(--g6);
  }

  .reel-unmute .icon-muted   { display: block; }
  .reel-unmute .icon-unmuted { display: none;  }

  .reel-unmute.is-unmuted .icon-muted   { display: none;  }
  .reel-unmute.is-unmuted .icon-unmuted { display: block; }

  .reel-unmute.is-unmuted {
    background:   rgba(26, 74, 34, 0.85);
    border-color: rgba(93, 196, 112, 0.55);
    color:        var(--g6);
  }

  /* ── Bottom meta strip ── */
  .reel-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 3rem 1.4rem 1.4rem;
    background: linear-gradient(to top, rgba(4, 10, 5, 0.9) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem;
  }

  .reel-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 300;
    font-style: italic;
    color: rgba(196, 240, 204, 0.9);
    line-height: 1.2;
  }

  .reel-badge {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.4rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--g5);
    border: 1px solid rgba(93, 196, 112, 0.3);
    padding: 0.3rem 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── CTA below the track ── */
  .reels-cta {
    padding: 2rem 6rem 5rem;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
  }

  .reels-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(142, 220, 158, 0.45);
    text-decoration: none;
    -webkit-transition: color 0.3s;
            transition: color 0.3s;
  }

  .reels-link:hover { color: var(--g6); }

  .reels-link svg {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transition:         transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reels-link:hover svg {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }

  /* ── Responsive ── */
  @media (max-width: 1024px) {
    .reels-header { padding: 0 3rem; }
    .reels-track  { padding: 0 3rem 4px; }
    .reels-cta    { padding: 1.5rem 3rem 4rem; }
    .reel-card    { height: 78vh; }
  }

  @media (max-width: 768px) {
    .reels-section { padding: 4rem 0 0; }
    .reels-header  { padding: 0 1.8rem; margin-bottom: 2rem; }
    .reels-track   { padding: 0 1.8rem 4px; gap: 3px; }
    .reels-cta     { padding: 1.2rem 1.8rem 3rem; }
    .reel-card     { height: 72vh; }
  }

  @media (max-width: 480px) {
    .reels-section { padding: 3.5rem 0 0; }
    .reels-header  { padding: 0 1.2rem; }
    .reels-track   { padding: 0 1.2rem 4px; gap: 3px; }
    .reels-cta     { padding: 1rem 1.2rem 2.5rem; }
    .reel-card     { height: 68vh; min-width: 200px; }
  }




  /* ==========================================================
     BEFORE / AFTER — editing showcase
     A single image with a draggable divider revealing the
     before (left) and after (right) versions.
     The divider position is controlled by a range <input>
     whose thumb is hidden — the visible handle is a
     CSS/JS-driven overlay that the user drags.
     ========================================================== */

  .beforeafter-section {
    content-visibility: auto;
    padding: 8rem 6rem;
    position: relative;
    overflow: hidden;
    background: #090f0a;
    border-top: 1px solid rgba(93, 196, 112, 0.07);
  }

  .beforeafter-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 50% 60% at 10% 50%, rgba(26, 74, 34, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 40% 50% at 90% 50%, rgba(45, 122, 58, 0.10) 0%, transparent 60%);
    pointer-events: none;
  }

  /* ── Header ── */
  .ba-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
  }

  .ba-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--wattle);
  }

  .ba-title em {
    font-style: italic;
    color: var(--g6);
  }

  .ba-sub {
    font-size: clamp(0.78rem, 1vw, 0.88rem);
    font-weight: 300;
    color: rgba(196, 240, 204, 0.4);
    line-height: 1.85;
    max-width: 380px;
    text-align: right;
  }

  /* ── Slider container ── */
  .ba-wrap {
    position: relative;
    width: 100%;
    /* aspect-ratio set per image via inline style on .ba-wrap */
    overflow: hidden;
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
    background: var(--g2);
    z-index: 1;
  }

  /* Both images sit absolutely, filling the container */
  .ba-before,
  .ba-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
  }

  /* After image — clipped to the right of the divider */
  .ba-after {
    clip-path: inset(0 0 0 50%);   /* initial 50% — JS overrides */
  }

  /* ── Label badges ── */
  .ba-label {
    position: absolute;
    top: 1.2rem;
    z-index: 3;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.45rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(196, 240, 204, 0.25);
    background: rgba(6, 14, 7, 0.65);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none;
  }

  .ba-label-before {
    left: 1.2rem;
    color: rgba(196, 240, 204, 0.6);
  }

  .ba-label-after {
    right: 1.2rem;
    color: var(--g6);
    border-color: rgba(93, 196, 112, 0.35);
    background: rgba(6, 14, 7, 0.7);
  }

  /* ── Divider line ── */
  .ba-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;                /* initial — JS overrides via transform */
    width: 2px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 4;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  }

  /* ── Drag handle ── */
  .ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;               /* initial — JS overrides */
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(93, 196, 112, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: border-color 0.2s, box-shadow 0.2s;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .ba-wrap:active .ba-handle,
  .ba-wrap.is-dragging .ba-handle {
    border-color: var(--g6);
    box-shadow: 0 2px 24px rgba(93, 196, 112, 0.4);
  }

  .ba-handle svg {
    color: #0a3625;
    flex-shrink: 0;
  }

  /* ── Hint text below ── */
  .ba-hint {
    margin-top: 1.5rem;
    text-align: center;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.42rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(142, 220, 158, 0.25);
    position: relative;
    z-index: 1;
  }

  /* ── Responsive ── */
  @media (max-width: 1024px) {
    .beforeafter-section { padding: 6rem 3rem; }
    .ba-sub { text-align: left; max-width: 100%; }
  }

  @media (max-width: 768px) {
    .beforeafter-section { padding: 4rem 1.8rem; }
    .ba-header { flex-direction: column; align-items: flex-start; }
    .ba-handle  { width: 38px; height: 38px; }
  }

  @media (max-width: 480px) {
    .beforeafter-section { padding: 3.5rem 1.2rem; }
    .ba-handle { width: 32px; height: 32px; }
    .ba-label  { font-size: 0.38rem; padding: 0.3rem 0.6rem; }
  }





/* ==========================================================
   RESTORED MISSING RULES
   ========================================================== */

  .footer-logo-img {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.6;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("./assets/images/hero_bg/final_8.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hero-glass {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(10, 26, 13, 0.4);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    pointer-events: none;
  }

  .live-counter { justify-content: center; width: 100%; }

  .live-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #3da854;
    box-shadow: 0 0 0 0 rgba(61,168,84,0.6);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }

  .live-text {
    font-size: clamp(0.72rem, 1.2vw, 1rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: rgba(142,220,158,0.6);
  }

  .nav-overlay-foot {
    position: absolute;
    bottom: 2.5rem;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.5em;
    color: rgba(142,220,158,0.3);
    text-transform: uppercase;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease 0.5s;
    transition: opacity 0.5s ease 0.5s;
  }

  .noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.07;
    background-image: url('./assets/svg_noise/noisee.svg');
    background-repeat: repeat;
  }

  .process-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle closest-side, rgb(93, 100, 54) 0%, rgba(93, 100, 54, 0.9) 25%, rgba(93, 100, 54, 0.7) 50%, rgba(93, 100, 54, 0.4) 70%, transparent 100%);
    -webkit-filter: blur(8px);
    filter: blur(8px);
    opacity: 0;
    -webkit-transition: opacity 0.35s ease;
    transition: opacity 0.35s ease;
  }

/* ==========================================================
   RULES FROM ORIGINAL INLINE STYLE — responsive & animation
   ========================================================== */

.nav-overlay::before { top: 20%; }

.nav-overlay::after  { bottom: 20%; }

@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(61,168,84,0.6); }
    60%  { box-shadow: 0 0 0 7px rgba(61,168,84,0); }
    100% { box-shadow: 0 0 0 0 rgba(61,168,84,0); }
  }

#viewerCount {
    color: #8edc9e;
    font-weight: 400;
    transition: opacity 0.3s ease;
  }

#viewerCount.updating { opacity: 0; }

.process-glow.active { opacity: 1; }

@media (hover: none) and (pointer: coarse) {
    .process-glow { display: none !important; }
  }

/* ==========================================================
   HERO RESPONSIVE — restored from original inline style
   ========================================================== */

  @media (max-width: 1024px) {
    .hero-content {
      padding: 6.5rem 3rem 6rem;
      align-items: center;
      text-align: center;
    }
    .hero-bottom-bar {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.4rem;
    }
    .hero-sub { max-width: 100%; text-align: center; }
    .hero-bottom-right { align-items: center; width: 100%; }
    .hero-cta-wrap { align-items: center; width: 100%; }
    .live-counter { justify-content: center; width: 100%; }
    .btn-primary { display: block; text-align: center; }
    .btn-primary { padding: 0.7rem 1.6rem; font-size: 0.5rem; letter-spacing: 0.22em; }
    .scroll-indicator { bottom: 1.2rem; }
    .scroll-line { height: 40px; }
    .scroll-text { font-size: 0.7rem; letter-spacing: 0.45em; }
    .live-text { font-size: 0.9rem; }
    .live-dot  { width: 8px; height: 8px; }
  }

  @media (max-width: 768px) {
    .hero-content { padding: 6rem 2rem 6rem; }
    .btn-primary  { padding: 0.65rem 1.4rem; font-size: 0.48rem; letter-spacing: 0.2em; }
  }

  @media (max-width: 480px) {
    .hero-content    { padding: 5.5rem 1.5rem 5.5rem; }
    .btn-primary     { padding: 0.55rem 1.2rem; font-size: 0.45rem; letter-spacing: 0.18em; }
    .scroll-indicator { bottom: 1rem; }
    .scroll-line     { height: 35px; }
    .scroll-text     { font-size: 0.62rem; letter-spacing: 0.4em; }
    .live-text       { font-size: 0.78rem; }
    .live-dot        { width: 7px; height: 7px; }
  }

  /* ─── SERVICES RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .services { padding: 7rem 3rem; }
    .services-header { margin-bottom: 4rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; }
    .service-card { padding: 2.5rem 2rem; }
    .card-num { font-size: 3rem; margin-bottom: 1.5rem; }
    .card-title { font-size: 1.4rem; }
  }

  @media (max-width: 768px) {
    .services { padding: 5rem 1.8rem; }
    .services-header { margin-bottom: 3rem; }
    .services-grid { grid-template-columns: 1fr; gap: 3px; margin: 0 0.8rem; }
    .service-card { padding: 2.2rem 1.8rem; }
    .card-num { font-size: 2.5rem; margin-bottom: 1.2rem; }
    .card-title { font-size: 1.4rem; }
    .card-desc { font-size: 0.82rem; line-height: 1.7; }
  }

  @media (max-width: 480px) {
    .services { padding: 4rem 1.2rem; }
    .service-card { padding: 1.8rem 1.4rem; }
    .card-num { font-size: 2.2rem; margin-bottom: 1rem; }
    .card-title { font-size: 1.3rem; }
    .card-desc { font-size: 0.8rem; }
  }

  /*==========================================================
      CONTACT PAGE HERO
  ========================================================== */
  .contact-hero {
    position: relative;
    min-height: 52vh;
    display: flex;
    align-items: flex-end;
    padding: 0 6rem 5rem;
    overflow: hidden;
  }

  .contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 70% at 90% 30%, rgba(45, 122, 58, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 45% 55% at 0% 100%, rgba(26, 74, 34, 0.3) 0%, transparent 60%);
    pointer-events: none;
  }

/* Decorative large background text — "CONTACT" watermark */
  .contact-hero::after {
    content: 'CONTACT';
    position: absolute;
    bottom: -1rem;
    right: 4rem;
    font-family: 'Anton', sans-serif;
    font-size: clamp(5rem, 15vw, 14rem);
    color: rgba(93, 196, 112, 0.04);
    letter-spacing: 0.1em;
    pointer-events: none;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  .contact-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 11rem;
    width: 100%;
  }

  .hero-eyebrow {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    color: var(--g5);
    text-transform: uppercase;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    -webkit-animation: fadeUp 0.8s ease forwards 0.3s;
    animation: fadeUp 0.8s ease forwards 0.3s;
  }
  .hero-eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--g5);
  }

  .hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.8rem, 9vw, 8rem);
    font-weight: 300;
    line-height: 0.95;
    color: var(--wattle);
    opacity: 0;
    -webkit-transform: translateY(55px);
    transform: translateY(55px);
    -webkit-animation: slideUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
    animation: slideUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
  }
  .hero-title em { font-style: italic; color: var(--g6); }

  .hero-title .gold-word { color: var(--gold); }

  .hero-subtitle {
    margin-top: 2rem;
    font-size: clamp(0.78rem, 1.1vw, 0.9rem);
    font-weight: 300;
    color: rgba(196, 240, 204, 0.45);
    line-height: 1.8;
    max-width: 480px;
    opacity: 0;
    -webkit-animation: fadeUp 0.8s ease forwards 1s;
    animation: fadeUp 0.8s ease forwards 1s;
  }

  .hero-rule {
    position: absolute;
    bottom: 0;
    left: 6rem;
    right: 6rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(93, 196, 112, 0.2), transparent);
  }

  @media (max-width: 1024px) { 
    .contact-hero { padding: 0 3rem 4rem; } 
    .hero-rule { left: 3rem; right: 3rem; } 
    .contact-hero::after { right: 2rem; } 
  }
  @media (max-width: 768px)  { 
    .contact-hero { padding: 0 1.8rem 3.5rem; min-height: 44vh; } 
    .hero-rule { left: 1.8rem; right: 1.8rem; } 
    .contact-hero::after { display: none; } 
  }
  @media (max-width: 480px)  { 
    .contact-hero { padding: 0 1.2rem 3rem; } 
    .hero-rule { left: 1.2rem; right: 1.2rem; }
  }

  /* ==========================================================
      MAIN CONTACT BODY
      Two-column layout: contact details left, map right
      ========================================================== */
  .contact-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
  }

  /* ==========================================================
       LEFT COLUMN — CONTACT DETAILS
       ========================================================== */
    .contact-details {
      padding: 7rem 5rem 7rem 6rem;
      display: flex;
      flex-direction: column;
      gap: 5rem;
      border-right: 1px solid rgba(93, 196, 112, 0.08);
      position: relative;
    }

    /* Subtle green glow top-left */
    .contact-details::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(45, 122, 58, 0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Each contact detail block */
    .detail-block {
      position: relative;
      z-index: 1;
    }

    .detail-label {
      font-family: 'Syncopate', sans-serif;
      font-size: 0.5rem;
      letter-spacing: 0.5em;
      color: var(--g5);
      text-transform: uppercase;
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }
    .detail-label::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--g5);
      flex-shrink: 0;
    }

    /* Icon + value row */
    .detail-row {
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
    }

    .detail-icon {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(93, 196, 112, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--g6);
      margin-top: 0.1rem;
      -webkit-transition: border-color 0.3s, background 0.3s;
      transition: border-color 0.3s, background 0.3s;
    }

    .detail-value {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .detail-main {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.3rem, 2.2vw, 1.8rem);
      font-weight: 300;
      color: var(--wattle);
      line-height: 1.2;
    }

    .detail-sub {
      font-size: 0.75rem;
      font-weight: 300;
      color: rgba(196, 240, 204, 0.4);
      line-height: 1.6;
    }

    /* ==========================================================
       PHONE — interactive link that opens dialler
       href="tel:+XXXXXXXXXXX" triggers the device calling app
       on both mobile and desktop (if a VoIP app is set up).
       ========================================================== */
    .phone-link {
      text-decoration: none;
      display: inline-block;
      position: relative;
    }

    .phone-link .detail-main {
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
    }

    /* Animated underline on hover */
    .phone-link::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--g6);
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: left;
      transform-origin: left;
      -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .phone-link:hover .detail-main {
      color: var(--g6);
    }
   
    .phone-link:hover::after {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
    
    .phone-link:hover .detail-icon {
      border-color: var(--g6);
      background: rgba(93, 196, 112, 0.08);
    }

    /* "Tap to call" indicator badge */
    .call-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.5rem;
      font-family: 'Syncopate', sans-serif;
      font-size: 0.4rem;
      letter-spacing: 0.3em;
      color: rgba(93, 196, 112, 0.5);
      text-transform: uppercase;
    }
    .call-badge-dot {
      width: 5px;
      height: 5px;
      background: var(--g5);
      border-radius: 50%;
      -webkit-animation: livePulse 2s ease-in-out infinite;
      animation: livePulse 2s ease-in-out infinite;
    }

    /* Email link */
    .email-link {
      text-decoration: none;
      display: inline-block;
      position: relative;
    }
    .email-link .detail-main {
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
      word-break: break-all;
    }
    .email-link::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0;
      width: 100%; height: 1px;
      background: var(--g6);
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: left;
      transform-origin: left;
      -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .email-link:hover .detail-main {
      color: var(--g6);
    }
    
    .email-link:hover::after {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
    
    .email-link:hover .detail-icon {
      border-color: var(--g6);
      background: rgba(93, 196, 112, 0.08);
    }


    /* ==========================================================
       AVAILABILITY / TIMING TABLE
       ========================================================== */
    .timing-table {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .timing-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.9rem 0;
      border-bottom: 1px solid rgba(93, 196, 112, 0.07);
    }
    .timing-row:first-child { border-top: 1px solid rgba(93, 196, 112, 0.07); }

    .timing-day {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.78rem;
      font-weight: 300;
      color: rgba(196, 240, 204, 0.5);
      letter-spacing: 0.05em;
    }

    .timing-hours {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      font-weight: 300;
      color: var(--wattle);
    }

    .timing-hours.closed {
      color: rgba(196, 240, 204, 0.25);
      font-style: italic;
    }

    /* Available badge */
    .timing-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Syncopate', sans-serif;
      font-size: 0.38rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--g5);
      border: 1px solid rgba(93, 196, 112, 0.25);
      padding: 0.25rem 0.6rem;
    }
    .timing-badge-dot {
      width: 4px; height: 4px;
      background: var(--g5);
      border-radius: 50%;
      -webkit-animation: livePulse 2s ease-in-out infinite;
      animation: livePulse 2s ease-in-out infinite;
    }


    /* ==========================================================
       SOCIAL LINKS ROW
       ========================================================== */
    .social-row {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      text-decoration: none;
      padding: 0.7rem 1.2rem;
      border: 1px solid rgba(93, 196, 112, 0.15);
      color: rgba(196, 240, 204, 0.5);
      font-family: 'Syncopate', sans-serif;
      font-size: 0.45rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      -webkit-transition: color 0.3s, border-color 0.3s, background 0.3s;
      transition: color 0.3s, border-color 0.3s, background 0.3s;
    }
    .social-link:hover {
      color: var(--g6);
      border-color: rgba(93, 196, 112, 0.5);
      background: rgba(93, 196, 112, 0.05);
    }
    .social-link svg { flex-shrink: 0; }


    /* ==========================================================
       RIGHT COLUMN — MAP
       The map iframe fills the entire right column.
       Replace the src with your actual Google Maps embed URL.
       To get it: Google Maps → Share → Embed a map → copy iframe src
       ========================================================== */
    .contact-map {
      position: relative;
      background: var(--g2);
      min-height: 70vh;
      overflow: hidden;
    }

    .map-iframe {
      width: 100%;
      height: 100%;
      min-height: 70vh;
      border: none;
      display: block;
      /* Desaturate + darken the map to match the dark theme */
      -webkit-filter: grayscale(40%) brightness(0.75) contrast(1.1) saturate(0.6);
      filter: grayscale(40%) brightness(0.75) contrast(1.1) saturate(0.6);
      -webkit-transition: -webkit-filter 0.5s;
      transition: filter 0.5s;
    }

    /* On hover, restore colours for a nice reveal effect */
    .contact-map:hover .map-iframe {
      -webkit-filter: grayscale(0%) brightness(0.9) contrast(1.05) saturate(1);
      filter: grayscale(0%) brightness(0.9) contrast(1.05) saturate(1);
    }

    /* "View larger map" overlay button */
    .map-expand-btn {
      position: absolute;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: rgba(10, 26, 13, 0.85);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(93, 196, 112, 0.25);
      color: var(--g7);
      font-family: 'Syncopate', sans-serif;
      font-size: 0.42rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.7rem 1.1rem;
      -webkit-transition: color 0.3s, border-color 0.3s;
      transition: color 0.3s, border-color 0.3s;
    }
    .map-expand-btn:hover { 
      color: var(--g6);
      border-color: rgba(93, 196, 112, 0.5);
    }

    /* ==========================================================
       CONTACT BODY RESPONSIVE
       ========================================================== */
    @media (max-width: 1024px) {
      .contact-details { padding: 5rem 3rem 5rem 3rem; gap: 4rem; }
    }

    @media (max-width: 768px) {
      /* Stack map below details on mobile */
      .contact-body { grid-template-columns: 1fr; }
      .contact-details { padding: 4rem 1.8rem; border-right: none; border-bottom: 1px solid rgba(93, 196, 112, 0.08); gap: 3.5rem; }
      .contact-map { min-height: 50vh; }
      .map-iframe { min-height: 50vh; }
    }

    @media (max-width: 480px) {
      .contact-details { padding: 3rem 1.2rem; gap: 3rem; }
      .detail-main { font-size: 1.3rem; }
      .social-link { padding: 0.6rem 1rem; font-size: 0.4rem; }
    }

  /* ==========================================================
      KEYFRAME ANIMATIONS
      ========================================================== */
  @-webkit-keyframes slideUp {
    to { opacity: 1; -webkit-transform: translateY(0); }
  }
  @keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
  }

  @-webkit-keyframes fadeUp {
    to { opacity: 1; -webkit-transform: translateY(0); }
  }
  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  @-webkit-keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(61, 168, 84, 0.6); }
    60%  { box-shadow: 0 0 0 5px rgba(61, 168, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 168, 84, 0); }
  }
  @keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(61, 168, 84, 0.6); }
    60%  { box-shadow: 0 0 0 5px rgba(61, 168, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 168, 84, 0); }
  }
  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @keyframes revealLine {
    to { transform: scaleX(1); }
  }

  @keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-8px) rotate(0.5deg); }
    66%       { transform: translateY(4px) rotate(-0.3deg); }
  }

/* ==========================================================
      LAZY PLACEHOLDER SHIMMER
  ========================================================== */
  .lazy-ph {
    background: linear-gradient(90deg, var(--g2) 25%, var(--g3) 50%, var(--g2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    -webkit-animation: shimmer 1.6s infinite;
  }
  .lazy-ph.loaded {
    background: none;
    animation: none;
    -webkit-animation: none;
  }

/* ==========================================================
      ABOUT HERO SECTION
  ========================================================== */
  .about-hero {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    position: relative;
    overflow: hidden;
    background: var(--g1);
  }

  /* Decorative radial glows */
  .about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 55% 70% at 15% 60%, rgba(45,122,58,0.22) 0%, transparent 65%),
      radial-gradient(ellipse 45% 55% at 90% 20%, rgba(26,74,34,0.3) 0%, transparent 60%);
    pointer-events: none;
  }

  /* Thin vertical accent line */
  .about-hero::after {
    content: '';
    position: absolute;
    top: 15%; bottom: 10%;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(93,196,112,0.18), transparent);
    pointer-events: none;
  }

  /* ── Left col — Founder image ── */
  .hero-image-col {
    position: relative;
    height: 100dvh;
    display: flex;
    align-items: flex-end;
    padding: 0 4rem 6rem 6rem;
    z-index: 2;
  }

  .founder-frame {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 3 / 4;
    border-radius: 999px 999px 0 999px;
    overflow: hidden;
    border: 1px solid rgba(93,196,112,0.15);
    box-shadow:
      0 0 80px rgba(45,122,58,0.25),
      inset 0 0 40px rgba(10,26,13,0.4);
    animation: floatSlow 8s ease-in-out infinite;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .founder-frame.loaded {
    animation: floatSlow 8s ease-in-out infinite, none 0s;
  }

  /* Entry animation: fade + slide from left */
  @keyframes heroImageIn {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  .founder-frame {
    animation: heroImageIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s,
                floatSlow 8s ease-in-out 1.5s infinite;
    opacity: 0;
  }

  .founder-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
  }
  .founder-frame:hover img { transform: scale(1.04); }

  /* Corner accent badge */
  .founder-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 80px; height: 80px;
    background: var(--g3);
    border-radius: 50% 0 0 0;
    border-top: 1px solid rgba(93,196,112,0.3);
    border-left: 1px solid rgba(93,196,112,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }
  .founder-badge span {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    color: var(--g6);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding: 0 6px;
  }

  /* ── Right col — Hero text ── */
  .hero-text-col {
    padding: 0 6rem 6rem 4rem;
    padding-top: 12rem;
    position: relative;
    z-index: 2;
  }

  .hero-name {
    font-family: 'Fraunces', serif;
    font-size: clamp(3.2rem, 6vw, 6.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 0.95;
    color: var(--cream);
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(55px);
    animation: slideUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
  }

  .hero-name-last {
    display: block;
    font-weight: 700;
    font-style: normal;
    color: var(--g6);
  }

  .hero-title-line {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(0.6rem, 1vw, 0.8rem);
    letter-spacing: 0.3em;
    color: rgba(142,220,158,0.5);
    text-transform: uppercase;
    margin-top: 1.8rem;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.9s;
  }

  .hero-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: rgba(196,240,204,0.7);
    max-width: 460px;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 1.1s;
  }

  .hero-tagline em {
    font-style: normal;
    color: var(--gold);
  }

  @keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(93, 196, 112, 0.3); }
    50%       { box-shadow: 0 0 0 12px rgba(93, 196, 112, 0); }
  }

  @keyframes borderGlow {
    0%, 100% { border-color: rgba(93, 196, 112, 0.15); }
    50%       { border-color: rgba(93, 196, 112, 0.45); }
  }

  .services-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 6rem;
    overflow: hidden;
  }

  /* Ambient background glows */
  .services-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 70% at 80% 30%, rgba(45, 122, 58, 0.22) 0%, transparent 65%),
      radial-gradient(ellipse 50% 60% at 10% 80%, rgba(26, 74, 34, 0.3) 0%, transparent 60%),
      radial-gradient(ellipse 30% 40% at 50% 50%, rgba(93, 196, 112, 0.04) 0%, transparent 50%);
    pointer-events: none;
  }

   .services-hero-inner {
      position: relative; z-index: 2;
      padding-top: 10rem;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8rem;
      align-items: center;
    }

  /* Decorative grid lines */
    .hero-grid-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    
    .hero-grid-lines::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(93, 196, 112, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 196, 112, 0.04) 1px, transparent 1px);
      background-size: 80px 80px;
    }

    .hero-cta-row {
      margin-top: 3.5rem;
      display: flex;
      align-items: center;
      gap: 2rem;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards 1.1s;
}

  .btn-outline {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.52rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--g7);
    background: none;
    border: 1px solid rgba(93, 196, 112, 0.3);
    padding: 1.1rem 2.2rem;
    cursor: none;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .btn-outline:hover {
    border-color: var(--g6);
    color: var(--g6);
    transform: translateY(-2px); 
  }

  /* Right: Stats panel */
  .hero-right {
    opacity: 0;
    animation: fadeUp 0.9s ease forwards 1.2s;
  }

    .stats-panel {
      border: 1px solid rgba(93, 196, 112, 0.12);
      padding: 3rem;
      position: relative;
      background: rgba(15, 46, 20, 0.3);
      backdrop-filter: blur(20px);
    }
    .stats-panel::before {
      content: ''; position: absolute; top: 0; left: 0;
      width: 60px; height: 2px;
      background: linear-gradient(to right, var(--g5), transparent);
    }
    
    .stats-panel::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 60px;
      height: 2px;
      background: linear-gradient(to left, var(--g5), transparent);
    }

    .stats-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 2.5rem 3rem;
    }

    .stat-item { display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    
    .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.5rem, 4vw, 3.8rem);
      font-weight: 300;
      line-height: 1;
      color: var(--wattle);
    }
    
    .stat-num em {
      font-style: italic;
      color: var(--g6);
      font-size: 0.6em;
    }
    
    .stat-label {
      font-family: 'Syncopate', sans-serif;
      font-size: 0.45rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: rgba(142, 220, 158, 0.4);
    }
    .stat-desc {
      font-size: 0.72rem; font-weight: 300;
      color: rgba(196, 240, 204, 0.3); line-height: 1.6;
    }

    .stats-divider {
      width: 100%; height: 1px;
      background: linear-gradient(to right, transparent, rgba(93, 196, 112, 0.15), transparent);
      margin: 2.5rem 0;
    }

    .trust-strip {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .trust-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--g5);
      flex-shrink: 0;
      animation: pulseGreen 2.5s ease-in-out infinite;
    }
    .trust-text {
      font-size: 0.72rem;
      font-weight: 300;
      color: rgba(196, 240, 204, 0.4);
      line-height: 1.7;
    }

  /* ==========================================================
    HERO RESPONSIVE
    ========================================================== */
    @media (max-width: 1200px) {
      .services-hero-inner { gap: 4rem; }
    }
    @media (max-width: 1024px) {
      .about-hero { grid-template-columns: 1fr; grid-template-rows: auto auto; }
      .about-hero::after { display: none; }
      .hero-image-col {
        height: 70vw; max-height: 480px;
        padding: 12rem 4rem 3rem;
        justify-content: center;
      }
      .founder-frame { max-width: 280px; }
      .hero-text-col { padding: 2rem 4rem 6rem; }
      .services-hero { padding: 0 3rem; }
      .services-hero-inner { grid-template-columns: 1fr; gap: 4rem; padding-top: 8rem; }
    }
    @media (max-width: 768px) {
      .hero-image-col { padding: 11rem 2rem 2rem; height: auto; min-height: 320px; }
      .founder-frame { max-width: 220px; }
      .hero-text-col { padding: 2rem 2rem 5rem; }
      .hero-name { font-size: clamp(2.8rem, 10vw, 4.5rem); }
      .services-hero { padding: 0 1.8rem; min-height: auto; padding-bottom: 4rem; }
      .stats-panel { padding: 2rem; }
    }
    @media (max-width: 480px) {
      .hero-image-col { padding: 10rem 1.4rem 2rem; }
      .hero-text-col { padding: 1.5rem 1.4rem 4rem; }
      .stat-num { font-size: 2.2rem; }
      .services-hero { padding: 0 1.2rem; }
      .hero-cta-row { flex-direction: column; align-items: flex-start; }
    }  

    /* ==========================================================
       SERVICES INTRO
       ========================================================== */
    .services-intro {
      padding: 10rem 6rem 6rem;
      position: relative;
    }
    
    .services-intro-inner {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 10rem; align-items: end;
    }
    
    .intro-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.5rem, 5vw, 5rem);
      font-weight: 300; 
      line-height: 1.05; 
      color: var(--wattle);
    }
    
    .intro-title em { 
      font-style: italic; 
      color: var(--g6); 
    }
    
    .intro-body {
      font-size: clamp(0.8rem, 1.1vw, 0.92rem);
      font-weight: 300; 
      line-height: 2.1;
      color: rgba(196, 240, 204, 0.42);
    }
    
    .intro-body p + p { margin-top: 1.5rem; }

    @media (max-width: 1024px) { .services-intro { padding: 7rem 3rem 4rem; } .services-intro-inner { gap: 4rem; } }
    @media (max-width: 768px)  { .services-intro { padding: 5rem 1.8rem 3rem; } .services-intro-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
    @media (max-width: 480px)  { .services-intro { padding: 4rem 1.2rem 2.5rem; } }

  /* ==========================================================
    SERVICE CARDS GRID
    ========================================================== */
  .services-grid-section {
    padding: 2rem 6rem 10rem;
    position: relative;
  }

  /* Data-driven service grid */
  .services-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5px;
    position: relative;
  }

  /* Each service card */
  .service-page-card {
    position: relative;
    padding: 4rem 3rem;
    background: var(--g2);
    cursor: none;
    overflow: hidden;
    transition: background 0.4s;
    border: 1px solid transparent;
    animation: borderGlow 4s ease-in-out infinite;
  }

  /* Stagger the animation per card */
  .service-page-card:nth-child(1)  { animation-delay: 0s; }
  .service-page-card:nth-child(2)  { animation-delay: 0.4s; }
  .service-page-card:nth-child(3)  { animation-delay: 0.8s; }
  .service-page-card:nth-child(4)  { animation-delay: 1.2s; }
  .service-page-card:nth-child(5)  { animation-delay: 1.6s; }
  .service-page-card:nth-child(6)  { animation-delay: 2.0s; }
  .service-page-card:nth-child(7)  { animation-delay: 2.4s; }
  .service-page-card:nth-child(8)  { animation-delay: 2.8s; }
  .service-page-card:nth-child(9)  { animation-delay: 3.2s; }

  .service-page-card:hover { 
    background: rgba(26, 74, 34, 0.4); 
    border-color: rgba(93, 196, 112, 0.25) !important; 
    animation: none; 
  }

  /* Green glow on hover — large radial */
  .service-page-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(93, 196, 112, 0.1) 0%, transparent 60%);
    opacity: 0; 
    transition: opacity 0.5s;
  }

  .service-page-card:hover::before { opacity: 1; }

  /* Top accent line */
  .service-page-card::after {
    content: '';
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--g5), var(--g6), transparent);
    transform: scaleX(0); 
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .service-page-card:hover::after { 
    transform: scaleX(1); 
  }

  .page-card-icon {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(93, 196, 112, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s, background 0.3s;
  }

  .service-page-card:hover .page-card-icon {
    border-color: rgba(93, 196, 112, 0.5);
    background: rgba(93, 196, 112, 0.06);
  }

  .page-card-icon svg { 
    width: 22px;
    height: 22px;
    stroke: var(--g6);
    fill: none;
    stroke-width: 1.5;
  }

  .card-label {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.46rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--g5);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
  }

  .card-delivers {
    margin-top: 2rem;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .deliver-tag {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(142, 220, 158, 0.45);
    border: 1px solid rgba(93, 196, 112, 0.15);
    padding: 0.3rem 0.7rem;
    transition: color 0.3s, border-color 0.3s;
  }

  .service-page-card:hover .deliver-tag { 
    color: rgba(142, 220, 158, 0.7); 
    border-color: rgba(93, 196, 112, 0.3); 
  }

  .card-link {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.45rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--g5);
    text-decoration: none;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s, transform 0.4s, color 0.3s;
  }

  .service-page-card:hover .card-link { 
    opacity: 1;
    transform: translateX(0);
  }

  .card-link:hover { 
    color: var(--g6); 
  }
  
  .card-link-arrow {
    width: 28px; 
    height: 1px; 
    background: var(--g5);
    position: relative; 
    transition: width 0.3s;
  }

  .card-link:hover .card-link-arrow { 
    width: 40px;
    background: var(--g6);
  }
  
  .card-link-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--g5);
    border-top: 1px solid var(--g5);
    transform: rotate(45deg);
  }
  .card-link:hover .card-link-arrow::after { 
    border-color: var(--g6);
  }

  /* AI card special gold treatment */
  .service-page-card.ai-card .card-label { color: var(--gold); }
  .service-page-card.ai-card .card-title em { color: var(--gold); }
  .service-page-card.ai-card .page-card-icon { border-color: rgba(201, 168, 76, 0.25); }
  .service-page-card.ai-card .page-card-icon svg { stroke: var(--gold); }
  .service-page-card.ai-card::after { background: linear-gradient(to right, var(--gold), rgba(201, 168, 76, 0.3), transparent); }
  .service-page-card.ai-card:hover { border-color: rgba(201, 168, 76, 0.25) !important; }
  .service-page-card.ai-card::before { background: radial-gradient(circle at 30% 40%, rgba(201, 168, 76, 0.08) 0%, transparent 60%); }
  .service-page-card.ai-card .card-link { color: var(--gold); }
  .service-page-card.ai-card .card-link-arrow { background: var(--gold); }
  .service-page-card.ai-card .card-link-arrow::after { border-color: var(--gold); }
  .service-page-card.ai-card:hover .page-card-icon { border-color: rgba(201, 168, 76, 0.5); background: rgba(201, 168, 76, 0.05); }

  .service-page-card.wide-card {
    grid-column: span 2;
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 4rem; 
    align-items: center;
  }

  .wide-card-right {
    position: relative;
    border-left: 1px solid rgba(93, 196, 112, 0.1);
    padding-left: 4rem;
  }

  @media (max-width: 1024px) {
    .services-grid-section { padding: 2rem 3rem 7rem; }
    .services-page-grid { grid-template-columns: repeat(2, 1fr); }
    .service-page-card.wide-card { grid-column: span 2; }
  }
  @media (max-width: 768px) {
    .services-grid-section { padding: 1.5rem 1.8rem 5rem; }
    .service-page-card { padding: 3rem 2rem; }
    .service-page-card.wide-card { grid-column: span 1; grid-template-columns: 1fr; gap: 2rem; }
    .wide-card-right { border-left: none; border-top: 1px solid rgba(93, 196, 112, 0.1); padding-left: 0; padding-top: 2rem; }
  }
  @media (max-width: 480px) {
    .services-page-grid { grid-template-columns: 1fr; }
    .services-grid-section { padding: 1rem 1.2rem 4rem; }
    .service-page-card.wide-card { grid-column: span 1; }
  }

  .process-section {
    padding: 10rem 6rem;
    background: #090f0a;
    position: relative; overflow: hidden;
  }

/* ==========================================================
  WHY CHOOSE US — PROCESS SECTION
  ========================================================== */
  .process-section {
    padding: 10rem 6rem;
    background: #090f0a;
    position: relative; 
    overflow: hidden;
  }
  
  .process-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(26, 74, 34, 0.1), transparent);
    pointer-events: none;
  }
  
  .process-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    align-items: end;
    margin-bottom: 7rem;
  }
  
  .process-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--wattle);
  }
  
  .process-title em { 
    font-style: italic;
    color: var(--g6); 
  }
  
  .process-body {
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 2;
    color: rgba(196, 240, 204, 0.38);
  }
  
  .process-steps2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
  }

  /* Connecting horizontal line */
  .process-steps2::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 26px;
    right: 26px;
    height: 1px;
    background: linear-gradient(to right,
      rgba(93, 196, 112, 0.3),
      rgba(93, 196, 112, 0.15) 50%,
      rgba(93, 196, 112, 0.05));
  }

  .process-step { 
    padding: 0 2rem 0 0;
  }

  .step-num-wrap {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(93, 196, 112, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
    background: #090f0a;
    transition: border-color 0.3s, background 0.3s;
  }
  .process-step:hover .step-num-wrap {
    border-color: rgba(93, 196, 112, 0.6);
    background: rgba(93, 196, 112, 0.06);
  }
  .step-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--g6);
  }
  .step-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--wattle);
    margin-bottom: 1rem;
  }
  .step-desc {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.9;
    color: rgba(196, 240, 204, 0.35);
  }

  @media (max-width: 1024px) {
    .process-section { padding: 7rem 3rem; }
    .process-header { gap: 4rem; }
    .process-steps2 { grid-template-columns: repeat(2, 1fr); gap: 4rem; }
    .process-steps2::before { display: none; }
  }
  @media (max-width: 768px) {
    .process-section { padding: 5rem 1.8rem; }
    .process-header { grid-template-columns: 1fr; gap: 2rem; }
    .process-steps2 { grid-template-columns: 1fr; gap: 3rem; }
  }
  @media (max-width: 480px) {
    .process-section { padding: 4rem 1.2rem; }
  }

  .brand-section {
    padding: 8rem 6rem;
    position: relative;
    border-bottom: 1px solid rgba(93, 196, 112, 0.05);
  }
  .brand-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 50% 80% at 100% 50%, rgba(93, 196, 112, 0.04) 0%, transparent 60%);
    pointer-events: none;
  }
  .brand-header { 
    margin-bottom: 5rem;
  }
  .brand-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--wattle);
  }
  .brand-title em { 
    font-style: italic; 
    color: var(--g6); 
  }

  .proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5px;
  }
  .proof-card {
    padding: 3.5rem;
    background: var(--g2);
    position: relative;
    overflow: hidden;
  }
  .proof-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--g5);
    opacity: 0.5;
  }
  .proof-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 300; 
    font-style: italic;
    line-height: 1.7; 
    color: rgba(196, 240, 204, 0.65);
    margin-bottom: 2.5rem;
  }

  .proof-quote::before {
    content: '\201C';
    font-size: 4rem; 
    color: rgba(93, 196, 112, 0.1);
    display: block; 
    line-height: 0.6; 
    margin-bottom: 1rem;
    font-family: 'Cormorant Garamond', serif;
  }
  .proof-author {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .proof-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(93, 196, 112, 0.2);
    background: linear-gradient(135deg, var(--g3), var(--g4));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.9rem;
    color: var(--g7);
    font-style: italic;
  }
  .proof-name {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.44rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--g7);
  }
  .proof-co {
    font-size: 0.7rem;
    color: rgba(142, 220, 158, 0.35);
  }

  @media (max-width: 1024px) { .brand-section { padding: 6rem 3rem; } .proof-grid { grid-template-columns: 1fr; } }
  @media (max-width: 768px)  { .brand-section { padding: 4rem 1.8rem; } }
  @media (max-width: 480px)  { .brand-section { padding: 3rem 1.2rem; } .proof-card { padding: 2.5rem 2rem; } }
  
/* ==========================================================
      FAQ ACCORDION
      ========================================================== */
  .faq-section {
    padding: 10rem 6rem;
    background: rgba(15, 46, 20, 0.15);
  }
  .faq-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10rem;
    align-items: start;
  }
  .faq-left {
    position: sticky;
    top: 10rem;
  }
  
  .faq-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 300; line-height: 1.05; color: var(--wattle);
    margin-bottom: 2rem;
  }
  .faq-title em { font-style: italic; color: var(--g6); }
  .faq-subtitle {
    font-size: 0.82rem; font-weight: 300;
    line-height: 2; color: rgba(196, 240, 204, 0.38);
    margin-bottom: 3rem;
  }

  .faq-list { display: flex; flex-direction: column; }
  .faq-item {
    border-bottom: 1px solid rgba(93, 196, 112, 0.1);
    overflow: hidden;
  }
  .faq-question {
    width: 100%; background: none; border: none; cursor: none;
    padding: 2rem 0; text-align: left;
    display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  }
  .faq-q-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 300; color: var(--wattle); line-height: 1.3;
    transition: color 0.3s;
  }
  .faq-question:hover .faq-q-text { color: var(--g6); }
  .faq-toggle {
    width: 28px; height: 28px; flex-shrink: 0;
    border: 1px solid rgba(93, 196, 112, 0.25);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.3s, background 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .faq-question:hover .faq-toggle { 
    border-color: rgba(93, 196, 112, 0.5); 
  }
  .faq-item.open .faq-toggle { 
    background: rgba(93, 196, 112, 0.1); 
    border-color: rgba(93, 196, 112, 0.5); 
    transform: rotate(45deg); 
  }
  .faq-toggle svg { width: 12px; height: 12px; stroke: var(--g6); fill: none; stroke-width: 2; transition: transform 0.3s; }
  .faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .faq-item.open .faq-answer { max-height: 400px; }
  .faq-answer-inner {
    padding: 0 0 2rem;
    font-size: 0.82rem; font-weight: 300; line-height: 2;
    color: rgba(196, 240, 204, 0.4);
  }

  @media (max-width: 1024px) { .faq-section { padding: 7rem 3rem; } .faq-inner { gap: 4rem; } }
  @media (max-width: 768px)  { .faq-section { padding: 5rem 1.8rem; } .faq-inner { grid-template-columns: 1fr; } .faq-left { position: static; } }
  @media (max-width: 480px)  { .faq-section { padding: 4rem 1.2rem; } }

  /* Stat chips row */
  .hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 1.5s;
  }

  .stat-chip {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .stat-num2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--g6);
    line-height: 1;
  }

  .stat-divider {
    width: 1px;
    height: 50px;
    background: rgba(93,196,112,0.2);
    align-self: center;
  }

  .bio-section {
    padding: 8rem 6rem;
    position: relative;
    background: #0c1a0e;
    overflow: hidden;
  }

  .bio-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(37,37,41,0.6), transparent);
    pointer-events: none;
  }

  .bio-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 6rem;
    align-items: start;
    position: relative;
    z-index: 2;
  }

  .bio-left .section-label { margin-bottom: 2rem; }

  .bio-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--cream);
  }
  .bio-headline em { font-style: italic; color: var(--g6); }

  .pipeline-row {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .pipeline-step {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.48rem;
    letter-spacing: 0.3em;
    color: var(--g7);
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(93,196,112,0.2);
    white-space: nowrap;
  }

  .pipeline-arrow {
    color: var(--g5);
    font-size: 0.8rem;
    opacity: 0.6;
  }

  /* ==========================================================
    BIO SECTION
  ========================================================== */


  .bio-body {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
  }

  .bio-body p {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    font-weight: 300;
    line-height: 1.95;
    color: rgba(196,240,204,0.55);
  }

  .bio-body p strong {
    color: var(--g7);
    font-weight: 400;
  }

  .bio-highlight {
    padding: 1.8rem 2rem;
    border-left: 2px solid var(--g5);
    background: rgba(45,122,58,0.06);
  }

  .bio-highlight p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
    font-style: italic;
    color: rgba(196,240,204,0.75) !important;
    line-height: 1.7 !important;
  }

  @media (max-width: 1024px) { .bio-section { padding: 6rem 3rem; } .bio-grid { grid-template-columns: 1fr; gap: 3rem; } }
  @media (max-width: 768px)  { .bio-section { padding: 4rem 1.8rem; } }
  @media (max-width: 480px)  { .bio-section { padding: 3rem 1.4rem; } .pipeline-row { gap: 0.4rem; } }

  /* ==========================================================
       SPECIALIZATIONS
  ========================================================== */
  .spec-section {
    padding: 8rem 6rem;
    background: var(--g1);
    position: relative;
    overflow: hidden;
  }

  .spec-section::before {
    content: '';
    position: absolute;
    top: 0; right: -15%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(45,122,58,0.15) 0%, transparent 70%);
    pointer-events: none;
  }

  .spec-header {
    max-width: 640px;
    margin-bottom: 5rem;
    position: relative;
    z-index: 2;
  }

  .spec-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--cream);
  }
  .spec-title em { font-style: italic; color: var(--g6); }

  .spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    position: relative;
    z-index: 2;
  }

  .spec-card {
    position: relative;
    padding: 3rem 2.2rem 2.5rem;
    background: var(--g2);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    cursor: none;
  }

  .spec-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(45,122,58,0.12), transparent);
    opacity: 0;
    transition: opacity 0.4s;
  }

  .spec-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(to right, var(--g5), var(--g6));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  }

  .spec-card:hover { transform: translateY(-6px); }
  .spec-card:hover::before { opacity: 1; }
  .spec-card:hover::after  { transform: scaleX(1); }

  .spec-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.5rem;
    font-weight: 300;
    color: rgba(93,196,112,0.08);
    line-height: 1;
    margin-bottom: 2rem;
    transition: color 0.4s;
  }
  .spec-card:hover .spec-num { color: rgba(93,196,112,0.3); }

  .spec-icon {
    width: 44px; height: 44px;
    border: 1px solid rgba(93,196,112,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--g5);
    transition: border-color 0.3s, background 0.3s;
  }
  .spec-card:hover .spec-icon {
    border-color: rgba(93,196,112,0.5);
    background: rgba(93,196,112,0.08);
  }

  .spec-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--cream);
    margin-bottom: 0.9rem;
    line-height: 1.2;
  }

  .spec-desc {
    font-size: 0.78rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(196,240,204,0.5);
  }

  @media (max-width: 1024px) { .spec-section { padding: 6rem 3rem; } .spec-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 768px)  { .spec-section { padding: 4rem 1.8rem; } }
  @media (max-width: 480px)  { .spec-section { padding: 3rem 1.4rem; } .spec-grid { grid-template-columns: 1fr; } }

  /* ==========================================================
      PHILOSOPHY / OPEN TO WORK
  ========================================================== */
  .philosophy-section {
    padding: 8rem 6rem;
    background: var(--g3);
    position: relative;
    overflow: hidden;
    text-align: center;
  }

  .philosophy-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 110%, rgba(10,26,13,0.85), transparent);
    pointer-events: none;
  }

  .philosophy-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
  }

  .philosophy-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.25;
    color: var(--cream);
    margin-bottom: 1.8rem;
  }

  .philosophy-quote em { font-style: normal; color: var(--g6); }

  .philosophy-sub {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--g7);
    font-weight: 300;
    margin-bottom: 3.5rem;
  }

  .cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  }

  @media (max-width: 1024px) { .philosophy-section { padding: 6rem 3rem; } }
  @media (max-width: 768px)  { .philosophy-section { padding: 5rem 2rem; } }
  @media (max-width: 480px)  { .philosophy-section { padding: 4rem 1.4rem; } .cta-buttons { flex-direction: column; gap: 1.5rem; } }

  .work-hero {
    position: relative;
    min-height: 56vh;
    display: flex;
    align-items: flex-end; /* title sits at the bottom of the hero */
    padding: 0 6rem 5rem;
    overflow: hidden;
  }

  /* Subtle radial glow background — two overlapping ellipses */
  .work-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 55% 70% at 85% 40%, rgba(45, 122, 58, 0.2) 0%, transparent 70%),
      radial-gradient(ellipse 40% 50% at 5% 90%, rgba(26, 74, 34, 0.35) 0%, transparent 60%);
    pointer-events: none;
  }

  .work-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 11rem; /* push content below fixed nav */
    width: 100%;
  }

  /* Small animated label above the title */
  .work-hero-eyebrow {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    color: var(--g5);
    text-transform: uppercase;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    -webkit-animation: fadeUp 0.8s ease forwards 0.3s;
    animation: fadeUp 0.8s ease forwards 0.3s;
  }
  .work-hero-eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--g5);
  }

  .work-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.8rem, 9vw, 8.5rem);
    font-weight: 300;
    line-height: 0.95;
    color: var(--wattle);
    opacity: 0;
    -webkit-transform: translateY(55px);
    transform: translateY(55px);
    -webkit-animation: slideUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
    animation: slideUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
  }
  .work-hero-title em { font-style: italic; color: var(--g6); }

  /* Stats row below the title */
  .work-hero-meta {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 3rem;
    opacity: 0;
    -webkit-animation: fadeUp 0.8s ease forwards 1s;
    animation: fadeUp 0.8s ease forwards 1s;
  }

  .work-hero-sub {
    font-size: clamp(0.78rem, 1.1vw, 0.9rem);
    font-weight: 300;
    color: rgba(196, 240, 204, 0.45);
    line-height: 1.8;
    max-width: 400px;
  }

  .work-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-left: 1px solid rgba(93, 196, 112, 0.2);
    padding-left: 2rem;
    flex-shrink: 0;
  }

  .work-hero-stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--g6);
    line-height: 1;
  }

  .work-hero-stat-label {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.45rem;
    letter-spacing: 0.35em;
    color: rgba(142, 220, 158, 0.45);
    text-transform: uppercase;
  }

  /* Thin decorative line at the bottom of the hero */
  .work-hero-rule {
    position: absolute;
    bottom: 0;
    left: 6rem;
    right: 6rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(93, 196, 112, 0.2), transparent);
  }

  /* Hero responsive */
  @media (max-width: 1024px) {
    .work-hero { padding: 0 3rem 4rem; }
    .work-hero-rule { left: 3rem; right: 3rem; }
  }
  @media (max-width: 768px) {
    .work-hero { padding: 0 1.8rem 3.5rem; min-height: 48vh; }
    .work-hero-meta { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .work-hero-stat { border-left: none; border-top: 1px solid rgba(93, 196, 112, 0.2); padding-left: 0; padding-top: 1.5rem; }
    .work-hero-rule { left: 1.8rem; right: 1.8rem; }
  }
  @media (max-width: 480px) {
    .work-hero { padding: 0 1.2rem 3rem; }
    .work-hero-rule { left: 1.2rem; right: 1.2rem; }
  }

  /* ==========================================================
      FILTER BAR
      A horizontal row of buttons that show/hide category
      sections. NOT sticky — sits in normal document flow so it
      appears below the hero without overlapping the fixed nav.

      HOW IT WORKS:
      - Each button has a data-filter attribute (e.g. "food")
      - Each section has a matching data-cat attribute
      - JavaScript listens for button clicks, removes the "active"
        class from all buttons, adds it to the clicked one, then
        shows/hides sections by toggling display:none
      - The active underline is a ::after pseudo-element that
        scales in via CSS transform when .active is present
      ========================================================== */
  .filter-bar {
    background: rgba(10, 26, 13, 0.96);
    border-bottom: 1px solid rgba(93, 196, 112, 0.1);
    border-top: 1px solid rgba(93, 196, 112, 0.06);
    padding: 0 6rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;               /* buttons wrap to next line on small screens */
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }

  .filter-btn {
    flex-shrink: 0; /* prevent buttons from squishing on small screens */
    font-family: 'Syncopate', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(142, 220, 158, 0.4);
    background: none;
    border: none;
    padding: 1.35rem 1.6rem;
    cursor: none;
    position: relative;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    white-space: nowrap;
  }

  /* Active underline indicator — hidden by default (scaleX 0) */
  .filter-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.6rem;
    right: 1.6rem;
    height: 2px;
    background: var(--g6);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .filter-btn:hover { color: var(--g7); }
  .filter-btn.active { color: var(--g6); }
  /* Scale the underline to full width when active */
  .filter-btn.active::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

  @media (max-width: 1024px) { .filter-bar { padding: 0 2.5rem; } }
  @media (max-width: 768px)  { .filter-bar { padding: 0 0.8rem; } .filter-btn { padding: 1.1rem 0.9rem; font-size: 0.56rem; } }
  @media (max-width: 480px)  { .filter-btn { padding: 1rem 0.7rem; font-size: 0.48rem; letter-spacing: 0.18em; } }

  /*==========================================================
    CATEGORY SECTION SHARED STYLES
    ========================================================== */
  .cat-section {
    padding: 8rem 6rem;
    position: relative;
    border-bottom: 1px solid rgba(93, 196, 112, 0.05);
  }

  /* Alternate background tint on even sections */
  .cat-section:nth-child(even) { background: rgba(15, 46, 20, 0.2); }

  /* Header row: title on left, description on right */
  .cat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4.5rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Large ghosted number — purely decorative, unselectable */
  .cat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 300;
    color: rgba(93, 196, 112, 0.08);
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  .cat-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4.5vw, 3.8rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--wattle);
    margin-top: -0.5rem; /* visually tuck under the cat-num */
  }
  .cat-title em { font-style: italic; color: var(--g6); }

  .cat-desc {
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.9;
    color: rgba(196, 240, 204, 0.4);
    max-width: 320px;
    text-align: right;
  }

  /* Category section responsive */
  @media (max-width: 1024px) {
    .cat-section { padding: 6rem 3rem; }
    .cat-desc { max-width: 260px; }
  }
  @media (max-width: 768px) {
    .cat-section { padding: 4rem 1.8rem; }
    .cat-header { margin-bottom: 2.5rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .cat-desc { text-align: left; max-width: 100%; }
  }
  @media (max-width: 480px) {
    .cat-section { padding: 3rem 1.2rem; }
  }

  /* ==========================================================
    PHOTO ITEM BASE STYLES (.pi)
    Short class name used on all photo/image grid cells. 
  ================================================================
  GreenOlivz Studio
  Gallery page: AI Generated Work — GreenOlivz Studio | Full Project Gallery

  This page shows the full image collection for one work category.
  It is linked from the main work.html page via the "View Full
  Project" button at the bottom of each category section.

  HOW TO ADD AN IMAGE
  ──────────────────
  Inside the .gallery-grid div, copy any existing image block
  and update three things:

    1.  data-bg="..."         → path to the image file
    2.  alt="..."             → descriptive alt text (include
                                "GreenOlivz Studio" for SEO)
    3.  <span class="pi-cap"> → the hover caption text

  The size class controls the aspect ratio:
    .sq     →  1:1  (square)
    .tall   →  3:4  (portrait)
    .port   →  2:3  (tall portrait — use for product bottles)
    .wide   →  4:3  (landscape)
    .cinema →  16:9 (widescreen)

  Add .span2 alongside the size class to make the image span
  2 columns of the grid (creates a wider hero accent image).
  ========================================================== */

  .pi {
    display: block;           /* explicit — ensures aspect-ratio works */
    position: relative;
    overflow: hidden; /* clips the scaled image on hover */
    background: var(--g2);
    cursor: none;
  }

  /* Image fills the container completely */
  .pi img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-transition: -webkit-transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Subtle zoom-in on hover */
  .pi:hover img {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }

  /* Dark gradient overlay that reveals caption on hover */
  .pi-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(5, 15, 7, 0.8) 0%, transparent 55%);
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
    display: flex;
    align-items: flex-end;
    padding: 1.4rem 1.6rem;
  }
  .pi:hover .pi-overlay { opacity: 1; }

  /* Caption text inside the overlay */
  .pi-cap {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--g8);
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pi:hover .pi-cap {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  /* Aspect ratio helpers — define the shape of each grid cell */
  .sq     { aspect-ratio: 1 / 1; }   /* square */
  .tall   { aspect-ratio: 3 / 4; }   /* portrait */
  .port   { aspect-ratio: 2 / 3; }   /* tall portrait (product) */
  .wide   { aspect-ratio: 4 / 3; }   /* landscape */
  .cinema { aspect-ratio: 16 / 9; }  /* widescreen */

    /* ==========================================================
      FEATURED FULL-WIDTH IMAGE
      Used at the top of the Food section as a hero image.
      ========================================================== */
  .featured-wrap { margin-bottom: 6px; }

  .featured {
    position: relative;
    overflow: hidden;
    background: var(--g2);
    cursor: none;
    aspect-ratio: 21 / 9; /* ultra-wide cinematic ratio */
  }

  .featured img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .featured:hover img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }

  /* Bottom gradient scrim for the label */
  .featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 15, 7, 0.65) 0%, transparent 55%);
    z-index: 1;
    pointer-events: none;
  }

  .featured-label {
    position: absolute;
    bottom: 2.2rem;
    left: 2.5rem;
    z-index: 3;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 300;
    font-style: italic;
    color: var(--wattle);
    opacity: 0;
    -webkit-transform: translateY(14px);
    transform: translateY(14px);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.5s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .featured:hover .featured-label {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  @media (max-width: 768px) { .featured { aspect-ratio: 4 / 3; } }
  @media (max-width: 480px) { .featured { aspect-ratio: 3 / 2; } }

  /* ==========================================================
      PHOTO GRIDS
      CSS Grid layouts for each category. Each section uses
      a slightly different column arrangement.
      
      .span2 = a cell that spans 2 columns (wider hero image)
      ========================================================== */
  .grid {
    display: grid;
    gap: 6px;
  }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* A cell that spans 2 columns — used for wide landscape shots */
  .span2 { grid-column: span 2; }

  /* Grid responsive breakpoints */
  @media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .grid-4,
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    /* On small screens, span2 cells revert to 1-col width */
    .span2  { grid-column: span 2; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    /* Single column on very small screens for BTS */
    .grid-bts { grid-template-columns: 1fr; }
  }

  /* ==========================================================
      BEHIND THE SCENES SECTION
      Special darker background + a 2-panel strip layout
      ========================================================== */
  .bts-section {
    padding: 8rem 6rem;
    background: #090f0a;
    position: relative;
    overflow: hidden;
  }

  /* Subtle diagonal gradient overlay */
  .bts-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(26, 74, 34, 0.12), transparent);
    pointer-events: none;
  }

  /* Two-column intro: title left, description right */
  .bts-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    align-items: end;
    margin-bottom: 5rem;
  }

  .bts-body-text {
    font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    font-weight: 300;
    line-height: 1.95;
    color: rgba(196, 240, 204, 0.4);
    margin-top: 1.5rem;
  }

  /* ── BTS video — muted autoplay, fills the container exactly like img ── */
    .bts-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      /* No scale on hover — video motion is already engaging */
      -webkit-user-drag: none;
      user-drag: none;
      pointer-events: none;   /* container handles cursor */
    }

    /* BTS responsive */
    @media (max-width: 1024px) {
      .bts-section { padding: 6rem 3rem; }
      .bts-intro { grid-template-columns: 1fr; gap: 2.5rem; }
    }
    @media (max-width: 768px) {
      .bts-section { padding: 4rem 1.8rem; }
      /* Stack main + side vertically */
      /* Side items go side-by-side when strip is single column */
    }
    @media (max-width: 480px) {
      .bts-section { padding: 3rem 1.2rem; }
    }

  /* ==========================================================
      AI GENERATED CONTENT SECTION
      Distinct visual treatment: lighter tint + gold accents
      to differentiate from photographic work.
      ========================================================== */
  .ai-section {
    padding: 8rem 6rem;
    background: rgba(12, 22, 14, 0.95);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(93, 196, 112, 0.05);
  }

  /* Diagonal accent gradient */
  .ai-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 100% 0%, rgba(201, 168, 76, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 40% 60% at 0% 100%, rgba(45, 122, 58, 0.12) 0%, transparent 60%);
    pointer-events: none;
  }

  /* Gold tinted section label for AI content */
  .ai-section .section-label {
    color: var(--gold);
  }
  .ai-section .section-label::before {
    background: var(--gold);
  }

  /* AI badge — small tag shown on each AI image */
  .ai-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.38rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.9);
    border: 1px solid rgba(201, 168, 76, 0.35);
    padding: 0.3rem 0.6rem;
    background: rgba(10, 26, 13, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  /* AI intro: title left, info right */
  .ai-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    align-items: end;
    margin-bottom: 4.5rem;
  }

  .ai-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4.5vw, 3.8rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--wattle);
  }
  .ai-title em { font-style: italic; color: var(--gold); }

  .ai-desc {
    font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    font-weight: 300;
    line-height: 1.9;
    color: rgba(196, 240, 204, 0.4);
  }

  /* Disclaimer note below AI grid */
  .ai-disclaimer {
    margin-top: 2.5rem;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.45rem;
    letter-spacing: 0.3em;
    color: rgba(201, 168, 76, 0.35);
    text-transform: uppercase;
    padding-top: 2rem;
    border-top: 1px solid rgba(201, 168, 76, 0.1);
  }

  /* AI responsive */
  @media (max-width: 1024px) { .ai-section { padding: 6rem 3rem; } .ai-intro { gap: 3rem; } }
  @media (max-width: 768px)  { .ai-section { padding: 4rem 1.8rem; } .ai-intro { grid-template-columns: 1fr; gap: 2rem; } }
  @media (max-width: 480px)  { .ai-section { padding: 3rem 1.2rem; } }

  /* ── Category View-All Button ── */
  .cat-view-all {
    display: flex;
    justify-content: flex-end;
    padding: 3rem 0 0;
  }

  .view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 1.8rem;
    padding: 1.6rem 2.8rem;
    border: 1px solid rgba(93, 196, 112, 0.2);
    background: rgba(15, 46, 20, 0.4);
    text-decoration: none;
    cursor: none;
    position: relative;
    overflow: hidden;
    -webkit-transition: border-color 0.4s, background 0.4s, -webkit-transform 0.4s cubic-bezier(0.16,1,0.3,1);
    transition: border-color 0.4s, background 0.4s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .view-all-btn::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(93,196,112,0.06), transparent);
    -webkit-transition: left 0.5s ease;
    transition: left 0.5s ease;
  }
  .view-all-btn:hover { border-color: rgba(93,196,112,0.5); background: rgba(26,74,34,0.5); -webkit-transform: translateY(-2px); transform: translateY(-2px); }
  .view-all-btn:hover::before { left: 100%; }

  .view-all-label {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.60rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--g7);
    -webkit-transition: color 0.3s; transition: color 0.3s;
  }
  .view-all-btn:hover .view-all-label { color: var(--g6); }

  .view-all-meta {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 300;
    color: rgba(142,220,158,0.4);
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }

  .view-all-btn:hover .view-all-meta { color: rgba(142,220,158,0.7); }

  .view-all-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(93,196,112,0.2);
    color: var(--g6);
    flex-shrink: 0;
    -webkit-transition: border-color 0.3s, background 0.3s, -webkit-transform 0.4s cubic-bezier(0.16,1,0.3,1);
    transition: border-color 0.3s, background 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .view-all-btn:hover .view-all-arrow { border-color: var(--g6); background: rgba(93,196,112,0.1); -webkit-transform: translateX(4px); transform: translateX(4px); }
  
  /* AI section variant — gold */
  .ai-section .view-all-btn { border-color: rgba(201,168,76,0.2); background: rgba(20,16,5,0.5); }
  .ai-section .view-all-btn:hover { border-color: rgba(201,168,76,0.5); background: rgba(40,30,5,0.6); }
  .ai-section .view-all-label, .ai-section .view-all-arrow { color: var(--gold); }
  .ai-section .view-all-btn:hover .view-all-label { color: var(--gold); }
  .ai-section .view-all-arrow { border-color: rgba(201,168,76,0.2); color: var(--gold); }
  .ai-section .view-all-btn:hover .view-all-arrow { border-color: var(--gold); background: rgba(201,168,76,0.08); }

  @media (max-width: 768px) {
    .cat-view-all { justify-content: stretch; }
    .view-all-btn { width: 100%; justify-content: space-between; padding: 1.4rem 1.8rem; }
  }
  @media (max-width: 480px) {
    .view-all-meta { display: none; }
    .view-all-btn { gap: 1rem; }
  }

  /* ==========================================================
      GALLERY HERO
      ========================================================== */
  .gallery-hero {
    position:    relative;
    min-height:  52vh;
    display:     flex;
    align-items: flex-end;
    padding:     0 6rem 5rem;
    overflow:    hidden;
    background:  var(--g1);
  }

  /* Ambient radial glow behind hero content */
  .gallery-hero::before {
    content:  '';
    position: absolute;
    inset:    0;
    background:
      radial-gradient(ellipse 55% 65% at 85% 30%, rgba(45, 122, 58, 0.20) 0%, transparent 65%),
      radial-gradient(ellipse 40% 50% at  5% 85%, rgba(26,  74, 34, 0.35) 0%, transparent 60%);
    pointer-events: none;
  }

  /* ← Back to Showcase link */
  .back-link {
    display:     inline-flex;
    align-items: center;
    gap:         0.7rem;
    margin-bottom: 2.5rem;
    font-family:    'Syncopate', sans-serif;
    font-size:      0.5rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color:          rgba(142, 220, 158, 0.5);
    text-decoration: none;
    -webkit-transition: color 0.3s;
            transition: color 0.3s;
    /* Entrance */
    opacity:   0;
    -webkit-animation: fadeUp 0.7s ease forwards 0.2s;
            animation: fadeUp 0.7s ease forwards 0.2s;
  }

  .back-link:hover { color: var(--g6); }

  .back-link svg {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .back-link:hover svg { -webkit-transform: translateX(-4px); transform: translateX(-4px); }

  /* Category label with leading line */
  .hero-label {
    font-family:    'Syncopate', sans-serif;
    font-size:      0.55rem;
    letter-spacing: 0.5em;
    color:          var(--g5);
    text-transform: uppercase;
    margin-bottom:  1.5rem;
    display:        flex;
    align-items:    center;
    gap:            1rem;
    opacity:   0;
    -webkit-animation: fadeUp 0.7s ease forwards 0.3s;
            animation: fadeUp 0.7s ease forwards 0.3s;
  }

  .hero-label::before {
    content:    '';
    width:      40px;
    height:     1px;
    background: var(--g5);
    flex-shrink: 0;
  }

  .hero-desc {
    font-size:   clamp(0.78rem, 1.1vw, 0.9rem);
    font-weight: 300;
    color:       rgba(196, 240, 204, 0.45);
    line-height: 1.85;
    max-width:   520px;
  }

  /* Large ghost count — decorative, screen-reader hidden */
  .gi-count {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(4rem, 8vw, 7rem);
    font-weight: 300;
    color:       rgba(93, 196, 112, 0.07);
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
  }

  /* ==========================================================
    BTS SPECIAL LAYOUT
    2/3 main image + 1/3 stacked side panel
    ========================================================== */
  .bts-strip {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap:     6px;
    margin-bottom: 6px;
  }

  .bts-main {
    position:     relative;
    overflow:     hidden;
    background:   var(--g2);
    cursor:       none;
    aspect-ratio: 16 / 10;
  }

  .bts-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
  }

  .bts-side-item {
    position:     relative;
    overflow:     hidden;
    background:   var(--g2);
    cursor:       none;
    aspect-ratio: 4 / 3;
  }

  .bts-main img,
  .bts-side-item img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    -webkit-transition: -webkit-transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
            transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .bts-main:hover img,
  .bts-side-item:hover img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }

  /* Play button ring — appears on hover over BTS images */
  .bts-play {
    position:   absolute;
    inset:      0;
    z-index:    2;
    display:    flex;
    align-items:     center;
    justify-content: center;
    opacity:    0;
    -webkit-transition: opacity 0.35s;
            transition: opacity 0.35s;
  }

  .bts-main:hover .bts-play,
  .bts-side-item:hover .bts-play { opacity: 1; }

  .bts-play-ring {
    width:  52px;
    height: 52px;
    border: 1.5px solid rgba(196, 240, 204, 0.75);
    border-radius: 50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    background: rgba(10, 26, 13, 0.25);
  }

  .bts-play-ring svg {
    color:       var(--g8);
    margin-left: 3px;  /* optical centering of play triangle */
  }

  /* BTS responsive */
  @media (max-width: 768px) {
    .bts-strip        { grid-template-columns: 1fr; }
    .bts-side         { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
    .bts-main         { aspect-ratio: 16 / 9; }
  }

  @media (max-width: 480px) {
    .bts-side { grid-template-columns: 1fr; }
  }

  /* ==========================================================
      GALLERY SECTION WRAPPER
      ========================================================== */
  .gallery-section {
    padding:  5rem 6rem 10rem;
    position: relative;
  }

  /* ==========================================================
      BACK TO WORK CTA
      ========================================================== */
  .back-section {
    padding:         6rem;
    border-top:      1px solid rgba(93, 196, 112, 0.08);
    display:         flex;
    justify-content: center;
  }

  .back-to-work {
    display:     inline-flex;
    align-items: center;
    gap:         1.5rem;
    padding:     1.4rem 3rem;
    border:      1px solid rgba(93, 196, 112, 0.2);
    background:  rgba(15, 46, 20, 0.4);
    text-decoration: none;
    cursor:      none;
    font-family:    'Syncopate', sans-serif;
    font-size:      0.52rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color:          var(--g7);
    -webkit-transition: border-color 0.4s, background 0.4s,
                        -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            transition: border-color 0.4s, background 0.4s,
                        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .back-to-work:hover {
    border-color: rgba(93, 196, 112, 0.5);
    background:   rgba(26, 74, 34, 0.5);
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }

  .back-to-work svg {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .back-to-work:hover svg {
    -webkit-transform: translateX(-4px);
            transform: translateX(-4px);
  }

  @media (max-width: 1024px) {
    .gallery-hero    { padding: 0 3rem 4rem; }
    .hero-rule       { left: 3rem; right: 3rem; }
    .gallery-section { padding: 4rem 3rem 8rem; }
    .back-section    { padding: 4rem 3rem; }
  }

  @media (max-width: 768px) {
    .gallery-hero    { padding: 0 1.8rem 3.5rem; }
    .hero-rule       { left: 1.8rem; right: 1.8rem; }
    .hero-meta       { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .gi-count        { display: none; }
    .gallery-section { padding: 3rem 1.8rem 6rem; }
    .back-section    { padding: 3rem 1.8rem; }
    footer           { padding: 2.5rem 1.8rem; flex-direction: column; text-align: center; }
  }

  @media (max-width: 480px) {
    .gallery-hero    { padding: 0 1.2rem 3rem; }
    .hero-rule       { left: 1.2rem; right: 1.2rem; }
    .gallery-section { padding: 2.5rem 1.2rem 5rem; }
    .back-section    { padding: 2.5rem 1.2rem; }
    footer           { padding: 2rem 1.2rem; }
  }