/* Self-hosted webfonts, generated from the Google Fonts css2 API.
   Only the faces the site actually matches are shipped; the remaining
   weights stay browser-synthesised, exactly as they were when the fonts
   were served by Google. */
/* Bebas Neue - latin-ext 400 */
@font-face{
  font-family:'Bebas Neue';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/bebas-neue-v16-latin-ext-400.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;
}
/* Bebas Neue - latin 400 */
@font-face{
  font-family:'Bebas Neue';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/bebas-neue-v16-latin-400.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;
}
/* DM Mono - latin-ext 400 */
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/dm-mono-v16-latin-ext-400.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;
}
/* DM Mono - latin 400 */
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/dm-mono-v16-latin-400.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;
}
/* DM Mono - latin-ext 500 */
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/dm-mono-v16-latin-ext-500.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;
}
/* DM Mono - latin 500 */
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/dm-mono-v16-latin-500.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;
}
/* Barlow Condensed - latin-ext 400 */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/barlow-condensed-v13-latin-ext-400.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;
}
/* Barlow Condensed - latin 400 */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/barlow-condensed-v13-latin-400.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;
}
/* Barlow Condensed - latin-ext 500 */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/barlow-condensed-v13-latin-ext-500.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;
}
/* Barlow Condensed - latin 500 */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/barlow-condensed-v13-latin-500.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;
}
/* Barlow Condensed - latin-ext 600 */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/fonts/barlow-condensed-v13-latin-ext-600.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;
}
/* Barlow Condensed - latin 600 */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/fonts/barlow-condensed-v13-latin-600.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;
}
/* Barlow Condensed - latin-ext 700 */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(/fonts/barlow-condensed-v13-latin-ext-700.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;
}
/* Barlow Condensed - latin 700 */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(/fonts/barlow-condensed-v13-latin-700.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;
}
/* Archivo - latin-ext 900 */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url(/fonts/archivo-v25-latin-ext-900.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;
}
/* Archivo - latin 900 */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url(/fonts/archivo-v25-latin-900.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;
}
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9998;
  background:var(--panel);border-top:1px solid var(--border2);
  padding:20px 52px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  transform:translateY(100%);
  transition:transform 0.5s cubic-bezier(0.175,0.885,0.32,1.1);
}
.cookie-banner.show{transform:translateY(0);}
.cookie-text{
  font-size:var(--text-body-sm);font-weight:400;color:var(--text);
  line-height:var(--leading-body);max-width:64ch;
}
.cookie-text a,
main p a:not(.btn),
main li a:not(.btn),
.section-sub a,
.faq-a a,
.card-body a,
.about-story a{
  color:var(--cyan);
  text-decoration:underline !important;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.cookie-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-accept{
  font-size:var(--text-sm);font-weight:600;
  letter-spacing:0.06em;line-height:var(--leading-snug);text-transform:uppercase;
  background:var(--cyan);color:var(--black);border:none;
  padding:12px 22px;min-height:48px;cursor:pointer;
}
.cookie-decline{
  font-size:var(--text-sm);font-weight:600;
  letter-spacing:0.06em;line-height:var(--leading-snug);text-transform:uppercase;
  background:transparent;color:var(--text);
  border:1px solid var(--border2);padding:12px 22px;min-height:48px;cursor:pointer;
}

.nav-hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;
  background:none;border:none;padding:4px;min-width:44px;min-height:44px;
}
.nav-hamburger span{
  display:block;width:24px;height:2px;
  background:var(--text);transition:all 0.3s;
}
.nav-mobile{
  display:none;
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:499;
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  background:rgba(2,5,8,0.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  flex-direction:column;padding:8px 0;
}
.nav-mobile.open{display:flex;}
.nav-mobile a{
  font-size:var(--text-body-sm);font-weight:400;
  letter-spacing:0.02em;line-height:var(--leading-snug);
  color:var(--text);text-decoration:none;
  padding:15px 32px;border:none;cursor:pointer;
  transition:color 0.2s;border-bottom:1px solid var(--border);
}
.nav-mobile a:last-child{border-bottom:none;}
.nav-mobile a:hover,.nav-mobile a.active{color:var(--cyan);}

.hp-field { position:absolute; left:-9999px; opacity:0; pointer-events:none; }

.skip-link{
  position:absolute;top:-100%;left:16px;z-index:10000;
  background:var(--cyan);color:var(--black);
  padding:12px 24px;
  font-family:'DM Mono',monospace;font-size:var(--text-sm);
  letter-spacing:0.12em;line-height:var(--leading-label);text-transform:uppercase;
  text-decoration:none;
  transition:top 0.2s;
}
.skip-link:focus{top:8px;}

*:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

:root {
  --black:    #020508;
  --surface:  #060c12;
  --panel:    #0a1520;
  --panel2:   #0e1c28;
  --border:   #152535;
  --border2:  #1e3347;
  --cyan:     #00d4ff;
  --cyan-dim: rgba(0,212,255,0.10);
  --cyan-glow:rgba(0,212,255,0.25);
  --gold:     #f0a500;
  --gold-dim: rgba(240,165,0,0.10);
  --red:      #ff3333;
  --red-dim:  rgba(255,51,51,0.08);
  --green:    #00e887;
  --text:     #c6dae6;
  --muted:    #7c9eb4;
  --muted2:   #8ba8bc;
  --white:    #edf6ff;

  --text-2xs:  0.75rem;
  --text-xs:   0.8125rem;
  --text-help: 0.875rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.125rem;
  --text-xl:   1.1875rem;

  --text-label:    clamp(0.75rem, 0.90625rem - 0.3125vw, 0.8125rem);
  --text-body:     clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --text-body-sm:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-cta:      clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-article:  clamp(1.125rem, 1.06rem + 0.2vw, 1.1875rem);
  --text-lead:     clamp(1.1875rem, 1.09rem + 0.3vw, 1.3125rem);

  --leading-tight:   1.05;
  --leading-heading: 1.15;
  --leading-snug:    1.45;
  --leading-label:   1.4;
  --leading-body:    1.65;
  --leading-article: 1.72;

  --tracking-label:      0.14em;
  --tracking-label-wide: 0.16em;

  /* Prose is capped to a reading measure. Without these, body copy fills its
     container - which on a 1920px screen meant ~200 characters per line. Only
     the text inherits the cap; headings, grids, cards and section chrome stay
     full-bleed. Set to `none` to let body copy fill its container again. */
  --measure-body:    68ch;
  --measure-article: 65ch;

  /* One content column for the whole site. Every section keeps its full-bleed
     background and border, but the content inside stops at --content-max and
     centres, so all sections share a left and right edge. Below
     1600 + 2*52 = 1704px this resolves to the plain 52px gutter, i.e. no
     change at all on laptops - it only engages on wide monitors. */
  --content-max: 1600px;
  --gutter-x:    52px;

  --h1: clamp(2.75rem, 5vw, 4.75rem);
  --h2: clamp(2rem, 3.2vw, 2.75rem);
  --h3: clamp(1.35rem, 2vw, 1.75rem);

  --section-gap: clamp(4rem, 8vw, 7rem);
  /* First-paint default; app.js observes the real nav and updates it. */
  --nav-h: 69px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
img,svg{max-width:100%;height:auto;}

/* Headings never inherit the body measure or the body leading. */
h1,h2,h3,h4,h5,h6{line-height:var(--leading-heading);text-wrap:balance;}
h1{font-size:var(--h1);}
h2{font-size:var(--h2);}
h3{font-size:var(--h3);}
h4{font-size:var(--text-lg);}
p{text-wrap:pretty;}

body{
  background:var(--black);
  color:var(--text);
  font-family:'Barlow Condensed',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:var(--text-body);
  line-height:var(--leading-body);
  min-height:100vh;
  overflow-x:hidden;
  cursor:url('cursor.svg') 16 16, crosshair;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* Reserve space for the fixed cookie banner so it never covers page content.
     --cookie-h is set from the banner's real height by app.js, and returns to
     0 when consent is given. Deliberately not transitioned - animating padding
     on a full-height body relayouts the whole page every frame. */
  padding-bottom:var(--cookie-h,0px);
}
.btn,.nav-cta,.form-submit,button,[role="button"],a{
  cursor:url('cursor-pointer.svg') 16 16, pointer;
}

body::before{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.012) 2px,rgba(0,0,0,0.012) 4px);
  pointer-events:none;z-index:9000;
}

.page{display:none;animation:pageIn 0.45s ease forwards;}
.page.active{display:block;}
@keyframes pageIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

body > nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding:14px 52px;min-height:var(--nav-h);
  border-bottom:1px solid var(--border);
  background:rgba(2,5,8,0.92);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.nav-logo{
  font-family:'Archivo',sans-serif;font-size:24px;font-weight:900;
  letter-spacing:-0.03em;line-height:1.1;color:var(--white);cursor:pointer;
  display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;
}
.logo-word{display:inline-flex;align-items:baseline;}
.logo-dot{color:var(--cyan);}
.nav-links{
  display:flex;gap:6px;list-style:none;
}
/* Matches .footer-links: the body face at 400, no boxed hover - the nav and
   the footer read as one system rather than two different link treatments. */
.nav-links a{
  font-size:var(--text-body-sm);font-weight:400;
  letter-spacing:0.02em;line-height:var(--leading-snug);
  color:var(--text);text-decoration:none;white-space:nowrap;
  padding:10px 10px;
  transition:color 0.2s;cursor:pointer;
}
.nav-links a:hover,.nav-links a.active{color:var(--cyan);}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-cta{
  /* Same face as the nav links, a touch heavier so it still reads as a button. */
  font-size:var(--text-body-sm);font-weight:600;
  letter-spacing:0.02em;line-height:var(--leading-snug);
  color:var(--black);background:var(--cyan);
  border:none;padding:11px 18px;min-height:44px;cursor:crosshair;
  transition:background 0.2s,color 0.2s,transform 0.2s;white-space:nowrap;
}
.nav-cta:hover{background:var(--white);transform:translateY(-1px);}

.section{padding:var(--section-gap) 52px;}
.section-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);
  text-transform:uppercase;color:var(--cyan);
  margin-bottom:20px;
}
.section-tag::before{content:'';width:20px;height:1px;background:var(--cyan);}
.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:var(--h1);
  letter-spacing:0.04em;color:var(--white);
  line-height:1;margin-bottom:20px;
}
.section-sub{
  font-size:var(--text-body);font-weight:400;
  letter-spacing:0.02em;line-height:var(--leading-body);
  color:var(--text);max-width:var(--measure-body);
}
.divider{width:60px;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(0,212,255,0.15));margin:24px 0;box-shadow:0 0 8px rgba(0,212,255,0.18);}

.card{
  background:var(--surface);padding:44px 36px;
  position:relative;overflow:hidden;
  transition:background 0.3s,border-color 0.25s,box-shadow 0.25s;
}
.card:hover{background:var(--panel);box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 0 1px rgba(0,212,255,0.1);}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s ease;
}
.card:hover::before{transform:scaleX(1);}
.card.gold::before{background:var(--gold);}
.card-num{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);
  color:var(--muted2);margin-bottom:20px;
}
.card-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.25rem, 1.1rem + 0.6vw, 1.4375rem);
  font-weight:700;letter-spacing:0.05em;line-height:1.2;
  text-transform:uppercase;color:var(--white);margin-bottom:12px;
}
.card-body{font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);color:var(--text);letter-spacing:0.01em;max-width:var(--measure-body);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  /* Buttons use the same face as the nav and footer; DM Mono stays for
     labels, kickers and meta lines, which is where it reads as a device. */
  font-size:var(--text-cta);font-weight:600;
  letter-spacing:0.06em;line-height:var(--leading-snug);text-transform:uppercase;
  min-height:48px;
  cursor:crosshair;border:none;text-decoration:none;
  transition:background 0.2s,color 0.2s,border-color 0.2s,transform 0.2s,box-shadow 0.2s;
}
.btn-cyan{color:var(--black);background:var(--cyan);padding:14px 32px;box-shadow:0 2px 14px rgba(0,212,255,0.20);}
.btn-cyan:hover{background:var(--white);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,212,255,0.42);}
.btn-outline{color:var(--cyan);background:transparent;border:1px solid var(--cyan);padding:14px 32px;}
.btn-outline:hover{background:var(--cyan-dim);transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,212,255,0.18);}
.btn-ghost{color:var(--text);background:transparent;border:1px solid rgba(0,212,255,0.28);padding:14px 32px;}
.btn-ghost:hover{border-color:var(--cyan);color:var(--white);background:var(--cyan-dim);transform:translateY(-2px);}
.btn-arrow::after{content:'->';margin-left:4px;display:inline-block;transition:transform 0.2s;}
.btn-arrow:hover::after{transform:translateX(4px);}

