/* ===========================================================================
   JT&S Biz Solutions — app.css
   Clean rebuild. Written 2026-08-31.

   ARCHITECTURE
   1  Tokens
   2  Reset + base
   3  Utilities
   4  Buttons & links
   5  Header / navigation
   6  Flash messages
   7  Homepage            .home-*        (namespaced, homepage only)
   8  Solutions page      .solutions-page__*
   9  Divisions page      .divisions-page__*
   10 Partners page       .partners-page__*
   11 Shared inner pages  .page-hero .section .content-panel .placeholder-grid
   12 Forms
   13 Client portal
   14 Admin portal
   15 Footer / chat / mobile tab bar
   16 Responsive
   17 Accessibility

   RULES THIS FILE FOLLOWS
   - No !important anywhere.
   - No fixed height on any content card. Height is always content-driven.
   - No absolute positioning for layout. Only two decorative glows, both
     inside overflow:hidden parents.
   - Every grid track uses minmax(0, 1fr) so long words cannot blow out the row.
   - Each page owns its card classes. Homepage CSS cannot reach inner pages.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- 1 TOKENS */
:root{
  /* surface ladder: deepest -> most raised */
  --bg:        #040a16;
  --bg-band:   #071125;
  --panel:     #0a1730;
  --panel-2:   #0e1f3d;

  /* hairlines carry the structure in this design */
  --line:      rgba(125,163,255,.13);
  --line-2:    rgba(125,163,255,.22);
  --line-3:    rgba(125,163,255,.34);

  /* electric blue: the only brand accent */
  --blue:      #2e7cff;
  --blue-lt:   #6ba6ff;
  --blue-dk:   #1348c9;
  --glow:      rgba(46,124,255,.30);

  /* green is informational only — positive metric deltas, nothing else */
  --up:        #3fd8a4;

  --text:      #eaf1fc;
  --muted:     #9baecb;
  --dim:       #6e82a2;

  --r-xs: 8px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shell: 1240px;
  --pad:   clamp(18px, 4vw, 40px);
  --band:  clamp(56px, 7vw, 104px);

  --shadow-lift: 0 30px 70px -40px rgba(0,0,0,.95);
  --shadow-pop:  0 24px 60px -28px rgba(4,10,22,.9);

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ------------------------------------------------------- 2 RESET AND BASE */
*,*::before,*::after{ box-sizing:border-box; }

html{
  overflow-x:clip;              /* clip, not hidden — keeps sticky header working */
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--text);
  font-family:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  margin:0;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#fff;
  text-wrap:balance;
}
h1{ font-size:clamp(2.25rem, 5.2vw, 3.75rem); font-weight:800; }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing:-.02em; }
h4{ font-size:1rem; letter-spacing:-.01em; }

p{ margin:0; color:var(--muted); }
a{ color:inherit; text-decoration:none; }
b,strong{ font-weight:700; color:#fff; }
small{ font-size:.86rem; }
em{ font-style:normal; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--blue); color:#fff; }

/* ------------------------------------------------------------ 3 UTILITIES */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.glass{
  background:linear-gradient(180deg, rgba(14,31,61,.72), rgba(10,23,48,.72));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.ui-icon{ width:1.25em; height:1.25em; flex:none; }

/* small structural label. Used sparingly — hero and section heads only. */
.j-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-lt);
}
.j-eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--blue);
}

/* section head shared by every homepage band */
.j-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);
  align-items:end;
  margin-bottom:clamp(28px,3.4vw,48px);
}
.j-head h2{ margin-top:.7rem; max-width:18ch; }
.j-head p{ font-size:1.02rem; max-width:46ch; }
.j-head--solo{ grid-template-columns:minmax(0,1fr); }
.j-head--solo h2{ max-width:22ch; }

/* ----------------------------------------------------- 4 BUTTONS AND LINKS */
.btn,
.j-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.85rem 1.4rem;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:var(--blue);
  color:#fff;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover,
