/* ==========================================================================
   One Industry - oneindustry.org

   One stylesheet for one page. The tokens, type scale, document shell,
   numbered sections, navy band and charcoal footer are the oneindustry.ai
   system, so the parent company and its AI practice read as one family.
   Teal appears only on links, labels and calls to action.

   Every directional property is logical (inline / block), so an Arabic
   edition is a dir="rtl" flip rather than a second stylesheet.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F,
                 U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --charcoal: #1A1C1E;
  --navy: #0F2438;
  --teal: #0E7C7B;
  --teal-deep: #0A5F5E;
  --teal-lit: #17A3A1;
  --paper: #F7F6F3;
  --gray: #5F6772;
  --ink-soft: #3B4046;
  --ink-mid: #2E3338;

  --rule: rgba(15, 36, 56, .16);
  --rule-soft: rgba(15, 36, 56, .09);

  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --step--1: 13px;
  --step-0: 16px;
  --step-1: clamp(16px, 1.5vw, 18.5px);
  --step-3: clamp(24px, 2.7vw, 36px);
  --step-4: clamp(32px, 4.6vw, 60px);
  --label: 11.5px;

  --shell: 1320px;
  --pad: clamp(18px, 4vw, 56px);
  --sec-y: clamp(44px, 5.4vw, 80px);
  --gap-rail: clamp(20px, 3vw, 48px);
  --rail: 230px;
  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-deep); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.028em; line-height: 1.06; }
p { margin: 0; }
p + p { margin-block-start: .9em; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  font-size: var(--step--1);
  font-weight: 600;
}
.skip-link:focus { inset-inline-start: 0; color: #fff; }

/* The page carries visible document margins. */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  border-inline: 1px solid var(--rule-soft);
}
.pad { padding-inline: var(--pad); }

.lbl {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gray);
  line-height: 1.4;
}
.lbl--teal { color: var(--teal); }

/* --------------------------------------------------------------------------
   Meta bar and header
   -------------------------------------------------------------------------- */
.metabar { border-bottom: 1px solid var(--rule); background: var(--paper); }
.metabar__in {
  display: flex;
  gap: 8px 16px;
  justify-content: space-between;
  align-items: center;
  padding-block: 9px;
  flex-wrap: wrap;
}
.metabar .dot {
  width: 5px; height: 5px;
  background: var(--teal);
  display: inline-block;
  margin-inline-end: 8px;
  vertical-align: 1px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 246, 243, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 34px);
  padding-block: 14px;
  min-height: calc(var(--header-h) - 2px);
}

/* The lockup: the gear mark from img/mark.svg, drawn in currentColor, beside
   the name set in the house face. One vector serves both grounds. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--charcoal);
  flex: none;
}
.brand:hover { color: var(--charcoal); }
.brand__mark { width: 27px; height: 27px; }
.brand__name {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
}
.brand--dark,
.brand--dark:hover { color: var(--paper); }


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  padding: 13px 20px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  transition: background .16s, border-color .16s, color .16s;
}
.btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn .arrow { flex: none; }
.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block-start: clamp(22px, 2.4vw, 30px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero__in {
  position: relative;
  padding-block: clamp(56px, 8vw, 120px) clamp(52px, 7vw, 104px);
}
.hero__kicker { margin-block-end: 18px; }
.hero__t {
  font-size: var(--step-4);
  letter-spacing: -.038em;
  line-height: 1.02;
  max-width: 17ch;
}
.hero__d {
  margin-block-start: clamp(18px, 2vw, 26px);
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.45;
  letter-spacing: -.018em;
  color: var(--ink-mid);
  max-width: 44ch;
}
.hero__d b { font-weight: 600; color: var(--charcoal); }

/* Background geometry: navy hairlines at low opacity, as on oneindustry.ai,
   with the gear mark drawn large in outline. */
