/* ========================================================================== */
/* FONT FACE: GEIST (VARIABLE)                                               */
/* ========================================================================== */
@font-face {
  font-family:    "Geist";    /* VARIABLE ROMAN                           */
  src:            url("./fonts/geist/Geist/webfonts/Geist[wght].woff2")
                  format("woff2");
  font-weight:    100 900;    /* FULL VARIABLE RANGE                       */
  font-style:     normal;
  font-display:   swap;       /* SHOW SYSTEM FONT UNTIL GEIST IS READY     */
}

@font-face {
  font-family:    "Geist";    /* VARIABLE ITALIC                          */
  src:            url("./fonts/geist/Geist/webfonts/Geist-Italic[wght].woff2")
                  format("woff2");
  font-weight:    100 900;
  font-style:     italic;
  font-display:   swap;
}

/* ========================================================================== */
/* ROOT TOKENS (SEMANTIC) */
/* ========================================================================== */
:root {
  
  /* BASE FALLBACK STACK */
  --ff-fallback:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";   /* KEEP FONTS ON ONE LINE TO CONSERVE VERTICAL SPACE */
  --ff-geist:             "Geist", var(--ff-fallback);

  /* ACTIVE CHOICE (SWITCH THIS TO CHANGE THE WHOLE SITE) */
  --ff-active:            var(--ff-geist);                                    /* USE   */
  --font-family:          var(--ff-active);     

  /* COLORS */
  --color-bg:             #000000;
  --color-text:           #ffffff;
  --color-accent:         #0F72ED;

  /* LOGO & HEADER */
  --logo-trim-y:          26px;
  --header-height:        clamp(80px, 9vw, 90px);

  /* MEASURES */
  --max-width:            1120px;
  --measure-prose:        72ch;
  --measure-form:         480px;
  --measure-blurb:        560px;

  /* SPACE */
  --space-0:              0px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;

  /* TYPE SIZES */
  --fs-hero:              clamp(28px, 6vw, 56px);
  --fs-body:              clamp(14px, 1.8vw, 18px);
  --fs-nav:               clamp(15px, 1.8vw, 20px);
  --fs-btn:               calc(var(--fs-nav) * 1.0);   /* EQUAL TO `fs-nav` */
  --fs-nav-sm:            18px;
  --fs-btn-sm:            calc(var(--fs-nav-sm) * 1.0);   /* EQUAL TO `fs-nav-sm` */

  /* MISC */
  --radius-button:        9999px;
  --tracking-wide:        0.015em;

  /* WRAP */
  --wrap-max:             clamp(680px, 92vw, 1120px);     /* WILL LIMIT THE CONTENT BOX OF `header-grid` */
  --wrap-pad:             clamp(6px, 0.5vw, 16px);

  /* NAV SPACING */
  --gap-h:                clamp(0.45em, 1.2vw, 1.05em);
  --gap-v:                calc(var(--gap-h) * 0.65);
  --stack-gap-sm:         8px;

  /* NAV/CTA SIZING */
  --nav-row-min:          30px;
  --btn-min-w:            9ch;
  --btn-pad-inline:       clamp(0.55em, 1.1vw, 0.90em);
  --btn-pad-block:        0.7em;

  /* CTA HEIGHT AT LG/MD (DERIVED FROM HEADER HEIGHT) */
  --btn-h-lg: calc(var(--header-height) * 0.9);

  /* FOOTER TOKENS */
  --color-muted:        rgba(255,255,255,.65);    /* DIM TEXT IN FOOTER     */
  --rule-subtle:        rgba(255,255,255,.12);    /* FAINT TOP BORDER LINE  */
  --footer-min-h:       clamp(60px, 10vh, 100px); /* USED IN LAYOUT MATH    */
  --footer-push:        140px;                    /* EXTRA SCROLL DISTANCE  */

  /* TOKENS FOR "SERVICES" PAGE */
  --svc-grid-gap:        var(--space-6);     /* SERVICES GRID GAP            */
  --svc-card-pad:        var(--space-5);     /* SERVICES CARD PADDING        */
  --svc-card-rule:       var(--rule-subtle); /* CARD BORDER COLOR            */
  --svc-kicker-tracking: 0.08em;             /* UPPERCASE EYEBROW SPACING    */

  --nav-accel-start:  980px;        /* WIDTH WHERE EXTRA GAP BEGINS      */
  --nav-gap-slope:    1.4vw;        /* BASE GROWTH RATE (CURRENT BEHAV.) */
  --nav-gap-boost:    0.03;         /* EXTRA PX PER PX OVER START   */
  --nav-gap-lg-max:   26.92px;      /* 1.4vw@1280 (=17.92) + (300*0.03)=9  */

}

