/* ============================================================
   MILANITY — reimagined site
   Single committed visual world: a boiler-room control panel.
   Every color painted explicitly from tokens.
   ============================================================ */
:root{
  color-scheme: dark;

  /* Ground — cold steel blue, not near-black */
  --ground:      #0B1420;
  --ground-2:    #0E1B29;
  --panel:       #12212F;
  --panel-2:     #16283A;
  --rule:        #1E3247;
  --rule-soft:   #182839;

  /* Ink — cool whites biased to the ground's hue */
  --ink:         #E9EFF5;
  --ink-2:       #B4C6D6;
  --ink-3:       #93A8BA;
  --ink-4:       #7A8FA3;

  /* Accent — copper flame. In a plant room, orange means firing. */
  --flame:       #e8783a;
  --flame-hot:   #FF9455;
  --flame-dim:   rgba(232,120,58,.14);
  --flame-line:  rgba(232,120,58,.42);

  /* Semantic — the storyboard's own grammar */
  --jade:        #3DBF93;
  --jade-dim:    rgba(61,191,147,.13);
  --red:         #E2504A;
  --red-dim:     rgba(226,80,74,.14);
  --amber:       #E5A93C;
  --amber-dim:   rgba(229,169,60,.14);
  --cyan:        #4FA8D8;
  --cyan-dim:    rgba(79,168,216,.13);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

body{
  margin:0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
p{ margin:0; }
a{ color: inherit; }
img{ max-width:100%; }

:focus-visible{
  outline: 2px solid var(--flame-hot);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ---------- shared type ---------- */

.legal-crumb{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4);
}
.legal-crumb a{ color:var(--ink-3); text-decoration:none; }
.legal-crumb a:hover{ color:var(--flame); }
.nodash{
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--flame);
  display:flex; align-items:center; gap:11px;
  margin-bottom: 22px;
}
.eyebrow{
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--flame);
  display:flex; align-items:center; gap:11px;
  margin-bottom: 22px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background: var(--flame-line); flex:none;
}
.eyebrow.is-quiet{ color: var(--ink-3); }
.eyebrow.is-quiet::before{ background: var(--rule); }

.h-sec{ font-size: clamp(30px, 4.4vw, 52px); }
.h-sub{ font-size: clamp(21px, 2.4vw, 27px); font-stretch:106%; font-weight:700; letter-spacing:-.015em; }

.lede{
  font-size: clamp(17px, 1.55vw, 19.5px);
  color: var(--ink-2);
  max-width: 62ch;
  line-height: 1.6;
}
.body-copy{ color: var(--ink-2); max-width: 66ch; }
.small{ font-size: 14.5px; color: var(--ink-3); line-height:1.58; }
.mono{ font-family: var(--mono); font-variant-numeric: tabular-nums; }

section{ position:relative; }
.sec-pad{ padding-block: clamp(72px, 9vw, 132px); }
.rule-top{ border-top: 1px solid var(--rule-soft); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: sticky; top:0; z-index: 60;
  background: rgba(11,20,32,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-in{
  display:flex; align-items:center; gap: 30px;
  height: 66px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--display); font-weight:900; font-stretch:118%;
  font-size: 18.5px; letter-spacing: .01em; text-decoration:none;
  margin-right: auto;
}
.brand-mark{
  width:22px; height:22px; flex:none; display:block;
}
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-size: 14.5px; color: var(--ink-2); text-decoration:none;
  transition: color .18s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a[aria-current="page"]{ color: var(--ink); }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--body); font-size: 14.5px; font-weight:600;
  padding: 10px 19px; border-radius: 3px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--flame); color:#160A03; border-color: var(--flame); }
.btn-primary:hover{ background: var(--flame-hot); border-color: var(--flame-hot); }
.btn-ghost{ background: rgba(15, 26, 38, 0.1); color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover{ /*border-color: var(--ink-4);*/ background: rgba(22, 40, 58, 0.12); }
.btn-lg{ font-size: 15.5px; padding: 13px 25px; }

/* menu button: only visible when the links collapse */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:36px; padding:0; cursor:pointer;
  background: transparent; color: var(--ink);
  border:1px solid var(--rule); border-radius:3px;
}
.nav-toggle:hover{ border-color: var(--ink-4); background: var(--panel); }

/* eight links need a little more room on mid-size desktops */
@media (max-width: 1260px){
  .nav-in{ gap:20px; }
  .nav-links{ gap:16px; }
  .nav-links a{ font-size:13.5px; }
}
/* below this the links fold into a dropdown (was 900px before About/Contact were added) */
@media (max-width: 1100px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background: rgba(11,20,32,.97);
    border-bottom:1px solid var(--rule-soft);
    padding: 6px var(--gut) 14px;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ font-size:15px; padding:13px 0; border-top:1px solid var(--rule-soft); }
  .nav-links a:first-child{ border-top:0; }
}
@media (max-width: 560px){
  .nav-in{ gap:12px; }
  .nav .btn{ font-size:13px; padding:px 12px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule-soft); }
