/* ==========================================================================
   Best Practice Consulting — shared stylesheet
   Palette : deep navy ground, steel-blue structure, brass as the single accent
   Type    : Space Grotesk (display) / IBM Plex Sans (body) / IBM Plex Mono (data)
   ========================================================================== */

:root{
  --ink:#070B14;
  --ink-2:#0B1120;
  --panel:#101827;
  --line:#1C2740;
  --line-soft:#162034;
  --steel:#5B82B8;
  --brass:#C9A227;
  --brass-lift:#DDB534;
  --paper:#EDEFF3;
  --dim:#B7BECC;
  --fog:#8792A6;

  --plate-top:#151D2D;
  --plate-bot:#0A1020;

  --wrap:1060px;
  --gutter:clamp(20px,5vw,48px);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}

.skip{
  position:absolute; left:-9999px;
  background:var(--brass); color:var(--ink);
  padding:10px 18px; border-radius:0 0 6px 0;
  font-size:13px; font-weight:600; z-index:99;
}
.skip:focus{ left:0; top:0; }

/* ---------- ambient ground ---------- */
.ground{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(91,130,184,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(91,130,184,.05) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 100% 55% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 100% 55% at 50% 0%, #000 25%, transparent 78%);
}

.layer{ position:relative; z-index:1; }

/* ---------- header ---------- */
.site-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:24px 0;
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height:30px; width:auto; }
.brand i{
  display:block; width:1px; height:20px; background:var(--line);
}
.brand span{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fog); white-space:nowrap;
}

.site-nav{
  display:flex; align-items:center; gap:clamp(14px,3vw,26px);
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
}
.site-nav a{
  color:var(--fog); text-decoration:none;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.site-nav a:hover,.site-nav a:focus-visible{ color:var(--paper); border-color:var(--steel); }
.site-nav a[aria-current="page"]{ color:var(--paper); border-color:var(--brass); }

/* portal entry point — a ghost pill, deliberately not the brass CTA */
.site-nav .nav-sep{ width:1px; height:20px; background:var(--line); flex:none; }
.site-nav a.nav-portal{
  padding:8px 14px;
  border:1px solid var(--line); border-radius:6px;
  transition:color .2s,border-color .2s,background .2s;
}
.site-nav a.nav-portal:hover,.site-nav a.nav-portal:focus-visible{
  color:var(--paper); border-color:var(--brass); background:rgba(201,162,39,.06);
}
.site-nav a.nav-portal[aria-current="page"]{ background:rgba(201,162,39,.08); }

/* Phone: header wraps to a second row rather than compressing. Adding nav
   items makes this taller, never broken — and the tagline survives. */
@media (max-width:640px){
  .site-head{ flex-wrap:wrap; gap:0; padding:20px 0 0; }
  .site-head .brand{ padding-bottom:15px; }
  .site-nav{
    order:2; width:100%;
    border-top:1px solid var(--line-soft);
    padding:13px 0 14px;
  }
  .site-nav .nav-sep{ display:none; }
  .site-nav a.nav-portal{ margin-left:auto; }
}

/* ---------- hero with photographic ground ---------- */
.hero{
  position:relative;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  background:url('bg-fiber.jpg') center/cover no-repeat;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(7,11,20,.62), rgba(7,11,20,.90) 72%, var(--ink)),
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(7,11,20,.28), transparent);
}
.hero-inner{ position:relative; z-index:1; }

/* ---------- type ---------- */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--steel); margin:0 0 20px;
}

h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:clamp(2.05rem,5.1vw,3.35rem);
  line-height:1.07; letter-spacing:-.024em;
  margin:0 0 22px; max-width:17ch;
}
h1 .soft{ display:block; color:var(--dim); font-weight:400; }

.lede{
  font-size:clamp(1rem,1.6vw,1.11rem);
  line-height:1.68; color:var(--dim);
  margin:0; max-width:58ch;
}
.lede strong{ color:var(--paper); font-weight:500; }

