:root{
    --bg: #0a0a0a;
    --fg: #f4f1ea;
    --fg-dim: rgba(244,241,234,.55);
    --fg-faint: rgba(244,241,234,.18);
    --line: rgba(244,241,234,.14);
    --accent: oklch(0.74 0.14 65);
    --accent-soft: oklch(0.74 0.14 65 / .14);
    --grain: rgba(244,241,234,.02);
    --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  [data-theme="light"]{
    --bg: #f4f1ea;
    --fg: #0a0a0a;
    --fg-dim: rgba(10,10,10,.55);
    --fg-faint: rgba(10,10,10,.22);
    --line: rgba(10,10,10,.14);
    --accent-soft: oklch(0.74 0.14 65 / .18);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","cv11";
    overflow-x: hidden;
  }
  a{color:inherit;text-decoration:none}
  ::selection{ background: var(--accent); color: #0a0a0a }

  /* layout */
  .wrap{ max-width: 1480px; margin: 0 auto; padding: 0 40px }
  @media (max-width: 720px){ .wrap{ padding: 0 20px } }
  .rule{ border-top: 1px solid var(--line); }
  .mono{ font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-dim) }

  /* header */
  header.dr-header{
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    background: color-mix(in oklab, var(--bg) 72%, transparent);
    border-bottom: 1px solid var(--line);
  }
  .dr-header .inner{ display:flex; align-items:center; justify-content:space-between; height: 64px }
  .dr-logo{ display:flex; align-items:center; gap: 10px; font-weight: 600; letter-spacing: -.01em }
  .dr-logo-mark{ width:22px; height:22px; display:inline-block; position:relative }
  .dr-nav{ display:flex; gap: 28px; font-size: 13.5px; color: var(--fg-dim); align-items: center }
  .dr-nav > a{ transition: color .2s }
  .dr-nav > a:hover{ color: var(--fg) }

  /* dropdown */
  .dr-dd{ position: relative; display: inline-flex; align-items: center }
  .dr-dd-trigger{
    appearance: none; background: none; border: 0; padding: 0;
    font: inherit; color: var(--fg-dim); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .2s;
  }
  .dr-dd-trigger:hover, .dr-dd.open .dr-dd-trigger{ color: var(--fg) }
  .dr-dd-trigger .caret{ font-size: 10px; transition: transform .2s ease; transform: translateY(1px) }
  .dr-dd.open .dr-dd-trigger .caret{ transform: translateY(1px) rotate(180deg) }
  .dr-dd-menu{
    position: absolute; top: calc(100% + 18px); left: 50%; transform: translate(-50%, -8px);
    min-width: 360px;
    background: color-mix(in oklab, var(--bg) 92%, var(--fg) 8%);
    border: 1px solid var(--line);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    padding: 8px;
    box-shadow: 0 24px 48px -20px rgba(0,0,0,.6);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 60;
  }
  .dr-dd.open .dr-dd-menu{ opacity: 1; pointer-events: auto; transform: translate(-50%, 0) }
  /* hover bridge so the menu doesn't close between trigger and menu */
  .dr-dd::after{
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: 100%; height: 24px; pointer-events: none;
  }
  .dr-dd.open::after{ pointer-events: auto }
  .dr-dd-menu .dd-head{
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px 12px; border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fg-dim);
  }
  .dr-dd-menu .dd-head-v{ color: var(--accent); transition: opacity .2s }
  .dr-dd-menu .dd-head-v:hover{ opacity: .8 }
  .dd-item{
    display: grid; grid-template-columns: 36px 1fr 16px; gap: 14px; align-items: center;
    padding: 12px; border-radius: 0;
    transition: background .15s;
    color: var(--fg);
  }
  .dd-item + .dd-item{ border-top: 1px solid color-mix(in oklab, var(--line) 50%, transparent) }
  .dd-item:hover{ background: color-mix(in oklab, var(--bg) 85%, var(--accent) 15%) }
  .dd-mark{ width: 36px; height: 36px; color: var(--accent); display: block }
  .dd-mark svg{ width: 100%; height: 100%; display: block; overflow: visible }
  .dd-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0 }
  .dd-name{ font-size: 15px; font-weight: 500; letter-spacing: -.015em; color: var(--fg) }
  .dd-tag{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim) }
  .dd-arr{ color: var(--fg-dim); transition: transform .15s, color .15s }
  .dd-item:hover .dd-arr{ transform: translateX(3px); color: var(--accent) }
  .dr-cta{
    font-size: 13px; font-weight: 500;
    padding: 9px 16px; border-radius: 999px;
    background: var(--fg); color: var(--bg);
    display:inline-flex; align-items:center; gap: 8px;
    white-space: nowrap;
    transition: transform .2s ease, background .2s;
  }
  .dr-cta:hover{ transform: translateY(-1px) }
  .dr-cta .arr{ display:inline-block; transition: transform .2s }
  .dr-cta:hover .arr{ transform: translateX(3px) }
  @media (max-width: 820px){ .dr-nav{ display:none } }

  /* hero */
  .hero{ padding-top: 80px; padding-bottom: 60px; position: relative }
  .hero h1{
    font-size: clamp(56px, 11.5vw, 192px);
    line-height: .92;
    letter-spacing: -.045em;
    margin: 0;
    font-weight: 500;
    text-wrap: balance;
  }
  .hero h1 em{
    font-style: italic;
    font-family: "Geist", serif;
    font-weight: 300;
    color: var(--accent);
  }
  .hero-meta{
    display:grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px; margin-top: 64px; padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  @media (max-width: 720px){ .hero-meta{ grid-template-columns: 1fr 1fr } }
  .hero-meta .cell .k{ font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-dim); margin-bottom: 10px }
  .hero-meta .cell .v{ font-size: 15px; line-height: 1.4; max-width: 26ch; color: var(--fg) }

  .hero-lede{
    margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line);
    font-size: clamp(18px, 2vw, 24px); line-height: 1.45; letter-spacing: -.01em;
    color: var(--fg); max-width: 60ch; text-wrap: pretty;
  }

  /* marquee */
  .marquee-wrap{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 22px 0 }
  .marquee{
    display:flex; gap: 80px; white-space:nowrap;
    animation: scroll var(--marquee-dur, 60s) linear infinite;
    will-change: transform;
  }
  .marquee.paused{ animation-play-state: paused }
  .marquee span{
    font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--fg-dim);
    display:inline-flex; align-items:center; gap: 80px;
  }
  .marquee span::after{
    content: ""; display:inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
  }
  @keyframes scroll{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

  /* section frame */
  section.dr-sec{ padding-top: 120px; padding-bottom: 120px; border-top: 1px solid var(--line); position: relative }
  .sec-head{ display:grid; grid-template-columns: 200px 1fr; gap: 40px; margin-bottom: 64px }
  @media (max-width: 820px){ .sec-head{ grid-template-columns: 1fr; gap: 16px } }
  .sec-head .label{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-dim); padding-top: 8px }
  .sec-head .label::before{ content: ""; display:inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 10px; transform: translateY(-2px) }
  .sec-head h2{
    font-size: clamp(36px, 5.6vw, 84px);
    line-height: .98;
    letter-spacing: -.035em;
    margin: 0;
    font-weight: 500;
    max-width: 18ch;
    text-wrap: balance;
  }
  .sec-head h2 em{ font-style: italic; font-weight: 300; color: var(--fg-dim) }

  /* services list */
  .services{ border-top: 1px solid var(--line) }
  .service{
    display:grid; grid-template-columns: 80px 1fr 1fr 60px;
    gap: 40px; padding: 36px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    cursor: default;
    transition: padding .25s ease, background .25s ease;
    position: relative;
  }
  .service:hover{ padding-left: 16px; padding-right: 16px }
  .service::before{
    content: ""; position:absolute; left:0; top:0; bottom:0; width: 2px;
    background: var(--accent); transform: scaleY(0); transform-origin: top;
    transition: transform .35s ease;
  }
  .service:hover::before{ transform: scaleY(1) }
  .service .num{ font-family: var(--mono); font-size: 12px; color: var(--fg-dim); padding-top: 8px }
  .service .name{ font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; letter-spacing: -.02em; line-height: 1.05 }
  .service .desc{ color: var(--fg-dim); font-size: 15px; line-height: 1.55; max-width: 52ch }
  .service .arrow{ text-align: right; font-size: 22px; color: var(--fg-dim); padding-top: 6px; transition: transform .25s ease, color .25s }
  .service:hover .arrow{ transform: translateX(6px); color: var(--accent) }
  @media (max-width: 820px){
    .service{ grid-template-columns: 1fr; gap: 12px; padding: 28px 0 }
    .service .arrow{ display: none }
  }

  /* rich service rows (name + desc stacked + tags) */
  .service-rich{
    display:grid; grid-template-columns: 80px 1.1fr 60px;
    gap: 40px; padding: 44px 0;
    border-bottom: 1px solid var(--line);
    align-items: start; position: relative;
    transition: padding .25s ease, background .25s ease;
  }
  .service-rich:first-child{ border-top: none }
  .service-rich:hover{ padding-left: 16px; padding-right: 16px }
  .service-rich::before{
    content: ""; position:absolute; left:0; top:0; bottom:0; width: 2px;
    background: var(--accent); transform: scaleY(0); transform-origin: top;
    transition: transform .35s ease;
  }
  .service-rich:hover::before{ transform: scaleY(1) }
  .service-rich .num{ font-family: var(--mono); font-size: 12px; color: var(--fg-dim); padding-top: 14px }
  .service-rich .body{ max-width: 90ch }
  .service-rich .name{
    font-size: clamp(28px, 3.6vw, 48px); font-weight: 500;
    letter-spacing: -.025em; line-height: 1.02; margin-bottom: 18px;
  }
  .service-rich .cap-sub{
    font-family: var(--mono); font-size: 11px; color: var(--accent);
    text-transform: uppercase; letter-spacing: .1em;
    margin-top: -12px; margin-bottom: 18px;
  }
  .service-rich .desc{ color: var(--fg-dim); font-size: 16px; line-height: 1.6; max-width: 64ch }
  .service-rich .tags{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
  .service-rich .tag{
    font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--fg-dim); padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
    transition: border-color .2s, color .2s;
  }
  .service-rich:hover .tag{ border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); color: var(--fg) }
  .service-rich .arrow{ text-align: right; font-size: 22px; color: var(--fg-dim); padding-top: 14px; transition: transform .25s ease, color .25s }
  .service-rich:hover .arrow{ transform: translateX(6px); color: var(--accent) }
  @media (max-width: 820px){
    .service-rich{ grid-template-columns: 1fr; gap: 16px; padding: 32px 0 }
    .service-rich .arrow{ display: none }
  }

  /* stats */
  .stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line) }
  @media (max-width: 820px){ .stats{ grid-template-columns: 1fr 1fr } }
  .stat{ padding: 40px 24px 32px; border-right: 1px solid var(--line); position: relative }
  .stat:last-child{ border-right: none }
  @media (max-width: 820px){
    .stat:nth-child(2n){ border-right: none }
    .stat:nth-child(1),.stat:nth-child(2){ border-bottom: 1px solid var(--line) }
  }
  .stat .big{
    font-size: clamp(48px, 6.5vw, 96px);
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .stat .big sup{ font-size: .45em; font-weight: 400; color: var(--accent); margin-left: 4px; top: -.6em }
  .stat .lbl{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-dim); margin-top: 14px }

  /* portfolio */
  .pf-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line) }
  @media (max-width: 820px){ .pf-grid{ grid-template-columns: 1fr 1fr } }
  .pf-cell{
    background: var(--bg); aspect-ratio: 5/4;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 16px;
    padding: 24px; position:relative; overflow:hidden;
    transition: background .3s;
  }
  .pf-cell:hover{ background: color-mix(in oklab, var(--bg) 88%, var(--accent) 12%) }
  .pf-cell .pf-top{ display:flex; justify-content: space-between; align-items: flex-start }
  .pf-cell .pf-tag{ font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .08em }
  .pf-cell .pf-yr{ font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim) }
  .pf-cell .pf-name{ font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1 }
  .pf-cell .pf-meta{ display:flex; justify-content: space-between; align-items: flex-end; color: var(--fg-dim); font-size: 13px; gap: 16px }
  .pf-cell .pf-meta span:first-child{ max-width: 44ch }
  .pf-cell .pf-mark{
    align-self: center; justify-self: start;
    width: 96px; height: 96px;
    color: var(--accent);
    transition: transform .35s ease, color .25s;
  }
  .pf-cell:hover .pf-mark{ transform: translateY(-2px) rotate(-2deg) }
  .pf-cell .pf-mark svg{ width:100%; height:100%; display:block; overflow: visible }

  /* approach */
  .approach{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start }
  @media (max-width: 820px){ .approach{ grid-template-columns: 1fr; gap: 40px } }
  .approach-lead{
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.35;
    letter-spacing: -.015em;
    font-weight: 400;
    text-wrap: pretty;
  }
  .approach-lead em{ color: var(--accent); font-style: normal }
  .principles{ display:flex; flex-direction:column; gap: 24px }
  .principle{ display:grid; grid-template-columns: 36px 1fr; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line) }
  .principle:last-child{ border-bottom: none }
  .principle .n{ font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 4px; letter-spacing: .08em }
  .principle h4{ margin: 0 0 8px; font-size: 18px; font-weight: 500; letter-spacing: -.01em }
  .principle p{ margin: 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.55 }

  /* principal */
  .principal{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start }
  @media (max-width: 900px){ .principal{ grid-template-columns: 1fr; gap: 40px } }
  .principal-card{ display:flex; flex-direction:column; gap: 16px }
  .principal-card .pic{
    aspect-ratio: 4/5; background: var(--line); position:relative; overflow:hidden;
    border: 1px solid var(--line);
    background-image: repeating-linear-gradient(135deg, transparent 0 11px, var(--grain) 11px 12px);
    display:flex; align-items: center; justify-content: center;
    max-width: 420px;
  }
  .principal-card .pic .ph{ font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .1em }
  .principal-card .pic .init{
    position:absolute; left: 20px; bottom: 18px;
    font-size: 96px; line-height: 1; font-weight: 500; letter-spacing: -.04em;
    color: var(--fg-faint);
  }
  .principal-card .role{ font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px }
  .principal-card .name{ font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1 }
  .principal-card .bio{ color: var(--fg-dim); font-size: 15px; line-height: 1.6; max-width: 50ch }
  .principal-card .contact-line{ display:flex; gap: 10px; flex-wrap: wrap; color: var(--fg-dim); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px }

  .principal-cv{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px }
  @media (max-width: 720px){ .principal-cv{ grid-template-columns: 1fr; gap: 32px } }
  .cv-col h5{ margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--fg-dim); text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
  .cv-col ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 14px }
  .cv-col li{ display:flex; flex-direction:column; gap: 4px; padding-bottom: 14px; border-bottom: 1px dashed var(--line) }
  .cv-col li:last-child{ border-bottom: none }
  .cv-col .cv-a{ font-size: 15px; font-weight: 500; letter-spacing: -.01em }
  .cv-col .cv-b{ font-family: var(--mono); font-size: 11px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .06em }

  /* cta sub */
  .cta-sub{ color: var(--fg-dim); font-size: 17px; line-height: 1.5; max-width: 56ch; margin-top: 28px; text-wrap: pretty }

  /* coverage */
  .coverage-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
  @media (max-width: 900px){ .coverage-grid{ grid-template-columns: 1fr 1fr } }
  .cov-col{ background: var(--bg); padding: 28px 24px 32px; min-height: 260px }
  .cov-col h5{ margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--fg-dim); text-transform: uppercase }
  .cov-col ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 12px }
  .cov-col li{ font-size: 15px; letter-spacing: -.01em; padding-bottom: 12px; border-bottom: 1px dashed var(--line); color: var(--fg) }
  .cov-col li:last-child{ border-bottom: none; padding-bottom: 0 }

  /* clients list */
  .cli-list{ border-top: 1px solid var(--line) }
  .cli-row{
    display:grid; grid-template-columns: 160px 1.2fr 2fr 100px;
    gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line);
    align-items: baseline; transition: padding .2s ease;
  }
  .cli-row:hover{ padding-left: 16px; padding-right: 16px }
  .cli-kind{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent) }
  .cli-who{ font-size: 18px; font-weight: 500; letter-spacing: -.015em }
  .cli-work{ color: var(--fg-dim); font-size: 15px; line-height: 1.45 }
  .cli-region{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-dim); text-align: right }
  @media (max-width: 900px){
    .cli-row{ grid-template-columns: 1fr; gap: 8px; padding: 22px 0 }
    .cli-region{ text-align: left }
  }

  /* team */
  .team-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px }
  @media (max-width: 900px){ .team-grid{ grid-template-columns: 1fr 1fr; gap: 24px } }
  @media (max-width: 540px){ .team-grid{ grid-template-columns: 1fr } }
  .member{ display:flex; flex-direction:column; gap: 12px }
  .member .pic{
    aspect-ratio: 4/5; background: var(--line); position:relative; overflow:hidden;
    border: 1px solid var(--line);
    background-image: repeating-linear-gradient(135deg, transparent 0 11px, var(--grain) 11px 12px);
    display:flex; align-items: center; justify-content: center;
  }
  .member .pic .ph{ font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .1em }
  .member .pic .init{
    position:absolute; left: 16px; bottom: 14px;
    font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -.04em;
    color: var(--fg-faint);
  }
  .member .role{ font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .1em; margin-top: 6px }
  .member .name{ font-size: 18px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2 }
  .member .bio{ color: var(--fg-dim); font-size: 14px; line-height: 1.55 }

  /* insights */
  .ins-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
  @media (max-width: 820px){ .ins-grid{ grid-template-columns: 1fr } }
  .ins{ background: var(--bg); padding: 32px 24px; min-height: 280px; display:flex; flex-direction:column; justify-content: space-between; transition: background .25s; cursor: default }
  .ins:hover{ background: color-mix(in oklab, var(--bg) 92%, var(--fg) 8%) }
  .ins .top{ display:flex; justify-content: space-between; color: var(--fg-dim); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em }
  .ins h3{ margin: 24px 0 0; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance }
  .ins .foot{ display:flex; justify-content: space-between; align-items:flex-end; color: var(--fg-dim); font-size: 13px; margin-top: 24px }
  .ins .foot .read{ display:inline-flex; gap: 6px; align-items:center }
  .ins:hover .foot .read{ color: var(--accent) }

  /* cta */
  .cta-block{ padding-top: 140px; padding-bottom: 140px; text-align: left; position: relative; overflow: hidden }
  .cta-block h2{
    font-size: clamp(56px, 11vw, 180px);
    line-height: .9; letter-spacing: -.045em; margin: 0; font-weight: 500;
    text-wrap: balance;
  }
  .cta-block h2 em{ font-style: italic; font-weight: 300; color: var(--accent) }
  .cta-actions{ display:flex; gap: 16px; margin-top: 48px; flex-wrap: wrap; align-items:center }
  .cta-actions .dr-cta{ font-size: 14px; padding: 14px 22px }
  .cta-ghost{
    font-size: 14px; padding: 14px 22px; border-radius: 999px;
    border: 1px solid var(--line); color: var(--fg);
    display:inline-flex; gap: 8px; align-items:center;
    white-space: nowrap;
    transition: border-color .2s, background .2s;
  }
  .cta-ghost:hover{ border-color: var(--fg); background: var(--accent-soft) }

  /* footer */
  footer.dr-footer{ border-top: 1px solid var(--line); padding: 56px 0 32px }
  .ft-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px }
  @media (max-width: 820px){ .ft-grid{ grid-template-columns: 1fr 1fr; gap: 32px } }
  .ft-grid h5{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-dim); margin: 0 0 16px; font-weight: 500 }
  .ft-grid ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 10px; font-size: 14px }
  .ft-grid a{ color: var(--fg); transition: color .2s }
  .ft-grid a:hover{ color: var(--accent) }
  .ft-grid .brand p{ color: var(--fg-dim); font-size: 14px; line-height: 1.55; max-width: 36ch; margin: 16px 0 0 }
  .ft-foot{ display:flex; justify-content: space-between; color: var(--fg-dim); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding-top: 24px; border-top: 1px solid var(--line) }

  /* reveal */
  .reveal{ opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease }
  .reveal.in{ opacity: 1; transform: none }

  /* live dot */
  .live-dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); display:inline-block; box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.8s infinite }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent) }
    70%{ box-shadow: 0 0 0 8px transparent }
    100%{ box-shadow: 0 0 0 0 transparent }
  }