/* The metrics bar sits in flow at the foot of the hero rather than pinned
   absolutely, so it can never be overlapped when the hero copy or the metric
   labels grow (larger type, longer text, or user-enlarged text). */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;
  padding:130px 52px 0;overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 60% 50%,black 20%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 90% at 60% 50%,black 20%,transparent 100%);
  opacity:0.35;
}
.hero-orb{
  position:absolute;right:-5%;top:50%;transform:translateY(-50%);
  width:750px;height:750px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,0.07) 0%,transparent 70%);
  animation:orbPulse 5s ease infinite;
}
@keyframes orbPulse{0%,100%{transform:translateY(-50%) scale(1);}50%{transform:translateY(-50%) scale(1.06);}}

.hero-content{position:relative;z-index:2;max-width:800px;margin-block:auto;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'DM Mono',monospace;font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);line-height:var(--leading-label);
  text-transform:uppercase;color:var(--cyan);
  margin-bottom:28px;
}
.hero-eyebrow::before{content:'';width:22px;height:1px;background:var(--cyan);}
.hero-h1{
  font-family:'Bebas Neue',sans-serif;
  /* Sized so the longest line ("Cyber Security Services") fills the 800px
     hero column without wrapping past the intended two-line break. */
  font-size:clamp(56px,8.6vw,88px);
  line-height:0.95;letter-spacing:0.02em;color:var(--white);
  margin-bottom:8px;
}
.hero-h1 .outline{
  color:transparent;
  -webkit-text-stroke:1px var(--cyan);
  display:block;
  text-shadow:
    0 0 40px rgba(0,212,255,0.15),
    0 0 80px rgba(0,212,255,0.06);
}
.hero-rule{width:80px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);margin:24px 0;}
.hero-p{
  font-size:var(--text-lead);font-weight:400;letter-spacing:0.02em;
  line-height:var(--leading-body);color:var(--text);max-width:var(--measure-body);margin-bottom:44px;
}
.hero-p strong{color:var(--white);font-weight:600;}
.hero-btns{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}

.metrics-bar{
  position:relative;z-index:2;
  margin:64px -52px 0;
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(6,12,18,0.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.metric{
  padding:20px 32px;border-right:1px solid var(--border);
}
.metric:last-child{border-right:none;}
.metric-val{
  font-family:'Bebas Neue',sans-serif;font-size:40px;
  letter-spacing:0.06em;color:var(--white);line-height:1;margin-bottom:5px;
}
.metric-val span{color:var(--cyan);}
.metric-lbl{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label);line-height:var(--leading-label);
  text-transform:uppercase;color:var(--muted2);
}

.trust-bar{
  padding:36px 52px;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:48px;
  background:var(--surface);overflow:hidden;
}
.trust-label{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--muted2);white-space:nowrap;flex-shrink:0;
}
.trust-logos{
  display:flex;align-items:center;gap:48px;flex:1;
  justify-content:space-between;
}
.trust-logo{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label);line-height:var(--leading-label);
  text-transform:uppercase;color:var(--text);
  border:1px solid var(--border);
  padding:8px 14px;white-space:nowrap;flex-shrink:0;
  transition:border-color 0.3s,color 0.3s;
}
.trust-logo:hover{border-color:rgba(0,212,255,0.25);color:var(--white);}

.intro-section{
  padding:100px 52px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  align-items:center;border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.intro-right{
  display:flex;flex-direction:column;gap:24px;
}
.intro-stat{
  display:flex;flex-direction:column;
  padding:24px;border:1px solid var(--border);
  background:var(--panel);
  border-left:3px solid var(--cyan);
}
.intro-stat-val{
  font-family:'Bebas Neue',sans-serif;font-size:44px;
  color:var(--white);line-height:1;
}
.intro-stat-val span{color:var(--cyan);}
.intro-stat-lbl{
  font-family:'DM Mono',monospace;font-size:var(--text-xs);
  letter-spacing:0.06em;line-height:var(--leading-snug);color:var(--text);margin-top:8px;
}
.intro-stat-src{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:0.05em;line-height:var(--leading-label);color:var(--muted2);margin-top:10px;
}
.intro-stat-src a{
  font:inherit;letter-spacing:inherit;line-height:inherit;
  color:var(--muted2);text-decoration:underline;text-decoration-color:rgba(0,212,255,0.45);
  text-underline-offset:3px;
}
.intro-stat-src a:hover,.intro-stat-src a:focus-visible{color:var(--cyan);}

.sol-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);
  margin-top:52px;
}

.sol-grid.sol-grid-core{grid-template-columns:repeat(3,1fr);}
@media (min-width:1025px){
  .sol-grid.sol-grid-core > .sol-card:last-child:nth-child(3n + 1){
    grid-column:1 / -1;
  }
}
.sol-card{
  background:var(--surface);padding:40px 32px;
  position:relative;overflow:hidden;cursor:pointer;
  transition:background 0.3s;
}
.sol-card:hover{background:var(--panel);}
.sol-card::after{
  content:'->';position:absolute;bottom:28px;right:28px;
  font-family:'DM Mono',monospace;font-size:14px;
  color:var(--cyan);opacity:0;transform:translateX(-8px);
  transition:opacity 0.3s,transform 0.3s;
}
.sol-card:hover::after{opacity:1;transform:translateX(0);}
.sol-icon{
  width:40px;height:40px;border:1px solid var(--border2);
  background:var(--cyan-dim);margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.sol-card > *:not(.sol-num) { position:relative;z-index:1; }
.sol-category{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label);line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--cyan);margin-bottom:8px;
}
.sol-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.25rem, 1.1rem + 0.6vw, 1.4375rem);
  font-weight:700;letter-spacing:0.05em;line-height:1.2;
  text-transform:uppercase;color:var(--white);margin-bottom:10px;
}
.sol-desc{font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);color:var(--text);max-width:var(--measure-body);}

.sol-solution{
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;
  min-height:520px;
}
.sol-solution:last-child{border-bottom:none;}
.sol-solution-info{
  padding:72px 52px;
  border-right:1px solid var(--border);
}
.sol-solution-detail{
  padding:72px 52px;
  background:var(--surface);
}
.sol-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);
  text-transform:uppercase;
  border:1px solid var(--border2);padding:6px 12px;
  color:var(--cyan);margin-bottom:20px;
}
.sol-h2{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,4vw,58px);
  letter-spacing:0.04em;color:var(--white);line-height:1;
  margin-bottom:16px;
}
.sol-p{font-size:var(--text-body);font-weight:400;line-height:var(--leading-body);color:var(--text);max-width:var(--measure-body);margin-bottom:28px;}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;max-width:var(--measure-body);}
.feature-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);letter-spacing:0.01em;color:var(--text);
}
.feature-list li::before{
  content:'+';width:10px;flex:0 0 10px;
  color:var(--cyan);font-family:'DM Mono',monospace;
  font-size:14px;font-weight:500;line-height:var(--leading-body);
}
.detail-box{
  background:var(--panel);border:1px solid var(--border);
  border-left:2px solid rgba(0,212,255,0.25);
  padding:20px 24px;margin-bottom:12px;
  transition:border-left-color 0.25s;
}
.detail-box:hover { border-left-color:var(--cyan); }
.detail-box-label{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label);line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;
}
.detail-box-val{
  font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);color:var(--text);
}
.compliance-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.chip{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:0.1em;line-height:var(--leading-label);text-transform:uppercase;
  border:1px solid var(--border2);padding:7px 12px;color:var(--text);
  transition:background 0.2s,color 0.2s,border-color 0.2s,transform 0.2s;
}
.chip:hover{border-color:var(--cyan);color:var(--cyan);}
.chip.active{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}

.fw-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
}
.fw-card{
  background:var(--surface);padding:32px 28px;
  display:flex;flex-direction:column;
  border-top:2px solid transparent;
  transition:background 0.25s,border-color 0.25s;
}
.fw-card:hover{background:var(--panel);border-top-color:var(--cyan);}
.fw-tag{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label);line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--muted2);margin-bottom:12px;
}
.fw-name{
  font-family:'Bebas Neue',sans-serif;font-size:30px;
  letter-spacing:0.04em;color:var(--white);
  line-height:1.05;margin-bottom:12px;
}
.fw-desc{
  font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);
  color:var(--text);margin-bottom:22px;flex:1;
}
.fw-meter{display:flex;align-items:center;gap:6px;}
.fw-pip{width:22px;height:4px;background:var(--border2);}
.fw-pip.on{background:var(--cyan);box-shadow:0 0 6px rgba(0,212,255,0.4);}
.fw-pip.on.gold{background:var(--gold);box-shadow:0 0 6px rgba(240,165,0,0.4);}
.fw-cov{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label);line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--cyan);margin-left:8px;
}
.fw-cov.gold{color:var(--gold);}
@media (max-width:900px){ .fw-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .fw-grid{grid-template-columns:1fr;} }

.bg-dots{position:relative;overflow:hidden;}
.bg-dots::before{
  content:'';position:absolute;inset:0;
  background:url('bg-dots.svg') center center / cover no-repeat;
  opacity:0.5;pointer-events:none;z-index:0;
}
.bg-dots > *{position:relative;z-index:1;}

.sol-acc-head{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:64px minmax(0,1fr) 44px; align-items:center;
  gap:24px; padding:30px 52px;
  transition:background 0.2s;
}
.sol-acc-head:hover{ background:var(--surface); }
.sol-acc-num{
  font-family:'DM Mono',monospace; font-size:var(--text-sm); letter-spacing:0.16em;
  line-height:var(--leading-label); color:var(--cyan);
}
.sol-acc-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.25rem, 1.1rem + 0.6vw, 1.4375rem); font-weight:700;
  letter-spacing:0.04em; line-height:1.2; text-transform:uppercase; color:var(--white);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.sol-acc-teaser{
  display:block; margin-top:8px;
  font-size:var(--text-body-sm); font-weight:400; line-height:var(--leading-body); color:var(--text);
  max-width:var(--measure-body);
}
@media (max-width:1024px){
  .sol-acc-head{ grid-template-columns:40px minmax(0,1fr) 40px; gap:16px; padding:24px; }
  .sol-acc-go{width:36px;min-height:28px;font-size:12px;}
}
@media (max-width:600px){
  .sol-acc-head{ padding:20px 16px; gap:12px; }
  .sol-acc-go{width:34px;min-height:26px;}
}

.faq-list{max-width:900px;margin:44px 0 0;border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  list-style:none;cursor:pointer;display:block;
  padding:22px 48px 22px 2px;position:relative;
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);font-weight:600;
  letter-spacing:0.02em;line-height:1.35;color:var(--white);
  transition:color 0.2s;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{color:var(--cyan);}
