/* ========================================================================== */
/* 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 */
  --ff-active:            var(--ff-geist);
  --font-family:          var(--ff-active);     

  /* COLORS */
  --color-bg:             #000000;
  --color-text:           #FFFFFF;
  --celeste-blue:         #0F72ED;

  /* LOGO & HEADER */
  --header-height:          104px;
  --header-divider-opacity: 0.7;
  --side-container-width:   200px;

  /* 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;
  --space-7:              30px;

  /* TYPE SIZES */
  --fs-hero:              clamp(28px, 6vw, 56px);
  --fs-body:              clamp(14px, 1.8vw, 18px);
  --fs-nav:               clamp(14px, 1.1vw, 22px);
  --fs-btn:               calc(var(--fs-nav) * 0.80);
  --fs-nav-sm:            15px;
  --fs-btn-sm:            calc(var(--fs-nav-sm) * 0.70);

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

  /* WRAP */
  --wrap-max:             100%;
  --wrap-pad:             clamp(8px, 1.0vw, 24px);

  /* NAV SPACING */
  --gap-h:                clamp(0.45em, 1.2vw, 1.05em);
  /* --gap-v:                calc(var(--gap-h) * 0.65); */
  /* --gap-h:                8px; */
  --gap-v:                8px;
  --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  */

  --logo-cut: 0%;                   /* PERCENT OF LOGO WIDTH TO MAKE TRANSPARENT FROM THE LEFT */
}

/* ========================================================================== */
/* 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);     }
:root.font-geist-mono   { --ff-active:            var(--ff-geist-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;

  /* MAKE PAGE FILL THE VIEWPORT WITHOUT EXTRA SPACE */
  min-height:              100dvh; /* AVOIDS MOBILE BROWSER UI 'VH' ISSUES */
  display:                 flex;   /* STACK: HEADER | MAIN | FOOTER */
  flex-direction:          column;
}

body.nav-open {
  overflow:               hidden;  /* PREVENT BACKGROUND SCROLL WHEN MOBILE NAV IS OPEN */
}

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);
}

/* FULL-BLEED HAIRLINE WITH FADED ENDS AT HEADER BOTTOM */
.site-header::after { 
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  transform: translateX(-50%); /* CENTER A 100VW STRIP UNDER THE HEADER */
  width: 100vw;                /* FULL-BLEED LIKE THE SCALE EXAMPLE */
  height: 1px;                 /* HAIRLINE THICKNESS */
  pointer-events: none;        /* PURELY DECORATIVE */
  background: linear-gradient(
    to right,
    rgba(255 255 255 / 0) 0%,
    rgba(255 255 255 / var(--header-divider-opacity)) 40%,   /* LEFT SIDE */
    rgba(255 255 255 / var(--header-divider-opacity)) 60%,   /* RIGHT SIDE */
    rgba(255 255 255 / 0) 100%
  );
}

.header-grid {
  display:               grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  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:     auto;
  width:      var(--side-container-width);
  max-width:  100%;
  object-fit: contain;

  /* HARD-STEP MASK: LEFT var(--logo-cut) IS FULLY TRANSPARENT; RIGHT SIDE SHOWS */
  mask-image:         linear-gradient(to right, transparent var(--logo-cut), #000 0);
  mask-size:          100% 100%;     /* MASK COVERS THE ENTIRE IMAGE’S WIDTH AND HEIGHT — NO TILING OR STRETCHING ARTIFACTS */
  mask-repeat:        no-repeat;     /* PREVENT WALLPAPER-LIKE TILING */

  /* SAFARI STILL NEEDS webkit */
  -webkit-mask-image: linear-gradient(to right, transparent var(--logo-cut), #000 0);
  -webkit-mask-size:  100% 100%;
  -webkit-mask-repeat:no-repeat;
}

/* LOGO STACKING: PLACE BLUE BEHIND WHITE; ONLY TOP IMAGE IS MASKED */
.logo-link { display: inline-grid; position: relative; } /* OVERLAY CHILDREN IN ONE CELL */
.logo-link > .logo-img { grid-area: 1 / 1; }              /* BOTH IMAGES SHARE SAME GRID CELL */
.logo-bg { -webkit-mask-image: none; mask-image: none; }  /* UNMASK BLUE SO LEFT 25% SHOWS THROUGH */

/* MIDDLE BOX (NAV) */
.header-middle {
  min-width:       0;
  font-size:       var(--fs-nav);
}

/* RIGHT BOX (CTA BUTTONS) */
.header-right {
  display:         flex;
  width:           var(--side-container-width);
  justify-content: flex-end;    /* MATTERS AT MEDIUM SIZES. RIGHT ALIGNS CTA CLUSTER. */
  align-items:     center;
  min-width:       0;           /* SAFETY RULE THAT PREVENTS WEIRD OVERFLOW IN TIGHT LAYOUTS */
}

/* HAMBURGER TOGGLE (VISIBLE ONLY AT SMALL BREAKPOINT) */
.nav-toggle {
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         0;
  border:          none;
  background:      transparent;
  cursor:          pointer;
}

.nav-toggle:focus-visible {
  outline:         2px solid var(--celeste-blue);
  outline-offset:  2px;
}

.nav-toggle-bar {
  display:         block;
  width:           18px;
  height:          2px;
  border-radius:   9999px;
  background:      var(--color-text);
  transition:      transform 0.18s ease-out, opacity 0.18s ease-out;
}

.nav-toggle-bar + .nav-toggle-bar {
  margin-top:      4px;
}

/* SIMPLE "X" STATE WHEN NAV IS OPEN */
.nav-open .nav-toggle-bar:nth-child(1) {
  transform:       translateY(6px) rotate(45deg);
}

.nav-open .nav-toggle-bar:nth-child(2) {
  opacity:         0;
}

.nav-open .nav-toggle-bar:nth-child(3) {
  transform:       translateY(-6px) rotate(-45deg);
}

/* NAV LINKS */
.nav-links {
  display:         flex;
  flex-wrap:       nowrap;
  justify-content: space-evenly;
  align-items:     center;
  gap:             0;
  min-width:       0;
}

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

/* HORIZONTAL GROUPING FOR CTA BUTTONS */
.cta-group {
  display: inline-flex;
  gap:     var(--gap-h);
}

/* "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 */
}

#nav-login-cta {
  background: var(--celeste-blue);
  color:      var(--color-white);
}

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

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

