/* ==========================================================================
   GSKordeven Orbit 7.0 - base styles (dark edition)
   --------------------------------------------------------------------------
   The 3D components live in three-d.css. This file holds the palette, the
   page furniture and the ordinary content styling.

   1.  Tokens
   2.  Base elements
   3.  Header, navigation and the neon rail
   4.  Buttons
   5.  Hero
   6.  Sections and headings
   7.  Service rows (services page)
   8.  Statistics text furniture
   9.  Legal and content pages
   10. Contact page furniture
   11. Call to action, footer, cookie notice, toast
   12. Reveal motion
   13. Responsive
   14. Reduced motion, print, forced colours
   ========================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  /* surfaces - soft dark, deliberately not pure black */
  --page:#1a1d23;
  --page-2:#20242c;
  --page-3:#232831;
  --band:#21252c;
  --band-2:#282d36;
  --surface:#2c3543;
  --surface-2:#262d38;
  --raised:#303a4a;

  /* ink */
  --text:#f7f5f1;
  --text-2:#e5e9ef;
  --muted:#cbd2dc;
  --muted-2:#a3aebd;

  /* brand */
  --blue:#39aaff;
  --blue-deep:#1a7cff;
  --cyan:#62d7ff;
  --purple:#8460d9;
  --purple-2:#b29bff;

  /* lines and depth */
  --line:rgba(96,168,231,.32);
  --line-soft:rgba(96,168,231,.18);
  --line-strong:rgba(67,165,239,.67);
  --focus:#62d7ff;
  --danger:#ff8d99;
  --danger-soft:rgba(143,32,47,.28);
  --ok:#7ae3ba;

  --radius:14px;
  --radius-sm:10px;
  --max:1200px;

  --shadow-1:0 2px 6px rgba(6,9,14,.30);
  --shadow-2:0 12px 34px rgba(6,9,14,.38);
  --shadow-3:0 26px 62px rgba(6,9,14,.48);
  --glow:0 0 34px rgba(57,170,255,.28);

  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --header-h:84px;
}

/* ============ 2. BASE ELEMENTS ============ */
*,*::before,*::after{box-sizing:border-box}