#net{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; opacity:.35; pointer-events:none; z-index:1;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: rgba(11, 20, 32, 0.81); opacity: 81%;   /* overlay color + opacity */
}
.hero-in{
  position:relative; z-index:2;
  padding-block: clamp(64px, 10vw, 118px) clamp(56px, 7vw, 92px);
  display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 5vw, 76px);
  align-items:center;
}
@media (max-width: 1000px){ .hero-in{ grid-template-columns:1fr; gap:44px; } }

.hero h1{
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight:900; font-stretch:118%;
  line-height:.98; letter-spacing:-.033em;
  max-width: 19ch;
}
.hero h1 .spoke{ color: var(--flame); }
.hero-sub{
  margin-top: 26px; font-size: clamp(17px, 1.7vw, 20px);
  color: var(--ink-2); max-width: 54ch; line-height:1.58;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.hero-tag{
  margin-top: 38px; padding-top: 20px; border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap: 8px 26px;
}
.hero-tag span{
  font-family: var(--mono); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color: var(--ink-4);
}
.hero-tag span b{ color: var(--ink-2); font-weight:500; }

/* hero instrument card */
.gauge{
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border:1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 24px 70px -30px rgba(0,0,0,.85);
  overflow:hidden;
}
.gauge-head{
  display:flex; align-items:center; gap:10px;
  padding: 13px 18px; border-bottom:1px solid var(--rule-soft);
  background: rgba(255,255,255,.015);
}
.gauge-head .dot{ width:7px; height:7px; border-radius:50%; background: var(--jade); flex:none; }
.gauge-head .t{
  font-family: var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color: var(--ink-3);
}
.gauge-head .r{ margin-left:auto; font-family:var(--mono); font-size:11px; color: var(--ink-4); }
.gauge-body{ padding: 6px 0; }

.row{
  display:grid; grid-template-columns: 1fr auto;
  gap:14px; align-items:center;
  padding: 12px 18px;
  border-bottom:1px solid var(--rule-soft);
}
.row:last-child{ border-bottom:0; }
.row-l{ min-width:0; }
.row-name{ font-size:14.5px; font-weight:500; color: var(--ink); }
.row-meta{ font-family:var(--mono); font-size:11.5px; color: var(--ink-4); margin-top:3px; }
.row-r{ text-align:right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.row-val{ font-size:16px; font-weight:500; color: var(--ink); }
.row-set{ font-size:11.5px; color: var(--ink-4); margin-top:3px; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding: 3px 8px; border-radius:2px; border:1px solid;
}
.chip::before{ content:""; width:5px; height:5px; border-radius:50%; background: currentColor; }
.chip.firing{ color: var(--flame); background: var(--flame-dim); border-color: rgba(232,120,58,.3); }
.chip.standby{ color: var(--jade); background: var(--jade-dim); border-color: rgba(61,191,147,.3); }
.chip.red{ color: var(--red); background: var(--red-dim); border-color: rgba(226,80,74,.32); }
.chip.amber{ color: var(--amber); background: var(--amber-dim); border-color: rgba(229,169,60,.3); }
.chip.cyan{ color: var(--cyan); background: var(--cyan-dim); border-color: rgba(79,168,216,.3); }
.chip.grey{ color: var(--ink-3); background: rgba(255,255,255,.03); border-color: var(--rule); }

/* ============================================================
   THE GAP
   ============================================================ */
.gap-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule-soft); margin-top: 52px; border:1px solid var(--rule-soft); }
@media (max-width: 860px){ .gap-grid{ grid-template-columns:1fr; } }
.gap-cell{ background: var(--ground); padding: 30px 28px 34px; }
.gap-cell h3{ font-size:18px; font-stretch:106%; margin-bottom:12px; }
.gap-cell p{ color: var(--ink-3); font-size:15px; line-height:1.6; }
.gap-cell .qt{
  margin-top:16px; padding-left:14px; border-left:2px solid var(--flame-line);
  font-family: var(--mono); font-size:13px; color: var(--ink-2); line-height:1.55;
}


/* ============================================================
   STACK — the aggregator spine
   ============================================================ */
.stack{ display:grid; gap:1px; background: var(--rule-soft); border:1px solid var(--rule-soft); margin-top:48px; }
.layer{
  background: var(--ground-2);
  display:grid; grid-template-columns: 152px 1fr 1.15fr; gap: 28px;
  padding: 26px 28px; align-items:start;
  transition: background .2s ease;
}
.layer:hover{ background: var(--panel); }
@media (max-width: 860px){ .layer{ grid-template-columns:1fr; gap:12px; } }
.layer-tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--flame); padding-top:4px;
}
.layer h3{ font-size:19px; font-stretch:104%; }
.layer p{ color: var(--ink-3); font-size:15px; line-height:1.6; }
.layer-4 .layer-tag{ color: var(--jade); }