.faq-q::after{
  content:'+';position:absolute;right:10px;top:50%;
  transform:translateY(-50%);
  font-family:'DM Mono',monospace;font-size:22px;font-weight:400;
  color:var(--cyan);line-height:1;
}
.faq-item[open] .faq-q::after{content:'-';}
.faq-item[open] .faq-q{color:var(--cyan);}
.faq-a{padding:0 48px 26px 2px;}
.faq-a p{font-size:var(--text-body);font-weight:400;line-height:var(--leading-article);color:var(--text);max-width:var(--measure-article);}

.cap-tags{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  max-width:1080px;margin:0 auto;
}
.cap-tags .chip{
  text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;
  min-height:40px;padding:9px 16px;font-size:var(--text-label);
}
.cap-tags .chip:hover{
  border-color:var(--cyan);color:var(--cyan);
  background:var(--cyan-dim);transform:translateY(-1px);
}

.platform-arch{
  padding:80px 52px;
  border-bottom:1px solid var(--border);
}
.arch-diagram{
  margin-top:40px;position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);
}
.arch-layer{min-width:0;background:var(--black);padding:30px 28px;transition:background 0.2s;}
.arch-layer:hover{background:var(--surface);}
.arch-layer-title{
  font-family:'DM Mono',monospace;font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--cyan);margin-bottom:0;
  padding-bottom:14px;border-bottom:1px solid var(--border);
}
.arch-items{display:flex;flex-direction:column;gap:0;}
.arch-item{
  position:relative;font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);letter-spacing:0.01em;
  color:var(--text);padding:13px 0 13px 24px;
  border-bottom:1px solid var(--border);transition:color 0.2s;
}
.arch-item:last-child{border-bottom:0;}
.arch-item::before{content:'+';position:absolute;left:2px;top:12px;font-family:'DM Mono',monospace;font-size:14px;color:var(--cyan);}
.arch-item:hover{color:var(--white);}

.smb-stats-section{
  padding:18px 52px;
  border-bottom:1px solid var(--border);
}
.smb-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:1px;
  background:var(--border);
}
.smb-stat{
  min-height:112px;
  padding:22px 28px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.smb-stat-value{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(42px,3.8vw,54px);
  line-height:1;
  letter-spacing:0.04em;
  color:var(--cyan);
}
.smb-stat-label{
  max-width:280px;
  margin-top:10px;
  font-size:var(--text-body-sm);
  font-weight:400;
  line-height:var(--leading-snug);
  letter-spacing:0.02em;
  color:var(--text);
}

.essential-eight{padding:80px 52px;}
.e8-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);margin-top:52px;
}
.e8-card{
  background:var(--surface);padding:36px 28px;
  position:relative;
  transition:background 0.2s,border-color 0.2s;
}
.e8-card:hover{background:var(--panel);}
.e8-num{
  font-family:'Bebas Neue',sans-serif;font-size:52px;
  color:var(--cyan);opacity:0.15;line-height:1;
  position:absolute;top:16px;right:16px;
}
.e8-title{
  font-family:'Barlow Condensed',sans-serif;font-size:1.25rem;
  font-weight:700;letter-spacing:0.05em;line-height:1.2;text-transform:uppercase;
  color:var(--white);margin-bottom:10px;
}
.e8-desc{font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);color:var(--text);}
.e8-level{
  margin-top:18px;display:flex;align-items:center;gap:6px;
}
.e8-pip{
  height:3px;flex:1;background:var(--border);
}
.e8-pip.fill{background:var(--cyan);}
.e8-pip.fill.gold{background:var(--gold);}
.e8-level-label{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:0.08em;line-height:var(--leading-label);color:var(--muted2);white-space:nowrap;
}

.acsc-compliance{
  padding:80px 52px;background:var(--panel);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.about-hero{
  padding:160px 52px 80px;
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;
}
.about-manifesto{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,5vw,68px);
  line-height:1.05;letter-spacing:0.03em;color:var(--white);
}
.about-manifesto span{color:var(--cyan);}
.about-story{
  font-size:var(--text-body);font-weight:400;line-height:var(--leading-article);
  color:var(--text);letter-spacing:0.02em;max-width:var(--measure-body);
}
.about-story p{margin-bottom:22px;}
.about-story p:last-child{margin-bottom:0;}

.contact-layout{
  padding:140px 52px 80px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:1px;background:var(--border);
  min-height:calc(100vh - 0px);
}
.contact-info{
  background:var(--panel);padding:72px 52px;
  min-width:0;
}
.contact-form-wrap{
  background:var(--surface);padding:72px 52px;
  min-width:0;
}
.contact-h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,6vw,80px);
  letter-spacing:0.04em;color:var(--white);
  line-height:0.92;margin-bottom:20px;
}
.contact-p{
  font-size:var(--text-body);font-weight:400;line-height:var(--leading-body);
  color:var(--text);max-width:var(--measure-body);margin-bottom:40px;
}
.contact-details{display:flex;flex-direction:column;gap:0;}
.contact-detail{
  padding:20px 0;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:4px;
}
.contact-detail:last-child{border-bottom:none;}
.contact-detail-label{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);
  text-transform:uppercase;color:var(--muted2);
}
.contact-detail-val{
  font-size:var(--text-body);font-weight:400;line-height:var(--leading-snug);letter-spacing:0.02em;color:var(--text);
}
.contact-detail-val a{color:var(--cyan);text-decoration:none;}
.offices{margin-top:36px;}
.offices-title{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--muted2);margin-bottom:16px;
}
.office-list{display:flex;flex-direction:column;gap:8px;}
.office-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:var(--text-body-sm);line-height:var(--leading-snug);padding:11px 14px;
  background:var(--surface);border-left:2px solid var(--border2);
}
.office-city{color:var(--white);font-weight:500;letter-spacing:0.02em;}
.office-type{
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:0.1em;line-height:var(--leading-label);
  text-transform:uppercase;color:var(--muted2);white-space:nowrap;
}

.form-title{
  font-family:'Bebas Neue',sans-serif;font-size:36px;
  letter-spacing:0.06em;line-height:1.1;color:var(--white);margin-bottom:8px;
}
.form-sub{
  font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);
  color:var(--text);max-width:var(--measure-body);
  margin-bottom:36px;letter-spacing:0.02em;
}
.form-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--border);
  margin-bottom:36px;
  max-width:100%;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.form-tabs::-webkit-scrollbar{display:none;}
.form-tab{
  font-size:var(--text-sm);font-weight:600;
  letter-spacing:0.06em;line-height:var(--leading-snug);text-transform:uppercase;
  padding:14px 18px;min-height:48px;color:var(--text);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color 0.2s,border-color 0.2s;background:none;border-left:none;border-right:none;border-top:none;
}
.form-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);}
.form-tab:hover{color:var(--white);}

.form-panel{display:none;min-width:0;}
.form-panel.active{display:block;}
.form-panel form{min-width:0;}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px;min-width:0;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;min-width:0;}
.form-label{
  font-family:'DM Mono',monospace;font-size:var(--text-sm);
  letter-spacing:0.08em;line-height:var(--leading-label);
  text-transform:uppercase;color:var(--text);
}
.form-input,.form-select,.form-textarea{
  background:var(--panel);border:1px solid var(--border2);
  color:var(--text);font-family:'Barlow Condensed',sans-serif;
  font-size:var(--text-base);line-height:var(--leading-snug);letter-spacing:0.02em;
  padding:13px 16px;width:100%;min-height:48px;
  transition:border-color 0.2s;outline:none;
  -webkit-appearance:none;appearance:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--cyan);background:rgba(0,212,255,0.15);outline:none;
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--muted);opacity:1;}
.form-textarea{resize:vertical;min-height:120px;}
.form-select{cursor:pointer;}
.form-select option{background:var(--panel);color:var(--text);}
.form-checkbox-group{display:flex;flex-direction:column;gap:12px;}
.form-checkbox{display:flex;align-items:flex-start;gap:10px;cursor:pointer;}
.form-checkbox input{
  width:18px;height:18px;margin-top:3px;
  accent-color:var(--cyan);cursor:pointer;flex-shrink:0;
}
.form-checkbox-label{font-size:var(--text-body-sm);font-weight:400;color:var(--text);line-height:var(--leading-body);}
.contact-detail-val,.form-checkbox-label,.form-note{overflow-wrap:anywhere;}
.form-submit{
  font-size:var(--text-cta);font-weight:600;
  letter-spacing:0.06em;line-height:var(--leading-snug);text-transform:uppercase;
  color:var(--black);background:var(--cyan);
  border:none;padding:16px 32px;min-height:52px;cursor:crosshair;
  width:100%;margin-top:24px;transition:background 0.2s,color 0.2s,opacity 0.2s;
}
.form-submit:hover{background:var(--white);}
.form-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
.form-note{
  font-family:'DM Mono',monospace;font-size:var(--text-help);
  letter-spacing:0.04em;color:var(--muted2);margin-top:16px;
  text-align:center;line-height:var(--leading-body);max-width:62ch;margin-inline:auto;
}

.form-success{
  display:none;flex-direction:column;align-items:center;
  justify-content:center;padding:60px 40px;text-align:center;
}
.form-success.show{display:flex;}
.success-icon{
  width:64px;height:64px;border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--green);margin-bottom:24px;
}
.success-title{
  font-family:'Bebas Neue',sans-serif;font-size:36px;
  letter-spacing:0.06em;line-height:1.1;color:var(--white);margin-bottom:12px;
}
.success-text{font-size:var(--text-body);font-weight:400;color:var(--text);line-height:var(--leading-body);max-width:var(--measure-article);}

footer{
  background:var(--surface);border-top:1px solid var(--border);
  padding:64px 52px 32px;position:relative;
}
.footer-inner{
  /* Was a centred 1280px box while nav, sections and articles are all full-bleed
     with 52px gutters. Identical at a 1280 viewport, visibly misaligned above it. */
  max-width:none;margin:0;
}
.footer-top{
  display:grid;grid-template-columns:2fr repeat(4,1fr);
  gap:48px;margin-bottom:52px;
  padding-bottom:52px;border-bottom:1px solid var(--border);
}
.footer-logo-lg{
  font-family:'Archivo',sans-serif;font-size:34px;font-weight:900;
  letter-spacing:-0.03em;line-height:1.1;color:var(--white);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.footer-tagline{
  font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);
  color:var(--text);max-width:34ch;margin-bottom:20px;
}
.footer-cert{
  font-size:var(--text-body-sm);font-weight:500;
  letter-spacing:0.02em;line-height:var(--leading-snug);
  color:var(--cyan);
}
.footer-col-title{
  font-size:var(--text-body-sm);font-weight:600;
  letter-spacing:0.02em;line-height:var(--leading-snug);
  color:var(--cyan);margin-bottom:20px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:6px;}
.footer-links a{
  display:inline-block;padding:4px 0;
  font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-snug);color:var(--text);
  text-decoration:none;letter-spacing:0.02em;
  transition:color 0.2s;cursor:pointer;
}
.footer-links a:hover{color:var(--cyan);}

/* Acknowledgement of Country: artwork left, text centre, flags right. The
   flags are sized by height so each keeps its own aspect ratio; the width and
   height attributes on the tags reserve the space before they load. */
