/* ==========================================================================
   SGNLFORGE — design tokens
   ========================================================================== */
:root{
  /* Dark ground */
  --ink-900:#0E1113;
  --ink-850:#121619;
  --ink-800:#151A1D;
  --ink-700:#1C2226;
  --line-700:#23292E;
  --line-600:#2E353A;
  --text-100:#ECE9E2;
  --text-300:#C9CDD0;
  --text-400:#B4BBBF;
  --text-500:#8F989E;

  /* Light "paper" bands */
  --paper-100:#EFEBE3;
  --paper-50:#F8F5EF;
  --paper-line:#CFC8BB;
  --paper-text:#15181A;
  --paper-muted:#4A5157;

  /* Brand accent: forge ember */
  --ember:#FF7A2F;
  --ember-hover:#FFA36B;
  --ember-on-paper:#A8420C;
  --on-ember:#111416;

  /* RF department accent: signal teal */
  --rf-ground:#0A1717;
  --rf-card:#0F2020;
  --rf-line:#1F4441;
  --rf-line-strong:#25504C;
  --rf:#4FD1C5;
  --rf-text:#A9C4C1;
  --rf-text-strong:#D2E0DE;
  --rf-on-paper:#1B7A70;

  --radius:0.375rem;
  --radius-btn:0.25rem;
  --radius-lg:0.75rem;
  --shadow-none:none;

  /* Alert accent: exceptions / red-orange (distinct from ember, used sparingly) */
  --alert:#E2523A;
  --alert-bg:#2A1712;

  /* Space scale (rem) */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-10:6rem;
  --space-12:8rem;
  --space-16:10rem;

  --icon-size-md:1.5rem;
  --icon-size-lg:2.5rem;

  --section-pad:clamp(4rem, 6vw, 6rem);
  --bar-header:4.75rem;
  --bar-section:2.75rem;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:auto;
  font-size:clamp(16px, calc(9.6px + 0.446vw), 22px);
}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--text-400);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:0.9375rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p,figure{ margin:0; }
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; }

.container{
  width:100%;
  max-width:80rem;
  margin-inline:auto;
  padding-inline:clamp(3rem, 4vw, 7.5rem);
}

section{ scroll-margin-top:calc(var(--bar-header) + var(--bar-section) + 0.75rem); }

/* ==========================================================================
   Section rhythm primitives
   ========================================================================== */
.section{ padding:var(--space-10) 0; }

.section--statement{ padding:var(--space-12) 0; }
.statement-text{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  letter-spacing:-0.015em;
  font-size:clamp(4rem, 3.2rem + 3vw, 6rem);
  line-height:1.04;
  color:var(--text-100);
  max-width:22ch;
}
.automation-levels-row{
  display:flex;
  gap:var(--space-6);
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:1px solid var(--line-700);
}
.level-chip{
  display:flex;
  align-items:baseline;
  gap:0.625rem;
  font-size:0.9375rem;
  color:var(--text-400);
}
.level-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--ember);
}

.section--split-media{ padding:var(--space-10) 0; }
.split-media-head{ margin-bottom:var(--space-7); max-width:60ch; }

.section--grid{ padding:var(--space-10) 0; }

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.skip-link{
  position:absolute;
  top:-3rem; left:1rem;
  background:var(--ember);
  color:var(--on-ember);
  padding:0.625rem 1rem;
  border-radius:var(--radius-btn);
  z-index:1000;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  transition:top .15s ease;
}
.skip-link:focus{ top:1rem; }

:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
}
.band-paper :focus-visible{ outline-color:var(--ember-on-paper); }
.rf-section :focus-visible{ outline-color:var(--rf); }

/* ==========================================================================
   Typography
   ========================================================================== */
h1{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:4rem;
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--text-100);
}
h2{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:2.875rem;
  line-height:1.06;
  letter-spacing:-0.015em;
  color:var(--text-100);
}
.band-paper h2{ color:var(--paper-text); }
h3{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:1.375rem;
  line-height:1.2;
  color:var(--text-100);
}
.band-paper h3{ color:var(--paper-text); }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  margin:0 0 1rem;
}
.eyebrow-ember,
.eyebrow-paper{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
.eyebrow-ember::before,
.eyebrow-paper::before{
  content:'';
  flex-shrink:0;
  width:0.375rem;
  height:0.375rem;
  background:var(--ember);
}
/* Ember is reserved for primary buttons, the logo mark, key numerals and
   value-section titles — eyebrow labels are muted with a small ember mark. */
.eyebrow-ember{ color:var(--text-500); }
.eyebrow-paper{ color:var(--paper-muted); }
.eyebrow-rf{ color:var(--rf); margin:0; }

.body-lg{ font-size:1.125rem; line-height:1.6; }
.lead{ font-size:1.125rem; line-height:1.6; color:var(--text-400); }

.card-index{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--text-500);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  padding:0 1.5rem;
  border-radius:var(--radius-btn);
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:0.9375rem;
  border:1px solid transparent;
}
.btn-primary{
  background:var(--ember);
  color:var(--on-ember);
}
.btn-primary:hover{ background:var(--ember-hover); }
.btn-outline{
  background:transparent;
  border-color:#3A4248;
  color:var(--text-100);
}
.btn-outline:hover{ border-color:var(--ember); color:var(--ember); }
.btn-rf{
  background:var(--rf);
  color:var(--rf-ground);
}
.btn-rf:hover{ background:var(--rf-text-strong); }
.btn-whatsapp{
  background:transparent;
  border:1px solid #2FA84F;
  color:#3DC463;
}
.btn-whatsapp:hover{ background:#122A18; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:4.75rem;
  background:var(--ink-900);
  border-bottom:1px solid var(--line-700);
  display:flex;
  align-items:center;
}
.site-header.is-scrolled{ border-bottom-color:var(--line-600); }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{ display:flex; align-items:center; gap:0.75rem; min-height:2.75rem; }
.logo-mark{ width:1.875rem; height:1.875rem; }
.logo-mark-smith{ width:3rem; height:3rem; flex-shrink:0; }
[dir="rtl"] .logo-mark-smith{ transform:scaleX(-1); }
.logo-word{
  font-family:'Archivo', sans-serif;
  font-weight:900;
  font-size:1.375rem;
  letter-spacing:0.06em;
  color:var(--text-100);
}
.site-nav{ display:flex; align-items:center; gap:2rem; }
.site-nav a:not(.btn){
  font-size:0.9375rem;
  color:var(--text-300);
  min-height:2.75rem;
  display:inline-flex;
  align-items:center;
}
.site-nav a:not(.btn):hover,
.site-nav a.is-active{ color:var(--text-100); }
.btn-nav{ padding:0 1.25rem; min-height:2.5rem; }

