:root{
    /* ---- Hatt Digital unified palette (matches the logo) ---- */
    --ink:#071426;        /* deep navy — darkest surface + primary text */
    --navy:#0B1D35;       /* rich navy */
    --navy-2:#10233E;     /* soft navy section */
    --navy-3:#16314F;     /* raised navy panel */
    --royal:#1267FF;      /* strong CTA blue */
    --cyan:#14B8FF;       /* logo cyan */
    --mist:#EEF3FB;       /* light tint */
    --mist-2:#F7FAFC;     /* off-white */
    --paper:#FFFFFF;      /* page background */
    --line:#DDE7F3;       /* soft blue-grey border (light) */
    --line-d:#1C3552;     /* border on navy */
    --muted:#5E6E8C;      /* muted text on light */
    --muted-d:#8A9BB8;    /* muted text on navy (~#7F91AD) */
    --term:#7FE7C4; --term-dim:#5f7fb5;
    --grad:linear-gradient(150deg,var(--cyan) 0%,var(--royal) 82%);
    --maxw:1140px; --r:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;
    font-size:16.5px;letter-spacing:-.003em;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
  ::selection{background:var(--royal);color:#fff}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;line-height:1.08;letter-spacing:-.025em;font-weight:600;
    font-optical-sizing:auto;text-wrap:balance}
  h1{font-weight:700;letter-spacing:-.032em}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .mono{font-family:'JetBrains Mono',monospace}

  /* ---- brand "speck" motif (echoes the logo's dissolving squares) ---- */
  .eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--royal)}
  .eyebrow .pix{display:inline-grid;grid-template-columns:5px 5px;grid-auto-rows:5px;grid-gap:3px;transform:rotate(0deg)}
  .eyebrow .pix i{width:5px;height:5px;display:block;border-radius:1.5px}
  .eyebrow .pix i:nth-child(1){background:var(--cyan)}
  .eyebrow .pix i:nth-child(2){background:var(--royal);opacity:.55}
  .eyebrow .pix i:nth-child(3){background:var(--cyan);opacity:.35}
  .eyebrow .pix i:nth-child(4){background:var(--royal)}
  .eyebrow.on-dark{color:var(--cyan)}
  .eyebrow.on-dark .pix i:nth-child(2){background:#4a86ff;opacity:.7}
  .eyebrow.on-dark .pix i:nth-child(3){background:var(--cyan);opacity:.45}
  .eyebrow.on-dark .pix i:nth-child(4){background:#3f6fb8}

  .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:16px;padding:14px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,background .2s,color .2s;white-space:nowrap}
  .btn-primary{background:var(--ink);color:#fff;box-shadow:0 6px 22px -8px rgba(10,22,51,.55)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(10,22,51,.6)}
  .btn .arr{transition:transform .2s ease}
  .btn:hover .arr{transform:translateX(4px)}
  /* Solid-fill buttons drop the transparent sizing border: painting a
     gradient/solid fill under a transparent 1.5px border leaves a faint
     antialiased "double-border" seam. The removed 1.5px is added back as
     padding so their box stays identical to the bordered ghost/call buttons. */
  .btn-grad,.btn-primary{border-width:0;padding:15.5px 25.5px}
  .btn-grad{background:var(--grad);color:#fff;box-shadow:0 8px 26px -8px rgba(10,91,230,.6)}
  .btn-grad:hover{transform:translateY(-2px);box-shadow:0 16px 38px -10px rgba(10,91,230,.65)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
  .btn-ghost.on-dark{color:#fff;border-color:var(--line-d)}
  .btn-ghost.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}

  /* NAV */
  header{position:sticky;top:0;z-index:60;background:rgba(252,253,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
  header.scrolled{border-color:var(--line)}
  nav{display:flex;align-items:center;justify-content:space-between;height:76px}
  .brand{display:flex;align-items:center;gap:11px}
  .brand img{height:38px;width:auto;display:block}
  .brand .name{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em}
  .brand .name span{font-weight:500;color:var(--muted)}
  .nav-links{display:flex;align-items:center;gap:28px}
  .nav-links a{font-size:15px;font-weight:500;color:var(--ink);opacity:.8;transition:opacity .2s;position:relative;padding:4px 0}
  .nav-links a:hover{opacity:1}
  .nav-links a.active{opacity:1;color:var(--royal)}
  .nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--grad);border-radius:2px}
  .nav-cta{display:flex;align-items:center;gap:14px}
  .menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:.25s}

  /* INTERIOR PAGE HEADER */
  .phead{background:var(--ink);color:#fff;position:relative;overflow:hidden}
  .phead .glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(24,182,242,.16),transparent 65%);top:-220px;left:-120px;pointer-events:none}
  /* Copy-only page hero (the side facts card was removed): a single, capped
     column so the headline never stretches full width or sits in a half-empty grid. */
  .phead-grid{padding:clamp(52px,6.4vw,80px) 0;position:relative}
  .phead-grid>div{max-width:720px}
  .phead h1{font-size:clamp(38px,5.6vw,62px);font-weight:800;letter-spacing:-.035em;margin-top:18px}
  .phead h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .phead p{color:var(--muted-d);font-size:18px;margin-top:18px;max-width:42ch}
  .phead .phead-note{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--muted-d);max-width:none}
  .phead .phead-note svg{flex:none;width:16px;height:16px;color:var(--cyan)}

  /* generic band */
  /* One smooth section rhythm for every width instead of stepped 56/96/104
     jumps: ~56px on phones, easing up to ~100px on wide desktop. */
  .band{padding:clamp(56px,7vw,100px) 0}
  .band-tint{background:var(--mist-2);position:relative}
  .band-tint:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
  .band-head{max-width:680px}
  .band-head h2{font-size:clamp(30px,4.4vw,46px);font-weight:700;margin-top:16px;letter-spacing:-.03em}
  .band-head p{color:var(--muted);font-size:18px;margin-top:16px}

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

  /* services list */
  .svc-list{border-top:1px solid var(--line)}
  .svc{position:relative;display:grid;grid-template-columns:60px 1fr auto;gap:26px;align-items:flex-start;padding:34px 8px 34px 18px;border-bottom:1px solid var(--line);transition:padding-left .3s cubic-bezier(.2,.7,.2,1),background .3s}
  .svc:before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:3px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .svc:hover{padding-left:30px;background:linear-gradient(90deg,var(--mist-2) 0%,transparent 70%)}
  .svc:hover:before{transform:scaleY(1)}
  .svc .num{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:2px;line-height:1}
  .svc-main h3{font-size:24px;font-weight:700;letter-spacing:-.02em;transition:color .25s}
  .svc:hover .svc-main h3{color:var(--royal)}
  .svc-main p{color:var(--muted);font-size:15.5px;margin-top:8px;max-width:62ch}
  .svc-main ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:9px}
  .svc-main ul li{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;background:var(--mist);border:1px solid var(--line);padding:6px 12px;border-radius:999px;transition:border-color .25s,color .25s,background .25s}
  .svc:hover .svc-main ul li{border-color:#d4def0}
  .svc-main ul li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);display:inline-block}
  .svc .svc-tag{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);white-space:nowrap;font-weight:700;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;align-self:flex-start;box-shadow:0 6px 16px -12px rgba(10,22,51,.4)}

  /* process */
  .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:54px}
  .pstep{padding-top:26px}
  .pstep .pn{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--cyan);letter-spacing:.05em}
  .pstep .pline{height:2px;background:var(--line-d);margin:14px 0 20px;position:relative;overflow:hidden}
  .pstep .pline:after{content:"";position:absolute;inset:0;width:30%;background:var(--grad)}
  .band-dark .pstep h3{color:#fff}
  .pstep h3{font-size:20px;font-weight:700}
  .band-dark .pstep p{color:var(--muted-d)}
  .pstep p{color:var(--muted);font-size:15px;margin-top:9px}

  /* pricing */
  .price-note{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);background:var(--mist);border:1px solid var(--line);padding:9px 16px;border-radius:999px}
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px;align-items:stretch}
  .ptier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;display:flex;flex-direction:column;position:relative;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
  .ptier:hover{transform:translateY(-6px);box-shadow:0 30px 58px -28px rgba(10,22,51,.36);border-color:#cdd9ef}
  .ptier.feature{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 34px 70px -32px rgba(10,91,230,.5)}
  .ptier.feature:hover{transform:translateY(-9px);box-shadow:0 42px 84px -34px rgba(10,91,230,.55)}
  .ptier.feature:after{content:"";position:absolute;inset:0;border-radius:var(--r);background:radial-gradient(420px 200px at 50% -10%,rgba(24,182,242,.1),transparent 60%);pointer-events:none}
  .ptier>*{position:relative}
  .tier-name{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--royal);font-weight:700}
  .tier-sub{color:var(--muted);font-size:15px;min-height:44px}
  .ptier ul{list-style:none;margin:20px 0 26px;display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--line);padding-top:22px}
  .ptier li{display:flex;gap:11px;font-size:15px;align-items:flex-start}
  .ptier li svg{flex:none;margin-top:3px;color:var(--royal)}
  .ptier .btn{width:100%;justify-content:center;margin-top:auto}
  /* local */
  .local{display:grid;grid-template-columns:1fr 1.05fr;grid-template-areas:"map intro" "map actions";column-gap:52px;row-gap:0;align-items:center}
  .local .map-card{grid-area:map}
  .local-intro{grid-area:intro}
  .local-actions{grid-area:actions}
  /* ---- real service-area map (Google Maps) ---- */
  .map-card{position:relative;overflow:hidden;border-radius:20px;padding:0;margin:0;aspect-ratio:1/.74;
    background:#e8edf4;border:1px solid var(--line);
    box-shadow:0 26px 54px -30px rgba(7,16,40,.5),0 2px 8px -5px rgba(7,16,40,.3)}
  /* Google Maps Embed iframe: fill the card, keep the rounded corners */
  .ns-map{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#e8edf4;
    transition:opacity .25s ease}
  .ns-map.is-loading{opacity:.55}
  .local h2{font-size:clamp(28px,3.8vw,40px);letter-spacing:-.03em}
  .local p{color:var(--muted);font-size:17px;margin-top:18px}
  /* ---- service-area buttons ---- */
  .local-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
  .area-btn{display:inline-flex;align-items:center;gap:8px;line-height:1;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.01em;color:#4a5a74;
    background:var(--mist);border:1px solid var(--line);padding:8px 15px 8px 12px;border-radius:999px;
    transition:color .2s,background .2s,border-color .2s,box-shadow .25s,transform .12s}
  .area-btn::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;transition:opacity .2s,box-shadow .2s,background .2s}
  .area-btn:hover{color:var(--ink);border-color:#c4d4ea;background:#e7eefb}
  .area-btn:active{transform:scale(.97)}
  .area-btn[aria-pressed="true"]{color:#fff;background:linear-gradient(150deg,var(--royal),#0b4fd0);border-color:transparent;box-shadow:0 9px 20px -9px rgba(18,103,255,.8)}
  .area-btn[aria-pressed="true"]::before{background:#fff;opacity:1;box-shadow:0 0 0 3px rgba(255,255,255,.28)}

  /* founder */
  .founder{position:relative;max-width:720px;margin-inline:auto;background:linear-gradient(160deg,var(--mist-2),#fff);border:1px solid var(--line);border-radius:28px;padding:clamp(32px,4.4vw,52px);display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;overflow:hidden}
  .founder:before{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(24,182,242,.1),transparent 65%);pointer-events:none}
  .founder .mark{position:relative;width:96px;height:96px;border-radius:22px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;padding:15px;box-shadow:0 18px 40px -22px rgba(10,22,51,.4)}
  .founder .mark img{width:100%;height:auto}
  .founder .qmark{position:relative;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:56px;line-height:.6;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;height:30px}
  .founder blockquote{position:relative;font-family:'Inter Tight',sans-serif;font-weight:500;font-size:clamp(21px,2.5vw,27px);line-height:1.33;letter-spacing:-.01em;margin-top:6px}
  .founder .sig{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:3px;font-family:'Inter Tight',sans-serif;font-size:16px;color:var(--muted)}
  .founder .sig:before{content:"";flex:none;width:26px;height:2px;border-radius:2px;background:var(--grad)}
  .founder .sig b{color:var(--ink);font-weight:700;white-space:nowrap}
  .founder .sig .role{white-space:nowrap}

  /* why different (about) */
  /* Two even columns on desktop + tablet (4 cards read as a tidy 2×2), dropping
     to a single column only on phones (see ≤560 below). */
  .diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(32px,4vw,50px)}
  @media(max-width:560px){.diff-grid{grid-template-columns:1fr}}
  .diff{position:relative;display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
  .diff:hover{transform:translateY(-4px);box-shadow:0 24px 46px -28px rgba(10,22,51,.3);border-color:#cdd9ef}
  .diff .dchk{flex:none;width:42px;height:42px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 12px 24px -12px rgba(18,103,255,.6);transition:transform .35s}
  .diff:hover .dchk{transform:scale(1.06) rotate(-3deg)}
  .diff h3{font-size:17.5px;font-weight:700;letter-spacing:-.01em}
  .diff p{color:var(--muted);font-size:14.5px;margin-top:5px}
  /* brand spec motif accent (shared language with homepage tiles) */
  .diff .specks{position:absolute;top:16px;right:16px;display:grid;grid-template-columns:repeat(3,5px);gap:4px;opacity:.35;transition:opacity .35s}
  .diff:hover .specks{opacity:.8}

  /* faq */
  .faq-list{max-width:840px;margin:0 auto;border-top:1px solid var(--line)}
  .faq-item{position:relative;border-bottom:1px solid var(--line);transition:background .3s}
  .faq-item:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .faq-item.open:before{transform:scaleY(1)}
  .faq-item.open{background:linear-gradient(90deg,var(--mist-2),transparent 80%)}
  .faq-q{width:100%;background:none;border:0;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 16px;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:19px;color:var(--ink);transition:padding-left .3s,color .25s}
  .faq-q:hover{padding-left:24px;color:var(--royal)}
  .faq-item.open .faq-q{padding-left:24px;color:var(--royal)}
  .faq-q .pm{flex:none;width:30px;height:30px;border-radius:9px;background:var(--mist);border:1px solid var(--line);position:relative;transition:background .3s,border-color .3s}
  .faq-item.open .faq-q .pm,.faq-q:hover .pm{border-color:#cdd9ef}
  .faq-item.open .faq-q .pm{background:var(--grad);border-color:transparent}
  .faq-q .pm:before,.faq-q .pm:after{content:"";position:absolute;background:var(--royal);border-radius:2px;left:50%;top:50%;transition:background .3s,transform .3s}
  .faq-q .pm:before{width:13px;height:2px;transform:translate(-50%,-50%)}
  .faq-q .pm:after{width:2px;height:13px;transform:translate(-50%,-50%);transition:transform .3s}
  .faq-item.open .faq-q .pm:before,.faq-item.open .faq-q .pm:after{background:#fff}
  .faq-item.open .faq-q .pm:after{transform:translate(-50%,-50%) scaleY(0)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.2,1)}
  .faq-a .inner{padding:0 16px 28px;color:var(--muted);font-size:16px;max-width:74ch;line-height:1.65}

  /* small inline CTA (faq) */
  .mini-cta{max-width:840px;margin:48px auto 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(150deg,var(--mist-2),#fff);border:1px solid var(--line);border-radius:var(--r);padding:26px 30px}
  .mini-cta .mc-l{max-width:46ch}
  .mini-cta h2,.mini-cta h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
  .mini-cta p{color:var(--muted);font-size:15px;margin-top:6px}

  /* shared form styling (quote page adds its own scoped light-theme rules) */
  form{display:flex;flex-direction:column;gap:14px}
  form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  form label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);margin-bottom:6px;display:block}
  /* font-size:16px keeps iOS Safari from auto-zooming the page on field focus */
  form input:not([type=checkbox]):not([type=radio]),form textarea,form select{width:100%;background:var(--navy-2);border:1px solid var(--line-d);border-radius:12px;padding:13px 15px;color:#fff;font-family:'Inter',sans-serif;font-size:16px;transition:border-color .2s,box-shadow .2s}
  form input::placeholder,form textarea::placeholder{color:#5e6f9e}
  form input:not([type=checkbox]):not([type=radio]):focus,form textarea:focus,form select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(24,182,242,.18)}
  form textarea{resize:vertical;min-height:110px}
  form .btn{justify-content:center;margin-top:6px}

  /* CTA band */
  .cta-band{background:linear-gradient(155deg,var(--navy) 0%,var(--ink) 72%);border:1px solid var(--line-d);border-radius:28px;padding:clamp(44px,5.5vw,72px);text-align:center;position:relative;overflow:hidden;box-shadow:0 50px 100px -50px rgba(7,16,40,.7)}
  .cta-band:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,170,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.022) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 75%);pointer-events:none}
  .cta-band .glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(24,182,242,.26),transparent 64%);top:-260px;left:50%;transform:translateX(-50%);pointer-events:none}
  .cta-band .glow.g2{width:420px;height:420px;background:radial-gradient(circle,rgba(10,91,230,.3),transparent 66%);top:auto;bottom:-240px;left:30%}
  .cta-band h2{color:#fff;font-size:clamp(30px,4.4vw,48px);letter-spacing:-.03em;position:relative}
  .cta-band p{color:var(--muted-d);font-size:18px;margin:16px auto 32px;max-width:46ch;position:relative}
  .cta-band .btn{position:relative}

  /* footer */
  footer{position:relative;background:var(--ink);color:#fff;padding:72px 0 44px;margin-top:0;overflow:hidden}
  footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(24,182,242,.5),transparent)}
  .foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
  .foot-brand{max-width:320px}
  .foot-brand .fb-logo{display:inline-flex;align-items:center;gap:11px;background:#fff;border-radius:14px;padding:10px 18px 10px 14px;margin-bottom:18px;transition:transform .25s,box-shadow .25s}
  .foot-brand .fb-logo:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(24,182,242,.5)}
  .foot-brand .fb-logo img{height:32px;width:auto}
  .foot-brand .fb-logo .name{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:18px;color:var(--ink)}
  .foot-brand .fb-logo .name span{font-weight:500;color:var(--muted)}
  .foot-brand p{color:var(--muted-d);font-size:14.5px;line-height:1.6}
  .foot-cols{display:flex;gap:72px;flex-wrap:wrap}
  .foot-col h3{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);font-weight:700;margin-bottom:18px}
  .foot-col a{display:block;width:fit-content;color:#fff;opacity:.74;font-size:15px;margin-bottom:13px;transition:opacity .2s,color .2s,transform .2s}
  .foot-col a:hover{opacity:1;color:var(--cyan);transform:translateX(3px)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:52px;padding-top:28px;border-top:1px solid var(--line-d);font-size:13.5px;color:var(--muted-d)}

  .band-dark{background:var(--ink);color:#fff}
  .band-dark .band-head h2{color:#fff}
  .band-dark .band-head p{color:var(--muted-d)}

  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:38px}
    .build{max-width:480px}
    .value-grid{grid-template-columns:1fr}
    .proc-grid{grid-template-columns:1fr 1fr;gap:30px}
    /* stacked pricing reads as one centred column, not stretched full-width cards */
    .price-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
    .contact-grid{grid-template-columns:1fr;gap:32px}
    .founder{grid-template-columns:1fr;gap:24px;padding:36px 34px}
    .svc{grid-template-columns:auto 1fr;gap:16px}
    .svc .svc-tag{grid-column:2;padding-top:0}
  }

  /* ---- Nav collapses to a hamburger across the whole tablet range ----
     One clear breakpoint at 1023px: phones AND tablets (portrait iPads, etc.)
     get the hamburger, so 820px and 912px behave the same instead of one
     showing a cramped desktop bar and the other a mobile menu. The horizontal
     nav returns at 1024px, where there is comfortably room for it. Desktop
     (≥1024px) is unchanged. */
  @media(max-width:1023px){
    .nav-links{position:fixed;inset:76px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px;transform:translateY(-130%);transition:transform .35s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 40px -28px rgba(10,22,51,.4)}
    .nav-links.open{transform:none}
    .nav-links a{padding:14px 0;width:100%;border-bottom:1px solid var(--line);font-size:17px}
    .nav-links a.active:after{display:none}
    .menu-btn{display:block}
    .nav-cta .btn:not(.menu-btn){display:none}
  }
  /* Local / service-area: on tablet + mobile (single column up to 1024px) the
     map stacks directly above the city buttons, so the buttons read as part of
     the map instead of stranded far below it. Order: intro → map → buttons →
     Let's talk (matches DOM order). */
  @media(max-width:1024px){
    .local{grid-template-columns:1fr;grid-template-areas:none;column-gap:0;row-gap:26px;align-items:stretch}
    .local .map-card,.local-intro,.local-actions{grid-area:auto}
    .local .map-card{aspect-ratio:auto;height:clamp(220px,44vw,360px)}
    .local-actions .local-pills{margin-top:0}
  }
  @media(max-width:520px){.proc-grid{grid-template-columns:1fr}form .row{grid-template-columns:1fr}.care{flex-direction:column;align-items:flex-start}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1!important;transform:none!important}.cursor{display:none!important}}

  /* ===================================================== */
  /* ======  CINEMATIC SCROLL-BUILT HERO (homepage)  ===== */
  /* ===================================================== */

  /* Homepage nav: the same solid white bar sits over the dark hero from the
     start and stays for the rest of the page. (.is-visible is kept as a no-op
     so the scroll-driven JS toggle remains harmless.) */
  html.js body.home header{
    position:fixed;top:0;left:0;width:100%;
    background:#ffffff;backdrop-filter:none;
    border-bottom:1px solid rgba(10,20,45,.08);
    box-shadow:0 12px 30px rgba(10,20,45,.08);
    opacity:1;transform:none;pointer-events:auto;
    transition:opacity .3s ease,transform .3s ease;
    z-index:1000}
  html.js body.home header.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}

  /* Calm, premium atmospheric navy — smooth gradient, no hard grid */
  /* Luminous, logo-aligned hero: lighter navy base lifted by cyan + brand-blue light */
  .intro{position:relative;margin-top:0;
    background:
      radial-gradient(72% 52% at 50% -6%,rgba(36,196,255,.28),transparent 62%),
      radial-gradient(58% 58% at 84% 6%,rgba(24,120,255,.22),transparent 60%),
      radial-gradient(52% 56% at 12% 16%,rgba(36,196,255,.16),transparent 62%),
      linear-gradient(180deg,#0f2c50 0%,#0c2444 48%,#0a1d36 100%)}
  /* min-height uses dvh so the hero fills the *visible* viewport on iOS/Android
     (the URL bar shrinks 100vh, which pushed the grid-centred hero too low and
     hid the buttons behind the address bar). 100vh is the fallback for older
     engines. Padding eases in on short viewports so it never feels cramped. */
  .intro-stage{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(72px,10vh,112px) 0 clamp(56px,8vh,88px)}

  .intro-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
  /* grid kept only as the faintest texture, masked to fade out fast */
  .intro-grid{position:absolute;inset:0;opacity:.45;
    background-image:linear-gradient(rgba(150,200,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(150,200,255,.025) 1px,transparent 1px);
    background-size:66px 66px;
    -webkit-mask-image:radial-gradient(110% 80% at 50% 28%,#000 8%,transparent 62%);
    mask-image:radial-gradient(110% 80% at 50% 28%,#000 8%,transparent 62%)}
  .intro-glow{position:absolute;border-radius:50%;filter:blur(82px);opacity:.6}
  .ig1{width:60vw;height:60vw;max-width:760px;max-height:760px;left:-12vw;top:-22vh;
    background:radial-gradient(circle,rgba(36,196,255,.34),transparent 66%)}
  .ig2{width:62vw;height:62vw;max-width:820px;max-height:820px;right:-14vw;bottom:-26vh;
    background:radial-gradient(circle,rgba(24,120,255,.32),transparent 67%)}
  /* animated brand spec field — drifting logo "pixels" (canvas, JS-driven) */
  .intro-specs{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  @media(prefers-reduced-motion:reduce){.intro-specs{opacity:.7}}
  /* brand specks — the logo's dissolving squares, scattered subtly behind the hero */
  .intro-bg:before,.intro-bg:after{content:"";position:absolute;width:13px;height:13px;border-radius:3px;
    background:var(--cyan);opacity:.85;filter:drop-shadow(0 0 9px rgba(36,196,255,.45))}
  .intro-bg:before{top:20%;left:8%;
    box-shadow:26px 16px 0 -1px rgba(24,120,255,.85),-22px -8px 0 -2px rgba(36,196,255,.55),
      -44px -26px 0 -4px rgba(36,196,255,.32),46px -16px 0 -2px rgba(24,120,255,.45),10px 44px 0 -4px rgba(36,196,255,.28)}
  .intro-bg:after{top:24%;right:9%;background:var(--royal);opacity:.7;
    box-shadow:-26px 18px 0 -1px rgba(36,196,255,.7),22px -10px 0 -2px rgba(24,120,255,.5),
      44px -28px 0 -4px rgba(36,196,255,.3),-46px -14px 0 -3px rgba(24,120,255,.4)}
  @media(max-width:760px){.intro-bg:before,.intro-bg:after{opacity:.5;width:10px;height:10px}}

  /* Two-column hero: sales copy on the left, business-value preview on the right.
     Falls back to a single centred column on tablet/phone (see ≤900px below). */
  .intro-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
    padding:0 24px;display:grid;grid-template-columns:1.04fr .96fr;
    gap:clamp(30px,4.6vw,60px);align-items:center}
  .sh{position:relative;text-align:left}
  .intro .eyebrow.on-dark{justify-content:flex-start;margin-bottom:22px}
  /* Fluid headline, sized for the narrower text column of the two-up layout. */
  .sh-title{font-family:'Inter Tight',sans-serif;font-weight:700;color:#fff;
    font-size:clamp(34px,4.4vw,56px);line-height:1.06;letter-spacing:-.03em}
  .sh-word{display:inline-block;opacity:0;transform:translateY(24px);
    transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1)}
  .sh-word.built{opacity:1;transform:none}
  .sh-word.hl{background:linear-gradient(120deg,#3fd0ff 0%,#1f7bff 92%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .sh-sub{color:#c5d4ec;font-size:clamp(16px,1.55vw,18.5px);max-width:54ch;margin:22px 0 0;line-height:1.6}
  .sh-cta{display:flex;gap:14px;justify-content:flex-start;margin-top:34px;flex-wrap:wrap}
  .intro [data-build]{opacity:0;transform:translateY(18px);
    transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1)}
  .intro [data-build].built{opacity:1;transform:none}

  /* ---- business-value preview card (replaces the old code compiler) ---- */
  .hero-preview{position:relative;justify-self:end;width:100%;max-width:460px;
    background:rgba(9,20,40,.6);backdrop-filter:blur(10px);
    border:1px solid var(--line-d);border-radius:20px;padding:clamp(20px,2.2vw,26px);
    box-shadow:0 44px 100px -46px rgba(0,0,0,.72),0 0 60px -30px rgba(24,182,242,.28),0 0 0 1px rgba(24,182,242,.04)}
  .hp-head{margin-bottom:16px}
  .hp-kicker{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;
    font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
  .hp-kicker .pix{display:inline-grid;grid-template-columns:5px 5px;grid-auto-rows:5px;grid-gap:3px}
  .hp-kicker .pix i{width:5px;height:5px;display:block;border-radius:1.5px}
  .hp-kicker .pix i:nth-child(1){background:var(--cyan)}
  .hp-kicker .pix i:nth-child(2){background:#4a86ff;opacity:.7}
  .hp-kicker .pix i:nth-child(3){background:var(--cyan);opacity:.45}
  .hp-kicker .pix i:nth-child(4){background:#3f6fb8}
  .hp-title{display:block;margin-top:12px;font-family:'Inter Tight',sans-serif;font-weight:700;
    font-size:clamp(18px,1.8vw,21px);color:#fff;letter-spacing:-.02em;line-height:1.25}
  .hp-cards{display:grid;gap:12px}
  .hp-card{position:relative;border-radius:14px;padding:16px 18px;
    background:rgba(255,255,255,.03);border:1px solid var(--line-d)}
  .hp-card.hp-new{background:linear-gradient(158deg,rgba(24,182,242,.1),rgba(18,103,255,.05));
    border-color:rgba(36,196,255,.34)}
  .hp-badge{display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;
    font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .hp-badge-old{color:var(--muted-d)}
  .hp-badge-new{color:var(--cyan)}
  .hp-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
  .hp-list li{display:flex;align-items:center;gap:11px;font-size:14.5px;line-height:1.35;color:#c9d6ee}
  .hp-old .hp-list li{color:#93a4c2}
  .hp-ic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
  .hp-ic svg{width:12px;height:12px}
  .hp-ic-x{background:rgba(255,255,255,.06);color:#7c90b3}
  .hp-ic-ok{background:var(--grad);color:#fff}
  .hp-arrow{justify-self:center;width:30px;height:30px;border-radius:50%;margin:-3px 0;
    background:rgba(24,182,242,.12);border:1px solid rgba(36,196,255,.3);
    display:grid;place-items:center;color:var(--cyan)}
  .hp-arrow svg{width:15px;height:15px}
  .hp-mock{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;padding-top:14px;
    border-top:1px solid rgba(36,196,255,.16)}
  .hp-pill{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;
    font-size:11px;font-weight:700;letter-spacing:.02em;padding:7px 13px;border-radius:999px}
  .hp-pill svg{width:13px;height:13px}
  .hp-pill-call{background:var(--grad);color:#fff;box-shadow:0 8px 20px -10px rgba(18,103,255,.7)}
  .hp-pill-quote{background:rgba(255,255,255,.05);color:#c5d4ec;border:1px solid var(--line-d)}

  /* Finished state for reduced-motion AND no-JS: show the hero, drop the timeline */
  @media(prefers-reduced-motion:reduce){
    .intro{height:auto}
    .intro-stage{height:auto;min-height:100vh;min-height:100dvh}
    .sh-word,.intro [data-build]{opacity:1!important;transform:none!important}
  }
  html:not(.js) .intro{height:auto}
  html:not(.js) .intro-stage{height:auto;min-height:100vh;min-height:100dvh}
  /* The hero is shown for no-JS via a <noscript> block in the page <head>, not
     an html:not(.js) opacity rule — a class-absence reveal like that can win
     the FIRST paint on WebKit before the html.js class lands, flashing the
     finished hero. The <noscript> approach can never match when JS is enabled,
     so there is nothing to flash. no-JS still gets the transform reset here: */
  html:not(.js) .sh-word,html:not(.js) .intro [data-build]{transform:none}
  /* Reveal safety nets (both animate in via the .sh-word/[data-build] transition
     above — a clean fade + slide, never a snap):
      • html.hero-ready    — a 6s inline <head> timer, for when the hero script
        never runs at all (failed to load, or threw before revealing).
      • html.hero-fallback — added by the hero JS the instant the particle layer
        fails on any engine (a WebKit canvas quirk, a thrown frame, etc.), so the
        hero reveals immediately instead of waiting on the 6s net or staying blank.
     In the normal case the reveal (.built) has already run well before either. */
  html.hero-ready .sh-word,html.hero-ready .intro [data-build],
  html.hero-fallback .sh-word,html.hero-fallback .intro [data-build]{opacity:1;transform:none}

  /* ---- stack to a single centred column on tablet + phone ---- */
  @media(max-width:900px){
    .intro-inner{grid-template-columns:1fr;gap:clamp(30px,6vw,42px);max-width:600px}
    .sh{text-align:center}
    .intro .eyebrow.on-dark{justify-content:center}
    .sh-title{font-size:clamp(32px,5.6vw,46px)}
    .sh-sub{margin-left:auto;margin-right:auto}
    .sh-cta{justify-content:center}
    .sh-receipts{justify-content:center}
    .hero-preview{justify-self:center;max-width:460px;margin:0 auto}
  }
  @media(max-width:600px){
    /* On phones the stacked hero is taller than the viewport, so a centred
       flex column overflows upward and the eyebrow ends up cramped just a few
       px under the fixed header. Anchor the column to the top and give the
       eyebrow real breathing room below the header — the tight 22px eyebrow→
       headline gap above is untouched. */
    .intro-stage{justify-content:flex-start;padding-top:clamp(110px,14vh,128px)}
    .sh-title{font-size:clamp(30px,8vw,40px)}
    .sh-sub{font-size:16px}
    .sh-cta .btn{flex:1 1 auto;justify-content:center}
  }

  /* ===================================================== */
  /* ======  PREMIUM UPGRADES — SIGNATURE & POLISH  ====== */
  /* ===================================================== */

  /* --- shared section eyebrow accent for dark bands --- */
  .band-dark .band-head .eyebrow.on-dark{margin-bottom:4px}

  /* ===================================================== */
  /* RESPONSIVE QA — premium polish across breakpoints      */
  /* ===================================================== */
  @media(max-width:900px){
    .mini-cta{flex-direction:column;align-items:flex-start;gap:18px}
  }
  @media(max-width:600px){
    .svc{grid-template-columns:auto 1fr;gap:14px;padding:26px 8px 26px 16px}
    .svc .num{font-size:20px}
    .svc .svc-tag{grid-column:2;justify-self:start;margin-top:2px}
    .svc-main p{max-width:none}
    .price-grid{margin-top:40px}
    /* founder quote: tighter, premium card on phones */
    .founder-band{padding:56px 0 64px}
    .founder-band .wrap{padding:0 16px}
    .founder{gap:20px;padding:28px 24px;border-radius:28px}
    .founder .mark{width:78px;height:78px;padding:13px;border-radius:18px}
    .founder .qmark{font-size:44px;height:22px}
    .founder blockquote{font-size:23px;line-height:1.3;margin-top:2px}
    .founder .sig{margin-top:18px;font-size:15px;column-gap:10px}
    .founder .sig:before{width:22px}
    .mini-cta{padding:24px}
    .mini-cta .btn{width:100%;justify-content:center}
    .foot-cols{gap:40px}
    .foot-bottom{flex-direction:column;align-items:flex-start;gap:10px}
    .map-card{height:clamp(210px,54vw,286px)}
  }

  /* reduced motion: calm the ambient accents */
  @media(prefers-reduced-motion:reduce){
    footer:before{animation:none}
  }

  /* ===================================================== */
  /* ============  PREMIUM PASS v2 — 2026  =============== */
  /* Stagger, cursor spotlight, section polish.            */
  /* Projects "in-progress" shells, section polish.        */
  /* ===================================================== */

  /* global stagger: any .rv can carry a --d entrance delay */
  .rv{transition-delay:var(--d,0s)}

  /* ---- cursor spotlight (cards opt in via .spot) ---- */
  .spot{position:relative}
  .spot:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
    opacity:0;transition:opacity .35s;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(24,182,242,.09),transparent 60%)}
  .spot:hover:after{opacity:1}

  /* brand speck squares (about-page .diff cards position these via .diff .specks) */
  .specks i{width:5px;height:5px;border-radius:1.5px;background:var(--cyan)}
  .specks i:nth-child(2){background:var(--royal);opacity:.6}
  .specks i:nth-child(3){opacity:.35}
  .specks i:nth-child(5){background:var(--royal);opacity:.5}
  .specks i:nth-child(6){opacity:.3}
  .specks i:nth-child(7){opacity:.25}
  .specks i:nth-child(8){background:var(--royal);opacity:.4}

  /* ===================================================== */
  /* PROJECTS — premium "in progress" build shells          */
  /* ===================================================== */
  .band-proj{position:relative;background:linear-gradient(180deg,#0b1838 0%,var(--ink) 100%);color:#fff;overflow:hidden}
  .proj-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
  .proj-bg .proj-grid{position:absolute;inset:0;
    background-image:linear-gradient(rgba(120,170,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.02) 1px,transparent 1px);
    background-size:48px 48px;-webkit-mask-image:radial-gradient(120% 110% at 50% 0%,#000 35%,transparent 82%);
    mask-image:radial-gradient(120% 110% at 50% 0%,#000 35%,transparent 82%)}
  .proj-glow{position:absolute;border-radius:50%;filter:blur(85px);opacity:.5}
  .proj-glow.pg1{width:44vw;height:44vw;max-width:520px;max-height:520px;right:-8vw;top:-14vh;
    background:radial-gradient(circle,rgba(24,182,242,.3),transparent 66%)}
  .proj-glow.pg2{width:46vw;height:46vw;max-width:560px;max-height:560px;left:-10vw;bottom:-20vh;
    background:radial-gradient(circle,rgba(10,91,230,.32),transparent 66%)}
  .band-proj .wrap{position:relative;z-index:1}
  .band-proj .band-head h2{color:#fff}
  .band-proj .band-head p{color:var(--muted-d);font-size:18px;margin-top:16px;max-width:60ch}

  /* ===================================================== */
  /* "What you get / How it works" — replaces pricing       */
  /* ===================================================== */
  .get-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:50px}
  .get{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 26px;overflow:hidden;
    transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
  .get:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .get:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(10,22,51,.32);border-color:#cdd9ef}
  .get:hover:before{transform:scaleY(1)}
  .get .gk{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--royal)}
  .get h3{font-size:20px;font-weight:700;margin-top:10px;letter-spacing:-.01em}
  .get p{color:var(--muted);font-size:15px;margin-top:8px}
  @media(max-width:680px){.get-grid{grid-template-columns:1fr}}

  /* work-together steps reuse .proc-grid; add connector dots on light */
  .band .proc-grid .pstep .pline:after{animation:plineGrow 2.4s ease-in-out infinite alternate}
  @keyframes plineGrow{0%{transform:translateX(0)}100%{transform:translateX(240%)}}

  /* ===================================================== */
  /* services list — "designed system" upgrade              */
  /* ===================================================== */
  .svc-list.system .svc{border-left:1px solid var(--line);border-right:1px solid var(--line);padding-left:24px}
  .svc-list.system .svc:first-child{border-top:1px solid var(--line)}
  .svc-list.system .svc:hover{padding-left:34px}
  .svc .svc-tag.neutral{color:var(--royal);background:var(--mist-2);border-color:#d4def0}

  /* ===================================================== */
  /* CTA band — animated conic sheen + stronger entrance    */
  /* ===================================================== */
  .cta-band:after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;
    background:conic-gradient(from 0deg,transparent 0deg,rgba(24,182,242,.5) 60deg,transparent 130deg,transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    opacity:.0;animation:ctaSheen 9s linear infinite}
  .cta-band.rv.in:after{opacity:.9}
  @keyframes ctaSheen{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

  /* footer top accent: slow shimmer */
  footer:before{background:linear-gradient(90deg,transparent,rgba(24,182,242,.5),transparent);
    background-size:50% 100%;background-repeat:no-repeat;animation:footShimmer 9s linear infinite}
  @keyframes footShimmer{0%{background-position:-50% 0}100%{background-position:150% 0}}

  @media(prefers-reduced-motion:reduce){
    .cta-band:after,footer:before,.band .proc-grid .pstep .pline:after{animation:none}
  }

  /* ===================================================== */
  /* ====  UNIFIED BRAND PASS — nav, buttons, social  ==== */
  /* ===================================================== */

  /* Secondary / "View My Portfolio" button — quiet glass, not a plain outline */
  .btn-ghost.on-dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);
    color:#eaf1fb;backdrop-filter:blur(6px)}
  .btn-ghost.on-dark:hover{background:rgba(20,184,255,.10);border-color:rgba(20,184,255,.55);
    color:#fff;box-shadow:0 10px 30px -14px rgba(20,184,255,.5)}

  /* Nav: subtle, consistent active state across every page */
  .nav-links a.active{color:var(--royal)}
  .nav-links a.active:after{height:2px;border-radius:2px;background:var(--grad)}

  /* ---- Footer social icons: clean line icons, quiet & premium ---- */
  .foot-social{display:flex;gap:10px;margin-top:20px}
  .foot-social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    color:var(--muted-d);border:1px solid var(--line-d);background:rgba(255,255,255,.03);
    transition:color .2s,border-color .2s,background .2s,transform .2s}
  .foot-social a:hover{color:var(--cyan);border-color:rgba(20,184,255,.5);
    background:rgba(20,184,255,.08);transform:translateY(-2px)}
  .foot-social svg{width:18px;height:18px}

  /* ---- Contact: dedicated social row (matches footer treatment) ---- */
  .contact-social{display:flex;gap:10px;margin-top:6px;padding-top:22px}
  .contact-social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    color:var(--royal);border:1px solid var(--line);background:var(--mist-2);
    transition:color .2s,border-color .2s,background .2s,transform .2s,box-shadow .2s}
  .contact-social a:hover{color:#fff;background:var(--royal);border-color:var(--royal);
    transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(18,103,255,.6)}
  .contact-social svg{width:19px;height:19px}

  /* Consistent vertical rhythm: keep band padding aligned with projects page */

  /* ===================================================== */
  /* ====  ACCESSIBILITY & INTERACTION HARDENING  ======== */
  /* Keyboard focus, skip link, tactile feedback. These are */
  /* additive — they never change the resting visual design.*/
  /* ===================================================== */

  /* --- Skip to content: hidden until focused via keyboard --- */
  .skip-link{position:fixed;top:10px;left:10px;z-index:2000;
    transform:translateY(-150%);transition:transform .2s ease;
    background:var(--royal);color:#fff;font-family:'Inter Tight',sans-serif;font-weight:600;
    font-size:15px;padding:11px 18px;border-radius:10px;
    box-shadow:0 12px 30px -10px rgba(10,91,230,.6)}
  .skip-link:focus{transform:none;outline:2px solid #fff;outline-offset:2px}

  /* --- Visible keyboard focus on every interactive element ---
     Uses :focus-visible so mouse clicks stay clean, keyboard
     navigation gets a clear ring. Brand royal on light surfaces. */
  a:focus-visible,button:focus-visible,
  input:focus-visible,select:focus-visible,textarea:focus-visible,
  [tabindex]:focus-visible,.faq-q:focus-visible,.menu-btn:focus-visible{
    outline:2.5px solid var(--royal);outline-offset:3px;border-radius:4px}
  /* Cyan ring on dark surfaces for adequate contrast */
  footer a:focus-visible,.foot-social a:focus-visible,
  .phead a:focus-visible,.phead button:focus-visible,
  .form-card a:focus-visible,.form-card button:focus-visible,
  .form-card input:focus-visible,.form-card select:focus-visible,.form-card textarea:focus-visible,
  .cta-band a:focus-visible,.band-flow a:focus-visible,
  .band-dark a:focus-visible,.intro a:focus-visible,.intro button:focus-visible,
  .care a:focus-visible,.map-card a:focus-visible{
    outline-color:var(--cyan)}
  /* Logo lock-up sits on white inside the footer — keep a dark ring there */
  .foot-brand .fb-logo:focus-visible{outline-color:var(--royal)}

  /* --- Tactile pressed feedback (skill: feedback within ~100ms) --- */
  .btn:active{transform:translateY(0) scale(.98)}
  .faq-q:active{transform:none}
  .foot-social a:active,.contact-social a:active{transform:translateY(0) scale(.96)}

  /* --- Home: the nav bar is visible over the hero from the start, so its
     links stay in the tab order throughout (no keyboard trap to guard). --- */
  html.js body.home header{visibility:visible;
    transition:opacity .3s ease,transform .3s ease,visibility .3s ease}

  @media(prefers-reduced-motion:reduce){
    .skip-link{transition:none}
  }

  /* --- Form validation feedback (contact form, on dark card) --- */
  form .field-error{display:block;margin-top:6px;min-height:1px;
    font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.02em;color:#ff9a8f}
  form .field-error:empty{margin-top:0}
  form input[aria-invalid="true"],form textarea[aria-invalid="true"],form select[aria-invalid="true"]{
    border-color:#ff6b5e;box-shadow:0 0 0 3px rgba(255,107,94,.16)}
  .form-status{margin-top:6px;font-size:13.5px;line-height:1.5}
  .form-status:empty{margin-top:0}
  .form-status.err{color:#ff9a8f}
  .form-status.ok{color:var(--term)}

  /* ===================================================== */
  /* ====  HOMEPAGE VISUAL / LAYOUT REFINEMENT  ========== */
  /* ===================================================== */

  /* Bug fix: clip the hero's decorative glow/spec layer in every mode.
     Under prefers-reduced-motion .intro-stage becomes position:static,
     which reparents the absolute .intro-bg to .intro — without this the
     side glows escaped and caused ~55px of horizontal scroll on mobile. */
  .intro{overflow:hidden}

  /* The header is sticky/fixed on every page, so offset in-page jumps
     (skip link, anchors, focus) to land below the bar, not under it. */
  html{scroll-padding-top:84px}

  /* "What I do" rows: vertically centre the status tag so each row reads
     as one balanced unit (homepage only — services page keeps top-align). */
  @media(min-width:901px){
    body.home .svc-list.system .svc-tag{align-self:center}
  }

  /* ===================================================== */
  /* ====  CONVERSION PASS — audit, pricing, CTAs, etc. == */
  /* Lead-magnet, package cards on light, comparison cards, */
  /* header call link, mobile bar.                         */
  /* ===================================================== */

  /* --- Header click-to-call (desktop only) --- */
  .nav-call{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
    font-size:14px;font-weight:500;color:var(--ink);opacity:.85;transition:opacity .2s,color .2s;white-space:nowrap}
  .nav-call svg{width:16px;height:16px;color:var(--royal)}
  .nav-call:hover{opacity:1;color:var(--royal)}
  @media(max-width:1080px){.nav-call{display:none}}

  /* --- CTA button rows (final CTA + sections) --- */
  .cta-actions{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;position:relative}
  .btn-call{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#eaf1fb;backdrop-filter:blur(6px)}
  .btn-call:hover{background:rgba(20,184,255,.12);border-color:rgba(20,184,255,.55);color:#fff;transform:translateY(-2px)}
  .btn-call svg{width:17px;height:17px}

  /* --- CTA button rows on interior page headers --- */
  .audit-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}

  /* --- Pricing packages on a light band (reuses .price-grid/.ptier) --- */
  .price-foot{margin-top:26px;text-align:center;color:var(--muted);font-size:15px;max-width:62ch;
    margin-left:auto;margin-right:auto}
  /* Value-based label that replaces a public price on package cards */
  .tier-label{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.04em;
    text-transform:uppercase;font-weight:700;color:var(--royal);background:var(--mist);border:1px solid var(--line);
    padding:7px 13px;border-radius:999px;margin:20px 0 12px;align-self:flex-start}
  .tier-badge{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;background:var(--grad);padding:5px 13px;border-radius:999px;font-weight:700;
    position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
    box-shadow:0 10px 24px -10px rgba(10,91,230,.7)}

  /* --- Trust-points strip (item 6) --- */
  .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
  .tpoint{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
    border-radius:14px;padding:20px 22px;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
  .tpoint:hover{transform:translateY(-3px);border-color:#cdd9ef;box-shadow:0 22px 44px -28px rgba(10,22,51,.3)}
  .tpoint .tp-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;
    place-items:center;color:#fff;box-shadow:0 12px 24px -12px rgba(18,103,255,.55)}
  .tpoint .tp-ic svg{width:18px;height:18px}
  .tpoint b{font-size:15.5px;font-weight:700;letter-spacing:-.01em;display:block}
  .tpoint span{color:var(--muted);font-size:14px;display:block;margin-top:3px;line-height:1.5}
  @media(max-width:860px){.trust-grid{grid-template-columns:1fr}}

  /* --- Mobile sticky CTA bar (Call · Quote · Start Project) --- */
  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:none;
    grid-template-columns:repeat(3,1fr);gap:8px;
    padding:9px 11px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(7,20,38,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line-d);
    transform:translateY(115%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .mobile-cta.show{transform:none}
  .mobile-cta a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-family:'Inter Tight',sans-serif;font-weight:600;font-size:12px;color:#eaf1fb;line-height:1.1;
    border-radius:11px;padding:8px 4px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
  .mobile-cta a svg{width:17px;height:17px}
  .mobile-cta a.primary{background:var(--grad);border-color:transparent;color:#fff;
    box-shadow:0 10px 22px -12px rgba(10,91,230,.8)}
  .mobile-cta a.call svg{color:var(--cyan)}
  /* The mobile sticky CTA bar is intentionally NOT shown on mobile: it
     covered content and competed with the quote form. A clean, full-screen
     scroll reads more premium on an iPhone. Kept in the DOM (display:none)
     so it is trivial to reinstate; the nav "Start a Website Project" CTA
     remains the primary mobile call to action. */
  .mobile-cta{display:none!important}

  /* ===================================================== */
  /* ====  SEO LANDING PAGES (industry / area)  ========== */
  /* Reuses phead, band, get-grid, svc-list, cta-band.     */
  /* ===================================================== */
  .lp-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;max-width:64ch}
  .lp-list li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--muted);line-height:1.55}
  .lp-list li svg{flex:none;margin-top:3px;color:var(--royal)}
  .lp-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
  .lp-chips a{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);background:var(--mist);
    border:1px solid var(--line);padding:8px 15px;border-radius:999px;transition:color .2s,border-color .2s,background .2s}
  .lp-chips a:hover{color:var(--royal);border-color:#cdd9ef;background:#fff}
  .lp-chips a.active{color:#fff;background:var(--grad);border-color:transparent}

  /* --- Optional-field hint inside form labels --- */
  form label .opt{color:#5e6f9e;font-weight:400;text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif}

  /* ---- Package picker cards (quote page overrides these with its scoped light theme) ---- */
  .pkg-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pkg-card{position:relative;display:flex;flex-direction:column;gap:3px;cursor:pointer;
    background:var(--navy-2);border:1.5px solid var(--line-d);border-radius:14px;padding:16px 16px 15px;
    transition:border-color .2s,box-shadow .2s,background .2s,transform .15s}
  .pkg-card input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
  .pkg-card:hover{border-color:#2e4f74;transform:translateY(-2px)}
  .pkg-card .pkg-name{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);font-weight:700}
  .pkg-card .pkg-price{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:19px;color:#fff;margin-top:2px}
  .pkg-card .pkg-desc{color:#9fb0d0;font-size:13px;line-height:1.45}
  .pkg-card .pkg-badge{position:absolute;top:12px;right:12px;display:none;align-items:center;gap:5px;
    background:var(--grad);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(10,91,230,.7)}
  .pkg-card.is-selected{border-color:var(--cyan);background:#13294a;box-shadow:0 0 0 3px rgba(24,182,242,.16),0 18px 36px -22px rgba(18,103,255,.7)}
  .pkg-card.is-selected .pkg-badge{display:inline-flex}
  /* visible keyboard focus on the card when its hidden radio is focused */
  .pkg-card:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(24,182,242,.28)}

  /* ---- Mobile: single-column package picker ---- */
  @media(max-width:560px){
    .pkg-picker{grid-template-columns:1fr}
  }

  /* =====================================================
     MOBILE POLISH PASS — tighter section rhythm + a calmer
     card count on small screens. Light-touch and additive:
     it only adjusts spacing/scale at phone widths, so the
     desktop composition is untouched.
  ===================================================== */
  @media(max-width:600px){
    @supports(padding:max(0px)){
      /* respect the iPhone home-indicator / gesture bar at the page foot */
      footer{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
    }
    /* Headings: keep them confident but stop the largest ones from
       wrapping awkwardly or feeling shouty on a 375px screen. */
    .band-head h2{font-size:clamp(26px,7.4vw,32px)}
    .band-head p{font-size:16px}
    /* Cards: soften the heavy drop-shadows so stacked cards read as a
       calm list instead of a pile of floating tiles. */
    .get,.diff,.tpoint,.ptier{box-shadow:none}
    .get-grid,.diff-grid,.trust-grid{gap:12px}
  }
  @media(max-width:430px){
    /* iPhone-class screens: hold a comfortable gutter, never edge-to-edge */
    .wrap{padding:0 18px}
  }

  /* =====================================================
     MOBILE FOOTER — compact, single-column, premium.
     Tightens padding, shrinks the logo pill + intro, stacks
     the link groups into one clean column, and quiets the
     coordinate line. Scoped to phone widths only; the tablet
     and desktop footer composition is left untouched. The
     safe-area padding-bottom set above (iPhone home indicator)
     is preserved — only the top padding is reduced here.
  ===================================================== */
  @media(max-width:600px){
    footer{padding-top:44px}
    .foot-top{flex-direction:column;gap:30px}
    .foot-brand{max-width:none}

    /* Logo pill: much smaller & cleaner. The mark carries dark
       navy detail, so a compact white chip keeps it readable
       on the navy footer without feeling bulky. */
    .foot-brand .fb-logo{gap:9px;padding:6px 13px 6px 10px;border-radius:11px;margin-bottom:14px}
    .foot-brand .fb-logo img{height:26px}
    .foot-brand .fb-logo .name{font-size:16px}

    /* Intro paragraph: smaller and easier to read (same wording) */
    .foot-brand p{font-size:13.5px;line-height:1.55}

    /* Social icons: smaller, tucked neatly under the intro text */
    .foot-social{gap:8px;margin-top:14px}
    .foot-social a{width:34px;height:34px;border-radius:10px}
    .foot-social svg{width:16px;height:16px}

    /* Link groups stack into one clean, single column */
    .foot-cols{flex-direction:column;gap:26px;width:100%}
    .foot-col{width:100%}
    .foot-col h3{margin-bottom:12px}
    .foot-col a{margin-bottom:11px}

    /* Copyright row tightens up */
    .foot-bottom{margin-top:30px;padding-top:20px;gap:6px;font-size:12.5px}
  }

  /* =====================================================
     CARD EFFECT PASS — cursor spotlight + gradient borders
     Extends the existing .spot spotlight to the main card
     families and gives standard package cards the same hover
     gradient border as the demo cards. Brand colours only,
     kept subtle; the global reduced-motion rule disables the
     transitions, so these degrade to a clean static state.
  ===================================================== */
  .tpoint{position:relative}
  .get:after,.tpoint:after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;
    pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(24,182,242,.09),transparent 60%)}
  .get:hover:after,.tpoint:hover:after{opacity:1}

  /* gradient border reveal on hover for the standard package cards
     (the featured card already carries a permanent gradient border) */
  .ptier:not(.feature):before{content:"";position:absolute;inset:0;z-index:0;border-radius:var(--r);padding:1.5px;
    pointer-events:none;background:var(--grad);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
  .ptier:not(.feature):hover:before{opacity:1}

  /* ============================================================
     BEFORE / AFTER COMPARISON  (#why-it-matters)
     Self-contained, brand-scoped block. Two full-size mockup
     panes are stacked; the "before" pane is clipped by --pos,
     which the slider handle drives (mouse / touch / keyboard).
     Container-query units (cqw) keep every mockup proportional.
     ============================================================ */
  .ba-stage{margin-top:52px;max-width:1040px;margin-left:auto;margin-right:auto}
  .ba-slider{
    position:relative;width:100%;aspect-ratio:16/9.6;
    /* slim, modern-tablet corner radius (kept in px/vw — cqw can't measure the
       container from the container element itself) */
    border-radius:clamp(22px,2.6vw,38px);overflow:hidden;
    background:linear-gradient(155deg,#0e2138,#0a1729 62%);
    border:1px solid var(--line-d);
    box-shadow:0 40px 90px -46px rgba(4,12,30,.85),0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(255,255,255,.02) inset;
    container-type:inline-size;
    touch-action:pan-y;user-select:none;-webkit-user-select:none;
    cursor:default;isolation:isolate;
  }
  .ba-specks{position:absolute;top:14px;left:16px;z-index:6;display:grid;grid-template-columns:repeat(3,4px);gap:4px;opacity:.7;pointer-events:none}
  .ba-specks i{width:4px;height:4px;border-radius:1px;display:block}
  .ba-specks i:nth-child(3n+1){background:var(--cyan)}
  .ba-specks i:nth-child(3n+2){background:var(--royal);opacity:.6}
  .ba-specks i:nth-child(3n){background:var(--cyan);opacity:.3}

  .ba-pane{position:absolute;inset:0;overflow:hidden}
  .ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);z-index:2}
  .ba-after{z-index:1}

  /* ---- shared mockup: browser + phone frame ---- */
  /* slim uniform bezel — the navy frame reads as a thin-bezel tablet, the white
     screen sits cleanly inside it with a hairline cutout edge */
  .ba-browser{position:absolute;top:2.8cqw;left:2.8cqw;right:2.8cqw;bottom:2.8cqw;
    border-radius:1.7cqw;overflow:hidden;background:#fff;
    box-shadow:0 2.6cqw 4.4cqw -2.4cqw rgba(0,0,0,.55),0 0 0 1px rgba(4,12,30,.5);display:flex;flex-direction:column}
  .ba-chrome{display:flex;align-items:center;gap:1.4cqw;height:4cqw;padding:0 2cqw;background:#eef2f8;border-bottom:1px solid #dbe3ef;flex:0 0 auto}
  .ba-dots{display:inline-flex;gap:.9cqw}
  .ba-dots i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#c4cede;display:block}
  .ba-url{font-family:'JetBrains Mono',monospace;font-size:1.35cqw;color:#7688a3;background:#fff;border-radius:1cqw;padding:.4cqw 1.6cqw;flex:1;text-align:center;letter-spacing:.01em}
  .ba-url-secure{display:flex;align-items:center;justify-content:center;gap:.7cqw;color:#3a4a63}
  .ba-url-secure svg{width:1.4cqw;height:1.4cqw;color:#1f9d55;flex:0 0 auto}
  .ba-url-insecure{display:flex;align-items:center;justify-content:center;gap:.7cqw;background:#fdf3f3;text-align:left}
  .ba-url-insecure svg{width:1.5cqw;height:1.5cqw;color:#c0392b;flex:0 0 auto}
  .ba-insecure-txt{color:#c0392b;font-weight:700}
  .ba-insecure-url{color:#9aa2ae;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ba-view{flex:1;overflow:hidden;position:relative;font-size:1.4cqw;line-height:1.4;color:var(--ink)}

  /* ---- AFTER: polished Hatt-style redesign ---- */
  .ba-after .ba-view{background:#fff;display:flex;flex-direction:column}
  .ba-topbar{display:flex;align-items:center;gap:1.4cqw;padding:1.7cqw 2.4cqw;border-bottom:1px solid var(--line)}
  .ba-logo{display:inline-flex;align-items:center;gap:1cqw;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.7cqw;letter-spacing:-.02em;color:var(--ink)}
  .ba-logo-mark{width:2.1cqw;height:2.1cqw;border-radius:.7cqw;background:var(--grad);box-shadow:0 .4cqw 1cqw -.3cqw rgba(18,103,255,.6)}
  .ba-nav{display:inline-flex;gap:2cqw;margin-left:auto;color:var(--muted);font-weight:500;font-size:1.4cqw}
  .ba-callbtn{background:var(--grad);color:#fff;font-weight:600;font-size:1.4cqw;padding:1cqw 1.8cqw;border-radius:1.4cqw;white-space:nowrap;box-shadow:0 .8cqw 1.6cqw -.6cqw rgba(18,103,255,.7)}
  .ba-hero{display:flex;gap:2.4cqw;padding:3cqw 2.4cqw 2.4cqw;align-items:center}
  .ba-hero-copy{flex:1.25;min-width:0}
  .ba-kicker{font-family:'JetBrains Mono',monospace;font-size:1.15cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--royal);font-weight:600}
  .ba-rating{display:flex;align-items:center;gap:.8cqw;margin-top:1cqw;font-size:1.35cqw;color:var(--muted)}
  .ba-rating b{color:var(--ink);font-weight:700}
  .ba-stars{display:inline-flex;gap:.2cqw}
  .ba-stars svg{width:1.6cqw;height:1.6cqw;color:#f6b40a}
  .ba-hero-copy h4{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:3cqw;line-height:1.06;letter-spacing:-.03em;margin:1cqw 0 .9cqw;color:var(--ink)}
  .ba-hero-copy p{color:var(--muted);font-size:1.5cqw;line-height:1.5;max-width:34ch}
  .ba-actions{display:flex;gap:1.2cqw;margin-top:1.9cqw}
  .ba-btn{font-weight:600;font-size:1.45cqw;padding:1.1cqw 2cqw;border-radius:1.4cqw;white-space:nowrap}
  .ba-btn-primary{background:var(--grad);color:#fff;box-shadow:0 1cqw 2cqw -.7cqw rgba(18,103,255,.7)}
  .ba-btn-ghost{border:1.5px solid var(--line);color:var(--ink)}
  .ba-hero-art{flex:1;align-self:stretch;position:relative;border-radius:1.6cqw;overflow:hidden;background:linear-gradient(150deg,#10233e,#0a1729);min-height:14cqw}
  .ba-art-glow{position:absolute;width:14cqw;height:14cqw;border-radius:50%;background:radial-gradient(circle,rgba(20,184,255,.55),transparent 70%);top:-3cqw;right:-2cqw;filter:blur(.4cqw)}
  .ba-art-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:2.4cqw 2.4cqw;mask-image:linear-gradient(160deg,#000,transparent 80%)}
  .ba-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:0 2.4cqw 2.6cqw;margin-top:auto}
  .ba-card{background:linear-gradient(180deg,#fff,#f6faff);border:1px solid var(--line);border-radius:1.4cqw;padding:1.6cqw;position:relative;overflow:hidden}
  .ba-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.9}
  .ba-ic{width:2.8cqw;height:2.8cqw;border-radius:.9cqw;background:rgba(18,103,255,.12);display:block;margin-bottom:1.1cqw}
  .ba-card b{font-family:'Inter Tight',sans-serif;font-size:1.55cqw;letter-spacing:-.01em;color:var(--ink);display:block;margin-bottom:1cqw}
  .ba-line{display:block;height:.9cqw;border-radius:1cqw;background:#e6edf7;margin-top:.8cqw}
  .ba-line.short{width:60%}

  /* ---- AFTER phone ---- */
  /* slim modern phone: taller screen proportion, rounder corners, thin uniform
     bezel and a fine machined rim — the screen radius stays concentric with the
     frame so it reads as a premium handset, not a bulky slab */
  .ba-phone{position:absolute;right:3.4cqw;bottom:3cqw;width:14.4cqw;aspect-ratio:1/2.15;
    border-radius:3.3cqw;background:linear-gradient(158deg,#152131,#0a1220);padding:.7cqw;z-index:3;
    box-shadow:0 3cqw 5cqw -1.6cqw rgba(0,0,0,.72),0 0 0 .14cqw rgba(255,255,255,.12),inset 0 0 0 .1cqw rgba(255,255,255,.07)}
  .ba-phone-screen{width:100%;height:100%;border-radius:2.6cqw;overflow:hidden;background:#fff;display:flex;flex-direction:column;padding:1.3cqw;gap:1cqw}
  .ba-p-top{display:flex;align-items:center;justify-content:center}
  .ba-p-logo{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.35cqw;color:var(--ink)}
  .ba-p-hero{margin-top:.4cqw}
  .ba-p-hero b{font-family:'Inter Tight',sans-serif;font-size:1.6cqw;line-height:1.1;color:var(--ink);display:block}
  .ba-p-sub{display:block;height:.8cqw;width:80%;background:#e6edf7;border-radius:1cqw;margin-top:.9cqw}
  .ba-p-btn{background:var(--grad);color:#fff;font-weight:600;font-size:1.25cqw;text-align:center;padding:1cqw;border-radius:1.2cqw;margin-top:.4cqw}
  .ba-p-btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
  .ba-p-list{margin-top:auto;display:flex;flex-direction:column;gap:.8cqw}
  .ba-p-list span{height:1.9cqw;border-radius:.9cqw;background:#eef3fb;display:block}

  /* ---- BEFORE: stale, generic template site — the realistic kind of bad:
     crowded underlined nav, washed-out banner, wall of justified text,
     a text-link "CTA", and the phone number buried in the footer ---- */
  .ba-browser.is-old{box-shadow:0 2.6cqw 4.4cqw -2.4cqw rgba(0,0,0,.5),0 0 0 1px rgba(4,12,30,.45)}
  .ba-before .ba-view{background:#f2f1ec;font-family:Arial,Helvetica,sans-serif;color:#333;display:block;overflow:hidden}
  .ba-topbar-old{background:#fbfaf7;color:#555;padding:1.2cqw 1.6cqw;text-align:center;border-bottom:1px solid #ddd8ca}
  .ba-logo-old{font-weight:700;font-size:1.9cqw;letter-spacing:.01em;color:#37456b;display:block}
  .ba-nav-old{display:block;margin-top:.8cqw;font-size:1.2cqw;color:#888;line-height:1.8}
  .ba-nav-old span{color:#4a6fa5;text-decoration:underline;margin:0 .7cqw}
  .ba-heroband-old{background:linear-gradient(#93a6ba,#71859a);color:#f3f5f8;text-align:center;padding:2.6cqw 2cqw;border-bottom:1px solid #5f7288}
  .ba-heroband-old b{display:block;font-size:2.2cqw;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.18)}
  .ba-heroband-old i{display:block;font-size:1.25cqw;margin-top:.5cqw;opacity:.85}
  /* a stretched, low-res generic "stock photo" banner — the classic bad-template hero */
  .ba-oldimg{position:relative;height:9cqw;overflow:hidden;border-bottom:2px solid #cfc9b8;
    background:
      radial-gradient(circle at 82% 26%,#ffe9a8 0 2.6cqw,transparent 2.9cqw),
      linear-gradient(#a8c6df 0 55%,#8fb56a 55% 100%);
    image-rendering:pixelated}
  /* crude clip-art house */
  .ba-oldimg:before{content:"";position:absolute;left:38%;bottom:1.6cqw;width:10cqw;height:4.2cqw;
    background:#d8b98a;border:.35cqw solid #7a5a38;
    box-shadow:0 -2.2cqw 0 -1.2cqw #b34a3a, inset 0 0 0 10cqw transparent;
    clip-path:polygon(0 100%,0 30%,50% -30%,100% 30%,100% 100%)}
  .ba-oldimg-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);
    font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:1.7cqw;letter-spacing:.06em;
    color:rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap;
    border:.25cqw dashed rgba(255,255,255,.5);padding:.4cqw 1.2cqw;border-radius:.6cqw}
  .ba-body-old{padding:1.8cqw 2.2cqw}
  .ba-body-old p{font-size:1.35cqw;line-height:1.55;color:#4a4a44;text-align:justify;margin-bottom:1.4cqw}
  .ba-link-old{display:inline-block;font-size:1.35cqw;color:#4a6fa5;text-decoration:underline}
  .ba-footer-old{margin-top:1.7cqw;padding-top:1cqw;border-top:1px solid #ddd8ca;font-size:1.05cqw;color:#8f8c80}
  /* before phone: a squished, unreadable desktop layout */
  .ba-phone.is-old{background:#3a3a3a}
  .ba-phone.is-old .ba-phone-screen{background:#f2f1ec;padding:.9cqw;font-family:Arial,Helvetica,sans-serif}
  .ba-p-old-zoom{transform-origin:top left;display:flex;flex-direction:column;gap:.7cqw}
  .ba-p-old-logo{font-weight:700;font-size:1.05cqw;color:#37456b;line-height:1.1}
  .ba-p-old-nav{font-size:.8cqw;color:#4a6fa5;text-decoration:underline}
  .ba-p-old-banner{background:linear-gradient(#93a6ba,#71859a);color:#f3f5f8;font-weight:700;font-size:.95cqw;text-align:center;padding:.6cqw}
  .ba-p-old-line{height:.7cqw;background:#dcd8ca;border-radius:1px;display:block}
  .ba-p-old-line.short{width:55%}
  .ba-p-old-foot{display:block;margin-top:.5cqw;font-size:.75cqw;color:#8f8c80}

  /* ---- Before / After tags ---- */
  .ba-tag{position:absolute;top:5.6cqw;z-index:4;font-family:'JetBrains Mono',monospace;font-size:1.25cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.7cqw 1.4cqw;border-radius:1cqw;color:#fff;backdrop-filter:blur(4px)}
  .ba-tag-before{left:5.4cqw;background:rgba(120,30,30,.72);border:1px solid rgba(255,255,255,.18)}
  .ba-tag-after{right:5.4cqw;background:rgba(18,103,255,.72);border:1px solid rgba(255,255,255,.22)}

  /* ---- Draggable handle ---- */
  .ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);z-index:5;
    width:2.6cqw;min-width:34px;transform:translateX(-50%);
    background:none;border:0;padding:0;cursor:ew-resize;touch-action:none;-webkit-tap-highlight-color:transparent}
  .ba-handle:before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:linear-gradient(180deg,rgba(255,255,255,.5),#fff 20%,#fff 80%,rgba(255,255,255,.5));box-shadow:0 0 0 1px rgba(4,12,30,.25),0 0 14px rgba(20,184,255,.55)}
  .ba-handle-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:clamp(38px,4.6cqw,54px);height:clamp(38px,4.6cqw,54px);border-radius:50%;
    background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;gap:1px;
    box-shadow:0 6px 20px -4px rgba(4,12,30,.6),0 0 0 4px rgba(255,255,255,.9),0 0 0 5px rgba(18,103,255,.25)}
  .ba-handle-grip svg{width:clamp(13px,1.5cqw,17px);height:clamp(13px,1.5cqw,17px);margin:0 -2px}
  .ba-handle:focus-visible{outline:none}
  .ba-handle:focus-visible .ba-handle-grip{box-shadow:0 6px 20px -4px rgba(4,12,30,.6),0 0 0 4px #fff,0 0 0 7px var(--royal)}

  /* ---- "Drag to compare" hint: pulses near the handle, fades on first use ---- */
  .ba-hint{position:absolute;left:50%;top:50%;margin-top:5.4cqw;transform:translateX(-50%);z-index:6;
    pointer-events:none;display:inline-flex;align-items:center;gap:.9cqw;white-space:nowrap;
    font-family:'JetBrains Mono',monospace;font-size:1.3cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:#fff;background:rgba(8,20,38,.74);backdrop-filter:blur(6px);
    padding:1cqw 1.8cqw;border-radius:100px;border:1px solid rgba(255,255,255,.2);
    box-shadow:0 1.4cqw 3cqw -1.2cqw rgba(4,12,30,.8),0 0 0 1px rgba(4,12,30,.25);
    animation:baHintPulse 2.4s ease-in-out infinite;
    transition:opacity .45s ease,transform .45s ease}
  .ba-hint svg{width:2cqw;height:2cqw;flex:0 0 auto;color:var(--cyan)}
  .ba-hint.is-hidden{opacity:0;transform:translateX(-50%) scale(.92);animation:none}
  @keyframes baHintPulse{
    0%,100%{transform:translateX(-50%)}
    50%{transform:translateX(calc(-50% + 6px))}
  }

  .ba-note{text-align:center;color:var(--muted);font-size:12.5px;margin-top:16px;letter-spacing:.01em}

  /* ---- responsive: keep mockups legible + no overflow ---- */
  @container (max-width:720px){
    .ba-view{font-size:1.7cqw}
    .ba-url{font-size:1.6cqw}
  }
  @media(max-width:760px){
    .ba-stage{margin-top:40px}
    .ba-slider{aspect-ratio:4/3.15}
    /* scale the whole mockup up so text stays readable on tablets/phones,
       with a slim uniform bezel to match the desktop tablet frame */
    .ba-browser{top:2.4cqw;left:2.4cqw;right:2.4cqw;bottom:2.4cqw}
    .ba-view{font-size:2.15cqw}
    .ba-url{font-size:1.9cqw}
    .ba-logo{font-size:2.5cqw}.ba-nav{gap:1.6cqw}
    .ba-callbtn,.ba-btn,.ba-hero-copy p,.ba-nav{font-size:2.1cqw}
    .ba-hero-copy h4{font-size:4cqw}
    .ba-kicker{font-size:1.7cqw}
    .ba-card b{font-size:2.2cqw}
    .ba-body-old p{font-size:2.05cqw}
    .ba-logo-old{font-size:2.9cqw}.ba-nav-old{font-size:1.8cqw}.ba-heroband-old b{font-size:3.1cqw}
    .ba-heroband-old i{font-size:1.9cqw}.ba-link-old{font-size:2cqw}.ba-footer-old{font-size:1.6cqw}
    /* phone mockup would crowd a narrow stage — drop it, focus the desktop view */
    .ba-phone{display:none}
    .ba-tag{font-size:1.9cqw;top:5cqw}
  }
  @media(max-width:520px){
    .ba-slider{aspect-ratio:1/1.02}
    .ba-view{font-size:3cqw}
    .ba-url{font-size:2.6cqw}
    .ba-hero{flex-direction:column;padding:2.6cqw}
    .ba-hero-art{display:none}
    .ba-hero-copy h4{font-size:5.6cqw}
    .ba-hero-copy p,.ba-callbtn,.ba-btn,.ba-nav{font-size:3cqw}
    .ba-nav{display:none}
    .ba-logo{font-size:3.6cqw}
    .ba-kicker{font-size:2.5cqw}
    .ba-card b{font-size:3.1cqw}.ba-ic{width:5cqw;height:5cqw}
    .ba-body-old p{font-size:2.9cqw}
    .ba-logo-old{font-size:3.9cqw}.ba-nav-old{font-size:2.4cqw}.ba-heroband-old b{font-size:4.2cqw}
    .ba-heroband-old i{font-size:2.6cqw}.ba-link-old{font-size:2.9cqw}.ba-footer-old{font-size:2.2cqw}
    .ba-tag{font-size:2.7cqw;top:4cqw;padding:1cqw 2cqw}
    .ba-tag-before{left:4cqw}.ba-tag-after{right:4cqw}
  }
  @media(prefers-reduced-motion:reduce){
    .ba-before,.ba-handle{transition:none}
  }

  /* ============================================================
     BEFORE / AFTER v2 — stronger transformation
     Adds icon buttons, trust row, a conversion quote card, card
     descriptors, a richer After phone, and dated Before clutter
     (utility bar, under-construction badge, footer badge).
     ============================================================ */
  /* --- AFTER: icon buttons --- */
  .ba-btn{display:inline-flex;align-items:center;gap:.55cqw}
  .ba-btn svg{width:1.5cqw;height:1.5cqw;flex:0 0 auto}
  .ba-callbtn{display:inline-flex;align-items:center;gap:.6cqw}
  .ba-callbtn svg{width:1.4cqw;height:1.4cqw;flex:0 0 auto}

  /* --- AFTER: tighter hero so trust + quote card + cards fit --- */
  .ba-hero{padding:2cqw 2.4cqw 1.4cqw;gap:2cqw;align-items:stretch}
  .ba-hero-copy{display:flex;flex-direction:column}
  .ba-hero-copy h4{font-size:2.7cqw;margin:.9cqw 0 .8cqw}
  .ba-hero-copy p{font-size:1.4cqw;max-width:32ch}

  /* --- AFTER: trust row under the buttons --- */
  .ba-trust{display:flex;flex-wrap:wrap;gap:1cqw 1.8cqw;margin-top:1.5cqw}
  .ba-trust span{display:inline-flex;align-items:center;gap:.6cqw;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:1.3cqw;letter-spacing:-.01em;color:var(--ink)}
  .ba-trust svg{width:1.7cqw;height:1.7cqw;color:#fff;background:var(--grad);border-radius:50%;padding:.4cqw;flex:0 0 auto;box-shadow:0 .4cqw 1cqw -.3cqw rgba(18,103,255,.6)}
  .ba-trust-badge{background:rgba(31,157,85,.1);border:1px solid rgba(31,157,85,.28);border-radius:1.4cqw;padding:.5cqw 1.2cqw;color:#177a43!important}
  .ba-trust-badge svg{width:1.6cqw!important;height:1.6cqw!important;color:#1f9d55!important;background:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important}

  /* --- AFTER: conversion quote card (replaces the empty art panel) --- */
  .ba-quote-card{flex:.92;align-self:stretch;position:relative;border-radius:1.6cqw;overflow:hidden;
    background:linear-gradient(165deg,#10233e,#0a1729);color:#fff;padding:1.9cqw 1.8cqw;
    display:flex;flex-direction:column;min-height:16cqw;border:1px solid rgba(20,184,255,.28);
    box-shadow:0 1.4cqw 3cqw -1.2cqw rgba(4,12,30,.7)}
  .ba-qc-glow{position:absolute;width:12cqw;height:12cqw;border-radius:50%;background:radial-gradient(circle,rgba(20,184,255,.5),transparent 70%);top:-3cqw;right:-2.5cqw}
  .ba-qc-eyebrow{position:relative;font-family:'JetBrains Mono',monospace;font-size:1.1cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:600}
  .ba-qc-title{position:relative;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:2cqw;letter-spacing:-.02em;margin:.7cqw 0 1.1cqw;color:#fff}
  .ba-qc-row{position:relative;display:flex;align-items:center;gap:.9cqw;font-size:1.35cqw;color:#cfe0f5;margin-bottom:.7cqw}
  .ba-qc-row i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--grad);flex:0 0 auto;box-shadow:0 0 0 .3cqw rgba(20,184,255,.18)}
  .ba-qc-btn{position:relative;margin-top:auto;background:var(--grad);color:#fff;font-weight:600;font-size:1.4cqw;text-align:center;padding:1.1cqw;border-radius:1.2cqw;box-shadow:0 1cqw 2cqw -.6cqw rgba(18,103,255,.7)}
  .ba-qc-note{position:relative;text-align:center;font-size:1.05cqw;color:var(--muted-d);margin-top:.8cqw}

  /* --- AFTER: service cards get a short descriptor --- */
  .ba-cards{padding:0 2.4cqw 2cqw;gap:1.3cqw}
  .ba-card{padding:1.4cqw}
  .ba-card b{margin-bottom:.5cqw}
  .ba-ic{margin-bottom:.9cqw}
  .ba-cardp{display:block;font-size:1.2cqw;line-height:1.35;color:var(--muted)}

  /* --- AFTER phone: stronger conversion layout --- */
  .ba-p-top{justify-content:space-between}
  .ba-p-call{display:inline-flex;align-items:center;justify-content:center;width:2.7cqw;height:2.7cqw;border-radius:50%;background:var(--grad);color:#fff;flex:0 0 auto}
  .ba-p-call svg{width:1.4cqw;height:1.4cqw}
  .ba-p-kick{display:block;font-family:'JetBrains Mono',monospace;font-size:1cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--royal);font-weight:600;margin-bottom:.35cqw}
  .ba-p-hero b{font-size:1.75cqw}
  .ba-p-btn{display:flex;align-items:center;justify-content:center;gap:.5cqw}
  .ba-p-btn svg{width:1.25cqw;height:1.25cqw;flex:0 0 auto}
  .ba-p-trust{display:flex;justify-content:space-between;gap:.4cqw;font-size:1.02cqw;font-weight:600;color:var(--royal);margin-top:.1cqw}
  .ba-p-list{gap:.7cqw}
  .ba-p-list span{height:auto;display:flex;align-items:center;padding:.85cqw 1cqw;border-radius:.9cqw;background:#eef3fb;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:1.2cqw;color:var(--ink)}

  /* --- responsive: tablets / large phones (phone mockup already hidden) --- */
  @media(max-width:760px){
    .ba-btn svg,.ba-callbtn svg{width:2.1cqw;height:2.1cqw}
    .ba-hero{padding:1.8cqw 2cqw 1.2cqw}
    .ba-hero-copy h4{font-size:3.6cqw}
    .ba-hero-copy p{font-size:2cqw}
    .ba-rating{font-size:1.9cqw}
    .ba-stars svg{width:2.2cqw;height:2.2cqw}
    .ba-url-secure svg,.ba-url-insecure svg{width:2.2cqw;height:2.2cqw}
    .ba-oldimg-wm{font-size:2.4cqw}
    .ba-hint{font-size:1.9cqw;margin-top:6cqw}
    .ba-hint svg{width:2.8cqw;height:2.8cqw}
    .ba-trust span{font-size:1.85cqw}
    .ba-trust svg{width:2.4cqw;height:2.4cqw}
    .ba-trust-badge svg{width:2.2cqw!important;height:2.2cqw!important}
    .ba-qc-eyebrow{font-size:1.6cqw}
    .ba-qc-title{font-size:2.8cqw}
    .ba-qc-row{font-size:1.9cqw}
    .ba-qc-btn{font-size:2cqw}
    .ba-qc-note{font-size:1.5cqw}
    .ba-cardp{font-size:1.75cqw}
  }
  /* --- responsive: phones --- */
  @media(max-width:520px){
    .ba-hero{flex-direction:column}
    .ba-quote-card{display:none}
    .ba-hero-copy h4{font-size:5.2cqw}
    .ba-hero-copy p{font-size:3cqw}
    .ba-rating{font-size:2.7cqw;margin-top:1.6cqw}
    .ba-stars svg{width:3.1cqw;height:3.1cqw}
    .ba-trust{gap:.8cqw 2.6cqw;margin-top:2cqw}
    .ba-trust span{font-size:2.7cqw}
    .ba-trust svg{width:3.5cqw;height:3.5cqw}
    .ba-trust-badge svg{width:3cqw!important;height:3cqw!important}
    /* the raw URL crowds the "Not secure" flag on a narrow bar — keep the flag, drop the path */
    .ba-url-secure svg,.ba-url-insecure svg{width:3cqw;height:3cqw}
    .ba-insecure-url{display:none}
    .ba-oldimg{height:12cqw}
    .ba-oldimg-wm{font-size:3.2cqw}
    .ba-hint{font-size:2.7cqw;margin-top:7cqw;padding:1.4cqw 2.4cqw}
    .ba-hint svg{width:4cqw;height:4cqw}
    .ba-cardp{font-size:2.5cqw}
    .ba-btn svg,.ba-callbtn svg{width:3cqw;height:3cqw}
  }

  /* ===== Phase 2A: hero receipts strip + local trust card + homepage FAQ ===== */
  .sh-receipts{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 26px;
    list-style:none;margin:26px 0 0;padding:0}
  .sh-receipts li{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
    font-size:12.5px;letter-spacing:.02em;color:#c5d4ec;white-space:nowrap}
  .sh-receipts li svg{color:var(--cyan);flex:none}

  /* The "who you deal with" side card was removed; the copy now stands on its
     own as a left-aligned statement block, capped so it never runs full width. */
  .local-grid{max-width:640px}
  .local-copy h2{font-size:clamp(28px,3.8vw,40px);letter-spacing:-.03em;margin-top:16px}
  .local-copy p{color:var(--muted);margin-top:16px;font-size:16.5px;max-width:56ch}
  .local-copy .btn{margin-top:26px}
  @media(max-width:520px){
    .sh-receipts{gap:8px 16px;margin-top:22px}
    .sh-receipts li{font-size:11.5px}
  }