.acknowledgement{
  border-top:1px solid var(--border);padding:28px 0;
  /* Centred cluster, not space-between: the emblems sit either side of the
     text so the three read as one unit, rather than being flung to the far
     edges of a 1600px column with the text stranded in the middle. */
  display:flex;align-items:center;justify-content:center;gap:32px;
}
.acknowledgement-art{flex-shrink:0;opacity:0.85;}
.acknowledgement-text{
  font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-article);
  color:var(--text);max-width:var(--measure-body);text-align:center;margin:0;
}
.acknowledgement-flags{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.acknowledgement-flags img{
  height:34px;width:auto;display:block;
  border:1px solid var(--border);
}
/* Closes out the brand column, below the socials. */
.footer-badge{display:block;width:78px;height:auto;margin-top:26px;}
/* Employer certification - it does its real work on the careers hero. */
.careers-badge{display:block;width:96px;height:auto;margin-top:32px;}
@media (max-width:860px){
  /* Stack so the text is not squeezed between the two emblem groups. */
  .acknowledgement{flex-direction:column;gap:20px;}
}
@media (max-width:600px){
  .acknowledgement-flags img{height:28px;}
  .footer-badge{width:66px;}
  .careers-badge{width:82px;}
}
.footer-socials{
  display:flex;align-items:center;gap:12px;margin-top:20px;
}
.footer-social{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);color:var(--muted2);
  text-decoration:none;transition:color 0.2s,border-color 0.2s;
}
.footer-social:hover{border-color:var(--cyan);color:var(--cyan);}
.footer-social svg{width:16px;height:16px;fill:currentColor;}
.footer-bottom{
  display:flex;align-items:center;justify-content:center;
}
.footer-copy{
  font-size:var(--text-body-sm);font-weight:400;
  letter-spacing:0.02em;color:var(--text);
  text-align:center;line-height:var(--leading-body);
}

.page-hero-bar{
  padding:140px 52px 64px;
  background:linear-gradient(180deg,var(--panel) 0%,var(--black) 100%);
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.page-hero-bar::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px;opacity:0.15;
}
.page-hero-bar-inner{position:relative;z-index:1;}
.breadcrumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:'DM Mono',monospace;font-size:var(--text-xs);
  letter-spacing:0.1em;line-height:var(--leading-label);text-transform:uppercase;
  color:var(--muted2);margin-bottom:24px;
}
.breadcrumb span{color:var(--muted2);}
.breadcrumb a{color:var(--text);text-decoration:none;cursor:pointer;}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb .current{color:var(--cyan);}

.toast{
  position:fixed;bottom:88px;right:32px;z-index:9999;
  background:var(--panel);border:1px solid var(--green);
  border-left:3px solid var(--green);
  padding:16px 24px;max-width:min(92vw,420px);
  font-family:'DM Mono',monospace;font-size:var(--text-xs);
  letter-spacing:0.08em;line-height:var(--leading-label);text-transform:uppercase;
  color:var(--green);
  transform:translateY(80px);opacity:0;
  transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
  pointer-events:none;
}
.toast.show{transform:translateY(0);opacity:1;}

.scroll-top{
  position:fixed;bottom:calc(32px + var(--cookie-h,0px));right:32px;z-index:9000;
  width:44px;height:44px;
  background:var(--panel);border:1px solid var(--border2);
  color:var(--cyan);font-size:18px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s,background 0.2s;
}
.scroll-top.show{opacity:1;pointer-events:auto;}
.scroll-top:hover{background:var(--cyan);color:var(--black);}

.nav-hamburger:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
}

.input-error{
  border-color:var(--red) !important;
  outline:1px solid var(--red);
}
.field-error{
  display:block;
  font-family:'DM Mono',monospace;
  font-size:var(--text-help);
  letter-spacing:0.02em;
  line-height:var(--leading-snug);
  color:#ff6b6b;
  margin-top:8px;
}

@media print{
  nav,.cookie-banner,.scroll-top,.toast,footer,
  .form-tab,.form-panel,.page:not(.active){
    display:none !important;
  }
  body{background:#fff;color:#000;}
  .page.active{display:block !important;}
  .page-hero-bar{background:#fff;padding:24px 0;border:none;}
  .page-hero-bar::before{display:none;}
  .section-title,.section-tag,.breadcrumb,.divider{color:#000;}
  a{color:#000;text-decoration:underline;}
  section{padding:16px 0 !important;}
  h1,h2,h3{color:#000;}
  p,li{color:#111;line-height:1.6;}
}

#page-home.active .hero-eyebrow { animation: heroReveal 0.75s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
#page-home.active .hero-h1      { animation: heroReveal 0.9s  cubic-bezier(0.22,1,0.36,1) 0.28s both; }
#page-home.active .hero-rule    { animation: heroFadeIn 0.5s  ease 0.72s both; }
#page-home.active .hero-p       { animation: heroReveal 0.75s cubic-bezier(0.22,1,0.36,1) 0.82s both; }
#page-home.active .hero-btns    { animation: heroReveal 0.65s cubic-bezier(0.22,1,0.36,1) 1.05s both; }
#page-home.active .metrics-bar  { animation: heroFadeIn 0.9s  ease 1.2s both; }

@keyframes heroReveal {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

@keyframes heroGlitch {
  0%,88%,100% { text-shadow:none; transform:none; }
  90% { text-shadow:2px 0 var(--cyan), -2px 0 rgba(255,51,51,0.6); transform:translate(-2px,0); }
  92% { text-shadow:-2px 0 var(--cyan), 2px 0 rgba(255,51,51,0.6); transform:translate(2px,0); }
  94% { text-shadow:1px 0 var(--cyan); transform:translate(-1px,0); }
  96% { text-shadow:none; transform:none; }
}
.hero-h1 { animation:heroGlitch 9s ease-in-out infinite; }

.page { animation:pageIn 0.5s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pageIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.will-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1),
             transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.will-reveal.is-revealed {
  opacity:1;
  transform:translateY(0);
}

body > nav { transition:background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.nav-scrolled {
  background:rgba(2,5,8,0.98) !important;
  border-bottom-color:var(--border2) !important;
  box-shadow:0 2px 32px rgba(0,212,255,0.04);
}

.nav-hamburger span {
  transition:transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease;
}
#navHamburger[aria-expanded="true"] span:nth-child(1) {
  transform:translateY(7px) rotate(45deg);
}
#navHamburger[aria-expanded="true"] span:nth-child(2) {
  opacity:0;
  transform:scaleX(0);
}
#navHamburger[aria-expanded="true"] span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg);
}

.btn, .nav-cta, .form-submit { position:relative; overflow:hidden; }
.btn-cyan, .nav-cta, .form-submit, .cookie-accept { isolation:isolate; z-index:1; }
.btn-ripple {
  position:absolute;
  width:6px;height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:rgba(255,255,255,0.22);
  pointer-events:none;
  animation:btnRipple 0.65s ease-out forwards;
}
@keyframes btnRipple { to { transform:scale(60); opacity:0; } }

.sol-card::before {
  content:'';
  position:absolute;top:0;left:0;bottom:0;width:2px;
  background:var(--cyan);
  transform:scaleY(0);transform-origin:top;
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.sol-card:hover::before { transform:scaleY(1); }

.trust-logos-marquee { overflow:hidden; flex:1; }
.trust-logos-track {
  display:flex;
  gap:56px;
  width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.trust-logos-track:hover { animation-play-state:paused; }
@keyframes marqueeScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

.hero-grid { will-change:transform; }

.is-revealed .metric-val { text-shadow:0 0 28px rgba(0,212,255,0.18); }

.threat-ticker {
  display:flex;align-items:stretch;
  min-height:40px;overflow:hidden;
  background:rgba(0,212,255,0.04);
  border-bottom:1px solid rgba(0,212,255,0.12);
  gap:0;
}
.ticker-label {
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--black);background:var(--cyan);
  padding:8px 14px;
  display:flex;align-items:center;white-space:nowrap;flex-shrink:0;
}
.ticker-overflow {
  overflow:hidden;flex:1;position:relative;
}
.ticker-overflow::before,.ticker-overflow::after {
  content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none;
}
.ticker-overflow::before { left:0;background:linear-gradient(90deg,rgba(0,212,255,0.04),transparent); }
.ticker-overflow::after  { right:0;background:linear-gradient(-90deg,rgba(0,212,255,0.04),transparent); }
.ticker-track {
  display:flex;align-items:center;gap:20px;
  width:max-content;
  animation:tickerScroll 60s linear infinite;
  font-family:'DM Mono',monospace;font-size:var(--text-label);
  letter-spacing:0.1em;line-height:var(--leading-label);text-transform:uppercase;
  color:var(--text);white-space:nowrap;
  padding:0 20px;
}
.ticker-track:hover { animation-play-state:paused; }
.ticker-sep { color:var(--cyan); }
@keyframes tickerScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

.approach-principles{
  display:grid;grid-template-columns:300px 1fr;
  border-top:1px solid var(--border);
  /* Outer edges sit on the page gutter like the other split panels
     (.sol-solution, .contact-layout); each cell keeps its own inset. */
  padding-left:52px;padding-right:52px;
}
.approach-principles-head{
  padding:56px 40px;border-right:1px solid var(--border);
  background:var(--surface);
}
.approach-principles-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--border);
}
.principle{
  background:var(--black);padding:40px 36px;position:relative;
  transition:background 0.25s;
}
.principle:hover{background:var(--surface);}
.principle-idx{
  font-family:'DM Mono',monospace;font-size:var(--text-xs);
  letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);color:var(--cyan);
  display:block;margin-bottom:22px;
}
.principle-idx::after{
  content:'';display:block;width:22px;height:1px;
  background:var(--cyan);margin-top:14px;opacity:0.5;
}
.principle-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);
  font-weight:700;letter-spacing:0.04em;line-height:1.2;text-transform:uppercase;
  color:var(--white);margin-bottom:10px;
}
.principle-desc{font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);color:var(--text);max-width:var(--measure-body);}

@media (max-width:900px){
  .approach-principles{grid-template-columns:1fr;}
  .approach-principles-head{border-right:none;border-bottom:1px solid var(--border);}
}
@media (max-width:560px){
  .approach-principles-grid{grid-template-columns:1fr;}
}
@media (max-width:600px) {
  .ticker-label { padding:8px 10px; letter-spacing:0.1em; }
}

.sol-num {
  position:absolute;bottom:-12px;right:12px;
  font-family:'Bebas Neue',sans-serif;font-size:110px;
  line-height:1;letter-spacing:0.02em;
  color:var(--white);opacity:0.055;
  pointer-events:none;user-select:none;z-index:0;
  transition:opacity 0.3s ease;
}
.sol-card:hover .sol-num { opacity:0.08; }

.sol-card.cat-gold .sol-category { color:var(--gold); }
.sol-card.cat-gold::before       { background:var(--gold); }

.sol-card.cat-red .sol-category  { color:var(--red); }
.sol-card.cat-red::before        { background:var(--red); }

.sol-card.cat-green .sol-category { color:var(--green); }
.sol-card.cat-green::before       { background:var(--green); }

#scroll-progress {
  position:fixed;top:0;left:0;height:1px;width:0%;
  z-index:10001;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,212,255,0.18) 0%,var(--cyan) 58%,rgba(198,218,230,0.72) 100%);
  transition:width 0.12s linear;
  box-shadow:0 0 6px rgba(0,212,255,0.28);
}

body::after {
  content:'';
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:200px 200px;
  opacity:0.2;mix-blend-mode:overlay;
}

.hero-orb { pointer-events:none; }
.hero-orb::before,.hero-orb::after {
  content:'';position:absolute;border-radius:50%;
  border:1px solid rgba(0,212,255,0.08);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:radarPulse 4s ease-out infinite;
}
.hero-orb::before {
  width:calc(100% + 160px);height:calc(100% + 160px);
  animation-delay:0s;
}
.hero-orb::after {
  width:calc(100% + 340px);height:calc(100% + 340px);
  animation-delay:2s;
}
@keyframes radarPulse {
  0%   { opacity:0.6; transform:translate(-50%,-50%) scale(0.9); }
  60%  { opacity:0.1; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.05); }
}

.sol-card:hover { box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 0 1px rgba(0,212,255,0.12); }

footer::before {
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.15) 30%,rgba(0,212,255,0.15) 70%,transparent);
  pointer-events:none;
}