/* MAIN AREA (FOCAL CANVAS) */
.content {
  padding-block:   0;                                  /* REMOVE TOP PADDING SO THE HERO BG CAN SIT FLUSH UNDER THE HEADER */
  position:        relative;                           /* CONTAINING BLOCK FOR BG LAYER */
  z-index:         0;
  /* REPLACE THE OLD min-height CALC WITH FLEX FILL */
  flex:            1 0 auto;    /* FILL SPACE BETWEEN HEADER AND FOOTER */
  min-height:      0;           /* DO NOT FORCE EXTRA SCROLL HEIGHT */
}

/* 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, 100%);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("./assets/background.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); */
  margin-block:    0;                 /* LARGE VH MARGINS CAN FORCE SCROLL */
  min-block-size:  100%;              /* FILL MAIN'S HEIGHT WHEN CONTENT IS LIGHT */
  display:         grid;              /* SIMPLE, ROBUST CENTERING */
  place-content:   center;
  padding-block:   var(--space-6);    /* SMALL BREATHING ROOM ON TINY HEIGHTS */
  padding-top:     clamp(60px, 10vh, 120px);   /* INCREASE SPACE BELOW HEADER */
}

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

.text-gradient {
  background:              linear-gradient(
                              90deg,
                              var(--celeste-blue),
                              var(--color-text)
                            );
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
  color:                   transparent;
}

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

/* WRAPS THE PANEL SO ITS SHAPE CASTS A CRISP SHADOW OUTSIDE; THE PART UNDER THE PANEL GETS BLURRED BY THE PANEL’S BACKDROP-FILTER */
.hero-expando-wrap {
  display:     grid;         /* CENTERS CHILD WITHOUT AFFECTING WIDTH */
  place-items: center;
}

/* EXPANDABLE BOX UNDER HERO COPY */
.hero-expando {
  color:                   var(--color-text);
  max-width:               min(var(--measure-prose), 100%);
  margin:                  0 auto;
  padding:                 0.75rem;
  background:              rgba(0, 0, 0, 0.13);
  backdrop-filter:         blur(2px);
  -webkit-backdrop-filter: blur(2px);                         /* SAFARI SUPPORT */
  box-shadow:              0 4px 10px hsl(0 0% 0% / 0.90),
                           0 12px 28px hsl(0 0% 0% / 0.98);
  text-align:              center;
}

.hero-expando-emphasis {
  font-weight:             700;
}

.hero-expando > summary {
  list-style: none;
  cursor:     pointer;
  margin:     0 0 0.25rem 0;
}
.hero-expando > summary::-webkit-details-marker { display: none; }

.hero-expando .read-more {
  text-decoration: underline;
  cursor:          pointer;
}