/* ---------- band + section label ---------- */
.band{ padding:clamp(56px,8vw,86px) 0 0; }
.band-tight{ padding-top:clamp(38px,5vw,54px); }

.band-label{ display:flex; align-items:center; gap:16px; margin:0 0 28px; }
.band-label h2{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--steel); margin:0; white-space:nowrap;
}
.band-label i{ flex:1; height:1px; background:linear-gradient(to right,var(--line),transparent); }

.prose{ max-width:64ch; }
.prose p{ margin:0 0 20px; font-size:1rem; line-height:1.74; color:var(--dim); }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--paper); font-weight:500; }

/* ==========================================================================
   SIGNATURE — equipment nameplate
   ========================================================================== */
.plate{
  position:relative;
  background:linear-gradient(158deg,var(--plate-top),var(--plate-bot));
  border:1px solid #24314A;
  border-radius:4px;
  padding:32px clamp(20px,4vw,38px) 28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 26px 54px -30px rgba(0,0,0,.9);
}
.plate::after{
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(91,130,184,.15); border-radius:2px; pointer-events:none;
}
.rivet{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#5A6982,#161F30 72%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55);
}
.rivet.tl{ top:11px; left:11px; }
.rivet.tr{ top:11px; right:11px; }
.rivet.bl{ bottom:11px; left:11px; }
.rivet.br{ bottom:11px; right:11px; }

.plate-head{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:6px 18px;
  padding-bottom:15px; border-bottom:1px solid rgba(91,130,184,.2);
  font-family:'IBM Plex Mono',monospace;
}
.plate-head strong{
  font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--paper);
}
.plate-head em{
  font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fog);
}

.specs{ margin:0; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.spec{
  display:grid; grid-template-columns:96px 1fr; gap:4px 18px; align-items:baseline;
  padding:13px 0; border-bottom:1px dashed rgba(91,130,184,.14);
  opacity:0; animation:printIn .45s ease-out forwards;
}
.spec:last-of-type{ border-bottom:none; padding-bottom:2px; }
@keyframes printIn{ from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:none;} }

.spec dt{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.spec dd{ margin:0; color:var(--paper); font-weight:500; letter-spacing:.02em; }
.spec .code{ color:var(--brass); }
.spec dd small{
  display:block; margin-top:4px;
  font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; font-weight:300;
  letter-spacing:0; color:var(--fog); line-height:1.5;
}

.plate-foot{
  margin-top:19px; padding-top:14px; border-top:1px solid rgba(91,130,184,.2);
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--fog);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
}

/* ==========================================================================
   TABS — capabilities
   ========================================================================== */
.tabs{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--ink-2); }

.tablist{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom,rgba(255,255,255,.02),transparent);
}
.tablist button{
  flex:1 1 auto; min-width:132px;
  appearance:none; background:none; border:0; cursor:pointer;
  padding:15px 16px 13px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--fog);
  border-bottom:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.tablist button:hover{ color:var(--dim); background:rgba(91,130,184,.05); }
.tablist button[aria-selected="true"]{
  color:var(--paper); border-bottom-color:var(--brass); background:rgba(201,162,39,.05);
}

.tabpanel{ padding:clamp(24px,4vw,38px); }
.tabpanel[hidden]{ display:none; }
.tabpanel h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.2rem,2.4vw,1.5rem); font-weight:600;
  color:var(--paper); margin:0 0 14px; letter-spacing:-.015em;
}
.tabpanel > p{ margin:0 0 22px; font-size:1rem; line-height:1.72; color:var(--dim); max-width:62ch; }

.tick{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.tick li{
  position:relative; padding-left:22px;
  font-size:.93rem; line-height:1.6; color:var(--fog);
}
.tick li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:1px; background:var(--brass);
}