.intro-section::before {
  content:'';position:absolute;
  right:-200px;top:50%;transform:translateY(-50%);
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,0.04) 0%,transparent 70%);
  pointer-events:none;
}

.page-hero-bar::after {
  content:'';position:absolute;
  right:52px;bottom:0;
  width:120px;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan));
  pointer-events:none;
}

.section-title { position:relative; }

.section-title[data-index]::before {
  content:attr(data-index);
  display:block;
  font-family:'DM Mono',monospace;
  font-size:var(--text-label);
  letter-spacing:var(--tracking-label-wide);
  line-height:var(--leading-label);
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:10px;
}

.detail-box:hover .detail-box-label {
  color:var(--cyan);
  letter-spacing:var(--tracking-label-wide);
  transition:letter-spacing 0.3s ease;
}

.cta-band {
  padding:80px 52px;
  background:var(--panel);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  position:relative;overflow:hidden;
}
.cta-band::before {
  content:'';position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.25) 40%,rgba(0,212,255,0.25) 60%,transparent);
}
.cta-band::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,212,255,0.012) 3px,
    rgba(0,212,255,0.012) 4px
  );
  animation:ctaScan 8s linear infinite;
}
@keyframes ctaScan {
  0%   { background-position:0 0; }
  100% { background-position:0 100%; }
}
.cta-h2 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(32px,4vw,52px);
  letter-spacing:0.04em;color:var(--white);line-height:1.05;
}
@media (max-width:1024px) {
  .cta-band { flex-direction:column;align-items:flex-start;padding:60px 24px; }
}

.nav-links a.active {
  position:relative;
}
.nav-links a.active::after {
  content:'';position:absolute;
  bottom:-1px;left:10px;right:10px;height:2px;
  background:var(--cyan);
  box-shadow:0 0 6px rgba(0,212,255,0.4);
}

/* Nav switches to the hamburger before the 8 links can crowd or wrap. */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 1024px) {
  body > nav { padding: 12px 24px; }
  .section { padding: 60px 24px; }
  .hero { padding: 120px 24px 0; min-height: auto; }
  .metrics-bar { margin: 40px -24px 0; grid-template-columns: repeat(2,1fr); }
  .intro-section { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px; }
  .sol-grid { grid-template-columns: repeat(2,1fr); }
  .sol-grid.sol-grid-core { grid-template-columns: repeat(2,1fr); }
  .sol-solution { grid-template-columns: 1fr; }
  .sol-solution-info { border-right: none; border-bottom: 1px solid var(--border); padding: 48px 24px; }
  .sol-solution-detail { padding: 48px 24px; }
  .contact-layout { grid-template-columns: minmax(0,1fr); min-height: auto; padding: 100px 0 0; }
  .contact-info { padding: 60px 24px; }
  .contact-form-wrap { padding: 60px 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .trust-logos { gap: 24px; flex-wrap: wrap; }
  .trust-bar { padding: 36px 24px; gap: 24px; }
  .about-hero { grid-template-columns: 1fr; gap: 40px; padding: 120px 24px 60px; }
  .e8-grid { grid-template-columns: repeat(2,1fr); }
  .arch-diagram { grid-template-columns: 1fr; }
  .arch-layer { padding: 28px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .hero-h1 { font-size: clamp(44px,9.6vw,88px); }
  .cookie-banner { flex-direction: column; gap: 16px; padding: 20px 24px; }
  .page-hero-bar { padding: 100px 24px 48px; }
  .card { padding: 32px 24px; }
  .sol-card { padding: 32px 24px; }
  .platform-arch { padding: 60px 24px; }
  .smb-stats-section { padding: 18px 24px; }
  .smb-stats-grid { grid-template-columns: repeat(2,1fr); }
  .smb-stat { min-height: 108px; padding: 22px 24px; }
  .essential-eight { padding: 60px 24px; }
  .acsc-compliance { padding: 60px 24px; }
  footer { padding: 48px 24px 24px; }
  .metric { padding: 18px 20px; }

  section[style*="padding:80px 52px"] { padding: 60px 24px !important; }
  section[style*="padding:84px 52px"] { padding: 60px 24px !important; }
  section[style*="padding:100px 52px"] { padding: 60px 24px !important; }
  section[style*="padding:72px 52px"] { padding: 56px 24px !important; }
  section[style*="padding:60px 52px"] { padding: 48px 24px !important; }

  section[style*="justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; }

  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  section[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  section[style*="grid-template-columns:1.2fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }

  div[style*="grid-template-columns:280px 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:280px 1fr"] > div[style*="border-right"] { border-right: none !important; border-bottom: 1px solid var(--border) !important; }

  .form-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; flex-wrap: nowrap; }
  .form-tab { flex-shrink: 0; }

  div[style*="padding:28px 52px"] { padding: 28px 24px !important; }

}

@media (max-width: 768px) {
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

  .sol-h2 { font-size: clamp(32px,6vw,48px); }
  .about-manifesto { font-size: clamp(36px,7vw,56px); }
  .contact-h1 { font-size: clamp(40px,8vw,64px); }
  .form-title { font-size: 30px; }

  .nav-cta { padding: 10px 14px; }
}

@media (max-width: 600px) {
  .metrics-bar { grid-template-columns: 1fr 1fr; }
  .sol-grid { grid-template-columns: 1fr; }
  .sol-grid.sol-grid-core { grid-template-columns: 1fr; }
  .e8-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .trust-bar { flex-direction: column; gap: 16px; padding: 24px 16px; }
  .trust-logos { justify-content: flex-start; }
  .hero { padding: 110px 16px 0; }
  .metrics-bar { margin: 40px -16px 0; }
  .hero-h1 { font-size: clamp(32px,9.6vw,58px); }
  .hero-p { margin-bottom: 32px; }
  .section { padding: 48px 16px; }
  .page-hero-bar { padding: 90px 16px 40px; }
  .card { padding: 28px 20px; }
  .sol-card { padding: 28px 20px; }
  .sol-solution-info { padding: 36px 16px; }
  .sol-solution-detail { padding: 36px 16px; }
  .contact-info { padding: 48px 16px; min-width:0; }
  .contact-form-wrap { padding: 48px 16px; min-width:0; }
  .contact-layout { padding: 80px 0 0; }
  .office-list { grid-template-columns:1fr !important; }
  .form-tabs {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    overflow:visible;
    white-space:normal;
  }
  .form-tab {
    min-width:0;
    text-align:center;
    white-space:normal;
    line-height:1.35;
  }
  footer { padding: 40px 16px 20px; }
  .smb-stats-section { padding: 16px; }
  .smb-stat { min-height: 104px; padding: 20px 18px; }
  .metric { padding: 16px; }
  .metric-val { font-size: 30px; }
  .intro-section { padding: 48px 16px; }
  .about-hero { padding: 100px 16px 48px; }
  section[style*="padding:80px 52px"] { padding: 48px 16px !important; }
  section[style*="padding:84px 52px"] { padding: 48px 16px !important; }
  section[style*="padding:100px 52px"] { padding: 48px 16px !important; }
  section[style*="padding:72px 52px"] { padding: 44px 16px !important; }
  section[style*="padding:60px 52px"] { padding: 36px 16px !important; }
  div[style*="padding:28px 52px"] { padding: 20px 16px !important; }

  div[style*="padding:52px"] { padding: 24px !important; }
  div[style*="padding:48px 40px"] { padding: 24px 16px !important; }

  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  .hero-btns { flex-direction: column; width: 100%; }
  .hero-btns .btn { width: 100%; justify-content: center; }

  /* Same treatment for the paired buttons in a CTA band. Their wrapper is an
     inline `display:flex;flex-shrink:0`, so two buttons would otherwise share
     one phone-width row and squeeze each other - and because .btn is
     overflow:hidden for the ripple, a squeezed button silently clips its
     label rather than wrapping. Stack them instead. */
  .cta-band > div[style*="display:flex"] {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .cta-band > div[style*="display:flex"] > .btn { width: 100%; justify-content: center; }

  .e8-card { padding: 28px 20px; }

}

@media (max-width: 400px) {
  .hero-h1 { font-size: clamp(28px,9.6vw,40px); }
  .section-title { font-size: clamp(32px,8vw,48px); }
  .metrics-bar { grid-template-columns: 1fr; }
  .metric-val { font-size: 28px; }
  .nav-cta, a.nav-cta { display: none; }
  .nav-mobile a[style*="color:var(--cyan)"] { display: block; }
  .form-tabs { gap: 0; }
  .form-tab { padding: 12px 10px; letter-spacing: 0.06em; }
  .form-input,.form-select,.form-textarea { min-width:0; }
  .form-submit { padding-left:16px; padding-right:16px; white-space:normal; }
  .btn { padding: 13px 20px; letter-spacing: 0.06em; }
  .btn-cyan,.btn-outline,.btn-ghost { padding: 13px 20px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .will-reveal, .page,
  #page-home.active .hero-eyebrow, #page-home.active .hero-h1,
  #page-home.active .hero-rule,   #page-home.active .hero-p,
  #page-home.active .hero-btns,   #page-home.active .metrics-bar {
    opacity:1 !important;
    transform:none !important;
  }
  .e8-opt, .e8-seg, .e8-result { transition:none !important; }
}

.e8-tool{ max-width:1080px; margin:48px auto 0; }
.e8-qgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
}
@media (max-width:400px){
  .e8-qgrid{grid-template-columns:minmax(0,1fr);}
  .e8-q{min-width:0;}
}
.e8-q{
  border:1px solid var(--border);
  background:var(--panel);
  padding:22px 22px 18px;
  position:relative;
}
.e8-q legend{
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--text-lg); font-weight:600; line-height:1.35;
  color:var(--white); padding:0; margin-bottom:16px;
  display:flex; align-items:baseline; gap:10px;
}
.e8-q-num{
  font-family:'DM Mono',monospace; font-size:var(--text-label);
  letter-spacing:0.08em; line-height:var(--leading-label); color:var(--cyan);
  border:1px solid var(--border2); padding:3px 7px; flex-shrink:0;
}
.e8-opts{ display:flex; flex-direction:column; gap:8px; }
.e8-opt{
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 13px; cursor:pointer;
  border:1px solid var(--border);
  background:var(--surface);
  transition:border-color 0.18s, background 0.18s;
}
.e8-opt:hover{ border-color:var(--border2); background:var(--panel2); }
.e8-opt input{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; flex-shrink:0; margin-top:2px;
  border:1px solid var(--muted); border-radius:50%;
  position:relative; cursor:pointer; transition:border-color 0.18s;
}
.e8-opt input:checked{ border-color:var(--cyan); }
.e8-opt input:checked::after{
  content:''; position:absolute; inset:3px;
  border-radius:50%; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan-glow);
}
.e8-opt input:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.e8-opt-txt{
  font-size:var(--text-body-sm); font-weight:400; line-height:var(--leading-snug);
  color:var(--text); letter-spacing:0.01em;
}
.e8-opt:has(input:checked){
  border-color:var(--cyan);
  background:var(--cyan-dim);
}
.e8-opt:has(input:checked) .e8-opt-txt{ color:var(--white); }

.e8-result{
  margin-top:30px; border:1px solid var(--border);
  background:var(--panel);
  padding:30px 34px; text-align:center;
}
.e8-progress{
  font-family:'DM Mono',monospace; font-size:var(--text-xs);
  letter-spacing:var(--tracking-label); line-height:var(--leading-label);
  text-transform:uppercase; color:var(--text);
  margin-bottom:18px;
}
.e8-progress span{ color:var(--cyan); }
.e8-meter{
  display:flex; gap:6px; max-width:420px; margin:0 auto 24px;
}
.e8-seg{
  flex:1; height:8px; background:var(--border);
  transition:background 0.4s ease, box-shadow 0.4s ease;
}
.e8-meter[data-level="0"] .e8-seg[data-seg="0"]{ background:var(--red);   box-shadow:0 0 10px rgba(255,51,51,0.4); }
.e8-meter[data-level="1"] .e8-seg[data-seg="0"],
.e8-meter[data-level="1"] .e8-seg[data-seg="1"]{ background:var(--gold); box-shadow:0 0 10px rgba(240,165,0,0.35); }
.e8-meter[data-level="2"] .e8-seg[data-seg="0"],
.e8-meter[data-level="2"] .e8-seg[data-seg="1"],
.e8-meter[data-level="2"] .e8-seg[data-seg="2"]{ background:var(--cyan); box-shadow:0 0 10px var(--cyan-glow); }
.e8-meter[data-level="3"] .e8-seg{ background:var(--green); box-shadow:0 0 10px rgba(0,232,135,0.35); }
.e8-prompt{
  font-size:var(--text-body); font-weight:400; line-height:var(--leading-body); color:var(--text);
  letter-spacing:0.02em;
}
.e8-verdict{
  font-family:'Bebas Neue',sans-serif; line-height:1;
  font-size:clamp(34px,4.5vw,52px); letter-spacing:0.03em;
  color:var(--white); margin-bottom:6px;
}
.e8-verdict b{ font-family:inherit; }
.e8-band{
  font-family:'DM Mono',monospace; font-size:var(--text-xs);
  letter-spacing:var(--tracking-label-wide); line-height:var(--leading-label);
  text-transform:uppercase; margin-bottom:18px;
}
.e8-band.lvl0{ color:var(--red); }
.e8-band.lvl1{ color:var(--gold); }
.e8-band.lvl2{ color:var(--cyan); }
.e8-band.lvl3{ color:var(--green); }
.e8-summary{
  font-size:var(--text-body); font-weight:400; line-height:var(--leading-body);
  color:var(--text); max-width:var(--measure-article); margin:0 auto 16px;
}
.e8-weak{
  font-size:var(--text-body-sm); font-weight:400; line-height:var(--leading-body);
  color:var(--text); max-width:var(--measure-article); margin:0 auto 24px;
}
.e8-weak strong{ color:var(--white); font-weight:600; }
.e8-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.e8-disclaimer{
  font-family:'DM Mono',monospace; font-size:var(--text-xs);
  letter-spacing:0.06em; line-height:var(--leading-label); color:var(--muted2); margin-top:24px;
}

a.sol-card{display:block;text-decoration:none;color:inherit;}
#page-service .sol-solution{border-bottom:none;}
#page-service .sol-solution .sol-badge,
#page-service .sol-solution .sol-h2{display:none;}

#page-solutions > .sol-solution{display:none;}
a.sol-acc-head{
  text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border);
}
a.sol-acc-head:first-of-type{border-top:1px solid var(--border);}
.sol-acc-go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:28px;
  border:1px solid var(--border2);
  background:rgba(0,212,255,0.04);
  font-family:'DM Mono',monospace;
  font-size:12px;
  line-height:1;
  color:var(--cyan);
  justify-self:end;
  opacity:0.8;
  transform:translateX(-4px);
  transition:opacity 0.2s,transform 0.25s ease,border-color 0.2s,background 0.2s,box-shadow 0.2s;
}
a.sol-acc-head:hover .sol-acc-go{
  opacity:1;
  transform:translateX(0);
  border-color:var(--cyan);
  background:var(--cyan-dim);
  box-shadow:0 0 14px rgba(0,212,255,0.14);
}