.pull{
  margin-top: 52px; padding: 34px 0 0; border-top:1px solid var(--rule-soft);
  display:grid; grid-template-columns: auto 1fr; gap: 30px; align-items:start;
}
@media (max-width:700px){ .pull{ grid-template-columns:1fr; gap:14px; } }
.pull .mk{ font-family:var(--display); font-size:52px; font-weight:900; color: var(--flame); line-height:.7; }
.pull p{
  font-family: var(--display); font-stretch:104%; font-weight:600;
  font-size: clamp(19px, 2.2vw, 26px); line-height:1.34; letter-spacing:-.015em;
  color: var(--ink); max-width: 40ch;
}

/* ============================================================
   VERTICALS
   ============================================================ */
.verts{ display:grid; grid-template-columns: repeat(auto-fit, minmax(238px,1fr)); gap:1px; background: color-mix(in srgb, var(--rule-soft) 81%, transparent); border:1px solid var(--rule-soft); margin-top:48px; }
.vert{
  background: var(--ground-2); padding: 28px 24px 30px;
  display:flex; flex-direction:column; gap:12px;
  position:relative; transition: background .22s ease;
}
.vert:hover{ background: var(--panel); }
.vert::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background: var(--flame); transition: width .3s cubic-bezier(.2,.7,.3,1);
}
.vert:hover::before{ width:100%; }
.vert-ic{ color: var(--flame); }
.vert h3{ font-size:17px; font-stretch:104%; }
.vert p{ font-size:14.5px; color: var(--ink-3); line-height:1.58; }
.vert ul{ margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.vert li{
  font-family: var(--mono); font-size:11.5px; color: var(--ink-4);
  padding-left:13px; position:relative; line-height:1.5;
}
.vert li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:1px; background: var(--ink-4); }

/* ============================================================
   LIFECYCLE — the spine (a true sequence, so it is numbered)
   ============================================================ */
.life{ background: var(--ground-2); border-block:1px solid var(--rule-soft); }
.life-track{ margin-top:52px; display:flex; flex-direction:column; }
.stage{
  display:grid; grid-template-columns: 96px 1fr 1fr; gap: clamp(20px,3.4vw,48px);
  padding: 34px 0; border-top:1px solid var(--rule-soft);
  position:relative;
}
.stage:last-child{ border-bottom:1px solid var(--rule-soft); }
@media (max-width: 900px){ .stage{ grid-template-columns: 62px 1fr; } .stage-aside{ grid-column: 2; } }
.stage-n{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  color: var(--ink-4); padding-top:6px;
}
.stage-n b{ display:block; font-family:var(--display); font-size:34px; font-weight:900; color: var(--flame); line-height:1; letter-spacing:-.02em; margin-bottom:6px; }
.stage-main h3{ font-size: clamp(21px,2.3vw,27px); font-stretch:106%; margin-bottom:12px; }
.stage-main p{ color: var(--ink-2); font-size:15.5px; line-height:1.62; }
.stage-aside{ padding-top:4px; }
.stage-aside .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color: var(--ink-4); margin-bottom:12px;
}
.klist{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.klist li{
  font-size:14px; color: var(--ink-3); line-height:1.5;
  padding-left:16px; position:relative;
}
.klist li::before{
  content:""; position:absolute; left:0; top:8px; width:6px; height:6px;
  border:1px solid var(--flame-line); background: var(--flame-dim);
}
.stage-6 .stage-n b{ color: var(--jade); }
.stage-6 .klist li::before{ border-color: rgba(61,191,147,.45); background: var(--jade-dim); }

/* ============================================================
   BOILER ROOM — the interactive centerpiece
   ============================================================ */
.plant{
  margin-top: 48px;
  border:1px solid var(--rule); border-radius:4px; overflow:hidden;
  background: linear-gradient(168deg, var(--panel-2), var(--ground-2) 70%);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.9);
}
.plant-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding: 14px 20px; border-bottom:1px solid var(--rule-soft);
  background: rgba(255,255,255,.018);
}
.plant-bar .lbl{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color: var(--ink-3);
}
.plant-bar .sp{ margin-left:auto; }
.toggle{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color: var(--ink-2); background: var(--panel); border:1px solid var(--rule);
  padding: 8px 14px; border-radius:3px; cursor:pointer;
  transition: border-color .18s ease, color .18s ease;
}
.toggle:hover{ border-color: var(--ink-4); color: var(--ink); }
.toggle .sw{
  width:30px; height:16px; border-radius:9px; background: var(--rule);
  position:relative; flex:none; transition: background .25s ease;
}
.toggle .sw::after{
  content:""; position:absolute; top:2px; left:2px; width:12px; height:12px;
  border-radius:50%; background: var(--ink-3); transition: transform .25s ease, background .25s ease;
}
.plant.low .toggle .sw{ background: rgba(61,191,147,.35); }
.plant.low .toggle .sw::after{ transform: translateX(14px); background: var(--jade); }

