@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/schibsted-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/schibsted-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/schibsted-grotesk-600.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/schibsted-grotesk-700.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/schibsted-grotesk-800.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-mono-700.woff2) format('woff2')}

  :root{
    --paper:#EEF0EB; --paper-2:#F6F7F3; --ink:#1A1C1E;
    --cobalt:#2340D8; --cobalt-dk:#1A31AE; --cobalt-soft:#DDE2FB;
    --mute:#63666A; --line:#D8DAD2;
    --display:"Schibsted Grotesk", system-ui, sans-serif;
    --mono:"Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wrap:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  /* Kill the grey flash iOS paints over tapped elements; we style :active ourselves. */
  a,button,summary{-webkit-tap-highlight-color:transparent}
  /* Safari <16 needs the prefix, and images/SVGs should never overflow. */
  img,svg{max-width:100%}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.03;letter-spacing:-0.03em}
  a{color:inherit;text-decoration:none}
  .mono{font-family:var(--mono);font-size:.73rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  .accent{color:var(--cobalt)}

  .btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:1rem;padding:15px 28px;border-radius:8px;transition:transform .16s ease, background .16s ease, box-shadow .16s ease;cursor:pointer;border:1.5px solid transparent;font-family:var(--display)}
  .btn-accent{background:var(--cobalt);color:#fff;box-shadow:0 12px 26px -14px rgba(35,64,216,.85)}
  .btn-accent:hover{background:var(--cobalt-dk);transform:translateY(-2px)}
  /* 44px tap area comes from padding, so the underline stays tight to the text */
  .textlink{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;padding:12px 0;min-height:44px}
  .textlink span{border-bottom:2px solid var(--cobalt);padding-bottom:3px}
  .textlink:hover{color:var(--cobalt)}
  a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}

  /* Header. -webkit- prefix is still required for backdrop-filter in Safari.
     The blur is dropped on touch devices: compositing a blurred sticky layer
     over scrolling content is a known jank source on iOS, so those get an
     opaque bar instead. */
  header.site{position:sticky;top:0;z-index:50;background:rgba(238,240,235,.92);border-bottom:1px solid var(--line)}
  @supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){
    @media(hover:hover) and (pointer:fine){
      header.site{background:rgba(238,240,235,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
    }
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 30px;max-width:var(--wrap);margin:0 auto}
  .brand{font-family:var(--display);font-size:1.22rem;font-weight:800;letter-spacing:-.04em;display:flex;align-items:center;gap:.38em;min-height:44px}
  .menu{display:flex;align-items:center;gap:30px}
  .menu a.lnk{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:inline-flex;align-items:center;min-height:44px}
  .menu a.lnk:hover{color:var(--ink)}
  .nav-cta{padding:12px 20px;font-size:.88rem;min-height:44px}
  @media(max-width:820px){.menu a.lnk{display:none}}

  /* Scroll reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* Hero — centred */
  .hero{padding:74px 0 82px;overflow:hidden;text-align:center}
  .hero-grid{display:block}
  .hero .kicker{display:inline-flex;align-items:center;gap:.7em;margin-bottom:26px}
  .hero .kicker::before,.hero .kicker::after{content:"";width:28px;height:2px;background:var(--cobalt)}
  .hero h1{font-size:clamp(2.5rem,6vw,4.6rem);letter-spacing:-0.045em;max-width:15ch;margin:0 auto;text-wrap:balance}
  .hero .lede{font-size:1.16rem;color:var(--mute);max-width:46ch;margin:26px auto 0;text-wrap:pretty}
  .hero-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:36px;justify-content:center}
  .capstrip{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:center}
  .capstrip .mono{display:inline-flex;align-items:center;gap:9px}
  .capstrip .mono::before{content:"";width:4px;height:4px;background:var(--cobalt);flex:none}

  @keyframes draw{to{stroke-dashoffset:0}}

  /* Section base — every section head is centred, so the page reads as one system */
  section{padding:88px 0}
  .sec-head{margin:0 auto 48px;max-width:44ch;text-align:center}
  .sec-head .mono{display:block;margin-bottom:16px}
  .sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem);text-wrap:balance}
  .sec-head p{color:var(--mute);font-size:1.08rem;margin-top:14px;text-wrap:pretty}

  /* ===== INTERACTIVE STUDIO ===== */
  .studio{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .studio-grid{display:block}
  .tablist{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:34px}
  .tab{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 16px 9px 12px;min-height:44px;cursor:pointer;font-family:var(--body);transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease}
  .tab:hover{border-color:var(--cobalt);transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(35,64,216,.5)}
  .tab[aria-selected="true"]{background:var(--cobalt-soft);border-color:var(--cobalt);box-shadow:0 8px 18px -12px rgba(35,64,216,.45)}
  .tab .tgfx{width:26px;height:26px;flex:none;transition:transform .16s ease}
  .tab[aria-selected="true"] .tt{color:var(--cobalt-dk)}
  .tab .tt{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink)}
  .tab .tbar{display:none}

  /* Device frame */
  .device{background:var(--ink);border-radius:20px;padding:12px;box-shadow:0 40px 80px -44px rgba(26,28,30,.7);max-width:560px;margin:0 auto}
  .screen{background:#fff;border-radius:12px;overflow:hidden;position:relative;height:392px}
  .topbar{height:36px;background:var(--paper-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 14px}
  .topbar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
  .topbar i:first-child{background:var(--cobalt)}
  .topbar .url{margin-left:10px;font-family:var(--mono);font-size:.66rem;color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 12px}
  .stage{position:relative;height:calc(392px - 36px)}
  /* contain:content lets the browser skip layout/paint work for the seven
     inactive panels instead of costing a full pass each on every reflow. */
  .mock{position:absolute;inset:0;padding:22px;opacity:0;visibility:hidden;transition:opacity .35s ease;contain:content}
  .mock.active{opacity:1;visibility:visible;position:relative}
  .m-el{opacity:1}
  @media(prefers-reduced-motion:no-preference){
    .mock .m-el{opacity:0;transform:translateY(10px)}
    .mock.play .m-el{animation:mIn .5s forwards}
    .mock.play .m-el:nth-child(1){animation-delay:.05s}
    .mock.play .m-el:nth-child(2){animation-delay:.12s}
    .mock.play .m-el:nth-child(3){animation-delay:.19s}
    .mock.play .m-el:nth-child(4){animation-delay:.26s}
    .mock.play .m-el:nth-child(5){animation-delay:.33s}
    .mock.play .m-el:nth-child(6){animation-delay:.40s}
    .mock.play .bar{animation:grow .6s .3s both}
    .mock.play .tick-path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .45s forwards}
    .mock.play .pulse::after{animation:softpulse 1.8s .6s infinite}
  }
  @keyframes mIn{to{opacity:1;transform:none}}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  /* Pulse via a composited pseudo-element (transform+opacity) rather than an
     animated box-shadow, which repaints the element on every frame. */
  .pulse{position:relative;isolation:isolate}
  .pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 3px rgba(35,64,216,.35);opacity:0;pointer-events:none;z-index:-1}
  @keyframes softpulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

  /* Mock: website */
  .site{font-size:12px}
  .site-nav{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
  .site-brand{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink)}
  .site-mk{width:12px;height:12px;border-radius:50%;background:#B07B3E}
  .site-links{display:flex;align-items:center;gap:14px;font-size:.78rem;color:var(--mute)}
  .site-navbtn{background:var(--ink);color:#fff;padding:5px 12px;border-radius:100px;font-size:.72rem;font-weight:600}
  .site-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:center;margin-bottom:16px}
  .site-h1{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.04;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
  .site-sub{font-size:.82rem;color:var(--mute);margin-bottom:14px;max-width:26ch}
  .site-cta{display:inline-block;background:#B07B3E;color:#fff;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8rem}
  .site-himg{height:100px;border-radius:12px;background:linear-gradient(135deg,#F1E6D4,#E7D3B6);display:flex;align-items:center;justify-content:center}
  .site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .site-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
  .site-thumb{height:44px}
  .site-thumb.t1{background:linear-gradient(135deg,#D8C4A6,#C0A075)}
  .site-thumb.t2{background:linear-gradient(135deg,#EACBAF,#D9A47C)}
  .site-thumb.t3{background:linear-gradient(135deg,#CDD6C1,#A6BD94)}
  .site-ct{font-weight:600;font-size:.8rem;padding:7px 10px 0;color:var(--ink)}
  .site-cp{font-size:.72rem;color:var(--mute);padding:1px 10px 9px}

  /* Mock: booking */
  .b-title{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:16px}
  .b-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:18px}
  .b-day{aspect-ratio:1;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.68rem;color:var(--mute)}
  .b-day.sel{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
  .b-slots{display:flex;gap:10px}
  .b-slot{flex:1;height:36px;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;color:var(--mute)}
  .b-slot.sel{background:var(--cobalt-soft);border-color:var(--cobalt);color:var(--cobalt-dk)}
  .b-conf{margin-top:18px;display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--cobalt)}

  /* Mock: members */
  .mem{max-width:260px;margin:6px auto 0}
  .mem-av{width:46px;height:46px;border-radius:50%;background:var(--cobalt-soft);border:2px solid var(--cobalt);margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
  .mem-h{font-family:var(--display);font-weight:600;text-align:center;margin-bottom:16px}
  .mem-f{height:38px;border-radius:9px;border:1px solid var(--line);background:var(--paper-2);margin-bottom:10px;display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:.72rem;color:var(--mute)}
  .mem-btn{height:38px;border-radius:9px;background:var(--cobalt);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:.9rem;margin-top:4px}

  /* Mock: payments */
  .pay{max-width:280px;margin:4px auto 0}
  .pay-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
  .pay-row .l{color:var(--mute);font-size:.9rem}
  .pay-row .r{font-family:var(--display);font-weight:700;font-size:1.2rem}
  .pay-card{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--paper-2);display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .pay-chip{width:30px;height:22px;border-radius:5px;background:linear-gradient(135deg,var(--cobalt),#5A72E8)}
  .pay-no{font-family:var(--mono);font-size:.8rem;color:var(--ink);letter-spacing:.05em}
  .pay-btn{height:40px;border-radius:9px;background:var(--cobalt);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:600}
  .pay-tick{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px}

  /* Mock: pricing calculator */
  .calc{max-width:300px;margin:2px auto 0}
  .calc-h{font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:18px}
  .calc-row{margin-bottom:18px}
  .calc-lab{font-size:.9rem;color:var(--mute);margin-bottom:8px}
  .calc-lab b{color:var(--ink);font-family:var(--display)}
  .calc-range{width:100%;accent-color:var(--cobalt)}
  .calc-chips{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
  .chip{font-family:var(--body);font-size:.82rem;border:1px solid var(--line);background:#fff;color:var(--mute);border-radius:100px;padding:7px 14px;cursor:pointer;transition:background .15s ease, border-color .15s ease, color .15s ease}
  .chip.on{background:var(--cobalt-soft);border-color:var(--cobalt);color:var(--cobalt-dk);font-weight:600}
  .calc-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:16px;font-size:.95rem;color:var(--mute)}
  .calc-total span{font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--ink)}

  /* Mock: service desk */
  .desk{max-width:300px;margin:2px auto 0}
  .desk-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .desk-h .tk{font-family:var(--mono);font-size:.8rem;color:var(--mute)}
  .pill{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;background:var(--cobalt-soft);color:var(--cobalt-dk);padding:4px 10px;border-radius:100px}
  .desk-t{font-family:var(--display);font-weight:600;font-size:1.12rem;margin-bottom:4px}
  .desk-sub{font-size:.85rem;color:var(--mute);margin-bottom:16px}
  .desk-int{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink);padding:12px 0;border-top:1px solid var(--line)}
  .desk-int svg{flex:none}

  /* Mock: asset management */
  .asset{max-width:320px;margin:0 auto}
  .asset-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:12px}
  .asset-h .asset-c{font-family:var(--mono);font-size:.66rem;color:var(--mute);font-weight:400}
  .asset-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:.9rem}
  .asset-row .an{font-weight:500}
  .asset-row .tag{font-family:var(--mono);font-size:.66rem;color:var(--mute)}
  .badge{font-size:.66rem;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap}
  .badge.use{background:var(--cobalt-soft);color:var(--cobalt-dk)}
  .badge.free{background:#DCEFE5;color:#20694F}
  .badge.rep{background:#F6E6C8;color:#8A6414}

  /* Mock: marketplace */
  .market{max-width:320px;margin:0 auto}
  .mk-search{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;padding:9px 16px;font-size:.85rem;color:var(--mute);margin-bottom:16px}
  .mk-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .mk-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  .mk-img{height:54px;background:var(--cobalt-soft)}
  .mk-img.alt{background:#E4E7E0}
  .mk-t{font-size:.85rem;font-weight:600;padding:9px 11px 0}
  .mk-p{font-family:var(--display);font-weight:700;color:var(--cobalt);padding:2px 11px 11px;font-size:.95rem}

  @media(max-width:860px){.tab{padding:8px 13px}.tab .tt{font-size:.88rem}}

  /* Why me */
  .why{background:var(--ink);color:var(--paper)}
  .why .mono{color:#9AA0C8}.why .sec-head h2{color:#fff}
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
  .wy{text-align:center}
  .wy .num{display:block;width:34px;height:2px;background:var(--cobalt);margin:0 auto 20px}
  .wy h3{font-size:1.3rem;margin-bottom:10px;color:#fff;text-wrap:balance}
  .wy p{color:#B4B6C4;font-size:1.01rem;max-width:34ch;margin:0 auto;text-wrap:pretty}
  @media(max-width:760px){.why-grid{grid-template-columns:1fr;gap:34px}}

  /* Proof — single centred column */
  .proof-grid{display:grid;grid-template-columns:1fr;gap:44px;justify-items:center;max-width:760px;margin:0 auto}
  .proof-intro{text-align:center}
  .proof h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:16px;text-wrap:balance}
  .proof .p-copy{color:var(--mute);font-size:1.06rem;max-width:48ch;margin:0 auto 26px;text-wrap:pretty}
  .proof-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:32px;width:100%;text-align:center}
  /* Panel label — matches the mono section kickers used elsewhere, with a
     short rule under it to separate the heading from the quote. */
  .panel-title{font-family:var(--mono);font-size:.73rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line)}
  /* Sized for a full testimonial rather than a one-line pull quote: lighter
     weight and looser leading keep a long passage readable. */
  .proof-panel blockquote{font-family:var(--display);font-weight:500;font-size:clamp(1rem,2.4vw,1.12rem);line-height:1.5;letter-spacing:-.01em;text-wrap:pretty;max-width:56ch;margin:0 auto}
  .proof-panel .who{margin-top:20px;font-size:.95rem;color:var(--mute)}
  .proof-panel .who b{color:var(--ink);display:block;font-size:1rem}
  /* Centring a 12-line quote is hard to read on a narrow screen. */
  @media(max-width:720px){
    .proof-panel blockquote{text-align:left}
    .proof-panel .who{text-align:left}
  }

  /* Pricing */
  .pricing{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ptable{max-width:760px;margin:0 auto;border-top:1px solid var(--ink)}
  .prow{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 6px;border-bottom:1px solid var(--line)}
  .prow .pl h3{font-size:1.24rem;margin-bottom:4px}
  .prow .pl p{color:var(--mute);font-size:.96rem}
  .prow .pp{font-family:var(--display);font-weight:700;font-size:1.5rem;white-space:nowrap;text-align:right}
  /* Hover nudge only where there's a real cursor. Uses transform, not padding —
     padding forces layout on every frame; transform is composited. */
  @media(hover:hover) and (pointer:fine){
    .prow{transition:transform .18s ease}
    .prow:hover{transform:translateX(10px)}
  }
  .prow .pp .lab{font-family:var(--mono);font-size:.64rem;color:var(--mute);display:block;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;font-weight:400}
  .prow.care .pp{color:var(--cobalt)}
  .price-foot{text-align:center;margin-top:38px}
  .price-foot p{color:var(--mute);font-size:1.04rem;margin-bottom:22px}

  /* FAQ */
  .faq{max-width:820px;margin:0 auto;border-top:1px solid var(--ink)}
  details.q{border-bottom:1px solid var(--line)}
  details.q summary{cursor:pointer;list-style:none;padding:22px 4px;font-family:var(--display);font-size:1.16rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px}
  details.q summary::-webkit-details-marker{display:none}
  details.q .plus{flex:none;width:20px;height:20px;position:relative;transition:transform .25s ease}
  details.q .plus::before,details.q .plus::after{content:"";position:absolute;background:var(--cobalt);border-radius:2px}
  details.q .plus::before{top:9px;left:0;right:0;height:2px}
  details.q .plus::after{left:9px;top:0;bottom:0;width:2px}
  details.q[open] .plus{transform:rotate(135deg)}
  details.q .ans{padding:0 4px 22px;color:var(--mute);font-size:1.03rem;max-width:70ch}

  /* Final CTA */
  .final{background:var(--ink);color:var(--paper);text-align:center}
  .final .mark{margin:0 auto 26px;display:block}
  @media(prefers-reduced-motion:no-preference){.final .mark .sp{transform-box:fill-box;transform-origin:center;animation:softpulse2 2.4s infinite}}
  @keyframes softpulse2{0%,100%{opacity:.5}50%{opacity:1}}
  .final h2{color:#fff;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.04em;max-width:15ch;margin:0 auto 20px}
  .final p{color:#B4B6C4;font-size:1.16rem;max-width:46ch;margin:0 auto 34px}

  footer.site{padding:56px 0 30px;font-size:.95rem;color:var(--mute)}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:40px 36px;align-items:start}
  footer .brand{color:var(--ink);margin-bottom:10px;font-family:var(--display);font-size:1.22rem;font-weight:800}
  footer .served{max-width:38ch;line-height:1.6;font-size:.92rem}
  .foot-h{font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
  .foot-list{list-style:none}
  .foot-list a{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;color:var(--mute)}
  .foot-list a:hover{color:var(--cobalt)}
  .foot-areas{font-size:.9rem;line-height:1.65;max-width:34ch}
  .foot-areas strong{color:var(--ink);font-weight:600}
  .foot-hours{font-size:.88rem;margin-top:12px;line-height:1.7}
  .foot-contact a{color:var(--ink);font-weight:600;display:flex;align-items:center;min-height:44px;font-family:var(--body)}
  .foot-cta{color:var(--cobalt)!important}
  .foot-cta:hover{text-decoration:underline}
  .foot-bottom{margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}
  .foot-bottom .mono{font-size:.68rem}

  /* ============================================================
     MOBILE
     ============================================================ */
  @media(max-width:900px){
    .hero{padding:52px 0 56px}
    section{padding:64px 0}
  }

  @media(max-width:720px){
    .wrap{padding:0 20px}
    .nav{padding:14px 20px}

    /* full-width, thumb-friendly CTAs */
    .hero-actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:30px}
    .hero-actions .btn{width:100%;justify-content:center}
    .textlink{align-self:center;display:inline-block}

    .hero .lede{font-size:1.06rem}
    /* even 2-up grid avoids a lone orphaned item on the last row */
    .capstrip{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;justify-items:start}
    .capstrip .mono{font-size:.7rem}

    /* pricing stacks and centres */
    .prow{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 4px}
    .prow .pp{text-align:center}
    .price-foot .btn,.final .btn,.proof .btn{width:100%;justify-content:center}

    .proof-panel{padding:24px 20px}
    .why-grid{gap:30px}

    /* Footer: two columns on tablet-ish widths, centred single column on phones.
       Left-aligned lists stay scannable, so only the brand block centres. */
    .foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px;text-align:left}
    .foot-brand{grid-column:1 / -1;text-align:center}
    footer .served{max-width:46ch;margin:0 auto}
    footer .brand{justify-content:center}   /* .brand is flex, so text-align won't centre it */
    .foot-bottom{text-align:center}

    details.q summary{font-size:1.05rem;padding:20px 2px}
    details.q .ans{font-size:.98rem}
  }

  @media(max-width:460px){
    .foot-grid{grid-template-columns:1fr;text-align:center;gap:26px}
    .foot-areas{max-width:38ch;margin:0 auto}
    .foot-contact a,.foot-list a{justify-content:center}
  }

  @media(max-width:400px){
    .wrap{padding:0 16px}
    .nav{padding:12px 16px}
    .nav-cta{padding:10px 15px;font-size:.82rem}
    .brand{font-size:1.08rem}
    .capstrip{gap:9px 14px}
    .capstrip .mono{font-size:.68rem}
  }

  @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.svc-hero{padding:64px 0 56px;text-align:center}
.svc-hero .kicker{display:inline-flex;align-items:center;gap:.7em;margin-bottom:22px}
.svc-hero .kicker::before,.svc-hero .kicker::after{content:"";width:28px;height:2px;background:var(--cobalt)}
.svc-hero h1{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.04em;max-width:18ch;margin:0 auto;text-wrap:balance}
.svc-hero .lede{font-size:1.12rem;color:var(--mute);max-width:52ch;margin:22px auto 0;text-wrap:pretty}
.svc-hero .hero-actions{margin-top:32px}
.svc-price{display:inline-flex;align-items:baseline;gap:.5em;margin-top:26px;font-family:var(--display)}
.svc-price .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.svc-price .amt{font-size:1.6rem;font-weight:700}

/* breadcrumb */
.crumb{padding:16px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.crumb a{color:var(--mute);display:inline-flex;align-items:center;min-height:44px}
.crumb a:hover{color:var(--cobalt)}
.crumb span{margin:0 .5em}

/* feature list */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;max-width:1000px;margin:0 auto}
.feat h3{font-size:1.12rem;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.feat h3::before{content:"";width:18px;height:2px;background:var(--cobalt);flex:none}
.feat p{color:var(--mute);font-size:.98rem;text-wrap:pretty}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr 1fr;gap:28px 30px}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr;gap:24px}}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1000px;margin:0 auto;counter-reset:step}
.step{counter-increment:step}
.step .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--cobalt);display:block;margin-bottom:10px}
.step .n::before{content:"0" counter(step)}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{color:var(--mute);font-size:.94rem}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:480px){.steps{grid-template-columns:1fr;gap:22px}}

/* other services */
.also{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.also a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:100px;background:#fff;font-size:.92rem;font-weight:500;transition:border-color .15s ease,color .15s ease}
.also a:hover{border-color:var(--cobalt);color:var(--cobalt)}