.svc-faq{
  grid-column:1 / -1;
  padding:0 52px 64px;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.svc-faq-title{
  font-family:'Bebas Neue',sans-serif;font-size:var(--h2);
  letter-spacing:0.05em;line-height:1.1;color:var(--white);
  margin:56px 0 4px;
}
.svc-faq .faq-item{border-bottom:1px solid var(--border);}
.svc-faq .faq-item:last-child{border-bottom:none;}
.svc-faq{max-width:none;}
#page-solutions .svc-faq{display:none;}
@media (max-width:1024px){ .svc-faq{padding:0 24px 48px;} .svc-faq-title{margin-top:36px;} }
@media (max-width:600px){ .svc-faq{padding:0 16px 40px;} }

a.nav-cta{display:inline-flex;align-items:center;text-decoration:none;}

/* --- Extended service-detail content sections --- */
.svc-section{padding:var(--section-gap) 52px;border-top:1px solid var(--border);position:relative;}
/* Sections align to the shared page gutter rather than a narrower centred
   column, so a service section lines up with the hero above it and the email
   CTA below it. Insights articles were converted the same way. */
.svc-section-inner{max-width:none;margin:0;}
.svc-section-head{display:flex;align-items:baseline;gap:18px;margin-bottom:22px;flex-wrap:wrap;}
.svc-section-kicker{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);color:var(--cyan);text-transform:uppercase;}
.svc-section-kicker::before{content:'';display:inline-block;width:18px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:10px;}
.svc-section .svc-h3{font-family:'Bebas Neue',sans-serif;font-size:clamp(30px,3.2vw,44px);letter-spacing:0.04em;color:var(--white);margin:0;line-height:1.1;max-width:24ch;}
.svc-lead{font-size:var(--text-article);font-weight:400;line-height:var(--leading-article);color:var(--white);max-width:var(--measure-article);margin-top:6px;}
.svc-body{font-size:var(--text-body);font-weight:400;line-height:var(--leading-article);color:var(--text);max-width:var(--measure-body);}
.svc-body + .svc-body{margin-top:18px;}
.svc-subheading{
  display:flex;align-items:center;gap:10px;margin:34px 0 0;
  font-family:'Barlow Condensed',sans-serif;font-size:var(--text-lg);font-weight:700;
  letter-spacing:0.06em;line-height:1.35;text-transform:uppercase;color:var(--white);
}
.svc-subheading::before{
  content:'';display:block;width:18px;height:1px;flex:0 0 18px;background:var(--cyan);
}
.svc-grid-2{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);margin-top:34px;border:1px solid var(--border);}
@media (min-width:720px){.svc-grid-2{grid-template-columns:repeat(2,1fr);}}
.svc-info-card{background:var(--black);padding:30px 28px;border-left:2px solid transparent;transition:border-color 0.2s,background 0.2s;}
.svc-info-card:hover{background:var(--surface);border-left-color:var(--cyan);}
.svc-info-card h3,.svc-info-card h4{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.375rem,1.2rem + 0.7vw,1.625rem);letter-spacing:0.05em;line-height:1.15;color:var(--white);margin:0 0 12px;}
.svc-info-card p{font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);color:var(--text);max-width:var(--measure-body);}
.svc-checklist{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 32px;padding:0;margin-top:24px;}
.svc-checklist li{position:relative;padding-left:26px;font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text);font-weight:400;}
.svc-checklist li::before{content:'+';position:absolute;left:0;top:0;color:var(--cyan);font-family:'DM Mono',monospace;font-weight:500;font-size:14px;line-height:var(--leading-body);}
.svc-pill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:24px;}
.svc-pill{display:flex;align-items:center;min-height:66px;border:1px solid var(--border);background:var(--surface);padding:16px 20px;font-size:var(--text-body-sm);line-height:var(--leading-snug);font-weight:400;color:var(--text);letter-spacing:0.01em;border-left:2px solid var(--cyan);transition:background 0.2s,color 0.2s;}
.svc-pill:hover{background:var(--panel);color:var(--white);}
.svc-callout{border-left:3px solid var(--cyan);background:var(--surface);padding:28px 30px;margin-top:36px;font-size:var(--text-body);line-height:var(--leading-article);color:var(--white);font-weight:400;}
.svc-callout p{max-width:var(--measure-article);}
.svc-callout p + p{margin-top:14px;}
.svc-stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.svc-stat{background:var(--black);padding:32px 24px;}
.svc-stat-num{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:0.04em;color:var(--cyan);line-height:1;margin-bottom:8px;}
.svc-stat-label{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label);line-height:var(--leading-label);color:var(--muted2);text-transform:uppercase;}
.svc-split{display:grid;grid-template-columns:minmax(220px,260px) 1fr;gap:48px;align-items:start;}
.svc-q-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--border);margin-top:18px;border:1px solid var(--border);min-width:0;}
@media (min-width:720px) and (max-width:1079px){
  .svc-q-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .svc-q-grid > .svc-q-card:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (min-width:1080px){
  .svc-q-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .svc-q-grid > .svc-q-card:last-child:nth-child(3n+1){grid-column:1 / -1;}
  .svc-q-grid > .svc-q-card:last-child:nth-child(3n+2){grid-column:span 2;}
}
@media (max-width:719px){.svc-q-grid{grid-template-columns:minmax(0,1fr) !important;}}
.svc-q-card{background:var(--black);padding:24px;display:flex;gap:14px;align-items:flex-start;transition:background 0.2s;min-width:0;}
.svc-q-card:hover{background:var(--surface);}
.svc-q-num{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label);line-height:var(--leading-body);color:var(--cyan);flex-shrink:0;}
.svc-q-card p{font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);color:var(--white);margin:0;}
.svc-grid-2 > *:last-child:nth-child(odd){grid-column:1 / -1;}
/* Sample report preview (used on penetration-testing) */
.report-preview{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;}
/* Keeps the page-shaped proportion, but grows rather than clipping when the
   reader enlarges text. */
.report-page{background:var(--black);border:1px solid var(--border);aspect-ratio:3/4;min-height:fit-content;padding:34px 32px;display:flex;flex-direction:column;position:relative;overflow:hidden;font-family:'Barlow Condensed',sans-serif;}
.report-page::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:36px 36px;opacity:0.08;pointer-events:none;}
.report-page > *{position:relative;}
.report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.report-logo{font-family:'Archivo',sans-serif;font-size:20px;font-weight:900;letter-spacing:-0.03em;line-height:1.1;color:var(--white);}
.report-logo .dot{color:var(--cyan);}
.report-stamp{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted2);text-align:right;line-height:var(--leading-body);max-width:200px;}
.report-cover-body{margin:auto 0;}
.report-kicker{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);text-transform:uppercase;color:var(--cyan);margin-bottom:14px;}
.report-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,4.4vw,42px);letter-spacing:0.02em;color:var(--white);line-height:1.05;}
.report-rule{width:60px;height:2px;background:var(--cyan);margin:22px 0;box-shadow:0 0 8px rgba(0,212,255,0.4);}
.report-meta{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:0.1em;text-transform:uppercase;color:var(--text);line-height:1.9;}
.report-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label);line-height:var(--leading-label);text-transform:uppercase;color:var(--muted2);padding-top:16px;border-top:1px solid var(--border);}
.report-foot .cyan{color:var(--cyan);}
.report-int-body{margin-top:22px;flex:1;}
.report-finding-num{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label-wide);line-height:var(--leading-label);text-transform:uppercase;color:var(--cyan);margin-bottom:8px;}
.report-finding-title{font-family:'Barlow Condensed',sans-serif;font-size:1.375rem;font-weight:600;color:var(--white);margin-bottom:14px;line-height:1.25;}
.report-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:0.1em;line-height:var(--leading-label);color:var(--muted2);margin-bottom:18px;}
.report-sev{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label);line-height:var(--leading-label);text-transform:uppercase;background:var(--red);color:var(--black);padding:4px 9px;font-weight:700;}
.report-skel{height:6px;background:var(--border);margin-bottom:6px;border-radius:1px;}
.report-skel.s95{width:95%;}.report-skel.s90{width:90%;}.report-skel.s80{width:80%;}.report-skel.s75{width:75%;}.report-skel.s60{width:60%;}
.report-table{width:100%;border-collapse:collapse;margin-top:18px;border-top:1px solid var(--border);}
.report-table th{font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label);line-height:var(--leading-label);text-transform:uppercase;color:var(--muted2);text-align:left;padding:10px;border-bottom:1px solid var(--border);font-weight:500;background:var(--surface);}
.report-table td{padding:12px 10px;border-bottom:1px solid var(--border);font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:0.1em;line-height:var(--leading-label);text-transform:uppercase;color:var(--text);vertical-align:middle;}
.report-table td.sev-crit{color:var(--red);font-weight:700;}
.report-table td.sev-high{color:var(--gold);font-weight:700;}
.report-table td.sev-low{color:var(--cyan);font-weight:700;}
@media (max-width:760px){.report-preview{grid-template-columns:1fr;}}
@media (max-width:1024px){.report-page{aspect-ratio:auto;min-height:520px;}}