.plant-grid{ display:grid; grid-template-columns: 1.25fr 1fr; }
@media (max-width: 940px){ .plant-grid{ grid-template-columns:1fr; } }
.plant-left{ padding: 24px 22px; border-right:1px solid var(--rule-soft); }
@media (max-width: 940px){ .plant-left{ border-right:0; border-bottom:1px solid var(--rule-soft); } }
.plant-right{ padding: 24px 22px; display:flex; flex-direction:column; gap:20px; }

.asp{
  border:1px solid var(--rule); border-radius:3px; padding:16px 18px;
  background: rgba(255,255,255,.02); margin-bottom:16px;
}
.asp-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.asp-name{ font-family:var(--display); font-weight:700; font-stretch:106%; font-size:16px; }
.asp-sub{ font-family:var(--mono); font-size:11px; color: var(--ink-4); }
.pairs{ display:grid; grid-template-columns: repeat(auto-fit,minmax(128px,1fr)); gap: 14px 18px; }
.pair .pk{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-4); }
.pair .pv{ font-family:var(--mono); font-size:19px; font-variant-numeric:tabular-nums; color: var(--ink); margin-top:3px; }
.pair .pv small{ font-size:11.5px; color: var(--ink-4); margin-left:3px; }
.pair .ps{ font-family:var(--mono); font-size:11px; color: var(--ink-4); margin-top:2px; }

.kids{ display:grid; gap:10px; }
.kid{
  border:1px solid var(--rule); border-radius:3px; padding: 13px 16px;
  display:grid; grid-template-columns: 1fr auto; gap:14px; align-items:center;
  background: rgba(255,255,255,.012);
  transition: border-color .3s ease, background .3s ease;
}
.kid.is-firing{ border-color: rgba(232,120,58,.42); background: rgba(232,120,58,.055); }
.kid.is-standby{ border-color: rgba(61,191,147,.34); background: rgba(61,191,147,.04); }
.kid-name{ font-size:14.5px; font-weight:500; }
.kid-meta{ font-family:var(--mono); font-size:11px; color: var(--ink-4); margin-top:3px; }
.kid-r{ display:flex; align-items:center; gap:14px; }
.fire{
  width:78px; height:5px; border-radius:3px; background: var(--rule); overflow:hidden; position:relative;
}
.fire i{
  display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--flame), var(--flame-hot));
  transition: width .7s cubic-bezier(.3,.8,.3,1);
}
.kid.is-standby .fire i{ background: var(--jade); }
.fire-n{ font-family:var(--mono); font-size:13px; color: var(--ink-2); width:42px; text-align:right; font-variant-numeric:tabular-nums; }

.readout{ border:1px solid var(--rule); border-radius:3px; padding:16px 18px; background: rgba(255,255,255,.02); }
.readout .rk{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-4); margin-bottom:12px; }
.readout .big{ font-family:var(--display); font-size:38px; font-weight:800; font-stretch:110%; letter-spacing:-.025em; line-height:1; font-variant-numeric:tabular-nums; }
.readout .big small{ font-family:var(--mono); font-size:13px; font-weight:400; color: var(--ink-4); margin-left:6px; letter-spacing:0; }
.readout .note{ font-size:13.5px; color: var(--ink-3); margin-top:10px; line-height:1.5; }
.delta{ font-family:var(--mono); font-size:12.5px; color: var(--jade); margin-top:6px; }

.metrics-strip{
  margin-top:38px; padding-top:26px; border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap:8px;
}
.metrics-strip .m{
  font-family:var(--mono); font-size:11.5px; color: var(--ink-3);
  border:1px solid var(--rule); border-radius:2px; padding:5px 10px;
  background: rgba(255,255,255,.015);
}

.truth{
  margin-top:42px; border-left:3px solid var(--flame);
  background: linear-gradient(90deg, var(--flame-dim), transparent 70%);
  padding: 24px 28px;
}
.truth h3{ font-size:19px; font-stretch:106%; margin-bottom:10px; }
.truth p{ color: var(--ink-2); font-size:15.5px; max-width:64ch; line-height:1.6; }

/* ============================================================
   3-up cards (generic)
   ============================================================ */
.trio{ display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:1px; background: var(--rule-soft); border:1px solid var(--rule-soft); margin-top:48px; }
.card{ background: var(--ground); padding: 28px 26px 32px; display:flex; flex-direction:column; gap:12px; }
.card .ck{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--flame); }
.card h3{ font-size:18px; font-stretch:106%; }
.card p{ font-size:14.5px; color: var(--ink-3); line-height:1.6; }
.card .fine{ font-family:var(--mono); font-size:12px; color: var(--ink-4); border-top:1px solid var(--rule-soft); padding-top:12px; margin-top:auto; line-height:1.5; }