.j-btn:hover{ background:#4a8dff; }

.btn.secondary,
.j-btn.ghost{
  background:transparent;
  border-color:var(--line-3);
  color:var(--text);
}
.btn.secondary:hover,
.j-btn.ghost:hover{ background:rgba(46,124,255,.1); border-color:var(--line-3); }

.btn.small{ padding:.55rem 1rem; font-size:.85rem; }
.btn.big{ padding:1rem 1.7rem; font-size:1.02rem; }

.j-btn .ui-icon{ width:1.05em; height:1.05em; }

/* quiet inline link with a rule that grows on hover */
.j-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  align-self:start;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--line-2);
  color:var(--blue-lt);
  font-size:.95rem;
  font-weight:600;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.j-link:hover{ border-color:var(--blue); color:#fff; }

.pill{
  display:inline-flex;
  align-items:center;
  padding:.36rem .85rem;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:rgba(46,124,255,.08);
  color:var(--blue-lt);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.eyebrow{
  display:block;
  color:var(--blue-lt);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* the icon chip used by every card in the system */
.j-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:none;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:linear-gradient(160deg, rgba(46,124,255,.18), rgba(46,124,255,.04));
  color:var(--blue-lt);
}
.j-chip .ui-icon{ width:21px; height:21px; }

/* ------------------------------------------------------ 5 HEADER AND NAV */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:clamp(16px,2.5vw,40px);
  padding-block:.75rem;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:rgba(4,10,22,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  max-width:none;
}
.site-header > *{ min-width:0; }

/* --- wordmark. Only the ampersand is blue. --- */
.brand{
  display:flex;
  flex-direction:column;
  gap:1px;
  flex:none;
  line-height:1;
}
.brand__word{
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-.045em;
  color:#fff;
}
.brand__amp{ color:var(--blue); }
.brand small{
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
}
.brand.big .brand__word{ font-size:1.85rem; }
/* legacy markup fallback (/admin/_top.php ships <span>JT<span>&S</span></span>) */
.brand > span > span{ color:var(--blue); }

.desktop-nav{
  display:flex;
  align-items:center;
  gap:clamp(4px,1vw,10px);
  margin-inline-start:auto;
}
.desktop-nav a{
  padding:.5rem .7rem;
  border-radius:var(--r-xs);
  color:var(--muted);
  font-size:.92rem;
  font-weight:500;
  white-space:nowrap;
  transition:color .16s var(--ease), background .16s var(--ease);
}
.desktop-nav a:hover{ color:#fff; background:rgba(125,163,255,.07); }
.desktop-nav a.is-active{ color:#fff; }
.desktop-nav a.is-active::after{
  content:"";
  display:block;
  height:2px;
  margin-top:4px;
  border-radius:2px;
  background:var(--blue);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:none;
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .6rem;
  border-radius:var(--r-xs);
  color:var(--muted);
  font-size:.9rem;
  font-weight:500;
  transition:color .16s var(--ease);
}
.text-link:hover{ color:#fff; }
.account-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem 1.05rem;
  border:1px solid var(--line-2);
  border-radius:var(--r-xs);
  color:var(--text);
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.account-btn:hover{ background:rgba(46,124,255,.12); border-color:var(--line-3); }

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--line-2);
  border-radius:var(--r-xs);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.icon-btn .ui-icon{ width:22px; height:22px; }
.icon-btn[aria-expanded="true"] .icon-open{ display:none; }
.icon-btn .icon-close{ display:none; }
.icon-btn[aria-expanded="true"] .icon-close{ display:block; }

.mobile-menu{
  position:sticky;
  top:66px;
  z-index:55;
  display:flex;
  flex-direction:column;
  padding:.5rem var(--pad) 1rem;
  border-inline:0;
  border-top:0;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{
  padding:.85rem .2rem;
  border-bottom:1px solid var(--line);
  color:var(--text);
  font-size:1rem;
  font-weight:500;
}
.mobile-menu a:last-child{ border-bottom:0; color:var(--blue-lt); font-weight:600; }

.skip-link{
  position:absolute;
  left:-9999px;
  z-index:200;
  padding:.7rem 1.1rem;
  border-radius:var(--r-xs);
  background:var(--blue);
  color:#fff;
  font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

/* ------------------------------------------------------ 6 FLASH MESSAGES */
.flash{
  margin:1.2rem auto;
  padding:.9rem 1.1rem;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  font-size:.95rem;
}
.flash.success{ border-color:rgba(63,216,164,.4); background:rgba(63,216,164,.09); color:#c9f6e5; }
.flash.error{   border-color:rgba(255,113,113,.42); background:rgba(255,113,113,.09); color:#ffd9d9; }

/* ============================== 7 HOMEPAGE ==============================
   Every rule below is prefixed .home- and appears on index.php only.
   ======================================================================== */

/* --- 7.1 hero ----------------------------------------------------------- */
.home-hero{
  position:relative;
  overflow:hidden;               /* contains the glow. nothing escapes. */
  border-bottom:1px solid var(--line);
  padding-block:clamp(44px,6vw,96px) clamp(40px,5vw,80px);
}
.home-hero__glow{
  position:absolute;
  top:-30%;
  right:-10%;
  width:min(760px,90%);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, rgba(46,124,255,0) 68%);
  pointer-events:none;
}
.home-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);
  align-items:center;
}
.home-hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1.3rem; }
.home-hero__copy h1{ margin:0; max-width:15ch; }
.home-hero__lede{
  max-width:52ch;
  font-size:clamp(1rem,1.15vw,1.11rem);
  line-height:1.7;
}
.home-hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* --- 7.2 the command panel (coded, no image) ---------------------------- */
.home-dashboard{
  min-width:0;                   /* lets the grid column actually shrink */
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg, rgba(15,33,64,.95), rgba(7,17,37,.95));
  box-shadow:var(--shadow-lift);
  overflow:hidden;               /* the panel can never overlap what follows */
}
.home-dashboard__bar{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.8rem 1.1rem;
  border-bottom:1px solid var(--line);
  background:rgba(4,10,22,.5);
}
.home-dashboard__dots{ display:flex; gap:5px; }
.home-dashboard__dots i{ width:8px; height:8px; border-radius:50%; background:var(--line-3); }
.home-dashboard__dots i:first-child{ background:var(--blue); }
.home-dashboard__bar span{
  font-size:.82rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-.01em;
}
.home-dashboard__live{
  margin-inline-start:auto;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--up);
}
.home-dashboard__live::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--up);
}
.home-dashboard__body{ padding:clamp(16px,2vw,22px); display:grid; gap:14px; }