/* "Our Approach" step-card grid - locked columns + orphan-fill */
.svc-steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);}
@media (min-width:640px){.svc-steps{grid-template-columns:repeat(2,1fr);}}
@media (min-width:960px){.svc-steps{grid-template-columns:repeat(3,1fr);}}
@media (min-width:960px){
  .svc-steps > .card:last-child:nth-child(3n+1){grid-column:1 / -1;}
  .svc-steps > .card:last-child:nth-child(3n+2){grid-column:span 2;}
}
@media (min-width:640px) and (max-width:959px){
  .svc-steps > .card:last-child:nth-child(odd){grid-column:1 / -1;}
}

/* --- Insight / blog article pages --- */
.article{max-width:820px;margin:0 auto;padding:64px 0;}
.article-body{
  display:flex;flex-direction:column;gap:38px;
  font-size:var(--text-article);font-weight:400;line-height:var(--leading-article);color:var(--text);
}
/* Section groups (a heading plus its paragraphs). .article-main is listed too
   because the insights build wraps the body in it, which would otherwise break
   this direct-child match and collapse the paragraph spacing to zero. */
.article-body > div:not(.article-callout):not(.article-main),
.article-main > div:not(.article-callout){display:flex;flex-direction:column;gap:26px;}
.article-body p,.article-body ul,.article-body ol{max-width:var(--measure-article);}
.article-lead{font-size:var(--text-lead);line-height:var(--leading-body);color:var(--white);font-weight:400;max-width:var(--measure-article);}
.article h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(30px,3.6vw,42px);letter-spacing:0.04em;line-height:1.1;
  color:var(--white);margin:0;
}
.article h2::before{
  content:"";display:block;width:44px;height:2px;
  background:var(--cyan);margin-bottom:20px;
}
.article-body h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--h3);font-weight:700;letter-spacing:0.02em;line-height:1.25;
  color:var(--cyan);margin:10px 0 0;
}
.article-body p{margin:0;}
.article-body ul,.article-body ol{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:12px;}
.article-body li{line-height:var(--leading-article);padding-left:4px;}
.article-body li::marker{color:var(--cyan);}
.article-body strong{color:var(--white);font-weight:600;}
.article-body a:not(.btn){color:var(--cyan);text-decoration:none;}
.article-body a:not(.btn):hover{text-decoration:underline;text-underline-offset:3px;}
.insight-table-wrap{
  width:100%;
  margin-top:8px;
  border:1px solid var(--border);
  background:var(--black);
  overflow:hidden;
}
.insight-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:var(--text-body-sm);
  line-height:var(--leading-body);
}
.insight-table th{
  background:var(--panel);
  color:var(--cyan);
  font-family:'DM Mono',monospace;
  font-size:var(--text-label);
  font-weight:600;
  letter-spacing:0.1em;
  line-height:var(--leading-label);
  text-align:left;
  text-transform:uppercase;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}
.insight-table td{
  padding:18px 20px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  vertical-align:top;
}
.insight-table tr:last-child td{border-bottom:none;}
.insight-table td:first-child{
  width:22%;
  color:var(--white);
  font-weight:600;
}
.insight-table th:first-child{width:22%;}
.insight-table tr:nth-child(even) td{background:rgba(10,21,32,0.38);}
.article-callout{
  border-left:3px solid var(--cyan);background:var(--surface);
  padding:30px 32px;color:var(--white);line-height:var(--leading-article);
}
.article-callout p{color:var(--white);max-width:var(--measure-article);}
.agent-flow{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding:24px 28px;border:1px solid var(--border);border-left:3px solid var(--cyan);
  background:var(--surface);font-family:'DM Mono',monospace;
  font-size:var(--text-xs);letter-spacing:0.05em;line-height:var(--leading-snug);color:var(--white);
}
.agent-flow-step{
  padding:7px 10px;border:1px solid rgba(137,177,201,0.2);
  background:var(--panel);white-space:nowrap;
}
.agent-flow-arrow{flex:0 0 auto;color:var(--cyan);}
.article-faq h2{margin-bottom:24px;}
[id^="page-insights-"] > .article:not(.article-faq){
  max-width:none;
  margin:0;
  padding:64px 52px;
}
[id^="page-insights-"] > .article:not(.article-faq) .article-body{
  max-width:none;
}

/* Article = readable text column + sticky contents sidebar. Everything in the
   text column shares one width, so prose no longer sits in a narrow strip
   while callouts and tables run the full page. Single column below 1080px. */
/* One column for every kind of article content - prose, callouts, tables and
   cards all share this width, at every breakpoint. */
.article-main{display:flex;flex-direction:column;gap:52px;min-width:0;max-width:760px;}
.article-main p,.article-main ul,.article-main ol,.article-main .article-lead{max-width:none;}
.article-side{display:none;}

@media (min-width:1080px){
  [id^="page-insights-"] .article-body{
    display:grid;
    grid-template-columns:minmax(0,760px) minmax(0,300px);
    justify-content:space-between;
    align-items:start;
    gap:clamp(48px,5vw,110px);
  }
  .article-side{display:block;}
  .article-side-sticky{position:sticky;top:calc(var(--nav-h) + 28px);}
  .article-side-label{
    font-family:'DM Mono',monospace;font-size:var(--text-label);
    letter-spacing:var(--tracking-label);line-height:var(--leading-label);
    text-transform:uppercase;color:var(--cyan);
    padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--border);
  }
  .article-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:toc;}
  .article-toc li{counter-increment:toc;}
  .article-toc a{
    display:flex;gap:10px;padding:6px 0;
    font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-snug);
    letter-spacing:0.02em;color:var(--muted2);text-decoration:none;
    transition:color 0.2s;
  }
  .article-toc a::before{
    content:counter(toc,decimal-leading-zero);
    font-family:'DM Mono',monospace;font-size:var(--text-xs);
    color:var(--border2);flex-shrink:0;padding-top:2px;
  }
  .article-toc a:hover,.article-toc a:focus-visible{color:var(--cyan);}
  .article-toc a.is-current{color:var(--white);}
  .article-toc a.is-current::before{color:var(--cyan);}
  .article-side-cta{
    display:inline-flex;align-items:center;gap:8px;margin-top:22px;
    font-family:'DM Mono',monospace;font-size:var(--text-label);
    letter-spacing:var(--tracking-label);text-transform:uppercase;
    color:var(--cyan);text-decoration:none;
    padding-top:16px;border-top:1px solid var(--border);width:100%;
  }
  .article-side-cta span{transition:transform 0.2s;}
  .article-side-cta:hover span{transform:translateX(5px);}
}
[id^="page-insights-"] .article-body .article-callout{
  width:auto;
  margin-left:0;
  margin-right:0;
  padding:56px 52px;
  border-left:3px solid var(--cyan);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
[id^="page-insights-"] .article-body .article-callout > *{
  max-width:var(--measure-article);
  margin-left:0;
  margin-right:0;
}
[id^="page-insights-"] > .article-faq{
  width:auto;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding:64px 52px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--black);
}
[id^="page-insights-"] > .article-faq > h2,
[id^="page-insights-"] > .article-faq > .faq-list{
  max-width:900px;
  margin-left:0;
  margin-right:0;
}
[id^="page-insights-"] > .cta-band{
  width:auto;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:52px;
  padding-right:52px;
}
[id^="page-insights-"] > .cta-band > div:first-child{max-width:720px;}
[id^="page-insights-"] > .cta-band > div:last-child{margin-left:auto;}