/* ============================================================
   ALERT FLOW
   ============================================================ */
.flow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:44px; }
.flow-step{
  flex:1 1 130px; border:1px solid var(--rule); border-radius:3px;
  padding:15px 16px; background: var(--ground-2); position:relative;
}
.flow-step .fk{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-4); margin-bottom:7px; }
.flow-step .fv{ font-size:14.5px; font-weight:500; line-height:1.35; }
.flow-step:nth-child(1){ border-color: rgba(226,80,74,.4); }
.flow-step:nth-child(1) .fk{ color: var(--red); }
.flow-step:nth-child(5){ border-color: rgba(61,191,147,.4); }
.flow-step:nth-child(5) .fk{ color: var(--jade); }

.alerts{ margin-top:34px; border:1px solid var(--rule-soft); }
.alert-row{
  display:grid; grid-template-columns: 96px 1fr auto; gap:16px; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--rule-soft);
  background: var(--ground-2);
}
.alert-row:last-child{ border-bottom:0; }
@media (max-width:720px){ .alert-row{ grid-template-columns: 1fr; gap:8px; } }
.alert-name{ font-size:14.5px; }
.alert-dev{ font-family:var(--mono); font-size:11.5px; color: var(--ink-4); margin-top:3px; }
.alert-when{ font-family:var(--mono); font-size:11.5px; color: var(--ink-4); text-align:right; }
@media (max-width:720px){ .alert-when{ text-align:left; } }

/* ============================================================
   CAPITAL PLANNING — the payoff
   ============================================================ */
.cap{ background: var(--ground-2); border-block:1px solid var(--rule-soft); }
.bench{ margin-top:46px; border:1px solid var(--rule-soft); }
.bench-head{
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 108px; gap:16px;
  padding:12px 18px; border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--ink-4); background: rgba(255,255,255,.02);
}
.bench-row{
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 108px; gap:16px;
  padding:15px 18px; border-bottom:1px solid var(--rule-soft); align-items:center;
  background: var(--ground-2);
}
.bench-row:last-child{ border-bottom:0; }
@media (max-width: 820px){
  .bench-head{ display:none; }
  .bench-row{ grid-template-columns: 1fr auto; gap:6px 14px; }
}
.bench-name{ font-size:14.5px; font-weight:500; }
.bench-meta{ font-family:var(--mono); font-size:11px; color: var(--ink-4); margin-top:3px; }
.bar{ height:5px; background: var(--rule); border-radius:3px; overflow:hidden; }
.bar i{ display:block; height:100%; width:0; transition: width 1.1s cubic-bezier(.2,.7,.3,1); }
.bar.hi i{ background: var(--red); }
.bar.mid i{ background: var(--amber); }
.bar.lo i{ background: var(--jade); }
.bench-val{ font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; color: var(--ink-2); }

.rec{
  margin-top:34px; display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background: var(--rule-soft); border:1px solid var(--rule-soft);
}
.rec-cell{ background: var(--ground); padding:24px 22px; }
.rec-cell .rk{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color: var(--jade); margin-bottom:9px; }
.rec-cell h3{ font-size:16px; font-stretch:104%; margin-bottom:8px; }
.rec-cell p{ font-size:14px; color: var(--ink-3); line-height:1.58; }

/* ============================================================
   WORKFLOW TILES
   ============================================================ */
.tiles{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--rule-soft); border:1px solid var(--rule-soft); margin-top:48px; }
.tile{ background: var(--ground); padding:22px 20px 24px; transition: background .2s ease; }
@media (max-width: 900px){ .tiles{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .tiles{ grid-template-columns: 1fr; } }
.tile:hover{ background: var(--panel); }
.tile h3{ font-size:15.5px; font-stretch:104%; margin-bottom:7px; }
.tile p{ font-size:13.5px; color: var(--ink-3); line-height:1.55; }

/* ============================================================
   HARDWARE
   ============================================================ */
.hw-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); align-items:center; margin-top:44px; }
@media (max-width:880px){ .hw-grid{ grid-template-columns:1fr; } }
.specs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.specs .s{
  font-family:var(--mono); font-size:11.5px; color: var(--ink-2);
  border:1px solid var(--rule); border-radius:2px; padding:5px 10px;
  background: rgba(255,255,255,.02);
}
.fam{ display:grid; gap:1px; background: var(--rule-soft); border:1px solid var(--rule-soft); }
.fam-row{ background: var(--ground-2); padding:16px 18px; display:grid; grid-template-columns: 1fr auto; gap:14px; align-items:center; }
.fam-row .fn{ font-family:var(--display); font-weight:700; font-stretch:106%; font-size:15.5px; }
.fam-row .fd{ font-size:13.5px; color: var(--ink-3); margin-top:3px; line-height:1.5; }

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{
  position:relative; overflow:hidden;
  background: linear-gradient(150deg, var(--panel-2), var(--ground) 72%);
  border-top:1px solid var(--rule-soft);
}
.cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(70% 100% at 20% 0%, rgba(232,120,58,.11), transparent 60%);
}
.cta-in{ position:relative; z-index:2; text-align:left; max-width: 780px; }
.cta h2{ font-size: clamp(31px, 4.6vw, 56px); }
.cta p{ margin-top:20px; color: var(--ink-2); font-size:17.5px; max-width:56ch; line-height:1.58; }
.cta-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