/* === product page === */
.pp-hero{ padding: 80px 0 60px; border-bottom: 1px solid var(--line) }
.pp-crumb{ font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 56px }
.pp-crumb a{ color: var(--fg-dim); transition: color .2s }
.pp-crumb a:hover{ color: var(--fg) }
.pp-crumb .sep{ margin: 0 10px; color: var(--fg-faint) }
.pp-hero-inner{ display:grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: center }
@media (max-width: 820px){ .pp-hero-inner{ grid-template-columns: 1fr; gap: 32px } }
.pp-logo{ width: 220px; height: 220px; color: var(--accent) }
.pp-logo svg{ width: 100%; height: 100%; display: block; overflow: visible }
.pp-tag{ font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px }
.pp-hero h1{
  font-size: clamp(56px, 9.5vw, 152px);
  line-height: .92; letter-spacing: -.045em;
  margin: 0 0 24px; font-weight: 500;
}
.pp-lede{
  font-size: clamp(18px, 2vw, 24px); line-height: 1.4; letter-spacing: -.01em;
  color: var(--fg-dim); max-width: 58ch; text-wrap: pretty;
}
.pp-meta-row{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (max-width: 820px){ .pp-meta-row{ grid-template-columns: 1fr 1fr } }
.pp-meta-cell{ background: var(--bg); padding: 24px }
.pp-meta-cell .k{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 12px }
.pp-meta-cell .v{ font-size: 16px; line-height: 1.35; letter-spacing: -.01em }

.pp-sec{ padding: 120px 0; border-top: 1px solid var(--line) }
.pp-sec:first-of-type{ border-top: none }
.pp-sec .label{ font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 32px }
.pp-sec .label::before{ content: ""; display:inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 10px; transform: translateY(-2px) }
.pp-sec h2{
  font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: -.035em;
  margin: 0 0 32px; font-weight: 500; max-width: 22ch; text-wrap: balance;
}
.pp-sec h2 em{ font-style: italic; font-weight: 300; color: var(--fg-dim) }
.pp-sec p.body{ font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--fg-dim); max-width: 64ch; text-wrap: pretty; margin: 0 }