/* ==========================================================================
   Sticky section bar (slides in under the header once past the hero)
   ========================================================================== */
.section-bar{
  position:fixed;
  top:var(--bar-header);
  left:0;
  right:0;
  z-index:95;
  height:var(--bar-section);
  background:var(--ink-900);
  border-bottom:1px solid var(--line-700);
  opacity:0;
  visibility:hidden;
  transform:translateY(-0.5rem);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.section-bar.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.section-bar-inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:1.75rem;
  overflow-x:auto;
}
.section-bar a{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  color:var(--text-500);
  white-space:nowrap;
}
.section-bar a:hover,
.section-bar a.is-active{ color:var(--text-100); }
.section-bar.rf-solutions-page a.is-active,
.section-bar.rf-solutions-page a:hover{ color:var(--rf); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding:2.5rem 0 3rem; }
.hero-inner{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:3rem;
  align-items:start;
}
.hero h1{ margin-bottom:1.25rem; font-size:clamp(2.75rem, 2rem + 2.4vw, 3.5rem); }
.hero .lead{ margin-bottom:1.75rem; max-width:52ch; }
.hero-actions{ display:flex; gap:1rem; margin-bottom:2rem; }

/* Hero entry tiles — "Where do you want to start?" */
.hero-nav-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-500);
  margin-bottom:0.875rem;
}
.hero-tiles{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0.625rem;
}
.hero-tile{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0.25rem;
  min-height:5.5rem;
  padding:0.75rem 0.875rem;
  border:1px solid var(--line-600);
  border-radius:var(--radius);
  background:var(--ink-800);
}
.hero-tile:hover,
.hero-tile:focus-visible{ border-color:var(--ember); }
.hero-tile.is-rf:hover,
.hero-tile.is-rf:focus-visible{ border-color:var(--rf); }
.hero-tile-icon{ width:1.125rem; height:1.125rem; color:var(--ember); flex-shrink:0; }
.hero-tile.is-rf .hero-tile-icon{ color:var(--rf); }
.hero-tile-label{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:0.8125rem;
  line-height:1.2;
  color:var(--text-100);
}
.hero-tile-hint{ font-size:0.75rem; color:var(--text-500); line-height:1.2; }

.hero-diagram{
  background:var(--ink-800);
  border:1px solid var(--line-700);
  border-radius:var(--radius);
  padding:1.75rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
}
.diagram-caption{
  color:var(--text-500);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:1rem;
}
.hero-graphic{ width:100%; height:auto; }
.hg-node{ fill:var(--ink-700); stroke:var(--line-600); stroke-width:1; }
.hg-node-rf{ fill:var(--rf-card); stroke:var(--rf-line-strong); }
.hg-bar{ fill:var(--ember); }
.hg-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  fill:var(--text-300);
  text-anchor:middle;
}
.hg-label-rf{ fill:var(--rf-text-strong); }
.hg-bar-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  font-weight:600;
  fill:var(--on-ember);
  text-anchor:middle;
}
.hg-bar-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size:7px;
  fill:var(--on-ember);
  opacity:0.85;
  text-anchor:middle;
}
.hg-path{ fill:none; stroke:var(--line-600); stroke-width:1; }
.hg-path-rf{ stroke:var(--line-600); }
.hg-path-exception{ stroke:var(--line-600); }
.hg-dot{ fill:var(--text-300); }
.hg-dot-rf{ fill:var(--rf); }
.hg-dot-exception{ fill:var(--ember); }
.hg-dot-static{ display:none; }
.hero-graphic.is-static .hg-dots-animated{ display:none; }
.hero-graphic.is-static .hg-dot-static{ display:block; }
.diagram-dashed{
  border:1px dashed var(--line-600);
  border-radius:var(--radius-btn);
  padding:0.75rem;
  color:var(--text-500);
  text-align:center;
  margin-top:0.25rem;
}

/* ==========================================================================
   Why clients call us — symptom → fix pairs
   ========================================================================== */
.problems{ padding:var(--section-pad) 0; }
.section-head{ max-width:70ch; margin-bottom:var(--space-7); }
.section-head h2{ font-size:2.75rem; margin:1rem 0 1.25rem; }
.problems-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--paper-line);
  border-left:1px solid var(--paper-line);
}
.problem-row{
  display:flex;
  align-items:baseline;
  gap:0.5rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--paper-line);
  border-right:1px solid var(--paper-line);
  overflow:hidden;
}
.problem-row .symptom{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:0.9375rem;
  color:var(--paper-text);
  white-space:nowrap;
}
.problem-row .fix-link{
  color:var(--ember-on-paper);
  font-weight:600;
  font-size:0.875rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.problems-see-all{
  display:inline-block;
  margin-top:1.75rem;
  color:var(--ember-on-paper);
  font-weight:600;
  font-size:0.9375rem;
}
.problems-see-all:hover{ text-decoration:underline; }

/* "See all 17 symptoms" dialog */
#symptoms-dialog{
  border:1px solid var(--line-600);
  border-radius:var(--radius-lg);
  background:var(--ink-800);
  color:var(--text-300);
  padding:2rem;
  width:min(44rem, 90vw);
  max-height:80vh;
  overflow-y:auto;
}
#symptoms-dialog::backdrop{ background:rgba(10,12,13,0.7); }
.symptoms-dialog-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; gap:1rem; }
.symptoms-dialog-head h2{ font-size:1.5rem; }
.symptoms-dialog-close{
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--line-600);
  border-radius:var(--radius-btn);
  width:2.25rem;
  height:2.25rem;
  color:var(--text-300);
}
.symptoms-dialog-close:hover{ border-color:var(--ember); color:var(--ember); }
.symptoms-dialog-list{ display:flex; flex-direction:column; border-top:1px solid var(--line-700); }
.symptoms-dialog-list .symptom-fix-row{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:2rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line-700);
}
.symptoms-dialog-list .symptom{ color:var(--text-100); font-family:'Archivo', sans-serif; font-weight:700; font-size:1rem; }
.symptoms-dialog-list .fix{ color:var(--text-400); font-size:0.875rem; }
.symptoms-dialog-list .fix a{ color:var(--ember); font-weight:600; margin-left:0.375rem; }

