/* TINKIT IT Solutions: "light through glass".
   Fiber internet is light travelling through glass, so the site is night with one beam of it.
   Dark by design: every colour is painted here, nothing is left to the browser's theme. */

:root {
  color-scheme: dark;
  --ink: #06040b;
  --night: #0c0916;
  --glass: rgba(19, 14, 33, 0.66);
  --glass-hi: rgba(27, 20, 46, 0.8);
  --line: rgba(196, 181, 253, 0.12);
  --line-2: rgba(196, 181, 253, 0.22);
  --text: #f4f1fb;
  --text-2: #bab2cd;
  --text-3: #8d85a3;
  --violet: #8b5cf6;
  --violet-hi: #c4b5fd;
  --brand: #5b21b6;
  --lift: #6d3fd6;
  --signal: #22c55e;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-card: 18px;
  --r-panel: 26px;
  --header-h: 76px;
  --peek: 120px; /* how much of the E-Portal shows above the fold */
}
@media (min-width: 768px) { :root { --peek: 170px; } }

/* Where the fiber lands, measured from the page centre inside the hero (cqw = the hero's width).
   Phones: down the right edge. Tablets: right of the words. Computers: in the gap between the
   menu and the header buttons, which sit 420px in from the content's right edge. */
.hero {
  container-type: inline-size;
  --half: calc(50cqw - 20px);            /* half the content width */
  --beam-offset: calc(50cqw - 26px);
  --copy-gap: 40px;
}
@media (min-width: 640px) { .hero { --beam-offset: clamp(96px, 21cqw, 330px); --copy-gap: 56px; } }
@media (min-width: 768px) { .hero { --half: min(600px, 50cqw - 40px); } }
@media (min-width: 1180px) { .hero { --beam-offset: calc(var(--half) - 420px); } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }
:focus-visible { outline: 2px solid var(--violet-hi); outline-offset: 3px; border-radius: 10px; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--ink); font-weight: 600;
}
.skip-link:focus { top: 16px; }

.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- type ---------- */
.label {
  font: 500 12px/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow { font: 500 12px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-hi); }