footer{ border-top:1px solid var(--rule-soft); background: var(--ground); padding-block: 46px 40px; }
.foot-grid{ display:grid; grid-template-columns: 2.1fr 1fr 1fr 1fr 1fr 1fr; gap:15px; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:26px; } }
.foot-brand{ font-family:var(--display); font-weight:900; font-stretch:118%; font-size:17px; margin-bottom:12px; }
.foot-line{ font-family:var(--mono); font-size:12.5px; color: var(--flame); margin-bottom:14px; letter-spacing:.02em; }
.foot h3{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color: var(--ink-4); margin:0 0 12px;
}
.foot ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.foot li a{ font-size:14px; color: var(--ink-3); text-decoration:none; }
.foot li a:hover{ color: var(--ink); }
.foot-base{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center;
}
.foot-base p{ font-family:var(--mono); font-size:11.5px; color: var(--ink-4); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
  #net{ display:none; }
}

/* ---------- managed-services additions ---------- */
section[id], header[id]{ scroll-margin-top: 86px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background: var(--flame); color:#160A03; font-weight:600;
  padding:10px 16px; border-radius:0 0 3px 0; text-decoration:none;
}
.skip:focus{ left:0; }
.gap-grid.two{ grid-template-columns: 1fr 1fr; }
@media (max-width: 860px){ .gap-grid.two{ grid-template-columns:1fr; } }

.duty{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.duty li{
  font-size:14.5px; color: var(--ink-2); line-height:1.5;
  padding-left:18px; position:relative;
}
.duty li::before{
  content:""; position:absolute; left:0; top:8px; width:7px; height:1px; background: var(--flame-line);
}
.gap-cell.is-yours .duty li::before{ background: rgba(61,191,147,.5); }
.gap-cell.is-yours h3{ color: var(--ink); }
.cell-k{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color: var(--flame); margin-bottom:10px;
}
.gap-cell.is-yours .cell-k{ color: var(--jade); }

.card ul.duty{ margin-top:6px; }
.card ul.duty li{ font-size:13.5px; color: var(--ink-3); }
.card.is-lead{ background: var(--ground-2); position:relative; }
.card.is-lead::before{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%; background: var(--flame);
}
.tier-badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--flame); border:1px solid rgba(232,120,58,.35); background: var(--flame-dim);
  padding:2px 7px; border-radius:2px; align-self:flex-start;
}
.commercial{
  margin-top:34px; border:1px solid var(--rule); border-radius:3px;
  background: rgba(255,255,255,.02); padding: 22px 24px;
  display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 20px 28px;
}
.commercial .ck{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color: var(--ink-4); margin-bottom:7px; }
.commercial p{ font-size:14px; color: var(--ink-2); line-height:1.55; }


/* ============================================================
   ACTONS
   ============================================================ */