.home-dashboard__lead{
  padding:clamp(14px,1.8vw,18px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(4,10,22,.42);
}
.home-dashboard__label{
  display:block;
  font-size:.76rem;
  font-weight:600;
  color:var(--dim);
  letter-spacing:.04em;
}
.home-dashboard__figure{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.25rem;
}
.home-dashboard__figure strong{
  font-size:clamp(1.5rem,2.4vw,1.95rem);
  font-weight:800;
  letter-spacing:-.035em;
}
.home-dashboard__delta{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  padding:.15rem .5rem;
  border-radius:999px;
  background:rgba(63,216,164,.12);
  color:var(--up);
  font-size:.78rem;
  font-weight:700;
}
.home-dashboard__chart{ width:100%; height:88px; margin-top:.8rem; display:block; }
.home-dashboard__axis{
  display:flex;
  justify-content:space-between;
  margin-top:.4rem;
  font-size:.68rem;
  color:var(--dim);
  letter-spacing:.06em;
}

.home-dashboard__tiles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--line);
  overflow:hidden;
}
.home-dashboard__tile{
  padding:clamp(12px,1.6vw,16px);
  background:rgba(4,10,22,.42);
}
.home-dashboard__tile span{ display:block; font-size:.74rem; color:var(--dim); }
.home-dashboard__tile strong{ display:block; margin-top:.15rem; font-size:1.35rem; font-weight:800; letter-spacing:-.03em; }
.home-dashboard__tile em{ font-size:.76rem; font-weight:700; color:var(--up); }

.home-dashboard__rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.home-dashboard__rows li{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.7rem clamp(12px,1.6vw,16px);
  background:rgba(4,10,22,.42);
  font-size:.82rem;
  color:var(--muted);
}
.home-dashboard__rows li b{ margin-inline-start:auto; font-size:.74rem; font-weight:700; color:var(--up); }
.home-dashboard__rows i{ width:6px; height:6px; border-radius:50%; background:var(--blue); flex:none; }

/* --- 7.3 trust strip ---------------------------------------------------- */
.home-trust{ border-bottom:1px solid var(--line); background:var(--bg-band); }
.home-trust__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.home-trust__item{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  padding:clamp(22px,2.6vw,30px) clamp(18px,2.4vw,32px);
  border-inline-start:1px solid var(--line);
}
.home-trust__item:first-child{ border-inline-start:0; padding-inline-start:0; }
.home-trust__item .ui-icon{ width:22px; height:22px; margin-top:3px; color:var(--blue-lt); }
.home-trust__item b{ display:block; font-size:.98rem; letter-spacing:-.01em; }
.home-trust__item small{ display:block; color:var(--dim); line-height:1.5; }

/* --- 7.4 divisions: the hairline matrix (signature element) ------------- */
.home-divisions{ padding-block:var(--band); }
.home-division-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;                       /* the 1px gaps ARE the hairlines */
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.home-division-card{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:clamp(18px,2vw,24px);
  background:var(--panel);
  color:inherit;
  transition:background .18s var(--ease);
  /* height is content-driven. no min-height, no aspect-ratio, no absolute. */
}
.home-division-card:hover{ background:var(--panel-2); }
.home-division-card__top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.home-division-card .j-chip{ width:38px; height:38px; border-radius:10px; }
.home-division-card .j-chip .ui-icon{ width:19px; height:19px; }
.home-division-card__go{
  color:var(--blue-lt);
  opacity:0;                       /* one arrow on hover, not ten on the page */
  transition:opacity .18s var(--ease);
}
.home-division-card:hover .home-division-card__go,
.home-division-card:focus-visible .home-division-card__go{ opacity:1; }
.home-division-card b{ display:block; font-size:.98rem; letter-spacing:-.015em; line-height:1.25; }
.home-division-card small{ display:block; color:var(--dim); font-size:.82rem; line-height:1.5; }

/* --- 7.5 solutions: sticky copy + ruled list ---------------------------- */
.home-solutions{
  padding-block:var(--band);
  border-block:1px solid var(--line);
  background:var(--bg-band);
}
.home-solutions__inner{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,4vw,72px);
  align-items:start;
}
.home-solutions__copy{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  position:sticky;
  top:110px;
}
.home-solutions__copy h2{ max-width:14ch; }
.home-solutions__copy p{ max-width:42ch; }
.home-solutions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.home-solution-card{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:clamp(20px,2.2vw,26px);
  background:var(--panel);
  transition:background .18s var(--ease);
}
.home-solution-card:hover{ background:var(--panel-2); }
.home-solution-card h3{ font-size:1.02rem; }
.home-solution-card p{ font-size:.9rem; line-height:1.6; color:var(--dim); }

/* --- 7.6 why + process -------------------------------------------------- */
.home-why{ padding-block:var(--band); }
.home-why__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,72px);
  align-items:start;
}
.home-why__copy{ display:flex; flex-direction:column; gap:1.1rem; }
.home-why__copy h2{ max-width:16ch; }
.home-why__list{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.home-why__list li{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:clamp(16px,2vw,22px);
  background:var(--panel);
}
.home-why__list .ui-icon{ width:20px; height:20px; margin-top:3px; color:var(--blue); }
.home-why__list b{ display:block; font-size:.98rem; letter-spacing:-.015em; }
.home-why__list small{ display:block; color:var(--dim); line-height:1.55; }

/* numbered because this genuinely is a sequence */
.home-process{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin-top:clamp(28px,3.5vw,44px); }
.home-process__step{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding-top:1.1rem;
  border-top:2px solid var(--line-2);
}
.home-process__step:first-child{ border-top-color:var(--blue); }
.home-process__step span{ font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--blue-lt); }
.home-process__step h3{ font-size:1.05rem; }
.home-process__step p{ font-size:.9rem; line-height:1.6; color:var(--dim); }

