:root{
    --bg:        #F2F1ED;
    --bg-2:      #E8E6E0;
    --bg-3:      #D6D3CC;
    --surface:   #FAFAF7;
    --surface-2: #FFFFFF;
    --ink:       #0F0F0F;
    --ink-soft:  #2A2A28;
    --muted:     #6B6862;
    --muted-2:   #94918B;
    --line:      rgba(15,15,15,.10);
    --line-2:    rgba(15,15,15,.07);
    --accent:    #25d366;
    --accent-2:  #C8F232;
    --accent-deep:#A8D416;
    --serif:     "Cormorant Garamond", "Times New Roman", serif;
    --display:   "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --sans:      "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* ── Fluid spacing tokens ──────────────────── */
    --sp-section: clamp(64px, 10vw, 130px);
    --sp-wrap:    clamp(16px, 3vw, 32px);
    --sp-gap:     clamp(12px, 2vw, 16px);
    --sp-head:    clamp(32px, 5vw, 70px);
    --radius:     clamp(18px, 2vw, 24px);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  /* overflow-x must be on BOTH html AND body — setting it only on body
     causes browsers to transfer overflow responsibility to html, which then scrolls */
  html{
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-feature-settings: "ss01","cv11";
  }
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}

  ::selection{ background: var(--accent); color: var(--ink); }

  /* ── Layout ──────────────────────────────────── */
  .wrap{
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 var(--sp-wrap);
    position: relative;
  }
  section{
    padding: var(--sp-section) 0;
    position: relative;
  }

  /* ── Editorial section label ──────────────────── */
  .section-label{
    display:inline-flex; align-items: center; gap: 12px;
    font-size: 11.5px; letter-spacing: .04em;
    text-transform: lowercase;
    margin-bottom: clamp(18px, 3vw, 28px);
    font-weight: 500;
    padding: 8px 14px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
  }
  .section-label .dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(37,211,102,.7);
  }

  /* ── Display type ─────────────────────────────── */
  .serif-it{
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -.005em;
    line-height: .98;
    color: var(--ink);
  }
  .serif-it .alt{ color: var(--muted); }
  .h-mega{ font-size: clamp(48px, 12vw, 184px); }
  .h-1{ font-size: clamp(36px, 8vw, 124px); }
  .h-2{ font-size: clamp(32px, 6vw, 92px); }
  .h-3{ font-size: clamp(24px, 3.4vw, 52px); }
  .lede{
    font-family: var(--sans);
    font-size: clamp(14px, 1.1vw, 18px);
    color: var(--muted);
    max-width: 58ch;
    line-height: 1.55;
    font-weight: 400;
  }

  /* ── Nav (floating black pill) ────────────────── */
  .nav-wrap{
    position: fixed; top: 22px; left: 0; right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--sp-wrap);
    pointer-events: none;
  }
  .nav{
    pointer-events: auto;
    display:flex; align-items: center; justify-content: space-between;
    gap: 12px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    padding: 6px 6px 6px 16px;
    width: 100%;
    max-width: 980px;
    box-shadow: 0 18px 36px -18px rgba(15,15,15,.4);
  }
  .brand-mark{
    display:inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(13px, 1.2vw, 15px);
    letter-spacing: -.005em;
    color: var(--bg);
    min-width: 0;
  }
  .brand-mark .glyph{
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    display:inline-flex; align-items:center; justify-content:center;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    flex: none;
  }
  .brand-mark .name b{ font-weight: 500; }
  .brand-mark .name span.dot{ color: var(--accent); }
  .nav-links{
    display:none; gap: 30px; font-size: 14px; color: rgba(239,233,221,.8); font-weight: 400;
  }
  .nav-links a{ transition: color .2s ease; }
  .nav-links a:hover{ color: var(--bg); }

  /* nav-actions: wraps CTA + hamburger */
  .nav-actions{
    display:flex; align-items: center; gap: 8px; flex: none;
  }
  .nav-cta{
    padding: 10px 16px; border-radius: 999px;
    font-size: 13px; color: var(--ink);
    background: var(--accent);
    transition: all .2s ease;
    display:inline-flex; align-items:center; gap: 10px;
    font-weight: 500;
    white-space: nowrap;
  }
  .nav-cta:hover{ background: var(--accent-2); }
  .nav-cta .dot{
    width: 6px; height: 6px; background: var(--ink); border-radius: 50%;
  }

  /* Hamburger button */
  .nav-toggle{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
    padding: 0;
    flex: none;
  }
  .nav-toggle:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.35);
  }
  .nav-toggle .bar{
    display: block;
    width: 16px; height: 1.5px;
    background: var(--bg);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease, width .3s ease;
    transform-origin: center;
  }
  /* Open state — bars become × */
  .nav-toggle.is-open .bar:nth-child(1){
    transform: translateY(3.25px) rotate(45deg);
  }
  .nav-toggle.is-open .bar:nth-child(2){
    transform: translateY(-3.25px) rotate(-45deg);
  }

  /* Mobile menu panel */
  .mobile-menu{
    pointer-events: none;
    width: 100%;
    max-width: 980px;
    margin-top: 8px;
    background: var(--ink);
    border-radius: 20px;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, padding .3s ease;
    box-shadow: 0 24px 48px -12px rgba(15,15,15,.45);
  }
  .mobile-menu.is-open{
    pointer-events: auto;
    max-height: 420px;
    opacity: 1;
    padding: 16px 20px 20px;
  }
  .mm-link{
    display: block;
    padding: 14px 8px;
    font-size: 18px;
    font-weight: 500;
    color: rgba(239,233,221,.75);
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: color .2s ease;
    letter-spacing: -.01em;
  }
  .mm-link:hover{ color: var(--bg); }
  .mm-link:first-child{ padding-top: 8px; }
  .mm-cta{
    display: inline-flex;
    margin-top: 16px;
    padding: 13px 24px;
    background: var(--accent);
    color: var(--ink);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background .2s ease;
  }
  .mm-cta:hover{ background: var(--accent-2); }

  /* Desktop: hide hamburger, show nav links */
  @media (min-width: 900px){
    .nav-toggle{ display: none; }
    .mobile-menu{ display: none; }
    .nav-links{ display: flex; }
    .nav{ padding: 8px 8px 8px 22px; gap: 28px; }
    .nav-cta{ padding: 11px 18px; font-size: 13.5px; }
  }

  /* ── Buttons ─────────────────────────────────── */
  .btn{
    display:inline-flex; align-items:center; gap: 12px;
    padding: 14px 22px;
    font-size: 14px; font-weight: 500; letter-spacing: .005em;
    border-radius: 999px;
    transition: all .25s ease;
    white-space: nowrap;
  }
  .btn-primary{
    background: var(--ink);
    color: var(--bg);
  }
  .btn-primary:hover{ background: #2A2724; transform: translateY(-1px); }
  .btn-primary .arrow-bubble{
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent);
    display:inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: transform .3s ease;
  }
  .btn-primary:hover .arrow-bubble{ transform: rotate(-45deg); }
  .btn-ghost{
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
  }
  .btn-ghost:hover{ border-color: var(--ink); background: var(--ink); color: var(--bg); }
  @media (min-width: 768px){
    .btn{ padding: 16px 26px; }
  }

  /* ── HERO ─────────────────────────────────────── */
  .hero{
    padding: 100px 14px 14px;
    min-height: 100svh;
    display: flex; flex-direction: column;
  }
  .hero-stage{
    position: relative;
    flex: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(15,15,15,.05) 0%, transparent 30%, rgba(15,15,15,.55) 100%),
      linear-gradient(160deg, #4A4A48 0%, #2A2A28 40%, #0F0F0F 100%);
    display:flex; flex-direction: column; justify-content: space-between;
    padding: clamp(24px, 4vw, 56px);
    padding-top: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(24px, 3.5vw, 44px);
  }
  .hero-bg-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .hero-stage::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(15,15,15,.55) 0%, rgba(15,15,15,.35) 40%, rgba(15,15,15,.7) 100%);
    z-index: 1;
    pointer-events: none;
  }
  .hero-stage::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(60% 50% at 50% 30%, rgba(37,211,102,.06), transparent 60%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px);
    pointer-events:none;
    z-index: 2;
  }
  .ph-tag{
    position:absolute; top: clamp(14px, 2vw, 24px); right: clamp(16px, 2.5vw, 28px);
    z-index: 4;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px; color: rgba(255,255,255,.55);
    letter-spacing: .22em; text-transform: uppercase;
    display:none; align-items: center; gap: 8px;
  }
  .ph-tag::before{
    content:""; width: 6px; height:6px; border-radius:50%; background: #e84a4a;
    box-shadow: 0 0 12px #e84a4a;
    animation: blink 1.8s ease-in-out infinite;
  }
  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.35;} }
  @media (min-width: 768px){
    .ph-tag{ display: inline-flex; }
    .hero{ padding: 120px 24px 24px; }
  }

  .hero-top{
    position: relative; z-index: 3;
    display:flex; justify-content: space-between; align-items: flex-start;
    color: rgba(255,255,255,.85);
    gap: 12px;
  }
  .hero-top .micro{
    font-size: clamp(9.5px, 1vw, 11.5px);
    letter-spacing: .1em; text-transform: uppercase;
    display:inline-flex; align-items: center; gap: 8px;
  }
  .hero-top .micro::before{
    content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 12px rgba(37,211,102,.7);
    flex: none;
  }
  .hero-top .meta{
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(255,255,255,.7);
    display: none;
  }
  .hero-center{
    position: relative; z-index: 3;
    text-align: center;
    margin: auto 0;
    padding: clamp(24px, 4vw, 40px) 0;
  }
  .hero-title{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(38px, 10vw, 176px);
    line-height: .92;
    letter-spacing: -.01em;
    color: #F4F4F2;
    text-shadow: 0 4px 30px rgba(0,0,0,.25);
  }
  .hero-title .alt{ color: var(--accent); }
  .hero-sub{
    margin-top: clamp(16px, 2vw, 26px);
    font-family: var(--sans);
    font-size: clamp(14px, 1.15vw, 18px);
    color: rgba(244,244,242,.78);
    max-width: 56ch;
    margin-left: auto; margin-right: auto;
    line-height: 1.55;
  }
  .hero-ctas{
    margin-top: clamp(24px, 3vw, 38px);
    display:inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  }
  .hero-ctas .btn-primary{ background: var(--bg); color: var(--ink);}
  .hero-ctas .btn-primary:hover{ background: #FFFFFF; }
  .hero-ctas .btn-primary .arrow-bubble{ background: var(--accent); }
  .hero-ctas .btn-ghost{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    color: var(--bg);
    backdrop-filter: blur(8px);
  }
  .hero-ctas .btn-ghost:hover{ background: var(--bg); color: var(--ink); border-color: var(--bg);}

  .hero-bottom{
    position: relative; z-index: 3;
    display:flex; flex-direction: column; align-items: start; gap: 20px;
    color: rgba(255,255,255,.7);
  }
  .hero-bottom .stat-mini{
    display:flex; flex-wrap: wrap; gap: 16px 28px;
  }
  .hero-bottom .stat-mini .item b{
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(24px, 3vw, 32px); color: #F4F4F2; display:block; line-height: 1;
  }
  .hero-bottom .stat-mini .item span{
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(244,244,242,.58); margin-top: 5px; display: block;
  }
  .hero-bottom .scroll-cue{
    font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    display:none; align-items: center; gap: 14px;
    color: rgba(255,255,255,.7);
  }
  .hero-bottom .scroll-cue::before{
    content:""; width: 56px; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.4), transparent);
  }
  @media (min-width: 768px){
    .hero-top .meta{ display: block; font-size: 16px; }
    .hero-top .micro{ font-size: 11.5px; letter-spacing: .14em; }
    .hero-bottom{ flex-direction: row; justify-content: space-between; align-items: flex-end; }
    .hero-bottom .stat-mini{ gap: 36px; flex-wrap: nowrap; }
    .hero-bottom .stat-mini .item b{ font-size: 32px; }
    .hero-bottom .stat-mini .item span{ font-size: 11px; }
    .hero-bottom .scroll-cue{ display: inline-flex; }
  }

  /* ── Ticker ──────────────────────────────────── */
  .ticker{
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: clamp(14px, 2vw, 24px);
    padding: clamp(14px, 2vw, 20px) 0;
    overflow: hidden;           /* clips the wide track */
    position: relative;
    width: 100%;                /* explicitly contain — never wider than parent */
    max-width: 100%;
  }
  .ticker-track{
    display:flex; gap: clamp(32px, 5vw, 60px);
    white-space: nowrap;
    animation: ticker 60s linear infinite;
    align-items: center;
    width: max-content;         /* explicit — keeps it a formatting context */
  }
  .t-item{
    font-family: var(--display);
    font-size: clamp(14px, 1.6vw, 22px);
    color: var(--ink);
    display:inline-flex; align-items: center; gap: clamp(10px, 1.5vw, 18px);
    font-weight: 400;
  }
  .t-item .star{
    color: var(--accent-deep);
    font-size: clamp(10px, 1vw, 14px);
  }
  @keyframes ticker { from{transform: translateX(0);} to{transform: translateX(-50%);} }

  /* ─────────────────────────────────────────── */
  /* BY THE NUMBERS                                */
  /* ─────────────────────────────────────────── */
  .nums-head{
    display:grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 28px);
    margin-bottom: var(--sp-head);
  }
  .nums-side-image{
    margin-top: clamp(20px, 3vw, 28px);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .nums-side-image img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  @media (min-width: 900px){
    .nums-head{
      grid-template-columns: 1.4fr 1fr;
      gap: clamp(40px, 6vw, 80px);
      align-items: end;
    }
  }
  .editorial-h{
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 5.5vw, 100px);
    line-height: .95;
    letter-spacing: -.005em;
    color: var(--ink);
  }
  .editorial-h .alt{ color: var(--muted); }
  .editorial-h .lime{
    background: var(--accent);
    color: var(--ink);
    padding: 0 .15em;
    border-radius: .08em;
  }

  .feature-stat{
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(28px, 4vw, 56px) 0;
    display:grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 56px);
    align-items: end;
    margin-bottom: clamp(24px, 3vw, 36px);
  }
  .feature-stat .label{
    font-size: 11px; color: var(--muted-2);
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: clamp(8px, 1.5vw, 16px);
  }
  .fs-num{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(36px, 7vw, 124px);
    color: var(--ink);
    line-height: .9; letter-spacing: -.015em;
  }
  .fs-num .accent{ color: var(--accent-deep); }
  .fs-rev .fs-num{ color: var(--ink); }
  .fs-rev .highlight{
    display: inline-block;
    background: var(--accent);
    padding: 0 .14em;
    border-radius: .06em;
  }
  .fs-arrow{
    display:flex; align-items: center; justify-content: center;
    color: var(--ink);
    transform: rotate(90deg);
    padding: 0;
  }
  .feature-stat .descr{
    grid-column: 1 / -1;
    color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 76ch;
    padding-bottom: 0;
  }
  .feature-stat .descr a{
    display:inline-flex; align-items: center; gap: 6px;
    color: var(--ink); margin-top: 10px;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px; font-weight: 500;
  }
  @media (min-width: 900px){
    .feature-stat{
      grid-template-columns: auto auto 1fr;
      padding: 56px 0;
    }
    .fs-arrow{ transform: none; padding-bottom: 28px; }
  }

  .counters{
    display:grid; grid-template-columns: 1fr; gap: var(--sp-gap);
  }
  .ct-cell{
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: clamp(24px, 3vw, 32px);
    transition: transform .3s ease, border-color .3s ease;
  }
  .ct-cell:hover{ transform: translateY(-3px); border-color: var(--line);}
  .ct-cell .ix{
    font-family: var(--display); font-size: 18px; color: var(--muted-2);
    margin-bottom: clamp(20px, 3vw, 38px);
  }
  .ct-num{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(36px, 5vw, 80px);
    color: var(--ink); letter-spacing: -.015em; line-height: 1;
  }
  .ct-num .plus{ color: var(--accent-deep); }
  .ct-label{
    font-family: var(--sans);
    font-size: 16px; color: var(--ink);
    margin-top: clamp(12px, 1.5vw, 20px); font-weight: 500;
  }
  .ct-desc{
    font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.55;
  }
  @media (min-width: 600px){ .counters{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px){ .counters{ grid-template-columns: repeat(3, 1fr); } }

  /* ─────────────────────────────────────────── */
  /* ABOUT                                         */
  /* ─────────────────────────────────────────── */
  .about-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 56px);
    align-items: start;
  }
  .about-left{ position: static; }
  .about-photo{
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%),
      linear-gradient(160deg, #BFBCB5 0%, #7A7873 55%, #2E2D2B 100%);
    margin-bottom: clamp(20px, 3vw, 32px);
  }
  .about-photo img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .about-photo::before{
    content:""; position: absolute; inset:0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px);
    z-index: 2;
  }
  .about-photo .ph-label{
    position: absolute; left: 20px; bottom: 18px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10.5px; color: rgba(255,255,255,.6);
    letter-spacing: .18em;
    z-index: 3;
  }
  .about-photo .ph-label b{ display:block; color: #fff; margin-bottom: 4px;}
  .nias-mark{
    display:inline-flex; align-items: center; gap: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-2);
  }
  .nias-mark .m-name{
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    padding: 11px 18px;
    color: var(--ink);
    letter-spacing: .005em;
  }
  .nias-mark .m-r{
    padding: 11px 14px;
    background: var(--ink);
    color: var(--accent);
    font-family: var(--display);
    font-size: 18px;
  }
  .about-body{ display:flex; flex-direction: column; gap: clamp(24px, 3vw, 36px);}
  .about-block{
    display:grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--line-2);
    align-items: start;
  }
  .about-block:nth-child(3){ border-bottom: none; padding-bottom: 0;}
  .about-block .stat-side{ min-width: 0; }
  .about-block .stat-num{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(36px, 4.5vw, 72px);
    color: var(--ink); letter-spacing: -.015em; line-height: .95;
  }
  .about-block .stat-num .accent{
    background: var(--accent); padding: 0 .12em; border-radius: .06em;
  }
  .about-block .stat-label{
    font-size: 11px; color: var(--muted-2);
    letter-spacing: .12em; text-transform: uppercase;
    margin-top: clamp(8px, 1vw, 14px); max-width: 18ch;
  }
  .about-block .text{
    color: var(--muted); font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.7; max-width: 58ch;
  }
  .about-block .text strong{ color: var(--ink); font-weight: 500;}
  .about-pillar-strip{
    margin-top: clamp(32px, 4vw, 60px);
    padding-top: clamp(20px, 2.5vw, 32px);
    border-top: 1px solid var(--line-2);
    display:flex; flex-wrap: wrap; gap: 8px clamp(16px, 2vw, 28px);
    font-size: 13px; color: var(--muted);
  }
  .about-pillar-strip span{display:inline-flex; align-items: center; gap: 10px;}
  .about-pillar-strip span::before{
    content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-deep);
  }
  .about-right-image{
    margin-top: clamp(28px, 4vw, 48px);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .about-right-image img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  @media (min-width: 900px){
    .about-grid{
      grid-template-columns: 1fr 1.2fr;
      gap: clamp(48px, 7vw, 90px);
    }
    .about-left{ position: sticky; top: 100px; }
    .about-block{
      grid-template-columns: auto 1fr;
      gap: clamp(20px, 3vw, 36px);
    }
    .about-block .stat-side{ min-width: 200px; }
  }

  /* ─────────────────────────────────────────── */
  /* TRUST STRIP                                   */
  /* ─────────────────────────────────────────── */
  .trust-strip{
    padding: clamp(32px, 4vw, 40px) 0 clamp(40px, 5vw, 60px);
    border-top: 1px solid var(--line);
  }
  .trust-head{
    max-width: 680px;
    margin-bottom: clamp(28px, 4vw, 48px);
  }
  .trust-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-gap);
  }
  .trust-card{
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: clamp(22px, 2.5vw, 28px) clamp(20px, 2.5vw, 26px) clamp(20px, 2.5vw, 24px);
    transition: transform .3s ease, border-color .3s ease;
  }
  .trust-card:hover{
    transform: translateY(-3px);
    border-color: var(--line);
  }
  .trust-ix{
    font-family: var(--display);
    font-size: 13px;
    color: var(--muted-2);
    margin-bottom: clamp(18px, 2.5vw, 32px);
  }
  .trust-num{
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 56px);
    color: var(--ink);
    letter-spacing: -.04em;
    line-height: 1;
  }
  .trust-label{
    font-family: var(--sans);
    font-size: clamp(12.5px, 1.1vw, 14px);
    color: var(--muted);
    margin-top: clamp(8px, 1.2vw, 14px);
    font-weight: 500;
  }
  @media (min-width: 768px){
    .trust-grid{ grid-template-columns: repeat(4, 1fr); }
  }

  /* ─────────────────────────────────────────── */
  /* SERVICES                                      */
  /* ─────────────────────────────────────────── */
  .services-head{
    margin-bottom: clamp(32px, 4vw, 50px);
    max-width: 1000px;
  }
  .svc-list{ border-top: 1px solid var(--line);}
  .svc-item{
    border-bottom: 1px solid var(--line);
    display:grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: clamp(20px, 2.5vw, 32px) 0;
    align-items: center;
    transition: background .3s ease, padding .3s ease;
    cursor: pointer;
    position: relative;
  }
  .svc-item:hover{
    background: var(--accent);
    padding-left: clamp(12px, 2vw, 22px);
    padding-right: clamp(12px, 2vw, 22px);
  }
  .svc-num{
    font-family: var(--display); font-size: 18px; color: var(--muted);
  }
  .svc-item:hover .svc-num{ color: var(--ink); }
  .svc-title{
    font-family: var(--display); font-weight: 400;
    font-size: clamp(22px, 3vw, 52px);
    line-height: 1.02; letter-spacing: -.005em;
    color: var(--ink);
  }
  .svc-desc{
    color: var(--muted); font-size: 15px; line-height: 1.55;
    max-width: 60ch;
    grid-column: 2;
  }
  .svc-item:hover .svc-desc{ color: var(--ink-soft);}
  .svc-arrow{
    width: 56px; height: 56px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display:none; align-items: center; justify-content: center;
    color: var(--ink);
    transition: all .3s ease;
    flex: none;
  }
  .svc-item:hover .svc-arrow{
    background: var(--ink); color: var(--accent); border-color: var(--ink);
    transform: rotate(-45deg);
  }
  @media (min-width: 900px){
    .svc-item{
      grid-template-columns: 70px 1.2fr 2fr auto;
      gap: 32px;
      padding: 32px 12px;
    }
    .svc-desc{ grid-column: auto; }
    .svc-arrow{ display: flex; }
  }

  /* ─────────────────────────────────────────── */
  /* PROGRAMS                                      */
  /* ─────────────────────────────────────────── */
  .programs-head{
    margin-bottom: clamp(36px, 5vw, 60px);
    display:grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 28px);
  }

  .programs-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: var(--sp-gap);
  }
  .program{
    grid-column: span 1;
    min-height: 0;
    padding: clamp(24px, 2.5vw, 30px) clamp(22px, 2.5vw, 28px) clamp(22px, 2.5vw, 26px);
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    display:flex; flex-direction: column;
    transition: transform .35s ease, border-color .35s ease;
    position: relative;
    overflow: hidden;
  }
  .program:hover{ transform: translateY(-4px); border-color: var(--ink);}
  .program.featured{
    background: var(--ink); color: var(--bg);
  }
  .program.featured .p-title{ color: var(--bg);}
  .program.featured .p-num{ color: var(--accent);}
  .program.featured .p-tag{ color: var(--bg); border-color: rgba(239,233,221,.25); background: rgba(239,233,221,.08);}
  .program.featured .p-promise{ color: rgba(239,233,221,.7);}
  .program.featured .p-foot{ border-top-color: rgba(239,233,221,.12);}
  .program.featured .p-meta{ color: rgba(239,233,221,.7);}
  .program.featured .p-meta b{ color: var(--bg);}
  .program.featured .p-arrow{
    background: var(--accent); border-color: var(--accent); color: var(--ink);
  }

  .program .p-head{ display:flex; align-items: center; justify-content: space-between;}
  .program .p-num{
    font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--muted-2);
    letter-spacing: .02em;
  }
  .program .p-tag{
    font-size: 10.5px; text-transform: uppercase; color: var(--muted);
    letter-spacing: .2em;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .program .p-title{
    margin-top: clamp(28px, 4vw, 60px);
    font-family: var(--display); font-weight: 500;
    font-size: clamp(24px, 2.8vw, 46px);
    line-height: .98; letter-spacing: -.005em;
    color: var(--ink);
  }
  .program.featured .p-title{ font-size: clamp(26px, 3.5vw, 60px);}
  .program .p-promise{
    margin-top: clamp(12px, 1.5vw, 18px);
    font-size: 14.5px; color: var(--muted); line-height: 1.55;
    max-width: 38ch;
  }
  .program .p-foot{
    margin-top: auto;
    padding-top: clamp(18px, 2vw, 24px);
    display:flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--line-2);
  }
  .program .p-meta{ display:flex; gap: 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap;}
  .program .p-meta b{ color: var(--ink); font-weight: 600;}
  .p-arrow{
    width: 40px; height: 40px;
    border: 1px solid var(--ink);
    background: var(--bg);
    border-radius: 50%;
    display:inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: all .3s ease;
    flex: none;
  }
  .program:hover .p-arrow{
    background: var(--ink); color: var(--accent); border-color: var(--ink);
  }
  .program.featured:hover .p-arrow{ background: var(--accent-2); border-color: var(--accent-2);}
  @media (min-width: 600px){
    .programs-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 900px){
    .programs-head{
      grid-template-columns: 1.4fr 1fr;
      gap: clamp(40px, 6vw, 80px);
      align-items: end;
    }
  }
  @media (min-width: 1024px){
    .programs-grid{ grid-template-columns: repeat(6, 1fr); }
    .program{ grid-column: span 2; min-height: 380px; }
    .program.featured{ grid-column: span 3; }
  }

  /* ─────────────────────────────────────────── */
  /* SELECTED WORK                                 */
  /* ─────────────────────────────────────────── */
  .work-head{
    margin-bottom: clamp(28px, 3vw, 40px);
    max-width: 900px;
  }
  .work-list{ border-top: 1px solid var(--line);}
  .work-item{
    border-bottom: 1px solid var(--line);
    display:grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    padding: clamp(18px, 2vw, 26px) 0;
    align-items: center;
    transition: all .3s ease;
    position: relative;
  }
  .work-item:hover{ background: var(--ink); color: var(--bg); padding-left: 20px; padding-right: 20px;}
  .work-item:hover .work-num{ color: var(--accent);}
  .work-item:hover .work-cat{ color: rgba(239,233,221,.6);}
  .work-item:hover .work-title{ color: var(--bg);}
  .work-item:hover .work-metric{ color: var(--accent);}
  .work-item:hover .work-metric small{ color: rgba(239,233,221,.6);}
  .work-item:hover .work-arrow{ background: var(--accent); border-color: var(--accent); color: var(--ink); transform: rotate(-45deg);}
  .work-num{
    font-family: var(--display); color: var(--muted); font-size: 18px;
    grid-column: 1;
  }
  .work-cat{
    font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
    grid-column: 1;
  }
  .work-title{
    font-family: var(--display); font-weight: 400;
    font-size: clamp(18px, 2vw, 32px);
    letter-spacing: -.005em; color: var(--ink); line-height: 1.1;
    grid-column: 1 / -1;
  }
  .work-metric{
    font-family: var(--display); font-weight: 500;
    color: var(--accent-deep);
    font-size: clamp(18px, 2vw, 32px);
    letter-spacing: -.01em;
    text-align: left;
    grid-column: 1;
  }
  .work-metric small{
    display:block; font-family: var(--sans); font-style: normal;
    font-size: 11px; color: var(--muted-2);
    letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; font-weight: 400;
  }
  .work-arrow{
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--ink);
    display:inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: all .3s ease;
    grid-row: 1 / -1;
    grid-column: 2;
  }
  @media (min-width: 900px){
    .work-item{
      grid-template-columns: 70px 1.3fr 2fr 1fr auto;
      gap: 28px;
      row-gap: 0;
      padding: 26px 8px;
    }
    .work-num{ grid-column: auto; }
    .work-cat{ grid-column: auto; }
    .work-title{ grid-column: auto; }
    .work-metric{ grid-column: auto; text-align: right; }
    .work-arrow{ grid-row: auto; grid-column: auto; }
  }

  /* ─────────────────────────────────────────── */
  /* WHO IT'S FOR                                  */
  /* ─────────────────────────────────────────── */
  .who-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: var(--sp-gap);
    margin-top: clamp(28px, 4vw, 48px);
  }
  .who-card{
    position: relative;
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: clamp(22px, 2.5vw, 28px) clamp(20px, 2.5vw, 26px);
    overflow: hidden;
    min-height: 0;
    display:flex; flex-direction: column; justify-content: space-between;
    gap: clamp(24px, 3vw, 40px);
    transition: all .35s ease;
  }
  .who-card:hover{ background: var(--accent); border-color: var(--ink); transform: translateY(-3px);}
  .who-card .top{ display:flex; justify-content: space-between; align-items: center;}
  .who-card .ix{ font-family: var(--display); font-size: 18px; color: var(--muted);}
  .who-card .tag{
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2);
    padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  }
  .who-card:hover .tag{ border-color: var(--ink); color: var(--ink);}
  .who-name{
    font-family: var(--display); font-weight: 400;
    font-size: clamp(24px, 2.8vw, 44px);
    line-height: 1.05; letter-spacing: -.005em;
    color: var(--ink);
  }
  .who-desc{ font-size: 13.5px; color: var(--muted); margin-top: 8px; max-width: 32ch;}
  .who-card:hover .who-desc{ color: var(--ink-soft);}
  @media (min-width: 600px){ .who-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px){ .who-grid{ grid-template-columns: repeat(3, 1fr); } }

  /* ─────────────────────────────────────────── */
  /* SOCIAL PROOF                                  */
  /* ─────────────────────────────────────────── */
  .proof-head{
    margin-bottom: clamp(32px, 4vw, 50px);
    max-width: 760px;
  }
  .testimonial-scroller{
    margin: 0 calc(var(--sp-wrap) * -1);
    padding: 0 var(--sp-wrap);
    overflow: hidden; position: relative;
  }
  .testimonial-scroller::before, .testimonial-scroller::after{
    content:""; position:absolute; top:0; bottom:0; width: clamp(40px, 6vw, 80px); z-index: 3; pointer-events: none;
  }
  .testimonial-scroller::before{ left: 0; background: linear-gradient(90deg, var(--bg), transparent);}
  .testimonial-scroller::after{ right: 0; background: linear-gradient(-90deg, var(--bg), transparent);}

  .testimonial-row{
    display:flex; gap: var(--sp-gap);
    animation: scroll-x 70s linear infinite;
    width: max-content;
  }
  .testimonial-row.reverse{ animation-direction: reverse; animation-duration: 90s;}
  .testimonial-row:hover{ animation-play-state: paused;}
  @keyframes scroll-x { from{transform: translateX(0);} to{transform: translateX(-50%);} }

  .tcard{
    flex: 0 0 clamp(280px, 30vw, 380px);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    padding: clamp(20px, 2.5vw, 26px) clamp(18px, 2.5vw, 24px);
    display:flex; flex-direction: column; gap: 14px;
    min-height: 0;
  }
  .tcard.featured{
    background: var(--ink); color: var(--bg);
    border-color: var(--ink);
  }
  .tcard.featured .quote{ color: var(--bg);}
  .tcard.featured .author{ border-top-color: rgba(239,233,221,.12);}
  .tcard.featured .name b{ color: var(--bg);}
  .tcard.featured .name span{ color: rgba(239,233,221,.6);}
  .tcard.featured .metric b{ color: var(--accent);}
  .tcard.featured .metric span{ color: rgba(239,233,221,.6);}
  .tcard.featured .avatar{ background: rgba(239,233,221,.1); color: var(--accent); border-color: rgba(239,233,221,.15);}
  .tcard.featured .quote::before{ color: var(--accent);}

  .tcard .quote{
    font-family: var(--display); font-weight: 400;
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--ink);
    line-height: 1.3; letter-spacing: -.005em;
    flex: 1;
  }
  .tcard .quote::before{ content:"\201C"; color: var(--muted); font-size: 28px; margin-right: 2px;}
  .tcard .author{
    display:flex; gap: 10px; align-items: center;
    padding-top: 14px; border-top: 1px solid var(--line-2);
  }
  .tcard .avatar{
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--display); color: var(--ink); font-size: 13px;
    font-weight: 500;
    flex: none;
  }
  .tcard .name b{ display:block; font-weight: 500; font-size: 13px; color: var(--ink);}
  .tcard .name span{ font-size: 11px; color: var(--muted);}
  .tcard .metric{ margin-left: auto; text-align: right;}
  .tcard .metric b{
    display:block; font-family: var(--display); font-weight: 500;
    color: var(--ink); font-size: clamp(18px, 1.8vw, 22px); line-height: 1;
  }
  .tcard .metric span{ font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);}
  @media (min-width: 768px){
    .tcard .avatar{ width: 36px; height: 36px; font-size: 14px; }
    .tcard .name b{ font-size: 13.5px; }
    .tcard .name span{ font-size: 11.5px; }
    .tcard .author{ gap: 12px; }
  }

  /* ─────────────────────────────────────────── */
  /* PARTNER WALL                                  */
  /* ─────────────────────────────────────────── */
  .wall-head{
    margin-bottom: clamp(36px, 5vw, 60px);
    display:grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 28px);
  }
  .wall-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 1.5vw, 18px);
  }

  .partner-tile{
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    display:flex; align-items: center; justify-content: center;
    position: relative;
    transition: all .45s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
  }
  .partner-tile:hover{
    transform: rotate(0deg) scale(1.04) !important;
    background: var(--accent);
    border-color: var(--ink);
    z-index: 2;
  }
  .partner-tile .logo-ph{
    font-family: var(--display); font-weight: 500;
    color: var(--muted); font-size: clamp(14px, 1.5vw, 19px); letter-spacing: -.005em;
    text-align: center; padding: 0 8px;
    transition: color .3s ease;
  }
  .partner-tile:hover .logo-ph{ color: var(--ink);}
  .partner-tile .ix{
    position: absolute; top: 8px; right: 10px;
    font-family: var(--display); font-size: 11px; color: var(--muted-2);
  }
  .partner-tile .tag{
    position: absolute; bottom: 8px; left: 10px;
    font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink); background: var(--accent);
    padding: 3px 7px; border-radius: 999px;
  }
  .partner-tile:nth-child(3n)  { transform: rotate(-2.5deg); }
  .partner-tile:nth-child(3n+1){ transform: rotate(1.8deg); }
  .partner-tile:nth-child(3n+2){ transform: rotate(-1.2deg); }
  .partner-tile:nth-child(5n)  { transform: rotate(3deg); }

  .wall-foot{
    margin-top: clamp(28px, 4vw, 48px);
    display:flex; flex-direction: column; align-items: start; gap: 20px;
    border-top: 1px solid var(--line);
    padding-top: clamp(24px, 3vw, 36px);
  }
  .wall-foot .total{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(40px, 5vw, 84px);
    color: var(--ink); line-height: 1; letter-spacing: -.015em;
  }
  .wall-foot .total .plus{ color: var(--accent-deep);}
  .wall-foot .total small{
    font-family: var(--sans); font-style: normal; font-size: 13px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); display:block; margin-top: 12px; font-weight: 400;
  }
  .wall-foot .copy{ max-width: 38ch; color: var(--muted); font-size: 14.5px;}
  @media (min-width: 600px){
    .wall-grid{ grid-template-columns: repeat(3, 1fr); }
    .wall-foot{ flex-direction: row; justify-content: space-between; align-items: end; }
    .partner-tile .tag{ font-size: 9px; letter-spacing: .2em; padding: 4px 8px; }
    .partner-tile .ix{ top: 10px; right: 12px; }
    .partner-tile .logo-ph{ padding: 0 12px; }
  }
  @media (min-width: 900px){
    .wall-head{
      grid-template-columns: 1.4fr 1fr;
      gap: clamp(40px, 6vw, 80px);
      align-items: end;
    }
    .wall-grid{ grid-template-columns: repeat(6, 1fr); }
  }

  /* ─────────────────────────────────────────── */
  /* RESOURCES                                     */
  /* ─────────────────────────────────────────── */
  .res-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: var(--sp-gap);
    margin-top: clamp(28px, 4vw, 48px);
  }
  .res{
    border-radius: var(--radius);
    border: 1px solid var(--line);
    padding: clamp(24px, 3vw, 32px);
    display:flex; flex-direction: column; gap: 12px;
    min-height: 0;
    position: relative; overflow: hidden;
    transition: all .35s ease;
    background: var(--surface-2);
  }
  .res:hover{ transform: translateY(-3px); border-color: var(--ink);}
  .res.wa{ background: #25D366; border-color: #25D366;}
  .res.wa .res-tag, .res.wa .res-title, .res.wa .res-desc, .res.wa .res-stat, .res.wa .res-stat b{ color: var(--ink);}
  .res.wa .res-foot{ border-top-color: rgba(15,15,15,.18);}
  .res.wa .res-arrow{ background: var(--ink); border-color: var(--ink); color: #25D366;}
  .res.wa:hover .res-arrow{ background: var(--accent); color: var(--ink); border-color: var(--accent);}
  .res.webinar{ background: var(--ink); border-color: var(--ink);}
  .res.webinar .res-tag{ color: var(--accent);}
  .res.webinar .res-title{ color: var(--bg);}
  .res.webinar .res-desc{ color: rgba(239,233,221,.7);}
  .res.webinar .res-foot{ border-top-color: rgba(239,233,221,.15);}
  .res.webinar .res-stat{ color: rgba(239,233,221,.7);}
  .res.webinar .res-stat b{ color: var(--bg);}
  .res.webinar .res-arrow{ background: var(--accent); border-color: var(--accent); color: var(--ink);}

  .res-tag{ font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);}
  .res-title{
    font-family: var(--display); font-weight: 400;
    font-size: clamp(22px, 2.4vw, 40px);
    line-height: 1.05; color: var(--ink); letter-spacing: -.005em;
  }
  .res-desc{ font-size: 14px; color: var(--muted); line-height: 1.55;}
  .res-foot{ margin-top: auto; display:flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--line);}
  .res-stat{ font-size: 12.5px; color: var(--muted);}
  .res-stat b{ color: var(--ink); font-weight: 500;}
  .res-arrow{
    width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%;
    display:flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: all .3s ease;
    flex: none;
  }
  .res:hover .res-arrow{ background: var(--ink); color: var(--accent); border-color: var(--ink); transform: rotate(-45deg);}
  @media (min-width: 900px){
    .res-grid{ grid-template-columns: 1.4fr 1fr 1fr; }
  }

  /* ─────────────────────────────────────────── */
  /* FAQ                                           */
  /* ─────────────────────────────────────────── */
  .faq-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
    align-items: start;
  }
  .faq-item{
    border-bottom: 1px solid var(--line);
    padding: clamp(18px, 2vw, 24px) 0;
  }
  .faq-q{
    width: 100%; display:flex; justify-content: space-between; align-items: center;
    gap: clamp(16px, 2.5vw, 32px);
    font-family: var(--display); font-weight: 400;
    font-size: clamp(17px, 1.9vw, 28px);
    color: var(--ink); text-align: left;
    line-height: 1.25; letter-spacing: -.005em;
  }
  .faq-plus{
    width: 36px; height: 36px; flex: none; border-radius: 50%; position: relative;
    border: 1px solid var(--ink);
    transition: all .3s ease;
  }
  .faq-plus::before, .faq-plus::after{
    content:""; position: absolute; top: 50%; left: 50%;
    background: var(--ink);
    transform: translate(-50%,-50%);
  }
  .faq-plus::before{ width: 12px; height: 1.5px;}
  .faq-plus::after { width: 1.5px; height: 12px; transition: transform .3s ease;}
  .faq-item.open .faq-plus{ background: var(--accent); border-color: var(--ink);}
  .faq-item.open .faq-plus::after{ transform: translate(-50%,-50%) rotate(90deg);}
  .faq-a{
    max-height: 0; overflow: hidden;
    transition: max-height .4s ease, margin-top .3s ease, opacity .3s ease;
    color: var(--muted); font-size: 15px; line-height: 1.7;
    opacity: 0; max-width: 60ch;
  }
  .faq-item.open .faq-a{ max-height: 300px; margin-top: 16px; opacity: 1;}
  @media (min-width: 900px){
    .faq-grid{
      grid-template-columns: 1fr 1.6fr;
      gap: clamp(40px, 6vw, 80px);
    }
  }

  /* ─────────────────────────────────────────── */
  /* FINAL CTA                                     */
  /* ─────────────────────────────────────────── */
  .final{
    padding: clamp(16px, 2.5vw, 32px) clamp(14px, 2vw, 24px);
  }
  .final-card{
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--radius);
    padding: clamp(40px, 7vw, 96px) clamp(22px, 5vw, 64px) clamp(32px, 5vw, 64px);
    text-align: left;
    position: relative;
    overflow: hidden;
  }
  .final-card::before{
    content:""; position: absolute; top: -100px; right: -80px;
    width: 360px; height: 360px;
    background: var(--accent);
    border-radius: 50%;
    opacity: .12;
    filter: blur(40px);
  }
  .final .section-label{
    background: var(--accent); color: var(--ink);
  }
  .final-headline{
    font-family: var(--display); font-weight: 400;
    font-size: clamp(32px, 8vw, 160px);
    line-height: .92; letter-spacing: -.005em;
    margin: clamp(16px, 2vw, 24px) 0 0;
    max-width: 14ch;
    color: var(--bg);
  }
  .final-headline .lime{ color: var(--accent); }
  .final-headline .uline{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--accent);}
  .final-meta{
    margin-top: clamp(32px, 4vw, 56px);
    display:grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    border-top: 1px solid rgba(239,233,221,.12);
    padding-top: clamp(20px, 3vw, 32px);
    position: relative; z-index: 2;
  }
  .final-meta .copy{ color: rgba(239,233,221,.7); font-size: clamp(14px, 1.2vw, 16px); max-width: 56ch;}
  .final-ctas{ display:flex; flex-wrap: wrap; gap: 12px;}
  .final-ctas .btn-primary{ background: var(--accent); color: var(--ink);}
  .final-ctas .btn-primary:hover{ background: var(--accent-2);}
  .final-ctas .btn-primary .arrow-bubble{ background: var(--ink); color: var(--accent);}
  .final-ctas .btn-ghost{
    background: transparent; border-color: rgba(239,233,221,.2); color: var(--bg);
  }
  .final-ctas .btn-ghost:hover{ background: var(--bg); color: var(--ink); border-color: var(--bg);}
  @media (min-width: 900px){
    .final-meta{
      grid-template-columns: 1fr auto;
      align-items: end;
    }
  }

  /* ─────────────────────────────────────────── */
  /* FOOTER                                        */
  /* ─────────────────────────────────────────── */
  footer{
    padding: clamp(48px, 6vw, 70px) 0 clamp(24px, 3vw, 36px);
    position: relative;
  }
  .foot-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 60px);
    margin-bottom: clamp(32px, 4vw, 50px);
  }
  .foot-brand{ display:flex; flex-direction: column; gap: 18px; grid-column: 1 / -1;}
  .foot-brand .brand-mark{
    display:inline-flex; color: var(--ink); align-items: center; gap: 12px;
  }
  .foot-brand .brand-mark .glyph{ background: var(--ink); color: var(--accent);}
  .foot-brand p{ color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 34ch;}
  .foot-col h4{
    font-family: var(--sans);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: clamp(14px, 2vw, 22px);
    font-weight: 500;
  }
  .foot-col a{
    display:block; color: var(--ink); font-size: 14.5px; margin-bottom: 12px;
    font-family: var(--display); transition: color .2s ease;
  }
  .foot-col a:hover{ color: var(--accent-deep);}
  .foot-bottom{
    padding-top: clamp(18px, 2.5vw, 28px); border-top: 1px solid var(--line);
    display:flex; flex-direction: column; align-items: start; gap: 8px;
    font-size: 13px; color: var(--muted);
  }
  @media (min-width: 768px){
    .foot-bottom{ flex-direction: row; justify-content: space-between; align-items: center; gap: 18px; }
  }
  @media (min-width: 900px){
    .foot-grid{ grid-template-columns: 2fr 1fr 1fr 1fr; }
    .foot-brand{ grid-column: auto; }
  }

  /* Sticky WhatsApp */
  .wa-stick{
    position: fixed; bottom: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px);
    z-index: 60;
    display:inline-flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: 999px;
    background: #25D366;
    color: var(--ink);
    font-weight: 500; font-size: 14px;
    box-shadow: 0 14px 40px -10px rgba(37,211,102,.45);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .wa-stick:hover{ transform: translateY(-2px); box-shadow: 0 18px 50px -10px rgba(37,211,102,.6);}
  .wa-stick .wa-ico{
    width: 32px; height: 32px; border-radius: 50%; background: var(--ink);
    color: #25D366;
    display:inline-flex; align-items: center; justify-content: center;
  }
  .wa-stick .wa-text{ display:none; flex-direction: column; line-height: 1.1;}
  .wa-stick .wa-text small{ font-size: 10px; opacity:.7; letter-spacing: .12em; text-transform: uppercase;}
  @media (min-width: 600px){
    .wa-stick{ padding: 13px 22px 13px 13px; }
    .wa-stick .wa-text{ display: flex; }
  }

  /* Reveal */
  .reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease;}
  .reveal.in{ opacity: 1; transform: none;}
  .reveal-d1{ transition-delay: .08s;}
  .reveal-d2{ transition-delay: .16s;}
  .reveal-d3{ transition-delay: .24s;}

  /* ── Poppins tuning ───────────────────────────── */
  .editorial-h{ font-weight: 700; letter-spacing: -.04em; line-height: .98; }
  .editorial-h .alt{ font-style: italic; font-weight: 500; color: var(--muted); }
  .editorial-h .lime{ font-style: normal; font-weight: 700; }
  .fs-num{ font-weight: 600; letter-spacing: -.045em; }
  .ct-num{ font-weight: 700; letter-spacing: -.045em; }
  .stat-num, .about-block .stat-num{ font-weight: 700; letter-spacing: -.04em; }
  .svc-title{ font-weight: 600; letter-spacing: -.035em; line-height: 1; }
  .p-title{ font-weight: 700; letter-spacing: -.035em; line-height: 1; }
  .work-title{ font-weight: 600; letter-spacing: -.025em; }
  .work-metric{ font-weight: 700; letter-spacing: -.03em; }
  .who-name{ font-weight: 700; letter-spacing: -.035em; line-height: 1.0; }
  .tcard .quote{ font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
  .res-title{ font-weight: 700; letter-spacing: -.03em; line-height: 1.0; }
  .faq-q{ font-weight: 600; letter-spacing: -.02em; }
  .final-headline{ font-weight: 800; letter-spacing: -.045em; line-height: .9; }
  .wall-foot .total{ font-weight: 700; letter-spacing: -.04em; }
  .nums-headline{ font-weight: 700; letter-spacing: -.035em; }
  .partner-tile .logo-ph{ font-weight: 600; letter-spacing: -.01em; }
  .foot-col a{ font-style: normal; }
  .t-item{ font-weight: 500; letter-spacing: -.005em; }
  .nias-mark .m-r{ font-style: normal; font-weight: 600; }

  /* ── Image placeholder utility ────────────────── */
  .img-ph{
    position: relative;
    overflow: hidden;
    background:
      repeating-linear-gradient(135deg, rgba(15,15,15,.045) 0 2px, transparent 2px 14px),
      var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .35s ease, transform .35s ease;
  }
  .img-ph:hover{ border-color: rgba(15,15,15,.2); }
  .img-ph::after{
    content: attr(data-label);
    position: absolute; left: 18px; bottom: 14px; right: 18px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10.5px; color: var(--muted);
    letter-spacing: .16em; text-transform: uppercase;
    pointer-events: none;
  }
  .img-ph .corner-tag{
    position: absolute; top: 14px; left: 18px; z-index: 2;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px; color: var(--muted);
    letter-spacing: .22em; text-transform: uppercase;
    display:inline-flex; align-items:center; gap: 8px;
  }
  .img-ph .corner-tag::before{
    content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  }
  .img-ph .play-btn{
    position: absolute; inset: 0;
    display:flex; align-items:center; justify-content: center;
    pointer-events: none;
  }
  .img-ph .play-btn .core{
    width: clamp(56px, 6vw, 76px); height: clamp(56px, 6vw, 76px); border-radius: 50%;
    background: var(--ink); color: var(--accent);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 14px 40px -10px rgba(15,15,15,.4);
  }
  .img-ph.dark{
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px),
      linear-gradient(160deg, #3A3A38 0%, #1F1F1D 60%, #0F0F0F 100%);
    border-color: rgba(255,255,255,.08);
  }
  .img-ph.dark::after{ color: rgba(255,255,255,.55); }
  .img-ph.dark .corner-tag{ color: rgba(255,255,255,.6); }

  /* ── Featured Work hero image ─────────────────── */
  .work-hero{
    aspect-ratio: 16/9;
    margin-bottom: clamp(24px, 3vw, 36px);
  }

  /* ── Work video embed ────────────────────────── */
  .work-video{
    position: relative;
    aspect-ratio: 16/9;
    margin-bottom: clamp(24px, 3vw, 36px);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
    border: 1px solid rgba(255,255,255,.08);
  }
  .work-video iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  /* ── In-studio gallery ────────────────────────── */
  .gallery{ padding: clamp(40px, 5vw, 60px) 0;}
  .gallery-row{
    display:grid;
    grid-template-columns: 1fr;
    gap: var(--sp-gap);
  }
  .gallery-row .img-ph{ aspect-ratio: 16/10;}
  .gallery-row .img-ph:nth-child(2){ aspect-ratio: 16/10;}
  @media (min-width: 768px){
    .gallery-row{ grid-template-columns: 1.2fr 1fr; }
    .gallery-row .img-ph:nth-child(2){ aspect-ratio: 4/5; }
  }

  /* ── Video testimonial card ─ */
  .tcard.video{
    padding: 0; overflow: hidden;
    flex: 0 0 clamp(300px, 35vw, 460px);
    background: var(--ink); border-color: var(--ink);
  }
  .tcard.video .video-still{
    aspect-ratio: 16/9;
    width: 100%;
    border-radius: 0;
  }
  .tcard.video .video-meta{
    padding: clamp(14px, 2vw, 20px) clamp(16px, 2vw, 22px);
    color: var(--bg);
    display:flex; align-items: center; gap: 12px;
  }
  .tcard.video .video-meta .name b{ color: var(--bg); display:block; font-weight: 500; font-size: 14px;}
  .tcard.video .video-meta .name span{ color: rgba(239,233,221,.6); font-size: 12px;}
  .tcard.video .video-meta .metric{ margin-left:auto; text-align:right;}
  .tcard.video .video-meta .metric b{ color: var(--accent); font-weight: 700; font-size: 16px; display:block; line-height: 1; letter-spacing: -.02em;}
  .tcard.video .video-meta .metric span{ color: rgba(239,233,221,.6); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;}
  .tcard.video .avatar{
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    color: var(--accent); font-weight: 600; font-size: 13px;
    flex: none;
  }


  /* ═══════════════════════════════════════════════
     CONTACT MODAL
  ═══════════════════════════════════════════════ */

  /* ── Overlay ──────────────────────────────────── */
  .modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 40px);
    background: rgba(15,15,15,.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* hidden state */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .modal-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Card ─────────────────────────────────────── */
  .modal-card{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 920px;
    max-height: 90svh;
    overflow-y: auto;
    border-radius: var(--radius);
    background: var(--surface-2);
    box-shadow: 0 40px 80px -20px rgba(15,15,15,.5);
    /* entry animation */
    transform: scale(.96) translateY(16px);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    /* scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .modal-overlay.is-open .modal-card{
    transform: scale(1) translateY(0);
  }

  /* ── Close button ─────────────────────────────── */
  .modal-close{
    position: absolute;
    top: 16px; right: 16px;
    z-index: 10;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(15,15,15,.08);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background .2s ease, color .2s ease;
    cursor: pointer;
  }
  .modal-close:hover{
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }

  /* ── Left branded panel ───────────────────────── */
  .modal-left{
    background: var(--ink);
    color: var(--bg);
    padding: clamp(32px, 5vw, 52px) clamp(28px, 4vw, 44px);
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ml-label{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(239,233,221,.55);
    margin-bottom: 20px;
  }
  .ml-label .dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(37,211,102,.7);
    flex: none;
  }
  .ml-headline{
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(26px, 3.5vw, 42px);
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--bg);
    margin-bottom: 16px;
  }
  .ml-headline span{ color: var(--accent); }
  .ml-body{
    font-size: clamp(14px, 1.2vw, 15.5px);
    color: rgba(239,233,221,.65);
    line-height: 1.6;
    max-width: 34ch;
    margin-bottom: clamp(28px, 4vw, 40px);
  }
  .ml-trust{
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid rgba(255,255,255,.1);
    margin-bottom: clamp(24px, 3vw, 32px);
  }
  .ml-trust-item{
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .ml-stat{
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(22px, 2.5vw, 30px);
    color: var(--bg);
    letter-spacing: -.04em;
    line-height: 1;
    white-space: nowrap;
  }
  .ml-stat-label{
    font-size: 12px;
    color: rgba(239,233,221,.5);
    letter-spacing: .04em;
  }
  .ml-response{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(239,233,221,.5);
    letter-spacing: .02em;
    margin-top: auto;
  }
  .ml-resp-dot{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(37,211,102,.8);
    flex: none;
    animation: blink 2s ease-in-out infinite;
  }

  /* ── Right form panel ─────────────────────────── */
  .modal-right{
    padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px) clamp(32px, 4vw, 44px);
  }

  /* ── Form layout ──────────────────────────────── */
  .contact-form{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .cf-row{ display: flex; flex-direction: column; gap: 18px; }
  @media (min-width: 480px){
    .cf-row--2{ flex-direction: row; }
    .cf-row--2 .cf-group{ flex: 1; min-width: 0; }
  }
  .cf-group{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cf-group label{
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cf-optional{
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted-2);
    font-size: 11px;
  }

  /* ── Form inputs ──────────────────────────────── */
  .contact-form input[type="text"],
  .contact-form input[type="tel"],
  .contact-form input[type="email"],
  .contact-form select,
  .contact-form textarea{
    width: 100%;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    appearance: none;
    -webkit-appearance: none;
  }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder{
    color: var(--muted-2);
  }
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,211,102,.12);
  }
  .contact-form select{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6862' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
  }
  .contact-form select option{ color: var(--ink); background: white; }
  .contact-form textarea{ resize: vertical; min-height: 90px; }

  /* ── Field errors ─────────────────────────────── */
  .cf-error{
    font-size: 12px;
    color: #e84a4a;
    display: none;
  }
  .cf-error.visible{ display: block; }
  .cf-group.has-error input,
  .cf-group.has-error select,
  .cf-group.has-error textarea{
    border-color: #e84a4a;
    box-shadow: 0 0 0 3px rgba(232,74,74,.1);
  }

  /* ── Submit button ────────────────────────────── */
  .cf-submit{
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    background: var(--ink);
    color: var(--bg);
    position: relative;
    overflow: hidden;
  }
  .cf-submit:hover{ background: var(--ink-soft); transform: translateY(-1px); }
  .cf-submit .arrow-bubble{ background: var(--accent); }
  .cf-submit:hover .arrow-bubble{ transform: rotate(-45deg); }

  .cf-submit-loading{ display: none; }
  .cf-submit.is-loading .cf-submit-text{ display: none; }
  .cf-submit.is-loading .cf-submit-loading{ display: inline; }
  .cf-submit.is-loading{ opacity: .7; pointer-events: none; }

  /* ── Success toast ────────────────────────────── */
  .success-toast{
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
  }
  .success-toast.is-visible{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .toast-inner{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: var(--bg);
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 16px 40px -8px rgba(15,15,15,.4);
    white-space: nowrap;
  }
  .toast-icon{
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(37,211,102,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  /* ── Desktop 2-column ─────────────────────────── */
  @media (min-width: 768px){
    .modal-card{
      grid-template-columns: 1fr 1.1fr;
    }
    .modal-left{
      border-radius: var(--radius) 0 0 var(--radius);
    }
    .modal-close{
      /* on desktop, place close in right panel top-right */
      background: rgba(15,15,15,.06);
    }
  }


  /* ── Dynamic gallery — real image support ─────── */
  /* Applied only when .has-image class is present
     (added by template when item.image exists).
     Existing placeholder styling is completely untouched. */

  .gallery-row .img-ph.has-image .gallery-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
  }
  /* Gradient overlay so tag + title remain legible over any photo */
  .gallery-row .img-ph.has-image::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(15,15,15,.38) 0%,
      transparent 35%,
      transparent 58%,
      rgba(15,15,15,.52) 100%
    );
    z-index: 2;
    pointer-events: none;
  }
  /* Lift corner-tag and data-label above the photo + gradient */
  .gallery-row .img-ph.has-image .corner-tag{
    z-index: 3;
    color: rgba(255,255,255,.9);
  }
  .gallery-row .img-ph.has-image .corner-tag::before{
    background: var(--accent);   /* keep green dot */
  }
  .gallery-row .img-ph.has-image::after{
    z-index: 3;
    color: rgba(255,255,255,.72);
  }