.ac-grid{ display:grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(28px,4.5vw,64px); align-items:start; margin-top:44px; }
@media (max-width: 980px){ .ac-grid{ grid-template-columns: minmax(0,1fr); } }
.ac-points{ display:flex; flex-direction:column; gap:24px; }
.ac-point h3{ font-size:17px; font-stretch:104%; margin-bottom:6px; }
.ac-point p{ font-size:15px; color: var(--ink-3); line-height:1.6; max-width:52ch; }
.ac-kpis{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:1px; background: var(--rule-soft); border-bottom:1px solid var(--rule-soft); }
@media (max-width: 560px){ .ac-kpis{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
.ac-kpi{ background: var(--panel); padding:14px 16px 13px; }
.ac-kpi .n{ font-family:var(--mono); font-variant-numeric: tabular-nums; font-size:24px; font-weight:500; line-height:1.1; color: var(--ink); }
.ac-kpi .l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color: var(--ink-4); margin-top:6px; }
.ac-kpi.is-red .n{ color: var(--red); }
.ac-kpi.is-amber .n{ color: var(--amber); }
.ac-sub{ padding:13px 18px 11px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-4); }
.ac-list{ list-style:none; margin:0; padding:0; }
.ac-item{
  display:grid; grid-template-columns: 3px minmax(0,1fr) auto; column-gap:14px; row-gap:8px; align-items:center;
  padding:13px 18px 13px 0; border-top:1px solid var(--rule-soft);
}
.ac-item .stripe{ align-self:stretch; background: var(--ink-4); }
.ac-item.s-red .stripe{ background: var(--red); }
.ac-item.s-amber .stripe{ background: var(--amber); }
.ac-item.s-cyan .stripe{ background: var(--cyan); }
.ac-kind{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-4); margin-bottom:3px; }
.ac-title{ font-size:14.5px; font-weight:500; color: var(--ink); line-height:1.35; }
.ac-meta{ font-family:var(--mono); font-size:11.5px; color: var(--ink-4); margin-top:3px; line-height:1.45; }
.ac-act{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
@media (max-width: 520px){
  .ac-item{ grid-template-columns: 3px minmax(0,1fr); }
  .ac-act{ grid-column: 2; flex-direction:row; flex-wrap:wrap; align-items:center; }
}
.ac-btn{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color: var(--flame); background: transparent; border:1px solid var(--flame-line); border-radius:2px;
  padding:5px 10px; cursor:pointer; transition: background .18s ease, color .18s ease;
}
.ac-btn:hover{ background: var(--flame-dim); color: var(--flame-hot); }
.ac-foot{ padding:12px 18px 14px; border-top:1px solid var(--rule-soft); font-family:var(--mono); font-size:11.5px; color: var(--ink-4); line-height:1.5; }

/* platform tiles: status tags */
.tile h3{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.tile h3 .chip{ font-size:9.5px; padding:2px 6px; }

/* ============================================================
   PAGE-TO-PAGE STABILITY
   Same nav, same scrollbar and a soft cross-fade on every page,
   so switching pages never shifts or shakes the layout.
   ============================================================ */
html{ scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
  @view-transition{ navigation: auto; }
  .nav{ view-transition-name: site-nav; }
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration: .2s; }
}

/* ---------- demo request modal ---------- */
.demo-modal{ width:min(480px,calc(100% - 32px)); padding:0; border:1px solid var(--rule); border-radius:4px; background:var(--panel); color:var(--ink); }
.demo-modal::backdrop{ background:rgba(5,10,16,.72); }
.demo-form{ display:grid; gap:16px; padding:26px; }
.demo-head{ display:flex; align-items:center; justify-content:space-between; }
.demo-head h2{ font-size:24px; }
.demo-close{ width:36px; height:36px; font-size:24px; line-height:1; color:var(--ink-2); background:transparent; border:1px solid var(--rule); border-radius:3px; cursor:pointer; }
.demo-close:hover{ color:var(--ink); border-color:var(--ink-4); }
.demo-form label, .demo-label{ display:grid; gap:7px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.demo-form input, .demo-form textarea{ font:inherit; font-family:var(--body); font-size:15px; letter-spacing:0; text-transform:none; color:var(--ink); background:var(--ground); border:1px solid var(--rule); border-radius:3px; padding:11px 12px; }
.demo-form input:focus, .demo-form textarea:focus{ outline:2px solid var(--flame-hot); outline-offset:1px; }
.demo-form [aria-invalid="true"]{ border-color:var(--red); }
.demo-captcha{ display:grid; gap:7px; }
.demo-status{ min-height:1.4em; font-size:14px; color:var(--ink-2); }
.demo-status.is-error{ color:var(--red); }
.demo-status.is-ok{ color:var(--jade); }
.demo-form .btn{ justify-content:center; }

.btn-dim{ background: #0F1A26; }
.btn-dim:hover{ background: #16283A; }

/* ---------- hero background video ---------- */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.3; pointer-events:none;
}

html {
  scroll-behavior: smooth;
}

#demo {
  scroll-margin-top: 90px;
}
@media (prefers-reduced-motion: reduce){
  .hero-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:1; z-index:0; pointer-events:none;
  }
}

/* ============================================================
   MILANITY — TESTIMONIALS
   Tactile Industrial Telemetry
   ============================================================ */


   .testimonial-slider {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0%;
    max-width: 100%;
    width: 100%;
  }
  
  .testimonial-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  
  .testimonial-track {
    min-width: 0%;
    max-width: 100%;
    display: flex;
    gap: 24px;
  }
  
  .testimonial-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    color: inherit;
  }
  

   .testimonial-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.testimonial-viewport {
  flex: 1;
  overflow: hidden;
  max-width: 100%;
  min-width: 0%;
  width: 100%;

}

.testimonial-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Shows 3 cards on desktop, 2 on tablet, 1 on mobile */
.testimonial-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(122, 143, 163, 0.2);
  border-radius: 10px;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Tight quote mark spacing */
