/* ==========================================================================
   GPLINK SALES PAGE — STYLESHEET v1.1.0 (gplink.1.0.0.css is kept for rollback)
   The only stylesheet partners/gplink/index.php loads (plus the Manrope webfont
   from Google Fonts). Self-contained: nothing is shared with the Next-Fi page,
   so the partner pages can be restyled or moved to their own domains separately.

   Identity: the tower at night. Deep blue-slate "night" for dark blocks, white and
   cool grey for reading, and one warm accent, beacon orange (the light on top of a
   tower). One family, Manrope: 800 for headings, 400-700 for text.
   The one moving moment is the hero tower's signal arcs, lit once on load. The pool
   demo animates its bars on change. Nothing else moves.
   Served with cache-control max-age=86400: after editing this file, bump the ?v= on
   its <link> in index.php (gplink.1.1.0.css?v=1 since 2026-10-26, clients and gallery)
   or visitors keep the old copy.
   LF line endings throughout.
   ========================================================================== */

/* 1. TOKENS =============================================================== */
:root {
  --night: #0D2233;         /* text, dark sections */
  --night-raised: #16334A;  /* mobile menu on night */
  --slate: #4A5B6A;         /* secondary text on white and fog */
  --haze: #B8C7D3;          /* secondary text on night */
  --beacon: #FF7A1A;        /* accent fills; text on night only */
  --beacon-deep: #B34A00;   /* accent text and links on white (5.4:1) */
  --sky: #5CC8FF;           /* small touches on night only */
  --paper: #FFFFFF;
  --fog: #F2F5F8;
  --line: #DCE3EA;

  --font: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --radius: 12px;
  --wrap: 1120px;
  --gutter: 20px;
  --header-h: 64px;
}

/* 2. BASE ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--night);
  background: var(--paper);
  overflow-x: hidden;
}
svg { max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 16px; }
h3 { font-size: 22px; }
p { margin: 0 0 16px; }
a { color: var(--beacon-deep); text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--beacon-deep); outline-offset: 3px; border-radius: 4px; }
/* Bright orange only on the night blocks: beacon is 2.6:1 on white, beacon-deep is 5.4:1 */
.site-header :focus-visible, .hero :focus-visible, .network :focus-visible, .site-footer :focus-visible { outline-color: var(--beacon); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--paper); color: var(--night); font-weight: 700; }
.skip-link:focus { top: 8px; }

.services, .plans, .speed, .network, .about, .contact { padding: clamp(64px, 9vw, 110px) 0; }

/* Small label above a section heading (the section's topic, in capitals) */
.eyebrow {
  margin: 0 0 10px; font-size: 14px; font-weight: 800; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .1em; color: var(--beacon-deep);
}
.network .eyebrow { color: var(--beacon); }

/* 3. BUTTONS ============================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  font: 700 17px/1.2 var(--font);
  text-align: center; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 999px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-beacon { background: var(--beacon); color: var(--night); }
.btn-beacon:hover { background: #FF8D40; color: var(--night); }
.btn-ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.75); }
.btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--paper); }
.btn-outline { background: var(--paper); color: var(--night); border-color: var(--night); }
.btn-outline:hover { background: var(--night); color: var(--paper); }
.btn-block { width: 100%; }

/* 4. HEADER =============================================================== */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--night); border-bottom: 1px solid rgba(255,255,255,.08); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--paper); text-decoration: none; }
.brand span { color: var(--beacon); }
.brand-mark { width: 1.35em; height: 1.35em; margin-right: 0.3em; flex: none; color: var(--paper); }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--haze); text-decoration: none; }
.site-nav a:not(.nav-cta):hover { color: var(--paper); }
.site-nav .nav-cta { margin-left: 8px; background: var(--beacon); color: var(--night); font-weight: 700; border-radius: 999px; }
.site-nav .nav-cta:hover { background: #FF8D40; color: var(--night); }

.nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px; background: var(--paper);
}
.nav-toggle-bar { top: 21px; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ''; left: 0; }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 859px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--gutter) 20px;
    background: var(--night-raised);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  /* Collapsed only once the script runs; without it the toggle is hidden and the links stay open */
  html.js .site-nav { display: none; }
  html.js .site-nav.is-open { display: flex; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header { position: static; }
  html:not(.js) .header-row { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding-top: 20px; }
  html:not(.js) .site-nav { position: static; flex-basis: 100%; }
  .site-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 18px; }
  .site-nav .nav-cta { justify-content: center; margin: 16px 0 0; padding: 0 16px; border: 0; border-radius: 999px; }
}

