/* Qsweep — production stylesheet (compiled from the Astro/Tailwind source) */

/* ---- self-hosted webfonts ----
   Previously loaded from fonts.googleapis.com. Serving them from our own
   origin removes two third-party connections from the critical path, drops a
   render-blocking external stylesheet, and keeps visitor IPs away from Google
   (which the privacy policy is quieter about than it should be).
   unicode-range means the latin-ext files are only fetched if a page actually
   uses those characters — in practice, never.

   Montserrat is a VARIABLE font: one file carries the whole weight axis, so
   the two rules below cover 500-700 with `font-weight` given as a range.
   Google's own CSS emits a separate @font-face per weight all pointing at the
   same URL; mirroring that shape while self-hosting was a trap, because
   renaming one file to montserrat-{500,600,700}-latin.woff2 turned a single
   cached download into one fetch per weight used. Keep this as one file per
   subset — adding a weight here must NOT mean adding a file.

   Poppins is NOT variable (Google ships static instances), so it genuinely
   needs one file per weight. Don't "consolidate" those to match. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/montserrat-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/montserrat-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --navy:#020C29; --navy-deep:#010818; --navy-panel:#0a1633;
  --blue:#154EA7; --sky:#2EB2FB; --cyan:#00FFFF;
  --slate:#272D39; --mist:#D6DBE2; --paper:#FEFEFE; --ice:#EEF3FA;
  /* fog-400 was #6b7590 — 4.15:1 on navy, below the 4.5:1 AA floor for the
     13px footer text and .nf-item-sub. #7B8499 measures 5.17:1. */
  --fog-100:#c7cede; --fog-200:#b9c2d4; --fog-300:#9aa6bd; --fog-400:#7B8499;
  --ink-soft:#4a5160; --danger:#ff6b7a;
  --display:'Montserrat',ui-sans-serif,sans-serif;
  --body:'Poppins',ui-sans-serif,sans-serif;
  --shell:1260px;
}
*,*::before,*::after{box-sizing:border-box;}
/* BOTH forms of text-size-adjust are required and the pair is correct as-is.
   Its job is to stop iOS Safari inflating body text on rotation to landscape.
   Safari implements ONLY -webkit-text-size-adjust; Chrome/Edge/Samsung also
   accept the unprefixed standard property. Neither declaration alone covers
   both, so linters flag whichever one is missing:
     both present   -> informational warning on the unprefixed line (current)
     prefixed only  -> ERROR, "not supported by Chrome/Edge/Samsung"
     unprefixed only-> breaks iOS Safari, the one browser this exists for
   Keeping both is the best achievable state. Do not "fix" the hint by
   deleting either line — the pairing is correct, and no code change removes
   the diagnostic. The hint is expected and can be ignored. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--navy);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;}
img{max-width:100%;}
a{color:var(--sky);text-decoration:none;}
a:hover{color:var(--cyan);}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;}
p{margin:0;}
::placeholder{color:var(--fog-400);}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;}
.shell{max-width:var(--shell);margin:0 auto;}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 14px;}
.eyebrow-cyan{color:var(--cyan);letter-spacing:.2em;margin-bottom:24px;}
.eyebrow-sky{color:var(--sky);}

/* buttons */
.btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;color:var(--paper);border:none;border-radius:8px;cursor:pointer;text-align:center;transition:filter .2s ease,transform .2s ease;}
.btn:hover{color:var(--paper);}
.btn-primary{background:var(--blue);padding:12px 28px;}
.btn-primary:hover{filter:brightness(1.25);transform:translateY(-1px);}
.btn-lg{font-size:16px;padding:17px 44px;}
.btn-lg:hover{transform:translateY(-2px);}
.btn-glow{box-shadow:0 14px 40px rgba(46,178,251,.3);}
.btn-block{display:block;width:100%;padding:15px;font-size:16px;}

/* skip link — first tab stop, visible only when focused */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blue);color:var(--paper);font-weight:600;font-size:15px;padding:12px 20px;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;color:var(--paper);}

/* header */
/* The toggle is display:none on desktop, which also takes it out of the tab
   order. On mobile it becomes a transparent 44px square sitting over the
   hamburger, so it is natively focusable and operable with Space — the
   <label> alone was not reachable by keyboard at all. */
#nav-toggle{display:none;}
/* Gutter lives on .site-header, NOT on .header-inner — same structure every
   section uses (outer element pads, .shell caps and centres inside it). Putting
   it on .header-inner instead pushed the logo and nav 36px further in than
   section content on any viewport past ~1332px, because box-sizing:border-box
   makes .shell's max-width include that padding. */