/* ==========================================================================
   CARDS / VALUES
   ========================================================================== */
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.cards li{ background:var(--ink); padding:26px 24px 28px; transition:background .25s; }
.cards li:hover{ background:var(--ink-2); }
.cards h3{
  font-family:'Space Grotesk',sans-serif; font-size:1.02rem; font-weight:600;
  color:var(--paper); margin:0 0 9px; letter-spacing:-.01em;
}
.cards p{ margin:0; font-size:.9rem; line-height:1.62; color:var(--fog); }
.cards .n{
  display:block; font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.18em; color:var(--steel); margin-bottom:11px;
}

/* ---------- pull quote / creed ---------- */
.creed{
  border-left:2px solid var(--brass);
  padding:6px 0 6px 26px; margin:0;
  max-width:60ch;
}
.creed p{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.08rem,2.2vw,1.32rem); font-weight:400; line-height:1.55;
  color:var(--paper); margin:0 0 12px; letter-spacing:-.012em;
}
.creed cite{
  font-family:'IBM Plex Mono',monospace; font-style:normal;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--fog);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--brass); color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:13.5px;
  padding:13px 27px; border-radius:7px; text-decoration:none; border:0; cursor:pointer;
  box-shadow:0 10px 24px -11px rgba(201,162,39,.6);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn:hover,.btn:focus-visible{
  background:var(--brass-lift); transform:translateY(-1px);
  box-shadow:0 13px 28px -11px rgba(201,162,39,.75);
}
.btn-quiet{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.09em;
  color:var(--dim); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:color .2s,border-color .2s;
}
.btn-quiet:hover,.btn-quiet:focus-visible{ color:var(--paper); border-color:var(--brass); }

.cta-row{ margin-top:38px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

/* ---------- status strip ---------- */
.status{
  margin-top:26px; padding-top:18px; border-top:1px dashed var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--fog);
}
.status b{ color:var(--brass); font-weight:500; }
.phases{ list-style:none; margin:0; padding:0; display:flex; gap:15px; flex-wrap:wrap; }
.phases li{ display:flex; align-items:center; gap:7px; color:var(--fog); }
.phases li.done{ color:var(--dim); }
.phases li.now{ color:var(--paper); }
.box{
  width:13px; height:13px; border:1px solid var(--line); border-radius:3px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:9px;
}
.box.done{ background:rgba(91,130,184,.16); border-color:var(--steel); color:var(--steel); }
.box.now{ background:rgba(201,162,39,.14); border-color:var(--brass); }
.box.now i{
  width:5px; height:5px; border-radius:50%; background:var(--brass); display:block;
  animation:pulse 1.7s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.68);} }

.cursor{
  display:inline-block; width:6px; height:13px; background:var(--steel);
  margin-left:3px; vertical-align:middle; animation:blink 1.05s step-end infinite;
}
@keyframes blink{ 50%{opacity:0;} }

/* ---------- footer ---------- */
.site-foot{
  margin-top:clamp(64px,9vw,104px);
  border-top:1px solid var(--line);
  padding:26px 0 36px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px 24px;
  font-size:12px; color:var(--fog);
}
.site-foot a{ color:var(--dim); text-decoration:none; }
.site-foot a:hover,.site-foot a:focus-visible{ color:var(--paper); }
.site-foot .note{ font-size:11.5px; color:#67728A; max-width:52ch; }

a:focus-visible,button:focus-visible{ outline:2px solid var(--steel); outline-offset:3px; }

/* ---------- reveal on scroll ---------- */
.rise{ opacity:0; transform:translateY(14px); transition:opacity .7s ease,transform .7s ease; }
.rise.in{ opacity:1; transform:none; }

@media (max-width:600px){
  .spec{ grid-template-columns:1fr; gap:5px; }
  .tablist button{ min-width:50%; flex:1 1 50%; }
  .status{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .spec{ animation:none; opacity:1; transform:none; }
  .rise{ opacity:1; transform:none; transition:none; }
  .box.now i,.cursor{ animation:none; opacity:1; }
}