/* --- 7.7 featured partners --------------------------------------------- */
.home-partners{
  padding-block:var(--band);
  border-block:1px solid var(--line);
  background:var(--bg-band);
}
.home-partners__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,22px);
}
.home-partner-card{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
}
.home-partner-card__top{ display:flex; align-items:center; gap:.85rem; }
.home-partner-card h3{ font-size:1.15rem; }
.home-partner-card p{ font-size:.94rem; line-height:1.6; }
.home-partner-card__tag{
  align-self:flex-start;
  padding:.3rem .7rem;
  border:1px solid var(--line-2);
  border-radius:999px;
  color:var(--dim);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* --- 7.8 closing CTA ---------------------------------------------------- */
.home-cta{ padding-block:var(--band); }
.home-cta__inner{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);
  align-items:center;
  padding:clamp(30px,4vw,56px);
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  background:linear-gradient(120deg, rgba(19,72,201,.28), rgba(10,23,48,.9) 62%);
}
.home-cta__glow{
  position:absolute;
  bottom:-60%;
  left:-8%;
  width:min(520px,70%);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, rgba(46,124,255,0) 70%);
  pointer-events:none;
}
.home-cta__copy{ position:relative; display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.home-cta__copy h2{ max-width:17ch; }
.home-cta__copy p{ max-width:48ch; }
.home-cta__actions{ position:relative; display:flex; flex-direction:column; gap:.7rem; }
.home-cta__note{
  padding-top:.9rem;
  border-top:1px solid var(--line-2);
  color:var(--dim);
  font-size:.86rem;
  line-height:1.55;
}

/* ======================= 8 SOLUTIONS PAGE (namespaced) ================== */
.solutions-page{ padding-block:clamp(28px,3.5vw,48px) var(--band); }
.solutions-page__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,280px), 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.solutions-page__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.7rem;
  padding:clamp(20px,2.4vw,28px);
  background:var(--panel);
  /* auto height. heading is in normal flow, directly above its description. */
  transition:background .18s var(--ease);
}
.solutions-page__card:hover{ background:var(--panel-2); }
.solutions-page__card h3{ margin:0; font-size:1.06rem; }
.solutions-page__card p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--dim); }
.solutions-page__card .btn{ margin-top:auto; }

/* ======================= 9 DIVISIONS PAGE (namespaced) ================== */
.divisions-page{ padding-block:clamp(28px,3.5vw,48px) var(--band); }
.divisions-page__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.divisions-page__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.7rem;
  padding:clamp(20px,2.4vw,28px);
  background:var(--panel);
  scroll-margin-top:100px;        /* anchor links land below the sticky header */
  transition:background .18s var(--ease);
}
.divisions-page__card:hover{ background:var(--panel-2); }
.divisions-page__card h3{ margin:0; font-size:1.06rem; }
.divisions-page__card p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--dim); }
.divisions-page__card .btn{ margin-top:auto; }

/* ======================== 10 PARTNERS PAGE (namespaced) ================= */
.partners-page{ padding-block:clamp(28px,3.5vw,48px) var(--band); }
.partners-page__notice{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,24px);
  margin-bottom:clamp(22px,2.6vw,32px);
  border:1px solid var(--line-2);
  border-inline-start:3px solid var(--blue);
  border-radius:var(--r);
  background:rgba(46,124,255,.06);
  font-size:.95rem;
  line-height:1.6;
  color:var(--muted);
}
.partners-page__notice .ui-icon{ width:20px; height:20px; margin-top:3px; color:var(--blue-lt); flex:none; }
.partners-page__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,320px), 1fr));
  gap:clamp(14px,1.8vw,20px);
}
.partners-page__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.7rem;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
}
.partners-page__card h2{ margin:0; font-size:1.3rem; }
.partners-page__card p{ margin:0; font-size:.95rem; line-height:1.6; }
.partners-page__card em{
  padding:.28rem .7rem;
  border:1px solid var(--line-2);
  border-radius:999px;
  color:var(--dim);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ==================== 11 SHARED INNER-PAGE FURNITURE ==================== */
/* Used by about / contact / portfolio / search / account and the page heads
   of solutions / divisions / partners. Deliberately layout-light so it can
   never fight a page's own card namespace. */
.page-hero{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
  padding-block:clamp(38px,5vw,72px) clamp(24px,3vw,40px);
}
.page-hero h1{ max-width:20ch; }
.page-hero p{ max-width:60ch; font-size:1.02rem; }

.section{ padding-block:clamp(20px,2.5vw,32px) var(--band); }
.section.glass{ border:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }

.content-panel{
  display:block;
  padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
}
.content-panel h2{ margin-bottom:.6rem; }
.content-panel h3{ margin-bottom:.4rem; }
.content-panel p + p{ margin-top:.7rem; }
.content-panel .eyebrow{ margin-bottom:.5rem; }
.content-panel .btn{ margin-top:1rem; }
a.content-panel{ transition:border-color .18s var(--ease), background .18s var(--ease); }
a.content-panel:hover{ border-color:var(--line-3); background:var(--panel-2); }

.placeholder-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr));
  gap:clamp(14px,1.8vw,20px);
}