/* ========================================================================== */
/* ROOT MODIFIERS FOR QUICK FAMILY SWITCHING                                  */
/* ========================================================================== */
:root.font-system       { --ff-active:            var(--ff-system);    }
:root.font-ui-system    { --ff-active: system-ui, var(--ff-system);    }
:root.font-ui-arial     { --ff-active: Arial,     var(--ff-system);    }
:root.font-geist        { --ff-active:            var(--ff-geist);       } /* GEIST    */
:root.font-geist-mono   { --ff-active:            var(--ff-geist-mono);  } /* MONO     */

/* ========================================================================== */
/* BASE & RESET (KEEP BEFORE UTILITIES)                                       */
/* ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ========================================================================== */
/* LAYOUT UTILITIES (CONTAINER & SPACING) (.wrap, .u-prose, & generic helpers) */
/* ========================================================================== */

.wrap {
  max-width:      var(--wrap-max);
  padding-inline: var(--wrap-pad);
  margin-inline:  auto;
}

.u-prose {
  max-width:      var(--measure-prose);
  margin-inline:  auto;
}

/* ========================================================================== */
/* ELEMENT BASE STYLES */
/* ========================================================================== */

body {
  background:              var(--color-bg);
  color:                   var(--color-text);
  font-family:             var(--font-family);
  font-size:               var(--fs-body);
  line-height:             1.45;
  -webkit-font-smoothing:  antialiased;
  text-rendering:          optimizeLegibility;
}

a { 
  color:                   var(--color-text); 
  text-decoration:         none; 
}

a:hover,
a:focus { 
  text-decoration:         underline; 
}

/* ========================================================================== */
/* COMPONENTS: SITE HEADER & NAVIGATION */
/* ========================================================================== */

/* ================================== */
/* HEADER BAR & GRID */
.site-header {
  padding-block:         var(--space-6);
  display:               flex;
  align-items:           center;
  background:            transparent;
  position:              relative;
  z-index:               10;
  min-height:            var(--header-height);
}

.header-grid {
  display:               grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items:           center;
  justify-items:         stretch;
  gap:                   var(--space-0);
  width:                 100%;
}

/* ================================== */
/* LEFT BOX (LOGO) */
.header-left {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
}

.logo-link { 
  display:     inline-block; 
  line-height: 0; 
}

.logo-img {
  display:    block;
  height:     calc(var(--header-height) - var(--logo-trim-y));
  width:      auto;
  max-width:  100%;
  object-fit: contain;
}

/* ================================== */
/* RIGHT BOX (NAV + CTA) */
.header-right {
  display:         flex;
  flex-direction:  row;
  justify-content: flex-end;
  align-items:     center;
  flex-wrap:       nowrap;
  gap:             var(--gap-h);     /* SPACE BETWEEN NAV & CTA */
  font-size:       var(--fs-nav);
  min-width:       0;
}

/* NAV LINKS (DEFAULT: INLINE ROW) */
.nav-links {
  display:   flex;
  flex-wrap: nowrap;
  gap:       var(--gap-h);
}

.nav-link {
  display:        flex;
  align-items:    center;
  white-space:    nowrap;
  min-block-size: var(--nav-row-min);  /* AFFECTS EACH LINKS HEIGHT */
  font-weight:    700;
}

/* "BOOK A DEMO" BUTTON */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--fs-btn);
  line-height:     1;
  background:      #ffffff;
  color:           #000000;
  border:          none;
  font-weight:     600;
  letter-spacing:  var(--tracking-wide);
  border-radius:   var(--radius-button);
  cursor:          pointer;
  min-width:       var(--btn-min-w);
  padding-inline:  var(--btn-pad-inline);      /* LEFT + RIGHT PADDING */
  padding-block:   var(--btn-pad-block);       /* TOP + BOTTOM PADDING */
  flex: 0 0 auto;                              /* PREVENT FLEX SHRINK */
  max-width: 100%;                             /* SAFETY IN TIGHT LAYOUTS */
}

/* BUTTON LABEL (DEFAULT: WORDS INLINE) */
.btn-label {
  display:         inline-flex;
  flex-direction:  row;
  align-items:     center;
  gap:             0.3em;
}

/* BUTTON ARROW (FLEX ITEM) */
.btn-arrow {
  display:      block;          /* SIMPLER BOX THAN INLINE-BLOCK            */
  width:        0.7em;
  height:       0.7em;
  line-height:  1;              /* AVOID WEIRD INLINE METRICS ON SOME FONTS */
  border-right: 0.12em solid currentColor;
  border-top:   0.12em solid currentColor;
  transform:    rotate(45deg);
  margin-left:  0.5em;
  align-self:   center;         /* BELT-AND-SUSPENDERS CENTERING            */
  flex:         none;           /* PREVENT ANY STRETCHING                   */
}