.site-header{position:sticky;top:0;z-index:50;padding:0 36px;background:rgba(2,12,41,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(214,219,226,.12);transition:box-shadow .25s ease;}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.4);}
.header-inner{height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{display:flex;align-items:center;flex-shrink:0;}
/* Sized to the current asset: 450x105, in which the wordmark occupies 88.6%
   of the canvas height. An older file was 781x469 with 162px of transparent
   padding top and bottom — hence the former height:74px plus margin:-14px 0,
   which clawed that padding back. Both had to change together: with the padding
   cropped away, 74px would render the wordmark ~3x larger and the negative
   margin would clip it. 26px here reproduces the original 23.0px wordmark.
   If the asset is ever re-exported at a different size, re-derive these
   heights from (wordmark height / canvas height) rather than eyeballing. */
.logo img{height:26px;width:auto;display:block;}
.nav-desktop{display:flex;align-items:center;gap:10px;}
.nav-link{font-size:14.5px;font-weight:500;color:var(--fog-100);padding:9px 18px;border-radius:999px;transition:background .2s ease,color .2s ease;}
.nav-link:hover{background:rgba(46,178,251,.14);color:var(--paper);}
.nav-desktop .btn{margin-left:14px;}
.hamburger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;border-radius:8px;}
.bar{display:block;width:24px;height:2px;background:var(--paper);border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
.nav-mobile{display:none;}

/* hero */
.hero{position:relative;background:var(--navy);overflow:hidden;}
.hero-glow{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 0%,rgba(21,78,167,.55),transparent 65%);}
.orb{position:absolute;border-radius:50%;animation:drift 9s ease-in-out infinite;}
.orb-a{left:8%;top:30%;width:220px;height:220px;background:radial-gradient(circle,rgba(46,178,251,.22),transparent 70%);}
.orb-b{right:10%;bottom:12%;width:180px;height:180px;background:radial-gradient(circle,rgba(0,255,255,.14),transparent 70%);animation-duration:11s;}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none;}html{scroll-behavior:auto;}}
.hero-inner{position:relative;max-width:920px;margin:0 auto;padding:120px 36px 110px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.hero h1{font-size:66px;line-height:1.05;letter-spacing:-.015em;margin:0 0 26px;max-width:15ch;}
.hero-sub{font-size:19px;line-height:1.65;color:var(--fog-200);margin:0 0 40px;max-width:58ch;}

/* section intros */
.section-intro{max-width:820px;margin-bottom:56px;}
.section-intro--center{text-align:center;max-width:780px;margin:0 auto 60px;}
.section-intro h2{font-size:40px;line-height:1.12;letter-spacing:-.01em;color:var(--navy);margin:0 0 18px;}
.section-intro .lede{font-size:17px;line-height:1.65;color:var(--ink-soft);}

/* what we do */
/* Section backgrounds are WebP, served directly — no image-set(), no JPEG.
   An earlier revision used image-set() with type() to negotiate WebP vs JPEG.
   That worked, but it needs Chrome 113+/Safari 16.4+, so every older engine
   downloaded the JPEG instead: 55.6 KB rather than 11.6 KB, and 44.3 KB rather
   than 9.7 KB. Serving WebP outright gives every browser the small file and
   let the two JPEGs be deleted (~100 KB off the bundle).

   The trade: WebP needs Chrome 32+/Firefox 65+/Safari 14+/Edge 18+. Anything
   older — Safari <=13, IE — gets no photo. That degrades cleanly rather than
   breaking, because each of these rules also sets a solid var(--paper) behind
   the image, so the section renders plain white with all text fully legible.
   Keep that colour in the shorthand; it IS the fallback. */
.services{scroll-margin-top:112px;background:var(--paper) url('assets/whatwedo-bg.webp') center/cover no-repeat;padding:96px 36px 110px;}
.svc-stack{display:flex;flex-direction:column;gap:24px;}
.svc-card{display:flex;gap:32px;align-items:flex-start;background:var(--slate);border:1px solid rgba(214,219,226,.14);border-radius:16px;padding:36px 38px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.svc-card:hover{transform:translateY(-4px);border-color:var(--sky);}
.svc-card--feature{background:linear-gradient(160deg,#154EA7 0%,#0d2f66 55%,#020C29 100%);border-color:rgba(46,178,251,.35);}
.svc-card--feature:hover{border-color:rgba(46,178,251,.35);box-shadow:0 26px 60px rgba(21,78,167,.4);}
.svc-icon{flex-shrink:0;width:52px;height:52px;border-radius:13px;background:rgba(46,178,251,.14);display:flex;align-items:center;justify-content:center;}
.svc-icon--light{background:rgba(254,254,254,.12);}
.svc-grid{flex:1;display:grid;grid-template-columns:.85fr 1.4fr;gap:40px;align-items:start;}
.svc-grid h3{font-size:21px;color:var(--paper);margin:0 0 10px;}
.svc-claim{font-size:15px;font-weight:600;line-height:1.5;color:var(--sky);}
.svc-claim--cyan{color:var(--cyan);}
.svc-points{display:flex;flex-direction:column;gap:12px;}
.svc-points p{font-size:14.5px;line-height:1.65;color:var(--fog-200);}
.svc-card--feature .svc-points p{color:#dbe7fa;}
.svc-points strong{color:var(--paper);}

/* how it works */
.process{scroll-margin-top:112px;background:var(--ice);padding:100px 36px;color:var(--slate);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--mist);border-radius:16px;overflow:hidden;background:var(--paper);}
.step{padding:44px 36px;border-right:1px solid var(--mist);transition:background .2s ease;}
.step:last-child{border-right:none;}
.step:hover{background:#F4F8FD;}
/* --sky on this white panel measures 2.35:1 — well under the 4.5:1 AA floor
   for 14px bold. --blue is 7.77:1 and is already the light-section accent
   (see .eyebrow, which is the same small-caps label treatment). Keep --sky for
   dark backgrounds only. */
.step-num{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.14em;color:var(--blue);margin:0 0 18px;}
.step h3{font-size:22px;color:var(--navy);margin:0 0 12px;}
.step p{font-size:15px;line-height:1.7;color:var(--ink-soft);}

/* about */
.about{scroll-margin-top:112px;position:relative;overflow:hidden;background:var(--paper) url('assets/section-bg.webp') center/cover no-repeat;padding:100px 36px;}
.about-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start;}
.about-grid h2{font-size:38px;line-height:1.14;letter-spacing:-.01em;color:var(--navy);}
.about-copy p{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0 0 18px;}
.about-copy p:last-child{margin-bottom:0;}
.about-pull{font-family:var(--display);font-size:21px!important;line-height:1.5;color:var(--blue)!important;font-weight:600;margin:26px 0!important;}

/* contact */
.contact{scroll-margin-top:112px;position:relative;overflow:hidden;background:var(--navy);padding:116px 36px 110px;}
.contact-glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 100%,rgba(21,78,167,.35),transparent 70%);}
.contact-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start;}
.contact-title{font-size:42px;line-height:1.1;letter-spacing:-.01em;color:var(--paper);margin:0 0 18px;}
.contact-sub{font-size:17px;line-height:1.65;color:var(--fog-300);max-width:46ch;}
.form-frame{background:linear-gradient(135deg,#154EA7,#2EB2FB,#00FFFF);border-radius:18px;padding:1.5px;}
.form-card{background:var(--navy-panel);border-radius:17px;padding:40px 36px;}
.form-card h3{font-size:22px;color:var(--paper);margin:0 0 24px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:16px;}
.field-last{margin-bottom:24px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--fog-100);margin-bottom:6px;}
.field input{width:100%;font-family:var(--body);font-size:15px;color:var(--paper);padding:12px 14px;border:1px solid rgba(214,219,226,.25);border-radius:8px;background:rgba(254,254,254,.06);}
.field input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(46,178,251,.25);}
.field input.is-invalid{border-color:var(--danger);}
.field-err{display:none;font-size:12.5px;color:var(--danger);margin:6px 0 0;}
.field-err.is-visible{display:block;}
.form-note{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--fog-200);min-height:1em;}
.form-note.is-ok{color:var(--cyan);}
.form-note.is-error{color:var(--danger);}