.geo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.geo > svg:first-child { width: 100%; height: 100%; }
.geo-hair { stroke: var(--navy); stroke-opacity: .11; stroke-width: 1; }
.geo-dot { fill: var(--navy); fill-opacity: .22; }
.geo-gear {
  position: absolute;
  width: clamp(280px, 34vw, 470px);
  height: auto;
  inset-inline-end: clamp(-140px, -4vw, 40px);
  top: 50%;
  translate: 0 -50%;
  color: transparent;            /* the path fills with currentColor ... */
  stroke: var(--navy);           /* ... so only the inherited outline shows */
  stroke-opacity: .16;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  animation: gear-turn 120s linear infinite;
}
@keyframes gear-turn { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .geo-gear { animation: none; }
}
@media (max-width: 720px) {
  .geo-gear { opacity: .55; inset-inline-end: -150px; }
}

/* --------------------------------------------------------------------------
   Numbered sections
   -------------------------------------------------------------------------- */
.sec {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sec-y);
}
.sec__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr);
  gap: var(--gap-rail);
}
.sec__grid > * { min-width: 0; }
.sec__no {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--teal);
  display: block;
  margin-block-end: 9px;
}
.sec__ttl {
  font-size: var(--step-3);
  letter-spacing: -.032em;
  line-height: 1.1;
  hyphens: auto;
  overflow-wrap: break-word;
}
.sec__ttl::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--teal);
  margin-block-start: 18px;
}
.sec__note {
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.5;
  margin-block-start: 14px;
  max-width: 26ch;
}
.lead {
  font-size: clamp(17px, 1.6vw, 20.5px);
  line-height: 1.55;
  letter-spacing: -.016em;
  max-width: 60ch;
  color: var(--ink-mid);
}
.lead b { font-weight: 600; color: var(--charcoal); }
.body {
  margin-block-start: 18px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

.deflist {
  margin: clamp(26px, 3vw, 38px) 0 0;
  border-top: 1px solid var(--rule);
  max-width: 760px;
}
.deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}
.deflist dt {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gray);
  padding-block-start: 3px;
}
.deflist dd { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* The navy band. */
.band-navy { background: var(--navy); color: #fff; border-bottom: 0; }
.band-navy .shell { border-inline-color: rgba(255, 255, 255, .12); }
.band-navy .sec__no { color: var(--teal-lit); }
.band-navy .sec__note { color: rgba(255, 255, 255, .55); }
.band-navy .sec__ttl::after { background: var(--teal-lit); }
.band-navy .lead { color: rgba(255, 255, 255, .82); }
.band-navy .lead b { color: #fff; }
.band-navy .body { color: rgba(255, 255, 255, .66); }
.band-navy .btn { background: var(--teal); border-color: var(--teal); }
.band-navy .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }
.band-navy .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.band-navy .btn--ghost:hover { border-color: #fff; color: #fff; }
.geo--arc { inset-inline-start: auto; width: min(560px, 60%); }
.geo-hair--dark { stroke: #fff; stroke-opacity: .09; }
.geo-dot--dark { fill: #fff; fill-opacity: .25; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--charcoal);
  color: rgba(247, 246, 243, .62);
  padding-block: 48px 34px;
  font-size: var(--step--1);
}
.site-footer .shell { border-inline-color: rgba(247, 246, 243, .1); }
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.foot h2 {
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247, 246, 243, .42);
  margin-block-end: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: rgba(247, 246, 243, .78); }
.foot a:hover { color: var(--teal-lit); }
.foot .brand { margin-block-end: 18px; }
.foot .brand__mark { width: 24px; height: 24px; }
.foot .brand__name { font-size: 16px; }
.foot p { line-height: 1.6; max-width: 40ch; font-size: 12.5px; }
.foot__addr { margin-block-start: 18px; }
.foot__addr .lbl { display: block; color: rgba(247, 246, 243, .42); margin-block-end: 4px; }
.foot p.foot__addr { color: rgba(247, 246, 243, .78); font-size: 13px; }
.foot__dl li { display: grid; gap: 2px; }
.foot__dl span {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247, 246, 243, .4);
}
.legal {
  margin-block-start: 38px;
  padding-block-start: 18px;
  border-top: 1px solid rgba(247, 246, 243, .13);
  display: flex;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(247, 246, 243, .45);
}

/* --------------------------------------------------------------------------
   Responsive. The page body never scrolls sideways.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sec__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sec__note { max-width: 48ch; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot { grid-template-columns: minmax(0, 1fr); }
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .metabar__in > .lbl:last-child { display: none; }
}