/* ══ SELF-HOSTED FONT — Bricolage Grotesque (OFL license) ══ */
    /* latin-ext */
    @font-face {
      font-family: 'Bricolage Grotesque';
      font-style: normal;
      font-weight: 200 800;
      font-stretch: 100%;
      font-display: swap;
      src: url(fonts/bricolage-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face {
      font-family: 'Bricolage Grotesque';
      font-style: normal;
      font-weight: 200 800;
      font-stretch: 100%;
      font-display: swap;
      src: url(fonts/bricolage-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

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

    :root {
      --bg:        #F4F1EA;   /* warm paper white */
      --ink:       #16150F;   /* near-black, warm */
      --dim:       #6B675B;   /* muted secondary text */
      --rule:      #DED9CD;   /* hairlines / borders */
      --accent:    #2E5BF5;   /* electric-blue signature */
      --accent-d:  #1C3FC4;   /* accent hover/pressed */
      --on-accent: #FFFFFF;   /* text on accent */
      --t: 180ms;
    }

    html, body { height: 100%; }

    body {
      font-family: 'Bricolage Grotesque', sans-serif;
      background: var(--bg);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    /* ── SCROLL ENGINE ─────────────────────────── */
    .vp {
      height: 100dvh;
      overflow-y: scroll;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    section {
      min-height: 100dvh;
      overflow: hidden;
      position: relative;
    }

    /* ── FIXED CHROME ──────────────────────────── */
    .hd {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem max(1.5rem, 4vw);
    }

    .hd-logo {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .22em;
      color: var(--ink);
      text-decoration: none;
    }

    .hd-cta {
      font-size: .625rem;
      letter-spacing: .2em;
      color: var(--ink);
      text-decoration: none;
      opacity: .55;
      transition: opacity var(--t);
    }
    .hd-cta:hover { opacity: 1; }

    /* ── NAV LINKS ─────────────────────────────── */
    .hd-nav {
      display: flex;
      gap: clamp(1rem, 2.2vw, 2rem);
    }
    .hd-nav a {
      position: relative;
      font-size: .625rem;
      letter-spacing: .18em;
      color: var(--ink);
      text-decoration: none;
      opacity: .5;
      padding-bottom: .35rem;
      transition: opacity var(--t);
    }
    .hd-nav a:hover, .hd-nav a.on { opacity: 1; }
    .hd-nav a::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--t);
    }
    .hd-nav a:hover::after, .hd-nav a.on::after { transform: scaleX(1); }

    /* ── BURGER (mobile) ───────────────────────── */
    .hd-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 28px; height: 28px;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
    }
    .hd-burger span {
      display: block;
      width: 22px; height: 1.5px;
      background: var(--ink);
      transition: transform var(--t), opacity var(--t);
    }
    body.menu-open .hd-burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
    body.menu-open .hd-burger span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

    /* ── FULLSCREEN MENU (mobile) ──────────────── */
    .hd-menu {
      position: fixed;
      inset: 0;
      z-index: 90;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--t), visibility var(--t);
    }
    body.menu-open .hd-menu { opacity: 1; visibility: visible; }
    body.menu-open .dots { display: none; }

    .hd-menu nav {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      text-align: center;
    }
    .hd-menu a {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(1.75rem, 9vw, 3rem);
      letter-spacing: -.02em;
      line-height: 1;
      color: var(--ink);
      text-decoration: none;
      opacity: .85;
      transition: opacity var(--t);
    }
    .hd-menu a:hover, .hd-menu a:active { opacity: 1; }

    @media (max-width: 860px) {
      .hd-nav, .hd-cta { display: none; }
      .hd-burger { display: flex; }
    }

    /* ── SCROLL DOTS ───────────────────────────── */
    .dots {
      position: fixed;
      right: 1.25rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--dim);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background var(--t), transform var(--t);
    }
    .dot.on {
      background: var(--ink);
      transform: scale(1.4);
    }

    /* ══════════════════════════════════════════════
       01  HERO
    ══════════════════════════════════════════════ */
    #hero {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 max(1.5rem, 4vw) max(2.5rem, 4vh);
    }

    .hero-glow {
      position: absolute;
      top: -12vh; right: -14vw;
      width: 72vw; height: 72vw;
      max-width: 920px; max-height: 920px;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%,
        rgba(46, 91, 245, .16),
        rgba(46, 91, 245, .05) 48%,
        transparent 72%);
      pointer-events: none;
    }

    .hero-wave {
      position: absolute;
      left: max(1.5rem, 4vw);
      right: 46vw;
      top: clamp(8rem, 25vh, 19rem);
      height: clamp(80px, 16vh, 150px);
      display: flex;
      align-items: center;
      gap: 3px;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    }

    @media (max-width: 720px) {
      .hero-wave { right: max(1.5rem, 4vw); top: clamp(7rem, 24vh, 18rem); }
    }

    .hero-wave span {
      flex: 1;
      min-width: 2px;
      max-width: 5px;
      height: 100%;
      border-radius: 2px;
      background: #D2CCBD;
      transform: scaleY(.14);
      animation: wavePulse var(--wd, 2.2s) ease-in-out var(--wdel, 0s) infinite alternate;
    }
    .hero-wave span.blue { background: rgba(46, 91, 245, .45); }

    @keyframes wavePulse {
      from { transform: scaleY(.12); }
      to   { transform: scaleY(var(--wh, .9)); }
    }

    .hero-photo {
      position: absolute;
      right: 0;
      bottom: 6.5rem; /* refined by JS to sit exactly on the hero rule */
      width: min(47vw, 680px, calc((100dvh - 16rem) * 1.02));
      height: auto;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      mix-blend-mode: multiply;
      filter: contrast(1.02) saturate(.96);
      -webkit-mask-image: linear-gradient(to bottom, #000 93%, rgba(0,0,0,.25) 100%);
              mask-image: linear-gradient(to bottom, #000 93%, rgba(0,0,0,.25) 100%);
    }

    @media (max-width: 720px) {
      .hero-photo { width: min(78vw, calc((100dvh - 24rem) * 1.02)); }
    }

    .hero-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(3.25rem, 11.5vw, 10rem);
      line-height: .92;
      letter-spacing: -.03em;
      color: var(--ink);
      margin-bottom: 1.75rem;
      position: relative;
      z-index: 1;
      /* paper-colored halo: invisible on the bg, lifts the text off the photo */
      text-shadow:
        0 0 14px rgba(244, 241, 234, .9),
        0 0 36px rgba(244, 241, 234, .65),
        0 0 80px rgba(244, 241, 234, .4);
    }

    .hero-rule {
      width: 100%;
      height: 1px;
      background: var(--rule);
      margin-bottom: 1.25rem;
      position: relative;
      z-index: 1;
    }

    .hero-bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      position: relative;
      z-index: 1;
    }

    .hero-tag {
      font-size: clamp(.6875rem, 1.5vw, .875rem);
      line-height: 1.6;
      color: var(--dim);
      max-width: 38ch;
    }

    .hero-link {
      font-size: .6875rem;
      letter-spacing: .18em;
      color: var(--ink);
      text-decoration: none;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: .625rem;
      flex-shrink: 0;
      transition: opacity var(--t);
    }
    .hero-link:hover { opacity: .6; }
    .hero-link::after { content: '→'; }

    /* ══════════════════════════════════════════════
       02  SERVICES
    ══════════════════════════════════════════════ */
    #services {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 max(1.5rem, 4vw);
    }

    .sec-eyebrow {
      font-size: .6875rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 2.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .sec-eyebrow::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--rule);
    }

    .svc-list { list-style: none; }

    .svc-item {
      display: grid;
      grid-template-columns: 3.5rem 1fr auto;
      align-items: baseline;
      gap: 1.25rem;
      padding: 2.25rem 0;
      border-bottom: 1px solid var(--rule);
    }
    .svc-item:first-child { border-top: 1px solid var(--rule); }

    .svc-num {
      font-size: .5625rem;
      letter-spacing: .14em;
      color: var(--dim);
      padding-top: .125rem;
    }

    .svc-body {}

    .svc-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: clamp(1.5rem, 4.5vw, 3rem);
      letter-spacing: -.02em;
      margin-bottom: .5rem;
    }

    .svc-desc {
      font-size: clamp(.8125rem, 1.2vw, .9375rem);
      color: var(--dim);
      line-height: 1.65;
      max-width: 58ch;
    }

    .svc-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem .75rem;
      margin-top: .75rem;
    }
    .svc-meta span {
      font-size: .5625rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--dim);
      border: 1px solid var(--rule);
      border-radius: 2px;
      padding: .25rem .5rem;
    }

    .svc-arrow {
      font-size: 1.25rem;
      color: var(--dim);
      transition: color var(--t), transform var(--t);
    }
    .svc-item:hover .svc-arrow {
      color: var(--ink);
      transform: translateX(4px);
    }

    /* ══════════════════════════════════════════════
       03  ABOUT
    ══════════════════════════════════════════════ */
    #about {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 max(1.5rem, 4vw);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(2rem, 6vw, 6rem);
      align-items: start;
      max-width: 1240px;
    }

    @media (max-width: 600px) {
      .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    }

    .about-left {}

    .about-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(2.5rem, 6vw, 4.75rem);
      letter-spacing: -.03em;
      line-height: 1.0;
      margin-bottom: 1.75rem;
    }

    .about-bio {
      font-size: clamp(.9375rem, 1.4vw, 1.125rem);
      color: var(--dim);
      line-height: 1.75;
      margin-bottom: 2.25rem;
      max-width: 52ch;
    }

    .stats-row {
      display: flex;
      gap: 2.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--rule);
    }

    .stat-n {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(1.75rem, 2.5vw, 2.5rem);
      letter-spacing: -.03em;
      display: block;
      margin-bottom: .25rem;
    }

    .stat-l {
      font-size: .625rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--dim);
    }

    .about-right {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }

    .about-photo {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      object-position: center 22%;
      border-radius: 6px;
      filter: contrast(1.02) saturate(.98);
    }

    .about-quote {
      border-left: 2px solid var(--accent);
      padding-left: 1.25rem;
    }
    .about-quote blockquote {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: clamp(1.125rem, 2vw, 1.625rem);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.3;
      color: var(--ink);
      margin-bottom: 1rem;
    }
    .about-quote figcaption {
      font-size: .5625rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--dim);
    }
    .about-quote figcaption span { display: block; margin-top: .25rem; opacity: .7; }

    /* trusted-by strip */
    .trusted {
      margin-top: 1.75rem;
      font-size: .625rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--dim);
    }
    .trusted span:not(:last-child)::after { content: '·'; margin: 0 .5em; opacity: .6; }
    .trusted span:first-of-type { margin-left: .5em; }

    /* ══════════════════════════════════════════════
       A/B PLAYER  (embedded in Portfolio)
    ══════════════════════════════════════════════ */
    .ab {
      display: none;
      width: 100%;
      max-width: 620px;
      margin-top: clamp(1.5rem, 3vw, 2.25rem);
      border: 1px solid var(--rule);
      border-radius: 4px;
      padding: clamp(1.25rem, 3vw, 2rem);
    }
    .ab.show {
      display: block;
      animation: abReveal var(--t) ease-out;
    }
    @keyframes abReveal {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }

    .ab-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.75rem;
    }

    .ab-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: clamp(1rem, 2.5vw, 1.375rem);
      letter-spacing: -.01em;
    }
    .ab-artist {
      font-size: .625rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--dim);
      margin-top: .3rem;
    }

    .ab-toggle {
      display: flex;
      border: 1px solid var(--rule);
      border-radius: 3px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .ab-tab {
      background: transparent;
      border: none;
      color: var(--dim);
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: .5625rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: .5rem .875rem;
      cursor: pointer;
      transition: background var(--t), color var(--t);
    }
    .ab-tab.on { background: var(--ink); color: var(--bg); }

    .ab-player {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .ab-play {
      flex-shrink: 0;
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1px solid var(--ink);
      background: transparent;
      color: var(--ink);
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: .7rem;
      cursor: pointer;
      transition: background var(--t), color var(--t);
    }
    .ab-play:hover { background: var(--ink); color: var(--bg); }

    .ab-bar {
      flex: 1;
      height: 3px;
      background: var(--rule);
      border-radius: 2px;
      cursor: pointer;
      position: relative;
    }
    .ab-fill {
      height: 100%;
      width: 0;
      background: var(--ink);
      border-radius: 2px;
    }
    .ab-bar:focus-visible { outline: 1px solid var(--dim); outline-offset: 4px; }

    .ab-time {
      flex-shrink: 0;
      font-size: .625rem;
      color: var(--dim);
      min-width: 2.5rem;
      text-align: right;
    }

    .ab-hint {
      margin-top: 1.5rem;
      font-size: .625rem;
      letter-spacing: .08em;
      color: var(--dim);
      max-width: 620px;
    }

    /* covers with real artwork hide the placeholder number */
    .port-cover[style*="background-image"]::before { display: none; }


    /* ══════════════════════════════════════════════
       04  PORTFOLIO
    ══════════════════════════════════════════════ */
    #portfolio {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: auto;
      min-height: 100dvh;
      overflow: visible;
      padding: 6rem max(1.5rem, 4vw) 3rem;
    }

    .port-hint {
      margin: -1.25rem 0 2.25rem;
      font-size: .8125rem;
      color: var(--dim);
      max-width: 52ch;
    }

    .port-grid {
      list-style: none;
      width: 100%;
      max-width: 1240px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1.25rem, 2.5vw, 2.25rem);
    }

    @media (max-width: 1000px) {
      .port-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 760px) {
      .port-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    }

    .port-card { cursor: default; }

    .port-pick {
      display: block;
      width: 100%;
      padding: 0;
      margin: 0 0 .75rem;
      border: none;
      background: none;
      cursor: pointer;
      position: relative;
      text-decoration: none;
    }

    .port-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: var(--bg);
      color: var(--accent);
      border: 1px solid var(--accent);
      font-size: .6rem;
      padding-left: 2px;
      opacity: 0;
      transition: opacity var(--t);
      pointer-events: none;
    }
    .port-pick:hover .port-play,
    .port-card.sel .port-play { opacity: 1; }

    .port-cover {
      display: block;
      position: relative;
      aspect-ratio: 1 / 1;
      background: linear-gradient(145deg, #15150f, #0b0b09);
      background-size: cover;
      background-position: center;
      border: 1px solid var(--rule);
      border-radius: 3px;
      overflow: hidden;
      transition: transform var(--t), border-color var(--t);
    }
    .port-cover::before {
      content: attr(data-n);
      position: absolute;
      bottom: .4rem; right: .6rem;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 1.5rem;
      color: var(--rule);
    }
    .port-card:hover .port-cover {
      transform: translateY(-4px);
      border-color: var(--dim);
    }

    .port-c-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: clamp(1rem, 1.6vw, 1.25rem);
      letter-spacing: -.01em;
      margin-bottom: .25rem;
    }

    .port-c-meta {
      font-size: .625rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
    }

    /* ══════════════════════════════════════════════
       05  CONTACT
    ══════════════════════════════════════════════ */
    #contact {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 max(1.5rem, 4vw) max(2.5rem, 4vh);
    }

    .contact-head {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(3rem, 12vw, 9rem);
      letter-spacing: -.04em;
      line-height: .9;
      margin-bottom: 2rem;
    }

    .contact-rule {
      width: 100%;
      height: 1px;
      background: var(--rule);
      margin-bottom: 1.75rem;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: max(2rem, 4vw);
      align-items: start;
    }

    @media (max-width: 600px) {
      .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    }

    .contact-left {}

    .contact-email-lbl {
      font-size: .5625rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: .5rem;
    }

    .contact-email {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: clamp(1.125rem, 2.2vw, 1.75rem);
      letter-spacing: -.01em;
      color: var(--ink);
      text-decoration: none;
      display: block;
      margin-bottom: 2rem;
      transition: opacity var(--t);
    }
    .contact-email:hover { opacity: .6; }

    .socials {
      display: flex;
      gap: 1.5rem;
    }
    .social {
      font-size: .625rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--dim);
      text-decoration: none;
      transition: color var(--t);
    }
    .social:hover { color: var(--ink); }

    /* form */
    .cf {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .f-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    @media (max-width: 400px) {
      .f-row { grid-template-columns: 1fr; }
    }

    .ff { display: flex; flex-direction: column; gap: .375rem; }

    .fl {
      font-size: .5625rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--dim);
    }

    .fi, .ft {
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--rule);
      padding: .75rem 0;
      color: var(--ink);
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: .9375rem;
      outline: none;
      width: 100%;
      transition: border-color var(--t);
      min-height: 44px;
    }
    .ft {
      resize: none;
      height: 80px;
      min-height: unset;
    }
    .fi:focus, .ft:focus { border-color: var(--dim); }
    .fi::placeholder, .ft::placeholder { color: var(--rule); }

    .fsub {
      align-self: flex-start;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--ink);
      padding: .625rem 0;
      color: var(--ink);
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: .6875rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity var(--t);
      min-height: 44px;
    }
    .fsub:hover { opacity: .6; }
    .fsub.ok { border-color: var(--dim); color: var(--dim); }

    /* ══════════════════════════════════════════════
       06  PRICING
    ══════════════════════════════════════════════ */
    #pricing {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 max(1.5rem, 4vw);
    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(1rem, 2.5vw, 2rem);
      width: 100%;
      max-width: 1240px;
    }

    @media (max-width: 720px) {
      .price-grid { grid-template-columns: 1fr; max-width: 440px; gap: .75rem; }
    }

    .price-card {
      border: 1px solid var(--rule);
      border-radius: 4px;
      padding: clamp(1.5rem, 3vw, 2.75rem);
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .price-card.feat { border-color: var(--dim); }

    .price-tag {
      position: absolute;
      top: -.5rem; left: clamp(1.25rem, 2.5vw, 1.75rem);
      background: var(--ink);
      color: var(--bg);
      font-size: .5rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: .2rem .5rem;
      border-radius: 2px;
    }

    .price-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 1.25rem;
      letter-spacing: .02em;
      text-transform: uppercase;
      margin-bottom: .875rem;
    }

    .price-amt {
      font-size: .875rem;
      color: var(--dim);
      margin-bottom: 1.25rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid var(--rule);
    }
    .price-amt strong {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(2rem, 3vw, 2.75rem);
      color: var(--ink);
      letter-spacing: -.02em;
    }
    .price-amt span { font-size: .625rem; letter-spacing: .08em; }

    .price-feat {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-bottom: 1.5rem;
      flex: 1;
    }
    .price-feat li {
      font-size: .8125rem;
      color: var(--dim);
      line-height: 1.4;
      padding-left: 1rem;
      position: relative;
    }
    .price-feat li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: var(--dim);
    }

    .price-cta {
      align-self: flex-start;
      font-size: .6875rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink);
      text-decoration: none;
      border-bottom: 1px solid var(--ink);
      padding-bottom: .25rem;
      transition: opacity var(--t);
    }
    .price-cta:hover { opacity: .6; }

    .price-note {
      margin-top: 2rem;
      font-size: .6875rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
    }

    /* ── TALL SECTIONS: let them grow & scroll on small screens ── */
    @media (max-width: 720px) {
      #portfolio, #pricing {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        justify-content: flex-start;
        padding-top: 6rem;
        padding-bottom: 4rem;
      }
    }

    /* ══════════════════════════════════════════════
       ACCENT — electric-blue signature
    ══════════════════════════════════════════════ */
    .dot.on { background: var(--accent); }

    .hd-cta { color: var(--accent); opacity: 1; }
    .hd-cta:hover { opacity: .65; }

    .hd-nav a.on { color: var(--accent); opacity: 1; }

    .hero-link { color: var(--accent); }

    .svc-item:hover .svc-arrow { color: var(--accent); }

    .ab-tab.on { background: var(--accent); color: var(--on-accent); }
    .ab-fill { background: var(--accent); }
    .ab-play { border-color: var(--accent); color: var(--accent); }
    .ab-play:hover { background: var(--accent); color: var(--on-accent); }

    .port-cover {
      background-image: linear-gradient(145deg, #EDE8DC, #E2DCCD);
      background-size: cover;
      background-position: center;
    }
    .port-cover::before { color: rgba(22, 21, 15, .12); }
    .port-card:hover .port-cover { border-color: var(--accent); }
    .port-card.sel .port-cover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

    .contact-email { transition: color var(--t); }
    .contact-email:hover { color: var(--accent); opacity: 1; }
    .social:hover { color: var(--accent); }

    .fi:focus, .ft:focus { border-color: var(--accent); }
    .fi::placeholder, .ft::placeholder { color: #AAA498; }

    .fsub { border-color: var(--accent); color: var(--accent); }
    .fsub:hover { opacity: .65; }

    .price-card.feat { border-color: var(--accent); }
    .price-tag { background: var(--accent); color: var(--on-accent); }
    .price-cta { color: var(--accent); border-color: var(--accent); }

    /* ══════════════════════════════════════════════
       AMBIENCE — soft washes + grain
    ══════════════════════════════════════════════ */
    #services::after,
    #portfolio::after,
    #pricing::after,
    #about::after,
    #contact::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
    }
    #services::after {
      background: radial-gradient(42vw 42vw at 108% 12%,
        rgba(46, 91, 245, .07), transparent 65%);
    }
    #portfolio::after {
      background: radial-gradient(46vw 46vw at -8% 88%,
        rgba(46, 91, 245, .06), transparent 65%);
    }
    #pricing::after {
      background: radial-gradient(52vw 36vw at 50% 112%,
        rgba(46, 91, 245, .08), transparent 70%);
    }
    #about::after {
      background: radial-gradient(42vw 42vw at 106% 92%,
        rgba(46, 91, 245, .06), transparent 65%);
    }
    #contact::after {
      background: radial-gradient(56vw 46vw at 92% -8%,
        rgba(46, 91, 245, .09), transparent 70%);
    }

    /* film grain over everything — texture without content */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 300;
      pointer-events: none;
      opacity: .04;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 160px 160px;
    }

    /* ══════════════════════════════════════════════
       SCROLL REVEALS — fade & rise, Apple-style
    ══════════════════════════════════════════════ */
    .rv {
      opacity: 0;
      transform: translateY(26px);
      transition:
        opacity .8s cubic-bezier(.2, .6, .25, 1),
        transform .8s cubic-bezier(.2, .6, .25, 1);
      transition-delay: var(--rd, 0ms);
      will-change: opacity, transform;
    }
    .rv.in { opacity: 1; transform: none; }

    /* hero photo keeps its own transition but joins the parallax */
    .hero-photo.rv { transition-property: opacity, transform; }

    /* frosted header once you leave the top */
    .hd {
      transition: background-color .35s ease;
    }
    body.scrolled .hd {
      background: rgba(244, 241, 234, .78);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
              backdrop-filter: blur(14px) saturate(1.3);
    }

    /* ══════════════════════════════════════════════
       TERMS / BILLING PAGE
    ══════════════════════════════════════════════ */
    .tc-wrap {
      max-width: 880px;
      margin: 0 auto;
      padding: 9rem max(1.5rem, 4vw) 5rem;
    }

    .tc-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(2.5rem, 7vw, 5rem);
      letter-spacing: -.03em;
      line-height: .95;
      margin-bottom: 1rem;
    }

    .tc-sub {
      font-size: clamp(.875rem, 1.3vw, 1rem);
      color: var(--dim);
      line-height: 1.7;
      max-width: 60ch;
      margin-bottom: 3.5rem;
    }

    .tc-sec {
      border-top: 1px solid var(--rule);
      padding: 2.75rem 0;
    }

    .tc-sec h2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: clamp(1.25rem, 2.4vw, 1.75rem);
      letter-spacing: -.01em;
      margin-bottom: 1rem;
    }
    .tc-sec h2 span {
      color: var(--dim);
      font-size: .6em;
      font-weight: 600;
      letter-spacing: .12em;
      margin-right: .75rem;
    }

    .tc-sec p, .tc-sec li {
      font-size: clamp(.875rem, 1.2vw, .9375rem);
      color: var(--dim);
      line-height: 1.75;
      max-width: 68ch;
    }
    .tc-sec p + p { margin-top: .75rem; }
    .tc-sec ul { list-style: none; margin-top: .75rem; }
    .tc-sec li { padding-left: 1.1rem; position: relative; margin-bottom: .4rem; }
    .tc-sec li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
    .tc-sec strong { color: var(--ink); font-weight: 600; }

    .tc-price {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: .7rem 0;
      border-bottom: 1px solid var(--rule);
      font-size: .9375rem;
      max-width: 32rem;
    }
    .tc-price em { font-style: normal; color: var(--dim); }
    .tc-price b {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      white-space: nowrap;
    }

    /* billing form */
    .bill {
      margin-top: 1.5rem;
      border: 1px solid var(--rule);
      border-radius: 6px;
      padding: clamp(1.5rem, 3.5vw, 2.75rem);
      background: rgba(255, 255, 255, .35);
    }
    .bill .f-row { margin-bottom: 1rem; }
    .bill .ff { margin-bottom: 1rem; }
    .bill-note {
      font-size: .75rem;
      color: var(--dim);
      line-height: 1.6;
      margin-top: 1.25rem;
    }

    /* address autocomplete */
    .addr-wrap { position: relative; }
    .addr-list {
      position: absolute;
      top: calc(100% + 4px);
      left: 0; right: 0;
      z-index: 30;
      background: var(--bg);
      border: 1px solid var(--rule);
      border-radius: 6px;
      box-shadow: 0 16px 40px rgba(22, 21, 15, .1);
      max-height: 280px;
      overflow-y: auto;
      display: none;
    }
    .addr-list.open { display: block; }
    .addr-item {
      padding: .75rem 1rem;
      font-size: .875rem;
      cursor: pointer;
      border-bottom: 1px solid var(--rule);
    }
    .addr-item:last-child { border-bottom: none; }
    .addr-item small { display: block; color: var(--dim); font-size: .75rem; margin-top: .15rem; }
    .addr-item:hover, .addr-item.act { background: rgba(46, 91, 245, .07); }

    .tc-foot {
      border-top: 1px solid var(--rule);
      padding-top: 2rem;
      margin-top: 1rem;
      font-size: .75rem;
      color: var(--dim);
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .tc-foot a { color: var(--accent); text-decoration: none; }

    /* ══════════════════════════════════════════════
       CINEMATIC BAND
    ══════════════════════════════════════════════ */
    .band {
      position: relative;
      width: 100%;
      height: clamp(58vh, 66vh, 80vh);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
    }
    .band-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 32%;
    }
    .band::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        rgba(10, 12, 18, .72) 0%,
        rgba(10, 12, 18, .28) 38%,
        rgba(10, 12, 18, 0) 68%);
    }
    .band-cap {
      position: relative;
      z-index: 1;
      padding: clamp(2rem, 5vw, 4rem) max(1.5rem, 4vw);
      color: #F4F1EA;
    }
    .band-eyebrow {
      font-size: .625rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      opacity: .8;
      margin-bottom: .75rem;
    }
    .band-line {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: clamp(1.5rem, 4.5vw, 3.25rem);
      letter-spacing: -.02em;
      line-height: 1.05;
    }

    /* ══════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════ */
    .ft {
      border-top: 1px solid var(--rule);
      padding: clamp(2.5rem, 5vw, 4rem) max(1.5rem, 4vw) clamp(1.75rem, 3.5vw, 2.75rem);
    }
    .ft-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem 2rem;
      flex-wrap: wrap;
      margin-bottom: clamp(2rem, 4vw, 3rem);
    }
    .ft-logo {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: .14em;
      color: var(--ink);
      text-decoration: none;
    }
    .ft-links {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(1rem, 2.5vw, 2rem);
    }
    .ft-links a {
      font-size: .6875rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--dim);
      text-decoration: none;
      transition: color var(--t);
    }
    .ft-links a:hover { color: var(--accent); }
    .ft-base {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      font-size: .625rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
    }

    /* ── PRIVACY CONSENT CHECKBOX ───────────────── */
    .consent {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      margin: .25rem 0 .75rem;
      font-size: .75rem;
      color: var(--dim);
      line-height: 1.55;
      cursor: pointer;
    }
    .consent input {
      width: 16px;
      height: 16px;
      margin-top: 2px;
      flex-shrink: 0;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .consent a { color: var(--accent); text-decoration: none; }
    .consent a:hover { text-decoration: underline; }

    /* ── REDUCED MOTION ─────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      * { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
    }