/* ==========================================================================
   Services grouped by practice (paper band)
   ========================================================================== */
.band-paper{ background:var(--paper-100); }
.services{ padding:var(--section-pad) 0; }
.services-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:end;
  margin-bottom:2.5rem;
}
.services-intro{
  text-align:right;
  color:var(--paper-muted);
  font-size:1.0625rem;
  max-width:46ch;
  margin-left:auto;
}

/* Services as ARIA tabs: vertical tablist + panel */
.services-tabs{
  display:grid;
  grid-template-columns:20rem 1fr;
  border:1px solid var(--paper-line);
  background:var(--paper-100);
}
.services-tablist{
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--paper-line);
}
.services-tab{
  display:flex;
  align-items:center;
  gap:0.75rem;
  text-align:left;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--paper-line);
  padding:1rem 1.25rem;
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:0.9375rem;
  color:var(--paper-muted);
}
.services-tab-icon{ width:1.25rem; height:1.25rem; flex:none; color:var(--ember-on-paper); }
.services-tab[aria-selected="true"]{ background:var(--paper-50); color:var(--paper-text); box-shadow:inset 3px 0 0 var(--ember); }
.services-tab:hover{ color:var(--paper-text); }
.services-tab.is-rf .services-tab-icon{ color:var(--rf-on-paper); }
.services-tab.is-rf[aria-selected="true"]{ box-shadow:inset 3px 0 0 var(--rf-on-paper); }
.services-tab .pill-new{ margin-left:0.5rem; }
.services-panels{ padding:1.75rem 2rem; min-height:22rem; }
.services-panel-head{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1.5rem;
}
.practice-icon{
  width:var(--icon-size-md);
  height:var(--icon-size-md);
  flex:none;
  color:var(--ember-on-paper);
}
.services-panel-head h3{ font-size:1.375rem; margin-bottom:0.375rem; }
.practice-desc{ color:var(--paper-muted); font-size:0.9375rem; }
.service-rows{ display:flex; flex-direction:column; gap:1rem; }
.service-row{ display:flex; gap:0.75rem; scroll-margin-top:calc(var(--bar-header) + var(--bar-section) + 0.75rem); }
.service-icon{
  width:1.125rem;
  height:1.125rem;
  flex:none;
  margin-top:0.1875rem;
  color:var(--ember-on-paper);
}
.service-row-title{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:0.9375rem;
  color:var(--paper-text);
  margin-bottom:0.125rem;
}
.service-row-line{ color:var(--paper-muted); font-size:0.8125rem; }

/* Statement + automation levels, now living inside the Automation & Software panel */
.statement-text--panel{
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  max-width:none;
  margin-bottom:1.5rem;
}
.services-panel .automation-levels-row{
  margin-top:0;
  padding-top:0;
  border-top:0;
  margin-bottom:1.75rem;
  flex-wrap:wrap;
}

.practice-block-rf{ background:var(--rf-ground); padding:1.75rem 2rem; margin:-1.75rem -2rem; }
.practice-block-rf .practice-icon{ color:var(--rf); }
.practice-block-rf .services-panel-head h3{ color:var(--text-100); }
.practice-block-rf .practice-desc{ color:var(--rf-text); }
.practice-block-rf .services-panel-head{ align-items:center; }
.practice-block-rf .pill-new{ margin-left:0.625rem; }
.practice-block-rf-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:var(--rf);
  font-weight:600;
  font-size:0.9375rem;
  margin-top:0.5rem;
}

/* ==========================================================================
   "See it" media band (paper, .section--split-media)
   ========================================================================== */
.media-band{ padding:var(--section-pad) 0; }
.media-band-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.media-figure{
  border:0;
  background:transparent;
  padding:0;
  cursor:zoom-in;
}
.media-figure img{ width:100%; border-radius:var(--radius); border:1px solid var(--paper-line); }
.media-caption{ margin-top:0.875rem; font-size:0.9375rem; color:var(--paper-text); font-weight:600; }

/* Lightbox for the "See it" strip */
#lightbox-dialog{
  border:0;
  border-radius:var(--radius-lg);
  background:var(--ink-900);
  padding:0.75rem;
  max-width:min(60rem, 90vw);
  max-height:85vh;
}
#lightbox-dialog::backdrop{ background:rgba(10,12,13,0.82); }
#lightbox-dialog img{ display:block; max-width:100%; max-height:75vh; border-radius:var(--radius); }
.lightbox-close{
  position:absolute;
  top:1rem;
  right:1rem;
  background:var(--ink-800);
  border:1px solid var(--line-600);
  border-radius:var(--radius-btn);
  width:2.25rem;
  height:2.25rem;
  color:var(--text-300);
}
.lightbox-close:hover{ border-color:var(--ember); color:var(--ember); }

/* ==========================================================================
   Stock forensics & billing spotlight (dark, split)
   ========================================================================== */
.forensics-spotlight{ padding:var(--section-pad) 0; max-height:56.25rem; }
.forensics-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.forensics-diagram{
  background:var(--ink-800);
  border:1px solid var(--line-700);
  border-radius:var(--radius);
  padding:1.75rem;
}
.forensics-copy h2{ font-size:2.5rem; margin-bottom:1.25rem; }
.forensics-copy p{ margin-bottom:1.25rem; }
.forensics-fee-note{ color:var(--text-500); font-size:0.875rem; border-top:1px solid var(--line-700); padding-top:1.25rem; }

/* ==========================================================================
   Featured use cases (paper)
   ========================================================================== */
.use-cases-featured{ padding:var(--section-pad) 0; }
.use-case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.use-case-empty{
  grid-column:1 / -1;
  border:1px dashed var(--paper-line);
  border-radius:var(--radius);
  padding:3rem;
  text-align:center;
  color:var(--paper-muted);
}
.use-case-card{
  background:var(--paper-50);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.use-case-card.is-rf{ border-color:var(--rf-line-strong); }
.use-case-tags{
  display:flex;
  gap:0.5rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6875rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--paper-muted);
}
.use-case-card h3{ font-size:1.125rem; }
.use-case-card p{ color:var(--paper-muted); font-size:0.875rem; }
.use-case-link{ margin-top:auto; font-size:0.875rem; font-weight:600; color:var(--ember-on-paper); }
.use-case-card.is-rf .use-case-link{ color:var(--rf-on-paper); }
.use-cases-all-link{
  display:inline-block;
  margin-top:var(--space-6);
  font-weight:600;
  font-size:0.9375rem;
  color:var(--ember-on-paper);
}

