:root{--ink-0:#070503;--ink-1:#0C0906;--ink-2:#131009;--ink-3:#1C1710;--ink-4:#251E15;--red:#C8401A;--red-hi:#E05530;--cream:#F0EBE3;--fog:#6B6058;--fog-hi:#9A8E82;--line:rgba(255,255,255,0.055);--line-red:rgba(200,64,26,0.25);}
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{background:var(--ink-1);color:var(--cream);font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.7;overflow-x:hidden;}
    nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:2rem 3.5rem;transition:background .5s,padding .4s;}
    nav.scrolled{background:rgba(7,5,3,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:1.35rem 3.5rem;}
    .logo{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);text-decoration:none;}
    .logo span{color:var(--red);}
    .nav-links{display:flex;gap:2.75rem;list-style:none;}
    .nav-links a{font-size:.65rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fog-hi);text-decoration:none;transition:color .2s;position:relative;}
    .nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--red);transition:width .3s;}
    .nav-links a:hover,.nav-links a.active{color:var(--cream);}
    .nav-links a:hover::after,.nav-links a.active::after{width:100%;}
    .nav-cta{font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-0);background:var(--cream);padding:.65rem 1.5rem;text-decoration:none;transition:background .2s,color .2s;}
    .nav-cta:hover{background:var(--red);color:var(--cream);}

    .page-header-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
    .page-header{padding:14rem 3.5rem 6rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:#060402;}
    .page-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(200,64,26,.06) 0%,transparent 70%);pointer-events:none;}
    .page-header-inner{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:end;}
    .page-header-right{display:flex;align-items:center;justify-content:center;padding-bottom:1rem;}
    .header-pull-quote{font-family:'Cormorant',serif;font-style:italic;font-size:clamp(1.75rem,2.8vw,3rem);font-weight:300;color:rgba(242,237,229,.18);line-height:1.35;text-align:right;border-right:2px solid rgba(200,64,26,.35);padding-right:2rem;}
    @media(max-width:768px){.page-header-inner{grid-template-columns:1fr;}.page-header-right{display:none;}}
    .page-eyebrow{font-size:.82rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:1.75rem;display:flex;align-items:center;gap:.75rem;}
    .page-eyebrow::before{content:'';width:2rem;height:1px;background:var(--red);}
    .page-header h1{font-family:'Cormorant',serif;font-weight:300;font-size:clamp(2.25rem,3.5vw,4.5rem);line-height:1;letter-spacing:-.02em;max-width:16ch;}
    .page-header h1 em{font-style:italic;color:var(--red);}
    .page-header-sub{font-size:.95rem;color:var(--fog-hi);max-width:54ch;margin-top:2.5rem;line-height:1.9;}

    .section-label{display:flex;align-items:center;gap:1rem;font-size:.82rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:2.5rem;}
    .section-label::after{content:'';width:3rem;height:1px;background:var(--line-red);}
    .link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--red);text-decoration:none;margin-top:1.5rem;transition:gap .2s;}
    .link-arrow:hover{gap:.9rem;}
    .btn-primary{display:inline-block;padding:.9rem 2.25rem;background:var(--red);color:var(--cream);font-size:.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .15s;}
    .btn-primary:hover{background:var(--red-hi);transform:translateY(-1px);}
    .btn-ghost{font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--fog-hi);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:color .2s,gap .2s;}
    .btn-ghost:hover{color:var(--cream);gap:.85rem;}

    /* INTRO SPLIT */
    .about-intro{padding:7rem 3.5rem;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start;}
    .about-intro h2{font-family:'Cormorant',serif;font-size:clamp(2rem,3vw,3.25rem);font-weight:300;line-height:1.2;margin-bottom:2rem;}
    .about-intro h2 em{font-style:italic;color:var(--red);}
    .about-intro-right p{font-size:1rem;color:var(--fog-hi);line-height:1.9;margin-bottom:1.1rem;}

    /* PHOTO + STORY */
    .about-story{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);align-items:start;}
    .about-photo{background:var(--ink-3);position:relative;overflow:hidden;}
    .photo-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 40% 60%,rgba(200,64,26,.08) 0%,transparent 70%),linear-gradient(160deg,var(--ink-4) 0%,var(--ink-2) 100%);}
    .photo-placeholder-text{font-family:'Cormorant',serif;font-size:9rem;font-weight:300;color:rgba(255,255,255,.04);user-select:none;position:relative;}
    .photo-caption{position:absolute;bottom:1.5rem;left:1.5rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);opacity:1;z-index:2;background:rgba(7,5,3,.55);padding:.35rem .75rem;}
    .corner{position:absolute;width:22px;height:22px;border-color:var(--red);border-style:solid;opacity:.3;z-index:2;}
    .c-tl{top:2rem;left:2rem;border-width:1px 0 0 1px;}
    .c-tr{top:2rem;right:2rem;border-width:1px 1px 0 0;}
    .c-bl{bottom:2rem;left:2rem;border-width:0 0 1px 1px;}
    .c-br{bottom:2rem;right:2rem;border-width:0 1px 1px 0;}
    .about-story-content{padding:6rem 5rem;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;}
    .about-story-content h2{font-family:'Cormorant',serif;font-size:clamp(2rem,3vw,3.5rem);font-weight:300;line-height:1.2;margin-bottom:1.75rem;}
    .about-story-content h2 em{font-style:italic;color:var(--red);}
    .about-story-content p{font-size:1rem;color:var(--fog-hi);line-height:1.9;margin-bottom:1rem;max-width:46ch;}

    /* WHAT I SEE */
    .what-i-see{padding:7rem 3.5rem;border-bottom:1px solid var(--line);}
    .what-i-see h2{font-family:'Cormorant',serif;font-size:clamp(2rem,3vw,3.5rem);font-weight:300;line-height:1.15;max-width:28ch;margin-bottom:4rem;}
    .what-i-see h2 em{font-style:italic;color:var(--red);}
    .patterns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
    .pattern-item{background:var(--ink-1);padding:2.25rem 2rem;transition:background .25s;}
    .pattern-item:hover{background:var(--ink-3);}
    .pattern-bullet{width:6px;height:6px;background:var(--red);border-radius:50%;margin-bottom:1.25rem;}
    .pattern-item p{font-size:.92rem;color:var(--fog-hi);line-height:1.75;}

    /* PRINCIPLES */
    .principles{background:var(--ink-0);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:7rem 3.5rem;}
    .principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem;}
    .principle-card{background:var(--ink-2);border:1px solid var(--line);padding:2.75rem 2.25rem;position:relative;overflow:hidden;transition:background .3s,transform .25s;}
    .principle-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
    .principle-card:hover{background:var(--ink-3);transform:translateY(-3px);}
    .principle-card:hover::before{transform:scaleX(1);}
    .principle-num{font-family:'Cormorant',serif;font-style:italic;font-size:1.1rem;color:var(--red);opacity:1;margin-bottom:1.5rem;}
    .principle-card h3{font-family:'Cormorant',serif;font-size:1.4rem;font-weight:400;line-height:1.3;margin-bottom:1rem;}
    .principle-card p{font-size:.9rem;color:var(--fog);line-height:1.8;}

    /* NAME */
    .name-origin{padding:8rem 3.5rem;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10rem;align-items:center;}
    .big-word{font-family:'Cormorant',serif;font-size:clamp(4rem,8vw,9rem);font-weight:300;font-style:italic;line-height:1;margin-bottom:-.5rem;display:block;
      background:linear-gradient(105deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.10) 38%,
        rgba(255,255,255,0.22) 47%,
        rgba(200,140,60,0.14) 50%,
        rgba(255,255,255,0.22) 53%,
        rgba(255,255,255,0.10) 62%,
        rgba(255,255,255,0.10) 100%
      );
      background-size:300% 100%;
      background-position:200% center;
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      animation: wordSweep 18s ease-in-out infinite;
    }
    @keyframes wordSweep{
      0%   { background-position: 220% center; }
      35%  { background-position: -20% center; }
      100% { background-position: 220% center; }
    }
    .word-hidden{display:inline-block;animation:wordHide 10s ease-in-out infinite;}
    @keyframes wordHide{
      0%   { opacity: 1; }
      30%  { opacity: 1; }
      48%  { opacity: 0.04; }
      62%  { opacity: 0.04; }
      82%  { opacity: 1; }
      100% { opacity: 1; }
    }
    .name-origin h2{font-family:'Cormorant',serif;font-size:clamp(1.75rem,2.8vw,3rem);font-weight:300;line-height:1.2;}
    .name-origin h2 em{font-style:italic;color:var(--red);}
    .name-origin-right p{font-size:1rem;color:var(--fog-hi);line-height:1.9;margin-bottom:1.1rem;}

    /* CTA */
    .about-cta{position:relative;overflow:hidden;padding:8rem 3.5rem;text-align:center;position:relative;overflow:hidden;}
    .about-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 50% 50%,rgba(200,64,26,.055) 0%,transparent 65%);pointer-events:none;}
    .about-cta h2{font-family:'Cormorant',serif;font-size:clamp(2.5rem,5vw,5.5rem);font-weight:300;line-height:1.1;max-width:22ch;margin:0 auto 1.5rem;}
    .about-cta h2 em{font-style:italic;color:var(--red);}
    .about-cta p{font-size:.9rem;color:var(--fog-hi);max-width:44ch;margin:0 auto 3rem;}
    .cta-actions{display:flex;gap:1.5rem;justify-content:center;align-items:center;}

    footer{background:var(--ink-0);border-top:1px solid var(--line);}
    .footer-inner{padding:4.5rem 3.5rem 0;display:grid;grid-template-columns:5fr 2fr 2fr;gap:5rem;}
    .footer-nav-icon{height:28px;width:auto;display:block;opacity:.9;}
    .footer-logo-link{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-bottom:1rem;}
    .footer-brand .logo{display:block;margin-bottom:.75rem;}
    .footer-brand p{font-family:'Cormorant',serif;font-style:italic;font-size:1.05rem;color:var(--fog);max-width:30ch;line-height:1.6;}
    .footer-col h4{font-size:.6rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:1.5rem;}
    .footer-col ul{list-style:none;}
    .footer-col li{margin-bottom:.7rem;}
    .footer-col a{font-size:.82rem;color:var(--fog-hi);text-decoration:none;transition:color .2s;}
    .footer-col a:hover{color:var(--cream);}
    .footer-bottom{margin-top:3.5rem;padding:1.5rem 3.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
    .footer-bottom p{font-size:.7rem;color:var(--fog);letter-spacing:.04em;}

    .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
    .reveal.visible{opacity:1;transform:translateY(0);}
    .d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.35s;}.d4{transition-delay:.5s;}

    @media(max-width:1024px){
      .about-intro,.about-story,.name-origin{grid-template-columns:1fr;}
      .about-story-content{border-left:none;border-top:1px solid var(--line);padding:4rem 2.5rem;}
      .about-photo{min-height:50vw;}
      .principles-grid{grid-template-columns:1fr 1fr;}
      .patterns-grid{grid-template-columns:1fr 1fr;}
      .footer-inner{grid-template-columns:1fr;gap:2.5rem;}
      .name-origin{gap:3rem;padding:6rem 2.5rem;}
    }
    @media(max-width:768px){
      nav{padding:1.25rem 1.5rem;}
      nav.scrolled{padding:1rem 1.5rem;}
      .nav-links{display:none;}
      .page-header-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
    .page-header{padding:10rem 1.5rem 4rem;}
      .about-intro{padding:5rem 1.5rem;gap:3rem;}
      .what-i-see{padding:5rem 1.5rem;}
      .patterns-grid{grid-template-columns:1fr;}
      .principles{padding:5rem 1.5rem;}
      .principles-grid{grid-template-columns:1fr;}
      .about-cta{position:relative;overflow:hidden;padding:5rem 1.5rem;}
      .cta-actions{flex-direction:column;}
      .footer-inner{padding:3rem 1.5rem 0;}
      .footer-bottom{padding:1.5rem;flex-direction:column;gap:.5rem;text-align:center;}
    }
  
    .logo-link{display:flex;align-items:center;gap:.85rem;text-decoration:none;}
    .nav-icon{height:40px;width:auto;display:block;}

    /* Hero grain texture */
    .hero-bg::after{
      content:'';
      position:absolute;
      inset:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
      opacity:0.025;
      pointer-events:none;
      z-index:1;
    }

  
    .headshot-img{width:100%;height:auto;display:block;object-fit:contain;}

  
    /* MOBILE NAV */
    .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;z-index:600;}
    .hamburger span{display:block;width:24px;height:1.5px;background:var(--cream);transition:transform .3s,opacity .3s;}
    .hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
    .hamburger.open span:nth-child(2){opacity:0;}
    .hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
    .mobile-menu{position:fixed;inset:0;background:var(--ink-0);z-index:550;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;opacity:0;pointer-events:none;transition:opacity .35s ease;}
    .mobile-menu.open{opacity:1;pointer-events:all;}
    .mobile-menu a{font-family:'Cormorant',serif;font-size:clamp(2.5rem,8vw,3.5rem);font-weight:300;color:var(--cream);text-decoration:none;letter-spacing:.05em;transition:color .2s;}
    .mobile-menu a:hover,.mobile-menu a.active{color:var(--red);}
    .mobile-menu .menu-cta{font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-0);background:var(--red);padding:.9rem 2.5rem;margin-top:1rem;}
    .mobile-menu .menu-cta:hover{color:var(--ink-0);background:var(--red-hi);}
    @media(max-width:768px){
      .hamburger{display:flex !important;}
      .nav-links{display:none !important;}
      .nav-cta{display:none !important;}
    }

  
    /* River of light */
    .rl-blob{position:absolute;border-radius:50%;will-change:transform;}
    /* ABOUT: sediment canvas */
      50% {transform:translateY(6%) translateX(-4%);}
      100%{transform:translateY(12%) translateX(5%);}
    }
    
    100%{transform:translateX(12%)}}

  
    /* CTA pulse glow */
    .cta-pulse {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .cta-pulse::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 140%;
      background: radial-gradient(ellipse, rgba(200,64,26,0.14) 0%, rgba(200,64,26,0.06) 40%, transparent 70%);
      animation: ctaPulse 4s ease-in-out infinite;
      border-radius: 50%;
    }
    .cta-pulse::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 40%;
      height: 80%;
      background: radial-gradient(ellipse, rgba(200,64,26,0.1) 0%, transparent 65%);
      animation: ctaPulse 4s ease-in-out infinite reverse;
      animation-delay: -2s;
      border-radius: 50%;
    }
    @keyframes ctaPulse {
      0%   { opacity: 0.4; transform: translate(-50%,-50%) scale(0.92); }
      50%  { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
      100% { opacity: 0.4; transform: translate(-50%,-50%) scale(0.92); }
    }

    /* ABOUT PAGE V1: listening-field treatments */
    .page-header {
      min-height: 82vh;
      display: flex;
      align-items: flex-end;
      isolation: isolate;
    }
    .page-header-inner { position: relative; z-index: 4; width: 100%; }
    .page-header-bg {
      background:
        radial-gradient(ellipse 90% 70% at 70% 42%, rgba(92, 31, 7, .22) 0%, rgba(60, 19, 4, .10) 38%, transparent 70%),
        linear-gradient(170deg, #050302 0%, #090604 48%, #050302 100%);
    }
    .about-hero-field,
    .about-hero-field span {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .about-hero-field {
      overflow: hidden;
      z-index: 1;
    }
    .about-hero-field span {
      border-radius: 50%;
      filter: blur(46px);
      mix-blend-mode: screen;
      opacity: .28;
      will-change: transform, opacity;
    }
    .about-hero-field .ahf-amber {
      width: 72%;
      height: 72%;
      top: 10%;
      left: 38%;
      background: radial-gradient(ellipse, rgba(197, 89, 26, .42) 0%, rgba(119, 45, 10, .19) 42%, transparent 72%);
      animation: aboutFieldDriftA 34s ease-in-out infinite alternate;
    }
    .about-hero-field .ahf-copper {
      width: 60%;
      height: 55%;
      top: 34%;
      left: 52%;
      background: radial-gradient(ellipse, rgba(142, 55, 14, .38) 0%, rgba(82, 27, 7, .16) 48%, transparent 74%);
      animation: aboutFieldDriftB 47s ease-in-out infinite alternate;
    }
    .about-hero-field .ahf-blue {
      width: 46%;
      height: 44%;
      top: 4%;
      left: 68%;
      background: radial-gradient(ellipse, rgba(42, 122, 128, .13) 0%, rgba(22, 72, 84, .07) 44%, transparent 70%);
      animation: aboutFieldDriftC 58s ease-in-out infinite alternate;
    }
    .about-hero-field .ahf-dim {
      width: 95%;
      height: 45%;
      top: 62%;
      left: 12%;
      background: radial-gradient(ellipse, rgba(37, 12, 3, .75) 0%, rgba(17, 7, 3, .32) 45%, transparent 76%);
      mix-blend-mode: normal;
      opacity: .48;
      animation: aboutFieldBreath 38s ease-in-out infinite alternate;
    }
    @keyframes aboutFieldDriftA {
      0% { transform: translate(-4%, 1%) scale(1); opacity: .20; }
      45% { transform: translate(3%, -3%) scale(1.08); opacity: .34; }
      100% { transform: translate(-2%, 5%) scale(1.14); opacity: .24; }
    }
    @keyframes aboutFieldDriftB {
      0% { transform: translate(5%, -2%) scale(.95); opacity: .17; }
      52% { transform: translate(-3%, 4%) scale(1.12); opacity: .31; }
      100% { transform: translate(2%, -1%) scale(1.04); opacity: .20; }
    }
    @keyframes aboutFieldDriftC {
      0% { transform: translate(3%, 2%) scale(.92); opacity: .08; }
      50% { transform: translate(-7%, 4%) scale(1.18); opacity: .18; }
      100% { transform: translate(-2%, -3%) scale(1.02); opacity: .10; }
    }
    @keyframes aboutFieldBreath {
      0% { transform: translateY(2%) scale(1); opacity: .36; }
      50% { transform: translateY(-3%) scale(1.08); opacity: .54; }
      100% { transform: translateY(1%) scale(1.02); opacity: .42; }
    }
    .header-pull-quote {
      position: relative;
      text-shadow: 0 0 28px rgba(200,64,26,.06);
      animation: quoteTune 12s ease-in-out infinite;
    }
    .header-pull-quote::before {
      content: '';
      position: absolute;
      top: 50%;
      right: -2rem;
      width: 2px;
      height: 0%;
      background: linear-gradient(to bottom, transparent, rgba(200,64,26,.78), transparent);
      transform: translateY(-50%);
      animation: quoteSignalLine 8s ease-in-out infinite;
    }
    @keyframes quoteTune {
      0%,100% { color: rgba(242,237,229,.17); }
      50% { color: rgba(242,237,229,.28); }
    }
    @keyframes quoteSignalLine {
      0%, 100% { height: 22%; opacity: .28; }
      45%, 60% { height: 82%; opacity: .7; }
    }

    .about-intro,
    .what-i-see,
    .principles,
    .name-origin,
    .about-cta {
      position: relative;
      overflow: hidden;
    }
    .about-intro::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 34% 50% at 82% 28%, rgba(200,64,26,.045) 0%, transparent 72%),
        linear-gradient(100deg, transparent 0%, rgba(200,64,26,.018) 50%, transparent 100%);
      opacity: .75;
      pointer-events: none;
      animation: introListenField 26s ease-in-out infinite alternate;
    }
    @keyframes introListenField {
      0% { transform: translateX(-2%); opacity: .38; }
      100% { transform: translateX(2%); opacity: .75; }
    }
    .about-intro > * { position: relative; z-index: 2; }

    .about-photo {
      min-height: 100%;
    }
    .about-photo::after {
      content: '';
      position: absolute;
      inset: -12%;
      background:
        radial-gradient(ellipse 70% 65% at 50% 54%, rgba(200,64,26,.12) 0%, rgba(200,64,26,.045) 38%, transparent 72%),
        radial-gradient(ellipse 34% 44% at 82% 18%, rgba(47,119,124,.08) 0%, transparent 70%);
      opacity: .72;
      z-index: 1;
      mix-blend-mode: screen;
      pointer-events: none;
      animation: portraitAfterglow 22s ease-in-out infinite alternate;
    }
    .about-photo .headshot-img,
    .photo-caption,
    .corner { position: relative; z-index: 2; }
    @keyframes portraitAfterglow {
      0% { transform: translate(-1%, 1%) scale(1); opacity: .42; }
      100% { transform: translate(2%, -2%) scale(1.06); opacity: .72; }
    }
    .about-story-content {
      position: relative;
      overflow: hidden;
    }
    .about-story-content::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(200,64,26,.028) 48%, transparent 72%);
      transform: translateX(-35%);
      opacity: .72;
      animation: storyTransmission 19s ease-in-out infinite;
      pointer-events: none;
    }
    .about-story-content > * { position: relative; z-index: 2; }
    @keyframes storyTransmission {
      0%,100% { transform: translateX(-42%); opacity: .2; }
      50% { transform: translateX(18%); opacity: .62; }
    }

    .patterns-grid {
      position: relative;
      background: rgba(255,255,255,.045);
    }
    .pattern-item {
      position: relative;
      overflow: hidden;
      min-height: 175px;
      transition: background .75s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), border-color .65s;
    }
    .pattern-item::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 90% 90% at 40% 22%, rgba(200,64,26,.14) 0%, rgba(200,64,26,.055) 40%, transparent 72%);
      opacity: 0;
      transform: scale(.92);
      transition: opacity .95s ease, transform 1.2s ease;
      pointer-events: none;
    }
    .pattern-item:hover {
      background: #17100b;
      transform: translateY(-2px);
    }
    .pattern-item:hover::before {
      opacity: .95;
      transform: scale(1.05);
    }
    .pattern-item:hover .pattern-bullet {
      box-shadow: 0 0 18px rgba(200,64,26,.72), 0 0 42px rgba(200,64,26,.18);
      transform: scale(1.32);
    }
    .pattern-bullet {
      position: relative;
      z-index: 2;
      transition: transform .45s ease, box-shadow .75s ease;
    }
    .pattern-item p {
      position: relative;
      z-index: 2;
      transition: color .55s ease;
    }
    .pattern-item:hover p { color: var(--cream); }

    .principle-card {
      min-height: 255px;
      transition: background .85s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), border-color .85s ease;
    }
    .principle-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 85% 80% at 25% 20%, rgba(200,64,26,.12) 0%, rgba(200,64,26,.045) 44%, transparent 74%),
        radial-gradient(ellipse 60% 60% at 92% 82%, rgba(35,116,118,.05) 0%, transparent 76%);
      opacity: 0;
      transform: scale(.94);
      transition: opacity .95s ease, transform 1.25s ease;
      pointer-events: none;
    }
    .principle-card:hover {
      border-color: rgba(200,64,26,.22);
      transform: translateY(-4px);
      background: #18110c;
    }
    .principle-card:hover::after {
      opacity: 1;
      transform: scale(1.08);
    }
    .principle-card > * { position: relative; z-index: 2; }
    .principle-card h3 { transition: color .42s ease; }
    .principle-card p { transition: color .55s ease, text-shadow .75s ease; }
    .principle-card:hover h3 { color: var(--red); }
    .principle-card:hover p {
      color: rgba(240,235,227,.94);
      text-shadow: 0 0 16px rgba(200,64,26,.07);
    }

    .name-origin {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(ellipse 70% 82% at 20% 42%, rgba(62, 19, 5, .18) 0%, rgba(32, 10, 3, .10) 42%, transparent 76%),
        radial-gradient(ellipse 44% 58% at 76% 48%, rgba(36, 106, 108, .025) 0%, transparent 74%),
        linear-gradient(180deg, #070503 0%, #050302 100%);
    }

    .name-origin::before {
      content: '';
      position: absolute;
      inset: -24% -14% -14%;
      z-index: 0;
      background:
        radial-gradient(ellipse 48% 54% at 23% 34%, rgba(214, 95, 31, .18) 0%, rgba(142, 48, 12, .084) 38%, transparent 74%),
        radial-gradient(ellipse 32% 38% at 32% 44%, rgba(224, 149, 74, .085) 0%, rgba(91, 31, 8, .038) 48%, transparent 76%),
        radial-gradient(ellipse 30% 44% at 78% 42%, rgba(48,118,124,.045) 0%, transparent 72%);
      opacity: .70;
      filter: blur(18px);
      transform-origin: 28% 42%;
      animation: hiddenOriginGasDrift 32s ease-in-out infinite alternate;
      pointer-events: none;
    }

    .name-origin::after {
      content: '';
      position: absolute;
      left: -8%;
      right: -8%;
      bottom: 4%;
      height: 62%;
      z-index: 1;
      pointer-events: none;
      opacity: .44;
      background:
        repeating-linear-gradient(
          176deg,
          transparent 0px,
          transparent 22px,
          rgba(200, 91, 28, .045) 23px,
          transparent 25px,
          transparent 52px
        ),
        radial-gradient(ellipse 68% 18% at 26% 84%, rgba(200,64,26,.08) 0%, transparent 78%);
      mask-image: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.42) 62%, transparent 100%);
      transform: rotate(-1deg) translateY(2%);
      animation: buriedStrataDrift 24s ease-in-out infinite alternate;
    }

    .name-origin > * { position: relative; z-index: 4; }

    .origin-resonance {
      position: absolute;
      left: -6%;
      right: -6%;
      bottom: 18%;
      height: 1px;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(to right,
        transparent 0%,
        rgba(200,64,26,.045) 18%,
        rgba(228,142,70,.11) 34%,
        rgba(56,132,134,.04) 58%,
        transparent 100%);
      opacity: 0;
      filter: blur(.15px);
      transform-origin: 16% center;
      animation: hiddenResonanceLine 11.5s ease-in-out infinite;
    }
    .origin-resonance.or-2 {
      bottom: 28%;
      opacity: 0;
      animation-delay: -3.8s;
      background: linear-gradient(to right, transparent, rgba(80,154,154,.05), rgba(200,64,26,.075), transparent);
    }
    .origin-resonance.or-3 {
      bottom: 39%;
      opacity: 0;
      animation-delay: -7.4s;
      background: linear-gradient(to right, transparent, rgba(200,64,26,.04), rgba(232,180,119,.07), transparent);
    }

    .word-hidden {
      text-shadow: 0 0 0 rgba(200,64,26,0);
      animation: wordHide 10s ease-in-out infinite, hiddenWordLowGlow 11.5s ease-in-out infinite;
    }

    @keyframes hiddenOriginGasDrift {
      0% {
        transform: translate(-2.2%, 1.8%) scale(1) rotate(-1.2deg);
        opacity: .46;
        filter: blur(20px);
      }
      28% {
        transform: translate(.8%, -.8%) scale(1.045) rotate(.45deg);
        opacity: .66;
        filter: blur(18px);
      }
      52% {
        transform: translate(2.2%, -2.1%) scale(1.095) rotate(1.1deg);
        opacity: .86;
        filter: blur(22px);
      }
      76% {
        transform: translate(-.4%, .4%) scale(1.04) rotate(-.35deg);
        opacity: .62;
        filter: blur(19px);
      }
      100% {
        transform: translate(-1.4%, 2%) scale(1.02) rotate(-1deg);
        opacity: .52;
        filter: blur(21px);
      }
    }

    @keyframes buriedStrataDrift {
      0% { transform: rotate(-1deg) translateX(-1%) translateY(3%); opacity: .24; }
      48% { transform: rotate(-.4deg) translateX(1.5%) translateY(-1%); opacity: .50; }
      100% { transform: rotate(-1.3deg) translateX(.5%) translateY(1%); opacity: .34; }
    }

    @keyframes hiddenResonanceLine {
      0%, 100% { transform: scaleX(.18) translateX(-4%); opacity: 0; }
      22% { transform: scaleX(.42) translateX(0); opacity: .10; }
      40% { transform: scaleX(.86) translateX(1.5%); opacity: .38; }
      58% { transform: scaleX(.54) translateX(3%); opacity: .14; }
      76% { transform: scaleX(.24) translateX(1%); opacity: 0; }
    }

    @keyframes hiddenWordLowGlow {
      0%, 100% { text-shadow: 0 0 0 rgba(200,64,26,0); }
      36%, 50% {
        text-shadow:
          0 0 10px rgba(200,64,26,.18),
          0 0 28px rgba(200,64,26,.08),
          0 0 46px rgba(55,143,142,.035);
      }
      64% { text-shadow: 0 0 14px rgba(200,64,26,.08); }
    }

    @media(max-width:768px){
      .name-origin {
        background:
          radial-gradient(ellipse 88% 58% at 34% 22%, rgba(62, 19, 5, .20) 0%, rgba(32, 10, 3, .10) 42%, transparent 76%),
          radial-gradient(ellipse 54% 46% at 78% 38%, rgba(36, 106, 108, .026) 0%, transparent 74%),
          linear-gradient(180deg, #070503 0%, #050302 100%);
      }
      .name-origin::before {
        inset: -20% -32% 18% -30%;
        background:
          radial-gradient(ellipse 58% 52% at 36% 26%, rgba(214, 95, 31, .205) 0%, rgba(142, 48, 12, .095) 40%, transparent 75%),
          radial-gradient(ellipse 42% 38% at 46% 36%, rgba(224, 149, 74, .09) 0%, rgba(91, 31, 8, .04) 48%, transparent 76%),
          radial-gradient(ellipse 38% 40% at 72% 30%, rgba(48,118,124,.044) 0%, transparent 72%);
        transform-origin: 42% 26%;
        opacity: .76;
        filter: blur(20px);
      }
      .name-origin::after { height: 52%; opacity: .30; }
      .origin-resonance { left: -20%; right: -20%; opacity: .18; }
    }

    @media(max-width:768px){
      .page-header {
        min-height: 84vh;
      }
      .about-hero-field .ahf-amber {
        width: 115%;
        height: 68%;
        top: 16%;
        left: 6%;
      }
      .about-hero-field .ahf-copper {
        width: 96%;
        height: 56%;
        top: 40%;
        left: 12%;
      }
      .about-hero-field .ahf-blue {
        width: 72%;
        height: 40%;
        top: 10%;
        left: 42%;
      }
      .page-header h1 { max-width: 11ch; }
      .pattern-item { min-height: auto; }
      .principle-card { min-height: auto; }
    }



    /* ABOUT V6: visible sediment accumulation without blocking content */
    .sediment-hero-field {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      overflow: hidden;
      mix-blend-mode: screen;
    }
    .sediment-strata {
      position: absolute;
      left: -6%;
      right: -6%;
      bottom: -2%;
      height: 42%;
      opacity: .86;
      filter: blur(.2px);
      transform: translateZ(0);
    }
    .sediment-strata::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      background:
        radial-gradient(ellipse 90% 56% at 60% 100%, rgba(104, 37, 9, .24) 0%, rgba(65, 21, 5, .16) 42%, transparent 76%),
        linear-gradient(to top, rgba(42, 13, 3, .34), rgba(67, 22, 5, .13) 46%, transparent 100%);
      opacity: .92;
      animation: sedimentBedBreath 24s ease-in-out infinite alternate;
    }
    .sed-layer {
      position: absolute;
      left: -4%;
      width: 112%;
      height: 34px;
      border-radius: 55% 45% 50% 50%;
      opacity: 0;
      background:
        linear-gradient(to right,
          transparent 0%,
          rgba(89, 29, 7, .05) 10%,
          rgba(164, 65, 15, .14) 26%,
          rgba(220, 129, 45, .13) 48%,
          rgba(117, 41, 10, .13) 68%,
          rgba(46, 14, 4, .07) 88%,
          transparent 100%);
      box-shadow: 0 0 32px rgba(200, 64, 26, .055);
      transform: translateY(34px) scaleX(.96);
      animation: sedimentLayerSettle 32s ease-in-out infinite;
    }
    .sed-layer-1 { bottom: 1%;  animation-delay: 0s;  height: 42px; }
    .sed-layer-2 { bottom: 8%;  animation-delay: 4s;  height: 30px; opacity: .08; }
    .sed-layer-3 { bottom: 15%; animation-delay: 8s;  height: 28px; }
    .sed-layer-4 { bottom: 22%; animation-delay: 12s; height: 24px; }
    .sed-layer-5 { bottom: 29%; animation-delay: 16s; height: 22px; }
    .sed-layer-6 { bottom: 36%; animation-delay: 20s; height: 18px; }
    .sediment-wash,
    .sediment-wash-cool {
      position: absolute;
      left: -35%;
      bottom: 4%;
      width: 42%;
      height: 46%;
      border-radius: 50%;
      filter: blur(34px);
      transform: translateX(0) scale(.9, .68) rotate(-7deg);
      opacity: 0;
      background: radial-gradient(ellipse,
        rgba(223, 136, 55, .18) 0%,
        rgba(200, 64, 26, .11) 34%,
        rgba(88, 31, 8, .055) 58%,
        transparent 76%);
      animation: sedimentWashPass 18s cubic-bezier(.42,0,.2,1) infinite;
    }
    .sediment-wash-cool {
      width: 36%;
      height: 34%;
      bottom: 15%;
      background: radial-gradient(ellipse,
        rgba(78, 161, 160, .135) 0%,
        rgba(47, 119, 124, .075) 42%,
        transparent 74%);
      animation-delay: .65s;
      filter: blur(42px);
      mix-blend-mode: screen;
    }
    .page-header-right .header-pull-quote {
      animation: quoteTune 12s ease-in-out infinite, sedimentQuoteCoolGlow 18s cubic-bezier(.42,0,.2,1) infinite;
    }
    @keyframes sedimentBedBreath {
      0% { transform: translateY(3%) scaleY(.94); opacity: .56; }
      45% { transform: translateY(-1%) scaleY(1.04); opacity: .92; }
      100% { transform: translateY(1%) scaleY(1); opacity: .72; }
    }
    @keyframes sedimentLayerSettle {
      0%   { opacity: 0; transform: translateY(36px) translateX(-1%) scaleX(.96); }
      20%  { opacity: .13; }
      42%  { opacity: .35; transform: translateY(4px) translateX(1.5%) scaleX(1.01); }
      62%  { opacity: .31; transform: translateY(0) translateX(-1%) scaleX(1.04); }
      82%  { opacity: .18; }
      100% { opacity: 0; transform: translateY(-10px) translateX(2%) scaleX(1.07); }
    }
    @keyframes sedimentWashPass {
      0%, 18%   { opacity: 0; transform: translateX(0) scale(.86,.62) rotate(-7deg); }
      34%       { opacity: .44; }
      52%       { opacity: .58; transform: translateX(150vw) scale(1.15,.78) rotate(4deg); }
      68%       { opacity: .18; }
      100%      { opacity: 0; transform: translateX(185vw) scale(1.35,.92) rotate(6deg); }
    }
    @keyframes sedimentQuoteCoolGlow {
      0%, 42%, 100% {
        color: rgba(242,237,229,.18);
        text-shadow: 0 0 28px rgba(200,64,26,.05);
      }
      54%, 63% {
        color: rgba(196, 230, 221, .44);
        text-shadow:
          0 0 24px rgba(68, 150, 146, .18),
          0 0 54px rgba(54, 125, 132, .10),
          0 0 18px rgba(200, 64, 26, .06);
      }
      73% {
        color: rgba(242,237,229,.26);
        text-shadow: 0 0 32px rgba(76,154,150,.08);
      }
    }
    @media(max-width:768px){
      .sediment-strata { height: 35%; opacity: .68; }
      .sed-layer { height: 20px; }
      .sediment-wash, .sediment-wash-cool { display:none; }
    }

  
    /* ABOUT V7: gravitational tide instead of left-to-right light passage */
    .sediment-wash,
    .sediment-wash-cool {
      display: none !important;
    }

    .sediment-hero-field {
      mix-blend-mode: screen;
    }

    .sediment-strata {
      height: 44%;
      opacity: .84;
      transform-origin: 50% 100%;
      animation: sedimentTideBed 38s ease-in-out infinite;
    }

    .sediment-strata::before {
      animation: sedimentTideBedGlow 38s ease-in-out infinite;
    }

    .sed-layer {
      opacity: .18;
      animation: sedimentTideLayer 42s ease-in-out infinite;
      transform-origin: 50% 100%;
    }

    .sed-layer-1 { bottom: 1%;  animation-delay: -4s;  height: 46px; opacity: .34; }
    .sed-layer-2 { bottom: 7%;  animation-delay: -10s; height: 36px; opacity: .25; }
    .sed-layer-3 { bottom: 13%; animation-delay: -17s; height: 30px; opacity: .21; }
    .sed-layer-4 { bottom: 20%; animation-delay: -23s; height: 26px; opacity: .17; }
    .sed-layer-5 { bottom: 28%; animation-delay: -30s; height: 22px; opacity: .13; }
    .sed-layer-6 { bottom: 36%; animation-delay: -36s; height: 18px; opacity: .10; }

    .sediment-tide,
    .sediment-cool-resonance {
      position: absolute;
      left: -8%;
      right: -8%;
      bottom: -8%;
      height: 72%;
      pointer-events: none;
      opacity: 0;
      will-change: transform, opacity, filter;
      transform-origin: 50% 100%;
      border-radius: 50%;
    }

    .sediment-tide {
      background:
        radial-gradient(ellipse 72% 54% at 58% 96%,
          rgba(205, 91, 25, .22) 0%,
          rgba(142, 50, 12, .14) 34%,
          rgba(76, 23, 7, .07) 58%,
          transparent 78%),
        radial-gradient(ellipse 80% 42% at 42% 90%,
          rgba(218, 130, 48, .12) 0%,
          rgba(89, 29, 8, .07) 45%,
          transparent 76%);
      filter: blur(28px);
      animation: sedimentTideRise 34s ease-in-out infinite;
      mix-blend-mode: screen;
    }

    .sediment-cool-resonance {
      bottom: 0;
      height: 62%;
      background:
        radial-gradient(ellipse 58% 46% at 66% 78%,
          rgba(83, 164, 158, .16) 0%,
          rgba(44, 118, 128, .085) 38%,
          rgba(18, 60, 68, .035) 58%,
          transparent 78%),
        radial-gradient(ellipse 38% 34% at 78% 60%,
          rgba(112, 153, 154, .08) 0%,
          transparent 70%);
      filter: blur(44px);
      animation: sedimentCoolTideRise 34s ease-in-out infinite;
      mix-blend-mode: screen;
    }

    .page-header-right .header-pull-quote {
      animation: quoteTideGlow 34s ease-in-out infinite !important;
    }

    .page-header-right .header-pull-quote::before {
      animation: quoteSignalLineTide 34s ease-in-out infinite !important;
    }

    @keyframes sedimentTideBed {
      0%, 100% {
        transform: translateY(3%) scaleY(.94) scaleX(1);
        opacity: .62;
      }
      38% {
        transform: translateY(1%) scaleY(1.01) scaleX(1.015);
        opacity: .78;
      }
      58% {
        transform: translateY(-2.5%) scaleY(1.09) scaleX(1.035);
        opacity: .96;
      }
      76% {
        transform: translateY(-.5%) scaleY(1.03) scaleX(1.02);
        opacity: .82;
      }
    }

    @keyframes sedimentTideBedGlow {
      0%, 100% { opacity: .54; }
      45% { opacity: .78; }
      62% { opacity: .96; }
      82% { opacity: .68; }
    }

    @keyframes sedimentTideLayer {
      0%, 100% {
        opacity: .11;
        transform: translateY(8px) translateX(-1%) scaleX(.98);
        box-shadow: 0 0 22px rgba(200,64,26,.035);
      }
      28% {
        opacity: .22;
        transform: translateY(3px) translateX(.5%) scaleX(1.015);
      }
      54% {
        opacity: .40;
        transform: translateY(-4px) translateX(1.5%) scaleX(1.055);
        box-shadow: 0 0 36px rgba(200,64,26,.07);
      }
      78% {
        opacity: .24;
        transform: translateY(1px) translateX(-.5%) scaleX(1.025);
      }
    }

    @keyframes sedimentTideRise {
      0%, 100% {
        opacity: .12;
        transform: translateY(10%) scale(1.02, .82);
        filter: blur(32px);
      }
      34% {
        opacity: .22;
        transform: translateY(4%) scale(1.05, .9);
      }
      58% {
        opacity: .45;
        transform: translateY(-8%) scale(1.12, 1.02);
        filter: blur(38px);
      }
      74% {
        opacity: .28;
        transform: translateY(-3%) scale(1.08, .96);
      }
    }

    @keyframes sedimentCoolTideRise {
      0%, 100% {
        opacity: 0;
        transform: translateY(18%) scale(.98, .72);
        filter: blur(50px);
      }
      42% {
        opacity: .08;
        transform: translateY(6%) scale(1.04, .86);
      }
      60% {
        opacity: .34;
        transform: translateY(-16%) scale(1.12, 1.04);
        filter: blur(46px);
      }
      72% {
        opacity: .18;
        transform: translateY(-8%) scale(1.08, .94);
      }
    }

    @keyframes quoteTideGlow {
      0%, 42%, 100% {
        color: rgba(242,237,229,.18);
        text-shadow: 0 0 28px rgba(200,64,26,.05);
      }
      57%, 66% {
        color: rgba(202, 234, 226, .48);
        text-shadow:
          0 0 22px rgba(78, 164, 158, .20),
          0 0 54px rgba(47, 119, 124, .12),
          0 0 20px rgba(200, 84, 30, .06);
      }
      78% {
        color: rgba(242,237,229,.28);
        text-shadow: 0 0 34px rgba(74,154,150,.08);
      }
    }

    @keyframes quoteSignalLineTide {
      0%, 100% { height: 28%; opacity: .22; }
      48% { height: 48%; opacity: .35; }
      62% { height: 92%; opacity: .74; }
      78% { height: 44%; opacity: .28; }
    }

    @media(max-width:768px){
      .sediment-tide,
      .sediment-cool-resonance {
        display: block;
        opacity: .16;
        height: 54%;
      }
      .sediment-strata {
        height: 34%;
        opacity: .68;
      }
    }


    /* ABOUT V10: visible but restrained name pulse, no shimmer or underline */
    .name-signal {
      position: relative;
      display: inline;
      color: var(--cream);
      font-weight: inherit;
      letter-spacing: inherit;
      white-space: nowrap;
      text-shadow:
        0 0 0 rgba(61,154,160,0),
        0 0 0 rgba(200,64,26,0);
      animation: nameSignalPulse 8.25s ease-in-out infinite;
    }
    .photo-caption .name-signal {
      animation-delay: -2.75s;
    }
    @keyframes nameSignalPulse {
      0%, 100% {
        color: var(--cream);
        text-shadow:
          0 0 0 rgba(61,154,160,0),
          0 0 0 rgba(200,64,26,0);
      }
      36% {
        color: rgba(240,235,227,.98);
        text-shadow:
          0 0 3px rgba(61,154,160,.10),
          0 0 8px rgba(200,64,26,.06);
      }
      52% {
        color: rgba(224,85,48,.82);
        text-shadow:
          0 0 9px rgba(61,154,160,.26),
          0 0 18px rgba(200,64,26,.22),
          0 0 34px rgba(200,64,26,.08);
      }
      66% {
        color: rgba(232,190,139,.92);
        text-shadow:
          0 0 7px rgba(61,154,160,.16),
          0 0 15px rgba(200,64,26,.13);
      }
      78% {
        color: rgba(240,235,227,.98);
        text-shadow:
          0 0 3px rgba(61,154,160,.08),
          0 0 8px rgba(200,64,26,.05);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .name-signal { animation: none; text-shadow: none; }
    }

    /* ABOUT V11: Who I Am quiet signal-depth field */
    .about-intro {
      isolation: isolate;
      background:
        radial-gradient(ellipse 80% 65% at 74% 18%, rgba(26, 91, 96, .032) 0%, transparent 72%),
        linear-gradient(160deg, var(--ink-1) 0%, #080503 100%);
    }

    .intro-signal-field {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
      opacity: .96;
    }

    .about-intro > :not(.intro-signal-field) {
      position: relative;
      z-index: 3;
    }

    .intro-depth {
      position: absolute;
      border-radius: 50%;
      filter: blur(44px);
      mix-blend-mode: screen;
      will-change: transform, opacity;
    }

    .intro-depth-amber {
      width: 58%;
      height: 62%;
      left: -16%;
      top: 2%;
      background: radial-gradient(ellipse,
        rgba(200, 64, 26, .105) 0%,
        rgba(126, 43, 12, .055) 42%,
        transparent 76%);
      animation: introDepthAmber 42s ease-in-out infinite alternate;
    }

    .intro-depth-copper {
      width: 52%;
      height: 44%;
      left: 50%;
      top: 45%;
      background: radial-gradient(ellipse,
        rgba(170, 73, 24, .075) 0%,
        rgba(79, 26, 7, .042) 48%,
        transparent 76%);
      animation: introDepthCopper 50s ease-in-out infinite alternate;
    }

    .intro-depth-cool {
      width: 36%;
      height: 38%;
      left: 70%;
      top: 3%;
      background: radial-gradient(ellipse,
        rgba(55, 143, 142, .052) 0%,
        rgba(24, 82, 91, .032) 46%,
        transparent 74%);
      animation: introDepthCool 58s ease-in-out infinite alternate;
    }

    .intro-contours {
      position: absolute;
      inset: 0;
      opacity: .86;
    }

    .intro-contours span {
      position: absolute;
      left: -12%;
      width: 64%;
      height: 120px;
      border-top: 1px solid rgba(200, 91, 28, .055);
      border-radius: 50%;
      transform: rotate(-7deg);
      filter: blur(.2px);
      animation: introContourDrift 24s ease-in-out infinite alternate;
    }

    .intro-contours span:nth-child(1) { top: 18%; animation-delay: -2s; opacity: .56; }
    .intro-contours span:nth-child(2) { top: 30%; left: -8%; width: 58%; animation-delay: -7s; opacity: .42; }
    .intro-contours span:nth-child(3) { top: 43%; left: -16%; width: 70%; animation-delay: -12s; opacity: .45; }
    .intro-contours span:nth-child(4) { top: 57%; left: -4%; width: 50%; animation-delay: -18s; opacity: .34; }

    .intro-current {
      position: absolute;
      left: 6%;
      right: 8%;
      height: 1px;
      background: linear-gradient(to right,
        transparent,
        rgba(75, 157, 154, .05),
        rgba(200, 64, 26, .075),
        rgba(226, 146, 71, .052),
        transparent);
      filter: blur(.2px);
      opacity: .42;
      transform-origin: left center;
      animation: introCurrentTune 18s ease-in-out infinite;
    }

    .intro-current.ic-1 { top: 32%; animation-delay: -3s; }
    .intro-current.ic-2 { top: 49%; animation-delay: -9s; opacity: .30; }
    .intro-current.ic-3 { top: 66%; animation-delay: -14s; opacity: .24; }

    .intro-node {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(219, 129, 57, .28);
      box-shadow:
        0 0 18px rgba(200, 64, 26, .16),
        0 0 34px rgba(55, 143, 142, .045);
      opacity: .25;
      animation: introNodePulse 13s ease-in-out infinite;
    }

    .intro-node.n1 { left: 13%; top: 24%; animation-delay: -1s; }
    .intro-node.n2 { left: 37%; top: 63%; animation-delay: -7s; transform: scale(.72); }
    .intro-node.n3 { left: 84%; top: 31%; animation-delay: -11s; transform: scale(.82); }

    .about-intro .section-label::after {
      animation: introLabelListen 10s ease-in-out infinite;
      transform-origin: left center;
    }

    @keyframes introDepthAmber {
      0% { transform: translate(-2%, 2%) scale(.96); opacity: .42; }
      48% { transform: translate(4%, -2%) scale(1.10); opacity: .72; }
      100% { transform: translate(1%, 4%) scale(1.03); opacity: .50; }
    }

    @keyframes introDepthCopper {
      0% { transform: translate(3%, -2%) scale(.94); opacity: .28; }
      52% { transform: translate(-5%, 3%) scale(1.12); opacity: .56; }
      100% { transform: translate(2%, 1%) scale(1.02); opacity: .34; }
    }

    @keyframes introDepthCool {
      0% { transform: translate(2%, 3%) scale(.92); opacity: .18; }
      50% { transform: translate(-7%, 1%) scale(1.18); opacity: .42; }
      100% { transform: translate(-2%, -3%) scale(1.00); opacity: .22; }
    }

    @keyframes introContourDrift {
      0% { transform: translateX(-2%) translateY(2px) rotate(-7deg) scaleX(.98); border-color: rgba(200,91,28,.038); }
      50% { transform: translateX(3%) translateY(-2px) rotate(-5deg) scaleX(1.03); border-color: rgba(200,91,28,.075); }
      100% { transform: translateX(1%) translateY(3px) rotate(-8deg) scaleX(1.01); border-color: rgba(75,157,154,.045); }
    }

    @keyframes introCurrentTune {
      0%, 100% { transform: scaleX(.72); opacity: .12; }
      38% { transform: scaleX(1.0); opacity: .34; }
      62% { transform: scaleX(.88); opacity: .24; }
    }

    @keyframes introNodePulse {
      0%, 100% { opacity: .10; transform: scale(.72); }
      44% { opacity: .44; transform: scale(1.08); }
      68% { opacity: .22; transform: scale(.86); }
    }

    @keyframes introLabelListen {
      0%, 100% {
        width: 3rem;
        background: var(--line-red);
        box-shadow: 0 0 0 rgba(200,64,26,0);
      }
      48% {
        width: 4.25rem;
        background: rgba(200,64,26,.42);
        box-shadow: 0 0 18px rgba(200,64,26,.16);
      }
      70% {
        width: 3.5rem;
        background: rgba(75,157,154,.14);
        box-shadow: 0 0 14px rgba(75,157,154,.06);
      }
    }

    @media(max-width:768px) {
      .intro-depth-amber {
        width: 110%;
        height: 48%;
        left: -42%;
        top: 8%;
      }
      .intro-depth-copper {
        width: 95%;
        height: 42%;
        left: 18%;
        top: 52%;
      }
      .intro-depth-cool {
        width: 78%;
        height: 32%;
        left: 44%;
        top: 8%;
      }
      .intro-contours span {
        width: 112%;
        left: -38%;
        opacity: .35;
      }
      .intro-current {
        left: 0;
        right: 0;
        opacity: .18;
      }
    }


  
    /* ABOUT V12: diagnostic signal constellation */
    .what-i-see {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(ellipse 72% 58% at 72% 36%, rgba(200,64,26,.028) 0%, transparent 70%),
        radial-gradient(ellipse 50% 42% at 24% 70%, rgba(47,119,124,.022) 0%, transparent 76%),
        var(--ink-1);
    }
    .what-i-see .section-label,
    .what-i-see h2,
    .what-i-see .patterns-grid {
      position: relative;
      z-index: 3;
    }
    .signal-constellation-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      opacity: .95;
      mix-blend-mode: screen;
    }
    .signal-field-glow {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 42% 42% at 18% 28%, rgba(200,64,26,.055) 0%, transparent 72%),
        radial-gradient(ellipse 34% 34% at 82% 62%, rgba(54,139,142,.04) 0%, transparent 72%);
      opacity: .42;
      animation: signalFieldBreath 34s ease-in-out infinite alternate;
    }
    @keyframes signalFieldBreath {
      0%   { transform: translate(-1.2%, 1%) scale(1); opacity: .28; }
      50%  { transform: translate(1%, -1%) scale(1.04); opacity: .56; }
      100% { transform: translate(-.5%, .8%) scale(1.02); opacity: .38; }
    }
    .what-i-see h2 em {
      animation: stuckSignalPulse 7.6s ease-in-out infinite;
      text-shadow: 0 0 0 rgba(200,64,26,0);
    }
    @keyframes stuckSignalPulse {
      0%, 100% {
        color: var(--red);
        text-shadow: 0 0 0 rgba(200,64,26,0);
      }
      48%, 58% {
        color: rgba(224,85,48,.92);
        text-shadow:
          0 0 12px rgba(200,64,26,.22),
          0 0 32px rgba(54,139,142,.08);
      }
    }
    .patterns-grid {
      background: rgba(255,255,255,.032);
      position: relative;
      overflow: visible;
    }
    .pattern-item {
      position: relative;
      overflow: hidden;
      min-height: 180px;
      background: rgba(12,9,6,.82);
      border-color: transparent;
      transition:
        background .9s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1),
        box-shadow .9s ease;
    }
    .pattern-item::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 95% 85% at 20% 20%, rgba(200,64,26,.13) 0%, rgba(200,64,26,.052) 38%, transparent 72%),
        radial-gradient(ellipse 55% 48% at 82% 75%, rgba(48,130,134,.045) 0%, transparent 72%);
      opacity: 0;
      transform: scale(.96);
      transition: opacity 1s ease, transform 1.2s ease;
      pointer-events: none;
    }
    .pattern-item::after {
      content: '';
      position: absolute;
      left: 2rem;
      top: 2.25rem;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 0 rgba(200,64,26,0);
      opacity: 0;
      transform: scale(1);
      pointer-events: none;
      transition: opacity .4s ease;
    }
    .pattern-item:hover,
    .pattern-item.signal-active {
      background: rgba(23,16,11,.92);
      transform: translateY(-2px);
      box-shadow: inset 0 0 0 1px rgba(200,64,26,.075), 0 18px 70px rgba(0,0,0,.18);
    }
    .pattern-item:hover::before,
    .pattern-item.signal-active::before {
      opacity: .95;
      transform: scale(1.05);
    }
    .pattern-item.signal-ping::after {
      opacity: 1;
      animation: signalNodePing 2.6s ease-out 1;
    }
    .pattern-bullet {
      position: relative;
      z-index: 3;
      transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .9s ease, background .6s ease;
    }
    .pattern-item:hover .pattern-bullet,
    .pattern-item.signal-active .pattern-bullet {
      transform: scale(1.55);
      background: var(--red-hi);
      box-shadow:
        0 0 12px rgba(224,85,48,.75),
        0 0 34px rgba(200,64,26,.24),
        0 0 58px rgba(58,140,143,.10);
    }
    .pattern-item p {
      position: relative;
      z-index: 3;
      transition: color .55s ease, text-shadow .8s ease;
    }
    .pattern-item:hover p,
    .pattern-item.signal-active p {
      color: rgba(240,235,227,.92);
      text-shadow: 0 0 18px rgba(200,64,26,.06);
    }
    @keyframes signalNodePing {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(200,64,26,.42);
      }
      55% {
        transform: scale(2.8);
        box-shadow:
          0 0 0 22px rgba(200,64,26,.04),
          0 0 28px rgba(200,64,26,.16);
      }
      100% {
        transform: scale(4.2);
        box-shadow: 0 0 0 42px rgba(200,64,26,0);
        opacity: 0;
      }
    }


    /* HANDWRITTEN SIGNAL QUOTE */
    .handwrite-quote {
      position: relative;
      display: inline-block;
      min-height: 2.35em;
    }
    .handwrite-quote .hw-char {
      display: inline-block;
      opacity: 0;
      transform: translateY(.08em) scale(.992);
      filter: blur(2px);
      transition:
        opacity .95s cubic-bezier(.22,1,.36,1),
        transform 1.05s cubic-bezier(.22,1,.36,1),
        filter .95s ease,
        text-shadow 1.25s ease;
      will-change: opacity, transform, filter;
    }
    .handwrite-quote .hw-char.hw-written {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
      text-shadow: 0 0 14px rgba(200,64,26,.045);
    }
    .handwrite-quote em .hw-char.hw-written {
      text-shadow:
        0 0 12px rgba(200,64,26,.16),
        0 0 28px rgba(200,64,26,.05);
    }
    .handwrite-quote .hw-cursor {
      display: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .handwrite-quote .hw-char {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
      }
      .handwrite-quote .hw-cursor { display: none; }
    }

    @media(max-width:768px){
      .signal-constellation-canvas { opacity: .45; }
      .pattern-item { min-height: auto; }
      .pattern-item::after { left: 1.5rem; top: 2.25rem; }
    }

    /* LOGO INTEGRATION: native SVG assets, no image-box artifacts */
    .logo-lockup {
      display: inline-flex;
      align-items: center;
      gap: .9rem;
      color: var(--cream);
      text-decoration: none;
      position: relative;
      isolation: isolate;
    }
    .logo-mark-shell {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      position: relative;
      flex: 0 0 auto;
      margin: -8px 0;
    }
    .logo-mark-shell::before {
      content: '';
      position: absolute;
      inset: 15%;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(200,64,26,.19) 0%, rgba(200,64,26,.07) 38%, transparent 70%);
      opacity: .42;
      filter: blur(11px);
      transform: scale(.92);
      transition: opacity .7s ease, transform .7s ease;
    }
    .logo-mark-shell::after {
      content: '';
      position: absolute;
      inset: 26% 6% 24% 8%;
      background: linear-gradient(100deg, transparent, rgba(200,64,26,.26), transparent);
      opacity: .16;
      filter: blur(7px);
      transform: rotate(-8deg);
      pointer-events: none;
    }
    .logo-mark-img {
      width: 54px;
      height: 54px;
      display: block;
      object-fit: contain;
      position: relative;
      z-index: 2;
      opacity: .96;
      filter:
        drop-shadow(0 0 8px rgba(200,64,26,.12))
        drop-shadow(0 0 22px rgba(240,235,227,.025));
      transition: filter .55s ease, opacity .55s ease, transform .55s ease;
    }
    .logo-lockup:hover .logo-mark-shell::before {
      opacity: .78;
      transform: scale(1.08);
    }
    .logo-lockup:hover .logo-mark-img {
      opacity: 1;
      filter:
        drop-shadow(0 0 12px rgba(200,64,26,.28))
        drop-shadow(0 0 30px rgba(240,235,227,.04));
      transform: translateY(-1px);
    }
    .logo-wordmark {
      font-family:'DM Sans',sans-serif;
      font-weight:700;
      font-size:.92rem;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--cream);
      line-height:1;
      white-space:nowrap;
      opacity:.94;
    }
    .logo-wordmark span { color: var(--red); }

    .footer-brand {
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
    }
    .footer-logo-link {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      margin:0 auto 1.35rem;
      position:relative;
      width:148px;
      height:148px;
      max-width:100%;
    }
    .footer-logo-link::before {
      content:'';
      position:absolute;
      inset: 10%;
      border-radius:50%;
      background:
        radial-gradient(circle, rgba(200,64,26,.16) 0%, rgba(200,64,26,.045) 42%, transparent 72%),
        radial-gradient(ellipse 80% 60% at 58% 42%, rgba(47,119,124,.07) 0%, transparent 74%);
      filter: blur(20px);
      opacity:.72;
      pointer-events:none;
    }
    .footer-logo-mark {
      display:block;
      width:118px;
      height:118px;
      object-fit:contain;
      opacity:.94;
      position:relative;
      z-index:2;
      filter:
        drop-shadow(0 0 14px rgba(200,64,26,.12))
        drop-shadow(0 0 26px rgba(240,235,227,.022));
    }
    .footer-brand p {
      margin:0 auto;
      max-width:31ch;
    }
    @media(max-width:768px){
      .logo-mark-shell { width: 46px; height: 46px; margin:-6px 0; }
      .logo-mark-img { width: 43px; height: 43px; }
      .logo-wordmark { font-size:.76rem; letter-spacing:.14em; }
      .hero-logo-ghost { width: 360px; right: -8.5rem; top: 44%; opacity: .042; }
      .footer-logo-link { width:132px; height:132px; }
      .footer-logo-mark { width:104px; height:104px; }
    }
  

    /* ABOUT: smaller, framed headshot treatment */
    .about-photo {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: clamp(560px, 58vw, 760px);
      padding: clamp(3rem, 5vw, 5.5rem);
    }

    .about-photo .headshot-img {
      width: min(78%, 520px);
      max-height: 680px;
      object-fit: contain;
      border: 1px solid rgba(255,255,255,.055);
      box-shadow:
        0 28px 90px rgba(0,0,0,.42),
        0 0 70px rgba(200,64,26,.055);
    }

    .photo-caption {
      left: clamp(2rem, 4vw, 4rem);
      bottom: clamp(2rem, 4vw, 4rem);
    }

    @media(max-width:1024px){
      .about-photo {
        min-height: auto;
        padding: 3.5rem 2.5rem 4.5rem;
      }
      .about-photo .headshot-img {
        width: min(84%, 480px);
      }
    }

    @media(max-width:768px){
      .about-photo {
        padding: 3rem 1.5rem 4rem;
      }
      .about-photo .headshot-img {
        width: min(92%, 420px);
      }
    }


    /* ABOUT V13: shorter hero sediment cycle with earlier brightness ramp */
    .sediment-strata {
      animation: sedimentTideBedQuick 20s ease-in-out infinite !important;
    }

    .sediment-strata::before {
      animation: sedimentTideBedGlowQuick 20s ease-in-out infinite !important;
    }

    .sed-layer {
      animation: sedimentTideLayerQuick 22s ease-in-out infinite !important;
    }

    .sed-layer-1 { animation-delay: -2s !important; }
    .sed-layer-2 { animation-delay: -5s !important; }
    .sed-layer-3 { animation-delay: -8s !important; }
    .sed-layer-4 { animation-delay: -11s !important; }
    .sed-layer-5 { animation-delay: -14s !important; }
    .sed-layer-6 { animation-delay: -17s !important; }

    .sediment-tide {
      animation: sedimentTideRiseQuick 18s ease-in-out infinite !important;
    }

    .sediment-cool-resonance {
      animation: sedimentCoolTideRiseQuick 18s ease-in-out infinite !important;
    }

    .page-header-right .header-pull-quote {
      animation: quoteTideGlowQuick 18s ease-in-out infinite !important;
    }

    .page-header-right .header-pull-quote::before {
      animation: quoteSignalLineTideQuick 18s ease-in-out infinite !important;
    }

    @keyframes sedimentTideBedQuick {
      0%, 100% {
        transform: translateY(3%) scaleY(.94) scaleX(1);
        opacity: .64;
      }
      16% {
        transform: translateY(1.5%) scaleY(1.0) scaleX(1.012);
        opacity: .78;
      }
      30% {
        transform: translateY(-2.2%) scaleY(1.09) scaleX(1.035);
        opacity: .98;
      }
      48% {
        transform: translateY(-.6%) scaleY(1.03) scaleX(1.02);
        opacity: .82;
      }
      70% {
        transform: translateY(1.4%) scaleY(.98) scaleX(1.006);
        opacity: .68;
      }
    }

    @keyframes sedimentTideBedGlowQuick {
      0%, 100% { opacity: .56; }
      14% { opacity: .78; }
      30% { opacity: 1; }
      50% { opacity: .72; }
      72% { opacity: .60; }
    }

    @keyframes sedimentTideLayerQuick {
      0%, 100% {
        opacity: .12;
        transform: translateY(8px) translateX(-1%) scaleX(.98);
        box-shadow: 0 0 22px rgba(200,64,26,.035);
      }
      14% {
        opacity: .25;
        transform: translateY(2px) translateX(.5%) scaleX(1.018);
      }
      30% {
        opacity: .46;
        transform: translateY(-5px) translateX(1.4%) scaleX(1.06);
        box-shadow: 0 0 40px rgba(200,64,26,.085);
      }
      48% {
        opacity: .26;
        transform: translateY(1px) translateX(-.5%) scaleX(1.025);
      }
      72% {
        opacity: .14;
        transform: translateY(6px) translateX(.25%) scaleX(.995);
      }
    }

    @keyframes sedimentTideRiseQuick {
      0%, 100% {
        opacity: .12;
        transform: translateY(10%) scale(1.02, .82);
        filter: blur(32px);
      }
      12% {
        opacity: .26;
        transform: translateY(4%) scale(1.05, .90);
      }
      25% {
        opacity: .52;
        transform: translateY(-8%) scale(1.12, 1.02);
        filter: blur(38px);
      }
      42% {
        opacity: .30;
        transform: translateY(-3%) scale(1.08, .96);
      }
      68% {
        opacity: .15;
        transform: translateY(6%) scale(1.04, .86);
      }
    }

    @keyframes sedimentCoolTideRiseQuick {
      0%, 100% {
        opacity: 0;
        transform: translateY(18%) scale(.98, .72);
        filter: blur(50px);
      }
      16% {
        opacity: .12;
        transform: translateY(5%) scale(1.04, .86);
      }
      28% {
        opacity: .38;
        transform: translateY(-16%) scale(1.12, 1.04);
        filter: blur(46px);
      }
      42% {
        opacity: .20;
        transform: translateY(-8%) scale(1.08, .94);
      }
      70% {
        opacity: .03;
        transform: translateY(10%) scale(1.02, .78);
      }
    }

    @keyframes quoteTideGlowQuick {
      0%, 100% {
        color: rgba(242,237,229,.18);
        text-shadow: 0 0 28px rgba(200,64,26,.05);
      }
      18%, 32% {
        color: rgba(202, 234, 226, .52);
        text-shadow:
          0 0 24px rgba(78, 164, 158, .22),
          0 0 58px rgba(47, 119, 124, .14),
          0 0 22px rgba(200, 84, 30, .07);
      }
      46% {
        color: rgba(242,237,229,.30);
        text-shadow: 0 0 34px rgba(74,154,150,.09);
      }
      72% {
        color: rgba(242,237,229,.20);
        text-shadow: 0 0 28px rgba(200,64,26,.05);
      }
    }

    @keyframes quoteSignalLineTideQuick {
      0%, 100% { height: 28%; opacity: .22; }
      16% { height: 52%; opacity: .38; }
      28% { height: 92%; opacity: .76; }
      46% { height: 44%; opacity: .30; }
      72% { height: 30%; opacity: .22; }
    }


    /* MOBILE SCROLL ACTIVATION: replaces awkward tap/hover behavior on touch screens */
    @media (max-width: 768px) {
      [data-scroll-signal] {
        -webkit-tap-highlight-color: transparent;
      }

      .pattern-item.is-scroll-active,
      .pattern-item.signal-active {
        background: rgba(23,16,11,.92);
        transform: translateY(-2px);
        box-shadow:
          inset 0 0 0 1px rgba(200,64,26,.075),
          0 18px 70px rgba(0,0,0,.18),
          0 0 46px rgba(200,64,26,.045);
      }

      .pattern-item.is-scroll-active::before,
      .pattern-item.signal-active::before {
        opacity: .95;
        transform: scale(1.05);
      }

      .pattern-item.is-scroll-active .pattern-bullet,
      .pattern-item.signal-active .pattern-bullet {
        transform: scale(1.55);
        background: var(--red-hi);
        box-shadow:
          0 0 12px rgba(224,85,48,.75),
          0 0 34px rgba(200,64,26,.24),
          0 0 58px rgba(58,140,143,.10);
      }

      .pattern-item.is-scroll-active p,
      .pattern-item.signal-active p {
        color: rgba(240,235,227,.92);
        text-shadow: 0 0 18px rgba(200,64,26,.06);
      }

      .principle-card.is-scroll-active {
        border-color: rgba(200,64,26,.22);
        transform: translateY(-4px);
        background: #18110c !important;
        box-shadow:
          inset 0 0 0 1px rgba(200,64,26,.055),
          0 0 48px rgba(200,64,26,.045);
      }

      .principle-card.is-scroll-active::before {
        transform: scaleX(1);
      }

      .principle-card.is-scroll-active::after {
        opacity: 1;
        transform: scale(1.08);
      }

      .principle-card.is-scroll-active h3 {
        color: var(--red);
      }

      .principle-card.is-scroll-active p {
        color: rgba(240,235,227,.94);
        text-shadow: 0 0 16px rgba(200,64,26,.07);
      }
    }

  
    /* ABOUT V13: bolder listening chamber for recurring signals */
    .what-i-see {
      padding-top: 8.25rem;
      padding-bottom: 8.5rem;
      background:
        radial-gradient(ellipse 82% 68% at 74% 20%, rgba(42, 13, 4, .42) 0%, rgba(17, 8, 4, .18) 45%, transparent 74%),
        radial-gradient(ellipse 64% 54% at 22% 34%, rgba(200,64,26,.048) 0%, transparent 72%),
        radial-gradient(ellipse 52% 44% at 82% 66%, rgba(47,119,124,.034) 0%, transparent 76%),
        #080604 !important;
    }

    .what-i-see::before {
      content: '';
      position: absolute;
      inset: -12%;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 44% 34% at 72% 20%, rgba(209, 93, 30, .10) 0%, rgba(98, 31, 8, .055) 42%, transparent 78%),
        radial-gradient(ellipse 36% 30% at 88% 42%, rgba(55, 142, 143, .062) 0%, transparent 72%),
        radial-gradient(ellipse 64% 28% at 50% 64%, rgba(200,64,26,.035) 0%, transparent 76%);
      filter: blur(34px);
      opacity: .74;
      mix-blend-mode: screen;
      animation: listeningChamberGas 46s ease-in-out infinite alternate;
    }

    .what-i-see::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.018) 47%, transparent 48%),
        repeating-linear-gradient(
          to bottom,
          transparent 0px,
          transparent 86px,
          rgba(200,64,26,.026) 87px,
          transparent 88px
        ),
        repeating-linear-gradient(
          to right,
          transparent 0px,
          transparent 28vw,
          rgba(255,255,255,.018) calc(28vw + 1px),
          transparent calc(28vw + 2px)
        );
      opacity: .42;
      mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 92%, transparent 100%);
      animation: listeningGridDrift 38s ease-in-out infinite alternate;
    }

    .signal-chamber-depth,
    .listening-trace-field {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .signal-chamber-depth {
      z-index: 1;
      mix-blend-mode: screen;
    }

    .listening-trace-field {
      z-index: 2;
      opacity: .92;
      mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 86%, transparent 100%);
    }

    .signal-cloud {
      position: absolute;
      border-radius: 50%;
      filter: blur(48px);
      will-change: transform, opacity;
      opacity: .38;
    }

    .signal-cloud-amber {
      width: 58%;
      height: 44%;
      left: 45%;
      top: 7%;
      background: radial-gradient(ellipse,
        rgba(217, 111, 42, .18) 0%,
        rgba(200,64,26,.10) 38%,
        rgba(86, 28, 7, .05) 62%,
        transparent 78%);
      animation: signalCloudAmberDrift 42s ease-in-out infinite alternate;
    }

    .signal-cloud-copper {
      width: 54%;
      height: 38%;
      left: 6%;
      top: 42%;
      background: radial-gradient(ellipse,
        rgba(167, 65, 18, .12) 0%,
        rgba(97, 31, 8, .072) 45%,
        transparent 76%);
      animation: signalCloudCopperDrift 52s ease-in-out infinite alternate;
    }

    .signal-cloud-cool {
      width: 38%;
      height: 32%;
      left: 64%;
      top: 48%;
      background: radial-gradient(ellipse,
        rgba(61, 150, 149, .11) 0%,
        rgba(30, 91, 100, .06) 42%,
        transparent 76%);
      filter: blur(58px);
      animation: signalCloudCoolDrift 58s ease-in-out infinite alternate;
    }

    .signal-pressure-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(200,64,26,.06);
      transform: rotate(-8deg);
      opacity: .16;
      filter: blur(.25px);
      animation: pressureRingTune 22s ease-in-out infinite;
    }

    .ring-one {
      width: 46rem;
      height: 12rem;
      left: 44%;
      top: 13%;
      animation-delay: -3s;
    }

    .ring-two {
      width: 58rem;
      height: 15rem;
      left: 34%;
      top: 29%;
      border-color: rgba(72,151,151,.048);
      animation-delay: -11s;
    }

    .ring-three {
      width: 70rem;
      height: 18rem;
      left: 13%;
      top: 53%;
      animation-delay: -17s;
    }

    .trace-line {
      position: absolute;
      height: 1px;
      background: linear-gradient(to right,
        transparent,
        rgba(200,64,26,.09),
        rgba(73,151,151,.052),
        transparent);
      transform-origin: left center;
      filter: blur(.18px);
      opacity: .18;
      animation: traceLineListen 16s ease-in-out infinite;
    }

    .tl-1 { width: 38%; left: 34%; top: 31%; transform: rotate(-5deg); animation-delay: -2s; }
    .tl-2 { width: 44%; left: 47%; top: 44%; transform: rotate(3deg); animation-delay: -7s; }
    .tl-3 { width: 52%; left: 17%; top: 62%; transform: rotate(5deg); animation-delay: -12s; }
    .tl-4 { width: 31%; left: 61%; top: 74%; transform: rotate(-7deg); animation-delay: -18s; }

    .trace-node {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(224,85,48,.44);
      box-shadow:
        0 0 18px rgba(224,85,48,.20),
        0 0 34px rgba(64,151,151,.06);
      opacity: .22;
      animation: traceNodeHear 12s ease-in-out infinite;
    }

    .tn-1 { left: 42%; top: 29%; animation-delay: -1s; }
    .tn-2 { left: 70%; top: 43%; animation-delay: -6s; }
    .tn-3 { left: 28%; top: 61%; animation-delay: -10s; }
    .tn-4 { left: 82%; top: 72%; animation-delay: -15s; }

    .what-i-see .section-label,
    .what-i-see h2,
    .what-i-see .patterns-grid {
      position: relative;
      z-index: 4;
    }

    .what-i-see h2 {
      max-width: 25ch;
      margin-bottom: 5.25rem;
      text-shadow: 0 0 28px rgba(0,0,0,.55);
    }

    .what-i-see h2 em {
      color: var(--red);
      animation: stuckSignalPulseBold 8.8s ease-in-out infinite;
    }

    .patterns-grid {
      background:
        linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.025)),
        rgba(255,255,255,.018) !important;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.016),
        0 34px 120px rgba(0,0,0,.24);
      backdrop-filter: blur(1px);
    }

    .pattern-item {
      min-height: 188px;
      background:
        radial-gradient(ellipse 90% 80% at 16% 16%, rgba(200,64,26,.018) 0%, transparent 68%),
        rgba(8,6,4,.76) !important;
      border: 1px solid rgba(255,255,255,.022);
      transition:
        background .9s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1),
        box-shadow .9s ease,
        border-color .85s ease;
    }

    .pattern-item::before {
      background:
        radial-gradient(ellipse 94% 88% at 18% 20%, rgba(224,85,48,.19) 0%, rgba(200,64,26,.072) 36%, transparent 70%),
        radial-gradient(ellipse 58% 52% at 84% 78%, rgba(65,153,154,.068) 0%, transparent 72%) !important;
    }

    .pattern-item::after {
      opacity: .28;
      background: rgba(200,64,26,.88);
      box-shadow:
        0 0 14px rgba(200,64,26,.18),
        0 0 28px rgba(58,140,143,.045);
    }

    .pattern-item:hover,
    .pattern-item.signal-active,
    .pattern-item.is-scroll-active {
      background:
        radial-gradient(ellipse 110% 95% at 18% 16%, rgba(200,64,26,.115) 0%, rgba(200,64,26,.045) 42%, transparent 72%),
        rgba(22,15,10,.96) !important;
      border-color: rgba(200,64,26,.18);
      transform: translateY(-4px);
      box-shadow:
        inset 0 0 0 1px rgba(224,85,48,.08),
        0 0 44px rgba(200,64,26,.055),
        0 24px 85px rgba(0,0,0,.28);
    }

    .pattern-item:hover p,
    .pattern-item.signal-active p,
    .pattern-item.is-scroll-active p {
      color: rgba(246,242,235,.98);
      text-shadow:
        0 0 18px rgba(200,64,26,.10),
        0 0 30px rgba(58,140,143,.045);
    }

    .pattern-item:hover .pattern-bullet,
    .pattern-item.signal-active .pattern-bullet,
    .pattern-item.is-scroll-active .pattern-bullet {
      transform: scale(1.72);
      background: var(--red-hi);
      box-shadow:
        0 0 12px rgba(224,85,48,.95),
        0 0 38px rgba(200,64,26,.34),
        0 0 76px rgba(58,140,143,.14);
      animation: activeSignalNodePulse 2.8s ease-in-out infinite;
    }

    .pattern-item:hover::after,
    .pattern-item.signal-active::after,
    .pattern-item.is-scroll-active::after {
      opacity: 1;
      animation: signalNodePing 2.9s ease-out 1;
    }

    .signal-constellation-canvas {
      opacity: 1;
      z-index: 3;
    }

    @keyframes listeningChamberGas {
      0% {
        transform: translate(-1%, 1%) scale(1);
        opacity: .42;
      }
      38% {
        transform: translate(2.4%, -1.6%) scale(1.045);
        opacity: .76;
      }
      68% {
        transform: translate(-1.8%, -2.4%) scale(1.075);
        opacity: .62;
      }
      100% {
        transform: translate(1.2%, 1.4%) scale(1.035);
        opacity: .54;
      }
    }

    @keyframes listeningGridDrift {
      0% { transform: translateY(0) translateX(0); opacity: .26; }
      50% { transform: translateY(-10px) translateX(8px); opacity: .52; }
      100% { transform: translateY(5px) translateX(-6px); opacity: .34; }
    }

    @keyframes signalCloudAmberDrift {
      0% { transform: translate(-2%, 2%) scale(.96); opacity: .22; }
      48% { transform: translate(3%, -3%) scale(1.12); opacity: .52; }
      100% { transform: translate(-1%, 1%) scale(1.04); opacity: .34; }
    }

    @keyframes signalCloudCopperDrift {
      0% { transform: translate(2%, -1%) scale(.94); opacity: .18; }
      52% { transform: translate(-3%, 3%) scale(1.08); opacity: .42; }
      100% { transform: translate(1%, 2%) scale(1.03); opacity: .26; }
    }

    @keyframes signalCloudCoolDrift {
      0% { transform: translate(2%, 3%) scale(.92); opacity: .12; }
      46% { transform: translate(-5%, -2%) scale(1.12); opacity: .34; }
      100% { transform: translate(-1%, 2%) scale(1.02); opacity: .18; }
    }

    @keyframes pressureRingTune {
      0%, 100% { transform: rotate(-8deg) scaleX(.94) scaleY(.86); opacity: .08; }
      46% { transform: rotate(-5deg) scaleX(1.04) scaleY(1.08); opacity: .26; }
      70% { transform: rotate(-7deg) scaleX(.98) scaleY(.96); opacity: .14; }
    }

    @keyframes traceLineListen {
      0%, 100% { opacity: .07; filter: blur(.45px); }
      45% { opacity: .31; filter: blur(.1px); }
      72% { opacity: .13; }
    }

    @keyframes traceNodeHear {
      0%, 100% { opacity: .10; transform: scale(.72); }
      48% { opacity: .58; transform: scale(1.24); }
      70% { opacity: .24; transform: scale(.92); }
    }

    @keyframes activeSignalNodePulse {
      0%, 100% { box-shadow: 0 0 12px rgba(224,85,48,.75), 0 0 34px rgba(200,64,26,.22), 0 0 64px rgba(58,140,143,.09); }
      50% { box-shadow: 0 0 18px rgba(224,85,48,1), 0 0 52px rgba(200,64,26,.36), 0 0 92px rgba(58,140,143,.16); }
    }

    @keyframes stuckSignalPulseBold {
      0%, 100% {
        color: var(--red);
        text-shadow: 0 0 0 rgba(200,64,26,0);
      }
      45%, 62% {
        color: rgba(236, 101, 56, .96);
        text-shadow:
          0 0 14px rgba(200,64,26,.32),
          0 0 36px rgba(200,64,26,.14),
          0 0 58px rgba(54,139,142,.08);
      }
    }

    @media(max-width:768px) {
      .what-i-see {
        padding-top: 5.75rem;
        padding-bottom: 5.75rem;
        background:
          radial-gradient(ellipse 110% 38% at 64% 16%, rgba(200,64,26,.08) 0%, rgba(55,18,5,.045) 44%, transparent 76%),
          radial-gradient(ellipse 92% 42% at 58% 66%, rgba(47,119,124,.035) 0%, transparent 74%),
          #080604 !important;
      }

      .what-i-see::before {
        inset: -18%;
        background:
          radial-gradient(ellipse 74% 36% at 55% 16%, rgba(217,111,42,.12) 0%, rgba(91,29,8,.065) 42%, transparent 78%),
          radial-gradient(ellipse 54% 32% at 78% 44%, rgba(55,142,143,.065) 0%, transparent 72%);
        filter: blur(30px);
      }

      .what-i-see h2 {
        margin-bottom: 3.6rem;
        max-width: 12.5ch;
      }

      .signal-cloud-amber {
        width: 125%;
        height: 34%;
        left: -8%;
        top: 4%;
      }

      .signal-cloud-copper {
        width: 110%;
        height: 36%;
        left: -34%;
        top: 39%;
      }

      .signal-cloud-cool {
        width: 92%;
        height: 28%;
        left: 32%;
        top: 52%;
      }

      .ring-one {
        width: 26rem;
        height: 8rem;
        left: 12%;
        top: 15%;
      }

      .ring-two {
        width: 30rem;
        height: 9rem;
        left: -8%;
        top: 33%;
      }

      .ring-three {
        width: 34rem;
        height: 10rem;
        left: -24%;
        top: 59%;
      }

      .trace-line {
        opacity: .12;
      }

      .tl-1 { width: 72%; left: 16%; top: 30%; }
      .tl-2 { width: 86%; left: 8%; top: 48%; }
      .tl-3 { width: 82%; left: -8%; top: 67%; }
      .tl-4 { width: 62%; left: 34%; top: 82%; }

      .patterns-grid {
        box-shadow: 0 24px 90px rgba(0,0,0,.26);
      }

      .pattern-item {
        min-height: auto;
        border-left-color: rgba(200,64,26,.07);
        border-right-color: rgba(255,255,255,.018);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .what-i-see::before,
      .what-i-see::after,
      .signal-cloud,
      .signal-pressure-ring,
      .trace-line,
      .trace-node,
      .pattern-item:hover .pattern-bullet,
      .pattern-item.signal-active .pattern-bullet,
      .pattern-item.is-scroll-active .pattern-bullet {
        animation: none !important;
      }
    }

  
    /* PERFORMANCE PASS: smoother scrolling without removing the visual system */
    .signal-constellation-canvas,
    .signal-chamber-depth,
    .listening-trace-field,
    .sediment-hero-field,
    .about-hero-field,
    .intro-signal-field {
      contain: layout paint style;
    }

    .signal-cloud,
    .about-hero-field span,
    .intro-depth,
    .sediment-tide,
    .sediment-cool-resonance {
      will-change: transform, opacity;
      transform: translateZ(0);
    }

    .patterns-grid,
    .principles-grid,
    .name-origin,
    .what-i-see {
      transform: translateZ(0);
    }

    @media(max-width:768px) {
      .signal-constellation-canvas {
        opacity: .52;
      }

      .what-i-see::before,
      .signal-cloud {
        filter: blur(34px);
      }

      .signal-pressure-ring,
      .trace-line,
      .trace-node {
        opacity: .55;
      }

      .pattern-item,
      .principle-card {
        transition:
          background .55s cubic-bezier(.22,1,.36,1),
          transform .45s cubic-bezier(.22,1,.36,1),
          box-shadow .55s ease,
          border-color .55s ease,
          color .45s ease;
      }

      .pattern-item:hover,
      .pattern-item.signal-active,
      .pattern-item.is-scroll-active,
      .principle-card:hover,
      .principle-card.is-scroll-active {
        transform: translateY(-2px);
      }
    }

    @media(max-width:768px), (prefers-reduced-motion: reduce) {
      .signal-constellation-canvas {
        mix-blend-mode: normal;
      }

      .patterns-grid {
        backdrop-filter: none;
      }
    }