:root { --ink: #0E0E0E; --carbon: #1A1918; --line: #2A2826; --cream: #EDE6D6; --ash: #8A857C; --ember: #FF5A1F; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { background: var(--ink); scrollbar-gutter: stable; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  body { overflow-x: clip; background: var(--ink); color: var(--cream); font-family: "Geist", sans-serif; -webkit-font-smoothing: antialiased; }
  .wrap { max-width: min(1520px, 92vw); margin: 0 auto; padding: 0 24px; }
  .serif { font-family: "Instrument Serif", serif; font-weight: 400; letter-spacing: 0; font-style: italic; }
  .ember { color: var(--ember); }
  .kicker { font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); }
  @keyframes rise { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: none; } }
  .fade > * { animation: rise 1.1s cubic-bezier(.2,.75,.2,1) both; }
  .fade > h1 { animation-delay: .05s; }
  .fade > h1 { animation-delay: .18s; }
  .fade > .hero-row { animation: none; }
  .fade > .hero-row > * { animation: rise 1.1s cubic-bezier(.2,.75,.2,1) both; }
  .fade > .hero-row > .intro { animation-delay: .42s; }
  .fade > .hero-row > *:nth-child(2) { animation-delay: .54s; }
  .fade > .hero-row > *:nth-child(3) { animation-delay: .64s; }

  /* top bar */
  .bar { position: sticky; top: 0; z-index: 40; background: rgba(14,14,14,.82); backdrop-filter: blur(14px); }
  .bar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
  .brand { display: flex; align-items: center; line-height: 0; }
  .nav { display: flex; gap: 10px; justify-content: center; }
  .nav a, .nav-cta { display: inline-block; white-space: nowrap; padding: 14px 28px; border: 1px solid var(--line); border-radius: 99px; font-size: 1rem; font-weight: 500; color: var(--cream); text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
  .nav a:hover, .nav a:focus-visible { border-color: var(--cream); }
  .nav-cta { justify-self: end; }
  .nav-cta { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .nav-cta:hover, .nav-cta:focus-visible { background: var(--ember); border-color: var(--ember); }
  @media (max-width: 900px) {
    .bar { padding-top: env(safe-area-inset-top, 0px); }
    .bar-in { grid-template-columns: auto 1fr auto; gap: clamp(6px, 1.4vw, 12px); padding-top: 18px; padding-bottom: 14px; align-items: center; }
    .logo { height: clamp(24px, 4.4vw, 32px); }
    .nav { gap: clamp(4px, 1vw, 8px); min-width: 0; }
    .nav a, .nav-cta { padding: clamp(7px, 1.4vw, 10px) clamp(9px, 2.2vw, 15px); font-size: clamp(.62rem, 2.1vw, .85rem); letter-spacing: -.01em; }
    .nav a.on::before { display: none; }
  }
  /* hero: everything that matters on screen one */
  .hero { min-height: calc(100dvh - 104px); display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 0 38px; }
  .logo { height: 54px; width: auto; }
  h1 { margin-top: 5vh; font-weight: 500; font-size: clamp(3rem, 8.4vw, 10.5rem); line-height: .96; letter-spacing: -.05em; max-width: 13ch; }
  .hero-row { margin-top: 48px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; align-items: stretch; }
  .intro { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding-right: 24px; }
  .intro p { font-size: clamp(1.15rem, 1.6vw, 1.6rem); line-height: 1.55; color: var(--ash); }
  .intro p strong { color: var(--cream); font-weight: 500; }
  .intro a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .2s, color .2s; }
  .intro a:hover { color: var(--ember); border-color: var(--ember); }
  .intro p .serif { color: var(--cream); font-size: 1.15em; }
  .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
  .pill { display: inline-block; border-radius: 99px; padding: 15px 28px; font-weight: 500; font-size: 1rem; text-decoration: none; transition: background .25s, border-color .25s; }
  .pill.solid { background: var(--cream); color: var(--ink); }
  .pill.solid:hover, .pill.solid:focus-visible { background: var(--ember); }
  .pill.ghost { border: 1px solid var(--line); color: var(--cream); }
  .pill.ghost:hover, .pill.ghost:focus-visible { border-color: var(--cream); }
  .num { background: var(--carbon); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
  .num .nl { display: block; font-size: clamp(1.15rem, 1.7vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; }
  .num .ns { display: block; margin-top: 6px; font-size: clamp(.95rem, 1.1vw, 1.1rem); color: var(--ash); }
  .num b { font-weight: 500; font-size: clamp(3.4rem, 6.4vw, 7.4rem); letter-spacing: -.045em; line-height: 1; }


  /* work */
  .work { padding: 96px 0; border-top: 1px solid var(--line); }
  #ai { padding-bottom: 0; }
  .work-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .work-head > .kicker { font-size: 17px; letter-spacing: .14em; white-space: nowrap; line-height: 1; padding-top: 3px; }
  .work h2 { margin-top: 14px; font-weight: 500; font-size: clamp(2.2rem, 5vw, 4.4rem); letter-spacing: -.04em; line-height: 1; }
  .reel { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .tile { position: relative; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--carbon); cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit; display: block; width: 100%; }
  .tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s; }
  .tile:hover img, .tile:focus-visible img { transform: scale(1.04); opacity: .75; }
  .tile .shot { position: relative; display: block; }
  .tile iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
  .tile.playing { cursor: default; }
  .tile.playing:hover img { transform: none; opacity: 1; }
  .tile.v .shot { max-width: 420px; margin: 0 auto; }
  .tile.v img, .tile.v iframe { aspect-ratio: 1 / 1; }
  .tile.p .shot { max-width: 300px; margin: 0 auto; }
  .tile.p img, .tile.p iframe { aspect-ratio: 9 / 16; }
  .tile .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; font-size: 22px; transition: background .25s; }
  .tile:hover .play { background: var(--ember); }
  .tile .meta { display: block; padding: 20px 22px 22px; }
  .tile .meta h3 { display: block; font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.03em; }
  .tile .meta h3 span { color: var(--ash); }
  .tile .meta p { display: block; margin-top: 9px; font-size: .98rem; line-height: 1.5; letter-spacing: 0; text-transform: none; color: #A8A298; }
  @media (max-width: 800px) {
    .work { padding: 88px 0; }
    .reel { grid-template-columns: 1fr; gap: 14px; }
    .work-head { flex-direction: column; align-items: start; }
  }
  /* services: pinned stage, cards arrive one by one */
  .svc-track { height: 310vh; position: relative; }
  .stage { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 78px; padding-bottom: 10px; overflow: hidden; }
  .svc-track { margin-top: 0; }
  .stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 26px; }
  .stage h2 { font-weight: 500; font-size: clamp(2.2rem, 5vw, 4.4rem); letter-spacing: -.04em; line-height: 1; }
  .count { font-family: "Space Mono", monospace; font-size: 17px; letter-spacing: .14em; color: var(--ash); white-space: nowrap; line-height: 1; padding-top: 3px; }
  .count #n { color: var(--cream); }
  .cards { position: relative; height: min(780px, 74vh); transition: height .3s cubic-bezier(.2,.7,.2,1); }
  .card {
    position: absolute; top: 0; left: 0; right: 0; border-radius: 28px; padding: clamp(24px, 3.6vw, 48px);
    display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 64px);
    transform-origin: 50% 0; will-change: transform, filter;
  }
  .card .main { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
  .card h3 { font-weight: 500; font-size: clamp(3rem, 6.6vw, 6.6rem); letter-spacing: -.05em; line-height: .92; }
  .card .desc { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 32ch; }
  .card .side { display: flex; flex-direction: column; }
  .card .side ul { list-style: none; flex: 1; display: flex; flex-direction: column; }
  .card .side li { flex: 1; display: flex; align-items: center; font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid var(--rule); }
  .card .side li:first-child { border-top: 1px solid var(--rule); }
  .card .lbl { display: block; font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
  .c1 { background: var(--carbon); border: 1px solid var(--line); --rule: #34312E; } .c1 .desc, .c1 .lbl { color: var(--ash); }
  .c2 { background: var(--cream); color: var(--ink); --rule: #BCB1A0; } .c2 .desc, .c2 .lbl { color: #5E5A53; }
  .c3 { background: var(--ember); color: var(--ink); --rule: rgba(26,10,2,.28); } .c3 .desc, .c3 .lbl { color: #3A1A0C; }
  .retainer { margin-top: 22px; text-align: center; color: var(--ash); font-size: 1rem; }
  .retainer a { color: var(--cream); }
  .retainer a:hover { color: var(--ember); }

  /* book */
  .book { padding: 120px 0 130px; border-top: 1px solid var(--line); text-align: center; }
  .book h2 { margin-top: 18px; font-weight: 500; font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -.045em; line-height: 1; }
  .book p.lead { margin: 22px auto 0; max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; color: var(--ash); }
  .cal-wrap { margin-top: 48px; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--carbon); }
  .calendly-inline-widget { min-width: 320px; height: 720px; }
  @media (max-width: 800px) { .book { padding: 88px 0 96px; } .calendly-inline-widget { height: 1060px; } }

  /* contact */
  .contact { text-align: center; padding: 110px 0 96px; border-top: 1px solid var(--line); }
  .contact h2 { margin-top: 24px; font-weight: 500; font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -.045em; line-height: 1; }
  .cta-row { margin-top: 40px; }
  .contact .mail { display: inline-block; margin-top: 26px; font-size: clamp(1.3rem, 3.4vw, 2.4rem); color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 6px; transition: color .25s, border-color .25s; }
  .contact .mail:hover, .contact .mail:focus-visible { color: var(--ember); border-color: var(--ember); }
  .socials { margin-top: 36px; display: flex; gap: 14px; justify-content: center; }
  .socials a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; color: var(--ash); transition: color .25s, border-color .25s, background .25s; }
  .socials a:hover, .socials a:focus-visible { color: var(--ink); background: var(--cream); border-color: var(--cream); }
  .socials svg { width: 19px; height: 19px; display: block; fill: currentColor; }
  footer { padding: 32px 0 40px; text-align: center; font-size: 15px; }
  footer .copy { font-family: "Geist", sans-serif; font-size: 1.15em; letter-spacing: 0; line-height: 1; }

  /* scroll reveal */
  .rv { opacity: 0; transform: translateY(40px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .rv.on { opacity: 1; transform: none; }

  @media (max-width: 960px) {
    .hero-row { grid-template-columns: 1fr 1fr; }
    .intro { grid-column: 1 / -1; padding-right: 0; }
    .cards { height: auto; }
    .card { grid-template-columns: 1fr; gap: 26px; align-content: start; bottom: auto; }
    .card .main { gap: 16px; }
    .stage { justify-content: flex-start; padding-top: 72px; }
    .stage-head { margin-bottom: 20px; }
    .retainer { margin-top: 18px; }
    @media (max-height: 820px) { .retainer { display: none; } }
    .card .side li { flex: none; padding: 9px 0; font-size: 1.05rem; }
  }
  @media (max-width: 600px) {
    .wrap { padding: 0 16px; }
    .logo { height: 36px; }
    h1 { margin-top: 5vh; }
    .num { padding: 20px; }
    .num .ns { display: none; }
    .stage-head { flex-direction: column; align-items: start; margin-bottom: 22px; }
    .card { padding: 22px 20px; border-radius: 22px; }
    .card h3 { font-size: 2.9rem; }
    .card .desc { font-size: 1.05rem; }
    .card .side li { font-size: 1.1rem; padding: 13px 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fade > *, .fade > .hero-row > *, .card, .rv { animation: none; transition: none; opacity: 1; transform: none; }
    .svc-track { height: auto; } .stage { position: static; height: auto; padding: 100px 0; }
    .cards { height: auto; display: grid; gap: 16px; } .card { position: relative; transform: none !important; filter: none !important; }
  }
  html.wf .fade > *, html.wf .fade > .hero-row > * { animation-play-state: paused; }

  /* page transition: minimal shutter */
  .veil { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; opacity: 0; contain: strict; }
  body.out .veil, body.in .veil { opacity: 1; }
  .veil .shutter { position: absolute; left: 0; right: 0; height: 51%; background: #0b0b0b; }
  .veil .top { top: 0; transform: translate3d(0,-100%,0); }
  .veil .bot { bottom: 0; transform: translate3d(0,100%,0); }
  .veil .core { position: absolute; left: 0; right: 0; top: 50%; margin: 0 auto; width: 260px; transform: translateY(-50%); display: grid; justify-items: center; gap: 18px; opacity: 0; }
  .veil .mark { height: 68px; width: auto; display: block; }
  .veil .rule { display: block; width: 180px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
  .veil .rule::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: left; }
  .veil .label { font-family: "Space Mono", monospace; font-size: 11px; line-height: 14px; height: 14px; letter-spacing: .34em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }

  @keyframes shutClose { from { transform: translate3d(0,var(--from),0); } to { transform: translate3d(0,0,0); } }
  @keyframes shutOpen { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,var(--from),0); } }
  @keyframes coreIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes coreOut { from { opacity: 1; } to { opacity: 0; } }
  @keyframes ruleRun { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  body.out .veil .top { --from: -100%; animation: shutClose .5s cubic-bezier(.65,0,.25,1) both; }
  body.out .veil .bot { --from: 100%; animation: shutClose .5s cubic-bezier(.65,0,.25,1) both; }
  body.out .veil .core { animation: coreIn .26s cubic-bezier(.2,.8,.2,1) .14s both; }
  body.out .veil .rule::after { animation: ruleRun .34s cubic-bezier(.4,0,.2,1) .2s both; }

  body.in .veil .top { --from: -100%; animation: shutOpen .62s cubic-bezier(.76,0,.18,1) .12s both; }
  body.in .veil .bot { --from: 100%; animation: shutOpen .62s cubic-bezier(.76,0,.18,1) .12s both; }
  body.in .veil .core { animation: coreOut .26s cubic-bezier(.4,0,1,1) both; }
  body.in .veil .rule::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .veil { display: none; } }

  /* page head */
  .phead { padding: 64px 0 10px; }
  .crumb { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
  .crumb a { color: var(--ash); text-decoration: none; }
  .crumb a:hover { color: var(--cream); }
  .phead h1 { margin-top: 16px; font-weight: 500; font-size: clamp(2.8rem, 9vw, 7rem); letter-spacing: -.05em; line-height: .95; max-width: none; }
  .phead p.sub { margin-top: 20px; max-width: 54ch; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--ash); }

  /* filter chips */
  .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 8px; }
  .chip { background: none; font: inherit; cursor: pointer; padding: 13px 26px; border: 1px solid var(--line); border-radius: 99px; color: var(--cream); font-size: 1rem; font-weight: 500; transition: background .25s, color .25s, border-color .25s; }
  .chip:hover { border-color: var(--cream); }
  .chip.on { background: var(--cream); color: var(--ink); border-color: var(--cream); }

  .grid-page { padding: 24px 0 120px; }
  .grid-page .reel { margin-top: 24px; }
  .svc-page { padding: 56px 0 0; }
  .svc-static { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; align-items: stretch; }
  .svc-static .card { position: static; inset: auto; min-width: 0; height: 100%; min-height: 0; transform: none !important; filter: none !important;
    grid-template-columns: minmax(0, 1fr); gap: 34px; align-content: start; padding: clamp(32px, 2.6vw, 48px); }
  .svc-static .card > * { min-width: 0; }
  .svc-static .card h3 { font-size: clamp(2.1rem, 2.9vw, 3.4rem); line-height: 1.0; }
  .svc-static .card .desc { font-size: clamp(1.02rem, 1.1vw, 1.2rem); line-height: 1.6; max-width: none; }
  .svc-static .card .main { gap: 14px; justify-content: flex-start; }
  .svc-static .card .side { justify-content: flex-start; }
  .svc-static .card .side ul { flex: none; }
  .svc-static .card .side li { flex: none; font-size: clamp(1.05rem, 1.25vw, 1.35rem); font-weight: 500; padding: 16px 0; letter-spacing: -.01em; }
  @media (max-width: 1000px) { .svc-static { grid-template-columns: 1fr; } .svc-static .card { min-height: 0; } }

  .nav a.on { border-color: var(--cream); color: var(--cream); }
  .nav a.on::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); margin-right: 9px; vertical-align: 2px; }

  /* end CTA block */
  .endcta { padding: 96px 0 130px; text-align: center; }
  .endcta h2 { margin-top: 16px; font-weight: 500; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -.045em; line-height: 1; }
  .endcta .lead { margin: 20px auto 0; max-width: 50ch; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; color: var(--ash); }
  .endcta .cta-row { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .endcta .socials { margin-top: 40px; }

  .more { display: flex; justify-content: center; margin-top: 96px; }
  .more .pill { padding: 26px 68px; font-size: 1.45rem; border-radius: 99px; }

  /* pinned deck: same card layout as the services page */
  .svc-track .card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 24px; align-content: start; padding: clamp(28px, 2.3vw, 42px); }
  .svc-track .card .main { gap: 14px; justify-content: flex-start; }
  .svc-track .card h3 { font-size: clamp(1.8rem, 2.3vw, 2.8rem); line-height: 1.0; }
  .svc-track .card .desc { font-size: clamp(1rem, 1.05vw, 1.12rem); line-height: 1.55; max-width: none; }
  .svc-track .card .side { display: flex; justify-content: flex-start; }
  .svc-track .card .side ul { flex: none; }
  .svc-track .card .side li { flex: none; font-size: clamp(1rem, 1.15vw, 1.2rem); font-weight: 500; padding: 12px 0; letter-spacing: -.01em; }

  /* card call to action */
  .card-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; font-size: 1.02rem; font-weight: 500; text-decoration: none; color: inherit; opacity: .75; transition: opacity .2s; }
  .card-cta span { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .card-cta:hover { opacity: 1; }
  .card-cta:hover span { transform: translateX(5px); }
  .svc-static .card { grid-template-rows: auto auto 1fr auto; }

  /* client ticker */
  .clients { margin-top: 112px; padding-bottom: 0; }
  .clients .kicker { text-align: center; }
  .ticker { margin-top: 38px; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); padding: 22px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .ticker .track { display: flex; align-items: center; width: max-content; will-change: transform; }
  .ticker.css-fallback .track { animation: slide 64s linear infinite; }
  /* sized in vw so the count is the same on every screen: 7 across on desktop, about 4 on phones */
  .ticker img { height: 2.68vw; width: auto; object-fit: contain;
    margin: 0 4.31vw; opacity: .82; flex: none;
    transition: opacity .3s ease; }
  .ticker img[src*="hartley-people"], .ticker img[src*="lavigi"] { height: 4.02vw; }
  .ticker img.hot { opacity: 1; }
  .ticker.slow img:not(.hot) { opacity: .38; }
  @keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } }
  @media (max-width: 900px) {
    .ticker img { height: 5.34vw; margin: 0 6.86vw; }
    .ticker img[src*="hartley-people"], .ticker img[src*="lavigi"] { height: 8.04vw; }
  }

  /* mobile menu */
  .burger { display: none; width: clamp(42px, 11vw, 48px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; padding: 0; place-items: center; gap: 5px; flex-direction: column; }
  .burger span { display: block; width: 17px; height: 1.5px; background: var(--cream); transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s; border-radius: 2px; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  body.nav-open .burger span:first-child { transform: translateY(3.2px) rotate(45deg); }
  body.nav-open .burger span:last-child { transform: translateY(-3.2px) rotate(-45deg); }
  .menu { display: none; }

  @media (max-width: 900px) {
    .bar-in { grid-template-columns: 1fr auto; }
    .bar-in .nav, .bar-in .nav-cta { display: none; }
    .burger { display: flex; align-items: center; justify-content: center; }
    .menu { position: absolute; right: max(16px, calc(50% - 760px + 16px)); top: calc(100% - 6px);
      display: grid; gap: 2px; width: min(230px, 62vw); padding: 14px; border-radius: 26px;
      background: var(--cream); box-shadow: 0 24px 60px rgba(0,0,0,.45);
      opacity: 0; transform: translateY(-10px) scale(.97); transform-origin: top right;
      pointer-events: none; visibility: hidden;
      transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; }
    body.nav-open .menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
    .menu a { display: block; text-align: center; padding: 14px 12px; border: 0; border-radius: 16px;
      font-size: 1.05rem; font-weight: 500; color: var(--ink); text-decoration: none; }
    .menu a.on { background: rgba(14,14,14,.07); }
    .menu a:active { background: rgba(14,14,14,.12); }
    .menu .menu-cta { margin-top: 6px; background: var(--ink); color: var(--cream); }
  }

  footer a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
  footer a:hover { color: var(--cream); border-color: var(--ember); }