/* ==========================================================================
   Stack + control — merged "Fits your stack" / "Stays controlled" band (paper)
   ========================================================================== */
.stack-control{ padding:var(--section-pad) 0; }
.stack-control-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
}
.stack-control-col h2{ font-size:1.75rem; margin:0.5rem 0 1.25rem; }
.integration-pills{ display:flex; flex-wrap:wrap; gap:0.75rem; }
.integration-pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  border:1px solid var(--paper-line);
  border-radius:999px;
  padding:0.5rem 1.125rem;
  color:var(--paper-text);
}
.security-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem 1.5rem; }
.security-item{ border-top:2px solid var(--paper-line); padding-top:1rem; }
.security-item h3{ font-size:0.9375rem; margin-bottom:0.375rem; }
.security-item p{ font-size:0.8125rem; color:var(--paper-muted); }
.confirm-flag{
  display:inline-block;
  color:var(--ember);
  font-size:0.75rem;
  font-family:'IBM Plex Mono', monospace;
  margin-top:0.5rem;
}
.content-todo{
  color:var(--ember);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
}
.band-paper .content-todo,
.rf-section .content-todo{ color:var(--ember-on-paper); }
.rf-section .content-todo{ color:var(--rf); }

/* ==========================================================================
   RF Solutions teaser
   ========================================================================== */
.rf-section{
  background:var(--rf-ground);
  border-top:1px solid #1D3533;
  border-bottom:1px solid #1D3533;
  padding:var(--section-pad) 0;
}
.rf-eyebrow-row{ display:flex; align-items:center; gap:0.625rem; margin-bottom:1rem; }
.rf-eyebrow-row svg{ width:1.25rem; height:1.25rem; }
.rf-head{
  max-width:52rem;
  margin-bottom:2.5rem;
}
.rf-head h2{ font-size:2.5rem; color:var(--text-100); margin-bottom:0.75rem; }
.rf-lead{ color:var(--rf-text); font-size:1rem; line-height:1.6; max-width:60ch; }

.rf-flow{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  gap:1rem;
  margin-bottom:2.5rem;
}
.rf-pulse{
  position:absolute;
  top:2.375rem;
  left:0;
  width:0.625rem; height:0.625rem;
  border-radius:50%;
  background:var(--rf);
  box-shadow:0 0 8px var(--rf);
  animation:rf-pulse-travel 3s linear infinite;
}
@keyframes rf-pulse-travel{
  0%{ left:0; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ left:calc(100% - 0.625rem); opacity:0; }
}
.rf-flow-tile{
  background:var(--rf-card);
  border:1px solid var(--rf-line);
  border-radius:var(--radius);
  padding:1.25rem 1rem;
}
.flow-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--rf);
  margin-bottom:0.625rem;
}
.rf-flow-tile h3{ color:var(--text-100); font-size:1.125rem; margin-bottom:0.5rem; }
.rf-flow-tile p{ color:var(--rf-text); font-size:0.875rem; }
.rf-chevron{
  width:1rem;
  height:1rem;
  margin-top:2.5rem;
  border-top:2px solid var(--rf-line-strong);
  border-right:2px solid var(--rf-line-strong);
  transform:rotate(45deg);
}

.rf-geofence-placeholder{
  border:1px dashed var(--rf-line-strong);
  border-radius:var(--radius);
  padding:3rem 1.5rem;
  text-align:center;
  color:var(--rf-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  margin-bottom:2.5rem;
}

.rf-closing{
  display:flex;
  align-items:center;
  justify-content:center;
}
.rf-closing-actions{ display:flex; gap:1rem; flex-shrink:0; }
.rf-section .btn-outline{ border-color:#2F6A64; color:var(--rf-text-strong); }
.rf-section .btn-outline:hover{ border-color:var(--rf); color:var(--rf); }

/* ==========================================================================
   Engagement model
   ========================================================================== */
.engagement{ background:var(--ink-850); padding:var(--section-pad) 0; }
.engagement-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:end;
  margin-bottom:3.5rem;
}
.engagement-intro{ color:var(--text-400); font-size:1.0625rem; }
.engagement-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1.25rem;
}
.engagement-line{
  position:absolute;
  top:1.25rem;
  left:0;
  right:0;
  height:1px;
  background:var(--ember);
  z-index:0;
}
.engagement-card{ position:relative; z-index:1; background:var(--ink-850); padding-top:0; cursor:default; }
.engagement-num{
  display:block;
  font-family:'Archivo', sans-serif;
  font-weight:900;
  font-size:2.5rem;
  color:var(--ember);
  background:var(--ink-850);
  margin-bottom:1rem;
}
.engagement-card h3{ font-size:1.1875rem; margin-bottom:0; }
.engagement-active-desc{
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line-700);
  color:var(--text-400);
  font-size:0.9375rem;
  min-height:1.5em;
}

/* Value strip — merged under the engagement timeline */
.value-row{
  display:flex;
  flex-wrap:wrap;
  gap:2.5rem;
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line-700);
}
.value-row-item{ display:flex; align-items:baseline; gap:0.5rem; }
.value-row-item h3{ font-family:'Archivo', sans-serif; font-weight:800; font-size:1.125rem; color:var(--ember); }
.value-row-item p{ font-size:0.875rem; color:var(--text-400); }

.pill-new{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6875rem;
  background:var(--rf-ground);
  color:var(--rf);
  padding:0.1875rem 0.5rem;
  border-radius:999px;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ padding:var(--section-pad) 0; }