/* 404 */
.btn-ghost{background:transparent;border:1px solid rgba(214,219,226,.3);color:var(--fog-100);}
.btn-ghost:hover{border-color:var(--sky);background:rgba(46,178,251,.1);color:var(--paper);filter:none;transform:translateY(-2px);}
.nf{position:relative;overflow:hidden;background:var(--navy);padding:96px 36px 110px;}
.nf-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center;}
.nf-code{font-family:var(--display);font-weight:700;font-size:132px;line-height:.85;letter-spacing:-.04em;margin:0 0 22px;background:linear-gradient(135deg,var(--sky),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}
.nf-title{font-size:46px;line-height:1.08;letter-spacing:-.015em;color:var(--paper);margin:0 0 20px;max-width:20ch;}
.nf-sub{font-size:17px;line-height:1.7;color:var(--fog-300);max-width:52ch;margin:0 0 36px;}
.nf-actions{display:flex;flex-wrap:wrap;gap:14px;}
.nf-panel{background:rgba(10,22,51,.72);border:1px solid rgba(214,219,226,.14);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.nf-panel-head{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin:0 0 8px;}
.nf-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;padding:16px 18px;border:1px solid rgba(214,219,226,.12);border-radius:12px;background:rgba(254,254,254,.03);transition:border-color .2s ease,background .2s ease,transform .2s ease;}
.nf-item:hover{border-color:var(--sky);background:rgba(46,178,251,.1);transform:translateX(3px);}
.nf-item-title{grid-column:1;font-family:var(--display);font-weight:600;font-size:16px;color:var(--paper);}
.nf-item-sub{grid-column:1;font-size:13.5px;line-height:1.5;color:var(--fog-400);}
.nf-arrow{grid-column:2;grid-row:1 / span 2;justify-self:end;font-size:19px;color:var(--sky);}
.nf-help{margin:12px 0 0;font-size:13.5px;color:var(--fog-400);}

/* legal pages */
.legal-hero{position:relative;overflow:hidden;background:var(--navy);padding:74px 36px;}
.legal-hero-inner{position:relative;max-width:860px;margin:0 auto;}
.legal-hero h1{font-size:48px;line-height:1.08;letter-spacing:-.015em;color:var(--paper);margin:0 0 12px;}
.legal-updated{font-size:15px;color:var(--fog-300);}
.legal-body{background:linear-gradient(180deg,rgba(254,254,254,.8),rgba(254,254,254,.8)),url('assets/section-bg.webp');background-repeat:no-repeat,no-repeat;background-position:center top,center top;background-size:100% 100%,cover;background-attachment:scroll,fixed;padding:64px 36px 90px;
  /* The white overlay is .8, NOT a lighter value — do not reduce it.
     These pages carry an explicit WCAG 2.1 conformance claim, but the prose
     sits on a photograph, so contrast depends on whatever is behind it. Worst
     case is a black region of the image, and against #4a5160 body text that
     gives: .55 -> 2.37:1, .70 -> 3.76:1, .75 -> 4.33:1, .80 -> 4.96:1.
     .8 is the first value that clears the 4.5:1 AA floor no matter what the
     photo contains, which is what makes the claim defensible.

     .services and .about name var(--paper) inside their shorthand; this rule
     did not, and the shorthand resets background-color to transparent. If the
     photo fails to load, the overlay would composite straight onto the body's
     navy and the dark prose would be unreadable. Declared after the shorthand
     so it is not reset. */
  background-color:var(--paper);}
.prose-legal{max-width:860px;margin:0 auto;}
.prose-legal p{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0 0 16px;}
.prose-legal .legal-lede{font-size:16.5px;font-weight:600;color:var(--slate);}
.prose-legal a{color:var(--blue);word-break:break-word;}
/* Hover must darken, not lighten: --sky on this light body is 2.35:1, so the
   old hover made links *less* readable than their resting state. */
.prose-legal a:hover{color:var(--navy);}
.prose-legal strong{color:var(--slate);}
.prose-legal ul{margin:0 0 18px;padding-left:22px;}
.prose-legal ul.sub{list-style:none;padding-left:8px;}
.prose-legal li{font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0 0 8px;}
.prose-legal .legal-h2{font-size:27px;line-height:1.2;color:var(--navy);margin:48px 0 8px;padding-bottom:12px;border-bottom:2px solid var(--blue);}
.prose-legal .legal-h3{font-family:var(--body);font-size:19px;color:var(--navy);margin:28px 0 10px;}

/* footer */
.site-footer{background:var(--navy-deep);color:var(--fog-100);padding:66px 36px 30px;border-top:1px solid rgba(214,219,226,.1);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:48px;}
/* Same crop adjustment as .logo img. The old margin:-30px 0 4px -10px cancelled
   the padded file's 34.5px top and 10.2px left padding; the crop leaves only
   1.7px and 1.9px, so the compensation shrinks to 3px and -2px. 36px bottom
   keeps the gap under the wordmark at 38.3px, exactly as before. */
.footer-logo{height:35px;width:auto;display:block;margin:3px 0 36px -2px;}
.footer-blurb{font-size:15px;line-height:1.6;color:var(--fog-300);max-width:34ch;}
.footer-head{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);margin:0 0 14px;}
.footer-links{display:flex;flex-direction:column;gap:12px;}
.footer-links a{font-size:15px;color:var(--fog-100);}
.footer-links a:hover{color:var(--cyan);}
/* "connect@qsweep.com" offers no natural break opportunity, so at 22px it is
   wider than this column between 769px and ~860px — the only band where the
   3-column footer is still active but narrow (iPad portrait lands here).
   overflow-wrap only engages when it would otherwise overflow, so this is
   inert at every width where the text already fits. */