/* Location pages and reusable email-first CTA */
.location-section{padding:var(--section-gap) 52px;border-top:1px solid var(--border);}
.location-section-inner{max-width:none;margin:0;}
.location-h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:var(--h2);
  letter-spacing:0.04em;line-height:1.1;color:var(--white);
  max-width:22ch;margin:0 0 24px;
}
.location-lead{font-size:var(--text-lead);font-weight:400;line-height:var(--leading-body);color:var(--white);max-width:var(--measure-article);margin-bottom:20px;}
.location-body{font-size:var(--text-body);font-weight:400;line-height:var(--leading-article);color:var(--text);max-width:var(--measure-body);}
.location-body + .location-body{margin-top:18px;}
.location-card-grid,.service-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);margin-top:32px;}
.location-card{
  display:flex;flex-direction:column;gap:10px;
  min-height:190px;padding:28px 30px;background:var(--surface);
  color:inherit;text-decoration:none;border-left:3px solid transparent;
  transition:background 0.2s,border-color 0.2s;
}
.location-card:hover{background:var(--panel);border-left-color:var(--cyan);}
.location-card span,.service-link-grid a::before{
  font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label);line-height:var(--leading-label);text-transform:uppercase;color:var(--cyan);
}
.location-card strong{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.375rem,1.2rem + 0.6vw,1.5rem);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--white);line-height:1.2;}
.location-card p{font-size:var(--text-body-sm);font-weight:400;line-height:var(--leading-body);color:var(--text);}
.service-link-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.service-link-grid > a:last-child:nth-child(3n + 1){grid-column:1 / -1;}
.service-link-grid > a:last-child:nth-child(3n + 2){grid-column:span 2;}
.service-link-grid a{
  display:flex;align-items:center;gap:10px;min-height:74px;
  background:var(--surface);padding:18px 20px;color:var(--text);
  text-decoration:none;font-size:var(--text-body-sm);font-weight:500;line-height:var(--leading-snug);
  transition:background 0.2s,color 0.2s;
}
.service-link-grid a::before{content:'->';flex-shrink:0;}
.service-link-grid a:hover{background:var(--panel);color:var(--white);}
.email-cta,.location-email-cta,.prefer-email-band{
  padding:56px 52px;background:var(--panel);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.prefer-email-band{background:var(--surface);border-top:none;}
.email-cta-copy,.location-email-cta > div:first-child,.prefer-email-band > div:first-child{max-width:720px;}
.email-cta-title,.location-email-cta h2,.prefer-email h2,.prefer-email-band h2{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(30px,3.8vw,48px);
  letter-spacing:0.04em;line-height:1.05;color:var(--white);margin-bottom:14px;
}
.email-cta p,.location-email-cta p,.prefer-email p,.prefer-email-band p{font-size:var(--text-body);font-weight:400;line-height:var(--leading-body);color:var(--text);max-width:var(--measure-body);}
.email-cta-address{margin-top:12px;}
.email-cta a:not(.btn),.location-email-cta a:not(.btn),.prefer-email a:not(.btn),.prefer-email-band a:not(.btn),.final-email-cta a{color:var(--cyan);text-decoration:none;}
.email-cta-actions{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0;}
.location-faq .faq-list{max-width:960px;}
.final-email-cta{font-size:var(--text-body);line-height:var(--leading-body);color:var(--white);max-width:var(--measure-body);margin-top:28px;}
.prefer-email{
  border:1px solid var(--border);border-left:3px solid var(--cyan);
  background:var(--panel);padding:28px 30px;margin-bottom:36px;
}
.prefer-email-help{margin:18px 0 22px;}
.prefer-email ul{margin:12px 0 0;padding-left:22px;color:var(--text);display:grid;gap:10px;}
.prefer-email li::marker{color:var(--cyan);}
.svc-location-note{padding:26px 52px;background:var(--black);border-top:1px solid var(--border);}
/* Label sits above the copy, like .section-tag and .svc-section-kicker, so the
   text starts on the shared column edge instead of being indented past an
   inline label. */
.svc-location-note-inner{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.svc-location-note-label{flex:0 0 auto;font-family:'DM Mono',monospace;font-size:var(--text-label);letter-spacing:var(--tracking-label);line-height:var(--leading-body);text-transform:uppercase;color:var(--cyan);}
.svc-location-note p{font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text);max-width:var(--measure-body);}
.svc-location-note a{color:var(--cyan);text-decoration:none;}
.svc-location-note a:hover{text-decoration:underline;}
@media (max-width:860px){
  .article{padding-left:24px;padding-right:24px;}
  [id^="page-insights-"] > .article:not(.article-faq){
    padding:56px 24px;
  }
  [id^="page-insights-"] .article-body .article-callout{
    margin-left:0;
    padding:44px 24px;
  }
  [id^="page-insights-"] > .article-faq{
    padding:52px 24px;
  }
  [id^="page-insights-"] > .cta-band{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding-left:24px;
    padding-right:24px;
  }
  [id^="page-insights-"] > .cta-band > div:last-child{margin-left:0;}
  .location-section{padding:56px 24px;}
  .svc-location-note{padding:22px 24px;}
  .svc-location-note-inner{gap:8px;}
  .location-card-grid,.service-link-grid{grid-template-columns:1fr;}
  .service-link-grid > a:last-child:nth-child(3n + 1),.service-link-grid > a:last-child:nth-child(3n + 2){grid-column:auto;}
  .email-cta,.location-email-cta,.prefer-email-band{padding:44px 24px;flex-direction:column;align-items:flex-start;}
}

@media (max-width:600px){
  .agent-flow{gap:8px;padding:18px;font-size:var(--text-label);letter-spacing:0.04em;}
  .agent-flow-step{padding:7px 9px;}
}
@media (max-width:720px){
  .insight-table-wrap{
    border:none;
    background:transparent;
    overflow:visible;
  }
  .insight-table,
  .insight-table thead,
  .insight-table tbody,
  .insight-table tr,
  .insight-table th,
  .insight-table td{
    display:block;
    width:100%;
  }
  .insight-table{
    table-layout:auto;
    font-size:var(--text-body-sm);
  }
  .insight-table thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .insight-table tbody{
    display:grid;
    gap:14px;
  }
  .insight-table tr{
    border:1px solid var(--border);
    background:var(--surface);
  }
  .insight-table tr:nth-child(even) td{background:transparent;}
  .insight-table td{
    display:grid;
    grid-template-columns:minmax(112px,34%) minmax(0,1fr);
    gap:14px;
    align-items:start;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    line-height:1.55;
  }
  .insight-table td:first-child{
    width:100%;
    background:var(--panel);
    color:var(--white);
  }
  .insight-table td:last-child{border-bottom:none;}
  .insight-table td::before{
    content:attr(data-label);
    color:var(--cyan);
    font-family:'DM Mono',monospace;
    font-size:var(--text-label);
    font-weight:600;
    letter-spacing:0.1em;
    line-height:var(--leading-label);
    text-transform:uppercase;
  }
}
@media (max-width:600px){
  .article{padding:44px 20px;}
  .article-body{gap:30px;}
  [id^="page-insights-"] > .article:not(.article-faq){
    padding:44px 20px;
  }
  [id^="page-insights-"] .article-body .article-callout{
    margin-left:0;
    padding:38px 20px;
  }
  [id^="page-insights-"] > .article-faq{
    padding:44px 20px;
  }
  .email-cta-actions,.email-cta-actions .btn{width:100%;}
  .email-cta-actions .btn{justify-content:center;}
  .insight-table td{
    grid-template-columns:1fr;
    gap:6px;
    padding:14px;
  }
  .prefer-email{padding:24px 22px;}
}
/* Closing CTA block - replaces inline "Speak with RTCS" link */
.svc-closing{
  position:relative;margin-top:36px;
  padding:36px 40px;
  background:linear-gradient(135deg,var(--surface) 0%,var(--panel) 100%);
  border:1px solid var(--border);border-left:3px solid var(--cyan);
  overflow:hidden;
}
.svc-closing::after{
  content:'';position:absolute;top:0;right:0;width:240px;height:100%;
  background:radial-gradient(circle at top right,rgba(0,212,255,0.12),transparent 60%);
  pointer-events:none;
}
.svc-closing-p{font-size:var(--text-body);font-weight:400;line-height:var(--leading-body);color:var(--white);max-width:var(--measure-body);position:relative;}
.svc-closing-actions{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap;position:relative;}
.svc-closing .btn-cyan{padding:16px 30px;font-size:var(--text-cta);letter-spacing:0.12em;}
.svc-closing .btn-cyan .arr{display:inline-block;transition:transform 0.2s;margin-left:6px;}
.svc-closing .btn-cyan:hover .arr{transform:translateX(6px);}
.svc-closing .btn-ghost{padding:16px 28px;font-size:var(--text-cta);letter-spacing:0.12em;}

/* Copy left, actions right - the same shape as .cta-band. The copy is capped
   to the reading measure, so stacking the buttons underneath it left the whole
   right-hand half of the panel empty. Below 861px it stays stacked. */
@media (min-width:861px){
  .svc-closing{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;
    /* row-gap matches the original stacked spacing, so when the panel is too
       narrow to seat both on one line the wrapped result is the old layout. */
    gap:24px 40px;
  }
  .svc-closing-actions{margin-top:0;flex-shrink:0;}
}

@media (max-width:600px){
  .svc-closing{padding:28px 24px;}
  .svc-closing-actions{display:grid;grid-template-columns:minmax(0,1fr);}
  .svc-closing .btn-cyan,.svc-closing .btn-ghost{width:100%;min-width:0;justify-content:center;white-space:normal;text-align:center;}
}
@media (max-width:860px){
  .svc-section{padding:56px 24px;}
  .svc-split{grid-template-columns:1fr;gap:18px;}
  .svc-checklist{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------------
   Typography floors and zoom safety.

   Everything above works off the tokens in :root. The rules below are the
   backstop: they catch text that still carries a hard-coded size from an
   inline style attribute, and they keep text containers able to grow when a
   reader enlarges text or overrides spacing (WCAG 2.2 1.4.4 / 1.4.10 / 1.4.12).
--------------------------------------------------------------------------- */

/* Backstop for unclassed prose. :where() keeps specificity at zero so any
   component rule (and every inline style) still wins. */
:where(main) :where(p:not([class])){
  line-height:var(--leading-body);
  max-width:var(--measure-body);
}

/* Boxes that hold text grow with the text instead of clipping it. */
.success-icon,.footer-social{flex-shrink:0;}
.threat-ticker{height:auto;min-height:40px;}
.ticker-label{height:auto;}
.smb-stat{height:auto;min-height:112px;}
.location-card{height:auto;min-height:190px;}
.service-link-grid a{height:auto;min-height:74px;}
.svc-pill{height:auto;min-height:66px;}
.sol-acc-go{height:auto;min-height:28px;}

/* Overflow is only ever used for decorative layers, never over live text. */
.metric,.svc-stat,.intro-stat,.e8-card,.fw-card,
.svc-info-card,.svc-q-card,.detail-box,.form-panel,.form-group{
  overflow:visible;
}

@media (max-width:400px){.nav-cta,a.nav-cta{display:none;}}

/* ---------------------------------------------------------------------------
   Shared gutters at the narrow breakpoints.

   The site steps its gutter 52 -> 24 -> 16px. Several bands were missing one
   or both steps - .svc-section had neither, so on all 29 service pages it sat
   28px inboard of the hero above it on tablets and 8px on phones. These two
   blocks only normalise the horizontal gutter; every layout change (stacking,
   grid collapsing) stays at whatever breakpoint it already used.

   Placed here, after the base rules, so ordering alone decides the cascade -
   no !important - and the selectors mirror the specificity of the insights
   overrides above so those do not win by being more specific.
   --------------------------------------------------------------------------- */
@media (max-width:1024px){
  .svc-section,
  .svc-faq,
  .article,
  .approach-principles,
  .email-cta,
  .location-email-cta,
  .prefer-email-band,
  .location-section,
  .svc-location-note,
  [id^="page-insights-"] > .article:not(.article-faq),
  [id^="page-insights-"] > .article-faq,
  [id^="page-insights-"] > .cta-band{
    padding-left:24px;
    padding-right:24px;
  }
}

@media (max-width:600px){
  .svc-section,
  .svc-faq,
  .article,
  .approach-principles,
  .cta-band,
  .email-cta,
  .location-email-cta,
  .prefer-email-band,
  .location-section,
  .svc-location-note,
  [id^="page-insights-"] > .article:not(.article-faq),
  [id^="page-insights-"] > .article-faq,
  [id^="page-insights-"] > .cta-band{
    padding-left:16px;
    padding-right:16px;
  }
}

/* ---------------------------------------------------------------------------
   Shared content column on wide monitors.

   Every band keeps its full-bleed background and border - only the content
   inside is brought to a common column, so a service section lines up with the
   hero above it, the nav, and the footer. 1600 + 2*52 = 1704, so below 1705px
   --gutter-x stays at its 52px default and nothing here changes the layout at
   all; this engages only on genuinely wide screens.

   Placed last so it wins over the section rules above without !important;
   !important is used only for sections whose padding is set inline in the
   markup, and only inside this query, so the mobile gutters are untouched.
   --------------------------------------------------------------------------- */
@media (min-width:1705px){
  :root{ --gutter-x: calc((100vw - var(--content-max)) / 2); }

  body > nav,
  footer,
  .section,
  .page-hero-bar,
  .hero,
  .intro-section,
  .trust-bar,
  .cta-band,
  .email-cta,
  .location-section,
  .location-email-cta,
  .prefer-email-band,
  .svc-section,
  .svc-faq,
  .svc-location-note,
  .about-hero,
  .contact-layout,
  .essential-eight,
  .acsc-compliance,
  .platform-arch,
  .smb-stats-section,
  .sol-acc-head,
  /* These match the specificity of the insights overrides further up, which
     would otherwise keep their hard-coded 52px. */
  [id^="page-insights-"] > .article:not(.article-faq),
  [id^="page-insights-"] > .article-faq,
  [id^="page-insights-"] > .cta-band{
    padding-left: var(--gutter-x);
    padding-right: var(--gutter-x);
  }

  /* Sections whose padding lives in an inline style attribute. */
  main > .page > section[style*="52px"],
  main > .page > div[style*="52px"],
  main > .page > div > section[style*="52px"]{
    padding-left: var(--gutter-x) !important;
    padding-right: var(--gutter-x) !important;
  }

  /* Full-bleed strips pull back out to the viewport edge by exactly one
     gutter, so they must track it. */
  .metrics-bar{
    margin-left: calc(-1 * var(--gutter-x));
    margin-right: calc(-1 * var(--gutter-x));
  }

  /* Split panels are two half-width cells with their own padding. Only the
     outer edges move to the shared column; the 52px either side of the centre
     divider is the gap between the columns and stays put. */
  .sol-solution-info{  padding-left:  var(--gutter-x); }
  .sol-solution-detail{ padding-right: var(--gutter-x); }
  /* Inset the whole split band; its head is a fixed 300px column, so putting
     the gutter on the head itself would eat the column's content width. */
  .approach-principles{
    padding-left: var(--gutter-x);
    padding-right: var(--gutter-x);
  }
}