.contact-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}
.contact-copy h2{ font-size:3.5rem; margin:1rem 0 1.25rem; }
.contact-whatsapp-row{ margin-top:1.5rem; }
.contact-form-card{
  background:var(--ink-800);
  border:1px solid var(--line-700);
  border-radius:var(--radius);
  padding:2rem;
}
.form-row{ margin-bottom:1.25rem; }
.form-row label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  color:var(--text-300);
  margin-bottom:0.5rem;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  background:var(--ink-700);
  border:1px solid var(--line-600);
  border-radius:var(--radius-btn);
  color:var(--text-100);
  padding:0.75rem 0.875rem;
  min-height:2.75rem;
}
.form-row textarea{ min-height:6.25rem; resize:vertical; }
.form-row-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  color:var(--text-300);
  margin-bottom:0.5rem;
}
.radio-group{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.radio-option{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:0.875rem;
  color:var(--text-300);
  min-height:auto;
}
.radio-option input{ width:auto; min-height:0; accent-color:var(--ember); }
.field-error{
  color:var(--ember);
  font-size:0.8125rem;
  margin-top:0.375rem;
  min-height:1em;
}
.field-error:empty{ display:none; }
.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea{ border-color:var(--ember); }
.btn-submit{ width:100%; margin-top:0.25rem; }
.contact-alt{
  text-align:center;
  margin-top:1rem;
  font-size:0.875rem;
  color:var(--text-500);
}
.contact-alt a{ color:var(--text-100); text-decoration:underline; }
.form-success p{
  color:var(--text-100);
  font-size:1.125rem;
  text-align:center;
  padding:2.5rem 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--ink-900);
  border-top:1px solid var(--line-700);
  padding:var(--space-8) 0 var(--space-6);
}
.footer-inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:var(--space-6);
}
.footer-col h3{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-500);
  margin-bottom:var(--space-4);
  font-weight:500;
}
.footer-logo{ width:2rem; height:2rem; margin-bottom:var(--space-3); }
.footer-brand .logo-word{ display:block; margin-bottom:var(--space-3); }
.footer-brand p{ color:var(--text-500); font-size:0.875rem; max-width:32ch; margin-bottom:0.5rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:0.625rem; }
.footer-col a{ color:var(--text-300); font-size:0.875rem; }
.footer-col a:hover{ color:var(--text-100); }
.footer-col p{ color:var(--text-500); font-size:0.875rem; margin-bottom:0.5rem; }
.footer-lang{ display:flex; align-items:center; gap:0.5rem; }
.footer-lang a{ color:var(--text-300); font-size:0.875rem; }
.footer-lang a.is-active{ color:var(--text-100); font-weight:600; }
.footer-lang-sep{ color:var(--text-500); }
.footer-social{ display:flex; align-items:center; gap:0.5rem; color:var(--text-300); font-size:0.875rem; }
.footer-social svg{ width:1rem; height:1rem; flex-shrink:0; }
.footer-bottom{
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid var(--line-700);
  display:flex;
  justify-content:space-between;
  color:var(--text-500);
  font-size:0.8125rem;
}

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.whatsapp-float{
  position:fixed;
  right:var(--space-6);
  bottom:var(--space-6);
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.25rem;
  height:3.25rem;
  border-radius:50%;
  background:#25D366;
  color:#0B3B1E;
  box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.35);
}
.whatsapp-float:hover{ background:#3DE377; }
.whatsapp-float svg{ width:1.625rem; height:1.625rem; }

/* ==========================================================================
   Icons
   ========================================================================== */
.icon{
  width:var(--icon-size-md);
  height:var(--icon-size-md);
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
}

.section--split-media.media-first .split-media{ order:-1; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(0.75rem);
  transition:opacity .3s ease-out, transform .3s ease-out;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .rf-pulse{ display:none; }
}

/* ==========================================================================
   Generic page hero (RF Solutions / About / Use Cases library)
   ========================================================================== */
.page-hero{ padding:4rem 0 3rem; }
.page-hero .container{ max-width:56rem; }
.page-hero h1{ margin-bottom:1.25rem; }
.page-hero .lead{ max-width:56ch; }
.page-hero-rf{ background:var(--rf-ground); border-bottom:1px solid #1D3533; }
.page-hero-rf h1{ color:var(--text-100); }
.page-hero-rf .lead{ color:var(--rf-text); }

/* ==========================================================================
   RF Solutions page — geofence map hero visual
   ========================================================================== */
.geofence-wrap{
  margin-top:3rem;
  background:var(--rf-card);
  border:1px solid var(--rf-line);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  position:relative;
}
.geofence-map{ width:100%; height:auto; display:block; }
.geo-bg{ fill:#081212; }
.geo-grid{ stroke:#163030; stroke-width:1; }
.geo-ring{ fill:none; stroke:var(--rf); stroke-width:1.25; stroke-dasharray:4 4; opacity:0.7; }
.geo-ring-label{ font-family:'IBM Plex Mono', monospace; font-size:8px; fill:var(--rf-text-strong); text-anchor:middle; }
.geo-road{ stroke:#1F4441; stroke-width:2; fill:none; }
.geo-vehicle{ fill:var(--rf); }
.geo-vehicle-alert{ fill:var(--alert); }
.geofence-toasts{
  position:absolute;
  top:1.75rem;
  right:1.75rem;
  display:flex;
  flex-direction:column;
  gap:0.625rem;
  max-width:16rem;
}
.geofence-toast{
  background:var(--ink-900);
  border:1px solid var(--rf-line-strong);
  border-radius:var(--radius-btn);
  padding:0.625rem 0.875rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--rf-text-strong);
  opacity:0;
  transform:translateY(-0.375rem);
  transition:opacity .35s ease, transform .35s ease;
}
.geofence-toast.is-visible{ opacity:1; transform:translateY(0); }
.geofence-toast.is-alert{ border-color:var(--alert); color:#F2A896; }
.geofence-caption{
  margin-top:1.25rem;
  color:var(--rf-text);
  font-size:0.8125rem;
  font-family:'IBM Plex Mono', monospace;
  text-align:center;
}

/* ==========================================================================
   RF hero data band — map + attendance table side by side
   ========================================================================== */
.rf-hero-data{ padding:var(--section-pad) 0; background:var(--rf-ground); border-bottom:1px solid #1D3533; }
.rf-hero-data-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:start; }
.rf-hero-data-col .eyebrow{ margin-bottom:0.75rem; }
.rf-hero-data-col h2{ color:var(--text-100); font-size:1.375rem; margin-bottom:1rem; }
.rf-hero-data .geofence-wrap{ margin-top:0; }
.attendance-card{ background:var(--paper-50); border:1px solid var(--paper-line); border-radius:var(--radius); padding:1.25rem; }

/* ==========================================================================
   RF capabilities as tabs (RF-01–06)
   ========================================================================== */
.rf-capabilities{ padding:var(--section-pad) 0; background:var(--rf-ground); }
.rf-capability-tabs{
  display:grid;
  grid-template-columns:16rem 1fr;
  border:1px solid var(--rf-line);
  background:var(--rf-card);
}
.rf-capability-tablist{
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--rf-line);
}
.rf-capability-tab{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.25rem;
  text-align:left;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rf-line);
  padding:1rem 1.25rem;
}
.rf-capability-tab-index{ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--rf); }
.rf-capability-tab-title{ font-family:'Archivo', sans-serif; font-weight:700; font-size:0.9375rem; color:var(--rf-text-strong); }
.rf-capability-tab[aria-selected="true"]{ background:var(--rf-ground); box-shadow:inset 3px 0 0 var(--rf); }
.rf-capability-tab[aria-selected="true"] .rf-capability-tab-title{ color:var(--text-100); }
.rf-capability-panels{ padding:2rem; }
.rf-capability-panel{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.rf-capability-index{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  color:var(--rf);
  margin-bottom:0.75rem;
}
.rf-capability-copy h3{ color:var(--text-100); font-size:1.5rem; margin-bottom:1rem; }
.rf-capability-copy p{ color:var(--rf-text); font-size:1rem; }
.rf-capability-media{
  aspect-ratio:4/3;
  border:1px dashed var(--rf-line-strong);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  text-align:center;
}
.rf-capability-media p{ color:var(--rf-text); font-size:0.8125rem; font-family:'IBM Plex Mono', monospace; line-height:1.5; }

/* ==========================================================================
   Attendance reconciliation table (used inside .attendance-card)
   ========================================================================== */
.attendance-table{ width:100%; border-collapse:collapse; }
.attendance-table th,
.attendance-table td{
  text-align:left;
  padding:0.875rem 1rem;
  border-bottom:1px solid var(--paper-line);
  font-size:0.875rem;
  color:var(--paper-text);
}
.attendance-table th{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--paper-muted);
  font-weight:500;
}
.attendance-table td.is-variance{ color:var(--ember-on-paper); font-weight:600; }
.attendance-caption{ margin-top:1rem; color:var(--paper-muted); font-size:0.8125rem; font-family:'IBM Plex Mono', monospace; }

/* ==========================================================================
   "Works with your hardware" band
   ========================================================================== */
.hardware-band{ padding:var(--section-pad) 0; background:var(--rf-ground); text-align:center; }
.hardware-band h2{ color:var(--text-100); max-width:44ch; margin:0 auto 0.75rem; }
.hardware-band p.body-lg{ color:var(--rf-text); max-width:52ch; margin:0 auto 2rem; }
.hardware-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; }
.hardware-pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  border:1px solid var(--rf-line-strong);
  border-radius:999px;
  padding:0.5rem 1.125rem;
  color:var(--rf-text-strong);
}