/*
 * The hidden attribute has to be enforced here, and it needs !important.
 *
 * Browsers hide [hidden] through their own default stylesheet, and ANY author
 * rule beats a browser default however specific it is. So the moment this file
 * said .btn{display:inline-flex}, every button carrying the hidden attribute
 * became visible again.
 *
 * That is exactly what went wrong on the enquiry form. The script correctly set
 * hidden on "Back" and "Send secure enquiry" while the visitor was still on the
 * first step, and both buttons stayed on screen regardless. People saw a Send
 * button before they had filled anything in, which made the form look as though
 * it would submit early, and left it unclear that Continue was the way forward.
 */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  background:linear-gradient(180deg,var(--page) 0%,var(--page-3) 48%,#1d2027 100%);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* two slow brand washes fixed behind the page */
body::before,body::after{
  content:"";position:fixed;z-index:-2;pointer-events:none;
  filter:blur(58px);opacity:.30;will-change:transform;
}
body::before{
  width:64vw;height:36vw;left:-16vw;top:8vh;
  background:radial-gradient(ellipse,rgba(42,151,230,.42),transparent 70%);
  animation:washA 24s ease-in-out infinite alternate;
}
body::after{
  width:56vw;height:38vw;right:-17vw;top:46vh;
  background:radial-gradient(ellipse,rgba(139,92,210,.38),transparent 70%);
  animation:washB 29s ease-in-out infinite alternate;
}
@keyframes washA{to{transform:translate(9vw,8vh) scale(1.1)}}
@keyframes washB{to{transform:translate(-8vw,-7vh) scale(1.12)}}

h1,h2,h3,h4{color:var(--text);font-weight:800;letter-spacing:-.022em}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img,svg,video,canvas{max-width:100%;height:auto}
ul,ol{padding-left:1.15em}
li::marker{color:var(--blue)}
strong{font-weight:750;color:var(--text)}
hr{border:0;border-top:1px solid var(--line-soft);margin:32px 0}
:where(button,a,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:4px;
}
.container{width:min(var(--max),calc(100% - 44px));margin-inline:auto}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:16px;top:16px;z-index:999;padding:12px 16px;
  background:var(--surface);color:var(--text);
  border:2px solid var(--blue);border-radius:8px;font-weight:750;
}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============ 3. HEADER, NAVIGATION AND THE NEON RAIL ============ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(29,32,39,.92);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.site-header.is-scrolled{box-shadow:0 10px 30px rgba(6,9,14,.45)}
.nav{position:relative;min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
/* The GSKordeven lockup is a wide 3:1 mark, where the old one was almost
   square. At the previous 132px it stood only 44px tall and the wordmark
   was unreadable, so the width goes up to keep the name legible. */
.brand img,.brand .custom-logo{width:196px;height:auto;display:block;filter:drop-shadow(0 8px 22px rgba(37,134,255,.30))}
.nav-links{display:flex;align-items:center;gap:6px}
.primary-menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.primary-menu li{margin:0;padding:0;list-style:none}
.primary-menu a{
  display:block;padding:9px 12px;border-radius:8px;
  color:var(--text-2);font-size:.93rem;font-weight:650;text-decoration:none;
  transition:color .18s ease,background .18s ease;
}
.primary-menu a:hover{color:#fff;background:rgba(57,170,255,.12);text-decoration:none}
.primary-menu .current-menu-item>a,
.primary-menu .current_page_item>a,
.primary-menu .current-menu-ancestor>a,
.primary-menu .current-page-ancestor>a{color:#fff;background:rgba(57,170,255,.16);font-weight:750}
.nav-toggle{
  display:none;align-items:center;gap:8px;
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:rgba(57,170,255,.08);color:var(--text);font:inherit;font-weight:750;cursor:pointer;
}
.nav-toggle:hover{border-color:var(--blue);color:var(--cyan)}
.nav-toggle-bars{display:grid;gap:3px;width:16px}
.nav-toggle-bars i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* the neon rail: always breathing, sweeps on navigation */
.neon-rail{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  overflow:hidden;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(57,170,255,.16),rgba(132,96,217,.34) 30%,rgba(57,170,255,.48) 50%,
    rgba(132,96,217,.34) 70%,rgba(57,170,255,.16));
  animation:railBreathe 3.6s ease-in-out infinite;
}
@keyframes railBreathe{0%,100%{opacity:.6}50%{opacity:1}}
.neon-rail i{
  position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(57,170,255,.6) 26%,
    var(--cyan) 44%,#ffffff 50%,var(--purple-2) 56%,rgba(132,96,217,.6) 74%,transparent);
  filter:drop-shadow(0 0 7px rgba(98,215,255,.85)) drop-shadow(0 0 14px rgba(132,96,217,.5));
  transform:translateX(-120%);
  animation:railTravel 5.4s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change:transform;
}
@keyframes railTravel{0%{transform:translateX(-120%);opacity:0}8%{opacity:1}86%{opacity:1}100%{transform:translateX(320%);opacity:0}}
.neon-rail.sweep i{animation:railSweep .9s cubic-bezier(.35,.85,.25,1) 1}
.neon-rail.sweep-rev i{animation:railSweepRev .9s cubic-bezier(.35,.85,.25,1) 1}
@keyframes railSweep{0%{transform:translateX(-120%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(320%);opacity:0}}
@keyframes railSweepRev{0%{transform:translateX(320%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(-120%);opacity:0}}
/* a short glow on the whole header when something opens */
.nav.flash{animation:navFlash .6s ease-out}
@keyframes navFlash{
  0%{box-shadow:0 0 0 rgba(98,215,255,0)}
  30%{box-shadow:0 12px 42px -12px rgba(98,215,255,.55)}
  100%{box-shadow:0 0 0 rgba(98,215,255,0)}
}
.neon-divider{
  position:relative;height:2px;margin:0;border:0;overflow:hidden;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(57,170,255,.5),rgba(132,96,217,.5),transparent);
}

/* ============ 4. BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border-radius:10px;border:1px solid transparent;
  font:inherit;font-weight:750;line-height:1.25;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{
  color:#04121a;
  background:linear-gradient(120deg,var(--blue-deep),var(--cyan));
  box-shadow:0 10px 26px rgba(26,124,255,.28);
}
.btn-primary:hover{box-shadow:0 16px 38px rgba(26,124,255,.4);color:#04121a}
.btn-secondary{background:rgba(57,170,255,.10);color:#eef8ff;border-color:var(--line)}
.btn-secondary:hover{border-color:var(--cyan);background:rgba(57,170,255,.18)}
.btn-purple{background:linear-gradient(120deg,#5c3ccc,#8c67ff);color:#fff;border:0}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cyan);color:#fff;background:rgba(57,170,255,.08)}
.btn-small{padding:9px 14px;font-size:.86rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}

/* ============ 5. HERO ============ */
.hero{
  position:relative;overflow:hidden;
  padding:74px 0 78px;
  border-bottom:1px solid var(--line-soft);
  /*
   * The glass-tower photograph, dimmed hard.
   *
   * Layer order top to bottom: the dimming veil, the photograph, then the old
   * gradient as a fallback if the file is ever missing or slow.
   *
   * The veil is heavier on the left, where the headline and body copy sit, and
   * lighter on the right, where only the shield stage is. That keeps the text
   * on a near-solid ground while the picture still reads on the open side.
   * Without the veil the white lit windows sit directly behind white type.
   */
  background:
    linear-gradient(100deg,
      rgba(20,23,29,.95) 0 32%,
      rgba(22,26,34,.88) 52%,
      rgba(28,33,45,.70) 100%),
    url("../images/hero-city.jpg") center 40% / cover no-repeat,
    linear-gradient(118deg,#20242b 0 48%,#293448 73%,#382d3d 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(110deg,transparent 0 42%,rgba(58,154,230,.10) 42.15% 42.35%,
      transparent 42.5% 61%,rgba(135,92,210,.1) 61.1% 61.3%,transparent 61.4%),
    radial-gradient(circle at 75% 40%,rgba(45,145,224,.18),transparent 32%);
  animation:ribbonShift 15s ease-in-out infinite alternate;
}
@keyframes ribbonShift{to{transform:translateX(3vw) scale(1.03)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:58px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--cyan);font-size:.74rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--purple),var(--blue))}
.hero h1{margin:16px 0 14px;max-width:16ch;font-size:clamp(2.35rem,5vw,4.4rem);line-height:1.03;letter-spacing:-.04em}
.hero h1 .accent{
  background:linear-gradient(104deg,var(--cyan) 10%,var(--purple-2) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-highlight{margin:0 0 16px;color:var(--blue);font-size:clamp(1.15rem,2vw,1.6rem);font-weight:700;letter-spacing:-.015em}
.hero-copy{max-width:56ch;margin:0;color:var(--muted);font-size:1.05rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-note{margin-top:18px;color:var(--muted-2);font-size:.86rem}

/* ============ 6. SECTIONS AND HEADINGS ============ */
.section{position:relative;padding:82px 0}
.section-band{background:linear-gradient(180deg,var(--band),var(--band-2));border-block:1px solid var(--line-soft)}
.section-heading{max-width:56ch;margin:0 0 36px}
.section-heading.center{text-align:center;margin-inline:auto}
.section-heading h2,.page-hero h1{margin:13px 0 12px;font-size:clamp(1.85rem,3.6vw,3.1rem);line-height:1.1;letter-spacing:-.03em}
.section-heading p,.page-hero p{margin:0;color:var(--muted);font-size:1.02rem}

/* ============ 7. SERVICE ROWS (services page) ============ */
/* Every service is a separate, self-contained panel. Nothing is grouped. */
.service-list{display:grid;gap:28px}
.service-row{
  position:relative;
  display:grid;grid-template-columns:290px minmax(0,1fr);gap:34px;align-items:center;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
  padding:30px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(44,53,67,.97),rgba(31,36,45,.98));
  box-shadow:var(--shadow-2);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.service-row:hover{border-color:rgba(98,215,255,.5);box-shadow:var(--shadow-3)}
.service-row>*{position:relative;z-index:1}
.service-row:nth-child(even){grid-template-columns:minmax(0,1fr) 290px}
.service-row:nth-child(even) .service-figure{order:2}
.service-figure{
  display:flex;align-items:center;justify-content:center;padding:14px;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:rgba(37,45,56,.62);
}
.service-figure img{display:block;width:100%;max-width:248px}
.service-details h2{margin:8px 0 12px;font-size:clamp(1.55rem,2.6vw,2.15rem)}
.service-details h3{margin:22px 0 8px;font-size:1.04rem;color:var(--blue)}
.service-details p,.service-details li{color:var(--muted)}
.service-details>p:last-child{margin-bottom:0}

/* callout notes */
.scope-note,.plain-note,.stat-scope-note{
  margin:18px 0 0;padding:16px 18px;border-radius:var(--radius-sm);font-size:.9rem;
}
.scope-note{border:1px solid rgba(132,96,217,.42);border-left:4px solid var(--purple);background:rgba(104,69,213,.12);color:#e0d9fb}
.plain-note{border:1px solid rgba(57,170,255,.32);border-left:4px solid var(--blue);background:rgba(47,141,255,.10);color:#dcecfb}
.stat-scope-note{border:1px solid var(--line-soft);border-left:4px solid var(--blue);background:rgba(57,170,255,.08);color:var(--muted)}
.scope-note strong,.plain-note strong,.stat-scope-note strong{color:#fff}

/* the three "what secure means" panels, and the 404 signposts */
.standards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.standards-grid.two{grid-template-columns:repeat(2,1fr)}
.standard-card{
  padding:24px;border:1px solid var(--line-soft);border-top:3px solid var(--blue);
  border-radius:var(--radius-sm);background:rgba(46,55,68,.9);box-shadow:var(--shadow-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.standard-card:nth-child(even){border-top-color:var(--purple)}
.standard-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:rgba(98,215,255,.4)}
.standard-card h3{margin:0 0 8px;font-size:1.08rem}
.standard-card p{margin:0;color:var(--muted);font-size:.9rem}

.signal-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:rgba(42,49,60,.9);box-shadow:var(--shadow-2);
}
.signal-cell{padding:24px;border-right:1px solid var(--line-soft)}
.signal-cell:last-child{border-right:0}
.signal-cell strong{display:block;margin-bottom:4px;color:#fff;font-size:1.16rem;font-weight:800}
.signal-cell span{color:var(--muted);font-size:.86rem}

.standard-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.standard-tags span{
  padding:5px 9px;border:1px solid rgba(91,183,255,.34);border-radius:999px;
  background:rgba(47,141,255,.10);color:#bbdcf4;font-size:.73rem;font-weight:700;
}

/* ============ 8. STATISTICS TEXT FURNITURE ============ */
.stats-shell{display:grid;grid-template-columns:1fr 1.08fr;gap:44px;align-items:center}
.stats-page-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.stats-intro p{color:var(--muted)}
.stats-welcome{
  margin:16px 0;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid rgba(132,96,217,.34);border-left:4px solid var(--purple);
  background:rgba(132,96,217,.12);color:#e0d9fb;font-size:.92rem;
}

/* ============ 9. LEGAL AND CONTENT PAGES ============ */
.page-hero{
  position:relative;overflow:hidden;padding:72px 0 58px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(135deg,#252b35,#303a4b 62%,#382d42);
}
.page-hero::after{
  content:"";position:absolute;right:-12vw;top:-22vw;width:45vw;height:45vw;
  border:1px solid rgba(75,168,255,.20);border-radius:50%;pointer-events:none;
}
.page-hero .container{position:relative;z-index:1}
.page-hero p{max-width:66ch;margin-top:0}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:46px;align-items:start}
.legal-copy{max-width:74ch}
.legal-copy>section{scroll-margin-top:calc(var(--header-h) + 20px)}
.legal-copy h2{margin:34px 0 10px;font-size:1.4rem}
.legal-copy>p:first-child{margin-top:0}
.legal-copy h3{margin:24px 0 8px;font-size:1.06rem;color:var(--blue)}
.legal-copy p,.legal-copy li{color:var(--muted)}
.legal-copy a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.legal-nav{
  position:sticky;top:calc(var(--header-h) + 18px);align-self:start;
  padding:18px 20px;border:1px solid var(--line-soft);border-left:2px solid var(--purple);
  border-radius:var(--radius-sm);background:rgba(44,53,67,.7);
}
.legal-nav>strong{display:block;margin-bottom:8px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.legal-nav a{display:block;padding:5px 0;color:var(--muted);font-size:.85rem;text-decoration:none}
.legal-nav a:hover{color:#fff;text-decoration:underline}
.source-list{display:grid;gap:12px;margin-top:16px}
.source-item{
  padding:16px;border:1px solid var(--line-soft);border-left:4px solid var(--blue);
  border-radius:var(--radius-sm);background:rgba(42,133,255,.08);
}
.source-item a{color:var(--cyan);text-decoration:underline}
.source-item small{display:block;margin-top:6px;color:var(--muted-2)}

/* ============ 10. CONTACT PAGE FURNITURE ============ */
.contact-layout{display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);gap:30px;align-items:start}
.contact-card{
  padding:28px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(44,53,67,.97),rgba(31,36,45,.98));box-shadow:var(--shadow-2);
}
.contact-card h2{margin:12px 0 10px;font-size:1.3rem}
.contact-card p{color:var(--muted)}
.contact-points{display:grid;gap:11px;margin-top:22px}
.contact-point{
  padding:14px;border:1px solid var(--line-soft);border-left:4px solid var(--blue);
  border-radius:var(--radius-sm);background:rgba(36,122,255,.09);font-size:.9rem;color:var(--muted);
}
.contact-point strong{color:#fff}
.contact-point a{color:var(--cyan);text-decoration:underline;word-break:break-word}

/* ============ 11. CTA, FOOTER, COOKIE NOTICE, TOAST ============ */
.cta{
  padding:66px 0;border-top:1px solid var(--line-soft);
  background:radial-gradient(circle at 20% 50%,rgba(54,143,221,.20),transparent 30%),
             linear-gradient(120deg,#28354a,#382b51 62%,#222733);
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:34px}
.cta-copy{max-width:62ch}
.cta h2{margin:0;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.028em}
.cta p{margin:11px 0 0;color:#ceddf0}
.cta .btn{flex:0 0 auto}

.footer{
  position:relative;overflow:hidden;padding:52px 0 26px;text-align:center;
  border-top:1px solid var(--line-soft);
  background:radial-gradient(circle at 48% 0,rgba(73,146,210,.18),transparent 32%),
             linear-gradient(130deg,#20242b,#2a3039 50%,#22252d);
}
.footer-inner{position:relative;z-index:1;max-width:920px;margin-inline:auto}
.footer-logo{width:172px;margin:0 auto 14px;display:block;filter:drop-shadow(0 8px 19px rgba(42,137,255,.24))}
.footer-tagline{max-width:64ch;margin:0 auto 18px;color:#d8e5f2;font-size:.94rem}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}
.footer-nav a{color:var(--text-2);font-size:.92rem;font-weight:700;text-decoration:none}
.footer-nav a:hover{color:var(--blue);text-decoration:underline}
.footer-divider{width:110px;margin:22px auto}
.footer-where{color:#9fb2c6;font-size:.82rem;margin:14px auto 0;max-width:70ch;line-height:1.6;overflow-wrap:break-word;word-break:normal}
.footer-address{display:inline;font-style:normal}
.footer-legal{color:#b9c8d9;font-size:.85rem}
.footer-legal a{color:var(--cyan);text-decoration:underline}
.socials{display:flex;justify-content:center;gap:10px;margin-top:22px}
.social{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(105,161,237,.42);border-radius:10px;
  background:rgba(156,202,255,.09);color:#c8dcf3;
  transition:transform .2s ease,color .2s ease,border-color .2s ease,background .2s ease;
}
.social:hover{transform:translateY(-2px);color:#fff;border-color:var(--cyan);background:linear-gradient(145deg,rgba(57,144,255,.4),rgba(110,72,233,.4))}
.social svg{display:block;width:21px;height:21px;fill:currentColor;pointer-events:none}
.footer-bottom{
  max-width:74ch;margin:26px auto 0;padding-top:18px;
  border-top:1px solid rgba(126,166,230,.24);color:var(--muted-2);font-size:.78rem;
}
.footer-bottom a{color:var(--cyan);text-decoration:underline}

.cookie{
  display:none;position:fixed;left:50%;bottom:18px;z-index:90;
  width:min(800px,calc(100% - 30px));transform:translateX(-50%);
  padding:18px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:rgba(24,28,36,.98);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}
.cookie.show{display:flex;align-items:center;justify-content:space-between;gap:18px}
.cookie p{margin:0;color:#d1dfed;font-size:.86rem}
.cookie p a{color:var(--cyan);text-decoration:underline}
.cookie-actions{flex:0 0 auto}
.toast{
  position:fixed;right:18px;bottom:18px;z-index:100;
  max-width:390px;padding:15px 18px;
  border:1px solid var(--line-strong);border-left:4px solid var(--blue);
  border-radius:var(--radius-sm);background:rgba(28,33,42,.98);color:var(--text-2);
  box-shadow:0 18px 50px rgba(0,0,0,.5);font-size:.9rem;
  transform:translateY(24px);opacity:0;pointer-events:none;
  transition:transform .25s ease,opacity .25s ease;
}
.toast.show{transform:none;opacity:1}
.toast.error{border-left-color:var(--danger);background:rgba(72,26,32,.98);color:#ffe2e5}

/* ============ 12. REVEAL MOTION ============ */
/* Content is visible by default and only hidden once JavaScript has added
   .csc-anim, immediately before it starts observing. Nothing can leave the
   page blank. */
.reveal{transition:opacity .7s ease,transform .7s ease}
.csc-anim .reveal{opacity:0;transform:translateY(20px)}
.csc-anim .reveal.visible{opacity:1;transform:none}

/* ============ 13. RESPONSIVE ============ */
@media(max-width:1080px){
  .stats-page-layout{grid-template-columns:1fr}
  .content-grid{grid-template-columns:minmax(0,1fr) 220px;gap:32px}
}
@media(max-width:960px){
  :root{--header-h:74px}
  .nav-toggle{display:inline-flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:16px 22px 20px;
    background:rgba(29,32,39,.99);border-bottom:1px solid var(--line-soft);
    box-shadow:0 16px 34px rgba(6,9,14,.5);
  }
  .nav-links.open{display:flex}
  .primary-menu{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .primary-menu a{padding:12px;border-radius:8px;font-size:1rem}
  .nav-links .btn{width:100%;margin-top:8px}
  .hero{padding:56px 0 60px}
  .hero-grid,.stats-shell,.contact-layout,.content-grid{grid-template-columns:1fr;gap:40px}
  .hero h1{max-width:22ch}
  .standards-grid,.standards-grid.two{grid-template-columns:1fr}
  .signal-strip{grid-template-columns:repeat(2,1fr)}
  .signal-cell:nth-child(2n){border-right:0}
  .signal-cell:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .legal-nav{position:static;top:auto}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .section{padding:66px 0}
}
@media(max-width:640px){
  .container{width:min(var(--max),calc(100% - 32px))}
  .brand img,.brand .custom-logo{width:112px}
  .hero{padding:44px 0 50px}
  .hero h1{font-size:clamp(2rem,9.5vw,2.9rem)}
  .hero-actions .btn{width:100%}
  .section{padding:52px 0}
  .service-row,.service-row:nth-child(even){grid-template-columns:1fr;gap:22px;padding:22px}
  .service-row:nth-child(even) .service-figure{order:0}
  .service-figure img{max-width:210px}
  .signal-strip{grid-template-columns:1fr}
  .signal-cell{border-right:0;border-bottom:1px solid var(--line-soft)}
  .signal-cell:last-child{border-bottom:0}
  .contact-card{padding:22px}
  .cta{padding:52px 0}
  .cta .btn{width:100%}
  .cookie.show{display:block}
  .cookie-actions{margin-top:14px}
  .cookie-actions .btn{width:100%}
  .toast{left:14px;right:14px;max-width:none;bottom:14px}
  .footer-nav{gap:14px}
}

/* ============ 14. REDUCED MOTION, PRINT, FORCED COLOURS ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .csc-anim .reveal{opacity:1;transform:none}
  .neon-rail,.neon-rail i,body::before,body::after,.hero::before{animation:none!important}
  .neon-rail i{opacity:1;transform:translateX(31%)}
}
@media(forced-colors:active){
  .btn,.standard-tags span{border:1px solid currentColor}
  .neon-rail{background:currentColor}
}
@media print{
  body::before,body::after,.site-header,.footer,.cookie,.toast,.cta,.legal-nav{display:none!important}
  body{background:#fff;color:#000}
  .section,.page-hero,.hero{padding:16px 0;background:none;border:0}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}

/* ============ 15. GLOSS ============
   --------------------------------------------------------------------------
   The palette was matte: flat fills with a single soft gradient, which reads
   as painted card rather than glass.

   What actually makes a dark surface look glossy is not more colour, it is a
   light source. Three things are added here and nothing else:

     1. A specular highlight one pixel deep along the top edge of a panel, as
        though a light above it is catching the lip.
     2. A broad, very weak sheen falling from the top-left corner across the
        face, which is the reflection itself.
     3. A slightly deeper falloff underneath, so the panel sits in front of the
        page rather than being painted on it.

   Every value is deliberately small. Gloss stops looking like glass and starts
   looking like plastic the moment the highlights get strong.

   This section is appended rather than merged into the rules above, so the
   original declarations stay intact and the whole effect can be removed by
   deleting one block.
   ------------------------------------------------------------------------ */

/* The page itself: a sheen falling from the top, and depth at the foot. */
body{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.055) 0,
      rgba(255,255,255,.022) 9%,
      rgba(255,255,255,0) 26%),
    radial-gradient(120% 52% at 50% 0%, rgba(126,196,255,.11), transparent 62%),
    linear-gradient(180deg,var(--page) 0%,var(--page-3) 48%,#1d2027 100%);
}

/*
 * The shared reflection.
 *
 * One rule, applied to every panel on the site, so a card on the home page and
 * a card on the statistics page catch the light the same way. Using ::after
 * leaves each panel's own background and box-shadow untouched.
 *
 * border-radius:inherit keeps the reflection inside rounded corners, and
 * pointer-events:none keeps it from swallowing clicks on the flip cards.
 */
.flip-face::after,
.csc-face::after,
.stat-slide::after,
.contact-card::after,
.standard-card::after,
.service-row::after,
.cta::after,
.section-band::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(157deg,
    rgba(255,255,255,.11) 0%,
    rgba(255,255,255,.035) 24%,
    rgba(255,255,255,0) 54%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

/*
 * These panels are grid items or plain blocks, so they are statically
 * positioned and the reflection above would escape them. .csc-face and
 * .stat-slide are deliberately left out: they are already positioned, and
 * forcing position:relative on them would break the carousel flip and the
 * statistics deck, both of which stack their faces in one place.
 */
.flip-face,
.contact-card,
.standard-card,
.cta,
.section-band{position:relative}

/* A band is wide and shallow, so it takes the sheen straight down rather than
   across a corner, and no top highlight: a full-width line looks like a rule. */
.section-band::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.05) 0,
    rgba(255,255,255,.012) 22%,
    rgba(255,255,255,0) 60%);
  box-shadow:none;
}

/* The call to action is the one panel that should look wet. */
.cta::after{
  background:linear-gradient(153deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.04) 26%,
    rgba(255,255,255,0) 56%);
}

/* Content has to sit above the reflection, or the sheen washes over the text. */
.cta-inner,
.section-band > .container,
.contact-card > *,
.standard-card > *,
.service-row > *{position:relative;z-index:1}

/* Buttons get a proper lip and a wet edge rather than a flat fill. */
.btn-primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 10px 26px -12px rgba(26,124,255,.55);
}
.btn-secondary,.btn-ghost{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* The header is glass over the page, so it should refract what passes beneath
   it rather than sit on top as a solid strip. */
.site-header{
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}

/* Forced-colours users get a flat, high-contrast page by definition, and a
   reflection drawn over it only reduces legibility. */
@media(forced-colors:active){
  .flip-face::after,.csc-face::after,.stat-slide::after,
  .contact-card::after,.standard-card::after,.service-row::after,
  .cta::after,.section-band::after{display:none}
}

@media print{
  .flip-face::after,.csc-face::after,.stat-slide::after,
  .contact-card::after,.standard-card::after,.service-row::after,
  .cta::after,.section-band::after{display:none}
}

/* ============ 16. PHOTOGRAPHIC SERVICE ART ============
   --------------------------------------------------------------------------
   The service slots were built for the line-art SVGs: a padded box with its
   own panel background, the artwork sized to fit inside it with object-fit:
   contain and capped at 248px wide on the services page. That is right for a
   transparent drawing and wrong for a photograph, which ends up letterboxed
   in the middle of a lighter rectangle looking like a thumbnail someone
   dropped in.

   These rules are matched on the file extension, so a slot behaves one way
   when it holds a photograph and keeps its original behaviour when it still
   holds an SVG. Swapping a service over to a photo needs no CSS change: point
   it at a .jpg and the treatment follows.
   ------------------------------------------------------------------------ */

/* Home page flip cards. */
.tile-art[src$=".jpg"],
.tile-art[src$=".jpeg"],
.tile-art[src$=".webp"]{
  object-fit:cover;
  padding:0;
  background:none;
  /* Photographs are brighter and more saturated than the rest of this dark
     palette. Taking a little of both off lets them sit in the page instead of
     jumping out of it. */
  filter:saturate(.9) brightness(.92);
  transition:filter .35s ease;
}
.flip-tile:hover .tile-art[src$=".jpg"],
.flip-tile:hover .tile-art[src$=".jpeg"],
.flip-tile:hover .tile-art[src$=".webp"]{filter:saturate(1) brightness(1)}

/* Services page rows: the frame loses its padding and panel so the photograph
   can run to the edges, and the border becomes the frame. */
.service-figure:has(img[src$=".jpg"]),
.service-figure:has(img[src$=".jpeg"]),
.service-figure:has(img[src$=".webp"]){
  padding:0;
  background:none;
  overflow:hidden;
}
.service-figure img[src$=".jpg"],
.service-figure img[src$=".jpeg"],
.service-figure img[src$=".webp"]{
  max-width:none;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:calc(var(--radius-sm) - 1px);
  filter:saturate(.9) brightness(.92);
  transition:filter .35s ease,transform .5s cubic-bezier(.2,.85,.25,1);
}
.service-row:hover .service-figure img[src$=".jpg"],
.service-row:hover .service-figure img[src$=".jpeg"],
.service-row:hover .service-figure img[src$=".webp"]{
  filter:saturate(1) brightness(1);
  transform:scale(1.03);
}

@media(prefers-reduced-motion:reduce){
  .service-row:hover .service-figure img[src$=".jpg"],
  .service-row:hover .service-figure img[src$=".jpeg"],
  .service-row:hover .service-figure img[src$=".webp"]{transform:none}
}

/* ============ 17. BUTTON SPARK ============
   --------------------------------------------------------------------------
   A metallic highlight that travels across a button when the pointer is on it,
   the way a reflection slides over polished metal as you turn it.

   How it is built, and why:

     - It is one pseudo-element parked off the left edge and moved to the right
       edge on hover. Only transform changes, which the compositor handles on
       its own thread, so the sweep stays smooth even on a slow phone.
     - The gradient is narrow and steeply angled. A wide, gentle one reads as
       the button changing colour rather than as something crossing it.
     - overflow:hidden keeps the highlight inside the rounded corners, and
       isolation:isolate stops it painting over anything outside the button.
     - It is on .btn, so every variant inherits it: the cyan primary, the
       outlined secondary, the purple and the ghost.

   The travel is deliberately slower than the button's own hover transition.
   The lift happens immediately and the reflection catches up, which is what
   makes it read as a surface being caught by light rather than a flash.
   ------------------------------------------------------------------------ */

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn::after{
  content:"";
  position:absolute;
  /* one pixel beyond every edge, so the highlight covers the border too */
  inset:-1px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(104deg,
    transparent 32%,
    rgba(255,255,255,.20) 45%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.20) 55%,
    transparent 68%);
  transform:translateX(-135%);
  transition:transform .85s cubic-bezier(.22,.68,.28,1);
}

.btn:hover::after,
.btn:focus-visible::after{transform:translateX(135%)}

/* The outlined buttons sit on a dark page, so a white sweep on them looks like
   a smear. Theirs is tinted with the brand cyan and kept fainter. */
.btn-secondary::after,
.btn-ghost::after{
  background:linear-gradient(104deg,
    transparent 32%,
    rgba(98,215,255,.14) 45%,
    rgba(98,215,255,.42) 50%,
    rgba(98,215,255,.14) 55%,
    transparent 68%);
}

/* Nothing should slide across a button that cannot be pressed. */
.btn[disabled]::after,
.btn[aria-disabled="true"]::after{display:none}

@media(prefers-reduced-motion:reduce){
  .btn::after{transition:none}
  .btn:hover::after,
  .btn:focus-visible::after{transform:translateX(-135%)}
}