.pp-mods{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 40px;
}
@media (max-width: 720px){ .pp-mods{ grid-template-columns: 1fr } }
.pp-mod{ background: var(--bg); padding: 32px 28px; min-height: 200px; display:flex; flex-direction:column; gap: 14px; transition: background .25s }
.pp-mod:hover{ background: color-mix(in oklab, var(--bg) 90%, var(--accent) 10%) }
.pp-mod .mod-num{ font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: .1em }
.pp-mod h4{ margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.015em; line-height: 1.15 }
.pp-mod p{ margin: 0; font-size: 14.5px; color: var(--fg-dim); line-height: 1.55 }

.pp-spec{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 40px;
}
@media (max-width: 820px){ .pp-spec{ grid-template-columns: 1fr 1fr } }
.pp-spec-cell{ background: var(--bg); padding: 28px 24px; min-height: 140px; display:flex; flex-direction:column; gap: 14px }
.pp-spec-cell .k{ font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); letter-spacing: .1em; text-transform: uppercase }
.pp-spec-cell .v{ font-size: 17px; letter-spacing: -.01em; line-height: 1.3 }

.pp-envelope{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 40px;
}
@media (max-width: 720px){ .pp-envelope{ grid-template-columns: 1fr } }
.pp-env-cell{ background: var(--bg); padding: 40px 28px }
.pp-env-cell .big{
  font-size: clamp(48px, 5.5vw, 84px); line-height: 1; letter-spacing: -.04em;
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.pp-env-cell .big sup{ font-size: .42em; font-weight: 400; color: var(--accent); margin-left: 4px; top: -.6em }
.pp-env-cell .lbl{ font-family: var(--mono); font-size: 11px; color: var(--fg-dim); letter-spacing: .08em; text-transform: uppercase; margin-top: 18px }
.pp-env-cell .note{ font-size: 13.5px; color: var(--fg-dim); margin-top: 8px; line-height: 1.45 }

.pp-next{
  padding: 60px 0 100px; border-top: 1px solid var(--line);
  display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
}
@media (max-width: 720px){ .pp-next{ grid-template-columns: 1fr } }
.pp-next a{
  background: var(--bg); padding: 36px 28px;
  display:flex; flex-direction:column; gap: 8px; transition: background .25s;
}
.pp-next a:hover{ background: color-mix(in oklab, var(--bg) 88%, var(--accent) 12%) }
.pp-next .kicker{ font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); letter-spacing: .1em; text-transform: uppercase }
.pp-next .title{ font-size: 24px; font-weight: 500; letter-spacing: -.02em }
.pp-next .title .arr{ display:inline-block; transition: transform .2s }
.pp-next a:hover .title .arr{ transform: translateX(6px); color: var(--accent) }
.pp-next .last{ text-align: right }
.pp-next .last .title{ display:flex; justify-content:flex-end; align-items:center; gap: 10px }

/* cell as link */
a.pf-cell{ color: inherit }
a.pf-cell:hover .pf-meta span:last-child{ color: var(--accent); transform: translateX(4px); display:inline-block; transition: transform .25s, color .25s }