/* ==========================================================================
   RF use cases (teal) + final CTA
   ========================================================================== */
.rf-use-cases{ padding:var(--section-pad) 0; }
.rf-cta-band{
  padding:var(--section-pad) 0;
  background:var(--rf-ground);
  border-top:1px solid #1D3533;
  text-align:center;
}
.rf-cta-band h2{ color:var(--text-100); max-width:36ch; margin:0 auto 1.5rem; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-intro{ padding:4rem 0 3rem; }
.about-intro .container{ max-width:56rem; }
.about-intro h1{ margin-bottom:1.25rem; }
.about-intro .lead{ max-width:60ch; margin-bottom:1.25rem; }
.about-position{ font-size:1.0625rem; color:var(--text-300); max-width:60ch; }

.leadership{ padding:var(--section-pad) 0; }
.leadership-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.leadership-card{
  background:var(--paper-50);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  padding:1.5rem;
}
.leadership-photo{
  aspect-ratio:1;
  border:1px dashed var(--paper-line);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  margin-bottom:1.25rem;
}
.leadership-photo p{ color:var(--paper-muted); font-size:0.75rem; font-family:'IBM Plex Mono', monospace; line-height:1.5; }
.leadership-card h3{ font-size:1.125rem; margin-bottom:0.25rem; }
.leadership-role{ font-family:'IBM Plex Mono', monospace; font-size:0.8125rem; color:var(--ember-on-paper); margin-bottom:0.75rem; }
.leadership-bio{ color:var(--paper-muted); font-size:0.875rem; margin-bottom:1rem; }
.leadership-linkedin{ display:inline-flex; align-items:center; gap:0.375rem; font-size:0.8125rem; font-weight:600; color:var(--paper-text); }
.leadership-linkedin svg{ width:1rem; height:1rem; }

.company-details{ padding:var(--section-pad) 0; }
.company-details-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.company-detail-row{ padding:1rem 0; border-bottom:1px solid var(--line-700); display:flex; justify-content:space-between; gap:1rem; }
.company-detail-label{ font-family:'IBM Plex Mono', monospace; font-size:0.8125rem; color:var(--text-500); }
.company-detail-value{ color:var(--text-100); font-size:0.9375rem; text-align:right; }
.company-map{
  border:1px solid var(--line-700);
  border-radius:var(--radius);
  background:var(--ink-800);
  padding:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
}

.credentials{ padding:0 0 var(--section-pad); }
.credentials[hidden]{ display:none; }
.credentials-row{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.credential-pill{
  border:1px solid var(--line-700);
  border-radius:var(--radius-btn);
  padding:0.875rem 1.5rem;
  font-size:0.875rem;
  color:var(--text-300);
}

/* Capability statement — merged inline into the company-details band */
.capability-inline{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line-700);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.capability-inline p{ color:var(--text-400); font-size:0.9375rem; max-width:44ch; }
.btn-download svg{ width:1.125rem; height:1.125rem; margin-right:0.5rem; }

/* ==========================================================================
   Use Cases library
   ========================================================================== */
.use-cases-filter-bar{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
  padding:1.5rem 0;
  border-top:1px solid var(--line-700);
  border-bottom:1px solid var(--line-700);
  margin-bottom:3rem;
}
.filter-field{ display:flex; flex-direction:column; gap:0.375rem; }
.filter-field label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--text-500);
}
.filter-field select,
.filter-field input{
  background:var(--ink-800);
  border:1px solid var(--line-600);
  border-radius:var(--radius-btn);
  color:var(--text-100);
  padding:0.5rem 0.75rem;
  min-height:2.5rem;
  font-size:0.875rem;
}
.filter-field-search{ flex:1; min-width:14rem; }
.use-cases-library{ padding:2.5rem 0 6rem; }
.use-cases-count{ color:var(--text-500); font-size:0.875rem; margin-bottom:1.5rem; }
.use-case-grid.on-dark .use-case-card{ background:var(--ink-800); border-color:var(--line-700); }
.use-case-grid.on-dark .use-case-card h3{ color:var(--text-100); }
.use-case-grid.on-dark .use-case-card p{ color:var(--text-400); }
.use-case-grid.on-dark .use-case-card .use-case-link{ color:var(--ember); }
.use-case-grid.on-dark .use-case-card.is-rf .use-case-link{ color:var(--rf); }

