/* APPLYNUE design tokens: Камък, Кобалт, Смърч */
  :root {
    color-scheme: light;
    --stone: #E7E9E3;
    --paper: #FAFAF6;
    --cobalt: #1D2E86;
    --cobalt-deep: #152265;
    --spruce: #0E2A22;
    --sage: #B5C7A2;
    --sky: #CAD5FF;
    --mute: #56645E;
    --line: rgba(14, 42, 34, .14);

    --display: "Unbounded", "Arial Black", Arial, sans-serif;
    --serif: "Noto Serif Display", Georgia, "Times New Roman", serif;
    --sans: "Onest", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --gutter: clamp(16px, 4vw, 48px);
    --max: 1240px;
    --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  }

  * { box-sizing: border-box; }
  html, body { overflow-x: clip; }
  body { margin: 0; background: var(--stone); color: var(--spruce); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
  .in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
  .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
  .label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

  /* ---------- Buttons ---------- */
  .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 18px 16px 26px; border-radius: 999px; font-weight: 500; font-size: 15px; transition: transform .2s ease, background-color .2s ease; }
  .btn .arr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; transition: transform .2s ease; }
  .btn:hover .arr { transform: translateX(3px); }
  .btn-sage { background: var(--sage); color: var(--spruce); }
  .btn-sage .arr { background: var(--spruce); color: var(--sage); }
  .btn-cobalt { background: var(--cobalt); color: #fff; }
  .btn-cobalt .arr { background: var(--sky); color: var(--cobalt); }
  .btn-ghost { padding: 16px 24px; border: 1px solid currentColor; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
  .btn-ghost:hover, .btn-ghost:focus-visible { background: #fff; color: var(--cobalt); border-color: #fff; }

  /* ---------- Paper documents (scale with their own width) ---------- */
  .sheet { container-type: inline-size; background: #FFFFFF; color: #16201C; aspect-ratio: 1 / 1.414; border-radius: 4px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(14,42,34,.1), 0 40px 70px -30px rgba(14,42,34,.5); }
  .sheet .pad { padding: 8cqw; height: 100%; display: flex; flex-direction: column; gap: 5cqw; }
  .sheet .top { display: flex; justify-content: space-between; align-items: center; gap: 4cqw; }
  .sheet .nm { font-family: var(--display); font-weight: 500; font-size: 6.4cqw; line-height: 1.1; letter-spacing: -.03em; }
  .sheet .rl { font-size: 2.6cqw; letter-spacing: .14em; text-transform: uppercase; color: #5B6A64; margin-top: 1.4cqw; font-weight: 600; }
  .sheet .ini { width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--sky); color: var(--cobalt); display: grid; place-items: center; font-family: var(--display); font-size: 4cqw; flex: none; }
  .sheet .rule { height: .6cqw; width: 10cqw; background: var(--cobalt); }
  .sheet .cols { display: grid; grid-template-columns: 1fr 1.9fr; gap: 6cqw; flex: 1; }
  .sheet .side { background: #F0F3EC; margin: -1cqw 0 -9cqw -8cqw; padding: 1cqw 4cqw 9cqw 8cqw; }
  .sheet .blk { display: grid; gap: 1.8cqw; align-content: start; margin-bottom: 4.5cqw; }
  .sheet .h { font-size: 2.2cqw; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cobalt); margin-bottom: .6cqw; }
  .sheet .ln { height: 1.2cqw; border-radius: 1cqw; background: #DEE2DA; }
  .sheet .ln.dk { background: #9AA7A1; height: 1.4cqw; }
  .sheet .tags { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
  .sheet .tags span { font-size: 2.2cqw; padding: .6cqw 1.6cqw; border-radius: 1cqw; background: #E2E8DA; }
  .sheet.letter .nm { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 5.6cqw; letter-spacing: 0; }
  .sheet.letter .sig { font-family: var(--serif); font-style: italic; font-size: 7cqw; color: var(--cobalt); }
  .sheet.old { font-family: "Tinos", "Times New Roman", serif; color: #333; background: #FDFDFD; }
  .sheet.old .ttl { text-align: center; font-weight: 700; font-size: 5cqw; text-decoration: underline; }
  .sheet.old .ln { background: #D4D4D4; height: 1cqw; border-radius: 0; }
  .sheet.old .h { color: #333; font-family: "Tinos", serif; font-size: 3cqw; letter-spacing: 0; text-transform: none; font-weight: 700; }
  .w100{width:100%}.w90{width:90%}.w80{width:80%}.w70{width:70%}.w60{width:60%}.w50{width:50%}.w40{width:40%}.w30{width:30%}

  /* ---------- Stickers ---------- */
  .sticker { position: absolute; z-index: 5; border-radius: 16px; padding: 14px 18px; display: grid; gap: 2px; box-shadow: 0 24px 40px -22px rgba(14,42,34,.55); }
  .sticker b { font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
  .sticker small { font-size: 13px; }
  .dot { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
  .dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3C8A5C; }

  /* =========================================================
     NAV
     ========================================================= */
  .nav { position: fixed; inset: 14px 0 auto 0; z-index: 60; pointer-events: none; animation: navIn .9s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes navIn { from { transform: translateY(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
  .nav .bar { pointer-events: auto; width: 100%; max-width: var(--max); margin-inline: auto; padding: 10px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 999px;
    transition: max-width .7s cubic-bezier(.2,.8,.2,1), width .7s cubic-bezier(.2,.8,.2,1), padding .7s cubic-bezier(.2,.8,.2,1), background-color .45s ease, box-shadow .45s ease; }
  .nav.scrolled .bar { max-width: 940px; width: calc(100% - 24px); padding: 7px 7px 7px 10px; background: rgba(250,250,246,.84); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 1px 0 rgba(14,42,34,.06), 0 24px 50px -28px rgba(14,42,34,.55); }

  /* Logo: a folded sheet monogram + APPLY with a tilted NUE label */
  .wm { display: inline-flex; align-items: center; gap: 12px; color: #fff; transition: color .45s ease; }
  .wm .mark { position: relative; width: 34px; height: 42px; flex: none; background: var(--paper); color: var(--cobalt); display: grid; place-items: center; padding-top: 4px;
    font-family: var(--display); font-weight: 600; font-size: 17px; border-radius: 3px; clip-path: polygon(0 0, 64% 0, 100% 28%, 100% 100%, 0 100%);
    transform: rotate(-6deg); transition: transform .6s cubic-bezier(.34,1.56,.64,1), background-color .45s ease; }
  .wm .mark::after { content: ""; position: absolute; top: 0; right: 0; width: 36%; height: 28%; background: var(--sky); clip-path: polygon(0 0, 0 100%, 100% 100%); transition: background-color .45s ease; }
  .wm .mark i { position: absolute; left: 5px; right: 5px; bottom: 7px; height: 2px; background: var(--sage); border-radius: 2px; transform-origin: left; transform: scaleX(.45); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
  .wm .word { font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: .04em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; }
  .nue { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: .02em; font-size: 1.1em; background: var(--sky); color: var(--cobalt); padding: .08em .24em .14em .18em; margin-left: .12em; border-radius: .32em; transform: rotate(-5deg); transition: transform .6s cubic-bezier(.34,1.56,.64,1), background-color .45s ease; }
  .wm:hover .mark { transform: rotate(4deg) translateY(-2px); }
  .wm:hover .mark i { transform: scaleX(1); }
  .wm:hover .nue { transform: rotate(4deg) translateY(-1px); background: var(--sage); color: var(--spruce); }
  .nav.scrolled .wm, .nav.open .wm { color: var(--spruce); }
  .nav.open .bar { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav .ind { animation: none; }
  .nav.scrolled .wm .mark { background: var(--cobalt); color: #fff; }
  .nav.open .wm { color: #fff; }
  .nav.open .wm .mark { background: var(--paper); color: var(--cobalt); }

  /* Links pill with a sliding indicator */
  .nav ul { position: relative; list-style: none; margin: 0; padding: 5px; display: flex; align-items: center; gap: 2px; font-size: 14px; color: var(--spruce);
    background: rgba(250,250,246,.94); border-radius: 999px; box-shadow: 0 12px 30px -18px rgba(14,42,34,.5); transition: background-color .45s ease, box-shadow .45s ease; }
  .nav.scrolled ul { background: transparent; box-shadow: none; }
  .nav .ind { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; background: var(--sky); opacity: 0; pointer-events: none;
    transition: transform .55s cubic-bezier(.3,1.35,.5,1), width .55s cubic-bezier(.3,1.35,.5,1), opacity .3s ease, background-color .3s ease; }
  .nav li { position: relative; z-index: 1; animation: linkIn .7s cubic-bezier(.2,.8,.2,1) both; }
  .nav li:nth-child(2) { animation-delay: .08s; } .nav li:nth-child(3) { animation-delay: .14s; } .nav li:nth-child(4) { animation-delay: .2s; } .nav li:nth-child(5) { animation-delay: .26s; } .nav li:nth-child(6) { animation-delay: .32s; }
  @keyframes linkIn { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
  .nav .lk { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; transition: color .3s ease; }
  .nav .lk.hot { color: var(--cobalt); }
  .nav .lk .cv { font-size: 10px; transition: transform .4s cubic-bezier(.34,1.56,.64,1); opacity: .6; }
  .nav .has-drop:hover .lk .cv, .nav .has-drop:focus-within .lk .cv { transform: rotate(180deg); }

  /* Service preview: a card dropped onto the page like a sticker */
  .drop { position: absolute; top: calc(100% + 16px); left: 50%; width: 560px; padding: 10px; border-radius: 26px; background: var(--paper); color: var(--spruce);
    display: grid; gap: 6px; box-shadow: 0 30px 60px -28px rgba(14,42,34,.55), 0 0 0 1px rgba(14,42,34,.06);
    opacity: 0; visibility: hidden; transform: translate(-50%, -10px) rotate(-3deg) scale(.94); transform-origin: 50% 0;
    transition: opacity .3s ease, transform .55s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .3s; }
  .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
  .has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0) rotate(-1deg) scale(1); transition-delay: 0s; }
  .drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .dcard { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 20px;
    transition: background-color .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
  .dcard > span:last-child { display: grid; }
  .dcard:hover, .dcard:focus-visible, .dcard[aria-current="page"] { background: var(--stone); }
  .dcard:hover { transform: rotate(-1.5deg) translateY(-2px); }
  .drop .mini { width: 64px; aspect-ratio: 1 / 1.414; background: #fff; border-radius: 3px; box-shadow: 0 8px 18px -8px rgba(14,42,34,.4); padding: 8px 7px; display: grid; gap: 4px; align-content: start; transform: rotate(-4deg); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
  .dcard:hover .mini { transform: rotate(4deg) translateY(-3px); }
  .drop .mini-img { padding: 0; overflow: hidden; display: block; }
  .drop .mini-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .drop .mini b { display: block; height: 5px; width: 70%; background: var(--cobalt); border-radius: 2px; }
  .drop .mini span { display: block; height: 3px; background: #DEE2DA; border-radius: 2px; }
  .drop .mini span:nth-child(odd) { width: 80%; }
  .drop .t { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: -.02em; line-height: 1.2; }
  .drop .pr { font-family: var(--serif); font-size: 28px; line-height: 1; margin-top: 6px; }
  .drop .tm { font-size: 13px; color: var(--mute); margin-top: 6px; }
  .drop-all { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--spruce); color: var(--stone); font-size: 14px; font-weight: 500; transition: background-color .3s ease; }
  .drop-all span { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
  .drop-all:hover { background: var(--cobalt); }
  .drop-all:hover span { transform: translateX(4px); }

  /* Order button: rolling label */
  .nav .order { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; margin-left: 6px; border-radius: 999px; background: var(--spruce); color: var(--stone); font-weight: 500; transition: background-color .35s ease; }
  .nav .order:hover { background: var(--cobalt); }
  .roll { display: inline-block; height: 1.3em; line-height: 1.3; overflow: hidden; }
  .roll span { display: block; transition: transform .5s cubic-bezier(.7,0,.2,1); }
  .order:hover .roll span, .order:focus-visible .roll span { transform: translateY(-100%); }
  .nav .order .arr { width: 30px; height: 30px; border-radius: 50%; background: var(--sage); color: var(--spruce); display: grid; place-items: center; font-size: 14px; transform: rotate(-45deg); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
  .nav .order:hover .arr { transform: rotate(0deg); }

  /* Menu button + full-screen menu (tablet and phone) */
  .menu-li { display: none; }
  .menu-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--stone); color: var(--spruce); cursor: pointer; position: relative; margin-left: 4px; font: inherit; }
  .menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s cubic-bezier(.7,0,.2,1), top .45s cubic-bezier(.7,0,.2,1); }
  .menu-btn span:nth-child(1) { top: 16px; } .menu-btn span:nth-child(2) { top: 24px; }
  .nav.open .menu-btn span:nth-child(1) { top: 20px; transform: rotate(45deg); }
  .nav.open .menu-btn span:nth-child(2) { top: 20px; transform: rotate(-45deg); }
  .mmenu { position: fixed; inset: 0; z-index: 55; background: var(--cobalt); color: #fff; padding: 120px var(--gutter) 36px; display: grid; align-content: space-between; gap: 40px; overflow-y: auto;
    clip-path: circle(0px at calc(100% - 44px) 44px); visibility: hidden; transition: clip-path .75s cubic-bezier(.7,0,.2,1), visibility 0s linear .75s; }
  .nav.open + .mmenu { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; transition: clip-path .75s cubic-bezier(.7,0,.2,1); }
  .mmenu ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .mmenu li { border-top: 1px solid rgba(255,255,255,.14); opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
  .nav.open + .mmenu li { opacity: 1; transform: none; }
  .nav.open + .mmenu li:nth-child(1) { transition-delay: .22s; } .nav.open + .mmenu li:nth-child(2) { transition-delay: .28s; } .nav.open + .mmenu li:nth-child(3) { transition-delay: .34s; } .nav.open + .mmenu li:nth-child(4) { transition-delay: .4s; } .nav.open + .mmenu li:nth-child(5) { transition-delay: .46s; }
  .mmenu li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--display); font-weight: 500; font-size: clamp(26px, 7vw, 48px); letter-spacing: -.04em; line-height: 1.05; }
  .mmenu li a small { font-family: var(--serif); font-style: italic; font-size: .6em; color: var(--sky); letter-spacing: 0; white-space: nowrap; }
  .mmenu .mfoot { display: grid; gap: 18px; justify-items: start; opacity: 0; transition: opacity .5s ease .45s; }
  .nav.open + .mmenu .mfoot { opacity: 1; }
  .mmenu .mfoot a.mail { color: rgba(255,255,255,.7); font-size: 15px; }
  html.lock { overflow: hidden; }

  /* =========================================================
     HERO: cobalt cut + stone
     ========================================================= */
  .hero { position: relative; display: grid; grid-template-columns: 58fr 42fr; min-height: 760px; }
  .hero-left { background: var(--cobalt); color: #fff; border-bottom-right-radius: 240px; padding: 170px 96px 150px var(--edge); display: grid; align-content: center; gap: 30px; position: relative; z-index: 2; }
  .hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4.3vw, 64px); line-height: 1.04; letter-spacing: -.04em; margin: 0; }
  .hero h1 .pill { display: inline-block; background: var(--sky); color: var(--cobalt); padding: .02em .26em .1em; border-radius: .34em; transform: rotate(-2.5deg); margin: .1em 0 .06em -.06em; }
  .hero h1 .serif { display: block; font-size: 1.14em; line-height: 1; color: var(--sky); margin-top: .04em; }
  .hero-left p { margin: 0; font-size: 18px; color: rgba(255,255,255,.8); max-width: 34ch; }
  .hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }

  .hero-right { position: relative; }
  /* Document group sits inside the light half; --doc-x / --doc-w drive the stickers too */
  /* The document straddles the seam between the blue and the light half; its right edge tracks the content edge */
  .hero-right { --doc-w: clamp(300px, 34vw, 500px); --doc-x: max(-90px, min(-70px, calc(42vw - var(--edge) - 70px - var(--doc-w)))); }
  .hero-doc { position: absolute; z-index: 4; width: var(--doc-w); left: var(--doc-x); top: 150px; transform: rotate(5deg); }
  /* Hero document: Victoria's real CV is the star; two quiet zooms explain why it works */
  .hd { container-type: inline-size; }
  .hd-page { position: relative; aspect-ratio: 1190 / 1684; overflow: hidden; border-radius: 4px; background: #fff;
    box-shadow: 0 2px 4px rgba(14,42,34,.15), 0 50px 90px -40px rgba(14,42,34,.6); }
  .hd-page img { display: block; width: 100%; height: 100%; }
  /* Design zoom: a real magnifying glass over the halftone dots and the gold "ова" (about 1.9x) */
  .hd-loupe { position: absolute; z-index: 3; left: 48.35cqw; top: 18.6cqw; width: 26cqw; height: 26cqw; border-radius: 50%; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1.3cqw var(--sage), 0 0 0 calc(1.3cqw + 1.5px) rgba(14,42,34,.35), 0 26px 40px -16px rgba(14,42,34,.65);
    animation: hdPop .8s cubic-bezier(.2,.8,.2,1) .45s both; }
  .hd-loupe img { display: block; width: 100%; height: 100%; }
  .hd-loupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 32%), radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 62%, rgba(202,213,255,.28) 100%); }
  .hd-handle { position: absolute; z-index: 2; left: 70.6cqw; top: 39.4cqw; width: 13cqw; height: 3.1cqw; border-radius: 0 1.6cqw 1.6cqw 0;
    background: linear-gradient(180deg, #CFDCC0, var(--sage) 50%, #93A882); transform-origin: 0 50%; transform: rotate(45deg);
    box-shadow: 0 16px 24px -12px rgba(14,42,34,.7); animation: hdFade .5s ease .8s both; }
  .hd-handle::before { content: ""; position: absolute; left: 0; top: -.5cqw; width: 2.6cqw; height: 4.1cqw; border-radius: .6cqw; background: var(--spruce); }
  /* Content zoom */
  .hd-mark { position: absolute; z-index: 2; left: 51.6cqw; top: 127.6cqw; width: 40.2cqw; height: 8.4cqw; border-radius: .8cqw;
    background: rgba(202,213,255,.45); box-shadow: inset 0 0 0 1.5px rgba(29,46,134,.7); animation: hdFade .5s ease .9s both; }
  .hd-link { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .hd-link path { fill: none; stroke: rgba(29,46,134,.6); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  .hd-link { animation: hdFade .6s ease 1.1s both; }
  .hd-card { position: absolute; z-index: 3; left: 30cqw; top: 102.1cqw; width: 72.4cqw; padding: 3.2cqw 3.4cqw; box-sizing: border-box;
    background: #fff; border-radius: 2cqw;
    box-shadow: 0 0 0 1px rgba(29,46,134,.14), 0 0 0 5px rgba(202,213,255,.6), 0 0 44px 12px rgba(202,213,255,.85),
      0 2px 6px rgba(14,42,34,.14), 0 46px 76px -28px rgba(14,42,34,.75);
    animation: hdLift .85s cubic-bezier(.2,.8,.2,1) .75s both; }
  /* Live text (not an image) so it stays sharp even on the tilted document */
  .hd-card p { position: relative; margin: 0; padding-left: 3.6cqw; font-family: var(--sans); font-size: 2.62cqw; line-height: 1.45; font-weight: 500;
    color: #2A2230; letter-spacing: -.003em; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
  .hd-card p::before { content: ""; position: absolute; left: 0; top: 1.08cqw; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; border: .3cqw solid #C9974A; box-sizing: border-box; }
  .hd { -webkit-font-smoothing: antialiased; }
  /* Labels: one quiet style for both zooms */
  .hd-tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
    font-family: var(--display); font-size: clamp(13px, 1.1vw, 16px); font-weight: 500; letter-spacing: -.01em; color: var(--spruce);
    background: #fff; padding: 8px 16px 8px 8px; border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(14,42,34,.06), 0 18px 32px -14px rgba(14,42,34,.6); }
  .hd-tag::before { content: ""; width: 24px; height: 24px; border-radius: 50%; flex: none;
    background: var(--cobalt) center / 13px 13px no-repeat; }
  .hd-tag-design::before { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231D2E86' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/svg%3E"); }
  .hd-tag-content { background: var(--sage); }
  .hd-tag-content::before { background-color: var(--spruce); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E"); }
  .hd-tag-design { background: var(--cobalt); color: #fff; box-shadow: 0 18px 32px -12px rgba(21,34,101,.75); left: 62cqw; top: 51.5cqw; transform: rotate(-4deg); animation: hdFade .5s ease .9s both; }
  .hd-tag-content { left: 24cqw; top: 95.6cqw; transform: rotate(-4deg); animation: hdFade .5s ease 1.2s both; }
  @keyframes hdFade { from { opacity: 0; } }
  @keyframes hdPop { from { opacity: 0; transform: scale(.6); } }
  @keyframes hdLift { from { opacity: 0; transform: translate(5.5cqw, 20.5cqw) scale(.555); } }
  @media (prefers-reduced-motion: reduce) { .hd-loupe, .hd-handle, .hd-mark, .hd-link, .hd-card, .hd-tag { animation: none; } }
  /* Closing message of the composition */
  .hero .st-final { background: var(--spruce); color: var(--stone); padding: 16px 24px; border-radius: 18px;
    left: calc(var(--doc-x) - var(--doc-w) * .2); top: calc(150px + var(--doc-w) * 1.38); transform: rotate(-3deg);
    box-shadow: 0 30px 50px -24px rgba(14,42,34,.75); }
  .hero .st-final b { font-size: clamp(19px, 1.6vw, 24px); white-space: nowrap; }

  /* =========================================================
     PROBLEM
     ========================================================= */
  /* top padding grows with the hero document so the closing sticker always keeps ~100px of air above the heading */
  .problem { padding-block: max(150px, calc(min(34vw, 500px) * 1.38 - 442px)) 89px; position: relative; }
  .problem .big { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4.3vw, 62px); line-height: 1.06; letter-spacing: -.04em; margin: 0; max-width: 16ch; }
  .problem .big2 { font-size: clamp(32px, 4.6vw, 66px); line-height: 1.08; color: var(--cobalt); margin: 18px 0 0 22%; max-width: 20ch; text-wrap: balance; }
  .problem .qs { margin-top: 80px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px 64px; align-items: center; }
  .worries { display: grid; gap: 20px; }
  .worries .label { color: var(--mute); }
  .ours { position: relative; background: var(--cobalt); color: #fff; border-radius: 34px; border-top-left-radius: 120px; padding: 64px 44px 44px; transform: rotate(2deg); display: grid; gap: 16px; box-shadow: 0 40px 70px -40px rgba(21,34,101,.8); }
  .ours .label { color: var(--sage); }
  .ours .say { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4vw, 58px); line-height: 1; letter-spacing: -.045em; margin: 0; }
  .ours .say .serif { display: block; color: var(--sky); font-size: 1.14em; margin-top: .04em; }
  .ours .sm { margin: 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.6; max-width: 44ch; }
  .ours .seal { position: absolute; top: -26px; right: 34px; width: 76px; height: 76px; border-radius: 50%; background: var(--sage); color: var(--spruce); display: grid; place-items: center; font-size: 30px; transform: rotate(-10deg); box-shadow: 0 18px 30px -16px rgba(14,42,34,.6); }
  .chips { display: flex; flex-wrap: wrap; gap: 12px 10px; }
  .chips span { font-size: 16px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(250,250,246,.55); text-decoration: line-through; text-decoration-color: var(--cobalt); text-decoration-thickness: 1.5px; color: var(--mute); }
  .chips span:nth-child(3n+1) { transform: rotate(-2deg); }
  .chips span:nth-child(3n+2) { transform: rotate(1.5deg) translateY(6px); }
  .chips span:nth-child(4) { background: var(--sky); border-color: transparent; color: var(--cobalt); }

  /* =========================================================
     SERVICES: broken grid
     ========================================================= */
  .services { padding-block: 40px 140px; }
  .sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-bottom: 56px; }
  .sec-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4vw, 56px); line-height: 1.04; letter-spacing: -.04em; margin: 0; }
  .sec-head h2 .serif { color: var(--cobalt); font-size: 1.1em; }
  .sec-head p { margin: 0; max-width: 34ch; color: var(--mute); }
  .sec-head .claim { max-width: none; }
  .claim { margin: 0; display: grid; gap: 10px; justify-items: start; }
  .claim .no { font-size: clamp(17px, 1.6vw, 20px); color: var(--mute); }
  .claim .no s { text-decoration-color: var(--cobalt); text-decoration-thickness: 2px; color: var(--spruce); }
  .claim .yes { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.035em; }
  .claim .yes .pill { display: inline-block; background: var(--cobalt); color: #fff; padding: .08em .34em .16em; border-radius: .34em; transform: rotate(-2.5deg); margin-left: .1em; box-shadow: 0 14px 26px -14px rgba(21,34,101,.7); }

  .svc { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 20px; }
  .tile { position: relative; overflow: hidden; border-radius: 32px; padding: 44px; display: flex; flex-direction: column; gap: 18px; }
  .tile h3 { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.06; letter-spacing: -.035em; margin: 0; max-width: 12ch; }
  .tile .desc { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; max-width: 28ch; opacity: .82; }
  .tile .foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; position: relative; z-index: 2; }

  .t-cv { grid-column: 1 / 8; grid-row: 1 / 3; background: var(--paper); min-height: 580px; }
  .t-cv .desc { max-width: 24ch; }
  .t-cv .peek { position: absolute; width: 54%; right: -4%; bottom: -24%; transform: rotate(-8deg); }
  .t-cv .foot { max-width: 55%; flex-direction: column; align-items: start; }

  .t-letter { grid-column: 8 / 13; grid-row: 1 / 2; background: var(--spruce); color: var(--stone); margin-top: 64px; }
  .t-letter .peek { position: absolute; width: 36%; right: -6%; bottom: -34%; transform: rotate(9deg); }
  .t-letter .foot { flex-direction: column; align-items: start; }
  .t-letter .desc { max-width: 24ch; }
  .tile .btn { white-space: nowrap; }

  .t-bundle { grid-column: 7 / 13; grid-row: 2 / 3; background: var(--cobalt); color: #fff; border-top-left-radius: 140px; padding-top: 64px; overflow: visible; margin-left: -40px; }
  .t-bundle h3 { max-width: 14ch; }
  .t-bundle .best { position: absolute; top: -18px; right: 36px; background: var(--sage); color: var(--spruce); font-family: var(--display); font-weight: 500; font-size: 15px; padding: 10px 18px; border-radius: 999px; transform: rotate(4deg); box-shadow: 0 16px 30px -16px rgba(14,42,34,.6); }

  /* =========================================================
     BEFORE / AFTER
     ========================================================= */
  .ba { background: var(--spruce); color: var(--stone); padding-block: 140px 110px; position: relative; overflow: hidden; border-top-right-radius: 200px; }
  .ba .in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0 64px; align-items: center; }
  .ba-cta { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 6px; }
  .ba .label { color: var(--sage); }
  .ba h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.04em; margin: 18px 0 32px; }
  .ba h2 .serif { display: block; color: var(--sage); font-size: 1.12em; }
  .ba ol { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: c; }
  .ba ol li { counter-increment: c; display: grid; grid-template-columns: 46px 1fr; padding: 25px 0; border-top: 1px solid rgba(231,233,227,.14); font-size: 16px; }
  .ba ol li::before { content: counter(c, decimal-leading-zero); font-family: var(--display); font-size: 12px; color: var(--sage); padding-top: 4px; }
  .ba .note { font-size: 13px; color: rgba(231,233,227,.55); display: block; margin-bottom: 28px; }
  .ba .more { font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--sage); padding-bottom: 3px; }
  .pair { position: relative; min-height: 560px; }
  .pair .old { position: absolute; width: 46%; left: 0; top: 70px; transform: rotate(-6deg); filter: grayscale(1); }
  .pair .new { position: absolute; width: 56%; right: 0; top: 10px; transform: rotate(3deg); }
  .pair img.ba-img { display: block; height: auto; aspect-ratio: 1190 / 1684; box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 40px 70px -30px rgba(0,0,0,.6); }
  .pair img.old { filter: grayscale(1) brightness(.92); }
  /* Soft white glow so the documents lift off the dark green */
  .pair::before { content: ""; position: absolute; z-index: 0; left: 4%; right: -6%; top: -8%; bottom: -10%; pointer-events: none;
    background: radial-gradient(ellipse 50% 46% at 64% 46%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%),
                radial-gradient(ellipse 34% 38% at 26% 54%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%); filter: blur(8px); }
  .pair img.ba-img { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 46px 6px rgba(255,255,255,.16), 0 40px 70px -30px rgba(0,0,0,.6); }
  .pair img.old { box-shadow: 0 0 34px 4px rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.6); }
  .pair .old, .pair .new, .pair .tag, .pair svg { z-index: 1; }
  .pair .tag, .pair svg { z-index: 6; }
  /* First reveal: the old CV slides in, then the new one rises over it */
  .pair-anim .pair .old, .pair-anim .pair .new { transition: opacity .9s ease, transform 1.25s cubic-bezier(.16,1,.3,1), filter 1s ease; }
  .pair-anim .pair:not(.arrived) .old { opacity: 0; transform: translate(-70px, 50px) rotate(-14deg) scale(.92); filter: grayscale(1) brightness(.92) blur(6px); }
  .pair-anim .pair:not(.arrived) .new { opacity: 0; transform: translate(60px, 90px) rotate(11deg) scale(.9); filter: blur(8px); }
  .pair-anim .pair.arrived .new { transition-delay: .35s, .35s, .35s; }
  .pair-anim .pair::before { transition: opacity 1.4s ease .5s; }
  .pair-anim .pair:not(.arrived)::before { opacity: 0; }
  .pair-anim .pair .tag, .pair-anim .pair svg { transition: opacity .5s ease, transform .7s cubic-bezier(.34,1.56,.64,1); }
  .pair-anim .pair:not(.arrived) .tag { opacity: 0; transform: scale(.6); }
  .pair-anim .pair:not(.arrived) svg { opacity: 0; }
  .pair-anim .pair.arrived .tag.t1 { transition-delay: .7s; }
  .pair-anim .pair.arrived svg { transition-delay: .95s; }
  .pair-anim .pair.arrived .tag.t2 { transition-delay: 1.15s; }
  .pair .tag { position: absolute; z-index: 5; font-family: var(--display); font-weight: 500; font-size: 14px; padding: 8px 16px; border-radius: 999px; }
  .pair .tag.t1 { left: 4%; top: 36px; background: rgba(231,233,227,.14); color: var(--stone); transform: rotate(-6deg); }
  .pair .tag.t2 { right: -8px; top: -14px; background: var(--sage); color: var(--spruce); transform: rotate(5deg); }
  .pair svg { position: absolute; left: 30%; top: 0; width: 22%; z-index: 6; overflow: visible; }

  /* =========================================================
     HOW IT WORKS
     ========================================================= */
  .how { padding-block: 140px 120px; }
  .how .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 20px; }
  .how .step { display: grid; gap: 14px; align-content: start; padding-top: 24px; border-top: 2px solid var(--spruce); }
  .how .step:nth-child(2) { margin-top: 90px; }
  .how .step:nth-child(3) { margin-top: 180px; }
  .how .step .n { font-family: var(--display); font-weight: 600; font-size: clamp(72px, 8vw, 120px); line-height: .9; letter-spacing: -.05em; color: var(--cobalt); }
  .how .step h3 { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -.03em; margin: 0; max-width: 15ch; }
  .how .step p { margin: 0; color: var(--mute); max-width: 30ch; }
  .how .step .aside { justify-self: start; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--sky); color: var(--cobalt); transform: rotate(-2deg); }

  /* =========================================================
     PRICING (typographic rows)
     ========================================================= */
  .pricing { background: var(--paper); padding-block: 130px 150px; overflow: hidden; border-top-left-radius: 200px; border-bottom-right-radius: 200px; }
  .pricing h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 56px; }
  .pricing h2 .serif { color: var(--cobalt); font-size: 1.12em; }
  .rows { display: grid; }
  .row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 8px 32px; align-items: center; padding: 30px 0; border-top: 1px solid var(--line); }
  .row .n { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; }
  .row .d { color: var(--mute); font-size: 15px; }
  .row .p { font-family: var(--serif); font-size: clamp(44px, 5.6vw, 80px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums; text-align: right; }
  .row.best { background: var(--cobalt); color: #fff; border-top: 0; margin: 14px calc(-1 * var(--edge) - 60px) 14px -40px; padding: 40px calc(var(--edge) + 60px) 40px 40px; border-radius: 28px 0 0 28px; transform: rotate(-1.2deg); }
  .row.best .d { color: rgba(255,255,255,.72); }
  .row.best .p s { font-family: var(--sans); font-size: 18px; opacity: .55; margin-right: 14px; vertical-align: middle; letter-spacing: 0; }
  .row.best .badge { display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; background: var(--sage); color: var(--spruce); padding: 5px 12px; border-radius: 999px; margin-left: 12px; vertical-align: middle; transform: rotate(3deg); }
  .addons { margin-top: 56px; display: grid; grid-template-columns: 220px 1fr; gap: 20px 40px; align-items: start; }
  .addons .label { color: var(--mute); padding-top: 12px; }
  .addons .list { display: flex; flex-wrap: wrap; gap: 10px; }
  .addons .list span { display: inline-flex; gap: 10px; align-items: baseline; padding: 11px 18px; border-radius: 999px; background: var(--stone); font-size: 15px; }
  .addons .list b { font-weight: 600; color: var(--cobalt); font-variant-numeric: tabular-nums; }

  /* =========================================================
     FAQ
     ========================================================= */
  .faq { padding-block: 60px 140px; }
  .pricing + .faq { padding-top: 150px; }
  .pricing + .final { padding-top: 120px; }
  .final + .faq { padding-top: 20px; }
  .faq .in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
  .faq h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 20px; position: sticky; top: 40px; }
  .faq h2 .serif { display: block; color: var(--cobalt); font-size: 1.1em; }
  .faq .ask { color: var(--mute); max-width: 30ch; }
  .faq .ask a { color: var(--cobalt); border-bottom: 1px solid currentColor; }
  details { border-top: 1px solid var(--line); }
  details:last-child { border-bottom: 1px solid var(--line); }
  summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 40px; gap: 20px; align-items: center; padding: 26px 0; font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.025em; line-height: 1.25; }
  summary::-webkit-details-marker { display: none; }
  summary .pm { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-family: var(--sans); font-size: 22px; font-weight: 400; transition: transform .25s ease, background-color .25s ease; }
  /* "+" drawn with two bars so it sits exactly in the middle (a text glyph sits on the font baseline) */
  summary .pm { position: relative; font-size: 0; color: var(--spruce); }
  summary .pm { will-change: transform; }
  summary .pm::before, summary .pm::after { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 1px; background: currentColor; }
  summary .pm::before { width: 8px; height: 2px; }
  summary .pm::after { width: 2px; height: 8px; }
  details[open] summary .pm { transform: rotate(45deg); background: var(--sky); color: var(--cobalt); }
  details.closing summary .pm { transform: none; background: var(--paper); color: inherit; }
  details p { margin: 0 0 28px; color: var(--mute); max-width: 56ch; padding-right: 60px; }
  details p:has(+ p) { margin-bottom: 12px; }
  /* Accordion motion (driven from site.js): the answer slides and fades in */
  details.anim { overflow: hidden; }
  details.anim p { transition: opacity .38s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
  details.anim.closing p, details.anim.opening-start p { opacity: 0; transform: translateY(-8px); }

  /* =========================================================
     FINAL CTA
     ========================================================= */
  .final { padding-block: 0 120px; }
  .final .box { position: relative; overflow: hidden; background: var(--cobalt); color: #fff; border-radius: 40px; border-top-left-radius: 180px; padding: 110px 64px 90px; display: grid; gap: 34px; min-height: 520px; align-content: center; }
  .final h2 { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 5vw, 76px); line-height: 1.04; letter-spacing: -.045em; margin: 0; max-width: 13ch; position: relative; z-index: 2; }
  .final h2 .pill { display: inline-block; background: var(--sky); color: var(--cobalt); padding: .02em .26em .1em; border-radius: .34em; transform: rotate(-2deg); margin-top: .08em; }
  .final .row2 { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; position: relative; z-index: 2; }
  .final .row2 span { font-size: 14px; color: rgba(255,255,255,.7); }
  .final .peek { position: absolute; width: min(34%, 380px); right: -2%; top: 16%; transform: rotate(-9deg); z-index: 1; }
  .final .peek2 { position: absolute; width: min(26%, 290px); right: 22%; top: 48%; transform: rotate(7deg); z-index: 1; }

  /* =========================================================
     FOOTER
     ========================================================= */
  footer { background: var(--spruce); color: var(--stone); padding-block: 90px 0; overflow: hidden; border-top-right-radius: 160px; }
  footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  footer .mail { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.03em; border-bottom: 1px solid var(--sage); padding-bottom: 4px; }
  footer p { margin: 14px 0 0; color: rgba(231,233,227,.6); font-size: 14px; max-width: 30ch; }
  footer h3 { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); margin: 6px 0 16px; }
  footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
  footer ul a:hover { color: var(--sage); }
  footer .giant .nue { background: transparent; color: rgba(181,199,162,.2); transform: rotate(-4deg); padding: 0; margin-left: .04em; font-size: 1.04em; }
  footer .giant { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 16.4vw, 236px); line-height: .78; letter-spacing: -.05em; color: rgba(231,233,227,.08); white-space: nowrap; margin-top: 90px; transform: translateY(12%); text-align: center; }
  footer .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: rgba(231,233,227,.5); padding-top: 50px; border-top: 1px solid rgba(231,233,227,.12); margin-top: 60px; }

  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width: 1080px) {
    .nav li.link { display: none; }
    .menu-li { display: block; }
  }

  @media (max-width: 860px) {
    .nav .bar { padding-inline: var(--gutter); }
    .nav.scrolled .bar { width: calc(100% - 20px); }
    .nav .order .roll { display: none; }
    .nav .order { padding: 6px; }
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-left { padding: 120px var(--gutter) 150px; border-bottom-right-radius: 140px; }
    .hero-right { height: 560px; margin-top: -120px; }
    .hero-doc { left: 50%; top: 0; width: min(64vw, 330px); transform: translateX(-54%) rotate(4deg); }
    .hd-tag { font-size: 12px; padding: 6px 12px 6px 6px; } .hd-tag::before { width: 20px; height: 20px; }
    .hero .st-final { left: 50%; top: calc(min(64vw, 330px) * 1.415 + 18px); transform: translateX(-50%) rotate(-3deg); }
    .hero .st-final b { font-size: 18px; }

    .problem { padding-block: 90px 64px; }
    .problem .big2 { margin-left: 10%; }
    .problem .qs, .addons { grid-template-columns: 1fr; margin-top: 48px; }
    .addons .label { padding-top: 0; }
    .ours { transform: rotate(1deg); padding: 56px 28px 34px; border-top-left-radius: 90px; margin-top: 12px; }

    .services { padding-block: 20px 90px; }
    .svc { grid-template-columns: 1fr; gap: 16px; }
    .t-cv, .t-letter, .t-bundle { grid-column: 1; grid-row: auto; margin: 0; }
    .tile { padding: 32px 26px; border-radius: 26px; }
    .t-cv { min-height: 600px; }
    .t-cv .foot { max-width: 60%; }
    .t-cv .peek { width: 56%; right: -12%; bottom: -8%; }
    .t-letter { padding-right: 34%; }
    .t-letter .peek { width: 40%; right: -10%; bottom: -20%; }
    .t-bundle { border-top-left-radius: 90px; padding-top: 52px; margin-top: 18px; }

    .ba { padding-block: 90px 81px; border-top-right-radius: 110px; }
    .ba .in { grid-template-columns: 1fr; gap: 40px 0; }
    .ba-cta { margin-top: 4px; }
    .pair { min-height: 0; aspect-ratio: 1 / 1; max-width: 100%; }

    .how { padding-block: 90px 80px; }
    .how .grid { grid-template-columns: 1fr; gap: 40px; }
    .how .step:nth-child(2) { margin: 0 0 0 12%; } .how .step:nth-child(3) { margin: 0 0 0 24%; }

    .pricing { padding-block: 90px 110px; border-top-left-radius: 110px; border-bottom-right-radius: 110px; }
    .row { grid-template-columns: 1fr auto; padding: 22px 0; }
    .row .d { grid-column: 1; }
    .row .p { grid-row: 1 / span 2; grid-column: 2; font-size: 40px; }
    .row.best { margin-inline: -18px calc(-1 * var(--gutter) - 30px); padding: 30px calc(var(--gutter) + 30px) 30px 18px; }
    .row.best .badge { margin: 8px 0 0; display: table; }
    .row.best .p s { display: block; font-size: 14px; margin: 0 0 4px; }

    .faq .in { grid-template-columns: 1fr; gap: 16px; }
    .faq h2 { position: static; }
    details p { padding-right: 0; }

    .final .box { padding: 80px 26px 320px; border-top-left-radius: 110px; border-radius: 30px 30px 30px 30px; border-top-left-radius: 110px; }
    .final .peek { width: 56%; right: -6%; top: auto; bottom: -90px; }
    .final .peek2 { width: 44%; right: 44%; top: auto; bottom: -60px; }

    footer { border-top-right-radius: 100px; padding-block: 70px 0; }
    footer .top { grid-template-columns: 1fr 1fr; }
    footer .top > div:first-child { grid-column: 1 / -1; }
  }

  @media (max-width: 520px) {
    .t-letter { padding-right: 26px; }
    .t-letter .peek { display: none; }
    .sticker b { font-size: 20px; }
  }

  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* =========================================================
   SHARED: subpages
   ========================================================= */
.nav.on-light .wm { color: var(--spruce); }
.nav.on-light .wm .mark { background: var(--cobalt); color: #fff; }
.nav.on-light.open .wm { color: #fff; }
.nav.on-light.open .wm .mark { background: var(--paper); color: var(--cobalt); }
.nav .lk[aria-current="page"] { color: var(--spruce); font-weight: 500; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--mute); list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.crumbs a:hover { border-color: currentColor; }
.on-dark .crumbs { color: rgba(255,255,255,.66); }

.proto-note { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--mute); border: 1px dashed rgba(14,42,34,.3); }
.proto-note b { color: var(--cobalt); font-weight: 600; }


/* Shared subpage pieces */
.pill-c { display: inline-block; background: var(--cobalt); color: #fff; padding: .02em .26em .1em; border-radius: .34em; transform: rotate(-2.5deg); }
.pill-s { display: inline-block; background: var(--sky); color: var(--cobalt); padding: .02em .26em .1em; border-radius: .34em; transform: rotate(-2.5deg); }
.pill-g { display: inline-block; background: var(--sage); color: var(--spruce); padding: .02em .26em .1em; border-radius: .34em; transform: rotate(-2.5deg); }
.h-display { font-family: var(--display); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; margin: 0; text-wrap: balance; }
.btn-ghost-dark { padding: 16px 24px; border: 1px solid rgba(14,42,34,.35); color: var(--spruce); }
.btn-ghost-dark:hover { border-color: var(--spruce); }

/* =========================================================
   SCROLL RAIL: a page sheet that fills in as you read
   ========================================================= */
.rail { position: fixed; left: 22px; top: 50%; z-index: 45; width: 48px; height: min(60vh, 520px); transform: translateY(-50%); border-radius: 999px;
  background: rgba(250,250,246,.8); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 24px 44px -26px rgba(14,42,34,.5), inset 0 0 0 1px rgba(14,42,34,.07); --p: 0; }
.rail .track { position: absolute; left: 50%; top: 30px; bottom: 30px; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(14,42,34,.14); }
.rail .fill { position: absolute; inset: 0; border-radius: 2px; background: var(--cobalt); transform-origin: top; transform: scaleY(var(--p)); }
.rail .wp { position: absolute; left: 50%; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(14,42,34,.28); transform: translate(-50%, -50%); transition: background-color .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
.rail .wp::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.rail .wp.done { background: var(--cobalt); box-shadow: 0 0 0 3px rgba(202,213,255,.9); }
.rail .wp:hover, .rail .wp:focus-visible { transform: translate(-50%, -50%) scale(1.5); }

.rail .knob { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 30px; height: 38px; margin: -19px 0 0 -15px; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(14,42,34,.3)); transform: rotate(var(--tilt, 0deg)); transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.rail .paper { position: absolute; inset: 0; background: #fff; border-radius: 3px; padding: 7px 5px 0; display: grid; align-content: start; gap: 3px;
  clip-path: polygon(0 0, 62% 0, 100% 26%, 100% 100%, 0 100%); }
.rail .paper::after { content: ""; position: absolute; top: 0; right: 0; width: 38%; height: 26%; background: var(--sky); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.rail .paper i { display: block; height: 2px; border-radius: 2px; background: #CBD2C6; transform-origin: left; transform: scaleX(0); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.rail .paper i:first-child { height: 3px; width: 55%; background: var(--cobalt); }
.rail .paper i:nth-child(2) { width: 35%; background: var(--sage); }
.rail .paper i:nth-child(3), .rail .paper i:nth-child(5) { width: 100%; }
.rail .paper i:nth-child(4), .rail .paper i:nth-child(6) { width: 75%; }
.rail .paper i:nth-child(7) { width: 90%; }
.rail .paper i.on { transform: scaleX(1); }
.rail .knob::after { content: "✓"; position: absolute; right: -9px; bottom: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--sage); color: var(--spruce);
  display: grid; place-items: center; font-size: 10px; font-weight: 700; transform: scale(0) rotate(-60deg); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.rail .knob.done::after { transform: scale(1) rotate(-8deg); }


.rail .tag { position: absolute; left: 36px; top: 0; white-space: nowrap; pointer-events: none; font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: -.02em;
  background: var(--spruce); color: var(--stone); padding: 8px 14px; border-radius: 999px; box-shadow: 0 14px 26px -14px rgba(14,42,34,.6);
  opacity: 0; transform: translate(-10px, -50%) rotate(-4deg); transition: opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1), top .35s cubic-bezier(.2,.8,.2,1); }
.rail .tag.show { opacity: 1; transform: translate(0, -50%) rotate(-4deg); }
.rail .tag.hover { background: var(--cobalt); color: #fff; }

@media (max-width: 1279px) {
  .rail { left: 8px; width: 12px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rail .track { top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: rgba(127,140,134,.35); }
  .rail .knob { display: none; }
  .rail .wp { width: 7px; height: 7px; }
  .rail .tag { left: 14px; font-size: 12px; padding: 6px 11px; }
}
@media (max-width: 560px) { .rail { left: 4px; } .rail .wp { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail .knob { transform: none !important; } }

/* Clickable pricing rows with quiet hover feedback */
a.row { cursor: pointer; border-radius: 20px; padding-inline: 20px; margin-inline: -20px; transition: background-color .28s ease; }
a.row:not(.best):hover { background: rgba(181,199,162,.22); }
a.row:not(.best):focus-visible { background: rgba(181,199,162,.22); outline: 2px solid var(--cobalt); outline-offset: 2px; }
a.row .n, a.row .d, a.row .p { transition: transform .28s cubic-bezier(.2,.8,.2,1), color .3s ease; }
a.row:not(.best):hover .n, a.row:not(.best):hover .d,
a.row:not(.best):focus-visible .n, a.row:not(.best):focus-visible .d { transform: translateX(5px); }
a.row:not(.best):hover .p, a.row:not(.best):focus-visible .p { transform: translateX(5px) scale(1.025); transform-origin: right center; }
a.row:not(.best):hover .n { color: var(--cobalt); }
a.row .n::after { content: "→"; display: inline-block; margin-left: 10px; color: var(--cobalt); opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
a.row.best .n::after { content: none; }
a.row:not(.best):hover .n::after, a.row:not(.best):focus-visible .n::after { opacity: 1; transform: translateX(0); }

/* The bundle card lifts as a whole */
a.row.best { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
a.row.best:hover, a.row.best:focus-visible { transform: rotate(-1.2deg) translateY(-4px) scale(1.01); box-shadow: 0 30px 55px -32px rgba(21,34,101,.75); }
a.row.best:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }
a.row.best .badge { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
a.row.best:hover .badge { transform: rotate(5deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.row .n, a.row .d, a.row .p, a.row.best, a.row .n::after { transition: none; } }

/* Homepage pricing: quiet closing line */
.price-note { margin: 44px 0 0; font-size: 14px; color: var(--mute); }

/* =========================================================
   Hero CV: dark header, lime accents (anonymised sample)
   ========================================================= */
.cx { --lime: #C8F04B; --ink: #0B0D10; background: #fff; color: #1A1D21; font-family: "Montserrat Alternates", var(--sans); position: relative; }
.cx b { font-weight: 700; color: inherit; }
.cx-strip { position: absolute; left: 0; top: 0; width: 1.3cqw; height: 61cqw; background: var(--lime); z-index: 3; }
.cx-head { position: relative; background: var(--ink); color: #E9ECEF; padding: 7cqw 6cqw 12cqw 7cqw; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  display: grid; grid-template-columns: 1fr auto auto; column-gap: 3.4cqw; align-items: start;
  background-image: radial-gradient(60% 70% at 88% 18%, rgba(200,240,75,.08), transparent 70%); }
.cx-name { font-family: var(--display); font-weight: 600; font-size: 5.6cqw; line-height: .98; letter-spacing: -.035em; color: #fff; }
.cx-name span { display: block; color: var(--lime); }
.cx-role { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.2cqw; letter-spacing: .34em; text-transform: uppercase; color: var(--lime); margin-top: 3cqw; }
.cx-contacts { list-style: none; margin: .6cqw 0 0; padding: 0; display: grid; gap: 1.05cqw; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.12cqw; color: #D5D9DD; white-space: nowrap; }
.cx-contacts li { display: flex; align-items: center; gap: 1.2cqw; }
.cx-contacts i { font-style: normal; width: 1.9cqw; text-align: center; color: var(--lime); font-size: 1.3cqw; font-weight: 700; }
.cx-contacts .dim { color: #7D848B; }
.cx-photo { width: 15cqw; height: 15cqw; border-radius: 50%; border: .75cqw solid var(--lime); box-shadow: 0 0 0 1.2cqw #15181C; background: radial-gradient(circle at 40% 35%, #3A424A, #1B1F24 70%);
  display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 4cqw; color: var(--lime); margin-top: -.6cqw; }
.cx-rule { grid-column: 1 / 3; height: .3cqw; margin: 3cqw 0 3.2cqw; background: linear-gradient(90deg, var(--lime) 0 10%, #2A2F35 10% 100%); }
.cx-sum { grid-column: 1 / 3; display: grid; gap: 1.8cqw; }
.cx-sum p { margin: 0; font-size: 1.45cqw; line-height: 1.75; color: #BFC5CB; }
.cx-sum b { color: #fff; font-weight: 600; }
.cx-sec { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 3cqw; margin: 1.6cqw 7cqw 3.4cqw 0; }
.cx-tab { background: var(--lime); color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 2.1cqw; padding: 1.3cqw 3.4cqw 1.3cqw 1.8cqw; }
.cx-st { font-weight: 700; font-size: 1.8cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.cx-bar { height: .55cqw; background: linear-gradient(90deg, var(--ink) 0 88%, var(--lime) 88%); }
.cx-job { display: grid; grid-template-columns: 17cqw 1fr; gap: 3.6cqw; padding-inline: 7cqw; margin-bottom: 3.6cqw; }
.cx-dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.15cqw; line-height: 1.5; color: #2A2F35; }
.cx-dt em { font-style: normal; color: #7FA320; font-weight: 500; }
.cx-note { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .95cqw; color: #8A9096; margin-top: 1cqw; }
.cx-co { font-weight: 700; font-size: 1.6cqw; margin-top: 2.2cqw; color: var(--ink); }
.cx-ct { font-size: 1.1cqw; color: #8A9096; margin-top: .5cqw; }
.cx-what { position: relative; border-left: .18cqw solid #E3E6E9; padding-left: 2.8cqw; }
.cx-ttl { position: relative; font-weight: 700; font-size: 1.85cqw; color: var(--ink); line-height: 1.25; }
.cx-ttl::before { content: ""; position: absolute; left: -3.9cqw; top: .1em; width: 1.1cqw; height: 2.3cqw; background: var(--lime); transform: skewX(-18deg); }
.cx-ttl::after { content: ""; display: block; width: 3.6cqw; height: .35cqw; background: var(--lime); margin: 1.4cqw 0 2cqw; }
.cx-what ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3cqw; }
.cx-what li { position: relative; padding-left: 2.2cqw; font-size: 1.32cqw; line-height: 1.55; color: #3A4046; }
.cx-what li::before { content: ""; position: absolute; left: 0; top: .5em; width: .95cqw; height: .95cqw; border-radius: .2cqw; background: var(--lime); }
.cx-what li b { color: var(--ink); }

/* =========================================================
   Services cards: whole card is the link, documents reveal on scroll
   ========================================================= */
a.tile { cursor: pointer; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
a.tile:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -38px rgba(14,42,34,.55); }
a.tile:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 5px; }
.t-bundle:focus-visible, .t-letter:focus-visible { outline-color: var(--sage); }
a.tile .btn { pointer-events: none; }
a.tile:hover .btn .arr { transform: translateX(3px); }
.t-bundle h3, .t-bundle .desc, .t-bundle .foot { position: relative; z-index: 2; }
.t-bundle .peeks { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 1; }
.t-bundle .peek { position: absolute; }
.t-bundle .desc { max-width: 21ch; }
.t-bundle .p1 { width: 27%; right: 10%; bottom: -34%; transform: rotate(-7deg); }
.peek img.doc-img { display: block; width: 100%; height: auto; aspect-ratio: 744 / 1053; }
.t-bundle .p2 { width: 24%; right: -5%; bottom: -26%; transform: rotate(8deg); }

/* reveal: only when the script is running and motion is welcome */
.reveal-on .tile .peek .sheet { opacity: 0; transform: translateY(140px) rotate(9deg) scale(.82); filter: blur(6px);
  transition: opacity 1.1s ease, transform 1.7s cubic-bezier(.16,1,.3,1), filter 1.1s ease; will-change: transform, opacity; }
.reveal-on .tile.seen .peek .sheet { opacity: 1; transform: none; filter: none; }
.reveal-on .t-cv .peek .sheet { transition-delay: .1s; }
.reveal-on .t-letter .peek .sheet { transition-delay: .3s; }
.reveal-on .t-bundle .p1 .sheet { transition-delay: .45s; }
.reveal-on .t-bundle .p2 .sheet { transition-delay: .7s; transform: translateY(140px) rotate(-9deg) scale(.82); }
.reveal-on .t-bundle.seen .p2 .sheet { transform: none; }
@media (max-width: 860px) {
  .t-bundle { padding-bottom: 150px; }
  .t-bundle .p1 { width: 38%; right: 30%; bottom: -44%; }
  .t-bundle .p2 { width: 34%; right: 2%; bottom: -36%; }
}

/* Language switch (BG / EN) */
.nav .lang { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--spruce); transition: background-color .3s ease, color .3s ease; }
.nav .lang:hover, .nav .lang:focus-visible { background: var(--sky); color: var(--cobalt); }
.nav .lang svg { opacity: .7; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.nav .lang:hover svg { transform: rotate(-25deg); opacity: 1; }
.lang-ck { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--spruce); transition: background-color .3s ease; }
.lang-ck:hover, .lang-ck:focus-visible { background: var(--paper); }
@media (max-width: 860px) { .nav .lang { padding: 10px 11px; } .nav .lang svg { display: none; } }
.nav li:nth-child(7) { animation-delay: .38s; }