.quote-mark {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 0.5;
  color: var(--flame, #E8783A);
  margin-bottom: 10px;
}

.testimonial-text {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex-grow: 1;
}

.testimonial-role {
  font-weight: 600;
  font-size: 14px;
  color: var(--flame, #E8783A);
  border-top: 1px solid rgba(122, 143, 163, 0.15);
  padding-top: 14px;
}

/* Centered Controls */
.testimonial-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  width: 100%;
}

.slider-count {
  display: inline-flex;
  color:#7A8FA3 ;
  justify-content: center;
  align-items: center;
  min-width: 28px;
  font-size: 9px;
  line-height: 1;
}

.testimonial-arrow {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  background-color: transparent;
  box-shadow: none;
  appearance: none;
  color: var(--muted, #7A8FA3);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}

#testimonial-prev:hover {
  color: var(--flame, #E8783A);
  background: transparent;
  transform: translateX(-2px);
}

#testimonial-next:hover {
  color: var(--flame, #E8783A);
  background: transparent;
  transform: translateX(2px);
}

.testimonial-arrow:focus-visible {
  outline: 1px solid var(--flame, #E8783A);
  outline-offset: 3px;
}

.testimonial-section {
  width: 100%;
  max-width: 1200px;       /* Matches your site's main container width */
  margin: 0 auto;          /* Centers the entire section on the page */
  padding: 60px 20px;      /* Consistent outer spacing */
  box-sizing: border-box;  /* Prevents padding from breaking the 1200px alignment */
  display: flex;
  flex-direction: column;
  align-items: center;     /* Centers all child blocks horizontally */
  
}

/* 1. Header Box: Locks to exact width of the cards below */
.testimonial-header {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 36px;
}

/* 2. Cards Viewport: Locks to exact 100% inner width (1160px) */
.testimonial-viewport {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* 3. Bottom Controls: Locks to exact 100% width and centers arrows + counter */
.testimonial-controls {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}
/* Responsive Breakpoints */
@media (max-width: 992px) {
  .testimonial-card {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (max-width: 640px) {
  .testimonial-card {
    box-sizing: border-box;
    flex: 0 0 100%;
  }
}
  
  

@media (prefers-reduced-motion: reduce){
  .hero-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:1; z-index:0; pointer-events:none;
  }
}

/* Older Safari fallbacks (before Safari 14.1) */
.wrap{
  margin-left:auto; margin-right:auto;
  padding-left:var(--gut); padding-right:var(--gut);
}
.hero::after, .cta::after, #net{
  top:0; right:0; bottom:0; left:0;
}

@supports not (aspect-ratio: 1 / 1){
  .nav-in > * + *{ margin-left:30px; }
  .nav-links a + a{ margin-left:26px; }
  .hero-cta .btn + .btn,
  .cta-btns .btn + .btn{ margin-left:12px; }
  .hero-tag span{ margin-right:26px; margin-bottom:8px; }
}

/*testimonial*/

/* ================= SHARED / DESKTOP (> 768px) ================= */
.testimonial-section .hw-grid {
  grid-template-columns: minmax(0, 1fr);
}

.testimonial-section .rv,
.testimonial-section .rv.in {
  min-width: 0;
  max-width: 100%;
}

.testimonial-slider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

/* Desktop continuous marquee viewport with soft fade edges */
.testimonial-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 7%,
    black 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 7%,
    black 93%,
    transparent 100%
  );
}

.testimonial-track {
  display: flex;
  gap: 24px;
  will-change: transform;
}

/* Desktop card sizing */
.testimonial-card {
  
  flex: 0 0 clamp(300px, 28vw, 360px);
  width: clamp(300px, 28vw, 360px);
  min-width: 0;
  padding: 28px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-arrow {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.testimonial-controls {
  display: none !important;
}

/* ================= MOBILE & TABLET (<= 768px) ================= */
@media (max-width: 768px) {
  .testimonial-slider {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  /* Centered 1-card viewport without edge clipping */
  .testimonial-viewport {
    order: 1;
    flex: 0 0 clamp(275px, 84vw, 350px);
    width: clamp(275px, 84vw, 350px);
    max-width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    touch-action: pan-y;
  }

  /* Strict 3:4 card ratio on mobile */
  .testimonial-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    min-height: unset;
    padding: 24px 20px;
  }

  .testimonial-text {
    font-size: 14.5px;
    line-height: 1.55;
    overflow-wrap: break-word;
  }

  /* Arrows neatly below the card */
  .testimonial-arrow {
    order: 2;
    position: static;
  }
}

/* Hide the short mobile label on desktop */
.nav .lbl-short {
  display: none !important;
}

.nav .lbl-long {
  display: inline !important;
}

/* On mobile (<= 540px): swap them so ONLY "Book review" shows */
@media (max-width: 540px) {
  .nav .lbl-long {
    display: none !important;
  }

  .nav .lbl-short {
    display: inline !important;
  }

  .nav .btn.btn-primary {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    margin-left: auto;
  }

  .nav .brand img {
    height: 28px !important;
    width: auto !important;
  }
}