@import url("../fonts/fonts.css");

/* tokens/fonts.css */
/* Webfonts (v4) — Plus Jakarta Sans (display) + DM Sans (body) from Google Fonts. The site's original Manrope / Space Grotesk builds stay in assets/fonts for reference. */

/* tokens/colors.css */
/* Service Net+Net — colour tokens. Dark navy surfaces (from the live site) with the v4 accent: sky blue → periwinkle, aligned on the blue end of the logo gradient. Dark UI only. */
:root{
  /* surfaces (dark navy ladder, lightest last) */
  --bg:#080C15;            /* page background */
  --bg-1:#0B1320;          /* .soft section */
  --bg-2:#0F1A2B;          /* .dark section */
  --panel:#12203A;         /* .panel, dropdowns */
  --elev:#16294A;          /* raised elements */
  --footer-bg:#05080F;
  --glass:rgba(255,255,255,.05); /* @kind color */
  --glass-2:rgba(255,255,255,.035); /* @kind color */   /* matte card fill */
  --glass-3:rgba(255,255,255,.03); /* @kind color */    /* input / segment fill */
  --nav-glass:rgba(8,15,26,.72); /* @kind color */      /* scrolled nav, blur 18px saturate 150% */
  --hud-glass:rgba(11,21,36,.85); /* @kind color */     /* floating chips / stats, blur 14px */
  --overlay-glass:rgba(7,13,23,.7); /* @kind color */   /* tags on photos, blur 8px */

  /* text (high contrast on dark) */
  --white:#F6F9FC;
  --text:#CBD8E8;
  --text-2:#9FB2C8;
  --text-lead:#AABCD1;
  --muted:#76879D;

  /* accent — sky blue primary, periwinkle secondary */
  --accent:#38BDF8;
  --accent-2:#5B8DFF;
  --accent-ink:#A5DDFB;      /* light sky text */
  --accent-kicker:#7CC4EE;   /* kicker label colour */
  --on-accent:#061226;       /* text on sky / gradient buttons */
  --glow:rgba(56,189,248,.38);
  --accent-soft:rgba(56,189,248,.10);   /* selected tab / option fill */
  --accent-soft-2:rgba(56,189,248,.14); /* checked option fill */
  --accent-line:rgba(56,189,248,.45);   /* hovered card border */
  --focus-ring:rgba(56,189,248,.16);

  /* lines */
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.055);
  --line-strong:rgba(255,255,255,.25);

  /* gradients */
  --grad-accent:linear-gradient(100deg,var(--accent),var(--accent-2)); /* @kind color */
  --grad-accent-flow:linear-gradient(100deg,var(--accent),var(--accent-2),var(--accent)); /* @kind color */
  --grad-icon:linear-gradient(135deg,rgba(56,189,248,.2),rgba(91,141,255,.16)); /* @kind color */
  --grad-card:linear-gradient(168deg,rgba(255,255,255,.058),rgba(255,255,255,.018)); /* @kind color */
  --grad-soft:linear-gradient(180deg,#0B1320,#0C1729); /* @kind color */
  --grad-dark:linear-gradient(180deg,#0A111F,#0D1A2E); /* @kind color */
  --grad-cta:linear-gradient(120deg,#0C1D38,#11264C); /* @kind color */
  --grad-result:linear-gradient(160deg,#0C2140,#0A1830); /* @kind color */
  --grad-phero:linear-gradient(180deg,#070D17,#0B1A30); /* @kind color */
  --grad-ambient:radial-gradient(60% 44% at 82% -2%,rgba(56,189,248,.13),transparent 60%),radial-gradient(56% 44% at 4% 6%,rgba(91,141,255,.13),transparent 60%),radial-gradient(52% 40% at 50% 110%,rgba(56,189,248,.07),transparent 60%),linear-gradient(180deg,#0A1120,#070C15 55%,#060A12 100%); /* @kind color */
  --grad-photo-fade:linear-gradient(180deg,transparent 12%,rgba(7,11,20,.92)); /* @kind color */

  /* legacy tile gradient (assets/logo/original/) — the current logo is a bare broom, see readme v5 */
  --logo-grad-1:#4FD1FF; /* @kind color */--logo-grad-2:#38BDF8; /* @kind color */--logo-grad-3:#5B8DFF; /* @kind color */

  /* semantic aliases */
  --surface-page:var(--bg);
  --surface-section-soft:var(--bg-1);
  --surface-section-dark:var(--bg-2);
  --surface-card:var(--glass-2);
  --surface-panel:var(--panel);
  --surface-input:rgba(255,255,255,.04);
  --text-heading:var(--white);
  --text-body:var(--text);
  --text-secondary:var(--text-2);
  --text-muted:var(--muted);
  --text-link:var(--accent);
  --border-default:var(--line);
  --border-subtle:var(--line-2);
  --border-hover:var(--accent-line);
  --border-focus:var(--accent);
  --state-success:var(--accent);
  --selection-bg:var(--accent);--selection-fg:#061226;
  --scrollbar-thumb:#1C2D45;--scrollbar-thumb-hover:#274061;--scrollbar-track:#070D17;
}

/* tokens/typography.css */
/* Service Net+Net — type tokens (v5). Display = Plus Jakarta Sans (headings, labels, buttons, numbers). Body = DM Sans. h1/h2 are uppercase (tokens/base.css) → slightly smaller sizes, positive tracking. */
:root{
  --display:"Plus Jakarta Sans",system-ui,sans-serif; /* @kind font */
  --body:"DM Sans",system-ui,sans-serif; /* @kind font */
  --font-display:var(--display); /* @kind font */
  --font-body:var(--body); /* @kind font */

  /* fluid sizes (exact clamp() values from the site) */
  --fs-display:clamp(2.1rem,4.8vw,3.9rem); /* @kind font */        /* .display (page heroes) */
  --fs-hero:clamp(2rem,3.7vw,3.4rem); /* @kind font */       /* .hero-copy .display */
  --fs-h1:clamp(1.9rem,4vw,3.1rem); /* @kind font */
  --fs-h2:clamp(1.55rem,2.7vw,2.4rem); /* @kind font */
  --fs-h3:clamp(1.3rem,2vw,1.8rem); /* @kind font */
  --fs-h3-card:1.3rem; /* @kind font */                        /* .scard h3 */
  --fs-h3-media:1.5rem; /* @kind font */                       /* .mcard h3 */
  --fs-h3-step:1.2rem; /* @kind font */
  --fs-lead:clamp(1.08rem,1.45vw,1.36rem); /* @kind font */
  --fs-body:clamp(16px,1.05vw,18px); /* @kind font */
  --fs-body-sm:.97rem; /* @kind font */
  --fs-body-xs:.95rem; /* @kind font */
  --fs-btn:.98rem; /* @kind font */
  --fs-btn-lg:1.05rem; /* @kind font */
  --fs-nav:.93rem; /* @kind font */
  --fs-label:.85rem; /* @kind font */                          /* form labels, certs, chips */
  --fs-caption:.82rem; /* @kind font */                        /* crumb, muted notes */
  --fs-micro:.78rem; /* @kind font */                          /* tags, dropdown sublines */
  --fs-kicker:.72rem; /* @kind font */
  --fs-kicker-sm:.7rem; /* @kind font */                       /* estimator result label */
  --fs-stat:clamp(2.6rem,5vw,4rem); /* @kind font */
  --fs-stat-sm:1.6rem; /* @kind font */                        /* float-badge number */
  --fs-amount:clamp(2.1rem,4.4vw,3.1rem); /* @kind font */     /* estimator amount */
  --fs-marquee:clamp(1.3rem,2.4vw,2rem); /* @kind font */
  --fs-mobile-menu:1.5rem; /* @kind font */

  /* weights */
  --fw-regular:400; /* @kind font */--fw-medium:500; /* @kind font */--fw-semibold:600; /* @kind font */--fw-bold:700; /* @kind font */--fw-black:800; /* @kind font */

  /* leading */
  --lh-heading:1.12; /* @kind other */--lh-hero:1.1; /* @kind other */--lh-tight:1; /* @kind other */--lh-body:1.65; /* @kind other */--lh-compact:1.45; /* @kind other */

  /* tracking */
  --ls-display:.01em; /* @kind other */--ls-h2:.012em; /* @kind other */--ls-heading:-.02em; /* @kind other */--ls-hero:.008em; /* @kind other */
  --ls-kicker:.18em; /* @kind other */--ls-eyebrow:.16em; /* @kind other */--ls-footer-h:.14em; /* @kind other */--ls-tag:.12em; /* @kind other */--ls-intro:.28em; /* @kind other */

  /* measures */
  --measure-lead:60ch; /* @kind other */--measure-prose:72ch; /* @kind other */--measure-body:80ch; /* @kind other */--measure-h:16ch; /* @kind other */--measure-h-wide:20ch; /* @kind other */
}

/* tokens/spacing.css */
/* Service Net+Net — layout & spacing tokens (exact values from the site). */
:root{
  --maxw:1240px; /* @kind spacing */
  --gut:clamp(20px,5vw,72px); /* @kind spacing */                 /* container inline padding */
  --section:clamp(84px,9.5vw,150px); /* @kind spacing */          /* .section block padding */
  --section-tight:clamp(46px,6vw,84px); /* @kind spacing */       /* .tight */
  --phero-pad:168px 0 76px; /* @kind spacing */                   /* page hero */
  --hero-pad-top:150px; /* @kind spacing */--hero-pad-bottom:96px; /* @kind spacing */

  /* scale */
  --sp-1:4px; /* @kind spacing */--sp-2:7px; /* @kind spacing */--sp-3:10px; /* @kind spacing */--sp-4:14px; /* @kind spacing */--sp-5:18px; /* @kind spacing */--sp-6:22px; /* @kind spacing */--sp-7:28px; /* @kind spacing */--sp-8:36px; /* @kind spacing */--sp-9:48px; /* @kind spacing */--sp-10:64px; /* @kind spacing */--sp-11:80px; /* @kind spacing */

  /* semantic */
  --gap-cards:22px; /* @kind spacing */--gap-stats:30px; /* @kind spacing */--gap-form:18px; /* @kind spacing */--gap-field:7px; /* @kind spacing */--gap-chips:10px; /* @kind spacing */--gap-detail:10px; /* @kind spacing */--gap-steps:26px; /* @kind spacing */--gap-split:clamp(28px,5vw,72px); /* @kind spacing */--gap-hero:clamp(30px,5vw,64px); /* @kind spacing */--gap-marquee:56px; /* @kind spacing */--gap-footer:40px; /* @kind spacing */
  --pad-card:30px; /* @kind spacing */--pad-quote:32px; /* @kind spacing */--pad-guarantee:20px; /* @kind spacing */--pad-detail:20px 22px; /* @kind spacing */--pad-media-body:26px; /* @kind spacing */--pad-panel:clamp(26px,4vw,46px); /* @kind spacing */--pad-est:clamp(24px,3vw,38px); /* @kind spacing */--pad-cta:clamp(40px,6vw,72px); /* @kind spacing */--pad-cert-badge:26px 14px; /* @kind spacing */
  --pad-btn:.95em 1.6em; /* @kind spacing */--pad-btn-lg:1.08em 2em; /* @kind spacing */--pad-chip:.5em 1.1em; /* @kind spacing */--pad-input:.85em 1em; /* @kind spacing */--pad-nav-link:.55em .85em; /* @kind spacing */--pad-nav:15px; /* @kind spacing */--pad-nav-scrolled:10px; /* @kind spacing */--pad-drop:12px; /* @kind spacing */--pad-summary:24px 4px; /* @kind spacing */
  --mt-s:14px; /* @kind spacing */--mt-m:28px; /* @kind spacing */--mt-l:48px; /* @kind spacing */

  /* fixed sizes */
  --size-mark:34px; /* @kind spacing */--size-icon-box:54px; /* @kind spacing */--size-icon-box-sm:46px; /* @kind spacing */--size-icon-box-xs:42px; /* @kind spacing */--size-step:52px; /* @kind spacing */--size-chk:26px; /* @kind spacing */--size-avatar:46px; /* @kind spacing */--size-ring:60px; /* @kind spacing */--size-dept:64px; /* @kind spacing */--size-dept-sm:40px; /* @kind spacing */--size-to-top:46px; /* @kind spacing */--size-pm:30px; /* @kind spacing */--size-hud-corner:26px; /* @kind spacing */--size-ba-handle:46px; /* @kind spacing */
  --icon-sm:14px; /* @kind spacing */--icon-md:16px; /* @kind spacing */--icon-lg:20px; /* @kind spacing */--icon-xl:24px; /* @kind spacing */--icon-card:26px; /* @kind spacing */

  /* radii — "corporate refinement": square-ish corners */
  --rad:5px; /* @kind radius */--rad-lg:7px; /* @kind radius */--rad-sm:3px; /* @kind radius */
  --rad-btn:4px; /* @kind radius */--rad-control:4px; /* @kind radius */--rad-card:6px; /* @kind radius */--rad-pill:999px; /* @kind radius */--rad-logo:26px; /* @kind radius */

  /* z-index */
  --z-nav:80; /* @kind other */--z-mobile-menu:85; /* @kind other */--z-burger:90; /* @kind other */--z-progress:95; /* @kind other */--z-intro:120; /* @kind other */--z-fab:70; /* @kind other */--z-to-top:69; /* @kind other */--z-sticky-tools:45; /* @kind other */
}

/* tokens/effects.css */
/* Service Net+Net — shadows, rings, blur, motion. */
:root{
  --shadow:0 30px 70px -34px rgba(0,0,0,.8); /* @kind shadow */               /* panels, dropdowns, floating badges */
  --shadow-card-hover:0 30px 60px -32px rgba(0,0,0,.85); /* @kind shadow */
  --shadow-hero-photo:0 42px 84px -46px rgba(0,0,0,.85); /* @kind shadow */
  --shadow-btn-primary:0 0 0 1px rgba(56,189,248,.35),0 16px 36px -20px var(--glow); /* @kind shadow */
  --shadow-btn-primary-hover:0 0 0 1px rgba(56,189,248,.5),0 24px 50px -18px var(--glow); /* @kind shadow */
  --shadow-outline-hover:0 0 26px -10px var(--glow); /* @kind shadow */
  --shadow-chip-hover:0 0 22px -10px var(--glow); /* @kind shadow */
  --shadow-chk:0 6px 16px -6px var(--glow); /* @kind shadow */
  --shadow-skip:0 8px 24px rgba(0,0,0,.35); /* @kind shadow */
  --inset-sheen:inset 0 1px 0 rgba(255,255,255,.05); /* @kind shadow */
  --ring-focus:0 0 0 3px var(--focus-ring); /* @kind shadow */
  --ring-checked:0 0 0 3px rgba(56,189,248,.14); /* @kind shadow */
  --glow-text:drop-shadow(0 0 20px rgba(56,189,248,.3)); /* @kind other */   /* stat numbers */

  --blur-nav:blur(18px) saturate(150%); /* @kind other */
  --blur-hud:blur(14px); /* @kind other */
  --blur-drop:blur(22px); /* @kind other */
  --blur-tag:blur(8px); /* @kind other */
  --blur-card:blur(4px); /* @kind other */
  --blur-glass:blur(6px); /* @kind other */
  --blur-mesh:blur(50px); /* @kind other */

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); /* @kind other */            /* hovers, nav, buttons */
  --ease-reveal:cubic-bezier(.16,.74,.24,1); /* @kind other */  /* scroll reveal */
  --dur-fast:.2s; /* @kind other */--dur-base:.3s; /* @kind other */--dur-hover:.35s; /* @kind other */--dur-card:.5s; /* @kind other */--dur-reveal:1s; /* @kind other */--dur-reveal-transform:1.05s; /* @kind other */
  --lift-btn:-3px; /* @kind other */--lift-card:-7px; /* @kind other */--lift-chip:-2px; /* @kind other */--lift-guarantee:-5px; /* @kind other */--shift-row:4px; /* @kind other */
  --reveal-from:translateY(50px) scale(.975); /* @kind other */
  --marquee-duration:34s; /* @kind other */--aurora-duration:22s; /* @kind other */--kenburns-duration:18s; /* @kind other */--floaty-duration:6s; /* @kind other */--gradflow-duration:7s; /* @kind color */--counter-duration:1600ms; /* @kind other */--intro-hold:1600ms; /* @kind other */
  --grid-size:72px; /* @kind spacing */--grid-size-sm:64px; /* @kind spacing */
}

/* tokens/base.css */
/* Service Net+Net — global base (mirrors the site's body / heading / link defaults). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--bg);line-height:var(--lh-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--white)}
h1,h2,h3,h4{font-family:var(--display);font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0;color:var(--white)}
h1,h2{text-transform:uppercase;font-weight:var(--fw-bold)}
p{margin:0 0 1em}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
*{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px;border:2px solid var(--scrollbar-track)}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
@keyframes snn-scrollx{to{transform:translateX(-50%)}}
@keyframes snn-gradflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes snn-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes snn-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes snn-hudpulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes snn-navdrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes snn-tabin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes snn-aurora{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(-2%,1.5%,0) scale(1.04)}66%{transform:translate3d(1.5%,-1%,0) scale(1.02)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* page */
html{scroll-behavior:smooth}body{overflow-x:hidden;position:relative}body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--grad-ambient);animation:snn-aurora var(--aurora-duration) ease-in-out infinite}body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.3;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);-webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000,transparent 75%);mask-image:radial-gradient(120% 80% at 50% 0,#000,transparent 75%)}#root:empty{min-height:100vh}