/* Kareva: Services page. */
/* =========================================================
       HERO
    ========================================================= */

    .sv-hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 150px 0 120px;
      background: var(--night);
      color: #fff;
    }

    .sv-hero-glow {
      position: absolute;
      top: -18vw;
      right: -12vw;
      width: 62vw;
      height: 62vw;
      background: radial-gradient(closest-side, rgba(226, 51, 61,.28), rgba(226, 51, 61,.08) 50%, transparent);
      pointer-events: none;
      animation: ctaFloat 18s ease-in-out infinite alternate;
    }

    .sv-hero-glow.is-cool {
      top: auto;
      right: auto;
      bottom: -24vw;
      left: -18vw;
      width: 54vw;
      height: 54vw;
      background: radial-gradient(closest-side, rgba(150,180,210,.14), transparent);
      animation-duration: 22s;
      animation-direction: alternate-reverse;
    }

    .sv-hero-dots {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px);
      background-size: 34px 34px;
      -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
      mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
    }

    .sv-hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      align-items: center;
      gap: 40px;
    }

    .sv-hero h1 {
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(56px, 6vw, 112px);
      line-height: .95;
      letter-spacing: -.04em;
      font-weight: var(--h-weight);
    }

    .sv-hero h1 em {
      font-style: normal;
      color: var(--orange);
    }

    .sv-hero .lede {
      max-width: 560px;
    }

    .sv-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 40px;
    }

    /* flight path visual */

    .sv-flight {
      position: relative;
      aspect-ratio: 1 / 1;
      width: 100%;
      max-width: 640px;
      justify-self: end;
    }

    .sv-flight svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .flight-base {
      fill: none;
      stroke: rgba(255,255,255,.14);
      stroke-width: 1.5;
      stroke-dasharray: 3 9;
      stroke-linecap: round;
    }

    .flight-live {
      fill: none;
      stroke: var(--orange);
      stroke-width: 2;
      stroke-linecap: round;
    }

    .flight-stop circle.ring {
      fill: var(--night);
      stroke: rgba(255,255,255,.3);
      stroke-width: 1.5;
      transition: stroke .5s ease, fill .5s ease;
    }

    .flight-stop circle.core {
      fill: rgba(255,255,255,.3);
      transition: fill .5s ease;
    }

    .flight-stop text {
      font-family: "Figtree", sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .18em;
      fill: rgba(255,255,255,.42);
      text-transform: uppercase;
      transition: fill .5s ease;
    }

    .flight-stop .num {
      font-size: 12px;
      letter-spacing: .12em;
      fill: rgba(255,255,255,.3);
    }

    .flight-stop.is-lit circle.ring {
      stroke: var(--orange);
      fill: #2a1b14;
    }

    .flight-stop.is-lit circle.core {
      fill: var(--orange);
    }

    .flight-stop.is-lit text {
      fill: #fff;
    }

    .flight-stop.is-lit .num {
      fill: var(--orange);
    }

    .plane path {
      fill: #f7f4ed;
    }

    .plane .fold {
      fill: #cfc6b6;
    }

    .sv-hero-foot {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 38px;
      z-index: 3;
    }

    .sv-hero-foot .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }

    .sv-jump {
      display: flex;
      gap: 26px;
      list-style: none;
    }

    .sv-jump a {
      position: relative;
      padding: 6px 0;
      transition: color .3s ease;
    }

    .sv-jump a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s cubic-bezier(.2,.7,.2,1);
    }

    .sv-jump a:hover {
      color: #fff;
    }

    .sv-jump a:hover::after {
      transform: scaleX(1);
    }

    .sv-scroll {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .sv-scroll span {
      position: relative;
      width: 60px;
      height: 1px;
      overflow: hidden;
      background: rgba(255,255,255,.25);
    }

    .sv-scroll span::after {
      content: "";
      position: absolute;
      top: 0;
      left: -50%;
      width: 50%;
      height: 100%;
      background: #fff;
      animation: scrollLine 1.6s linear infinite;
    }

    @keyframes scrollLine {
      to { left: 120%; }
    }


    /* =========================================================
       SERVICE INDEX  (big rows + cursor preview)
    ========================================================= */

    .sv-index {
      position: relative;
      padding: 10vw 0 9vw;
      background: var(--cream);
      color: var(--ink);
    }

    .sv-index-head {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      align-items: end;
      gap: 40px;
      margin-bottom: 5vw;
    }

    .sv-index-head .lede {
      margin-top: 0;
      justify-self: end;
    }

    .sv-rows {
      list-style: none;
      border-bottom: 1px solid rgba(22,21,19,.14);
    }

    .sv-row a {
      position: relative;
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr) auto 60px;
      align-items: center;
      gap: 30px;
      padding: 34px 26px;
      overflow: hidden;
      border-top: 1px solid rgba(22,21,19,.14);
      color: var(--ink);
      isolation: isolate;
    }

    /* dark fill that rises from the bottom on hover */

    .sv-row a::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--ink);
      transform: scaleY(0);
      transform-origin: bottom center;
      transition: transform .6s cubic-bezier(.7,0,.2,1);
    }

    .sv-row a:hover::before,
    .sv-row a:focus-visible::before {
      transform: scaleY(1);
      transform-origin: top center;
    }

    .sv-row-num {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .2em;
      color: rgba(22,21,19,.42);
      transition: color .4s ease;
    }

    .sv-row-title {
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(30px, 3.6vw, 60px);
      line-height: 1;
      letter-spacing: -.03em;
      font-weight: 500;
      transition: color .4s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    }

    .sv-row-word {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(22,21,19,.42);
      transition: color .4s ease;
    }

    .sv-row-arrow {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(22,21,19,.3);
      border-radius: 50%;
      font-size: 20px;
      transition: transform .6s cubic-bezier(.34,1.56,.64,1), background .4s ease, border-color .4s ease, color .4s ease;
    }

    .sv-row a:hover .sv-row-title,
    .sv-row a:focus-visible .sv-row-title {
      color: #fff;
      transform: translateX(14px);
    }

    .sv-row a:hover .sv-row-num,
    .sv-row a:hover .sv-row-word,
    .sv-row a:focus-visible .sv-row-num,
    .sv-row a:focus-visible .sv-row-word {
      color: rgba(255,255,255,.6);
    }

    .sv-row a:hover .sv-row-arrow,
    .sv-row a:focus-visible .sv-row-arrow {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      transform: rotate(45deg);
    }

    .sv-row a:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: -2px;
    }

    /* floating preview that follows the cursor */

    .sv-preview {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 50;
      width: 340px;
      aspect-ratio: 5 / 4;
      overflow: hidden;
      border-radius: 14px;
      pointer-events: none;
      opacity: 0;
      box-shadow: 0 40px 70px -30px rgba(0,0,0,.55);
    }

    .sv-preview-img {
      position: absolute;
      inset: 0;
      background: center / cover no-repeat;
      opacity: 0;
      transform: scale(1.15);
      transition: opacity .45s ease, transform .9s cubic-bezier(.2,.7,.2,1);
    }

    .sv-preview-img.is-on {
      opacity: 1;
      transform: none;
    }


    /* =========================================================
       SERVICE DETAIL  (stacked sticky panels)
    ========================================================= */

    .sv-stack {
      position: relative;
      background: var(--cream);
      padding-bottom: 2vw;
    }

    .sv-panel {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      padding: 14px 14px 0;
    }

    .sv-card {
      position: relative;
      height: 100%;
      overflow: hidden;
      border-radius: 28px;
      transform-origin: 50% 0%;
      will-change: transform;
    }

    .sv-card.is-dark   { background: var(--ink);   color: #fff; }
    .sv-card.is-night  { background: #0d0d0d;      color: #fff; }
    .sv-card.is-sand   { background: var(--sand);  color: var(--ink); }
    .sv-card.is-white  { background: #fffdf9;      color: var(--ink); box-shadow: inset 0 0 0 1px rgba(22,21,19,.08); }

    .sv-card-shade {
      position: absolute;
      inset: 0;
      z-index: 5;
      background: #000;
      opacity: 0;
      pointer-events: none;
    }

    .sv-card-inner {
      position: relative;
      height: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      gap: 5vw;
      padding: 96px 5vw 40px;
    }

    .sv-card-big {
      position: absolute;
      right: 3vw;
      bottom: -4vw;
      font-family: "Parkinsans", sans-serif;
      font-size: 26vw;
      line-height: 1;
      letter-spacing: -.06em;
      font-weight: 600;
      color: currentColor;
      opacity: .035;
      pointer-events: none;
    }

    .sv-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 26px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      opacity: .55;
    }

    .sv-meta i {
      display: block;
      width: 34px;
      height: 1px;
      background: currentColor;
    }

    .sv-card h2 {
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(40px, 4.4vw, 76px);
      line-height: .96;
      letter-spacing: -.035em;
      font-weight: var(--h-weight);
    }

    .sv-intro {
      max-width: 520px;
      margin-top: 26px;
      font-size: 18px;
      line-height: 1.6;
      opacity: .7;
    }

    .sv-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 28px;
      max-width: 620px;
      margin-top: 34px;
      list-style: none;
    }

    .sv-list li {
      position: relative;
      padding: 13px 0 13px 28px;
      border-top: 1px solid currentColor;
      border-color: rgba(127,127,127,.25);
      font-size: 16px;
      line-height: 1.4;
    }

    .sv-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 20px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--orange);
    }

    .sv-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
      list-style: none;
    }

    .sv-tags li {
      padding: 8px 12px;
      border: 1px solid rgba(127,127,127,.35);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: .11em;
      text-transform: uppercase;
      opacity: .75;
    }

    .sv-card .btn {
      margin-top: 34px;
    }

    /* the illustration column */

    .sv-visual {
      position: relative;
      justify-self: center;
      width: min(100%, 560px);
      aspect-ratio: 1 / 1;
    }

    .sv-visual svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* ---------- 01 strategy: target + orbiting insights ---------- */

    .viz-ring {
      fill: none;
      stroke: rgba(255,255,255,.16);
      stroke-width: 1.5;
    }

    .viz-ring.is-dash {
      stroke-dasharray: 4 10;
      animation: spin 60s linear infinite;
      transform-origin: 280px 280px;
    }

    .viz-orbit {
      transform-origin: 280px 280px;
      animation: spin 26s linear infinite;
    }

    .viz-orbit.is-slow {
      animation-duration: 40s;
      animation-direction: reverse;
    }

    .viz-orbit .counter {
      animation: spin 26s linear infinite reverse;
    }

    .viz-orbit.is-slow .counter {
      animation: spin 40s linear infinite;
    }

    .viz-chip rect {
      fill: #2a2825;
      stroke: rgba(255,255,255,.18);
    }

    .viz-chip text {
      font-family: "Figtree", sans-serif;
      font-size: 15px;
      font-weight: 500;
      fill: #fff;
      letter-spacing: .02em;
    }

    .viz-chip circle {
      fill: var(--orange);
    }

    .viz-core {
      fill: var(--orange);
    }

    .viz-pulse {
      fill: none;
      stroke: var(--orange);
      stroke-width: 2;
      transform-origin: 280px 280px;
      animation: pulse 3s ease-out infinite;
    }

    .viz-pulse.d2 { animation-delay: 1s; }
    .viz-pulse.d3 { animation-delay: 2s; }

    @keyframes spin   { to { transform: rotate(360deg); } }
    @keyframes pulse  { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

    /* ---------- 02 web: browser building itself ---------- */

    .viz-browser .frame   { fill: #fffdf9; stroke: rgba(22,21,19,.14); }
    .viz-browser .bar     { fill: #efe9dd; }
    .viz-browser .dot     { fill: rgba(22,21,19,.22); }
    .viz-browser .dot.r   { fill: var(--red); }
    .viz-browser .url     { fill: #fffdf9; }
    .viz-browser .block   { fill: var(--ink); }
    .viz-browser .soft    { fill: rgba(22,21,19,.12); }
    .viz-browser .accent  { fill: var(--orange); }
    .viz-browser .hero    { fill: #2a2825; }
    .viz-browser .card    { fill: #f3ede2; stroke: rgba(22,21,19,.1); }
    .viz-browser .build   { transform-box: fill-box; transform-origin: 0 50%; }
    .viz-cursor path      { fill: var(--ink); stroke: #fff; stroke-width: 1.5; }

    .viz-phone .frame     { fill: var(--ink); }
    .viz-phone .screen    { fill: #fffdf9; }

    /* ---------- 03 commerce: product, cart, connected systems ---------- */

    .viz-link {
      fill: none;
      stroke: rgba(255,255,255,.28);
      stroke-width: 1.5;
      stroke-dasharray: 5 7;
      animation: flow 1.4s linear infinite;
    }

    @keyframes flow { to { stroke-dashoffset: -24; } }

    .viz-node rect   { fill: #232120; stroke: rgba(255,255,255,.16); }
    .viz-node text   { font-family: "Figtree", sans-serif; font-size: 15px; font-weight: 500; fill: #fff; }
    .viz-node circle { fill: var(--orange); }

    .viz-product .frame  { fill: #fffdf9; }
    .viz-product .img    { fill: #ede7db; }
    .viz-product .ink    { fill: var(--ink); }
    .viz-product .muted  { fill: rgba(22,21,19,.18); }
    .viz-product .btnbg  { fill: var(--ink); }
    .viz-product .btntxt { font-family: "Figtree", sans-serif; font-size: 15px; font-weight: 600; fill: #fff; }
    .viz-product .price  { font-family: "Parkinsans", sans-serif; font-size: 26px; font-weight: 600; fill: var(--ink); }
    .viz-badge circle    { fill: var(--red); }
    .viz-badge text      { font-family: "Figtree", sans-serif; font-size: 17px; font-weight: 700; fill: #fff; }

    /* ---------- 04 growth: chart drawing upwards ---------- */

    .viz-grid line  { stroke: rgba(22,21,19,.1); stroke-width: 1; }
    .viz-bar        { fill: rgba(22,21,19,.1); transform-box: fill-box; transform-origin: 50% 100%; }
    .viz-area       { fill: url(#growthFill); }
    .viz-line       { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
    .viz-pt         { fill: #fffdf9; stroke: var(--ink); stroke-width: 3; }
    .viz-pt.is-top  { fill: var(--red); stroke: var(--ink); }
    .viz-tag rect   { fill: var(--ink); }
    .viz-tag text   { font-family: "Figtree", sans-serif; font-size: 15px; font-weight: 500; fill: #fff; }
    .viz-axis text  { font-family: "Figtree", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; fill: rgba(22,21,19,.42); }


    /* =========================================================
       ALSO IN THE TOOLKIT
    ========================================================= */

    .sv-also {
      position: relative;
      padding: 10vw 0 9vw;
      background: var(--night);
      color: #fff;
    }

    .sv-also-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 5vw;
    }

    .sv-tile {
      position: relative;
      min-height: 280px;
      padding: 38px 36px 40px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 16px;
      background: #151413;
      transition: border-color .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    }

    .sv-tile::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(226, 51, 61,.20), transparent 65%);
      transition: opacity .45s ease;
    }

    .sv-tile:hover {
      transform: translateY(-6px);
      border-color: rgba(226, 51, 61,.45);
    }

    .sv-tile:hover::before {
      opacity: 1;
    }

    .sv-tile-icon {
      position: relative;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 14px;
      transition: background .4s ease, border-color .4s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
    }

    .sv-tile:hover .sv-tile-icon {
      background: var(--orange);
      border-color: var(--orange);
      transform: rotate(-8deg) scale(1.06);
    }

    .sv-tile-icon svg {
      width: 26px;
      height: 26px;
    }

    .sv-tile h3 {
      position: relative;
      margin-top: 30px;
      font-family: "Parkinsans", sans-serif;
      font-size: 26px;
      line-height: 1.1;
      letter-spacing: -.02em;
      font-weight: 500;
    }

    .sv-tile p {
      position: relative;
      margin-top: 14px;
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255,255,255,.6);
    }


    /* =========================================================
       TECH MARQUEE
    ========================================================= */

    .sv-tech {
      position: relative;
      overflow: hidden;
      padding: 4vw 0 6vw;
      background: var(--night);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .sv-tech-label {
      margin-bottom: 3vw;
      text-align: center;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }

    .sv-marquee {
      display: flex;
      overflow: hidden;
      white-space: nowrap;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }

    .sv-marquee + .sv-marquee {
      margin-top: 18px;
    }

    .sv-marquee-track {
      display: inline-flex;
      flex: 0 0 auto;
      gap: 18px;
      padding-right: 18px;
      animation: ctaMarquee 40s linear infinite;
    }

    .sv-marquee.is-reverse .sv-marquee-track {
      animation-direction: reverse;
      animation-duration: 46s;
    }

    .sv-marquee:hover .sv-marquee-track {
      animation-play-state: paused;
    }

    .sv-pill {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 18px 30px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(20px, 2vw, 30px);
      font-weight: 500;
      letter-spacing: -.01em;
      color: rgba(255,255,255,.82);
      transition: background .4s ease, color .4s ease, border-color .4s ease;
    }

    .sv-pill i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--orange);
    }

    .sv-pill:hover {
      background: #fff;
      border-color: #fff;
      color: var(--ink);
    }


    /* =========================================================
       ENGAGEMENT MODELS
    ========================================================= */

    .sv-models {
      position: relative;
      padding: 10vw 0 9vw;
      background: var(--sand);
      color: var(--ink);
    }

    .sv-models-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      margin-top: 5vw;
      align-items: stretch;
    }

    .sv-model {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 40px 38px 38px;
      border: 1px solid rgba(22,21,19,.1);
      border-radius: 18px;
      background: #fffdf9;
      transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease;
    }

    .sv-model:hover {
      transform: translateY(-8px);
      box-shadow: 0 40px 60px -30px rgba(22,21,19,.35);
    }

    .sv-model.is-featured {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .sv-model-tag {
      align-self: flex-start;
      padding: 7px 12px;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .6;
    }

    .sv-model.is-featured .sv-model-tag {
      opacity: 1;
      color: var(--orange);
    }

    .sv-model h3 {
      margin-top: 30px;
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(28px, 2.4vw, 38px);
      line-height: 1.05;
      letter-spacing: -.025em;
      font-weight: 500;
    }

    .sv-model > p {
      margin-top: 14px;
      font-size: 17px;
      line-height: 1.6;
      opacity: .68;
    }

    .sv-model-best {
      margin-top: 26px;
      padding-top: 20px;
      border-top: 1px solid rgba(127,127,127,.25);
      font-size: 14px;
      line-height: 1.5;
    }

    .sv-model-best b {
      display: block;
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .16em;
      text-transform: uppercase;
      opacity: .5;
    }

    .sv-model ul {
      margin-top: 22px;
      margin-bottom: 30px;
      list-style: none;
    }

    .sv-model li {
      position: relative;
      padding: 8px 0 8px 26px;
      font-size: 16px;
    }

    .sv-model li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 14px;
      width: 12px;
      height: 7px;
      border-left: 2px solid var(--orange);
      border-bottom: 2px solid var(--orange);
      transform: rotate(-45deg);
    }

    .sv-model .btn {
      margin-top: auto;
      align-self: flex-start;
    }


    /* =========================================================
       PROCESS (horizontal line)
    ========================================================= */

    .sv-process {
      position: relative;
      padding: 10vw 0 9vw;
      background: var(--cream);
      color: var(--ink);
    }

    .sv-steps {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 22px;
      margin-top: 6vw;
      list-style: none;
    }

    .sv-steps-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 8px;
      height: 1px;
      background: rgba(22,21,19,.14);
    }

    .sv-steps-line span {
      display: block;
      width: 100%;
      height: 100%;
      background: var(--ink);
      transform: scaleX(0);
      transform-origin: left center;
    }

    .sv-step {
      position: relative;
      padding-top: 46px;
      opacity: .35;
      transition: opacity .6s ease;
    }

    .sv-step.is-on {
      opacity: 1;
    }

    .sv-step::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1px;
      width: 15px;
      height: 15px;
      border: 1px solid rgba(22,21,19,.4);
      border-radius: 50%;
      background: var(--cream);
      transition: background .4s ease, border-color .4s ease, box-shadow .5s ease;
    }

    .sv-step.is-on::before {
      background: var(--ink);
      border-color: var(--ink);
      box-shadow: 0 0 0 7px rgba(226, 51, 61,.18);
    }

    .sv-step span {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .2em;
      color: rgba(22,21,19,.45);
    }

    .sv-step h3 {
      margin-top: 12px;
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(24px, 2vw, 32px);
      line-height: 1;
      letter-spacing: -.02em;
      font-weight: 600;
      text-transform: lowercase;
    }

    .sv-step p {
      margin-top: 12px;
      font-size: 15px;
      line-height: 1.55;
      color: rgba(22,21,19,.6);
    }


    /* =========================================================
       REVEALS
    ========================================================= */



    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1200px) {

      .sv-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 50px;
      }

      .sv-steps-line {
        display: none;
      }

      .sv-step {
        opacity: 1;
      }
    }

    @media (max-width: 1100px) {

      .sv-card-inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 3vw;
      }

      .sv-also-grid,
      .sv-models-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* shorter laptop screens: tighten the pinned panels so they always fit */

    @media (min-width: 901px) and (max-height: 860px) {

      .sv-card h2 {
        font-size: clamp(34px, 3.5vw, 56px);
      }

      .sv-meta {
        margin-bottom: 16px;
      }

      .sv-intro {
        margin-top: 16px;
        font-size: 16px;
      }

      .sv-list {
        margin-top: 20px;
      }

      .sv-list li {
        padding: 9px 0 9px 24px;
        font-size: 15px;
      }

      .sv-list li::before {
        top: 15px;
      }

      .sv-tags {
        margin-top: 16px;
      }

      .sv-card .btn {
        margin-top: 22px;
      }

      .sv-visual {
        width: min(100%, 64vh);
      }
    }

    @media (min-width: 901px) and (max-height: 740px) {

      .sv-tags {
        display: none;
      }
    }

    /* very short screens: stop pinning so nothing is ever cut off */

    @media (min-width: 901px) and (max-height: 600px) {

      .sv-panel {
        position: relative;
        height: auto;
      }

      .sv-card-inner {
        padding: 100px 5vw 70px;
      }
    }

    @media (max-width: 900px) {

.sv-hero {
        padding: 130px 0 140px;
      }

      .sv-hero-grid {
        grid-template-columns: 100%;
      }

      .sv-flight {
        max-width: 460px;
        justify-self: center;
        margin-top: 10px;
      }

      .sv-jump {
        display: none;
      }

      .sv-index-head,
      .sv-faq-grid {
        grid-template-columns: 100%;
      }

      .sv-index-head .lede {
        justify-self: start;
      }

      .sv-row a {
        grid-template-columns: 44px minmax(0, 1fr) 46px;
        gap: 16px;
        padding: 26px 6px;
      }

      .sv-row-word {
        display: none;
      }

      .sv-row-arrow {
        width: 44px;
        height: 44px;
        font-size: 17px;
      }

      .sv-preview {
        display: none;
      }

      /* panels stop pinning on small screens: content can be taller than the viewport */

      .sv-stack {
        padding: 10px 10px 2px;
      }

      .sv-panel {
        position: relative;
        height: auto;
        padding: 0 0 10px;
      }

      .sv-card-inner {
        grid-template-columns: 100%;
        padding: 64px 26px 56px;
        gap: 40px;
      }

      .sv-visual {
        width: min(100%, 420px);
        order: -1;
      }

      .sv-card-big {
        font-size: 60vw;
      }


    }

    @media (max-width: 700px) {

      .sv-also-grid,
      .sv-models-grid,
      .sv-steps {
        grid-template-columns: 100%;
      }

      .sv-hero-foot {
        display: none;
      }

      .sv-tile {
        min-height: 0;
      }
    }

    @media (max-width: 520px) {

      .sv-hero h1 {
        font-size: 15vw;
      }

      .sv-hero-actions .btn {
        width: 100%;
        justify-content: space-between;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .sv-hero-glow,
      .sv-marquee-track,
      .viz-ring.is-dash,
      .viz-orbit,
      .viz-orbit .counter,
      .viz-pulse,
      .viz-link,
      .sv-scroll span::after {
        animation: none !important;
      }
    }
/* =========================================================
       FAQ
    ========================================================= */

    .sv-faq {
      position: relative;
      padding: 9vw 0 10vw;
      background: #fffdf9;
      color: var(--ink);
    }

    .sv-faq-grid {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: 6vw;
      align-items: start;
    }

    .sv-faq-side {
      position: sticky;
      top: 140px;
    }

    .sv-faq-side .btn {
      margin-top: 36px;
    }

    .faq {
      border-bottom: 1px solid rgba(22,21,19,.14);
    }

    .faq-item {
      border-top: 1px solid rgba(22,21,19,.14);
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 28px 0;
      border: 0;
      background: none;
      color: inherit;
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(20px, 1.7vw, 26px);
      line-height: 1.25;
      letter-spacing: -.015em;
      font-weight: 500;
      text-align: left;
      cursor: pointer;
    }

    .faq-q:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 4px;
    }

    .faq-icon {
      position: relative;
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(22,21,19,.3);
      border-radius: 50%;
      transition: background .4s ease, border-color .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
    }

    .faq-icon::before,
    .faq-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 14px;
      height: 1.5px;
      background: currentColor;
      transform: translate(-50%, -50%);
      transition: transform .4s ease, background .4s ease;
    }

    .faq-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-item.is-open .faq-icon {
      background: var(--ink);
      border-color: var(--ink);
      transform: rotate(180deg);
    }

    .faq-item.is-open .faq-icon::before,
    .faq-item.is-open .faq-icon::after {
      background: #fff;
    }

    .faq-item.is-open .faq-icon::after {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    .faq-a {
      height: 0;
      overflow: hidden;
    }

    .faq-a p {
      max-width: 640px;
      padding: 0 60px 30px 0;
      font-size: 17px;
      line-height: 1.65;
      color: rgba(22,21,19,.65);
    }


    
    @media (max-width: 900px) {

      .sv-faq-side {
        position: static;
      }

      .faq-a p {
        padding-right: 0;
      }
    }