/* 5. HERO ================================================================= */
.hero { background: var(--night); color: var(--paper); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.hero-copy { padding: 96px 0 104px; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 24px; }
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--beacon); }
.lead { margin: 0; font-size: 19px; color: var(--haze); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-art { min-width: 0; }
.tower { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; color: var(--haze); overflow: visible; }
.t-frame, .t-ground, .t-cam { color: var(--haze); }
.t-beacon { color: var(--beacon); filter: drop-shadow(0 0 6px rgba(255,122,26,.75)); }
.t-arc { color: var(--sky); }

@media (max-width: 859px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { padding: 56px 0 40px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .tower { max-width: 220px; }
  .hero-art { padding-bottom: 48px; }
}

/* The one moving moment: the signal arcs light up in turn, the beacon pulses once */
@media (prefers-reduced-motion: no-preference) {
  .t-arc1 { animation: arc-on .4s ease-out .3s both; }
  .t-arc2 { animation: arc-on .4s ease-out .6s both; }
  .t-arc3 { animation: arc-on .4s ease-out .9s both; }
  .t-beacon { transform-box: fill-box; transform-origin: center; animation: beacon-pulse .9s ease-out .2s; }
}
@keyframes arc-on { from { opacity: .15; } to { opacity: 1; } }
@keyframes beacon-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* 6. SERVICES ============================================================= */
.services { background: var(--fog); }
/* Five cards. 1 column; 2 columns (2 + 2, then the featured card full width);
   3 columns (3, then one card and the featured card across 2). No auto-fit. */
.service-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-internet { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-internet { grid-column: span 2; }
}
.service {
  display: flex; flex-direction: column;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.service-icon { display: block; width: 36px; height: 36px; color: var(--beacon-deep); }
.service h3 { margin: 16px 0 8px; color: var(--night); }
.service p { flex: 1; margin: 0 0 20px; color: var(--slate); }
.service .btn { align-self: flex-start; }
/* Featured: the wireless internet card, on night (the rules after the base .service rules win) */
.service-internet { background: var(--night); border-color: var(--night); }
.service-internet h3 { color: var(--paper); }
.service-internet p { color: var(--haze); }
.service-internet .service-icon { color: var(--sky); }
.service-internet :focus-visible { outline-color: var(--beacon); }

/* 7. PLANS ================================================================ */
.plans { background: var(--paper); }
.section-intro { max-width: 40em; margin: 0 0 40px; font-size: 18px; color: var(--slate); }
.plan-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
/* Explicit column counts so the fifth card is never left alone on a row:
   1 / 2+2+1 (last card full width) / 3+2 / all five */
@media (min-width: 440px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 900px) { .plan-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.plan {
  display: flex; flex-direction: column;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.plan:hover, .plan:focus-within { border-color: var(--night); }
.plan-speed { margin: 0; font-size: 20px; line-height: 1; color: var(--slate); }
.plan-speed strong { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; color: var(--night); }
.plan-min {
  margin: -4px 0 16px; font-size: 13px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .08em; color: var(--beacon-deep);
}
.plan-price { margin: 0 0 20px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--night); }
.plan-price span { color: var(--beacon-deep); }
.plan-price small { display: block; font-size: 15px; font-weight: 500; color: var(--slate); }
.plan .btn { margin-top: auto; }
.fineprint { margin: 24px 0 0; font-size: 14px; color: var(--slate); }

@media (prefers-reduced-motion: no-preference) {
  .plan { transition: transform .2s ease, border-color .2s ease; }
  .plan:hover, .plan:focus-within { transform: translateY(-2px); }
}

/* 8. HOW SPEED WORKS (the shared-pool demo) =============================== */
.speed { background: var(--fog); }
.speed-copy { max-width: 42em; }
.speed-copy p { font-size: 18px; }
.pool {
  margin-top: 32px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.pool-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 20px; }
.pool-total { font-size: 20px; font-weight: 800; color: var(--night); }
.pool-hint { font-size: 14px; color: var(--slate); }
.pool-houses {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.house {
  position: relative; width: 100%; min-height: 44px; padding: 12px;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "icon name" "bar bar" "speed speed";
  align-items: center; gap: 8px 10px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--fog); color: var(--slate);
  font-family: var(--font); font-size: 15px; line-height: 1.3; text-align: left; cursor: pointer;
}
.house:hover { border-color: var(--slate); }
.house-icon { grid-area: icon; width: 24px; height: 24px; fill: currentColor; }
.house-name { grid-area: name; font-weight: 600; }
.house-bar { grid-area: bar; display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.house-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--beacon); }
.house-speed { grid-area: speed; font-size: 15px; font-weight: 700; }
/* Online: set by the script (.is-online), or by aria-pressed when the script did not run */
.house.is-online, html:not(.js) .house[aria-pressed="true"] { border-color: var(--night); background: var(--paper); color: var(--night); }
.house.is-online .house-icon, html:not(.js) .house[aria-pressed="true"] .house-icon { color: var(--beacon-deep); }
/* Without JS the static readout still shows: 8 online, 10 Mbps each = 12.5% of the 80 Mbps pool, as the script sets */
html:not(.js) .house[aria-pressed="true"] .house-fill { width: 12.5%; }
html:not(.js) .pool-hint { display: none; }

.pool-readout { margin: 20px 0 8px; font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--night); }
.pool-caption { margin: 0; font-size: 14px; color: var(--slate); }

@media (min-width: 700px) { .pool-houses { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pool { padding: 16px; } }

@media (prefers-reduced-motion: no-preference) {
  .house-fill { transition: width .35s ease; }
}

/* 9. NETWORK ============================================================== */
.network { background: var(--night); color: var(--paper); }
.network p { color: var(--haze); }
.network-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.feature { padding: 24px; border-radius: var(--radius); background: var(--night-raised); }
.feature-icon { display: block; width: 36px; height: 36px; color: var(--sky); }
.feature h3 { margin: 14px 0 8px; color: var(--paper); }
.feature p { margin: 0; }
.network .network-note { margin: 28px 0 0; font-size: 18px; font-weight: 700; color: var(--beacon); }
@media (max-width: 859px) { .network-grid { grid-template-columns: minmax(0, 1fr); } }

/* 10. ABOUT ================================================================ */
.about { background: var(--paper); }
/* Stacked: a vertical rule with a dot per year. Wide: a horizontal rule behind the year pills. */
.timeline {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
}
.timeline::before { content: ''; position: absolute; top: 17px; bottom: 17px; left: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding-left: 36px; }
.timeline li::before {
  content: ''; position: absolute; top: 10px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--night); box-shadow: 0 0 0 3px var(--paper);
}
.tl-year {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  background: var(--night); color: var(--paper); font-size: 16px; font-weight: 800; line-height: 1.6;
}
.timeline h3 { margin: 14px 0 6px; color: var(--night); }
.timeline p { margin: 0; color: var(--slate); }

@media (min-width: 860px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .timeline::before { top: 16px; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
  .timeline li { padding-left: 0; }
  .timeline li::before { display: none; }
}

/* 11. CONTACT ============================================================= */
.contact { background: var(--fog); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.contact-copy > p:not(.pick) { max-width: 30em; font-size: 18px; color: var(--slate); }
.pick {
  margin: 20px 0 0; padding: 12px 16px;
  border-left: 4px solid var(--beacon); background: var(--paper);
  font-weight: 600; color: var(--night);
}
/* Empty: invisible but still rendered, so screen readers announce the first message */
.pick:empty { margin: 0; padding: 0; border: 0; }
.contact-list a:not(.contact-big), .footer-partner { display: inline-flex; align-items: center; min-height: 44px; }
.contact-list { list-style: none; margin: 0; padding: 0; font-size: 17px; overflow-wrap: anywhere; }
.contact-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact-list .contact-big {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--night); text-decoration: none;
}
.contact-big:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 859px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* 12. FOOTER ============================================================== */
.site-footer { padding: 28px 0; background: var(--night); color: var(--haze); font-size: 15px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer-row p { margin: 0; }
.brand-small { font-size: 20px; }
.footer-partner { color: var(--haze); text-underline-offset: 4px; }
.footer-partner:hover { color: var(--paper); }

/* 13. CLIENTS AND GALLERY (optional: the page shows each only when it has content) ========== */
/* Section order: network (night), clients, gallery, about (paper). So the gallery is fog, and clients are paper
   when a gallery follows them, fog when they come last (index.php adds .clients-fog then). */
.clients, .gallery { padding: clamp(64px, 9vw, 110px) 0; }
.clients { background: var(--paper); }
.clients.clients-fog { background: var(--fog); }
.gallery { background: var(--fog); }
.client-grid, .gallery-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 640px) { .client-grid, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .client-grid, .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.client {
  display: flex; flex-direction: column;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  overflow-wrap: anywhere;
}
.client-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 64px; object-fit: contain; margin-bottom: 12px; align-self: flex-start; }
.client h3 { margin: 0 0 8px; color: var(--night); }
.client p { flex: 1; margin: 0 0 20px; color: var(--slate); }
.client .btn { align-self: flex-start; }
.gallery figure { margin: 0; }
.gallery-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery figcaption { margin-top: 8px; font-size: 15px; color: var(--slate); overflow-wrap: anywhere; }