/* ========================================================================== */
/* COMPONENTS: MAIN CONTENT & SECTIONS                                        */
/* ========================================================================== */

/* MAIN AREA (FOCAL CANVAS) */
.content {
  /* REMOVE TOP PADDING SO THE HERO BG CAN SIT FLUSH UNDER THE HEADER */
  padding-block:   0;
  position:        relative;                           /* CONTAINING BLOCK FOR BG LAYER        */
  z-index:         0;                                  /* ALLOW BG TO SIT BEHIND               */
  min-height:      calc(100vh - var(--header-height)   /* KEEP FOOTER BELOW FOLD */
                        - var(--footer-min-h) + var(--footer-push));
}

/* FULL-BLEED BACKGROUND WHEN .HAS-HERO-BG IS PRESENT ON <MAIN> */
.content.has-hero-bg::before {
  content:              "";
  position:             absolute;
  inset-block-start:    0;
  inset-inline-start:   50%;
  transform:            translateX(-50%);
  display:              block;
  width:                100vw;
  height:               min(1280px, calc(100vh - var(--header-height)));
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("./assets/fiber-optic.jpg") center / cover no-repeat;
  pointer-events:       none;
  z-index:              -1;
  background-color:     #000;     /* SAFETY FILL WHILE IMAGE LOADS        */
}

/* HERO SECTION (LANDING) */
.hero {
  text-align:      center;
  margin-block:    clamp(8vh, 14vh, 18vh);
}

.hero h1 {
  font-size:       var(--fs-hero);
  letter-spacing:  -0.02em;
  margin:          0 0 var(--space-4) 0;
}

/* DEFAULT GRADIENT HEADLINE */
.text-gradient {
  background:                linear-gradient(90deg,
                                 var(--color-accent), #ffffff);
  -webkit-background-clip:   text;
  background-clip:           text;
  -webkit-text-fill-color:   transparent;
  color:                     transparent;
}

.hero p { 
  font-size:       clamp(16px, 2.4vw, 20px); 
}

/* ========================================================================== */
/* RESPONSIVE LAYOUT RULES (BY RANGE)                                         */
/* NOTE: CSS CUSTOM PROPERTIES ARE NOT ALLOWED IN MEDIA QUERY CONDITIONS.     */
/*       EXPLICIT NUMBERS ARE USED BELOW TO MATCH THE SPEC EXACTLY.           */
/* ========================================================================== */

/* ------------------------------ */
/* SMALL BREAKPOINT               */
/* ------------------------------ */
@media (max-width: 650px) {

  .header-grid {
    grid-template-columns: 1fr;          /* STACK EVERYTHING VERTICALLY                   */
    gap:                   var(--stack-gap-sm);    /* GAP BETWEEN `header-right` & `header-left` */
  }

  .header-left { 
    justify-content:       center; 
  }

  .header-right {
    flex-direction:        column;       /* ORDER: NAV → CTA */
    align-items:           center;
    gap:                   var(--stack-gap-sm);    /* GAP BETWEEN `nav-links` & `btn-primary` */
    font-size:             var(--fs-nav-sm);
  }

  .nav-link {
    min-block-size:        auto;
    line-height:           1.2;
    margin:                0;
    padding:               0;
  }

  .nav-links {
    flex-direction:        column;       /* EACH NAV LINK GETS ITS OWN LINE  */
    align-items:           center;
    gap:                   var(--stack-gap-sm);    /* GAP BETWEEN EACH `nav-link` */
  }

  .btn-primary {                          /* DO NOT EXPAND TO FULL ROW */
    align-self:            center;
    font-size:             var(--fs-btn-sm);
  }

  .btn-label {
    flex-direction:        row;          /* WORDS REMAIN INLINE IN SMALL LAYOUT */
  }

  :root {
    --btn-pad-inline:      1.6em;        /* EXACT SPEC FOR SM HORIZONTAL PAD */
  }
}

/* ------------------------------ */
/* MEDIUM BREAKPOINT              */
/* ------------------------------ */
@media (min-width: 651px) and (max-width: 800px) {

  .header-grid {
    grid-template-columns: auto 1fr;
    column-gap:            var(--gap-h);
  }

  .header-right {
    flex-direction:        row;
    align-items:           center;
    gap:                   30px;
  }

  .nav-links {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    column-gap:            30px;
    row-gap:               var(--gap-v);
  }
}

/* ------------------------------ */
/* LARGE BREAKPOINT               */
/* ------------------------------ */
@media (min-width: 801px) {

  .header-grid {
    grid-template-columns: auto minmax(0, 1fr);   /* SAFE FILL */
  }

  .header-right {
    display:               grid;                  /* NAV | CTA */
    grid-template-columns: 1fr auto;              /* NAV GETS SPACE */
    align-items:           center;
    column-gap:            0;                     /* NO NAV↔CTA GAP */
    gap:                   0;                     /* BELT & SUSPENDERS */
  }

  .nav-links {
    display:               flex;
    justify-content:       space-evenly;          /* EQUAL GAPS, EDGES TOO */
    align-items:           center;
    gap:                   0;                     /* USE DISTRIBUTION, NOT gap */
    min-width:             0;                     /* PREVENT OVERFLOW IN TIGHT CASES */
    justify-self:          stretch;               /* FILL ITS GRID COLUMN */
  }

  .btn-label {
    flex-direction:        row;                   /* WORDS INLINE AT LG */
  }
}

/* ========================================================================== */
/* STUB PAGES / FORMS
/* ========================================================================== */

.page-stub {
  display:         grid;
  place-items:     center;
  min-height:      48vh;
  text-align:      center;
}

.login form {
  max-width:       var(--measure-form);
  margin-inline:   auto;
}

.login form fieldset {
  border:          1px solid rgba(255,255,255,.25);
  border-radius:   8px;
  padding:         16px;
}

.login form label {
  display:         block;
  margin:          8px 0 6px 0;
}

.login form input {
  width:           100%;
  padding:         10px 12px;
  border-radius:   6px;
  border:          1px solid rgba(255,255,255,.2);
  background:      rgba(255,255,255,.04);
  color:           var(--color-text);
}

.login .actions {
  margin-top:      12px;
  display:         flex;
  justify-content: flex-end;
  gap:             8px;
}

.btn-muted {
  background:      transparent;
  color:           var(--color-text);
  border:          1px solid rgba(255,255,255,.4);
  padding:         8px 12px;
  border-radius:   9999px;
  cursor:          not-allowed;
}

/* ========================================================================== */
/* COMPONENTS: SITE FOOTER */
/* ========================================================================== */

.site-footer {
  border-top:     1px solid var(--rule-subtle);
  color:          var(--color-muted);
  font-size:      clamp(12px, 1.4vw, 14px);
  padding-block:  var(--space-4);
}

.site-footer a { 
  color:          var(--color-muted); 
}

.site-footer a:hover,
.site-footer a:focus { 
  text-decoration: underline; 
}

.footer-inner {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.footer-inner .copyright {
  flex:            1;
}

.footer-inner .legal-link {
  text-align:      right;
  white-space:     nowrap;
}

/* ========================================================================== */
/* PAGES: SERVICES                                                            */
/* ========================================================================== */

.services {
  margin-block:   40px;
}

.services .lead {
  font-size:      clamp(16px, 2.1vw, 20px);    /* SUBTLE EMPHASIS FOR INTRO */
  max-width:      var(--measure-blurb);
  margin:         8px auto 0;
}

.svc-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--svc-grid-gap);
  list-style:            none;
  padding:               0;
  margin:                28px 0 32px 0;
}