/* ==========================================================================
   Single use case page
   ========================================================================== */
.case-hero{ padding:6.5rem 0 3rem; }
.case-hero .container{ max-width:56rem; }
.case-hero-tags{
  display:flex;
  gap:0.75rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-500);
  margin-bottom:1rem;
}
.case-hero h1{ margin-bottom:1rem; }
.case-client-label{ color:var(--text-400); font-size:1rem; }
.case-body{ padding:0 0 5rem; }
.case-body .container{ max-width:56rem; display:flex; flex-direction:column; gap:3rem; }
.case-section h2{ font-size:1.75rem; margin-bottom:1rem; }
.case-section .rich-text p{ margin-bottom:1rem; }
.case-section .rich-text ul{ list-style:disc; padding-left:1.5rem; margin-bottom:1rem; }
.case-section .rich-text li{ margin-bottom:0.375rem; }
.case-section .rich-text a{ color:var(--ember); text-decoration:underline; }
.what-we-built-list{ display:flex; flex-direction:column; gap:0.75rem; }
.what-we-built-list li{ padding-left:1.25rem; position:relative; }
.what-we-built-list li::before{ content:'→'; position:absolute; left:0; color:var(--ember); }
.results-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:1.25rem; }
.result-card{ background:var(--ink-800); border:1px solid var(--line-700); border-radius:var(--radius); padding:1.25rem; }
.result-value{ font-family:'Archivo', sans-serif; font-weight:800; font-size:1.5rem; color:var(--ember); margin-bottom:0.375rem; }
.result-label{ font-size:0.875rem; color:var(--text-400); }
.result-estimate{
  display:inline-block;
  margin-top:0.5rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6875rem;
  color:var(--text-500);
  text-transform:uppercase;
}
.case-quote{ border-left:3px solid var(--ember); padding-left:1.5rem; }
.case-quote p{ font-size:1.25rem; color:var(--text-100); margin-bottom:0.75rem; }
.case-quote cite{ font-style:normal; color:var(--text-500); font-size:0.875rem; }
.case-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.case-related{ padding:5rem 0; background:var(--ink-850); }
.case-cta{ padding:5rem 0; text-align:center; }
.lang-fallback-tag{
  display:inline-block;
  margin-bottom:1rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6875rem;
  color:var(--text-500);
  border:1px solid var(--line-600);
  border-radius:999px;
  padding:0.25rem 0.75rem;
}

/* ==========================================================================
   Standalone use-case recorder (/admin/recorder.html)
   ========================================================================== */
.recorder-page{ padding:4rem 0 6rem; }
.recorder-page .container{ max-width:56rem; }
.recorder-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.recorder-form .form-row{ margin-bottom:1rem; }
.recorder-form textarea{ min-height:5rem; }
.recorder-preview{
  position:sticky;
  top:6rem;
  background:var(--ink-800);
  border:1px solid var(--line-700);
  border-radius:var(--radius);
  padding:1.5rem;
}
.recorder-preview h3{ font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-500); margin-bottom:1rem; font-family:'IBM Plex Mono', monospace; }
.recorder-download{ margin-top:1.5rem; width:100%; }
.recorder-note{ color:var(--text-500); font-size:0.8125rem; margin-top:1rem; }

/* ==========================================================================
   Arabic / RTL support
   Grid and flex layouts with `row`/fr tracks mirror automatically once
   <html dir="rtl"> sets the CSS `direction` property — these overrides only
   cover the physical (left/right) declarations that don't.
   ========================================================================== */
html[dir="rtl"] body{ font-family:'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; }
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] .statement-text,
html[dir="rtl"] .logo-word{ font-family:'Noto Kufi Arabic', 'Archivo', sans-serif; }

[dir="rtl"] .skip-link{ left:auto; right:1rem; }
[dir="rtl"] .fix a{ margin-left:0; margin-right:0.375rem; }
[dir="rtl"] .services-intro{ text-align:left; margin-left:0; margin-right:auto; }
[dir="rtl"] .practice-block-rf .pill-new{ margin-left:0; margin-right:0.625rem; }
[dir="rtl"] .rf-pulse{ left:auto; right:0; animation-name:rf-pulse-travel-rtl; }
@keyframes rf-pulse-travel-rtl{
  0%{ right:0; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ right:calc(100% - 0.625rem); opacity:0; }
}
[dir="rtl"] .rf-chevron{ transform:rotate(-135deg); }
[dir="rtl"] .whatsapp-float{ right:auto; left:var(--space-6); }
[dir="rtl"] .geofence-toasts{ right:auto; left:1.75rem; }
[dir="rtl"] .company-detail-row{ flex-direction:row-reverse; }
[dir="rtl"] .company-detail-value{ text-align:left; }
[dir="rtl"] .btn-download svg{ margin-right:0; margin-left:0.5rem; }
[dir="rtl"] .case-section .rich-text ul{ padding-left:0; padding-right:1.5rem; }
[dir="rtl"] .what-we-built-list li{ padding-left:0; padding-right:1.25rem; }
[dir="rtl"] .what-we-built-list li::before{ content:'←'; left:auto; right:0; }
[dir="rtl"] .case-quote{ border-left:none; border-right:3px solid var(--ember); padding-left:0; padding-right:1.5rem; }
[dir="rtl"] .footer-lang-sep{ display:inline-block; }