/* ========================================================================== */
/* 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: 550px) {

  :root {
    --btn-pad-inline:      1.6em;                 /* HORIZONTAL PAD FOR SMALL CTAS */
    --mobile-nav-bg:       rgba(0, 0, 0, 0.45);   /* LOWER LAST NUMBER FOR MORE TRANSPARENCY (E.G., 0.45–0.65) */
    --mobile-nav-blur:     15px;                  /* INCREASE FOR HEAVIER FROST (E.G., 22px–28px) */
  }

  .site-header {
    padding-block:         var(--space-4);
    min-height:            auto;
  }

  body.nav-open .site-header {
    z-index:               30; /* KEEP HAMBURGER ABOVE THE OVERLAY WHEN NAV IS OPEN */
  }

  .hero h1 {
    white-space:           pre-line;
  }

  .header-grid {
    grid-template-columns: auto minmax(0, 1fr) auto;  /* LOGO | OPTIONAL MIDDLE | HAMBURGER */
    align-items:           center;
    gap:                   0;
  }

  .header-left {
    justify-content:       flex-start;
  }

  .logo-img {
    width:                 150px;                 /* SMALLER LOGO FOR MOBILE */
  }

  .header-middle {
    min-width:             0;
  }

  .header-right {
    width:                 auto;
    min-width:             0;
    justify-content:       flex-end;
    align-items:           center;
    gap:                   0;
  }

  .nav-toggle {
    display:               inline-flex;
    flex-direction:        column;
    width:                 36px;
    height:                36px;
    border-radius:         9999px;

    position:              relative;
    z-index:               30; /* KEEP THE X ABOVE THE FROSTED OVERLAY (OVERLAY IS z-index: 20) */
  }

  /* FROSTED GLASS OVERLAY FOR NAV LINKS */
  .nav-links {
    position:              fixed;
    inset-block-start:     0;
    inset-inline-start:    0;
    width:                 100%;
    height:                100%;
    padding-inline-start:  calc(var(--wrap-pad) + 30px);
    padding-inline-end:    var(--wrap-pad);
    padding-top:           calc(var(--header-height) + var(--space-4) - 50px);
    display:               flex;
    flex-direction:        column;
    gap:                   30px;
    justify-content:       flex-start;
    align-items:           flex-start;
    overflow-y:            auto;
    background:            var(--mobile-nav-bg);
    backdrop-filter:       blur(var(--mobile-nav-blur));
    -webkit-backdrop-filter: blur(var(--mobile-nav-blur));
    transform:             translateX(-100%);
    opacity:               0;
    visibility:            hidden;
    pointer-events:        none;
    z-index:               20;
    font-size:             20px;                        /* FONT OF NAV LINKS IN SIDEBAR */
    transition:            transform 0.22s ease-out, opacity 0.22s ease-out, visibility 0s linear 0.22s;

    --btn-pad-inline:      clamp(0.55em, 1.1vw, 0.90em);  /* KEEP SIDEBAR CTAS SAME AS OTHER BREAKPOINTS */
  }

  .nav-link {
    min-block-size:        auto;
    line-height:           1.3;
    font-weight:           600;
    width:                 100%;
  }

  body.nav-open .nav-links {
    transform:             translateX(0);
    opacity:               1;
    visibility:            visible;
    transition:            transform 0.22s ease-out, opacity 0.22s ease-out, visibility 0s;
    pointer-events:        auto;
  }

  /* CTA BUTTONS LIVE INSIDE THE OVERLAY ON SMALL */
  .header-right > .cta-group {
    display:               none;
  }

  .nav-links .cta-group {
    display:               flex;
    flex-direction:        column;
    /* gap:                   var(--stack-gap-sm); */
    gap:                   20px;
    margin-top:            var(--space-3);
    align-self:            flex-start;
  }

  .nav-links .btn-primary {
    width:                 auto;
    justify-content:       flex-start;
    text-align:            left;
    font-size:             14px;      /* FONT OF CTA BUTTONS IN SIDEBAR */
  }

  .btn-primary {
    font-size:             var(--fs-btn-sm);
  }

  .btn-label {
    flex-direction:        row;
  }

  footer.site-footer .wrap.footer-inner {
    align-items: flex-start;
  }

}

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

  .cta-group {        /* CENTER CTA BUTTONS AS A VERTICAL PAIR AT MEDIUM */
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              var(--stack-gap-sm);
  }

  .header-grid {
    column-gap:       0;
  }

  .header-right {
    width:            100px;
    justify-content:  center;
    align-items:      center;
    flex-direction:   row;
  }

  /* MEDIUM NAV: TWO-COLUMN GRID WITH CLEAN WRAP AND CENTERED SECOND ROW */
  .nav-links {
    display:               grid;                              /* 2-COL GRID AT MEDIUM */
    grid-template-columns: repeat(2, minmax(0, auto));        /* TWO AUTO COLUMNS THAT CAN SHRINK AS NEEDED */
    justify-content:       space-evenly;                      /* EVEN SPACE AT LEFT EDGE, BETWEEN LINKS, AND RIGHT EDGE */
    column-gap:            var(--gap-h);
    row-gap:               var(--gap-v);
  }

  .nav-link {
    justify-content:       center;                            /* CENTER LABELS INSIDE EACH GRID CELL */
  }

  .nav-links:not(:has(.nav-link:nth-child(4))) .nav-link:nth-child(3) {
    grid-column:           1 / -1;                            /* WHEN THERE ARE ONLY 3 LINKS, MAKE THE LAST ONE SPAN BOTH COLUMNS */
    justify-self:          center;                            /* CENTER IT IN THAT FULL-WIDTH ROW */
  }
}

/* ========================================================================== */
/* 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;
}

.copyright-tail {
  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); }