.svc-stat {
  border:         1px solid var(--svc-card-rule);
  border-radius:  8px;
  padding:        14px 16px;
  text-align:     center;
}

.svc-stat .num {
  font-weight:    800;
  font-size:      20px;
}

.svc-stat .lbl {
  color:          var(--color-muted);
  font-size:      13px;
}

.svc-grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--svc-grid-gap);
}

.svc-item {
  border:         1px solid var(--svc-card-rule);
  border-radius:  8px;
  padding:        var(--svc-card-pad);
}

.svc-item .kicker {
  display:        block;
  font-size:      11px;
  letter-spacing: var(--svc-kicker-tracking);
  text-transform: uppercase;
  color:          var(--color-muted);
  margin-bottom:  4px;
}

.svc-item h3 {
  font-size:      18px;
  margin:         0 0 8px 0;
}

.svc-item ul {
  margin:         0;
  padding-left:   18px;
}

.svc-cta {
  margin-top:     28px;
  display:        flex;
  justify-content: center;
}

/* RESPONSIVE */
@media (max-width: 800px) {
  .svc-stats { 
    grid-template-columns: 1fr; 
  }

  .svc-grid  { 
    grid-template-columns: 1fr; 
  }
}

/* ========================================================================== */
/* CALLOUT: UNDER CONSTRUCTION                                                */
/* ========================================================================== */
:root { --color-warn: #FF7A00; --warn-bg: rgba(255,122,0,.10); }

.callout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,122,0,.35);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--warn-bg);
  margin: 18px auto 22px;
  max-width: var(--measure-blurb);
}

.callout .callout-icon { font-size: 18px; line-height: 1; }
.callout .callout-title { font-weight: 800; letter-spacing: .015em; margin-right: 6px; color: #fff; }
.callout .callout-text { color: var(--color-muted); }