/* ==========================================================================
   South East Network Installations: fixes.css (design audit, 1 November 2026)
   Drop-in layer. Load AFTER design-system.css and theme.css.
   Purpose: (1) fluid desktop container and full-bleed bands, (2) vivid banners and hero,
   (3) mobile brand presence, (4) wide grid from 1920, (5) premium detailing.
   Uses only existing brand tokens plus the tokens declared below.
   No new image assets. No JavaScript. Safe to remove (nothing else depends on it).
   ========================================================================== */

/* ---------- 0. TOKENS ---------------------------------------------------- */
:root{
  /* Fluid container: 75rem (1200px) up to 1280, then grows with the viewport.
     1440px viewport = 1300px, 1920px = 1600px, 2560px = 1760px (cap 110rem). */
  --container:clamp(75rem,25rem + 62.5vw,110rem);
  --measure:72ch;                         /* body copy line length, never wider */
  --measure-head:clamp(46rem,38vw,64rem); /* section heading block */
  --section-y:clamp(3.5rem,2.5rem + 3.5vw,7.5rem);

  /* Brand tint colours (all from the approved palette, no new hues) */
  --tint-teal:#E3F5F3;   /* info-bg */
  --tint-mist:#F5F8FB;
  --tint-sky:#EAF2F8;    /* mist to cloud midpoint, band end stop */

  /* Gradient and glow tokens */
  --grad-banner-base:linear-gradient(135deg,#071427 0%,#0A1D33 34%,#0B3358 100%);
  --glow-teal:radial-gradient(70% 95% at 100% 0%,rgba(37,201,190,.34),rgba(37,201,190,0) 66%);
  --glow-blue:radial-gradient(62% 85% at 0% 100%,rgba(7,85,138,.85),rgba(7,85,138,0) 70%);
  --lattice:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 30px);
  --grad-hero-mobile:radial-gradient(120% 62% at 100% 0%,rgba(37,201,190,.36),rgba(37,201,190,0) 62%),
                     radial-gradient(95% 55% at 0% 100%,rgba(7,85,138,.9),rgba(7,85,138,0) 72%),
                     linear-gradient(165deg,#0A1D33 0%,#0B3358 64%,#0F2B49 100%);
  --grad-hero-desktop:linear-gradient(90deg,rgba(7,20,39,.97) 0%,rgba(10,29,51,.92) 26%,rgba(10,29,51,.58) 46%,rgba(7,85,138,.16) 70%,rgba(7,85,138,0) 100%),
                      radial-gradient(55% 90% at 100% 100%,rgba(37,201,190,.20),rgba(37,201,190,0) 70%);
  --grad-band-navy:linear-gradient(120deg,#071427 0%,#0A1D33 52%,#0B3358 100%);
  --grad-accent-line:linear-gradient(90deg,#08A7A7,#25C9BE 40%,#07558A);
  --shadow-card:0 1px 2px rgba(10,29,51,.06),0 14px 34px -18px rgba(10,29,51,.38);
  --shadow-card-hover:0 2px 4px rgba(10,29,51,.08),0 24px 48px -20px rgba(7,85,138,.5);
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:1920px){:root{--gutter:3rem}}
@media (min-width:2560px){:root{--gutter:4rem}}

/* ---------- 1. TYPE SCALE ON LARGE SCREENS --------------------------------- */
@media (min-width:1440px){body{font-size:1.0625rem}}
@media (min-width:1920px){body{font-size:1.125rem}}
@media (min-width:2560px){body{font-size:1.1875rem}}
.section h2{font-size:clamp(1.75rem,1.15rem + 1.7vw,3rem);line-height:1.15;letter-spacing:-.015em}
.section p:not([class]),.section .section__head p{max-width:var(--measure)}
.nowrap{white-space:nowrap}                 /* keeps "Wi-Fi" in one piece in headings */

/* ---------- 2. HEADER AND LOGO (P1) ---------------------------------------- */
/* Full lockup (logo-primary-navy.svg) on white at EVERY width. Never the symbol alone.
   Brand pack minimum digital width is 220px: the lockup is 229x44 artwork. */
.header{position:relative;background:#fff;border-bottom:1px solid var(--line,#CBD6E1);
  box-shadow:0 10px 28px -22px rgba(10,29,51,.45)}
.header::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-accent-line)}
.header .brand{display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  padding:.25rem;margin:-.25rem;background:#fff;border-radius:.5rem;forced-color-adjust:none}
.header .brand img{display:block}   /* logo width: theme.css (--logo-w-xs and the width steps), one place */
.header .brand:focus-visible{outline:3px solid var(--focus,#0F6CBD);outline-offset:3px}
.header__inner{min-height:4rem;gap:.5rem}
@media (min-width:768px){.header__inner{min-height:4.75rem;gap:1rem}}
@media (min-width:1440px){.header__inner{min-height:5.25rem}}
@media (min-width:1920px){.header__inner{min-height:5.75rem}}
/* 320 to 359: tighten the gutter so lockup 220 + gap 12 + toggle 44 = 276 fits inside 288 */
@media (max-width:359.98px){.header .container{padding-inline:1rem}.header__inner{gap:.75rem}}
/* Optional call icon button (only when the phone number is confirmed and rendered as .header__call):
   44 x 44, appears from 375px. 220 + 8 + 44 + 8 + 44 = 324 <= 375 - 32 = 343. */
.header__call{min-width:44px;min-height:44px}
@media (max-width:374.98px){.header__call{display:none}}
.nav-toggle{min-width:44px;min-height:44px}
/* Nav link hover and focus (desktop) */
@media (min-width:1280px){
  .nav__link{position:relative}
  .nav__link::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.35rem;height:2px;background:var(--color-teal-500,#25C9BE);
    transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
  .nav__link:hover::after,.nav__link:focus-visible::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
}
/* Dark footer logo: media pack navy swoosh is 1.17:1 on navy. Use the reversed derivative
   (design/audit/derived-logo/logo-primary-reversed-DRAFT.svg, needs brand approval) OR the white chip below. */
.footer__brand img{height:auto;width:240px;max-width:100%}
@media (min-width:1440px){.footer__brand img{width:271px}}
.footer__brand--chip{display:inline-block;background:#fff;border-radius:.625rem;padding:.625rem .875rem;margin-bottom:var(--space-4)}
.footer__brand--chip img{display:block;margin:0;width:229px}

/* ---------- 3. FLUID CONTAINER AND FULL-BLEED BANDS ------------------------ */
.container{max-width:calc(var(--container) + var(--gutter)*2)}
.section{position:relative}
.section--alt{background:linear-gradient(180deg,var(--tint-mist) 0%,var(--tint-sky) 100%);
  border-block:1px solid rgba(203,214,225,.7)}
/* Intro blocks that were a single narrow column become a two column split from 1280:
   heading block left, copy right. Pure CSS, works with the live markup. */
@media (min-width:1280px){
  .section>.container:has(>.section__head+p):not(:has(>ul,>ol,>div:not(.section__head),>figure,>form,>details,>table,>nav,>.btn-row)){display:grid;grid-template-columns:minmax(16rem,.85fr) minmax(0,1.5fr);column-gap:clamp(3rem,2rem + 4vw,8rem);align-items:start}
  .section>.container:has(>.section__head+p):not(:has(>ul,>ol,>div:not(.section__head),>figure,>form,>details,>table,>nav,>.btn-row))>.section__head{grid-column:1;grid-row:1/span 8;max-width:none;margin-bottom:0}
  .section>.container:has(>.section__head+p):not(:has(>ul,>ol,>div:not(.section__head),>figure,>form,>details,>table,>nav,>.btn-row))>p{grid-column:2;max-width:var(--measure)!important}
  .section>.container:has(>.section__head+p):not(:has(>ul,>ol,>div:not(.section__head),>figure,>form,>details,>table,>nav,>.btn-row))>p:first-of-type{font-size:1.125em;color:var(--color-navy)}
}
[style*="max-width:62ch"]{max-width:var(--measure)}
.section__head{max-width:var(--measure-head)}
.intro-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,7rem);align-items:start}
.intro-grid p{max-width:var(--measure)}
.intro-photo{border-radius:var(--radius-xl,1.25rem);overflow:hidden;box-shadow:var(--shadow-card)}
/* CTA band: full-bleed navy section, inner container keeps the content width */
.section:has(>.container>.cta-band){background:var(--grad-band-navy);position:relative;overflow:hidden;padding-block:clamp(3rem,2rem + 3vw,6rem)}
.section:has(>.container>.cta-band)::before{content:"";position:absolute;inset:0;background:var(--glow-teal),var(--lattice);pointer-events:none}
.section:has(>.container>.cta-band)>.container{position:relative}
.cta-band{background:none;border-radius:0;padding:0;box-shadow:none}
.cta-band::before,.cta-band::after{display:none}
.cta-band h2{font-size:clamp(1.75rem,1.2rem + 1.8vw,3rem);color:#fff}
.cta-band p{font-size:1.125em;max-width:46rem}
/* Steps and FAQ use the width */
@media (min-width:1440px){.faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--space-4)}.faq-wrap{max-width:none}}
.steps li{padding-top:var(--space-5);border-top-width:3px}
.steps li::before{font-size:var(--text-2xl,1.75rem)}

/* ---------- 4. HOME HERO ----------------------------------------------------- */
.hero{background:var(--grad-hero-mobile),#0A1D33;border-bottom:4px solid;border-image:var(--grad-accent-line) 1}
.hero h1{font-weight:800;text-wrap:balance}
.hero h1 em{color:var(--color-teal-500)}
.hero .lead{color:#fff;opacity:.94}
/* mobile and tablet: text block then a taller photo that fades in from the text block */
@media (max-width:1023.98px){
  .hero__bg{height:auto;aspect-ratio:4/3;position:relative}
  .hero__bg::before{content:"";position:absolute;inset:0 0 auto 0;height:38%;z-index:1;background:linear-gradient(180deg,#0F2B49,rgba(15,43,73,0));pointer-events:none}
  .hero__bg img{object-position:68% 38%;filter:saturate(1.12) contrast(1.04)}
  .hero::after{opacity:.1}
}
@media (min-width:768px) and (max-width:1023.98px){.hero__bg{aspect-ratio:16/9;height:auto}}
/* desktop: taller full-bleed hero, image on the right */
@media (min-width:1024px){
  .hero{min-height:clamp(34rem,40vw,50rem);display:flex;align-items:center;background:#071427}
  .hero::before{background:var(--grad-hero-desktop)}
  .hero__inner{width:100%;padding-block:clamp(3.5rem,2rem + 4vw,7rem)}
  .hero__content{max-width:clamp(34rem,26rem + 12vw,50rem)}
  .hero h1{font-size:clamp(2.75rem,1.4rem + 2.7vw,4.75rem);line-height:1.08}
  .hero .lead{font-size:clamp(1.125rem,.95rem + .5vw,1.5rem);max-width:40rem}
  .hero__bg img{object-position:78% 35%;filter:saturate(1.1) contrast(1.03)}
  .hero::after{opacity:.09;width:clamp(24rem,30vw,44rem);height:clamp(24rem,30vw,44rem)}
}
.hero__actions .btn,.banner__actions .btn{min-height:52px}

/* ---------- 5. INNER BANNERS ------------------------------------------------- */
.banner{background:var(--grad-banner-base);border-bottom:4px solid;border-image:var(--grad-accent-line) 1}
.banner::before{background:var(--glow-teal),var(--glow-blue),var(--lattice)}
 /* phones: stronger teal glow, peak alpha .42 (white 6.7:1, cloud 5.6:1, teal-500 large text 3.3:1) */
@media (max-width:767.98px){.banner::before{background:radial-gradient(115% 70% at 100% 0%,rgba(37,201,190,.42),rgba(37,201,190,0) 64%),var(--glow-blue),var(--lattice)}}
.banner::after{opacity:.1;width:clamp(26rem,32vw,48rem);height:clamp(26rem,32vw,48rem);right:-4rem;bottom:-30%}
.banner h1{text-wrap:balance}
.banner h1 em{color:var(--color-teal-500)}
.banner__inner{padding-block:clamp(2.75rem,1.75rem + 3.2vw,6.5rem)}
@media (min-width:1024px){.banner__inner--split{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(3rem,2rem + 4vw,8rem);align-items:center}}
@media (min-width:1280px){.banner h1{font-size:clamp(2.5rem,1.5rem + 2.2vw,4.25rem);line-height:1.1}.banner .lead{font-size:clamp(1.125rem,.95rem + .5vw,1.5rem);max-width:46rem}}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);
  border-top:3px solid var(--color-teal-500);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);padding:var(--space-6)}
.glass .check-list li{font-size:1.0625em}
/* banner icon tile: lifted from flat to a glowing tile */
.banner__icon{box-shadow:0 0 0 1px rgba(140,235,221,.35),0 0 32px rgba(37,201,190,.28)}

/* ---------- 6. CARDS, ICONS, PREMIUM DETAIL ------------------------------------ */
.svc,.card{box-shadow:var(--shadow-card);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.svc:hover,.svc:focus-within{box-shadow:var(--shadow-card-hover)}
.svc__photo img{transition:transform .6s var(--ease-out)}
.svc:hover .svc__photo img{transform:scale(1.04)}
.icon-tile{background:linear-gradient(145deg,var(--tint-teal),#fff);border:1px solid rgba(8,167,167,.25);box-shadow:0 6px 16px -10px rgba(7,122,120,.6)}
.icon-tile--dark{background:linear-gradient(145deg,rgba(140,235,221,.2),rgba(140,235,221,.06));border-color:rgba(140,235,221,.3)}
.incl-grid>li{box-shadow:var(--shadow-card);border-top:3px solid var(--color-teal-500)}
.incl-grid>li .icon-tile,.incl-grid>li>.icon{margin-bottom:var(--space-3)}
.eyebrow{font-size:.8125rem;letter-spacing:.14em}
.btn--primary{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background-color .2s}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(37,201,190,.65)}
.on-dark .btn--primary{background:var(--color-teal-500);color:var(--color-ink)}
.on-dark .btn--primary:hover{background:var(--color-teal-300)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .svc,.incl-grid>li,.steps li{animation:sen-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes sen-rise{from{transform:translateY(18px)}to{transform:none}}
  }
}

/* ---------- 7. WIDE GRID FROM 1920 ----------------------------------------------- */
@media (min-width:1920px){
  .svc-grid--balance{--cols:4;--gap:var(--space-6)}
  .svc-grid--3{gap:var(--space-6)}
  .incl-grid{gap:var(--space-6)}
  .steps{gap:var(--space-7)}
  .footer__grid{gap:var(--space-9)}
  .section__head{margin-bottom:var(--space-8)}
}
/* very wide: stop images and bands stretching, keep side gutters coloured */
@media (min-width:2560px){.hero__bg img{object-position:82% 35%}}

/* ---------- 8. STICKY MOBILE BAR (dark, high energy) ------------------------------ */
.sticky-bar{background:linear-gradient(180deg,rgba(10,29,51,.97),#071427);border-top:2px solid var(--color-teal-500);box-shadow:0 -10px 28px rgba(7,20,39,.4)}
.sticky-bar .btn--primary{background:var(--color-teal-500);color:var(--color-ink);font-weight:700}
.sticky-bar .btn--primary:active{background:var(--color-teal-300)}
.sticky-bar .btn:not(.btn--primary){background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}

/* ---------- 9. FOOTER -------------------------------------------------------------- */
.footer{background:linear-gradient(180deg,#0A1D33,#071427)}
.footer__legal{background:#050E1C}

/* ---------- 10. SAFETY: no horizontal scroll from 320 --------------------------------- */
html,body{overflow-x:clip}
img,svg,video{max-width:100%}

/* ---------- 11. COVERAGE BLOCK: use the width (design-system reserved a third column that the live template leaves empty) ---------- */
@media (min-width:1024px){
  .coverage:has(>:nth-child(2):last-child){grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:clamp(2rem,1rem + 4vw,7rem)}
  .coverage:has(>:nth-child(2):last-child) .coverage__intro{grid-column:auto;max-width:none}
}
.map-card{box-shadow:var(--shadow-card);border-radius:var(--radius-xl,1.25rem)}
@media (min-width:1280px){.map-card{padding:var(--space-6)}}

/* Art tiles (icon on blue) stay shallow on wide screens so two-up rows do not become giant blue blocks */
@media (min-width:1280px){.svc .svc__photo.svc__photo--art{aspect-ratio:16/7}.intro-photo--art{aspect-ratio:16/10}}