.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:linear-gradient(160deg, rgba(46,124,255,.18), rgba(46,124,255,.04));
  color:var(--blue-lt);
  font-size:1.15rem;
}

/* legacy grid names — kept alive so any page I did not rewrite still lays out */
.solution-grid,
.division-grid,
.detail-grid,
.partner-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr));
  gap:clamp(14px,1.8vw,20px);
}
.division-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.7rem;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
  scroll-margin-top:100px;
}
.division-card h3{ margin:0; }
.division-card p{ margin:0; font-size:.92rem; color:var(--dim); }
.division-card .btn{ margin-top:auto; }

/* ================================ 12 FORMS ============================== */
.contact-form,
.admin-form,
.search-form,
.login-card{ font-size:.95rem; }

.contact-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  width:100%;
  max-width:var(--shell);
  margin:0 auto clamp(48px,6vw,88px);
  padding:clamp(22px,3vw,36px);
  border-radius:var(--r-lg);
}
.contact-form .full{ grid-column:1 / -1; }

label{ display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; font-weight:600; color:var(--muted); }

input,select,textarea{
  width:100%;
  padding:.8rem .9rem;
  border:1px solid var(--line-2);
  border-radius:var(--r-xs);
  background:rgba(4,10,22,.55);
  color:var(--text);
  font-family:inherit;
  font-size:.95rem;
  font-weight:400;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--blue);
  background:rgba(4,10,22,.8);
}
textarea{ resize:vertical; min-height:120px; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

.search-form{ display:flex; gap:.6rem; width:100%; max-width:620px; }
.search-form input{ flex:1; }

.login-wrap{ display:flex; justify-content:center; padding-block:clamp(40px,6vw,84px); }
.login-card{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  width:100%;
  max-width:420px;
  padding:clamp(24px,3vw,36px);
  border-radius:var(--r-lg);
}
.login-card h2{ margin:.3rem 0 .2rem; }
.login-card .btn{ margin-top:.4rem; }
.login-card > a:last-child{ color:var(--blue-lt); font-size:.88rem; text-align:center; }

.admin-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:1rem; margin-bottom:1.5rem; }
.admin-form .full{ grid-column:1 / -1; }