.footer-email{font-family:var(--display);font-weight:600;font-size:22px;color:var(--cyan);display:inline-block;margin-bottom:26px;overflow-wrap:anywhere;}
.social-row{display:flex;gap:12px;}
.social{width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;}
.social:hover{background:var(--sky);transform:translateY(-3px);box-shadow:0 8px 18px rgba(46,178,251,.55);}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--fog-400);}
.footer-legal{display:flex;gap:24px;}
.footer-legal a{font-size:13px;color:var(--fog-400);}
.footer-legal a:hover{color:var(--sky);}

/* ===== mobile ===== */
@media (max-width:768px){
  /* Gutter stays on .site-header here too — see the note on the desktop rule. */
  .site-header{padding:0 20px;}
  .header-inner{height:74px;}
  .logo img{height:20px;}
  .nav-desktop{display:none;}
  .hamburger{display:flex;}
  /* Transparent hit area over the hamburger: keyboard-focusable, Space toggles. */
  #nav-toggle{display:block;position:fixed;top:15px;right:20px;width:44px;height:44px;
    margin:0;opacity:0;z-index:60;cursor:pointer;-webkit-appearance:none;appearance:none;}
  #nav-toggle:focus-visible ~ .site-header .hamburger{outline:2px solid var(--sky);outline-offset:3px;}
  .nav-mobile{display:block;position:sticky;top:74px;z-index:49;max-height:0;overflow:hidden;transition:max-height .3s ease;border-bottom:1px solid rgba(214,219,226,.1);background:rgba(2,12,41,.98);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
  .nav-mobile-inner{display:flex;flex-direction:column;padding:12px 20px 20px;gap:4px;}
  .mnav-link{font-size:16px;font-weight:500;color:var(--fog-100);padding:14px 4px;border-bottom:1px solid rgba(214,219,226,.08);}
  .nav-mobile .btn{margin-top:14px;padding:14px;}
  #nav-toggle:checked ~ .nav-mobile{max-height:340px;}
  #nav-toggle:checked ~ .site-header .bar-top{transform:translateY(7px) rotate(45deg);}
  #nav-toggle:checked ~ .site-header .bar-mid{opacity:0;}
  #nav-toggle:checked ~ .site-header .bar-bot{transform:translateY(-7px) rotate(-45deg);}

  .hero-inner{padding:64px 20px 60px;}
  /* Header is 74px here, not 94px — anchor jumps overshot with the desktop value. */
  .services,.process,.about,.contact{scroll-margin-top:84px;}
  .hero h1{font-size:32px;}
  .hero-sub{font-size:16px;}
  .orb{display:none;}

  .services{padding:56px 20px 64px;}
  .process{padding:60px 20px;}
  .about{padding:60px 20px;}
  .contact{padding:60px 20px 64px;}
  .section-intro{margin-bottom:40px;}
  .section-intro--center{margin-bottom:40px;}
  .section-intro h2,.about-grid h2{font-size:26px;line-height:1.2;}
  .section-intro .lede{font-size:16px;}
  .contact-title{font-size:30px;}
  .svc-card{flex-direction:column;padding:24px;gap:18px;}
  .svc-grid{grid-template-columns:1fr;gap:14px;}
  .svc-stack{gap:14px;}
  .steps{grid-template-columns:1fr;}
  .step{border-right:none;border-bottom:1px solid var(--mist);padding:32px 26px;}
  .step:last-child{border-bottom:none;}
  .about-grid{grid-template-columns:1fr;gap:26px;}
  .contact-grid{grid-template-columns:1fr;gap:32px;}
  .form-frame{margin-top:0;}
  .form-card{padding:28px 22px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .nf{padding:56px 20px 64px;}
  .nf-inner{grid-template-columns:1fr;gap:34px;}
  .nf-code{font-size:78px;margin-bottom:14px;}
  .nf-title{font-size:29px;}
  .nf-sub{font-size:16px;margin-bottom:26px;}
  .nf-actions .btn{flex:1 1 100%;}
  .nf-panel{padding:22px 18px;}
  .legal-hero{padding:44px 20px;}
  .legal-hero h1{font-size:32px;}
  .legal-body{padding:40px 20px 64px;background-attachment:scroll;}
  .prose-legal .legal-h2{font-size:23px;}
  .site-footer{padding:56px 20px 24px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
}

@media print{
  .site-header,.nav-mobile,.hero-glow,.orb,.contact-glow,.nf-panel{display:none!important;}
  body{background:#fff;color:#111;}
  .legal-body{background:#fff;padding:0;}
}