/* RTL — 2026 restructure additions */
[dir="rtl"] .services-tablist{ border-right:0; border-left:1px solid var(--paper-line); }
[dir="rtl"] .services-tab[aria-selected="true"]{ box-shadow:inset -3px 0 0 var(--ember); }
[dir="rtl"] .services-tab.is-rf[aria-selected="true"]{ box-shadow:inset -3px 0 0 var(--rf-on-paper); }
[dir="rtl"] .services-tab .pill-new{ margin-left:0; margin-right:0.5rem; }
[dir="rtl"] .rf-capability-tablist{ border-right:0; border-left:1px solid var(--rf-line); }
[dir="rtl"] .rf-capability-tab[aria-selected="true"]{ box-shadow:inset -3px 0 0 var(--rf); }
[dir="rtl"] .problems-grid{ border-left:0; border-right:1px solid var(--paper-line); }
[dir="rtl"] .problem-row{ border-right:0; border-left:1px solid var(--paper-line); }
[dir="rtl"] .lightbox-close{ right:auto; left:1rem; }
[dir="rtl"] .symptoms-dialog-list .fix a{ margin-left:0; margin-right:0.375rem; }
[dir="rtl"] .hero-tile-icon,
[dir="rtl"] .rf-capability-tab-index{ direction:ltr; }

/* ==========================================================================
   Hide-until-filled (company.json driven) — [hidden] must win over any
   display:flex/grid set by a component class, whatever element it lands on.
   ========================================================================== */
[hidden]{ display:none !important; }

/* ==========================================================================
   RF capability panels — text-only fallback (no media file on disk yet)
   ========================================================================== */
.rf-capability-panel.is-text-only{ grid-template-columns:1fr; max-width:36rem; }
.rf-capability-icon{
  width:2.25rem;
  height:2.25rem;
  color:var(--rf);
  margin-bottom:1rem;
}
.rf-capability-panel:not(.is-text-only) .rf-capability-icon{ display:none; }

/* ==========================================================================
   Footer legal links (Privacy / Terms, next to the copyright line)
   ========================================================================== */
.footer-bottom .footer-legal-links{ margin-inline-start:0.5rem; }
.footer-bottom .footer-legal-links a{ color:var(--text-500); text-decoration:underline; }
.footer-bottom .footer-legal-links a:hover{ color:var(--text-300); }

/* ==========================================================================
   Contact form — consent checkbox + honeypot
   ========================================================================== */
.form-consent{
  display:flex;
  align-items:flex-start;
  gap:0.625rem;
  margin-bottom:1.25rem;
  font-size:0.8125rem;
  color:var(--text-500);
}
.form-consent input{ width:auto; min-height:0; margin-top:0.1875rem; accent-color:var(--ember); }
.form-consent a{ color:var(--text-300); text-decoration:underline; }
.form-honeypot-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-fallback{
  border:1px solid var(--ember);
  border-radius:var(--radius);
  padding:1.25rem;
  margin-bottom:1.25rem;
  font-size:0.875rem;
  color:var(--text-100);
}
.form-error-banner{ display:none; }
.form-error-banner.is-visible{ display:block; }
.form-error-banner a{ color:var(--ember); text-decoration:underline; }
.form-fallback-title{ font-weight:600; margin:0 0 0.75rem; }
.form-fallback-textarea{
  width:100%;
  background:var(--ink-700);
  border:1px solid var(--line-600);
  border-radius:var(--radius-btn);
  color:var(--text-100);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8125rem;
  padding:0.75rem 0.875rem;
  resize:vertical;
  margin-bottom:0.75rem;
}
.form-fallback-actions{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:0.875rem;
}
.form-fallback-actions .btn{ min-height:2.25rem; padding:0 1rem; font-size:0.8125rem; }
.form-fallback-copied{ color:var(--text-300); font-size:0.8125rem; }
.form-fallback-links{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.75rem; }
.form-fallback-address{ user-select:all; color:var(--text-300); }
.form-fallback-links .btn{ min-height:2.25rem; padding:0 1rem; font-size:0.8125rem; }

/* ==========================================================================
   Legal pages (Privacy / Terms) + status pages (404 / thank-you)
   ========================================================================== */
.legal-content{ padding:1rem 0 6rem; }
.legal-content .container{ max-width:52rem; }
.legal-content h2{ font-size:1.375rem; margin:2.5rem 0 0.875rem; }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{ margin-bottom:1rem; color:var(--text-300); }
.legal-content ul{ list-style:disc; padding-left:1.5rem; margin-bottom:1rem; color:var(--text-300); }
.legal-content li{ margin-bottom:0.375rem; }
.legal-content a{ color:var(--ember); text-decoration:underline; }
.legal-updated{ color:var(--text-500); font-size:0.875rem; font-family:'IBM Plex Mono', monospace; margin-bottom:2rem; }
[dir="rtl"] .legal-content ul{ padding-left:0; padding-right:1.5rem; }

.status-page{ padding:9rem 0; text-align:center; }
.status-page .container{ max-width:36rem; }
.status-page h1{ margin-bottom:1rem; }
.status-page p{ margin-bottom:2rem; }
.status-page .hero-actions{ justify-content:center; }

.company-detail-fallback{ color:var(--text-300); font-size:0.9375rem; padding:1rem 0; }

/* ==========================================================================
   Responsive layout
   The site previously had no breakpoints and a hard `min-width:1200px`
   floor on <body>, so it could never reflow below a fixed desktop width.
   These breakpoints collapse the main multi-column sections that are
   shared across pages via this single stylesheet.
   ========================================================================== */
@media (max-width: 1100px){
  .container{ padding-inline:clamp(1.5rem, 5vw, 3rem); }

  .hero-inner{ grid-template-columns:1fr; }
  .hero-diagram{ margin-top:var(--space-6); }
  .hero-tiles{ grid-template-columns:repeat(3, 1fr); }

  .problems-grid{ grid-template-columns:repeat(2, 1fr); }

  .services-head{ grid-template-columns:1fr; gap:1.5rem; }
  .services-intro{ text-align:left; margin-left:0; }
  .services-tabs{ grid-template-columns:1fr; }
  .services-tablist{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--paper-line); }
  .services-tab{ border-bottom:0; }

  .rf-hero-data-grid,
  .rf-capability-panel,
  .company-details-grid,
  .recorder-grid{ grid-template-columns:1fr; gap:2rem; }

  .footer-inner{ grid-template-columns:1fr 1fr; gap:var(--space-6) var(--space-5); }
}

@media (max-width: 720px){
  .site-nav{ gap:1.25rem; }
  .site-nav a:not(.btn){ font-size:0.875rem; }

  .hero h1{ font-size:clamp(2.25rem, 1.6rem + 3vw, 2.75rem); }
  .hero-tiles{ grid-template-columns:repeat(2, 1fr); }

  .problems-grid,
  .use-case-grid,
  .case-gallery,
  .security-grid,
  .leadership-grid{ grid-template-columns:1fr; }

  .footer-inner{ grid-template-columns:1fr; }
}