.display {
  font-weight: 500;
  font-size: clamp(32px, 2.6vw + 18px, 54px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--text);
  text-wrap: balance;
}
.lead { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 620px; text-wrap: pretty; }
.section-head { display: grid; gap: 18px; max-width: 760px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font: 600 15px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-glow {
  color: #fff;
  background: linear-gradient(180deg, #9d70ff 0%, #6d3fd6 100%);
  border-color: rgba(196, 181, 253, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 30px -8px rgba(139, 92, 246, 0.85), 0 0 46px -8px rgba(139, 92, 246, 0.6);
}
.btn-glow:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 38px -8px rgba(139, 92, 246, 1), 0 0 64px -6px rgba(139, 92, 246, 0.8);
}
.btn-quiet { color: var(--text); background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(196, 181, 253, 0.38); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--violet-hi); }
.link-arrow .icon-sm { transition: transform 0.2s ease; }
.link-arrow:hover .icon-sm { transform: translateX(3px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled, .site-header.is-open {
  background: rgba(6, 4, 11, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.bar { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.logo img { height: 34px; width: auto; }
.site-nav { display: none; }
.header-actions { display: none; }
.site-nav a { padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--text-3); transition: color 0.2s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-left: auto;
  border-radius: 12px; border: 1px solid rgba(196, 181, 253, 0.3); background: rgba(12, 9, 22, 0.6); color: var(--text); cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.site-header.is-open .nav-toggle .icon-close { display: block; }
.site-header.is-open .nav-toggle .icon-menu { display: none; }
.mobile-menu { display: none; }
.site-header.is-open .mobile-menu { display: block; padding: 4px 0 24px; }
.mobile-menu nav a { display: block; padding: 14px 2px; font-size: 20px; color: var(--text); border-bottom: 1px solid var(--line); }
.mobile-menu nav a[aria-current="page"] { color: var(--violet-hi); }
.mobile-menu .actions { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 1180px) {
  .site-nav { display: flex; gap: 2px; margin-left: 32px; }
  .header-actions { display: flex; gap: 10px; margin-left: auto; }
  .nav-toggle, .site-header.is-open .mobile-menu { display: none; }
}

/* ---------- hero: the fiber beam ---------- */
.hero { position: relative; isolation: isolate; overflow-x: hidden; overflow-x: clip; }
.fold {
  position: relative;
  min-height: calc(max(560px, 100svh) - var(--peek));
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 36px) 0 64px;
}
@media (min-width: 768px) { .fold { min-height: calc(max(640px, 100svh) - var(--peek)); padding-bottom: 72px; } }

/* the sky ends exactly at the horizon: the bottom edge of the fold, where the E-Portal begins */
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.beam {
  position: absolute; bottom: 0; height: 100%; width: 900px;
  left: calc(50% + var(--beam-offset)); transform: translateX(-50%);
}
.beam > i { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; }
.beam .haze {
  width: 620px; height: 100%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(124, 77, 255, 0.34), rgba(109, 63, 214, 0.12) 45%, transparent 78%);
}
/* The glow and halo are bell curves (Gaussian stops) that reach nothing well inside their own boxes.
   (A blur filter or box-shadow here gets cut off by the mask at the box edge and leaves straight lines.) */
.beam .glow {
  width: 320px; height: 100%;
  background: linear-gradient(90deg,
    rgba(146, 104, 248, 0.000) 0%, rgba(146, 104, 248, 0.000) 2.5%, rgba(146, 104, 248, 0.000) 5%, rgba(146, 104, 248, 0.000) 7.5%, rgba(146, 104, 248, 0.000) 10%, rgba(146, 104, 248, 0.001) 12.5%, rgba(146, 104, 248, 0.002) 15%, rgba(146, 104, 248, 0.005) 17.5%, rgba(146, 104, 248, 0.010) 20%, rgba(146, 104, 248, 0.018) 22.5%, rgba(146, 104, 248, 0.033) 25%, rgba(146, 104, 248, 0.055) 27.5%, rgba(146, 104, 248, 0.088) 30%, rgba(146, 104, 248, 0.134) 32.5%, rgba(146, 104, 248, 0.192) 35%, rgba(146, 104, 248, 0.260) 37.5%, rgba(146, 104, 248, 0.334) 40%, rgba(146, 104, 248, 0.405) 42.5%, rgba(146, 104, 248, 0.465) 45%, rgba(146, 104, 248, 0.506) 47.5%, rgba(146, 104, 248, 0.520) 50%, rgba(146, 104, 248, 0.506) 52.5%, rgba(146, 104, 248, 0.465) 55%, rgba(146, 104, 248, 0.405) 57.5%, rgba(146, 104, 248, 0.334) 60%, rgba(146, 104, 248, 0.260) 62.5%, rgba(146, 104, 248, 0.192) 65%, rgba(146, 104, 248, 0.134) 67.5%, rgba(146, 104, 248, 0.088) 70%, rgba(146, 104, 248, 0.055) 72.5%, rgba(146, 104, 248, 0.033) 75%, rgba(146, 104, 248, 0.018) 77.5%, rgba(146, 104, 248, 0.010) 80%, rgba(146, 104, 248, 0.005) 82.5%, rgba(146, 104, 248, 0.002) 85%, rgba(146, 104, 248, 0.001) 87.5%, rgba(146, 104, 248, 0.000) 90%, rgba(146, 104, 248, 0.000) 92.5%, rgba(146, 104, 248, 0.000) 95%, rgba(146, 104, 248, 0.000) 97.5%, rgba(146, 104, 248, 0.000) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #000 75%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #000 75%);
}
.beam .halo {
  width: 56px; height: 100%;
  background: linear-gradient(90deg,
    rgba(218, 209, 255, 0.000) 0%, rgba(218, 209, 255, 0.000) 3.125%, rgba(218, 209, 255, 0.000) 6.25%, rgba(218, 209, 255, 0.000) 9.375%, rgba(218, 209, 255, 0.001) 12.5%, rgba(218, 209, 255, 0.002) 15.625%, rgba(218, 209, 255, 0.005) 18.75%, rgba(218, 209, 255, 0.013) 21.875%, rgba(218, 209, 255, 0.031) 25%, rgba(218, 209, 255, 0.067) 28.125%, rgba(218, 209, 255, 0.129) 31.25%, rgba(218, 209, 255, 0.226) 34.375%, rgba(218, 209, 255, 0.356) 37.5%, rgba(218, 209, 255, 0.507) 40.625%, rgba(218, 209, 255, 0.653) 43.75%, rgba(218, 209, 255, 0.761) 46.875%, rgba(218, 209, 255, 0.800) 50%, rgba(218, 209, 255, 0.761) 53.125%, rgba(218, 209, 255, 0.653) 56.25%, rgba(218, 209, 255, 0.507) 59.375%, rgba(218, 209, 255, 0.356) 62.5%, rgba(218, 209, 255, 0.226) 65.625%, rgba(218, 209, 255, 0.129) 68.75%, rgba(218, 209, 255, 0.067) 71.875%, rgba(218, 209, 255, 0.031) 75%, rgba(218, 209, 255, 0.013) 78.125%, rgba(218, 209, 255, 0.005) 81.25%, rgba(218, 209, 255, 0.002) 84.375%, rgba(218, 209, 255, 0.001) 87.5%, rgba(218, 209, 255, 0.000) 90.625%, rgba(218, 209, 255, 0.000) 93.75%, rgba(218, 209, 255, 0.000) 96.875%, rgba(218, 209, 255, 0.000) 100%);
}
.beam .core {
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, rgba(226, 217, 255, 0.55), #fff 80%);
}
@media (max-width: 1179px) {
  .beam .core, .beam .halo { -webkit-mask-image: linear-gradient(to bottom, transparent 64px, #000 220px); mask-image: linear-gradient(to bottom, transparent 64px, #000 220px); }
  .beam .glow { -webkit-mask-image: linear-gradient(to bottom, transparent 64px, rgba(0, 0, 0, 0.5) 220px, #000 75%); mask-image: linear-gradient(to bottom, transparent 64px, rgba(0, 0, 0, 0.5) 220px, #000 75%); }
}
/* where the beam meets the ground it flares out: blurred outside, clipped inside */
.beam .skirt { width: 460px; height: 300px; filter: blur(12px); }
.beam .skirt b {
  position: absolute; inset: 0;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: radial-gradient(52% 100% at 50% 100%, rgba(255, 255, 255, 1), rgba(214, 204, 255, 0.72) 22%, rgba(124, 77, 255, 0.24) 55%, transparent 82%);
}
.bloom::after { /* the hot spot where the light lands */
  content: ""; position: absolute; left: 50%; top: 50%; width: 300px; height: 64px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(226, 217, 255, 0.5) 45%, transparent);
}
.bloom {
  position: absolute; bottom: 0;
  left: calc(50% + var(--beam-offset));
  width: min(1700px, 200vw); height: 440px;
  transform: translate(-50%, 50%);
  background: radial-gradient(closest-side, rgba(214, 204, 255, 0.62), rgba(139, 92, 246, 0.34) 32%, rgba(91, 33, 182, 0.13) 62%, transparent);
}
.horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.3) calc(50% + var(--beam-offset) - 42%), #fff calc(50% + var(--beam-offset)), rgba(196, 181, 253, 0.3) calc(50% + var(--beam-offset) + 42%), transparent);
}
.motes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.motes.is-on { opacity: 1; }

.hero-copy { position: relative; max-width: min(780px, calc(var(--half) + var(--beam-offset) - var(--copy-gap))); }
.hero-copy .label { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 639px) { .hero-copy .label { font-size: 11px; letter-spacing: 0.1em; gap: 8px; white-space: nowrap; } }
.hero-copy .label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet-hi); box-shadow: 0 0 10px 2px rgba(167, 139, 250, 0.85);
}
.hero h1 {
  margin-top: 22px; padding-bottom: 0.06em;
  font-weight: 500;
  font-size: clamp(40px, 4.6vw + 22px, 88px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--text);
  background: linear-gradient(180deg, #fdfcff 0%, #ddd6ee 52%, #9c94b4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.hero .lead { margin-top: 22px; max-width: min(540px, 100%); font-size: clamp(17px, 0.3vw + 16px, 19px); }
.hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639px) { .hero-cta .btn { flex: 1 1 100%; } }

/* The visitor line (owner, 2026-10-02: "You're the 103rd visitor for today."): one quiet sentence with a live dot,
   under the hero's buttons. On a computer it stands alone on the far side of the beam, level with the buttons.
   Hidden until the site's counter answers (light.js), so a page without one never shows an empty number. */
.visit { margin-top: 26px; display: flex; align-items: center; gap: 11px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.visit[hidden] { display: none; }
.visit b { font-weight: 500; color: #fff; text-shadow: 0 0 14px rgba(196, 181, 253, 0.55); font-variant-numeric: tabular-nums; }
.visit-dot {
  position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 10px 1px rgba(34, 197, 94, 0.6);
}
.visit-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(34, 197, 94, 0.55); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .visit-dot::after { animation: visit-ping 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; } }
@keyframes visit-ping { 0% { transform: scale(0.4); opacity: 0.9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@media (min-width: 1180px) {
  .visit { position: absolute; margin: 0; bottom: 16px; left: calc(var(--half) + var(--beam-offset) + 64px); white-space: nowrap; }
}

/* the E-Portal, standing on the horizon */
.stage { position: relative; z-index: 1; }
.stage::before {
  content: ""; position: absolute; z-index: -1; top: 0;
  left: calc(50% + var(--beam-offset)); width: min(1300px, 170vw); height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.34), transparent);
  pointer-events: none;
}
.screen {
  --hit: calc(43.18% + var(--beam-offset));
  position: relative; margin: 0 auto; max-width: 1180px;
  border: 1px solid var(--line-2); border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #0d0a17;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 99%);
}
.screen::before { /* the rim the beam lights */
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 3;
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.16), rgba(196, 181, 253, 0.6) calc(var(--hit) - 24%), #fff var(--hit), rgba(196, 181, 253, 0.6) calc(var(--hit) + 24%), rgba(196, 181, 253, 0.16));
}
.screen::after { /* light spilling over the top of the screen */
  content: ""; position: absolute; inset: 0 0 auto; height: 240px; z-index: 2; pointer-events: none;
  background: radial-gradient(38% 100% at var(--hit) 0, rgba(167, 139, 250, 0.26), transparent 70%);
  mix-blend-mode: screen;
}
.screen-bar {
  position: relative; display: flex; align-items: center; height: 42px; padding: 0 16px;
  background: #110d1e; border-bottom: 1px solid var(--line);
}
.screen-bar .dots { display: flex; gap: 7px; }
.screen-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); }
.screen-bar .url {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); font: 500 12px/1 var(--mono); color: var(--text-3);
}
.screen-bar .url .icon-sm { width: 12px; height: 12px; }
.screen-view { max-height: min(700px, 58vw); overflow: hidden; }
.screen-view img { width: 100%; }
.screen-note {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px;
  max-width: 1180px; margin: 8px auto 0; padding: 0 4px;
}
.screen-note p { max-width: 640px; color: var(--text-2); }
@media (max-width: 639px) { .screen-note { margin-top: 40px; } } /* room for the phone while it is still rising into place */
.screen-note .label { margin-right: 10px; color: var(--violet-hi); }
@media (max-width: 639px) {
  .screen { border-radius: 12px 12px 0 0; }
  .screen-bar { height: 28px; padding: 0 10px; }
  .screen-bar .dots { gap: 5px; }
  .screen-bar .dots i { width: 7px; height: 7px; }
  .screen-bar .url { height: 18px; padding: 0 9px; gap: 5px; font-size: 9.5px; }
}

/* Computer and phone together: the browser stands on the horizon, the iPhone in front of it on the left. */
.devices { display: grid; }
.devices > * { grid-area: 1 / 1; }
.devices .screen { width: 88%; justify-self: end; }

/* iPhone 18 Pro Max, to Apple's published proportions: body 78.0 x 163.4 x 8.75 mm; 6.9-inch screen,
   2868 x 1320 px (a 440 x 956 web viewport) with about 2.5 mm of frame and border around it.
   Every size inside is in cqw (a percentage of the phone's width), so the phone scales as one piece.
   It is a real 3D object: twenty slabs behind the front give it its 8.75 mm of thickness, and light.js turns it
   with the scroll (the angle follows the scroll position, so it stops the moment scrolling stops). */
.iphone {
  --pw: clamp(150px, 44%, 200px);
  position: relative; z-index: 3;
  width: var(--pw); aspect-ratio: 780 / 1634;
  justify-self: start; align-self: start;
  margin: 28px 0 0 1%;
  container-type: inline-size;
  perspective: 1000px;
}
@media (min-width: 640px) { .iphone { --pw: clamp(190px, 26%, 290px); margin: 48px 0 0 1%; } }
@media (min-width: 1180px) { .iphone { --pw: clamp(250px, 24%, 290px); margin-top: 72px; } }
.iphone-3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.iphone .slab {
  position: absolute; inset: 0; border-radius: 16.4cqw;
  background: var(--c);
  transform: translateZ(calc(var(--z) * -0.56cqw));
}
.iphone .slab:first-child { box-shadow: 0 6cqw 16cqw -2cqw rgba(0, 0, 0, 0.7); } /* the back of the phone casts the shadow */
.iphone-body {
  position: absolute; inset: 0;
  border-radius: 16.4cqw;
  padding: 0.9cqw;
  background: linear-gradient(140deg, #5b5b64 0%, #222228 14%, #121217 48%, #1e1e24 84%, #4d4d56 100%);
  box-shadow:
    inset 0 0 0 0.22cqw rgba(255, 255, 255, 0.1),
    inset 0 0.35cqw 0 rgba(214, 204, 255, 0.28),
    inset -0.35cqw 0 0.6cqw rgba(167, 139, 250, 0.22);
}
.iphone .key {
  position: absolute; width: 1.1cqw; border-radius: 0.55cqw;
  background: linear-gradient(90deg, #26262c, #62626c);
  transform: translateZ(-5.6cqw);
}
.iphone .key-action, .iphone .key-up, .iphone .key-down { left: -0.6cqw; }
.iphone .key-side, .iphone .key-camera { right: -0.6cqw; background: linear-gradient(90deg, #62626c, #26262c); }
.iphone .key-action { top: 19%; height: 5%; }
.iphone .key-up { top: 27%; height: 8.5%; }
.iphone .key-down { top: 37.5%; height: 8.5%; }
.iphone .key-side { top: 29%; height: 13%; }
.iphone .key-camera { top: 59%; height: 8%; right: -0.35cqw; }
.iphone-glass { height: 100%; border-radius: 15.5cqw; padding: 2.4cqw; background: #030305; }
.iphone-screen {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 13.2cqw;
  background: #fff;
}
.iphone-screen::after { /* a faint sheen on the glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 38%);
}
/* status bar: 62 of the screen's 956 points, with the clock and icons level with the Dynamic Island */
.iphone-status {
  flex: none; height: 13.2cqw;
  display: grid; grid-template-columns: 1fr 26.5cqw 1fr; align-items: start;
  padding-top: 4.35cqw; color: #0a0a0c;
}
.iphone-status .clock { justify-self: center; padding-left: 3cqw; font: 600 3.7cqw/1 var(--font); letter-spacing: -0.01em; }
.iphone-status .glyphs { grid-column: 3; justify-self: center; display: flex; align-items: center; gap: 1.3cqw; margin-top: 0.5cqw; padding-right: 2cqw; }
.iphone-status svg { height: 2.55cqw; width: auto; fill: currentColor; }
.iphone-status svg:last-child { height: 2.75cqw; }
.iphone-screen img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
.iphone .island {
  position: absolute; left: 50%; top: 2.33cqw; transform: translateX(-50%);
  width: 26.5cqw; height: 7.85cqw; border-radius: 999px; background: #000;
}
.iphone .home-bar {
  position: absolute; left: 50%; bottom: 1.7cqw; transform: translateX(-50%);
  width: 28.4cqw; height: 1.1cqw; border-radius: 999px; background: rgba(10, 10, 12, 0.85);
}

/* load: the beam falls, the horizon blooms, the E-Portal rises */
@media (prefers-reduced-motion: no-preference) {
  .beam {
    -webkit-mask-image: linear-gradient(to bottom, #000 0 33.4%, transparent 50% 100%);
    mask-image: linear-gradient(to bottom, #000 0 33.4%, transparent 50% 100%);
    -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: fall 1.25s cubic-bezier(0.5, 0, 0.2, 1) 0.15s both;
  }
  .bloom, .horizon, .stage::before { animation: bloom 1.6s ease-out 0.95s both; }
  .hero-copy > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > :nth-child(1) { animation-delay: 0.1s; }
  .hero-copy > :nth-child(2) { animation-delay: 0.18s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.3s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.4s; }
  .screen { animation: surface 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both; }
  .iphone { animation: surface 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s both; }
  .screen-note { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.7s both; }
}
@keyframes fall {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes bloom { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes surface { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
/* Each section spans the screen, so clipping it sideways cuts only what lies past the screen's edge. Without it, a
   glow wider than its column (the phone's 520-px pool of light on the Fiber Internet page, at 1024 px) made the
   page 29 px wider than the screen, and a tablet zoomed out to fit (pre-upload check, 2026-10-01). Like .hero. */
.section { padding: 88px 0; overflow-x: clip; }
@media (min-width: 768px) { .section { padding: 120px 0; } }
.section-rule { border-top: 1px solid var(--line); }
.section.section--flush { padding-bottom: 0; }

/* fiber plans: each card's lit edge is as long as its speed (300 Mbps = the whole edge) */
.plans-head { display: grid; gap: 28px; align-items: end; }
@media (min-width: 1024px) { .plans-head { grid-template-columns: 1.2fr 1fr; } }
.levels { margin-top: 48px; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .levels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .levels { grid-template-columns: repeat(4, 1fr); } }
.level {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 26px 26px;
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, translate 0.25s ease;
}
.level:hover { border-color: var(--line-2); translate: 0 -2px; }
.level::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px;
  width: calc(var(--lv) * var(--q, 1) * 100%);
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.25), #fff);
  box-shadow: 0 0 10px rgba(196, 181, 253, 0.9), 0 0 30px rgba(139, 92, 246, 0.75);
}
.level::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px 120px at calc(var(--lv) * var(--q, 1) * 100%) 0, rgba(139, 92, 246, 0.26), transparent 72%);
}
.level .label { color: var(--text-3); }
.speed { display: flex; align-items: baseline; gap: 8px; color: var(--text); }
.speed b { font-weight: 500; font-size: 60px; line-height: 1; letter-spacing: -0.045em; }
.speed span { font: 500 13px/1 var(--mono); letter-spacing: 0.06em; color: var(--text-3); }
.level .fit { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.level .price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.level .price b { font: 500 20px/1 var(--mono); color: var(--text); letter-spacing: -0.01em; }
.level .price span { font: 500 12px/1 var(--mono); color: var(--text-3); }
/* each plan's terms under its price (owner, 2026-10-01: the 3-month lock-in only, on all four cards; installation
   fees stay off the site), set like the price row above them: the figure on the left, what it is on the right */
.level .terms { display: grid; gap: 8px; margin: -4px 0 0; }
.level .terms li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.level .terms b { font: 500 13px/1.3 var(--mono); color: var(--text-2); letter-spacing: -0.01em; }
.level .terms span { font: 500 11px/1.3 var(--mono); color: var(--text-3); letter-spacing: 0.02em; }
.plans-foot { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.plans-foot .note { max-width: 560px; font-size: 14px; color: var(--text-3); }
.plans-foot .note a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(196, 181, 253, 0.45); text-underline-offset: 3px; white-space: nowrap; }
.plans-foot .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* facts */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.facts > div { padding: 26px 20px 28px; display: grid; gap: 10px; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts > div:nth-child(3) { border-left: 0; }
.facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.facts dd { font-size: 19px; color: var(--text); letter-spacing: -0.01em; }
.facts dd a { color: var(--text); }
.facts dd a:hover { color: var(--violet-hi); }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .facts > div:nth-child(3) { border-left: 1px solid var(--line); }
  .facts > div:nth-child(n + 3) { border-top: 0; }
}

/* services */
.grid-3 { margin-top: 48px; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: var(--r-card);
  background: var(--glass); border: 1px solid var(--line);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.card::before {
  content: ""; position: absolute; inset: -1px 18% auto; height: 1px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 14px rgba(196, 181, 253, 0.9);
  opacity: 0; transition: opacity 0.3s ease;
}
a.card:hover { border-color: var(--line-2); background: var(--glass-hi); }
a.card:hover::before { opacity: 1; }
.tile {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(167, 139, 250, 0.24); color: var(--violet-hi);
}
.card h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; color: var(--text); text-wrap: balance; }
.card p { font-size: 15px; line-height: 1.6; }
.card .link-arrow { margin-top: auto; padding-top: 4px; font-size: 14px; }

/* how we work: five stops on one strand of fiber */
.route { margin-top: 56px; position: relative; display: grid; gap: 34px; }
.route::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(to bottom, rgba(196, 181, 253, 0.5), rgba(196, 181, 253, 0.12));
}
.route li { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 20px; row-gap: 6px; }
.route .node {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  font: 500 12px/1 var(--mono); color: var(--text);
  background: var(--ink); border: 1px solid rgba(196, 181, 253, 0.45);
  box-shadow: 0 0 0 4px var(--ink), 0 0 20px -2px rgba(139, 92, 246, 0.7);
}
.route h3 { font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; padding-top: 8px; }
.route p { font-size: 15px; line-height: 1.6; max-width: 440px; }
@media (min-width: 1024px) {
  .route { grid-template-columns: repeat(5, 1fr); gap: 28px; }
  .route::before { left: 0; right: 0; top: 19px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, rgba(196, 181, 253, 0.12), rgba(196, 181, 253, 0.5) 50%, rgba(196, 181, 253, 0.12)); }
  .route li { grid-template-columns: 1fr; row-gap: 12px; }
  .route .node { grid-row: auto; }
  .route h3 { padding-top: 10px; }
}

/* about */
.split { display: grid; gap: 40px; }
@media (min-width: 1024px) { .split { grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: start; } }
.prose { display: grid; gap: 18px; }
.prose p { font-size: 17px; line-height: 1.7; max-width: 640px; }
.prose .link-arrow { margin-top: 6px; }
.prose p a:not(.link-arrow) { color: var(--text); text-decoration: underline; text-decoration-color: rgba(196, 181, 253, 0.5); text-underline-offset: 3px; }
.prose p a:not(.link-arrow):hover { color: var(--violet-hi); }
.stack { display: grid; gap: 14px; }
.stack .card p { font-size: 16px; color: var(--text); line-height: 1.6; }

/* closing band: the light comes back */
.band {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 32px; justify-items: start;
  padding: 56px 64px 64px 28px;
  border-radius: var(--r-panel); border: 1px solid var(--line-2);
  background: #0b0815;
}
@media (min-width: 900px) { .band { padding: 80px 64px 88px; } }
.band h2 { max-width: 620px; }
.band p { margin-top: 16px; max-width: 560px; font-size: 17px; }
.band-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.band-light::before { /* a thin strand falling at the right */
  content: ""; position: absolute; top: 0; bottom: 0; right: max(26px, 16%); width: 2px;
  background: linear-gradient(to bottom, rgba(196, 181, 253, 0), rgba(255, 255, 255, 0.9));
  box-shadow: 0 0 12px 2px rgba(167, 139, 250, 0.7), 0 0 40px 8px rgba(139, 92, 246, 0.35);
}
.band-light::after {
  content: ""; position: absolute; right: max(26px, 16%); bottom: 0; width: 1000px; height: 360px;
  transform: translate(calc(50% - 1px), 50%);
  background: radial-gradient(closest-side, rgba(214, 204, 255, 0.5), rgba(139, 92, 246, 0.26) 34%, transparent);
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 32px; font-size: 15px; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; gap: 56px; } }
.footer-brand img { height: 34px; width: auto; }
.footer-brand p { margin-top: 18px; max-width: 420px; color: var(--text-3); line-height: 1.65; }
.footer-col { display: grid; gap: 12px; align-content: start; color: var(--text-3); }
.footer-col .label { margin-bottom: 4px; }
.footer-col a { color: var(--text-2); width: fit-content; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= inner pages ================= */

/* a shorter sky with the same beam: the page title on the left, the light landing on the horizon below it */
.fold--page { min-height: clamp(440px, 64svh, 620px); padding-bottom: 88px; }
@media (min-width: 768px) { .fold--page { min-height: clamp(480px, 66svh, 660px); } }
.hero--page h1 { font-size: clamp(38px, 3.4vw + 22px, 72px); }
.hero--page + .section { padding-top: 72px; }
@media (min-width: 768px) { .hero--page + .section { padding-top: 96px; } }

.note { font-size: 14px; line-height: 1.6; color: var(--text-3); max-width: 560px; }
.note a, .fineprint a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(196, 181, 253, 0.45); text-underline-offset: 3px; white-space: nowrap; }
.fineprint { margin-top: 24px; max-width: 820px; font-size: 13px; line-height: 1.6; color: var(--text-3); }
.btn-block { width: 100%; }

/* plan cards on the Fiber Internet page carry their own Apply button */
.level .apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03); color: var(--text); font-size: 14px; font-weight: 600;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.level .apply:hover { border-color: rgba(196, 181, 253, 0.5); background: rgba(139, 92, 246, 0.16); }

/* the E-Portal section: what subscribers can do, beside the phone */
.portal-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .portal-grid { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.portal-copy { display: grid; gap: 20px; align-content: start; }
.portal-copy .hero-cta { margin-top: 6px; }
.features { margin-top: 12px; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
.features li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); }
.features .tile { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.features .icon { width: 18px; height: 18px; }
.features b { display: block; color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.35; }
.features small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.portal-phone { position: relative; display: grid; place-items: center; padding: 32px 0 56px; }
.portal-phone::before { /* the phone stands in a pool of violet light */
  content: ""; position: absolute; left: 50%; top: 50%; width: min(520px, 110vw); height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.3), rgba(91, 33, 182, 0.1) 55%, transparent);
  pointer-events: none;
}
.iphone--solo { --pw: clamp(210px, 58vw, 290px); margin: 0; justify-self: center; align-self: center; }

/* four stops instead of five */
@media (min-width: 1024px) { .route--4 { grid-template-columns: repeat(4, 1fr); } }

/* coverage and questions */
.coverage { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .coverage { grid-template-columns: 1fr 1.1fr; gap: 72px; } }
.coverage .prose .hero-cta { margin-top: 10px; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--glass); border: 1px solid var(--line); transition: border-color 0.25s ease, background-color 0.25s ease; }
.faq details[open] { border-color: var(--line-2); background: var(--glass-hi); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon-sm { color: var(--violet-hi); transition: transform 0.25s ease; }
.faq details[open] summary .icon-sm { transform: rotate(180deg); }
.faq details p { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; }

/* services: one row per service, the capabilities beside it */
.service {
  display: grid; gap: 28px; padding: 44px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.service:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .service { grid-template-columns: 1.15fr 1fr; gap: 72px; padding: 56px 0; } }
.service .head { display: flex; gap: 18px; align-items: flex-start; }
.service .tile { flex: none; transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.service:target .tile { border-color: rgba(196, 181, 253, 0.7); box-shadow: 0 0 26px rgba(139, 92, 246, 0.65); }
.service h2 { font-size: clamp(22px, 1vw + 16px, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.service .desc { margin-top: 12px; font-size: 16px; line-height: 1.7; }
.caps { margin-top: 16px; display: grid; gap: 12px; }
.caps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--text); }
.caps .icon-sm { margin-top: 3px; color: var(--violet-hi); }

/* about */
.grid-2 { margin-top: 48px; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.corp { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .corp { grid-template-columns: 1fr 1.1fr; gap: 72px; } }
.corp .card { margin-top: 28px; flex-direction: row; gap: 16px; align-items: flex-start; }
.corp .card .tile { flex: none; }
.corp .card p { margin-top: 8px; }
.info-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.info-table th {
  width: 38%; padding: 16px 16px 16px 0; text-align: left; vertical-align: top;
  font: 500 12px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.info-table td { padding: 16px 0; color: var(--text); line-height: 1.55; }
.info-table tr + tr th, .info-table tr + tr td { border-top: 1px solid var(--line); }
.info-table a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(196, 181, 253, 0.4); text-underline-offset: 3px; }
.info-table a:hover { color: var(--violet-hi); }

/* contact */
.contact-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.15fr; gap: 56px; } }
.contact-list { display: grid; gap: 10px; }
.contact-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); }
.contact-card .tile { flex: none; }
.contact-card .k { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.contact-card .v { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--text); }
.contact-card .v a:hover { color: var(--violet-hi); }
.contact-card .s { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.contact-card .s a { color: var(--violet-hi); }
.inquiry {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 32px 22px; border-radius: var(--r-panel);
  background: #0b0815; border: 1px solid var(--line-2);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
@media (min-width: 640px) { .inquiry { padding: 40px; } }
.inquiry::before { /* the lit top rim */
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 204, 255, 0.85) 50%, transparent);
}
.inquiry::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 700px; height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent);
}
.inquiry h2 { font-size: clamp(24px, 1vw + 18px, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.inquiry > p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.form { margin-top: 28px; display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font: 500 12px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.field input, .field select, .field textarea {
  width: 100%; height: 48px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03); color: var(--text);
  font: 400 16px/1.4 var(--font);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field textarea { height: auto; min-height: 140px; padding: 12px 14px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.field select option { background: #120e1f; color: var(--text); }
.field ::placeholder { color: #6f6886; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: rgba(196, 181, 253, 0.7);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); background-color: rgba(255, 255, 255, 0.05);
}
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #151022 inset; transition: background-color 9999s; }
.form .btn { margin-top: 6px; }
.form-status { font-size: 14px; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.ok { color: #86efac; }
.form-status.err { color: #fca5a5; }
.form .help { font-size: 13px; line-height: 1.55; color: var(--text-3); }

/* 404: the fiber is cut. The beam stops in mid-air above a router whose red light blinks. */
.fold--lost { min-height: 100svh; padding-top: 0; padding-bottom: 0; align-items: stretch; }
.fold--lost > .container { display: flex; flex-direction: column; }
.lost-top { height: var(--header-h); display: flex; align-items: center; }
.lost-top img { height: 34px; width: auto; }
.lost-grid { flex: 1; display: grid; align-items: center; gap: 24px; padding: 32px 0 0; }
.lost .hero-copy { padding-bottom: 40px; }
.lost .help { margin-top: 26px; font-size: 15px; color: var(--text-2); }
.lost .help a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(196, 181, 253, 0.5); text-underline-offset: 3px; white-space: nowrap; }
.router { width: min(100%, 340px); height: auto; justify-self: center; align-self: end; }
@media (min-width: 1024px) {
  .lost-grid { position: relative; }
  .router {
    position: absolute; bottom: 0; width: 380px;
    left: calc(50% + var(--beam-offset)); transform: translateX(-70%); /* the faded Wi-Fi arcs sit under the broken beam */
  }
}
.beam.beam--cut {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 52%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 52%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  animation: none;
}
.horizon--dim { opacity: 0.35; }
.spark { /* the broken end of the fiber */
  position: absolute; top: 44%; width: 46px; height: 46px;
  left: calc(50% + var(--beam-offset)); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(196, 181, 253, 0.45) 40%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .beam.beam--cut, .spark { animation: sputter 3.2s steps(1, end) infinite; }
  .router .blink { animation: lost-blink 1.4s ease-in-out infinite; }
  .router .arc { animation: lost-arc 2.4s ease-in-out infinite; }
}
@keyframes sputter {
  0%, 100% { opacity: 1; } 5% { opacity: 0.35; } 7% { opacity: 0.9; } 9% { opacity: 0.2; } 12% { opacity: 1; }
  48% { opacity: 0.95; } 50% { opacity: 0.4; } 53% { opacity: 1; } 81% { opacity: 0.85; } 83% { opacity: 0.25; } 85% { opacity: 1; }
}
@keyframes lost-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes lost-arc { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.32; } }

/* ================= the desktop E-Portal pays the bill while you scroll =================
   Five real screens from the demo portal stacked in the window, a pointer that clicks Pay Now, Submit and
   Back to dashboard, and the address bar following along. light.js drives it from the scroll position. */
.screen-view[data-flow] { position: relative; }
.flow-shot { width: 100%; }
.flow-shot + .flow-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.flow-pointer {
  position: absolute; z-index: 2; left: 88%; top: 90%;
  width: clamp(13px, 2.1%, 24px); height: auto; opacity: 0; pointer-events: none;
  fill: #fff; stroke: #0b0815; stroke-width: 1.3; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transform: translate(-21%, -12%); transform-origin: 21% 12%;
}
.flow-ripple {
  position: absolute; z-index: 1; left: 0; top: 0; width: clamp(26px, 5%, 56px); aspect-ratio: 1;
  border-radius: 50%; border: 2px solid rgba(139, 92, 246, 0.65);
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.12) 60%, transparent);
  transform: translate(-50%, -50%) scale(0.4); opacity: 0; pointer-events: none;
}
.screen-bar .url-path { color: var(--text-2); }

/* ================= scroll motion =================
   light.js writes --p (0 to 1) on every [data-scroll] element as it comes into view ("out": as the page
   scrolls away from it; "track": as far as you have read). The CSS below turns --p into movement, so things
   move only while the page moves and stop the moment scrolling stops. Without the script, --p is 1 and
   everything simply sits in place. */
.js [data-scroll] { --p: 0; }
@media (prefers-reduced-motion: reduce) { [data-scroll] { --p: 1 !important; } }

/* children follow one after another */
[data-motion] > :nth-child(2) { --d: 0.08; }
[data-motion] > :nth-child(3) { --d: 0.16; }
[data-motion] > :nth-child(4) { --d: 0.24; }
[data-motion] > :nth-child(5) { --d: 0.3; }
[data-motion] > :nth-child(6) { --d: 0.36; }
[data-motion] > :nth-child(n + 7) { --d: 0.42; }

/* rise: the element floats up into place */
[data-motion="rise"] { --q: var(--p, 1); opacity: calc(0.15 + 0.85 * var(--q)); translate: 0 calc((1 - var(--q)) * 52px); }
/* lift: its children float up, one after another */
[data-motion="lift"] > :not(.band-light) {
  --q: clamp(0, calc((var(--p, 1) - var(--d, 0)) / (1 - var(--d, 0))), 1);
  opacity: calc(0.15 + 0.85 * var(--q)); translate: 0 calc((1 - var(--q)) * 44px);
}
/* the facts row only rises a little, so its text never reaches the row's own border lines */
.facts[data-motion="lift"] > * { translate: 0 calc((1 - var(--q)) * 16px); }
/* tilt: cards stand up from lying back, one after another */
[data-motion="tilt"] > * {
  --q: clamp(0, calc((var(--p, 1) - var(--d, 0)) / (1 - var(--d, 0))), 1);
  opacity: calc(0.12 + 0.88 * var(--q));
  transform: perspective(1100px) rotateX(calc((1 - var(--q)) * 28deg)) translateY(calc((1 - var(--q)) * 70px));
  transform-origin: 50% 100%;
}
/* slide: rows come in from the left, one after another */
[data-motion="slide"] > * {
  --q: clamp(0, calc((var(--p, 1) - var(--d, 0)) / (1 - var(--d, 0))), 1);
  opacity: calc(0.12 + 0.88 * var(--q)); translate: calc((1 - var(--q)) * -64px) 0;
}

/* the page title drifts up and the sky sinks as you leave it */
/* the front of each page answers the scroll: the words lean back and recede in layers (headline fastest),
   the light lands harder, and the faster you scroll the wider the beam glows (--boost, set by light.js) */
[data-scroll="out"] .hero-copy {
  translate: 0 calc(var(--p, 0) * -90px);
  opacity: calc(1 - var(--p, 0) * 1.15);
  transform: perspective(1100px) rotateX(calc(var(--p, 0) * 24deg)) scale(calc(1 - var(--p, 0) * 0.08));
  transform-origin: 50% 100%;
}
[data-scroll="out"] .hero-copy > :nth-child(2) { translate: 0 calc(var(--p, 0) * -40px); }
[data-scroll="out"] .hero-copy > :nth-child(3) { translate: 0 calc(var(--p, 0) * -18px); }
[data-scroll="out"] .bloom { transform: translate(-50%, 50%) scale(calc(1 + var(--p, 0) * 0.45 + var(--boost, 0) * 0.14)); }
.beam .glow { transform: translateX(-50%) scaleX(calc(1 + var(--boost, 0) * 0.7)); }
.beam .halo { transform: translateX(-50%) scaleX(calc(1 + var(--boost, 0) * 0.6)); }
.beam .core { transform: translateX(-50%) scaleX(calc(1 + var(--boost, 0) * 0.9)); }
.hero--page[data-scroll="out"] .sky { translate: 0 calc(var(--p, 0) * 80px); }

/* the steps: light runs along the fiber as far as you have scrolled, and each stop lights up when it arrives */
.route { --n: 5; }
.route--4 { --n: 4; }
.route li:nth-child(1) { --i: 0; }
.route li:nth-child(2) { --i: 1; }
.route li:nth-child(3) { --i: 2; }
.route li:nth-child(4) { --i: 3; }
.route li:nth-child(5) { --i: 4; }
.route li { --lit: clamp(0, calc((var(--p, 1) * var(--n) - var(--i, 0)) * 4), 1); }
.route::after {
  content: ""; position: absolute; left: 19px; top: 8px; width: 2px; margin-left: -0.5px; border-radius: 2px; pointer-events: none;
  height: calc(var(--p, 1) * (100% - 16px));
  background: linear-gradient(to bottom, rgba(196, 181, 253, 0.45), #fff);
  box-shadow: 0 0 10px rgba(196, 181, 253, 0.8), 0 0 22px rgba(139, 92, 246, 0.6);
}
@media (min-width: 1024px) {
  .route::after {
    left: 0; top: 18.5px; margin-left: 0; height: 2px; width: calc(var(--p, 1) * 100%);
    background: linear-gradient(90deg, rgba(196, 181, 253, 0.45), #fff);
  }
}
.route .node {
  border-color: rgba(196, 181, 253, calc(0.22 + 0.58 * var(--lit, 1)));
  box-shadow: 0 0 0 4px var(--ink), 0 0 calc(4px + 22px * var(--lit, 1)) rgba(139, 92, 246, calc(0.1 + 0.65 * var(--lit, 1)));
}
.route li h3, .route li p { opacity: calc(0.35 + 0.65 * var(--lit, 1)); }

/* closing band: the strand of light draws down, then the ground lights up where it lands */
.band[data-scroll] .band-light::before { transform: scaleY(var(--p, 1)); transform-origin: 50% 0; }
.band[data-scroll] .band-light::after { opacity: clamp(0, calc(var(--p, 1) * 2 - 1), 1); }

/* services: each icon turns into place as its row arrives */
.service[data-scroll] .tile { rotate: calc((1 - var(--p, 1)) * -90deg); scale: calc(0.7 + 0.3 * var(--p, 1)); }

/* contact: the form turns to face you */
.inquiry[data-scroll] {
  transform: perspective(1400px) rotateY(calc((1 - var(--p, 1)) * -14deg)) translateX(calc((1 - var(--p, 1)) * 36px));
  transform-origin: 100% 50%;
}
/* a phone's 20-px gutter is narrower than that 36-px nudge: the waiting form stuck out past the screen and the phone
   zoomed the whole page out to fit it (pre-upload check, 2026-10-01). The turn alone stays: turning about its own
   right edge, the form never crosses it. */
@media (max-width: 767px) {
  .inquiry[data-scroll] { transform: perspective(1400px) rotateY(calc((1 - var(--p, 1)) * -14deg)); }
}

/* ================= the featured plan: 50 Mbps (owner, 2026-10-01: "dapat emphasized yung 50Mbps") =================
   A lit violet card, wider and taller than the others, with bigger numbers, a badge and its own button. */
@media (min-width: 620px) and (max-width: 1079px) {
  .levels { grid-template-columns: repeat(3, 1fr); }
  .level--featured { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .levels { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .level--featured { margin-top: -26px; }
}
.level--featured {
  overflow: visible; /* so the badge's aura can glow past the card's edge instead of being cut off */
  padding-top: 34px;
  border-color: rgba(221, 214, 254, 0.75);
  background: linear-gradient(165deg, #8a5cff 0%, #6d3fd6 34%, #4c1d95 72%, #2e1065 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 30px 80px -28px rgba(139, 92, 246, 0.95), 0 0 70px -12px rgba(139, 92, 246, 0.65);
}
.level--featured:hover { border-color: rgba(237, 233, 254, 0.95); }
.level--featured::before { display: none; } /* the whole card is lit, so it needs no speed meter on its edge */
.level--featured::after { background: radial-gradient(70% 55% at 50% 0, rgba(255, 255, 255, 0.3), transparent 70%); }
.level--featured .label { color: rgba(255, 255, 255, 0.8); }
.level--featured .speed { color: #fff; }
.level--featured .speed b { font-size: 84px; }
.level--featured .speed span { color: rgba(255, 255, 255, 0.78); }
.level--featured .fit { color: rgba(255, 255, 255, 0.9); }
.level--featured .price { border-top-color: rgba(255, 255, 255, 0.28); }
.level--featured .price b { font-size: 30px; color: #fff; }
.level--featured .price span { color: rgba(255, 255, 255, 0.78); }
.level--featured .terms b { color: #fff; }
.level--featured .terms span { color: rgba(255, 255, 255, 0.78); }
.level--featured .btn { position: relative; z-index: 1; margin-top: 4px; }
.badge {
  position: absolute; z-index: 1; top: 20px; right: 20px;
  padding: 7px 12px; border-radius: 999px;
  background: #fff; color: #4c1d95;
  font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  /* a purple aura (owner, 2026-10-01): lavender close in, violet further out; it breathes, below */
  box-shadow:
    0 0 0 2px rgba(221, 214, 254, 1),
    0 0 16px 6px rgba(221, 214, 254, 0.85),
    0 0 40px 14px rgba(167, 139, 250, 0.9),
    0 0 84px 22px rgba(139, 92, 246, 0.6);
}
/* a spark of light runs around the featured card's edge, like light in a fiber (owner: "dapat nandun sa card").
   The ring is cut out of a turning conic gradient by a mask; the glow comes from the parent's drop-shadow,
   so the mask never clips it. */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card-spark {
  position: absolute; inset: -1px; z-index: 2; border-radius: inherit; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(196, 181, 253, 0.95)) drop-shadow(0 0 22px rgba(139, 92, 246, 0.8));
}
.card-spark i {
  position: absolute; inset: 0; border-radius: inherit; padding: 2.5px;
  background: conic-gradient(from var(--ring), transparent 0deg, transparent 230deg, rgba(196, 181, 253, 0.45) 280deg, rgba(221, 214, 254, 0.95) 322deg, #fff 336deg, #fff 350deg, transparent 357deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: no-preference) {
  .badge { animation: aura-breathe 2.8s ease-in-out infinite; }
  .card-spark i { animation: ring-spin 4.2s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .card-spark { display: none; } }
@keyframes ring-spin { to { --ring: 360deg; } }
@keyframes aura-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(221, 214, 254, 1), 0 0 14px 5px rgba(221, 214, 254, 0.75), 0 0 34px 12px rgba(167, 139, 250, 0.75), 0 0 70px 18px rgba(139, 92, 246, 0.45); }
  50% { box-shadow: 0 0 0 2px rgba(237, 233, 254, 1), 0 0 22px 9px rgba(237, 233, 254, 0.95), 0 0 52px 20px rgba(167, 139, 250, 1), 0 0 110px 32px rgba(139, 92, 246, 0.7); }
}
.btn-white { color: #4c1d95; background: #fff; border-color: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6); }
.btn-white:hover { transform: translateY(-1px); background: #f5f3ff; }

/* ================= plan details (owner, 2026-10-01): every pricing card opens one reusable window =================
   The card's "Plan details" button stretches over the whole card, so a click anywhere opens the plan; the Apply
   links sit above it and still go to the E-Portal. The window is built by plans.js from one list of the four plans. */
.plan-open {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 14px/1.3 var(--font); color: var(--violet-hi);
}
.plan-open::after { content: ""; position: absolute; inset: 0; z-index: 0; cursor: pointer; }
.plan-open .icon-sm { transition: transform 0.2s ease; }
.level:hover .plan-open .icon-sm { transform: translateX(3px); }
.plan-open:focus-visible { outline-offset: 5px; }
.level--featured .plan-open { color: #fff; }
.level .apply, .level--featured .btn { position: relative; z-index: 1; }
.level .badge, .level .card-spark { pointer-events: none; }
.level:not(.level--featured):has(.plan-open):hover {
  border-color: rgba(196, 181, 253, 0.34);
  box-shadow: 0 22px 56px -30px rgba(139, 92, 246, 0.8);
}
.level--featured:has(.plan-open):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 34px 90px -26px rgba(139, 92, 246, 1), 0 0 84px -10px rgba(139, 92, 246, 0.75);
}
.level:has(.plan-open:focus-visible) { border-color: var(--violet-hi); }

/* the window */
html.pd-locked { overflow: hidden; }
.pd-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
.pd-modal[hidden] { display: none; }
.pd-backdrop {
  position: absolute; inset: 0; background: rgba(4, 2, 9, 0.74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s ease;
}
.pd-panel {
  position: relative; width: min(1040px, 100%); max-height: min(88vh, 980px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-panel); border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #110c20 0%, #0a0714 220px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 120px -40px rgba(0, 0, 0, 0.9), 0 0 90px -34px rgba(139, 92, 246, 0.6);
  opacity: 0; transform: translateY(10px) scale(0.975);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.pd-panel:focus { outline: none; }
.pd-panel::before { /* the lit top rim, as on the contact form */
  content: ""; position: absolute; z-index: 3; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 204, 255, 0.85) 50%, transparent);
}
.pd-modal.is-open .pd-backdrop { opacity: 1; }
.pd-modal.is-open .pd-panel { opacity: 1; transform: none; }
.pd-top {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 40px; border-bottom: 1px solid var(--line); background: rgba(13, 9, 24, 0.92);
}
.pd-top-label { font: 500 12px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.pd-close {
  margin-left: auto; flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text); cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pd-close:hover { border-color: rgba(196, 181, 253, 0.45); background: rgba(139, 92, 246, 0.14); }
.pd-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 40px 40px; }

/* hero */
.pd-hero { display: grid; gap: 24px; padding: 30px 0 32px; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .pd-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; gap: 40px; } }
.pd-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pd-badge {
  padding: 6px 10px; border-radius: 999px; background: #fff; color: #4c1d95;
  font: 600 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(221, 214, 254, 0.9), 0 0 18px 4px rgba(139, 92, 246, 0.55);
}
.pd-speed-row { margin-top: 14px; display: flex; align-items: center; gap: 14px; }
.pd-speed { display: flex; align-items: baseline; gap: 10px; color: var(--text); outline: none; }
.pd-speed b { font-weight: 500; font-size: clamp(64px, 5vw + 36px, 104px); line-height: 0.9; letter-spacing: -0.05em; }
.pd-upto, .pd-unit { font: 500 14px/1 var(--mono); letter-spacing: 0.06em; color: var(--text-3); }
.pd-upto { text-transform: uppercase; font-size: 12px; }
.pd-info { position: relative; }
.pd-info-btn {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--violet-hi); cursor: pointer;
}
.pd-info-btn:hover { border-color: rgba(196, 181, 253, 0.5); }
.pd-tip {
  position: absolute; z-index: 4; top: calc(100% + 10px); right: -10px; width: min(300px, 76vw);
  padding: 12px 14px; border-radius: 12px; background: #1a1331; border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.85);
  font: 400 13px/1.55 var(--font); color: var(--text-2);
  opacity: 0; visibility: hidden; translate: 0 -4px; pointer-events: none;
  transition: opacity 0.15s ease, translate 0.15s ease, visibility 0.15s;
}
.pd-info:hover .pd-tip, .pd-info-btn:focus-visible + .pd-tip, .pd-info.is-open .pd-tip { opacity: 1; visibility: visible; translate: 0 0; }
.pd-kind { margin-top: 12px; font: 500 13px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-hi); }
.pd-desc { margin-top: 14px; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.pd-hero-price { display: grid; gap: 6px; padding: 22px; border-radius: var(--r-card); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--glass-hi), var(--glass)); }
.pd-price { display: flex; align-items: baseline; gap: 10px; }
.pd-price b { font: 500 40px/1 var(--mono); letter-spacing: -0.03em; color: var(--text); }
.pd-price span { font: 500 13px/1 var(--mono); color: var(--text-3); }
.pd-lock { font: 500 13px/1.4 var(--mono); color: var(--text-2); }
.pd-hero-apply { margin-top: 12px; }

/* sections */
.pd-section { padding: 36px 0; border-bottom: 1px solid var(--line); }
.pd-kicker { display: block; font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-hi); }
.pd-h3 { margin-top: 10px; font-size: clamp(22px, 1vw + 16px, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.pd-h4 { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); }
.pd-text { margin-top: 14px; max-width: 72ch; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.pd-text strong { color: var(--text); font-weight: 600; }
.pd-muted { font-size: 14px; color: var(--text-3); }
.pd-note { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.pd-metrics { margin-top: 22px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pd-metric { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--r-card); border: 1px solid var(--line); background: linear-gradient(180deg, var(--glass-hi), var(--glass)); }
.pd-metric .icon { margin-bottom: 8px; color: var(--violet-hi); }
.pd-metric b { font-weight: 500; font-size: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.pd-metric b.pd-metric-word { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.pd-metric span { font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* connected vs. active: one dot per device, only a few lit */
.pd-active { margin-top: 24px; padding: 22px; border-radius: var(--r-card); border: 1px dashed var(--line-2); background: rgba(255, 255, 255, 0.015); }
.pd-active-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-active-dots i, .pd-active-key i { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1px solid rgba(196, 181, 253, 0.35); }
.pd-active-dots i.busy, .pd-active-key i.busy { background: var(--violet-hi); border-color: #fff; box-shadow: 0 0 10px rgba(196, 181, 253, 0.9); }
.pd-active-key { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--text-3); }
.pd-active-key span { display: inline-flex; align-items: center; gap: 8px; }
.pd-active-dots { margin-top: 16px; }
@media (max-width: 559px) { /* two numbers side by side, the household below them */
  .pd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-metric:last-child { grid-column: 1 / -1; }
  .pd-metric { padding: 16px; }
  .pd-metric b { font-size: 30px; }
}

/* lists */
.pd-checks { margin-top: 18px; display: grid; gap: 10px; }
.pd-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text); }
.pd-checks .icon-sm { margin-top: 3px; color: var(--violet-hi); }
.pd-checks--grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; }
.pd-plain { margin-top: 14px; display: grid; gap: 8px; }
.pd-plain li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.pd-plain li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: rgba(196, 181, 253, 0.6); }

/* example household */
.pd-example-wrap { margin-top: 20px; display: grid; gap: 20px; }
@media (min-width: 760px) { .pd-example-wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.pd-example { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pd-example li { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.pd-example b { min-width: 2.8ch; font: 500 18px/1 var(--mono); color: var(--text); }
.pd-example span { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.pd-example-side .pd-text { margin-top: 12px; }
.pd-total {
  display: inline-flex; padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(196, 181, 253, 0.35); background: rgba(139, 92, 246, 0.12);
  font: 600 13px/1.2 var(--mono); color: var(--violet-hi);
}

/* simultaneous use */
.pd-scenarios { margin-top: 20px; display: grid; gap: 12px; }
@media (min-width: 900px) { .pd-scenarios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-scenario { display: flex; flex-direction: column; padding: 20px; border-radius: var(--r-card); border: 1px solid var(--line); background: linear-gradient(180deg, var(--glass-hi), var(--glass)); }
.pd-scenario--next, .pd-scenario--wifi { border-style: dashed; border-color: var(--line-2); } /* heavier use, or the Wi-Fi inside the home: a note, never a failure */
.pd-scenario-n { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.pd-scenario .pd-h4 { margin-top: 8px; }
.pd-scenario .pd-checks { margin-top: 14px; gap: 8px; }
.pd-scenario .pd-checks li, .pd-scenario .pd-plain li { font-size: 14px; }
.pd-scenario .pd-text { font-size: 14px; }
.pd-ex-label { margin-top: 14px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.pd-scenario .pd-plain { margin-top: 10px; }
.pd-status-row { margin-top: auto; padding-top: 18px; }
.pd-status { display: inline-flex; padding: 7px 11px; border-radius: 999px; font: 600 11px/1.25 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pd-scenario--ok .pd-status { color: #86efac; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); }
.pd-scenario--next .pd-status { color: var(--violet-hi); background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(196, 181, 253, 0.35); }
.pd-scenario--wifi .pd-status { color: #93c5fd; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(147, 197, 253, 0.3); }

/* bandwidth: one bar is the plan; an everyday mix takes its share */
.pd-bar-wrap { margin-top: 22px; padding: 22px; border-radius: var(--r-card); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.pd-bar-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.pd-bar { margin-top: 12px; display: flex; height: 22px; overflow: hidden; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); }
.pd-seg { flex-basis: 0; min-width: 5px; }
.pd-seg + .pd-seg { border-left: 1px solid rgba(6, 4, 11, 0.65); }
.pd-seg--tv { background: #8b5cf6; }
.pd-seg--call { background: #a78bfa; }
.pd-seg--game { background: #c4b5fd; }
.pd-seg--social { background: #6d3fd6; }
.pd-seg--web { background: #ddd6fe; }
.pd-seg--free { background: repeating-linear-gradient(135deg, rgba(196, 181, 253, 0.16) 0 6px, rgba(196, 181, 253, 0.04) 6px 12px); }
.pd-bar-key { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-2); }
.pd-bar-key li { display: inline-flex; align-items: center; gap: 8px; }
.pd-bar-key i { width: 12px; height: 12px; flex: none; border-radius: 4px; }

/* choosing */
.pd-two { margin-top: 22px; display: grid; gap: 30px; }
@media (min-width: 860px) { .pd-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; } }
.pd-next {
  margin-top: 22px; padding: 22px; border-radius: var(--r-card); border: 1px solid rgba(196, 181, 253, 0.3);
  background: radial-gradient(120% 140% at 100% 0, rgba(139, 92, 246, 0.2), transparent 60%), var(--glass);
}
.pd-col > .pd-next:first-child { margin-top: 0; }
.pd-next-q { font: 500 12px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-hi); }
.pd-next-speed { margin-top: 10px; font-size: 30px; font-weight: 500; letter-spacing: -0.03em; color: var(--text); }
.pd-next-speed span { margin-left: 10px; font: 500 13px/1 var(--mono); letter-spacing: 0; color: var(--text-3); }
.pd-next .pd-text { margin-top: 8px; }
.pd-next .btn { margin-top: 16px; }

/* Wi-Fi */
.pd-wifi { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.pd-wifi .pd-text { margin-top: 0; }
.pd-tile { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(139, 92, 246, 0.1); color: var(--violet-hi); }

/* compare */
.pd-cap-head { display: none; }
.pd-compare { margin-top: 18px; display: grid; gap: 8px; }
.pd-compare-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
  font: 400 14px/1.4 var(--font); color: var(--text-2); text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pd-compare-row:hover { border-color: rgba(196, 181, 253, 0.35); background: rgba(139, 92, 246, 0.08); }
.pd-compare-row.is-current { border-color: rgba(196, 181, 253, 0.6); background: rgba(139, 92, 246, 0.14); }
.pd-c-speed { font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--text); }
.pd-c-speed small { display: block; margin-top: 3px; font: 500 12px/1.2 var(--mono); color: var(--text-3); }
.pd-c-users, .pd-c-dev, .pd-c-house { grid-column: 1 / -1; font-size: 13.5px; }
.pd-c-cap { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; justify-self: end; }
.pd-c-cap em { font: 600 10.5px/1 var(--mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-hi); }
.pd-dots { display: inline-flex; gap: 5px; }
.pd-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(196, 181, 253, 0.4); }
.pd-dots i.on { background: var(--violet-hi); border-color: var(--violet-hi); box-shadow: 0 0 8px rgba(196, 181, 253, 0.7); }
@media (min-width: 860px) {
  .pd-cap-head, .pd-compare-row { grid-template-columns: 1.15fr 1fr 0.9fr 1.35fr 1.25fr; }
  .pd-cap-head {
    margin-top: 20px; display: grid; gap: 12px; padding: 0 17px;
    font: 500 11px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
  }
  .pd-compare { margin-top: 10px; }
  .pd-compare-row { gap: 12px; }
  .pd-c-users, .pd-c-dev, .pd-c-house { grid-column: auto; }
  .pd-c-cap { grid-column: auto; grid-row: auto; justify-self: start; }
}

/* notes and the last word */
.pd-notes { margin-top: 28px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.pd-notes summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  list-style: none; cursor: pointer; font: 500 13px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--text-3);
}
.pd-notes summary::-webkit-details-marker { display: none; }
.pd-notes summary::after { content: "+"; font: 400 20px/1 var(--font); color: var(--violet-hi); }
.pd-notes[open] summary::after { content: "\2013"; }
.pd-notes ul { display: grid; gap: 6px; padding: 0 18px 16px 36px; list-style: disc; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.pd-cta {
  margin-top: 28px; padding: 34px 24px; border-radius: var(--r-panel); text-align: center;
  border: 1px solid rgba(196, 181, 253, 0.35);
  background: radial-gradient(80% 120% at 50% 0, rgba(139, 92, 246, 0.28), transparent 70%), linear-gradient(180deg, var(--glass-hi), var(--glass));
}
.pd-cta-q { font: 500 12px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-hi); }
.pd-cta-plan { margin-top: 12px; font-size: clamp(38px, 2.4vw + 24px, 54px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--text); }
.pd-cta-plan span { display: block; margin-top: 12px; font: 500 14px/1.4 var(--mono); letter-spacing: 0; color: var(--text-2); }
.pd-cta-actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pd-bar-cta { display: none; }

/* phones: a bottom sheet, with the plan and Apply always in reach */
@media (max-width: 719px) {
  .pd-modal { padding: 0; place-items: end stretch; }
  .pd-panel { width: 100%; max-height: calc(100svh - 10px); border-radius: 22px 22px 0 0; border-bottom: 0; transform: translateY(28px); }
  .pd-top { padding: 10px 10px 10px 18px; }
  .pd-body { padding: 0 18px 28px; }
  .pd-hero { padding-top: 22px; }
  .pd-hero-apply { display: none; }
  .pd-section { padding: 30px 0; }
  .pd-cta { padding: 28px 18px; }
  .pd-cta-actions .btn { width: 100%; }
  .pd-bar-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-2); background: rgba(11, 8, 20, 0.97);
  }
  .pd-bar-cta p { display: grid; gap: 3px; }
  .pd-bar-speed { font-weight: 600; font-size: 17px; line-height: 1.1; color: var(--text); }
  .pd-bar-price { font: 500 13px/1.2 var(--mono); color: var(--text-3); }
  .pd-bar-apply { height: 48px; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-panel, .pd-backdrop { transition: opacity 0.01s linear; }
  .pd-panel { transform: none; }
}

/* ================= network partners (owner, 2026-10-01): under About TINKIT on the home page =================
   The carriers behind TINKIT Fiber, in the portal's order and words. Their logos are drawn for white, so each sits
   on a white plate in its own colours, as on the E-Portal dashboard. */
.partners { margin-top: 64px; }
.partners-head { display: flex; align-items: center; gap: 16px; }
.partners-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.partner-list { margin-top: 20px; display: grid; gap: 12px; }
@media (min-width: 720px) { .partner-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner {
  display: flex; align-items: center; gap: 20px; padding: 16px;
  border-radius: var(--r-card); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
}
.partner-plate {
  flex: none; width: 132px; height: 88px; display: grid; place-items: center; border-radius: 14px;
  background: #fff; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.partner-plate img { width: auto; height: auto; max-width: 108px; max-height: 70px; }
.partner-text { min-width: 0; display: grid; gap: 6px; }
.partner-text b { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.partner-text small { font: 500 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-hi); }
@media (max-width: 419px) {
  .partner { gap: 14px; padding: 12px; }
  .partner-plate { width: 104px; height: 72px; }
  .partner-plate img { max-width: 86px; max-height: 56px; }
  .partner-text b { font-size: 15px; }
}

/* ================= light passing through (owner, 2026-10-01: "I dont see animation on other pages") =================
   Time-based touches that show wherever the page is: a glint crosses every page's headline shortly after it opens and
   again every few seconds; each section title glints once as it arrives; a light runs along each service row and
   card as it arrives; icon tiles breathe while on screen. Light only: nothing here moves the layout. */
.display {
  background-image: linear-gradient(105deg, transparent 40%, #c4b5fd 46.5%, #fff 50%, #c4b5fd 53.5%, transparent 60%),
                    linear-gradient(var(--text), var(--text));
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 100% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.service { position: relative; }
.service::before {
  content: ""; position: absolute; top: -1px; left: -180px; width: 180px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 12px rgba(196, 181, 253, 0.9);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-copy h1 {
    background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%),
                      linear-gradient(180deg, #fdfcff 0%, #ddd6ee 52%, #9c94b4 100%);
    background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 100% 0, 0 0;
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both, glint 7s ease-in-out 1.4s infinite;
  }
  .display.is-seen { animation: glint-once 1.7s ease-in-out 0.15s both; }
  .service.is-seen::before { animation: streak 1.8s cubic-bezier(0.3, 0, 0.2, 1) 0.1s both; }
  .card.is-seen::before { animation: rim 1.8s ease-out 0.1s backwards; }
  .tile.in-view { animation: tile-breathe 4.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.7s); }
}
@keyframes glint { 0% { background-position: 100% 0, 0 0; } 24%, 100% { background-position: 0% 0, 0 0; } }
@keyframes glint-once { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
@keyframes streak { 0% { left: -180px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes rim { 0% { opacity: 0; transform: scaleX(0.15); } 45% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes tile-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); border-color: rgba(167, 139, 250, 0.24); }
  50% { box-shadow: 0 0 24px rgba(139, 92, 246, 0.6), inset 0 0 12px rgba(196, 181, 253, 0.18); border-color: rgba(196, 181, 253, 0.65); }
}

/* ================= services lit by the fiber (owner, 2026-10-01: "mock up the services icons lighting up") ======
   The six services on branches from the beam. A pulse runs out along each branch in turn and lights its service;
   each one links to its section below. Phones: a row under the words, lit from the beam at the right edge. */
.svc-net { --t: 6s; --step: 0.8s; position: relative; margin-top: 30px; padding-bottom: 14px; }
.svc-net ol { position: relative; display: flex; gap: 10px; }
.svc-net li { position: relative; }
.svc-net a { position: relative; display: grid; place-items: center; border-radius: 14px; }
.svc-net .tile, .svc-net .tile.in-view { width: 46px; height: 46px; animation: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.svc-net a:hover .tile { border-color: rgba(196, 181, 253, 0.7); box-shadow: 0 0 22px rgba(139, 92, 246, 0.6); }
.svc-name { display: none; }
/* phones: the line out of the beam at the right edge, and the light running along it */
.svc-net ol::before {
  content: ""; position: absolute; z-index: -1; left: 23px; right: -14px; bottom: -12px; height: 1px; /* a rail under the row, never through an icon */
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.18), rgba(214, 204, 255, 0.75));
}
.svc-net ol::after {
  content: ""; position: absolute; z-index: -1; right: -14px; bottom: -13px; width: 26px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff); box-shadow: 0 0 12px 2px rgba(196, 181, 253, 0.95); opacity: 0;
}
@media (min-width: 640px) {
  .fold--page > .container { position: relative; }
  .svc-net {
    --branch: 54px;
    position: absolute; z-index: 1; top: 50%; translate: 0 -50%; margin: 0;
    left: calc(50% + var(--beam-offset)); width: calc(50% - var(--beam-offset) - 8px);
  }
  .svc-net ol { flex-direction: column; gap: 14px; }
  .svc-net ol::before, .svc-net ol::after { display: none; }
  .svc-net li { padding-left: var(--branch); }
  .svc-net li::before { /* the branch from the beam */
    content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--branch) - 4px); height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(196, 181, 253, 0.25)); opacity: 0.45;
  }
  .svc-net li::after { /* the light running along it */
    content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 3px; margin-top: -1px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, #fff); box-shadow: 0 0 12px 2px rgba(196, 181, 253, 0.95); opacity: 0;
  }
  .svc-net a { display: flex; align-items: center; gap: 14px; justify-content: flex-start; }
}
@media (min-width: 1180px) {
  .svc-net { --branch: 104px; }
  .svc-net ol { gap: 16px; }
  .svc-name { display: block; font-size: 15px; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: color 0.2s ease; }
  .svc-net a:hover .svc-name { color: var(--text); }
}
@media (prefers-reduced-motion: no-preference) {
  .svc-net .tile, .svc-net .tile.in-view { animation: svc-light var(--t) ease-out infinite; animation-delay: calc((5 - var(--i)) * var(--step)); }
  .svc-net ol::after { animation: svc-run var(--t) linear infinite; }
  @media (min-width: 640px) {
    .svc-net .tile, .svc-net .tile.in-view { animation-delay: calc(var(--i) * var(--step)); }
    .svc-net li::before { animation: svc-branch var(--t) ease-out infinite; animation-delay: calc(var(--i) * var(--step)); }
    .svc-net li::after { animation: svc-pulse var(--t) cubic-bezier(0.45, 0, 0.25, 1) infinite; animation-delay: calc(var(--i) * var(--step)); }
    .svc-name { animation: svc-word var(--t) ease-out infinite; animation-delay: calc(var(--i) * var(--step)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-net .tile { border-color: rgba(196, 181, 253, 0.55); box-shadow: 0 0 16px rgba(139, 92, 246, 0.4); }
}
@keyframes svc-pulse {
  0% { opacity: 0; transform: translateX(0); }
  3% { opacity: 1; }
  11% { opacity: 1; transform: translateX(calc(var(--branch) - 24px)); }
  14%, 100% { opacity: 0; transform: translateX(calc(var(--branch) - 24px)); }
}
@keyframes svc-branch { 0% { opacity: 0.45; } 5% { opacity: 1; } 22%, 100% { opacity: 0.45; } }
@keyframes svc-light {
  0%, 10% { border-color: rgba(167, 139, 250, 0.24); background: rgba(139, 92, 246, 0.12); box-shadow: 0 0 0 rgba(139, 92, 246, 0); color: var(--violet-hi); }
  13% { border-color: #fff; background: rgba(139, 92, 246, 0.42); box-shadow: 0 0 30px rgba(139, 92, 246, 0.95), 0 0 0 4px rgba(196, 181, 253, 0.16); color: #fff; }
  40% { border-color: rgba(196, 181, 253, 0.6); background: rgba(139, 92, 246, 0.22); box-shadow: 0 0 18px rgba(139, 92, 246, 0.5); color: #fff; }
  65%, 100% { border-color: rgba(167, 139, 250, 0.24); background: rgba(139, 92, 246, 0.12); box-shadow: 0 0 0 rgba(139, 92, 246, 0); color: var(--violet-hi); }
}
@keyframes svc-word { 0%, 10% { color: var(--text-3); } 13%, 40% { color: var(--text); } 65%, 100% { color: var(--text-3); } }
@keyframes svc-run {
  0% { right: -14px; opacity: 0; }
  4% { opacity: 1; }
  80% { right: calc(100% - 36px); opacity: 1; }
  86%, 100% { right: calc(100% - 36px); opacity: 0; }
}

/* the home page's six service cards, lit one after another like the Services page's fiber (owner, 2026-10-01:
   "why am I not seeing the effect in home section?"): each icon lights and a light crosses its card's top edge */
@media (prefers-reduced-motion: no-preference) {
  .svc-grid .card .tile, .svc-grid .card .tile.in-view { animation: svc-light 6s ease-out infinite; animation-delay: calc(var(--i) * 0.8s); }
  .svc-grid .card::before, .svc-grid .card.is-seen::before { animation: svc-rim 6s ease-out infinite; animation-delay: calc(var(--i) * 0.8s); }
}
@keyframes svc-rim {
  0%, 9% { opacity: 0; transform: scaleX(0.2); }
  13% { opacity: 1; transform: scaleX(1); }
  40%, 100% { opacity: 0; transform: scaleX(1); }
}

/* ================= our work (owner, 2026-10-01: "real images of our work") =================
   Square photos from TINKIT projects, after Services on the home page, in labelled groups. One row per group: six
   across on a computer, three on a tablet, and on a phone a row that swipes sideways (the next photo peeks in) so the
   section stays short. Light only on hover: a gentle zoom and the lit rim. */
.work-group { margin-top: 44px; }
.work-group + .work-group { margin-top: 36px; }
.work-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 17px; font-weight: 600; color: var(--text); }
.work-label span { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-hi); }
.work-label::after { content: ""; flex: 1 1 80px; align-self: center; height: 1px; background: var(--line); }
.work-strip { /* phones: one row, edge to edge, that swipes sideways */
  margin: 16px -20px 0; padding: 0 20px 4px; display: grid; gap: 12px;
  grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2.3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
}
.work-strip > li { scroll-snap-align: start; }
@media (min-width: 720px) {
  .work-strip { margin: 16px 0 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
}
@media (min-width: 1080px) { .work-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* one tile size for every group */
.work-strip figure {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 1;
  border-radius: var(--r-card); border: 1px solid var(--line); background: var(--glass);
}
.work-strip figure::before { /* the lit top rim, on hover */
  content: ""; position: absolute; z-index: 2; inset: -1px 18% auto; height: 1px;
  background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 14px rgba(196, 181, 253, 0.9);
  opacity: 0; transition: opacity 0.3s ease;
}
.work-strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); transition: transform 0.6s ease, filter 0.6s ease; }
.work-strip figcaption {
  position: absolute; z-index: 1; inset: auto 0 0 0; padding: 30px 12px 11px;
  background: linear-gradient(transparent, rgba(6, 4, 11, 0.88));
  font: 500 12px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--text);
}
.work-strip figure:hover { border-color: var(--line-2); }
.work-strip figure:hover::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .work-strip figure:hover img { transform: scale(1.05); filter: saturate(1.05); }
}

/* ================= keeping up with the industry (owner, 2026-10-01: "yes, add the expo line in About") ===========
   Under the network partners and laid out like them: TINKIT's team at the Luzon Telecom Expo 2025 (the expo's own
   sign; the booth photos stay off the site: other companies' products and QR codes), and the free Wi-Fi donated to
   Police Community Precinct 2 in Cogeo (owner, 2026-10-01: "wifi donation installation at pcp2 cogeo."), and the
   Philippine Eagles' 43rd National Assembly, moved here from the gallery ("make a card out of it"). Three across on a
   computer; two on a tablet with the third full width; stacked on a phone. */
.expo-note { margin-top: 40px; }
.expo-head { display: flex; align-items: center; gap: 16px; }
.expo-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.expo-list { margin-top: 20px; display: grid; gap: 12px; }
@media (min-width: 720px) {
  .expo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expo-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .expo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expo-list > li:last-child:nth-child(odd) { grid-column: auto; }
}
.expo-card {
  display: flex; align-items: center; gap: 20px; padding: 16px;
  border-radius: var(--r-card); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
}
.expo-card img { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line-2); }
.expo-card p { min-width: 0; margin: 0; display: grid; gap: 6px; }
.expo-card b { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.expo-card small { font: 500 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-hi); }
.expo-card span { font-size: 15px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 419px) {
  .expo-card { gap: 14px; padding: 12px; align-items: flex-start; }
  .expo-card img { width: 72px; height: 72px; }
  .expo-card b { font-size: 15px; }
}

/* ================= the black hole cursor (owner, 2026-10-01: "when hovering, there must be a kind of blackhole
   around the cursor"; then "the black in the middle must be removed ... it must look like a magnifier when it hovers
   to texts and objects"; then "remove the circle boundary of the magnifier") =================
   Mouse and trackpad only: light.js adds it for a fine pointer that can hover, never under reduced motion. The arrow
   stays the system's own, on top. Around its tip an invisible lens bends what is behind it (#bh-lens, an SVG
   displacement filter used as a backdrop filter, in Chromium browsers: .has-lens): text and pictures swell 1.5 times
   in the middle and ease back to normal by the edge, and the beam bends and breaks where it passes through. Nothing
   draws its edge; it shows only in what it bends. Other browsers show nothing. Over anything clickable it grows; a
   click makes it pulse; over a text field it steps aside. */
.bh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bh { position: fixed; left: 0; top: 0; z-index: 9999; width: 0; height: 0; pointer-events: none; opacity: 0; --s: 1; transition: opacity 0.3s ease; }
.bh.is-on { opacity: 1; }
.bh.is-hidden { opacity: 0; }
.bh.is-pull { --s: 1.2; }
.bh.is-press { --s: 0.94; }
.bh > * {
  position: absolute; left: 0; top: 0; border-radius: 50%; translate: -50% -50%; scale: var(--s);
  transition: scale 0.32s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.bh-glass { width: 140px; height: 140px; } /* owner, 2026-10-01: "make the magnifier cursor small a little bit" (was 180) */
.bh.has-lens .bh-glass { backdrop-filter: url(#bh-lens); }

/* ================= the beam breaks where the cursor crosses it (owner, 2026-10-01: "can we do the discontinuation of
   the beam of light whenever the cursor passess through?") =================
   light.js sets --gap-top and --gap-bot on .sky (px from its top) while the mouse is near the beam: the line, its halo
   and its glow fade out across that band, and the pulses running down the fiber stop there. When the mouse has gone,
   the light flows back down and the beam joins again. These rules repeat each layer's own fade (above) with the
   break added as a second mask layer; without a gap the break layer is solid and changes nothing. */
.beam .core, .beam .halo, .beam .glow {
  --cut: linear-gradient(to bottom, #000 calc(var(--gap-top, -9999px) - 22px), transparent var(--gap-top, -9999px),
         transparent var(--gap-bot, -9999px), #000 calc(var(--gap-bot, -9999px) + 22px));
}
.beam .glow { /* the wide glow only dims in the break, so it reads as a broken line, not a shadow */
  --cut: linear-gradient(to bottom, #000 calc(var(--gap-top, -9999px) - 30px), rgba(0, 0, 0, 0.5) var(--gap-top, -9999px),
         rgba(0, 0, 0, 0.5) var(--gap-bot, -9999px), #000 calc(var(--gap-bot, -9999px) + 30px));
}
.beam .core, .beam .halo { -webkit-mask-image: var(--cut); mask-image: var(--cut); }
.beam .glow {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #000 75%), var(--cut);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #000 75%), var(--cut);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 1179px) {
  .beam .core, .beam .halo {
    -webkit-mask-image: linear-gradient(to bottom, transparent 64px, #000 220px), var(--cut);
    mask-image: linear-gradient(to bottom, transparent 64px, #000 220px), var(--cut);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .beam .glow {
    -webkit-mask-image: linear-gradient(to bottom, transparent 64px, rgba(0, 0, 0, 0.5) 220px, #000 75%), var(--cut);
    mask-image: linear-gradient(to bottom, transparent 64px, rgba(0, 0, 0, 0.5) 220px, #000 75%), var(--cut);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}

/* when nothing reaches the ground (the lower beam has drained away under the cursor's break), the landing fades:
   the bloom and horizon through filter (their arrival animation holds their opacity), the skirt and haze through
   opacity; they glow again when the light lands. Owner, 2026-10-01: "the other beam that landed must fade out". */
.sky .bloom, .sky .horizon { transition: filter 0.5s ease; }
.beam .skirt, .beam .haze { transition: opacity 0.5s ease; }
.sky.is-dark .bloom { filter: opacity(0.1); }
.sky.is-dark .horizon { filter: opacity(0.35); }
.sky.is-dark .beam .skirt { opacity: 0; }
.sky.is-dark .beam .haze { opacity: 0.4; }

/* ================= sideways scrolling, PREVIEW (owner, 2026-10-01: "If I am going to scroll, it must not be going
   down, but sideway, like swiping from right to left to see the next page") =================
   Only with ?side in the address, on a computer: light.js adds html.hs and marks the screens (.hs-panel). The body
   becomes the track and glides sideways as far as the wheel turns, with no stops (owner: "it must be a continuous
   scroll with seamless transition"); main steps aside so its sections line up directly.
   Each section is one screen (scaled to fit the height when needed); Our work is one long strip of groups; About is
   two screens. */
html.hs { overflow: hidden; height: 100%; scroll-behavior: auto; }
html.hs body {
  height: 100vh; display: flex; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: none;
  scrollbar-width: none;
}
html.hs body::-webkit-scrollbar { display: none; }
html.hs main { display: contents; }
html.hs .hs-panel {
  position: relative; flex: 0 0 100vw; width: 100vw; height: 100vh; box-sizing: border-box;
  overflow: clip;
}
html.hs .section.hs-panel, html.hs .hs-panel.hs-facts, html.hs .site-footer.hs-panel {
  display: flex; flex-direction: column; justify-content: center; margin: 0;
  padding: calc(var(--header-h) + 20px) 0 44px;
}
html.hs .section-rule.hs-panel, html.hs .site-footer.hs-panel { border-top: 0; } /* no lines between screens: one strip */
html.hs .hs-fold .fold { min-height: 0; height: 100vh; }
html.hs .hs-stage { display: flex; align-items: center; padding: calc(var(--header-h) + 8px) 0 24px; }
html.hs .hs-stage .stage { width: 100%; }
html.hs .hs-panel.hs-facts { flex: 0 0 34vw; width: 34vw; max-width: none; padding-left: 3vw; padding-right: 3vw; }
html.hs .hs-facts .facts { grid-template-columns: 1fr; border-bottom: 0; }

/* Our work: one long strip, the title first, then each group with its photos two rows high */
html.hs .hs-panel.hs-wide { flex: 0 0 auto; width: auto; }
html.hs #work > .container { width: auto; max-width: none; margin: 0; display: flex; align-items: flex-start; gap: 64px; padding: 0 6vw; }
html.hs #work .section-head { flex: 0 0 min(30vw, 440px); margin: 0; }
html.hs #work .work-group, html.hs #work .work-group + .work-group { flex: 0 0 auto; margin: 0; }
html.hs #work .work-strip {
  --t: clamp(120px, calc((100vh - var(--header-h) - 190px) / 2), 230px);
  margin: 16px 0 0; padding: 0; overflow: visible; scroll-snap-type: none;
  grid-template-columns: none; grid-template-rows: repeat(2, var(--t)); grid-auto-flow: column; grid-auto-columns: var(--t);
}

/* About: the words and mission on the first screen, the partners and the industry cards on the second */
html.hs .section.hs-panel.hs-about {
  flex: 0 0 200vw; width: 200vw; display: grid; grid-template-columns: 100vw 100vw; grid-template-rows: 1fr auto auto 1fr;
  row-gap: 40px;
}
html.hs .hs-about > .split { grid-column: 1; grid-row: 1 / -1; align-self: center; }
html.hs .hs-about > .partners { grid-column: 2; grid-row: 2; margin-top: 0; }
html.hs .hs-about > .expo-note { grid-column: 2; grid-row: 3; margin-top: 0; }

/* how far along the page is: the circuit the fiber's light runs through (owner, 2026-10-02: "a continuous flow of
   internet from a fiber line but in circuitry mode, depending on the scroll, until it reached the end of the page").
   Drawn by light.js along the bottom of the whole strip; thin lines and small nodes like the TINKIT mark. The dim trace
   shows the way ahead; the lit part ends at the head of the light; light keeps flowing along the lit part. */
html.hs body { position: relative; }
.hs-circuit { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; max-width: none; } /* the reset caps every svg at 100% wide */
.hs-circuit path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hs-c-base { stroke: rgba(196, 181, 253, 0.16); stroke-width: 1.4; }
.hs-c-glow { stroke: rgba(139, 92, 246, 0.32); stroke-width: 7; transition: opacity 0.5s ease; }
.hs-c-lit { stroke: #ddd6fe; stroke-width: 1.6; transition: opacity 0.5s ease; }
.hs-c-flow { stroke: #fff; stroke-width: 1.8; stroke-dasharray: 3 33; opacity: 0; transition: opacity 0.5s ease; }
.hs-c-node { fill: var(--ink); stroke: rgba(196, 181, 253, 0.32); stroke-width: 1.2; transition: fill 0.35s ease, stroke 0.35s ease; }
.hs-c-node.is-lit { fill: #c4b5fd; stroke: #fff; }
.hs-c-branch path { stroke: rgba(196, 181, 253, 0.16); stroke-width: 1.3; transition: stroke 0.35s ease; }
.hs-c-branch circle { fill: var(--ink); stroke: rgba(196, 181, 253, 0.3); stroke-width: 1.1; transition: fill 0.35s ease, stroke 0.35s ease; }
.hs-c-branch.is-lit path { stroke: #c4b5fd; }
.hs-c-branch.is-lit circle { fill: #c4b5fd; stroke: #fff; }
.hs-c-head { fill: #fff; }
.hs-c-halo, .hs-c-head { transition: opacity 0.5s ease; }
.hs-circuit.is-done .hs-c-node.is-big { stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .hs-c-flow { opacity: 0.85; animation: hs-c-flow 0.55s linear infinite; }
  .hs-c-halo { transform-box: fill-box; transform-origin: center; animation: hs-c-breathe 2.4s ease-in-out infinite; }
  .hs-circuit.is-done .hs-c-node.is-big { transform-box: fill-box; transform-origin: center; animation: hs-c-arrive 2.4s ease-in-out infinite; }
}
@keyframes hs-c-flow { to { stroke-dashoffset: -36; } }
@keyframes hs-c-breathe { 0%, 100% { transform: scale(0.85); opacity: 0.85; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes hs-c-arrive { 0%, 100% { filter: drop-shadow(0 0 2px #c4b5fd); } 50% { filter: drop-shadow(0 0 9px #8b5cf6); } }
/* the cursor has cut the beam and nothing is landing: nothing flows */
html.beam-dark .hs-c-flow { opacity: 0; }
html.beam-dark .hs-c-lit, html.beam-dark .hs-c-glow, html.beam-dark .hs-c-halo, html.beam-dark .hs-c-head { opacity: 0.3; }
/* the room the circuit needs at the bottom of each screen */
html.hs .hs-stage { padding-bottom: 52px; }
.hs-hint {
  position: fixed; right: 32px; bottom: 54px; z-index: 60; display: flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
  pointer-events: none; transition: opacity 0.4s ease;
}
.hs-hint.is-gone { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hs-hint svg { animation: hs-nudge 1.4s ease-in-out infinite; }
}
@keyframes hs-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* the hero's light carries on into the next screen (owner, 2026-10-01: "remove this boundary and continue the
   scattered light from the beam"): the hero and its sky are not cut at their edge any more, a long low glow runs from
   the beam's foot along the ground to the right, and the horizon line runs on with it, both fading out well inside
   the E-Portal's screen. The E-Portal's screen draws no background of its own, so the light shows behind it. */
html.hs .hero.hs-fold, html.hs .hs-fold .sky { overflow: visible; }
html.hs .hs-fold .sky::after {
  /* starts 30vw before the beam and fades in smoothly across it (owner, 2026-10-01: "remove this line when I
     interrupt the beam. make it seamless"): beginning AT the beam, its left edge showed as a hard vertical line once
     the cursor cut the beam and the light below drained away */
  content: ""; position: absolute; z-index: -1; bottom: 0; pointer-events: none;
  left: calc(50% + var(--beam-offset) - 30vw); width: 205vw; height: 62vh;
  background: radial-gradient(175vw 62vh at 30vw 100%, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.16) 30%, rgba(91, 33, 182, 0.07) 58%, transparent 82%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.16) 11vw, rgba(0, 0, 0, 0.5) 22vw, rgba(0, 0, 0, 0.84) 33vw, #000 44vw);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.16) 11vw, rgba(0, 0, 0, 0.5) 22vw, rgba(0, 0, 0, 0.84) 33vw, #000 44vw);
  transition: opacity 0.5s ease;
}
html.hs .hs-fold .sky.is-dark::after { opacity: 0.25; } /* no light landing: the light it carries dims with the bloom */
html.hs .hs-fold .horizon {
  right: -150vw;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.3) calc(50vw + var(--beam-offset) - 42vw),
    #fff calc(50vw + var(--beam-offset)), rgba(196, 181, 253, 0.32) calc(50vw + var(--beam-offset) + 40vw),
    rgba(196, 181, 253, 0.12) calc(50vw + var(--beam-offset) + 95vw), transparent calc(50vw + var(--beam-offset) + 150vw));
}

/* the Services page's six services, one long strip with a service to a column (owner, 2026-10-01: "apply sideways to
   all pages in desktop version"): as a column each service is short enough for one screen's height */
html.hs .hs-services > .container { width: auto; max-width: none; margin: 0; padding: 0 6vw; }
html.hs .hs-services .services-list { display: flex; align-items: stretch; }
html.hs .hs-services .service {
  flex: 0 0 clamp(360px, 30vw, 460px); display: flex; flex-direction: column; justify-content: flex-start; gap: 26px;
  padding: 8px 40px; border-top: 0; border-left: 1px solid var(--line);
}
html.hs .hs-services .service:last-child { border-bottom: 0; border-right: 1px solid var(--line); }

/* the home page's six services: the title beside the cards, three across in two rows, so the cards keep their full
   size on a laptop's height instead of shrinking to fit one screen */
html.hs #services > .container { width: auto; max-width: none; margin: 0; padding: 0 6vw; display: flex; align-items: center; gap: 64px; }
html.hs #services .section-head { flex: 0 0 min(30vw, 420px); margin: 0; }
html.hs #services .svc-grid { flex: 0 0 auto; margin: 0; grid-template-columns: repeat(3, 340px); }
/* the contact page: the six ways to reach us two across, beside the form, so the form keeps its full size */
html.hs .contact-grid { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
html.hs .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.hs .inquiry { padding: 32px; }
html.hs .inquiry .form { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
html.hs .inquiry .form > * { grid-column: 1 / -1; }
html.hs .inquiry .form > .field:has(#f-topic), html.hs .inquiry .form > .field:has(#f-location) { grid-column: auto; } /* side by side */
html.hs .inquiry .field textarea { min-height: 96px; }