/* ============================ 13 CLIENT PORTAL ========================== */
.dashboard{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);
  align-items:start;
  padding-bottom:var(--band);
}
.portal-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:.7rem;
  border-radius:var(--r-lg);
}
.portal-nav a{ padding:.7rem .85rem; border-radius:var(--r-xs); color:var(--muted); font-size:.92rem; font-weight:500; }
.portal-nav a:hover{ background:rgba(125,163,255,.07); color:#fff; }
.portal-nav a.active{ background:rgba(46,124,255,.14); color:#fff; }
.portal-main{ display:grid; gap:clamp(14px,1.8vw,20px); min-width:0; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:clamp(12px,1.6vw,16px); }
.stat-grid article{ padding:clamp(16px,2vw,22px); border-radius:var(--r-lg); }
.stat-grid b{ display:block; font-size:1.9rem; font-weight:800; letter-spacing:-.03em; }
.stat-grid span{ font-size:.85rem; color:var(--dim); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }

.ticket-thread{ display:grid; gap:.7rem; margin:1rem 0; }
.ticket-msg{ padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:var(--r); background:rgba(4,10,22,.4); font-size:.92rem; }
.ticket-msg.staff{ border-color:rgba(46,124,255,.32); background:rgba(46,124,255,.08); }

/* ============================= 14 ADMIN PORTAL ========================== */
.admin-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem clamp(16px,3vw,28px);
  border-inline:0;
  border-top:0;
}
.admin-top nav{ display:flex; gap:1rem; font-size:.9rem; color:var(--muted); }
.admin-top nav a:hover{ color:#fff; }
.admin-layout{
  display:grid;
  grid-template-columns:minmax(0,215px) minmax(0,1fr);
  gap:clamp(16px,2vw,26px);
  align-items:start;
  padding:clamp(16px,2.4vw,28px);
}
.admin-nav{ display:flex; flex-direction:column; gap:2px; padding:.7rem; border-radius:var(--r-lg); }
.admin-nav a{ padding:.66rem .85rem; border-radius:var(--r-xs); color:var(--muted); font-size:.9rem; font-weight:500; }
.admin-nav a:hover{ background:rgba(125,163,255,.07); color:#fff; }
.admin-main{ min-width:0; display:grid; gap:clamp(14px,1.8vw,20px); }
.admin-main h1{ font-size:clamp(1.5rem,2.6vw,2rem); }

.table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
  -webkit-overflow-scrolling:touch;
}
table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th,td{ padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
th{ color:var(--dim); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:rgba(125,163,255,.04); }

.status{
  display:inline-flex;
  padding:.2rem .6rem;
  border-radius:999px;
  border:1px solid var(--line-2);
  font-size:.72rem;
  font-weight:600;
  text-transform:capitalize;
}

/* =============== 15 FOOTER, CHAT WIDGET, MOBILE TAB BAR ================ */
.footer-points{ border-top:1px solid var(--line); background:var(--bg-band); }
.footer-highlights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.footer-highlights > div{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:clamp(22px,2.6vw,30px) clamp(18px,2.4vw,32px);
  border-inline-start:1px solid var(--line);
}
.footer-highlights > div:first-child{ border-inline-start:0; padding-inline-start:0; }
.footer-highlights .ui-icon{ width:22px; height:22px; margin-top:3px; color:var(--blue-lt); }
.footer-highlights b{ display:block; font-size:.97rem; letter-spacing:-.01em; }
.footer-highlights small{ display:block; color:var(--dim); }

.site-footer{ border-top:1px solid var(--line); background:var(--bg); }
.site-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
  padding-block:clamp(34px,4vw,56px);
}
.site-footer__about{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.site-footer__about p{ max-width:34ch; font-size:.92rem; line-height:1.65; }
.site-footer__col h4{ margin-bottom:.8rem; font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }
.site-footer__col a{ display:block; padding:.28rem 0; color:var(--muted); font-size:.92rem; transition:color .16s var(--ease); }
.site-footer__col a:hover{ color:#fff; }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding-block:1.1rem;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:.85rem;
}
.footer-bottom a{ color:var(--muted); }
.footer-bottom a:hover{ color:#fff; }

/* compact chat widget */
.chat-fab{
  position:fixed;
  right:clamp(14px,2vw,26px);
  bottom:clamp(14px,2vw,26px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.75rem 1.15rem;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:rgba(10,23,48,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-pop);
  color:var(--text);
  font-size:.9rem;
  font-weight:600;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.chat-fab:hover{ background:rgba(46,124,255,.2); border-color:var(--line-3); }
.chat-fab .ui-icon{ width:19px; height:19px; color:var(--blue-lt); }
.chat-fab i{ width:7px; height:7px; border-radius:50%; background:var(--up); flex:none; }

.mobile-tabbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:65;
  display:none;
  border-inline:0;
  border-bottom:0;
  border-top:1px solid var(--line);
  background:rgba(4,10,22,.94);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-tabbar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:.55rem 0 .5rem;
  color:var(--dim);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.02em;
}
.mobile-tabbar a .ui-icon{ width:20px; height:20px; }
.mobile-tabbar a.is-active{ color:var(--blue-lt); }


/* =========================== 12b CONTACT PAGE ========================== */
/* Own namespace. Nothing here can reach another page's form. */
.contact-page{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,36px);
  align-items:start;
  padding-block:clamp(8px,1.5vw,20px) var(--band);
}
.contact-page__form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
}
.contact-page__form .full{ grid-column:1 / -1; }
.contact-page__labelrow{ display:flex; align-items:baseline; gap:.45rem; }
.contact-page__optional{ color:var(--dim); font-weight:400; font-size:.8rem; }
.contact-page__submit{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.9rem;
  padding-top:.3rem;
}
.contact-page__submit span{ color:var(--dim); font-size:.86rem; }

.contact-page__aside{ display:grid; gap:clamp(14px,1.8vw,20px); }
.contact-page__panel{
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg-band);
}
.contact-page__panel h2{ margin-bottom:1rem; font-size:1.12rem; }

.contact-page__steps{ display:grid; gap:1rem; }
.contact-page__steps li{ display:flex; align-items:flex-start; gap:.85rem; }
.contact-page__steps span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:none;
  border:1px solid var(--line-2);
  border-radius:50%;
  color:var(--blue-lt);
  font-size:.78rem;
  font-weight:700;
}
.contact-page__steps b{ display:block; font-size:.95rem; letter-spacing:-.01em; }
.contact-page__steps small{ display:block; color:var(--dim); line-height:1.55; }

.contact-page__row{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:.75rem 0;
  border-top:1px solid var(--line);
}
.contact-page__panel h2 + .contact-page__row{ border-top:0; padding-top:0; }
.contact-page__row .ui-icon{ width:20px; height:20px; margin-top:3px; color:var(--blue-lt); flex:none; }
.contact-page__row b{ display:block; font-size:.93rem; letter-spacing:-.01em; word-break:break-word; }
.contact-page__row small{ display:block; color:var(--dim); line-height:1.55; }
a.contact-page__row:hover b{ color:var(--blue-lt); }

/* ============================= 16 RESPONSIVE =========================== */

/* Visibility utilities live here, AFTER every component rule, so that a
   component's own display value (.icon-btn is inline-flex, for example)
   can never win on source order and leak the mobile button onto desktop. */
.mobile-only{ display:none; }
.desktop-only{ display:inline-flex; }

/* laptop 1280 / 1366 — keep the nav from crowding the wordmark */
@media (max-width:1180px){
  .desktop-nav a{ padding-inline:.5rem; font-size:.88rem; }
  .search-link span{ display:none; }
}

@media (max-width:1080px){
  .home-division-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .home-solutions__inner{ grid-template-columns:minmax(0,1fr); }
  .home-solutions__copy{ position:static; }
  .home-solutions__copy h2,
  .home-solutions__copy p{ max-width:none; }
}

/* tablet — hero stacks, dashboard drops below the copy */
@media (max-width:960px){
  .home-hero__inner{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .home-hero__copy h1{ max-width:none; }
  .home-why__inner{ grid-template-columns:minmax(0,1fr); }
  .home-cta__inner{ grid-template-columns:minmax(0,1fr); }
  .home-cta__actions{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .home-cta__note{ flex-basis:100%; }
  .j-head{ grid-template-columns:minmax(0,1fr); align-items:start; gap:14px; }
  .j-head h2{ max-width:26ch; }
  .dashboard{ grid-template-columns:minmax(0,1fr); }
  .portal-nav{ flex-direction:row; flex-wrap:wrap; }
  .admin-layout{ grid-template-columns:minmax(0,1fr); }
  .admin-nav{ flex-direction:row; flex-wrap:wrap; }
  .site-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer__about{ grid-column:1 / -1; }
  .contact-page{ grid-template-columns:minmax(0,1fr); }
}

/* phones and small tablets — nav becomes the hamburger */
@media (max-width:860px){
  .desktop-nav{ display:none; }
  .desktop-only{ display:none; }
  .mobile-only{ display:flex; }
  .header-actions{ margin-inline-start:auto; }
  .mobile-tabbar{ display:flex; }
  body{ padding-bottom:64px; }              /* room for the tab bar */
  .chat-fab{ bottom:calc(64px + env(safe-area-inset-bottom) + 12px); }

  .home-division-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-trust__grid{ grid-template-columns:minmax(0,1fr); }
  .home-trust__item{ border-inline-start:0; border-top:1px solid var(--line); padding-inline:0; }
  .home-trust__item:first-child{ border-top:0; }
  .home-process{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .home-partners__grid{ grid-template-columns:minmax(0,1fr); }
  .footer-highlights{ grid-template-columns:minmax(0,1fr); }
  .footer-highlights > div{ border-inline-start:0; border-top:1px solid var(--line); padding-inline:0; padding-block:18px; }
  .footer-highlights > div:first-child{ border-top:0; }
}

/* 390 / 430 phones */
@media (max-width:620px){
  :root{ --pad:18px; --band:52px; }
  body{ font-size:15.5px; }

  /* full-width CTA buttons, exactly as specified */
  .home-hero__actions,
  .home-cta__actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:.6rem; width:100%; }
  .home-hero__actions .j-btn,
  .home-cta__actions .j-btn{ width:100%; }

  .home-division-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-division-card{ padding:16px; }
  .home-division-card small{ display:none; }   /* keep the mobile grid compact */
  .home-solutions-grid{ grid-template-columns:minmax(0,1fr); }
  .home-dashboard__body{ padding:14px; gap:12px; }
  .home-dashboard__rows li:last-child{ display:none; }

  .solutions-page__grid,
  .divisions-page__grid{ grid-template-columns:minmax(0,1fr); }
  .solutions-page__card,
  .divisions-page__card,
  .partners-page__card{ padding:18px; }

  .contact-form{ grid-template-columns:minmax(0,1fr); }
  .contact-page__form{ grid-template-columns:minmax(0,1fr); padding:18px; }
  .contact-page__submit .btn{ width:100%; }
  .contact-page__panel{ padding:18px; }
  .search-form{ flex-direction:column; }
  .search-form .btn{ width:100%; }

  .site-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; padding-block:28px; }
  .footer-bottom{ justify-content:flex-start; font-size:.8rem; }

  .chat-fab span{ display:none; }            /* icon + dot only on small screens */
  .chat-fab{ padding:.7rem .85rem; }
}

@media (max-width:400px){
  :root{ --pad:16px; }
  .brand__word{ font-size:1.25rem; }
  .home-dashboard__figure strong{ font-size:1.4rem; }
}

/* ========================== 17 ACCESSIBILITY =========================== */
:focus-visible{
  outline:2px solid var(--blue-lt);
  outline-offset:3px;
  border-radius:4px;
}

/* one orchestrated page-load moment, hero only. nothing animates on scroll. */
@media (prefers-reduced-motion:no-preference){
  .home-hero__copy > *,
  .home-dashboard{
    animation:home-rise .7s var(--ease) backwards;
  }
  .home-hero__copy > *:nth-child(1){ animation-delay:.04s; }
  .home-hero__copy > *:nth-child(2){ animation-delay:.10s; }
  .home-hero__copy > *:nth-child(3){ animation-delay:.16s; }
  .home-hero__copy > *:nth-child(4){ animation-delay:.22s; }
  .home-dashboard{ animation-delay:.20s; }
}
@keyframes home-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms; transition-duration:.001ms; }
  html{ scroll-behavior:auto; }
}

