:root{
    --ink:#0B0B0C;
    --ink-2:#141416;
    --paper:#F5F4F1;
    --paper-2:#EDEBE5;
    --text:#1A1A1D;
    --muted:#7A7A80;
    --muted-d:#9A9A9E;
    --line:#E2E0DA;
    --line-d:rgba(255,255,255,.14);
    --gold:#A98F5B;
    --gold-soft:#C7B589;

    --display:'proxima-nova','Proxima Nova','Montserrat',-apple-system,Helvetica,Arial,sans-serif;
    --body:'Roboto',-apple-system,Helvetica,Arial,sans-serif;

    --maxw:1240px;
    --pad:clamp(22px,5vw,72px);
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    background:var(--ink);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}

  .eyebrow{
    font-family:var(--body);
    font-size:11px;font-weight:500;
    letter-spacing:.32em;text-transform:uppercase;
    color:var(--gold);
    display:inline-flex;align-items:center;
  }
  .eyebrow.center{justify-content:center}

  h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:.005em;line-height:1.08}
  .section{padding:clamp(80px,11vw,150px) var(--pad)}
  .wrap{max-width:var(--maxw);margin:0 auto}

  .display-xl{font-size:clamp(40px,8vw,104px);font-weight:200;letter-spacing:-.01em}
  .display-lg{font-size:clamp(32px,5.2vw,62px);font-weight:200}
  .display-md{font-size:clamp(26px,3.4vw,40px);font-weight:300}

  .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:.12s}
  .reveal[data-d="2"]{transition-delay:.24s}
  .reveal[data-d="3"]{transition-delay:.36s}
  .reveal[data-d="4"]{transition-delay:.48s}

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px var(--pad);
    transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s;
    border-bottom:1px solid transparent;
  }
  header.scrolled{background:rgba(11,11,12,.86);backdrop-filter:blur(14px);padding:14px var(--pad);border-bottom:1px solid var(--line-d)}
  .brand{font-family:var(--display);font-weight:300;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:12px}
  .brand .mono{width:30px;height:30px;border:1px solid var(--gold);display:grid;place-items:center;font-size:12px;letter-spacing:.04em;color:var(--gold-soft)}
  nav{display:flex;align-items:center;gap:30px}
  nav a{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.74);font-weight:400;transition:color .3s}
  nav a:hover,nav a.active{color:#fff}
  .nav-cta{border:1px solid var(--line-d);padding:9px 18px;color:#fff;transition:border-color .3s,background .3s}
  .nav-cta:hover{border-color:var(--gold);background:rgba(169,143,91,.12)}
  .burger{display:none;background:none;border:0;cursor:pointer;width:30px;height:20px;position:relative}
  .burger span{position:absolute;left:0;height:1.5px;width:100%;background:#fff;transition:.35s var(--ease)}
  .burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:16px}
  body.menu-open .burger span:nth-child(1){top:9px;transform:rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){top:9px;transform:rotate(-45deg)}

  /* ============ HERO — IN MOTION (testimonials) ============ */
  .praise{position:relative;min-height:100svh;background:var(--ink);color:#fff;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;padding:118px var(--pad) 64px}

  /* faint portrait backdrop, cross-fading */
  .praise-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
  .praise-bg .pl{position:absolute;inset:0;background-size:contain;background-position:center;background-repeat:no-repeat;
    filter:grayscale(1) contrast(1.04);opacity:0;animation:bgcycle 26s var(--ease) infinite}
  .praise-bg .pl2{animation-delay:-13s}
  @keyframes bgcycle{
    0%{opacity:0}
    12%{opacity:.34}
    38%{opacity:.34}
    50%{opacity:0}
    100%{opacity:0}
  }
  /* readability + vignette over portrait */
  .praise-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 40%,transparent 0%,rgba(11,11,12,.40) 60%,rgba(11,11,12,.88) 100%),
      linear-gradient(180deg,rgba(11,11,12,.66),rgba(11,11,12,.26) 32%,rgba(11,11,12,.30) 68%,rgba(11,11,12,.9))}

  .praise-inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%;
    display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(34px,5vw,76px);align-items:center}

  .praise-head .eyebrow{margin-bottom:26px}
  .praise-head h1{color:#fff;margin-bottom:22px}
  .praise-head .lede{color:rgba(255,255,255,.74);font-weight:300;max-width:34ch;font-size:clamp(15px,1.5vw,17px)}
  .praise-roles{display:flex;flex-wrap:wrap;gap:9px 10px;margin-top:30px}
  .praise-roles span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);
    border:1px solid var(--line-d);padding:7px 12px;border-radius:2px}

  /* drifting columns of testimonials */
  .praise-stream{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);
    height:min(74vh,640px);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}
  .col{overflow:hidden;position:relative}
  .col-track{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);will-change:transform}
  .col.up .col-track{animation:scrollUp var(--dur,42s) linear infinite}
  .col.down .col-track{animation:scrollDown var(--dur,48s) linear infinite}
  .praise-stream:hover .col-track,.praise-stream:focus-within .col-track{animation-play-state:paused}
  @keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  @keyframes scrollDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

  .quote-card{background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
    border:1px solid var(--line-d);padding:20px 20px 18px;backdrop-filter:blur(3px);
    transition:border-color .5s,background .5s}
  a.quote-card{display:block;cursor:pointer}
  .quote-card:hover{border-color:rgba(169,143,91,.5);background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}
  a.quote-card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-color:var(--gold-soft)}
  .quote-card p{font-family:var(--display);font-weight:300;font-size:clamp(14px,1.05vw,16px);line-height:1.46;color:#F1EFEA}
  .quote-card .who{display:flex;flex-direction:column;gap:3px}
  .quote-card .who .cat{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;margin-bottom:3px}
  .quote-card .who b{font-family:var(--display);font-weight:400;font-size:15.5px;color:#F4F2ED;letter-spacing:.01em}
  .quote-card .who .role{font-size:11px;line-height:1.42;color:var(--muted-d);letter-spacing:.015em}
  .quote-card.namesonly{padding:18px 20px}

  .scrollcue{position:absolute;left:var(--pad);bottom:26px;z-index:3;display:flex;align-items:center;gap:12px;color:var(--muted-d);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
  .scrollcue .bar{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
  .scrollcue .bar::after{content:"";position:absolute;top:-42px;left:0;width:100%;height:42px;background:var(--gold);animation:drop 2.4s var(--ease) infinite}
  @keyframes drop{0%{top:-42px}60%,100%{top:42px}}

  /* ============ ABOUT (brief) ============ */
  #about{background:var(--paper);color:var(--text);border-top:1px solid rgba(255,255,255,.04)}
  .about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,6vw,90px)}
  .about-head .eyebrow{margin-bottom:24px}
  .about-head h2{margin-bottom:20px}
  .about-meta{margin-top:34px;border-top:1px solid var(--line);padding-top:6px}
  .about-meta .row{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
  .about-meta .row .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .about-meta .row .v{font-family:var(--display);font-weight:300;font-size:15px;text-align:right}
  .about-body p{font-size:clamp(16px,1.45vw,18px);color:#34343a;font-weight:300;margin-bottom:20px;max-width:58ch}
  .about-body p .em{color:var(--text);font-weight:400}
  .about-body .sig{margin-top:30px;font-family:var(--display);font-weight:200;font-size:30px;color:var(--gold);letter-spacing:.02em}

  /* ============ CLOSING — HIS VOICE (rotating quotes) ============ */
  #voice{position:relative;background:var(--ink);color:#fff;overflow:hidden;
    padding:clamp(96px,14vw,176px) var(--pad)}
  /* drifting clouds above the portrait */
  .voice-clouds{position:absolute;inset:-20% -10%;z-index:1;pointer-events:none}
  .voice-clouds .cloud{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
  .cloud.c1{width:55vw;height:42vw;top:-8%;left:-6%;
    background:radial-gradient(circle,rgba(169,143,91,.22),transparent 68%);animation:drift1 34s var(--ease) infinite}
  .cloud.c2{width:48vw;height:40vw;bottom:-10%;right:-8%;
    background:radial-gradient(circle,rgba(120,120,135,.20),transparent 70%);animation:drift2 42s var(--ease) infinite}
  .cloud.c3{width:40vw;height:34vw;top:30%;right:18%;
    background:radial-gradient(circle,rgba(199,181,137,.14),transparent 72%);animation:drift3 38s var(--ease) infinite}
  @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(7%,5%)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-6%,-7%)}}
  @keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-5%,6%)}}
  .voice-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(120% 100% at 50% 50%,transparent 0%,rgba(11,11,12,.55) 64%,rgba(11,11,12,.9) 100%)}

  .voice-wrap{position:relative;z-index:3;max-width:1000px;margin:0 auto;text-align:center}
  .voice-wrap .eyebrow{justify-content:center;margin-bottom:34px}
  .voice-mark{font-family:var(--display);font-size:clamp(70px,12vw,150px);line-height:.6;color:var(--gold);opacity:.32;margin-bottom:2px}
  .voice-stage{position:relative;min-height:clamp(170px,24vw,230px)}
  .voice-q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);pointer-events:none}
  .voice-q.on{opacity:1;transform:none}
  .voice-q p{font-family:var(--display);font-weight:200;font-size:clamp(22px,3.5vw,40px);line-height:1.3;
    max-width:24ch;color:#F4F2ED;letter-spacing:.005em}
  .voice-dots{display:flex;gap:11px;justify-content:center;margin-top:46px}
  .voice-dots button{width:7px;height:7px;border-radius:50%;border:0;background:rgba(255,255,255,.22);cursor:pointer;padding:0;transition:background .4s,transform .4s}
  .voice-dots button.on{background:var(--gold);transform:scale(1.35)}
  .voice-by{margin-top:30px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-d)}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:#fff;border-top:1px solid var(--line-d);padding:clamp(54px,7vw,80px) var(--pad) 40px}
  .foot-grid{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
  .foot-grid .big{font-family:var(--display);font-weight:200;font-size:clamp(22px,3vw,32px);color:#fff;transition:color .3s}
  .foot-grid .big:hover{color:var(--gold-soft)}
  .socials{display:flex;gap:22px;margin-top:18px}
  .socials a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);transition:color .3s}
  .socials a:hover{color:#fff}
  .foot-base{max-width:var(--maxw);margin:46px auto 0;padding-top:24px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted-d);letter-spacing:.04em}

  /* ---------- responsive ---------- */
  @media(max-width:980px){
    .praise-inner{grid-template-columns:1fr;gap:34px}
    .praise-stream{height:min(56vh,460px)}
    .about-grid{grid-template-columns:1fr;gap:34px}
  }
  @media(max-width:900px){
    nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:transform .5s var(--ease);z-index:55}
    body.menu-open header{backdrop-filter:none;-webkit-backdrop-filter:none}body.menu-open nav{transform:none}
    nav a{font-size:17px}
    .burger{display:block;z-index:56}
  }
  @media(max-width:640px){
    .praise-stream{grid-template-columns:1fr 1fr}
    .col.c3{display:none}
  }
  @media(max-width:430px){
    .praise-stream{grid-template-columns:1fr}
    .col.c2{display:none}
    .about-meta .row{flex-direction:column;gap:3px}
    .about-meta .row .v{text-align:left}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none!important}
    .reveal{opacity:1!important;transform:none!important;transition:none!important}
    .praise-bg .pl{opacity:.30}
    .praise-bg .pl2{opacity:0}
    .col-track{transform:none!important}
    html{scroll-behavior:auto}
  }

.foot-sitemap{color:var(--muted-d);transition:color .3s}
.foot-sitemap:hover{color:var(--gold)}