@media print{
  .site-header,.mobile-menu,.chat-fab,.mobile-tabbar{ display:none; }
  body{ background:#fff; color:#000; }
}


/* ==========================================================
   JT&S ANALYTICS + MARKETING MODULE — isolated admin/public UI
   ========================================================== */
.admin-heading{display:flex;justify-content:space-between;gap:22px;align-items:flex-end;margin:4px 0 20px}.admin-heading h1{margin:8px 0 4px;font-size:clamp(34px,3.5vw,52px);letter-spacing:-.035em}.admin-heading p{max-width:760px;margin:0;color:#91a7bf}.admin-range,.admin-subnav{display:flex;flex-wrap:wrap;gap:7px}.admin-range a,.admin-subnav a{padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:#06152d;color:#9fb4cc;font-size:11px}.admin-range a.is-active,.admin-subnav a.is-active{border-color:#378fff;background:#0b5fcc;color:#fff}.admin-subnav{margin:0 0 18px}.admin-stat-grid{grid-template-columns:repeat(7,minmax(0,1fr));margin-bottom:20px}.admin-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}.panel-kicker{display:block;color:#54b7ff;font-size:9px;font-weight:800;letter-spacing:.14em}.content-panel h2{margin:5px 0 8px}.content-panel p{color:#9fb1c5}.analytics-admin,.marketing-admin{display:grid;gap:16px}.analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.analytics-kpis article{padding:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#08234a,#041127)}.analytics-kpis small,.analytics-kpis strong{display:block}.analytics-kpis small{color:#8fa5bd;font-size:10px}.analytics-kpis strong{margin-top:5px;font-size:28px;letter-spacing:-.03em}.analytics-chart-panel{padding:22px;border-radius:16px}.admin-section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.admin-section-head>span{color:#7f94aa;font-size:10px}.analytics-bars{height:220px;display:flex;gap:5px;align-items:flex-end;padding-top:20px;overflow:hidden}.analytics-bar{height:100%;min-width:5px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.analytics-bar i{display:block;width:min(14px,70%);min-height:4px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#58b9ff,#0d6dff);box-shadow:0 0 16px rgba(22,140,255,.22)}.analytics-bar small{font-size:7px;color:#6f849b;white-space:nowrap}.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.metric-list{display:grid}.metric-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:10px 0;border-bottom:1px solid var(--line)}.metric-list>div:last-child{border-bottom:0}.metric-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c8d5e3;font-size:11px}.metric-list b{font-size:12px}.metric-list small{grid-column:1/-1;color:#70859c;font-size:9px}.analytics-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:26px}.analytics-settings form,.stack-form,.campaign-form{display:grid;gap:12px}.check-row{grid-template-columns:18px minmax(0,1fr)!important;align-items:center}.check-row input{width:16px;height:16px;padding:0}.admin-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.text-button{padding:0;border:0;background:none;color:#59b9ff;cursor:pointer}.mail-settings .admin-form{margin-top:18px}.admin-form .full{grid-column:1/-1}.inline-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.inline-form label{min-width:260px}.admin-rule{border:0;border-top:1px solid var(--line);margin:22px 0}.connection-badge{padding:6px 9px;border:1px solid #6d4050;border-radius:999px;background:#2c1520;color:#ff9db1;font-size:9px}.connection-badge.is-configured{border-color:#236a52;background:#0b3829;color:#73e8b2}.cron-code{display:block;max-width:100%;padding:13px;margin-top:12px;border:1px solid var(--line);border-radius:10px;background:#020a18;color:#82caff;font-size:10px;overflow:auto;white-space:nowrap}.campaign-editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.campaign-sidebar{display:grid;align-content:start;gap:16px}.code-editor{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55}.admin-page .status{text-transform:capitalize}.admin-page .table-wrap small{color:#7f94aa}.admin-page .brand__amp{color:#168cff}
@media(max-width:1180px){.admin-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){.admin-heading{align-items:flex-start;flex-direction:column}.admin-stat-grid,.analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-grid,.analytics-settings,.admin-dashboard-grid,.admin-split,.campaign-editor{grid-template-columns:1fr}.campaign-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-bars{height:180px}.admin-section-head{flex-direction:column}.admin-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:520px){.admin-stat-grid,.analytics-kpis{grid-template-columns:1fr 1fr}.analytics-grid,.admin-split{grid-template-columns:1fr}.campaign-sidebar{grid-template-columns:1fr}.admin-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-nav a{font-size:11px}.analytics-bars{gap:2px}.analytics-bar small{display:none}.analytics-settings{grid-template-columns:1fr}.inline-form{display:grid}.inline-form label{min-width:0}.admin-heading h1{font-size:36px}
.analytics-kpis--five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){.analytics-kpis--five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.analytics-kpis--five{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* JT&S Insider mailing list — integrated with the newer frontend */
.footer-mailing{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);
  gap:clamp(22px,4vw,54px);
  align-items:end;
  margin-top:8px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.footer-mailing__eyebrow{
  display:block;
  margin-bottom:8px;
  color:var(--blue-lt);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
}
.footer-mailing h4{margin:0 0 8px;font-size:1rem;}
.footer-mailing p{margin:0;max-width:54ch;color:var(--dim);font-size:.88rem;line-height:1.65;}
.mailing-form{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr) auto;
  gap:10px;
  align-items:end;
}
.mailing-form label{display:grid;gap:6px;min-width:0;color:var(--muted);font-size:.75rem;}
.mailing-form label>span{display:block;}
.mailing-form label small{color:var(--dim);font-weight:400;}
.mailing-form input:not([type="checkbox"]){
  width:100%;
  min-width:0;
  min-height:43px;
  padding:10px 12px;
  border:1px solid var(--line-2);
  border-radius:var(--r-xs);
  background:rgba(7,17,37,.78);
  color:var(--text);
  outline:none;
}
.mailing-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,124,255,.12);}
.mailing-consent{
  grid-column:1 / -1;
  display:grid!important;
  grid-template-columns:17px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start;
  line-height:1.45;
}
.mailing-consent input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--blue);}
.mailing-form .btn{min-height:43px;white-space:nowrap;}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
@media(max-width:860px){
  .footer-mailing{grid-template-columns:1fr;}
  .mailing-form{grid-template-columns:1fr 1fr;}
  .mailing-form .btn{width:100%;}
}
@media(max-width:520px){
  .mailing-form{grid-template-columns:1fr;}
  .mailing-consent{grid-column:auto;}
}