/* =========================================================
   Rouya Tech — مؤسسة الرؤية الثابتة لتكنولوجيا المعلومات
   Stylesheet
   ---------------------------------------------------------
   Sections:
     1.  Design tokens
     2.  Reset & base
     3.  Layout helpers
     4.  Buttons
     5.  Header & navigation
     6.  Hero
     7.  Trust strip
     8.  Sections & cards
     9.  Why Rouya
     10. Process steps
     11. Contact / CTA
     12. Footer
     13. Responsive
   ========================================================= */


/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand */
  --navy-900: #071729;
  --navy-800: #0b2340;
  --navy-700: #123258;
  --navy-600: #1c4674;

  --teal-500: #17a398;
  --teal-600: #128a80;
  --teal-100: #e0f5f2;

  /* Warning accent — used only where a live penalty is being flagged */
  --amber: #e9a33c;


  /* Neutrals */
  --ink:       #0f1e2e;
  --ink-soft:  #47586b;
  --line:      #e3e9ef;
  --surface:   #ffffff;
  --surface-2: #f5f8fb;

  /* Type */
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Space & shape */
  --radius:    14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(7, 23, 41, .07);
  --shadow-md: 0 10px 30px rgba(7, 23, 41, .09);
  --shadow-lg: 0 24px 60px rgba(7, 23, 41, .16);
  /* Vertical rhythm: every section uses one of these three */
  --sp-section:    72px;   /* standard block */
  --sp-section-sm: 56px;   /* tighter block */
  --sp-hero:       64px;   /* page and article heroes */

  --max-width: 1140px;
}


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

body, h1, h2, h3, h4, p, ul, figure {
  margin: 0;
  padding: 0;
}

/* Both list types. Every numbered list on the site draws its own marker from
   a CSS counter, so leaving ol with its native numbers rendered them twice -
   "1. (1) We reply within one business day" on Contact, Thank-you and three
   articles. */
ul, ol { list-style: none; }

html {
  scroll-behavior: smooth;
  /* offset for the sticky header when jumping to #anchors */
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--navy-900);
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.18rem; }

a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }


/* ---------- 3. LAYOUT HELPERS ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: var(--sp-section) 0; }

.section-alt { background: var(--surface-2); }

.section-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-sub {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 1.06rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .76rem;
  font-weight: 700;
  color: var(--teal-600);
  margin-bottom: 12px;
}

/* Eyebrow with a short leading rule */
.eyebrow.with-rule {
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow.with-rule::before {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 2px;
  background: currentColor;
}

/* "See more" link that closes a section */
.section-more {
  margin-top: 34px;
  text-align: center;
  font-size: .96rem;
  font-weight: 600;
}
.section-more a { color: var(--teal-600); }
.section-more a::after { content: " →"; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }


/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .96rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  background: var(--teal-500);
  color: #fff;
  box-shadow: 0 6px 18px rgba(23, 163, 152, .28);
}
.btn-primary:hover { background: var(--teal-600); }

.btn-ghost {
  background: transparent;
  color: var(--navy-800);
  border-color: rgba(255, 255, 255, .35);
}

/* Dark button, for the closing CTA on inner pages */
.btn-dark {
  background: var(--navy-900);
  color: #fff;
}
.btn-dark:hover { background: var(--navy-800); color: #fff; }

/* Larger, with an arrow that slides on hover — for a page's main call to action */
.btn-lg { padding: 17px 34px; font-size: 1.02rem; }

.btn-arrow::after {
  content: "\2192";
  display: inline-block;
  margin-inline-start: 12px;
  transition: transform .2s ease;
}
.btn-arrow:hover::after { transform: translateX(5px); }

/* Ghost buttons only ever sit on a dark hero */
.hero .btn-ghost,
.svc-hero .btn-ghost { color: #fff; }
.hero .btn-ghost:hover,
.svc-hero .btn-ghost:hover { background: rgba(255, 255, 255, .1); }

.btn-sm { padding: 10px 20px; font-size: .88rem; }


/* ---------- 5. HEADER & NAVIGATION ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.logo:hover { text-decoration: none; }

.logo-mark { width: 34px; height: 34px; flex-shrink: 0; }
.logo-mark .lm-frame { fill: none; stroke: var(--navy-900); stroke-width: 5.5; }
.logo-mark .lm-r path { fill: none; stroke: var(--navy-900); stroke-width: 6; stroke-linecap: square; stroke-linejoin: round; }
.logo-mark .lm-t path { fill: none; stroke: var(--teal-500); stroke-width: 6; stroke-linecap: square; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }

.logo-name {
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav a {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
}
.site-nav a:hover { color: var(--teal-600); text-decoration: none; }
.site-nav .btn:hover { color: #fff; }

/* ---- Dropdown submenu (CSS only — hover on pointer, focus for keyboard) ---- */
/* Stretched to the full header height so there is no dead gap between the
   trigger and the panel for the cursor to fall through. */
.nav-item {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Chevron on the trigger */
.nav-item > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: 8px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.nav-item:hover > a::after,
.nav-item:focus-within > a::after { transform: translateY(1px) rotate(225deg); }

.sub-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: -14px;
  min-width: 270px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-item:hover .sub-menu,
.nav-item:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.sub-menu a:hover {
  background: var(--surface-2);
  color: var(--teal-600);
  text-decoration: none;
}

/* Burger (hidden on desktop) */
.nav-burger { display: none; }


/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 78% 15%, rgba(23, 163, 152, .28), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: #fff;
  padding: var(--sp-hero) 0 var(--sp-section);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 64px;
  align-items: center;
}

.hero h1 { color: #fff; }

.hero .eyebrow { color: var(--teal-100); }

.hero .lead {
  margin-top: 22px;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .82);
  max-width: 54ch;
}
.hero .lead strong { color: #fff; font-weight: 600; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* Hero visual — three stacked discipline cards */
.hero-visual {
  position: relative;
  height: 340px;
}

.stack-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 260px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
}

.stack-card-1 { top: 8px;   left: 0;    }
.stack-card-2 { top: 128px; left: 56px; background: rgba(23, 163, 152, .22); border-color: rgba(23, 163, 152, .45); }
.stack-card-3 { top: 248px; left: 12px; }

.stack-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.stack-label { font-weight: 600; font-size: 1rem; }

.stack-glow {
  position: absolute;
  inset: -40px -60px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 163, 152, .35), transparent 65%);
  filter: blur(20px);
}


/* ---------- 7. PILLARS ---------- */
.pillars {
  background: var(--surface);
  padding: var(--sp-section) 0;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 48px;
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pillar-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 30px;
  color: var(--teal-500);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pillar h3 {
  margin-bottom: 18px;
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--navy-900);
}

.pillar p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.72;
}


/* ---------- 8. CARDS ---------- */
/* The whole card is a link through to its service page */
.card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(23, 163, 152, .4);
  text-decoration: none;
}

/* Pinned to the bottom so the prompt lines up across cards of unequal height */
.card-more {
  margin-top: auto;
  padding-top: 22px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--teal-600);
}
.card-more::after {
  content: " →";
  transition: margin .2s ease;
}
.card:hover .card-more::after { margin-inline-start: 4px; }

.card-featured {
  border-color: rgba(23, 163, 152, .45);
  box-shadow: var(--shadow-md);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--teal-100);
  color: var(--teal-600);
  font-size: 1.15rem;
  font-weight: 700;
}

/* The three practice icons. These were text glyphs until now - "</>", a
   section sign, and a shekel sign that had no business on the site of a
   Jordanian company. Drawn instead, in the same stroke language as the
   pillar icons above, and sized to sit inside the tinted box. */
.card-icon svg,
.stack-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-icon svg  { width: 26px; height: 26px; }
.stack-icon svg { width: 21px; height: 21px; }

.card h3 { margin-bottom: 10px; }

.card p { color: var(--ink-soft); font-size: .98rem; }

.card-list {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.card-list li {
  position: relative;
  padding-inline-start: 22px;
  margin-bottom: 9px;
  font-size: .93rem;
  color: var(--ink);
}
.card-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
}


/* ---------- 8b. FREE WAYS TO START ---------- */

/* Extra bottom padding on whichever section the card overlaps into,
   so the card never lands on top of that section's own content. */
.section-overlapped { padding-bottom: 166px; }

/* No background of its own — the negative margin must not paint over
   the section above it. */
.free-start {
  position: relative;
  z-index: 2;
  margin-top: -110px;   /* how far the card lifts over the section above */
  padding-bottom: 76px;
}

.free-start-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 58px 60px 64px;
  border-radius: 18px;
  color: #fff;
  box-shadow: var(--shadow-lg);
}

/* Blurred backdrop layer.
   --------------------------------------------------------------
   To use a real photograph instead of the gradient below, replace
   the whole `background` declaration with:

       background-image: url("images/your-photo.jpg");
       background-size: cover;
       background-position: center;

   Everything else (the blur, the colour wash, the bleed) still applies. */
.free-start-bg {
  position: absolute;
  inset: -60px;                 /* bleed past the edges so the blur doesn't fade out */
  z-index: -2;
  filter: blur(18px);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .30), transparent 45%),
    radial-gradient(circle at 74% 12%, rgba(23, 163, 152, .95), transparent 52%),
    radial-gradient(circle at 88% 76%, rgba(7, 23, 41, .95),   transparent 55%),
    radial-gradient(circle at 30% 88%, rgba(18, 138, 128, .85), transparent 50%),
    linear-gradient(135deg, var(--navy-800), var(--teal-600));
  background-size: cover;
  background-position: center;
}

/* Colour wash that keeps the text readable whatever sits behind it. */
.free-start-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(11, 35, 64, .82), rgba(18, 138, 128, .78));
}

.free-start .eyebrow { color: rgba(255, 255, 255, .72); }
.free-start h2       { color: #fff; margin-bottom: 52px; }

.free-start-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}

/* Hairline separators between the columns, as in the reference */
.free-start-item + .free-start-item {
  padding-inline-start: 44px;
  border-inline-start: 1px solid rgba(255, 255, 255, .22);
}

.free-start-item h3 {
  margin-bottom: 16px;
  font-size: 1.28rem;
  color: #fff;
}

.free-start-item p {
  color: rgba(255, 255, 255, .82);
  font-size: .99rem;
  line-height: 1.7;
}


/* ---------- 9. WHY ROUYA — tabbed panel ---------- */
/* Driven entirely by the radio inputs at the top of .tabs. No JavaScript. */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: center;
}

.tab-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---- Left: overlapping circles ---- */
.tabs-visual {
  position: relative;
  min-height: 470px;
}

/* Placeholder for a photograph. Replace the whole `background` below with:
       background-image: url("images/your-photo.jpg");
   The circular clip and the sizing stay as they are. */
.tabs-photo {
  position: absolute;
  top: 26px;
  inset-inline-end: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(23, 163, 152, .55), transparent 55%),
    radial-gradient(circle at 74% 72%, rgba(7, 23, 41, .9), transparent 62%),
    linear-gradient(140deg, var(--navy-700), var(--navy-900));
  background-size: cover;
  background-position: center;
}

/* Hatched decorative shapes */
.tabs-deco {
  position: absolute;
  width: 108px;
  height: 108px;
}
.tabs-deco-a {
  top: 0;
  inset-inline-start: 296px;
  z-index: 1;
  border-radius: 0 999px 0 999px;
  background: repeating-linear-gradient(48deg, var(--navy-800) 0 2px, transparent 2px 9px);
}
.tabs-deco-b {
  bottom: 4px;
  inset-inline-end: 46px;
  z-index: 3;
  border-radius: 999px 0 999px 0;
  background: repeating-linear-gradient(48deg, var(--teal-500) 0 2px, transparent 2px 9px);
}

.tabs-dot {
  position: absolute;
  bottom: 68px;
  inset-inline-start: 398px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy-900);
}

/* ---- The panels themselves ---- */
.tab-panel {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 430px;
  height: 430px;
  padding: 0 62px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--teal-600), #0e6f68);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}

.tab-panel h3 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 1.32rem;
}
.tab-panel p {
  color: rgba(255, 255, 255, .86);
  font-size: .96rem;
  line-height: 1.65;
}

/* ---- Right: the tab list ---- */
.tabs-nav { display: grid; gap: 14px; }

.tabs-nav label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 24px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--navy-900);
  font-size: .96rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tabs-nav label:hover { background: #eaeff5; }

/* Chevron */
.tabs-nav label::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ---- Which tab is showing ---- */
#hold-1:checked ~ .tabs-visual #panel-1,
#hold-2:checked ~ .tabs-visual #panel-2,
#hold-3:checked ~ .tabs-visual #panel-3,
#hold-4:checked ~ .tabs-visual #panel-4 {
  opacity: 1;
  visibility: visible;
}

#hold-1:checked ~ .tabs-nav label[for="hold-1"],
#hold-2:checked ~ .tabs-nav label[for="hold-2"],
#hold-3:checked ~ .tabs-nav label[for="hold-3"],
#hold-4:checked ~ .tabs-nav label[for="hold-4"] {
  background: var(--teal-600);
  color: #fff;
}

/* Keyboard focus, since the real radio is visually hidden */
#hold-1:focus-visible ~ .tabs-nav label[for="hold-1"],
#hold-2:focus-visible ~ .tabs-nav label[for="hold-2"],
#hold-3:focus-visible ~ .tabs-nav label[for="hold-3"],
#hold-4:focus-visible ~ .tabs-nav label[for="hold-4"] {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
}


/* ---------- 10. PROCESS STEPS ---------- */
.step {
  padding: 34px 30px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}

.step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-weight: 700;
}

.step h3 { margin-bottom: 10px; }
.step p  { color: var(--ink-soft); font-size: .97rem; }


/* ---------- 10b. COMPLIANCE URGENCY ---------- */
.urgency {
  padding: var(--sp-section) 0;
  color: #fff;
  background:
    radial-gradient(760px 480px at 88% 8%, rgba(23, 163, 152, .16), transparent 62%),
    linear-gradient(160deg, var(--navy-900) 0%, #0a1c33 100%);
}

.urgency-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--teal-500);
}

.urgency-rule {
  width: 34px;
  height: 2px;
  flex-shrink: 0;
  background: var(--teal-500);
}

.urgency h2 {
  max-width: 20ch;
  color: #fff;
}

.urgency-lead {
  max-width: 58ch;
  margin-top: 20px;
  margin-bottom: 56px;
  color: rgba(255, 255, 255, .72);
  font-size: 1.05rem;
}

/* One card now, so it runs full width rather than sitting in half a grid. */
.urgency-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.urgency-card {
  padding: 30px 34px 34px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-inline-start: 3px solid var(--teal-500);
  border-radius: 6px;
  background: rgba(255, 255, 255, .045);
}

/* Amber marks the item with a live penalty attached */
.urgency-card-warn { border-inline-start-color: var(--amber); }

.urgency-tag {
  margin-bottom: 14px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--teal-500);
}
.urgency-card-warn .urgency-tag { color: var(--amber); }

.urgency-card h3 {
  margin-bottom: 12px;
  font-size: 1.3rem;
  color: #fff;
}

.urgency-note {
  color: rgba(255, 255, 255, .72);
  font-size: .97rem;
}

/* Label / detail rows beneath the hairline */
.urgency-facts {
  display: grid;
  grid-template-columns: 122px 1fr;
  gap: 18px 20px;
  margin: 26px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.urgency-facts dt {
  font-size: .93rem;
  font-weight: 600;
  color: #fff;
}

.urgency-facts dd {
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

.urgency-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.urgency-footer p {
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.7;
}

.urgency-footer .btn { flex-shrink: 0; }


/* ---------- 11. CLOSING CTA ---------- */
/* White, so the dark urgency block above and the dark footer below
   don't run into one another. */
.quote-cta {
  padding: var(--sp-section-sm) 0;
  background: var(--surface);
  color: var(--navy-900);
}

.quote-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}

.quote-cta h2 { color: var(--navy-900); }

.quote-cta-copy p {
  margin-top: 18px;
  max-width: 60ch;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.quote-cta .btn { flex-shrink: 0; }


/* ---------- 11b. CONTACT PAGE ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}

/* ---- Details panel ---- */
.contact-panel {
  padding: 36px 38px 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.contact-panel h2,
.contact-form-wrap h2 {
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.contact-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: none; }

.contact-label {
  width: 66px;
  flex-shrink: 0;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

.contact-list a { color: var(--teal-600); font-weight: 600; }
.contact-list span:not(.contact-label) { color: var(--navy-900); font-weight: 500; }

.next-steps {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.next-steps h3 { margin-bottom: 16px; font-size: 1.02rem; }

.next-steps ol {
  counter-reset: step;
  display: grid;
  gap: 12px;
}
.next-steps li {
  position: relative;
  padding-inline-start: 34px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  counter-increment: step;
}
.next-steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: .05em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-600);
  font-size: .78rem;
  font-weight: 700;
}

/* ---- Form ---- */
.contact-form {
  margin-top: 22px;
  padding: 34px 32px 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.field { margin-bottom: 20px; }

/* Two fields sharing a row */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy-800);
}

.req { color: var(--teal-600); }
.opt {
  font-weight: 500;
  font-size: .78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface-2);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input::placeholder,
.field textarea::placeholder { color: #9aa8b6; }

.field select { appearance: none; cursor: pointer; }

/* Chevron for the select, drawn as an inline SVG background */
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2347586b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-inline-end: 38px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(23, 163, 152, .16);
}

.field textarea { resize: vertical; }

.btn-block { display: block; width: 100%; }

.form-note {
  margin-top: 14px;
  text-align: center;
  font-size: .82rem;
  color: var(--ink-soft);
}

.form-privacy {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* ---------- 11c. LEGAL PAGES ---------- */
/* Narrower than the rest of the site — long prose needs a shorter line */
.legal { max-width: 760px; }

.legal-updated {
  margin-bottom: 44px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: .86rem;
  color: var(--ink-soft);
}

.legal-block { margin-bottom: 44px; }
.legal-block:last-child { margin-bottom: 0; }

.legal-block h2 {
  margin-bottom: 16px;
  font-size: 1.24rem;
}

.legal-block p {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.78;
}
.legal-block p:last-child { margin-bottom: 0; }

.legal-block ul {
  display: grid;
  gap: 11px;
  margin: 16px 0 20px;
}

.legal-block li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}
.legal-block li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
}

.legal-block li strong { color: var(--navy-900); font-weight: 600; }


/* ---------- 12. FOOTER ---------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .72);
  padding-top: 64px;
  font-size: .93rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.7fr 1.2fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-brand .logo-name { color: #fff; display: block; font-size: 1.2rem; }
.footer-brand p          { margin-top: 14px; max-width: 34ch; }

.site-footer h4 {
  color: #fff;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 16px;
}

.footer-nav,
.footer-contact { display: flex; flex-direction: column; gap: 10px; }

.footer-nav a,
.footer-contact a { color: rgba(255, 255, 255, .72); }
.footer-nav a:hover,
.footer-contact a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  color: rgba(255, 255, 255, .5);
}


/* =========================================================
   13. SERVICE PAGES
   Used by technology-security.html, compliance-certification.html
   and business-advisory.html. The home page does not use these.
   ========================================================= */

/* Narrower measure — long prose lists are hard to read at full width */
.container-narrow { max-width: 980px; }

/* ---- Page hero (shorter than the home hero) ---- */
.page-hero {
  padding: var(--sp-hero) 0 var(--sp-hero);
  color: #fff;
  background:
    radial-gradient(720px 420px at 86% 12%, rgba(23, 163, 152, .26), transparent 62%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 58%, var(--navy-700) 100%);
}

/* Icon panel to the right of the heading block.
   The icon comes first in the markup, so it is placed into column 2
   explicitly rather than reordering every page. */
.page-hero-inner {
  display: grid;
  grid-template-columns: 1fr 184px;
  gap: 56px;
  align-items: center;
}

.page-hero-copy { grid-column: 1; grid-row: 1; }
.page-hero-icon { grid-column: 2; grid-row: 1; }

.page-hero-icon {
  display: grid;
  place-items: center;
  width: 184px;
  height: 184px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
}

.page-hero-icon svg {
  width: 104px;
  height: 104px;
  color: var(--teal-500);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-hero h1 {
  max-width: 22ch;
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}

.page-hero .lead {
  max-width: 64ch;
  margin-top: 22px;
  color: rgba(255, 255, 255, .8);
  font-size: 1.08rem;
}

.breadcrumb {
  margin-bottom: 20px;
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}
.breadcrumb a { color: rgba(255, 255, 255, .78); }
.breadcrumb span { margin: 0 9px; color: rgba(255, 255, 255, .35); }

/* ---- Switcher between the three service pages ---- */
.service-switch {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.service-switch-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 14px;
}

.service-switch a {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.service-switch a:hover {
  background: var(--surface-2);
  color: var(--navy-900);
  text-decoration: none;
}
.service-switch a.is-active {
  background: var(--teal-100);
  color: var(--teal-600);
}

/* ---- Content blocks ---- */
.service-block { margin-bottom: 60px; }
.service-block:last-child { margin-bottom: 0; }

.service-block > h2 {
  margin-bottom: 26px;
  padding-bottom: 16px;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--line);
}

/* ---- Capability card: icon + title + a scannable spec list ---- */
.cap {
  margin-bottom: 24px;
  padding: 32px 36px 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cap-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.cap-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--teal-100);
  color: var(--teal-600);
}

.cap-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cap-head h2 { font-size: 1.3rem; }
.cap-head p  { margin-top: 3px; color: var(--ink-soft); font-size: .93rem; }

/* Term-and-detail rows. The bold term is what people actually scan;
   the light line beneath carries the specifics for anyone who stops. */
.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
}

.spec-list li {
  position: relative;
  padding-inline-start: 26px;
}

/* Check drawn in CSS so no font can break it */
.spec-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .36em;
  width: 6px;
  height: 12px;
  border: solid var(--teal-500);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(42deg);
}

.spec-list strong {
  display: block;
  margin-bottom: 3px;
  font-size: .97rem;
  font-weight: 600;
  color: var(--navy-900);
}

.spec-list span {
  display: block;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---- Pull-quote style callout ---- */
.callout {
  padding: 26px 32px;
  border-inline-start: 3px solid var(--teal-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--teal-100);
  color: var(--navy-800);
  font-size: 1.03rem;
  line-height: 1.72;
}

/* Heavier variant, for a statement that must not be skimmed past */
.callout-dark {
  margin-bottom: 60px;
  padding: 34px 38px;
  border-inline-start: 3px solid var(--teal-500);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  color: rgba(255, 255, 255, .82);
  font-size: 1.05rem;
  line-height: 1.72;
}
.callout-dark strong { color: #fff; font-weight: 600; }

/* ---- Top-ruled cards: ISO standards, and pricing models ---- */
.iso-grid,
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.iso-card,
.price-card {
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal-500);
  border-radius: 10px;
  background: var(--surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.iso-card:hover,
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.iso-code,
.price-tag {
  margin-bottom: 10px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--teal-600);
}

.price-tag {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.iso-card h3, .price-card h3 { margin-bottom: 8px; font-size: 1.06rem; }
.iso-card p,  .price-card p  { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }

/* ---- Engagement stages, three across ---- */
.stage-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.stage {
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.stage:hover {
  border-color: rgba(23, 163, 152, .4);
  box-shadow: var(--shadow-sm);
}

.stage-num {
  display: block;
  margin-bottom: 14px;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(23, 163, 152, .45);
}

.stage h3 { margin-bottom: 8px; font-size: 1.06rem; }
.stage p  { color: var(--ink-soft); font-size: .93rem; line-height: 1.58; }

/* ---- About: the founding story ---- */
.story { padding: var(--sp-section) 0; background: var(--surface); }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 72px;
  align-items: center;
}

.story-inner { max-width: 660px; }
.story .eyebrow { margin-bottom: 26px; }

/* Logo sits in the left column; swap the placeholder for an <img> */
.story-media img {
  display: block;
  width: 100%;
  height: auto;
}

.story p {
  margin-bottom: 22px;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.8;
}

/* The opening line carries the piece, so it is set larger and darker */
.story-open {
  color: var(--navy-900);
  font-size: 1.26rem;
  line-height: 1.6;
}

.story-sign {
  margin: 34px 0 0;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* ---- About: Mission / Vision / Policy tabs ---- */
/* Same radio-driven pattern as the home page, stacked vertically. */
.vtabs {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}

.vtabs-nav { display: grid; gap: 14px; }

.vtabs-nav label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--navy-900);
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vtabs-nav label:hover { border-color: rgba(23, 163, 152, .45); }

.vtab-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--navy-900);
  transition: background .2s ease, color .2s ease;
}
.vtab-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Panels */
.vtab-panel { display: none; }
.vtab-panel h2 { margin-bottom: 18px; font-size: 1.5rem; }
.vtab-panel p {
  margin-bottom: 16px;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.78;
}
.vtab-panel p:last-child { margin-bottom: 0; }
.vtab-panel strong { color: var(--navy-900); font-weight: 600; }

.vtab-link a { font-weight: 600; color: var(--teal-600); }

/* Which tab is showing */
#vt-1:checked ~ .vtabs-panels #vp-1,
#vt-2:checked ~ .vtabs-panels #vp-2,
#vt-3:checked ~ .vtabs-panels #vp-3 { display: block; }

#vt-1:checked ~ .vtabs-nav label[for="vt-1"],
#vt-2:checked ~ .vtabs-nav label[for="vt-2"],
#vt-3:checked ~ .vtabs-nav label[for="vt-3"] {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}
#vt-1:checked ~ .vtabs-nav label[for="vt-1"] .vtab-icon,
#vt-2:checked ~ .vtabs-nav label[for="vt-2"] .vtab-icon,
#vt-3:checked ~ .vtabs-nav label[for="vt-3"] .vtab-icon {
  background: var(--teal-500);
  color: var(--navy-900);
}

#vt-1:focus-visible ~ .vtabs-nav label[for="vt-1"],
#vt-2:focus-visible ~ .vtabs-nav label[for="vt-2"],
#vt-3:focus-visible ~ .vtabs-nav label[for="vt-3"] {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
}

/* ---- About: certifications ---- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px 26px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal-500);
  border-radius: 10px;
  background: var(--surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cert-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Fixed logo band so cards line up whatever each logo's proportions are */
.cert-logo {
  display: grid;
  place-items: center;
  height: 74px;
  margin-bottom: 20px;
}
.cert-logo img {
  max-height: 74px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.cert-name {
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.35;
}
.cert-body {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* ---- About: four things we hold ourselves to ---- */
.section-lead {
  max-width: 62ch;
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.hold-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  margin-top: 44px;
}

.hold-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
}
/* Close the bottom row */
.hold-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }

.hold-num {
  padding-top: .28em;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--teal-600);
}

.hold-item h3 { margin-bottom: 8px; font-size: 1.06rem; }
.hold-item p  { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; }

/* ---- About: the team ---- */
/* No photographs and no years-of-service figures. What is left is a name and a
   responsibility, so the row is built as a hairline-divided directory rather
   than a set of cards that would look empty without a portrait in them.
   The 1px gaps show the container background through as the dividing rules,
   which keeps every line exactly one pixel however the cells resize. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 44px;
  border: 1px solid var(--line);
  background: var(--line);
}

.team-card {
  padding: 32px 26px 34px;
  background: var(--surface);
}

/* Initials in the same framed square as the logo mark, first letter navy and
   second teal, so the row reads as ours rather than as a generic staff list. */
.team-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 54px;
  height: 54px;
  margin-bottom: 24px;
  border: 2px solid var(--navy-800);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  line-height: 1;
}
.ti-a { color: var(--navy-800); }
.ti-b { color: var(--teal-500); }

.team-card h3 {
  margin-bottom: 10px;
  font-size: 1.1rem;
  line-height: 1.3;
}

.team-role {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--teal-600);
}


/* Working note - delete before launch */
.build-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 36px;
  color: #8a6d1f;
  font-size: .93rem;
  line-height: 1.6;
}
.build-note-tag {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px dashed var(--amber);
  border-radius: 2px;
  background: #fffdf5;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #9a7a20;
}

/* Company facts use the same dark strip, four across */

/* ---- "You receive" panel ---- */
.receive {
  padding: 38px 42px 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.receive > h2 { margin-bottom: 28px; font-size: 1.3rem; }

.receive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
}

.receive-check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--teal-500);
}
.receive-check svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.receive-item p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

/* ---- Closing call to action ---- */
.service-cta {
  padding: var(--sp-section) 0;
  text-align: center;
  color: #fff;
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--teal-600) 130%);
}
.service-cta h2 { margin-bottom: 14px; color: #fff; }
.service-cta p {
  max-width: 56ch;
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, .8);
  font-size: 1.04rem;
}

/* =========================================================
   13b. SERVICE PAGE — FEATURE LAYOUT
   Used by technology-security.html.
   ========================================================= */

/* ---- Hero ---- */
.svc-hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-hero) 0 var(--sp-hero);
  color: #fff;
  background: linear-gradient(120deg, var(--navy-900) 0%, #0a1f3a 55%, var(--navy-700) 100%);
}

/* Arcs bleeding off the right edge */
.svc-hero-deco {
  position: absolute;
  top: 50%;
  inset-inline-end: -180px;
  width: 900px;
  height: 900px;
  transform: translateY(-50%);
  pointer-events: none;
}
.svc-hero-deco svg { width: 100%; height: 100%; }

.svc-hero-inner { position: relative; z-index: 1; }

.svc-hero .eyebrow { color: var(--teal-500); }

/* Runs the full container width rather than sitting in a left column */
.svc-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
}

.svc-hero .lead {
  max-width: 78ch;
  margin-top: 20px;
  color: rgba(255, 255, 255, .78);
  font-size: 1.08rem;
}

/* ---- Promise strip under the hero ---- */
.svc-strip { background: #0f2745; }

.svc-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-block: 30px;
}

.svc-strip-item + .svc-strip-item {
  padding-inline-start: 30px;
  border-inline-start: 1px solid rgba(255, 255, 255, .13);
}

.svc-strip-label {
  margin-bottom: 8px;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--teal-500);
}

.svc-strip-item p:not(.svc-strip-label) {
  color: rgba(255, 255, 255, .74);
  font-size: .96rem;
}

/* ---- Alternating feature blocks ---- */
.feature { padding: var(--sp-section) 0; background: var(--surface); }
.feature-alt { background: var(--surface-2); }

.feature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  align-items: center;
}

/* Media column moves to the right for reversed blocks */
.feature-reverse .feature-copy  { order: 1; }
.feature-reverse .feature-media { order: 2; }

.feature-media { position: relative; }

.feature-art {
  display: block;
  width: 100%;
  height: auto;
}

/* Photographs are cropped to one shape so the three blocks stay consistent
   whatever the source dimensions are. */
img.feature-art {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--navy-800);
}

/* Number tab, overlapping the top-left corner of the artwork */
.feature-badge {
  position: absolute;
  top: -18px;
  inset-inline-start: -18px;
  z-index: 1;
  padding: 9px 15px;
  background: var(--teal-500);
  color: var(--navy-900);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.feature-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.feature-copy > p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.72;
}

.feature-list { margin-top: 30px; }

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: .99rem;
  line-height: 1.55;
  color: var(--ink);
}
.feature-list li:first-child { border-top: 1px solid var(--line); }

.feature-list li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: .38em;
  border: 2px solid var(--teal-500);
  border-radius: 50%;
}

/* ---- Standing notice, amber-ruled ---- */
.notice-band { padding: var(--sp-section) 0; background: var(--surface); }

.notice {
  padding: 30px 36px 34px;
  border-inline-start: 4px solid var(--amber);
  background: #fffdf5;
}
.notice h2 { margin-bottom: 12px; font-size: 1.08rem; }
.notice p  { color: var(--ink-soft); font-size: 1rem; line-height: 1.78; }




/* =========================================================
   16. INSIGHTS — homepage cards and article pages
   ========================================================= */

/* ---- Homepage: three post cards, middle one raised ---- */
.insights { padding: var(--sp-section) 0; background: var(--surface); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  /* room for the raised middle card to lift into */
  padding-top: 30px;
}

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 28px 30px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal-500);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post-card:hover {
  transform: translateY(-6px);
  border-color: rgba(23, 163, 152, .45);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* The featured post sits proud of the other two */
.post-card-lift {
  transform: translateY(-30px);
  box-shadow: var(--shadow-md);
}
.post-card-lift:hover { transform: translateY(-36px); }

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--teal-600);
}
.post-meta span { color: var(--ink-soft); font-weight: 600; letter-spacing: .06em; }

.post-card h3 {
  margin-bottom: 12px;
  font-size: 1.16rem;
  line-height: 1.35;
}
.post-card p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }

.post-more {
  margin-top: auto;
  padding-top: 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--teal-600);
}
.post-more::after { content: " \2192"; transition: margin .2s ease; }
.post-card:hover .post-more::after { margin-inline-start: 4px; }

/* ---- Article page ---- */
.article-hero {
  padding: var(--sp-hero) 0 var(--sp-hero);
  color: #fff;
  background:
    radial-gradient(700px 420px at 86% 12%, rgba(23, 163, 152, .22), transparent 62%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 58%, var(--navy-700) 100%);
}
.article-hero h1 {
  max-width: 24ch;
  margin-top: 6px;
  color: #fff;
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
}
.article-hero .lead {
  max-width: 68ch;
  margin-top: 20px;
  color: rgba(255, 255, 255, .8);
  font-size: 1.08rem;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal-500);
}
.article-meta span { color: rgba(255, 255, 255, .5); }

.article { padding: var(--sp-section) 0; }
.article-body { max-width: 760px; }

.article-body h2 {
  margin: 46px 0 16px;
  font-size: 1.44rem;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: 30px 0 12px; font-size: 1.1rem; }

.article-body p {
  margin-bottom: 18px;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.8;
}
.article-body strong { color: var(--navy-900); font-weight: 600; }

.article-body ul,
.article-body ol {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  counter-reset: art;
}
.article-body li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--ink-soft);
  font-size: 1.03rem;
  line-height: 1.72;
}
.article-body ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
}
.article-body ol li { counter-increment: art; padding-inline-start: 32px; }
.article-body ol li::before {
  content: counter(art);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-size: .82rem;
  font-weight: 800;
  color: var(--teal-600);
  line-height: 1.9;
}

/* Sample wording a reader can copy */
.article-quote {
  margin: 0 0 26px;
  padding: 24px 28px;
  border-inline-start: 3px solid var(--teal-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--teal-100);
}
.article-quote p { margin-bottom: 12px; color: var(--navy-800); font-size: 1rem; line-height: 1.72; }
.article-quote p:last-child { margin-bottom: 0; }
.article-quote .q-subject { font-weight: 700; color: var(--navy-900); }

/* Where the facts came from */
.article-sources {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.article-sources strong { color: var(--navy-900); }



/* ---- Book-a-consultation modal (CSS only, driven by :target) ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .22s ease, visibility .22s;
}
.modal:target { visibility: visible; opacity: 1; }

/* Clicking anywhere outside the panel closes it */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 23, 41, .62);
  backdrop-filter: blur(3px);
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 36px 34px 32px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98);
  transition: transform .26s ease;
}
.modal:target .modal-box { transform: translateY(0) scale(1); }

.modal-x {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
}
.modal-x:hover { background: var(--surface-2); color: var(--navy-900); text-decoration: none; }

.modal-box h2 { margin-bottom: 8px; font-size: 1.35rem; }

.modal-lead {
  margin-bottom: 24px;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
}

.modal-form .field:last-of-type { margin-bottom: 24px; }

.modal-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- FAQ accordion (radio-driven, one open at a time) ---- */
.faq-list {
  margin-top: 44px;
  border-top: 1px solid var(--line);
}

.faq-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.faq-item { border-bottom: 1px solid var(--line); }

/* The question */
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  color: var(--navy-900);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.5;
  transition: color .2s ease;
}
.faq-q:hover { color: var(--teal-600); }

/* Chevron that flips when the answer is open */
.faq-mark {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: .34em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .28s ease;
}

/* The answer, collapsed by default. The 0fr/1fr grid animates height
   properly, which max-height cannot do without guessing. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-a > div { overflow: hidden; }

.faq-a p {
  padding: 0 44px 24px 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.78;
}
.faq-a a { color: var(--teal-600); font-weight: 600; }

/* Open state */
#faq-1:checked ~ .faq-item:nth-of-type(1) .faq-a,
#faq-2:checked ~ .faq-item:nth-of-type(2) .faq-a,
#faq-3:checked ~ .faq-item:nth-of-type(3) .faq-a,
#faq-4:checked ~ .faq-item:nth-of-type(4) .faq-a,
#faq-5:checked ~ .faq-item:nth-of-type(5) .faq-a,
#faq-6:checked ~ .faq-item:nth-of-type(6) .faq-a { grid-template-rows: 1fr; }

#faq-1:checked ~ .faq-item:nth-of-type(1) .faq-q,
#faq-2:checked ~ .faq-item:nth-of-type(2) .faq-q,
#faq-3:checked ~ .faq-item:nth-of-type(3) .faq-q,
#faq-4:checked ~ .faq-item:nth-of-type(4) .faq-q,
#faq-5:checked ~ .faq-item:nth-of-type(5) .faq-q,
#faq-6:checked ~ .faq-item:nth-of-type(6) .faq-q { color: var(--teal-600); }

#faq-1:checked ~ .faq-item:nth-of-type(1) .faq-mark,
#faq-2:checked ~ .faq-item:nth-of-type(2) .faq-mark,
#faq-3:checked ~ .faq-item:nth-of-type(3) .faq-mark,
#faq-4:checked ~ .faq-item:nth-of-type(4) .faq-mark,
#faq-5:checked ~ .faq-item:nth-of-type(5) .faq-mark,
#faq-6:checked ~ .faq-item:nth-of-type(6) .faq-mark {
  transform: rotate(225deg);
  margin-top: .62em;
}

/* Keyboard focus, since the radio itself is hidden */
#faq-1:focus-visible ~ .faq-item:nth-of-type(1) .faq-q,
#faq-2:focus-visible ~ .faq-item:nth-of-type(2) .faq-q,
#faq-3:focus-visible ~ .faq-item:nth-of-type(3) .faq-q,
#faq-4:focus-visible ~ .faq-item:nth-of-type(4) .faq-q,
#faq-5:focus-visible ~ .faq-item:nth-of-type(5) .faq-q,
#faq-6:focus-visible ~ .faq-item:nth-of-type(6) .faq-q {
  outline: 2px solid var(--teal-500);
  outline-offset: 4px;
}

/* ---- Homepage AI band: a sequence that visibly moves ---- */
.ai-band {
  position: relative;
  overflow: hidden;
  padding: var(--sp-section) 0;
  color: #fff;
  background: linear-gradient(150deg, var(--navy-900) 0%, #0a1f3a 58%, var(--navy-700) 100%);
}

/* Slow-drifting glow behind the content */
.ai-glow {
  position: absolute;
  top: -160px;
  inset-inline-end: -60px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(23, 163, 152, .30), transparent 66%);
  filter: blur(26px);
  animation: ai-drift 16s ease-in-out infinite;
}

.ai-inner { position: relative; z-index: 1; }

.ai-head { max-width: 62ch; margin-bottom: 56px; }
.ai-band .eyebrow { color: var(--teal-500); }
.ai-band h2 { max-width: 20ch; color: #fff; }
.ai-lead {
  margin-top: 18px;
  color: rgba(255, 255, 255, .76);
  font-size: 1.06rem;
}

/* The three stages, read left to right */
.ai-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-stop { position: relative; }

/* Dashes travelling from one stage to the next */
.ai-stop + .ai-stop::before {
  content: "";
  position: absolute;
  top: 26px;
  inset-inline-start: -46px;
  width: 36px;
  height: 2px;
  opacity: .85;
  background-image: linear-gradient(90deg, var(--teal-500) 0 7px, transparent 7px 14px);
  background-size: 14px 2px;
  background-repeat: repeat-x;
  animation: ai-dash .9s linear infinite;
}

.ai-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border: 1px solid rgba(23, 163, 152, .55);
  border-radius: 50%;
  background: rgba(23, 163, 152, .12);
  color: var(--teal-500);
}
.ai-badge svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The signature is the point, so it keeps pulsing */
.is-final .ai-badge::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--teal-500);
  border-radius: 50%;
  animation: ai-pulse 2.8s ease-out infinite;
}

.ai-stop h3 { margin-bottom: 10px; color: #fff; font-size: 1.1rem; }
.ai-stop p  { color: rgba(255, 255, 255, .72); font-size: .95rem; line-height: 1.62; }

.ai-foot {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .6);
  font-size: .95rem;
}
.ai-foot a { margin-inline-start: 10px; color: var(--teal-500); font-weight: 600; }
.ai-foot a::after { content: " \2192"; }

@keyframes ai-dash { to { background-position: 14px 0; } }
@keyframes ai-dash-v { to { background-position: 0 14px; } }
@keyframes ai-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-60px, 46px) scale(1.14); }
}
@keyframes ai-pulse {
  0%       { transform: scale(1); opacity: .6; }
  70%,100% { transform: scale(2); opacity: 0; }
}

/* =========================================================
   15. AI PAGE
   ========================================================= */

/* Hero buttons return on this page */
.svc-hero .hero-actions { margin-top: 34px; }

/* ---- Position statement: three large paragraphs ---- */
.position { padding: var(--sp-section) 0; background: var(--surface); }
.position-inner { max-width: 760px; }
.position .eyebrow { margin-bottom: 26px; }

.position p {
  margin-bottom: 20px;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.78;
}
.position p:last-child { margin-bottom: 0; }

.position-lead {
  color: var(--navy-900);
  font-size: 1.34rem;
  line-height: 1.55;
  font-weight: 600;
}

/* ---- Three-column comparison table ---- */
.table-wrap { overflow-x: auto; }

.matrix-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.matrix-table th {
  padding: 0 22px 14px 0;
  text-align: start;
  vertical-align: bottom;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal-600);
  border-bottom: 2px solid var(--navy-900);
}

.matrix-table td {
  padding: 20px 22px 20px 0;
  vertical-align: top;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.matrix-table td:last-child, .matrix-table th:last-child { padding-inline-end: 0; }

.matrix-table td:first-child {
  width: 190px;
  font-weight: 700;
  color: var(--navy-900);
}
/* The verification column is the point of the table, so it is emphasised */
.matrix-table td:last-child { color: var(--navy-800); }

/* ---- Numbered "we do not" list ---- */
.dont-list { margin-top: 40px; }

.dont-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
}
.dont-item:last-child { border-bottom: 1px solid var(--line); }

.dont-num {
  padding-top: .14em;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--teal-600);
}

.dont-item p { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.dont-item strong { color: var(--navy-900); font-weight: 600; }

/* ---- Numbered service offerings ---- */
.offer-list { display: grid; gap: 22px; margin-top: 42px; }

.offer {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 30px 32px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.offer-num {
  padding-top: .18em;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(23, 163, 152, .5);
}

.offer-body h3 { margin-bottom: 12px; font-size: 1.2rem; }
.offer-body > p { color: var(--ink-soft); font-size: 1rem; line-height: 1.72; }

.offer-meta {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 20px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.offer-meta dt {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal-600);
  padding-top: .12em;
}
.offer-meta dd { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

/* ---- Stop rule call-out, inside the dark method block ---- */
.stoprule {
  margin-top: 40px;
  padding: 30px 34px 32px;
  border-inline-start: 3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 255, 255, .06);
}
.stoprule h3 { margin-bottom: 12px; color: #fff; font-size: 1.12rem; }
.stoprule p { color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.72; }
.stoprule-line { margin-top: 12px; color: #fff; font-weight: 600; }

/* Three cards rather than four */

/* A "see more" link sitting on a dark band needs the lighter teal */
.deliver .section-more a { color: var(--teal-500); }

/* ---- Frameworks: numbered step tabs (International / Regional) ---- */
.std-section { padding: var(--sp-section) 0; background: var(--surface-2); }

.steptabs { position: relative; }

.steptabs-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 660px;
  margin: 0 auto 42px;
}

/* The rule running between the two pills */
.steptabs-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 26%;
  right: 26%;
  height: 1px;
  background: var(--line);
}

.steptabs-nav label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.steptabs-nav label:hover { border-color: rgba(23, 163, 152, .5); color: var(--navy-900); }

.steptab-num {
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .7;
}

/* Dashed panel, as in the reference */
.steptab-panel {
  display: none;
  padding: 36px 42px 40px;
  border: 1px dashed #c3cedb;
  border-radius: 8px;
  background: var(--surface);
}
.steptab-panel h3 {
  margin-bottom: 22px;
  font-size: 1.45rem;
  color: var(--teal-600);
}

.fw-list { display: grid; gap: 13px; }

.fw-list li {
  position: relative;
  padding-inline-start: 24px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.fw-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy-900);
}
.fw-list strong { color: var(--navy-900); font-weight: 700; }

/* Which tab is showing */
#fw-1:checked ~ .steptabs-panels #fp-1,
#fw-2:checked ~ .steptabs-panels #fp-2 { display: block; }

#fw-1:checked ~ .steptabs-nav label[for="fw-1"],
#fw-2:checked ~ .steptabs-nav label[for="fw-2"] {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
#fw-1:checked ~ .steptabs-nav label[for="fw-1"] .steptab-num,
#fw-2:checked ~ .steptabs-nav label[for="fw-2"] .steptab-num { opacity: 1; color: var(--teal-500); }

#fw-1:focus-visible ~ .steptabs-nav label[for="fw-1"],
#fw-2:focus-visible ~ .steptabs-nav label[for="fw-2"] {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
}
/* ---- Dark variant of the feature block ---- */
.feature-dark {
  color: #fff;
  background:
    radial-gradient(700px 460px at 12% 10%, rgba(23, 163, 152, .12), transparent 62%),
    linear-gradient(160deg, var(--navy-900), #0a1f3a);
}
.feature-dark .eyebrow  { color: var(--teal-500); }
.feature-dark h2        { color: #fff; }
.feature-dark > * > .feature-copy > p,
.feature-dark .feature-copy > p { color: rgba(255, 255, 255, .74); }

/* Numbered stage rows inside a dark feature block */
.flow-list { margin-top: 30px; }

.flow-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.flow-item:first-child { border-top: 1px solid rgba(255, 255, 255, .14); }

.flow-num {
  padding-top: .18em;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--teal-500);
}

.flow-item h3 { margin-bottom: 6px; color: #fff; font-size: 1.02rem; }
.flow-item p  { color: rgba(255, 255, 255, .72); font-size: .93rem; line-height: 1.6; }

/* ---- Deliverables, dark ---- */
.deliver {
  padding: var(--sp-section) 0;
  color: #fff;
  background:
    radial-gradient(720px 460px at 88% 6%, rgba(23, 163, 152, .14), transparent 62%),
    linear-gradient(160deg, var(--navy-900), #0a1f3a);
}

.deliver .eyebrow { color: var(--teal-500); }
.deliver h2 { max-width: 18ch; color: #fff; }

.deliver-lead {
  max-width: 52ch;
  margin-top: 18px;
  margin-bottom: 52px;
  color: rgba(255, 255, 255, .74);
  font-size: 1.04rem;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.doc-card {
  padding: 26px 26px 28px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-inline-start: 3px solid var(--teal-500);
  background: rgba(255, 255, 255, .045);
}

.doc-card h3 { margin-bottom: 12px; color: #fff; font-size: 1.06rem; }
.doc-card p  { color: rgba(255, 255, 255, .72); font-size: .92rem; line-height: 1.62; }

/* ---- Monthly rhythm: four columns under a shared hairline ---- */
.rhythm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 46px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.rhythm-item {
  position: relative;
  padding: 26px 30px 0 0;
}

/* Short accent bar sitting on the hairline, aligned with the text */
.rhythm-item::before {
  content: "";
  position: absolute;
  top: -2px;
  inset-inline-start: 0;
  width: 54px;
  height: 3px;
  background: var(--teal-500);
}

.rhythm-item + .rhythm-item {
  padding-inline-start: 30px;
  border-inline-start: 1px solid rgba(255, 255, 255, .14);
}
.rhythm-item + .rhythm-item::before { inset-inline-start: 30px; }

.rhythm-label {
  margin-bottom: 12px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--teal-500);
}

.rhythm-item p:not(.rhythm-label) {
  color: rgba(255, 255, 255, .74);
  font-size: .93rem;
  line-height: 1.62;
}

/* Light variant of the same block */
.deliver-light {
  background: var(--surface-2);
  color: var(--ink);
}
.deliver-light .eyebrow      { color: var(--teal-600); }
.deliver-light h2            { color: var(--navy-900); }
.deliver-light .deliver-lead { color: var(--ink-soft); }

.deliver-light .doc-card {
  border-color: var(--line);
  border-inline-start-color: var(--teal-500);
  background: var(--surface);
}
.deliver-light .doc-card h3 { color: var(--navy-900); }
.deliver-light .doc-card p  { color: var(--ink-soft); }

/* ---- Closing CTA ---- */
.final-cta {
  padding: var(--sp-section) 0;
  text-align: center;
  background: var(--surface-2);
}

.final-cta-white { background: var(--surface); }

.final-cta h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

.final-cta p {
  max-width: 56ch;
  margin: 18px auto 32px;
  color: var(--ink-soft);
  font-size: 1.04rem;
}


/* ---- Links to the other two service pages ---- */
.other { padding: var(--sp-section-sm) 0; }

.other-head {
  margin-bottom: 26px;
  font-size: 1.3rem;
}

.other-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.other-grid-3 { grid-template-columns: repeat(3, 1fr); }

.other-card {
  display: block;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.other-card:hover {
  transform: translateY(-3px);
  border-color: rgba(23, 163, 152, .45);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.other-label {
  margin-bottom: 8px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal-600);
}

.other-card h3 { margin-bottom: 8px; font-size: 1.1rem; }
.other-card p  { color: var(--ink-soft); font-size: .95rem; }


/* ---------- 14. RESPONSIVE ---------- */

/* The tabs stack earlier than everything else — two circles plus a 380px
   tab column stop fitting side by side well above 960px. */
@media (max-width: 1080px) {
  .tabs     { grid-template-columns: 1fr; gap: 44px; }
  .tabs-nav { max-width: 640px; }
}

@media (max-width: 960px) {
  .hero-inner  { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { height: 330px; max-width: 340px; }
  .quote-cta-inner { gap: 40px; }
  .contact-layout  { grid-template-columns: 1fr; gap: 34px; }
  .grid-3      { grid-template-columns: repeat(2, 1fr); }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .pillars-grid{ grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }

  .free-start-card { padding: 56px 44px 62px; }
  .free-start-grid { gap: 32px; }
  .free-start-item + .free-start-item { padding-inline-start: 32px; }

  .urgency h2      { max-width: none; }
  .urgency-grid    { grid-template-columns: 1fr; gap: 24px; }

  .iso-grid,
  .price-grid   { grid-template-columns: repeat(2, 1fr); }
  .stage-list   { grid-template-columns: repeat(2, 1fr); }
  .other-grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Feature blocks stack; copy always leads, artwork follows */
  .feature-inner   { grid-template-columns: 1fr; gap: 44px; }
  .feature-copy    { order: 1; }
  .feature-media   { order: 2; }
  .doc-grid        { grid-template-columns: repeat(2, 1fr); }

  /* Two per row — each item carries its own hairline now */
  .rhythm-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; border-top: none; }
  .rhythm-item { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .rhythm-item:nth-child(odd) { padding-inline-start: 0; border-inline-start: none; }
  .rhythm-item:nth-child(odd)::before { inset-inline-start: 0; }
  .hold-grid    { gap: 0 36px; }

  /* Two certificates per row, two team cards visible */
  .cert-grid    { grid-template-columns: repeat(2, 1fr); }

  /* --- AI page --- */
  .offer-meta  { grid-template-columns: 1fr; gap: 4px 0; }
  .ai-flow     { grid-template-columns: 1fr; gap: 40px; }
  .post-grid   { grid-template-columns: repeat(2, 1fr); padding-top: 0; }
  .post-card-lift { transform: none; }
  .post-card-lift:hover { transform: translateY(-6px); }
  .ai-band h2  { max-width: none; }
  .ai-stop + .ai-stop::before {
    top: -30px; left: 26px;
    width: 2px; height: 22px;
    background-image: linear-gradient(180deg, var(--teal-500) 0 7px, transparent 7px 14px);
    background-size: 2px 14px;
    background-repeat: repeat-y;
    animation-name: ai-dash-v;
  }
  .team-grid    { grid-template-columns: repeat(2, 1fr); }

  /* Logo and mission image stack above their text */
  .story-grid   { grid-template-columns: 1fr; gap: 40px; }
  .story-media  { max-width: 300px; }
  .story-inner  { max-width: none; }
  .vtabs        { grid-template-columns: 1fr; gap: 32px; }
  .spec-list    { gap: 20px 28px; }
}

@media (max-width: 720px) {
  /* One place to retune the whole vertical rhythm on small screens */
  :root {
    --sp-section:    56px;
    --sp-section-sm: 44px;
    --sp-hero:       48px;
  }


  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-inner    { grid-template-columns: 1fr; gap: 34px; }

  .quote-cta-inner { flex-direction: column; align-items: flex-start; gap: 30px; }

  /* Circles shrink; the hatched shapes are dropped rather than crowded */
  .tabs-visual  { min-height: 350px; }
  .tabs-photo   { width: 290px; height: 290px; top: 20px; }
  .tab-panel    { width: 310px; height: 310px; padding: 0 42px; }
  .tab-panel h3 { font-size: 1.14rem; }
  .tab-panel p  { font-size: .9rem; }
  .tabs-deco, .tabs-dot { display: none; }
  .tabs-nav label { padding: 15px 20px; font-size: .92rem; }

  .contact-panel { padding: 28px 24px 30px; }
  .contact-form  { padding: 26px 22px 28px; }
  .field-row     { grid-template-columns: 1fr; gap: 0; }

  .pillars-grid { grid-template-columns: 1fr; gap: 44px; }
  .pillar p     { max-width: 46ch; }

  /* Card stacks and the overlap shrinks so it stays readable on a phone */
  .section-overlapped { padding-bottom: 130px; }
  .free-start         { margin-top: -70px; padding-bottom: 68px; }
  .free-start-card    { padding: 44px 28px 48px; border-radius: 14px; }
  .free-start h2      { margin-bottom: 36px; }
  .free-start-grid    { grid-template-columns: 1fr; gap: 34px; }

  .free-start-item + .free-start-item {
    padding-inline-start: 0;
    padding-top: 34px;
    border-inline-start: none;
    border-top: 1px solid rgba(255, 255, 255, .22);
  }

  .urgency-lead  { margin-bottom: 40px; }
  .urgency-card  { padding: 26px 24px 28px; }

  /* Label above detail rather than beside it — 122px of label is too much here */
  .urgency-facts {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .urgency-facts dd { margin-bottom: 14px; }
  .urgency-facts dd:last-child { margin-bottom: 0; }

  .urgency-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }

  /* --- Service pages --- */
  .page-hero h1 { max-width: none; }

  /* No room beside the text on a phone — the icon moves above it */
  .page-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .page-hero-copy,
  .page-hero-icon  { grid-column: auto; grid-row: auto; }
  .page-hero-icon  { width: 104px; height: 104px; border-radius: 20px; }
  .page-hero-icon svg { width: 58px; height: 58px; }

  .service-block { margin-bottom: 46px; }

  .cap       { padding: 26px 24px 28px; }
  .spec-list { grid-template-columns: 1fr; gap: 18px; }

  .iso-grid,
  .price-grid  { grid-template-columns: 1fr; }
  .stage-list  { grid-template-columns: 1fr; }
  .stage       { padding: 22px 24px; }
  .story-open  { font-size: 1.12rem; }


  .hold-grid   { grid-template-columns: 1fr; gap: 0; }
  .hold-item:nth-last-child(-n+2) { border-bottom: none; }
  .hold-item:last-child           { border-bottom: 1px solid var(--line); }

  /* One per row on a phone. Laid out side by side rather than stacked, so
     four people do not turn into four tall, mostly empty blocks. */
  .team-grid     { grid-template-columns: 1fr; }
  .team-card     { display: flex; align-items: center; gap: 18px; padding: 22px; }
  .team-initials { flex: none; width: 48px; height: 48px; margin-bottom: 0; font-size: 1.15rem; }

  .callout      { padding: 22px 24px; }
  .callout-dark { margin-bottom: 46px; padding: 26px 26px; }
  .receive      { padding: 28px 26px 30px; }
  .receive-grid { gap: 22px; }

  .service-cta { padding: 60px 0; }
  .other-grid,
  .other-grid-3 { grid-template-columns: 1fr; }

  /* --- Feature-layout service page --- */
  .svc-hero-deco { display: none; }

  .svc-strip-inner,
  .svc-strip-item + .svc-strip-item {
    padding-inline-start: 0;
    padding-top: 20px;
    margin-top: 20px;
    border-inline-start: none;
    border-top: 1px solid rgba(255, 255, 255, .13);
  }

  .feature-badge { top: -12px; left: -12px; padding: 7px 12px; font-size: .78rem; }
  .feature-list  { margin-top: 24px; }


  /* --- AI page --- */
  .post-grid     { grid-template-columns: 1fr; }
  .article-hero h1 { max-width: none; }
  .article-quote { padding: 20px 22px; }
  .faq-q   { font-size: 1rem; gap: 16px; }
  .modal-box { padding: 30px 24px 26px; }
  .faq-a p { padding-inline-end: 0; }
  .ai-head       { margin-bottom: 42px; }
  .ai-glow       { display: none; }
  .position-lead { font-size: 1.16rem; }
  .matrix-table td:first-child { width: 150px; }
  .dont-item     { grid-template-columns: 38px 1fr; gap: 12px; }
  .offer         { grid-template-columns: 40px 1fr; gap: 14px; padding: 24px 22px 26px; }
  .offer-num     { font-size: 1.05rem; }
  .stoprule      { padding: 24px 22px 26px; }
  .notice      { padding: 24px 22px 26px; }

  .steptabs-nav { flex-direction: column; gap: 12px; max-width: 380px; }
  .steptabs-nav::before { display: none; }
  .steptab-panel { padding: 26px 24px 30px; }
  .steptab-panel h3 { font-size: 1.2rem; }
  .flow-item   { grid-template-columns: 38px 1fr; gap: 12px; }

  .rhythm-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .rhythm-item { padding-inline-end: 0; }
  .rhythm-item + .rhythm-item { padding-inline-start: 0; border-inline-start: none; }
  .rhythm-item + .rhythm-item::before { inset-inline-start: 0; }

  .deliver h2    { max-width: none; }
  .deliver-lead  { margin-bottom: 36px; }
  .doc-grid      { grid-template-columns: 1fr; }



  /* --- Mobile menu (pure CSS, no JavaScript) --- */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    height: 2px;
    background: var(--navy-800);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  /* There is no hover on touch — the submenu becomes a plain indented list */
  .nav-item {
    display: block;
    align-self: auto;
  }
  .nav-item > a { display: block; }
  .nav-item > a::after { display: none; }

  .sub-menu {
    position: static;
    min-width: 0;
    padding: 0 0 0 18px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sub-menu a {
    padding: 12px 0;
    border-radius: 0;
    font-size: .9rem;
    color: var(--ink-soft);
    white-space: normal;
  }
  .site-nav .btn {
    margin-top: 16px;
    border-bottom: none;
    text-align: center;
  }

  .nav-toggle:checked ~ .site-nav { display: flex; }

  /* burger turns into an X when open */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 560px) {
  /* A circle is the wrong container for a paragraph on a phone — the panel
     becomes a normal card and only the selected one is rendered. */
  .tabs-visual { min-height: 0; }
  .tabs-photo  { display: none; }

  .tab-panel {
    position: static;
    display: none;
    width: 100%;
    height: auto;
    padding: 30px 28px 32px;
    border-radius: var(--radius);
  }

  #hold-1:checked ~ .tabs-visual #panel-1,
  #hold-2:checked ~ .tabs-visual #panel-2,
  #hold-3:checked ~ .tabs-visual #panel-3,
  #hold-4:checked ~ .tabs-visual #panel-4 {
    display: block;
  }
}

@media (max-width: 480px) {
  .hero-visual  { height: 300px; }
  .stack-card   { width: 230px; padding: 15px 18px; }
  .stack-card-2 { inset-inline-start: 40px; }
  .footer-bottom{ flex-direction: column; }
}


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

:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: 4px;
}








/* ---- Honeypot: visible to bots, not to people. Never remove. ---- */
/* Clipped rather than pushed off-screen. The old "left: -9999px" worked in
   English but broke Arabic: in RTL that offset extends the page nine thousand
   pixels past the edge and the real content ends up outside the viewport, so
   the contact page rendered blank. Clipping hides the field just as well and
   costs the layout nothing in either direction. */
.hp-field {
  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;
}

/* ---- Thank-you page ---- */
.thanks {
  padding: var(--sp-section) 0 var(--sp-section);
  text-align: center;
}

.thanks-tick {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--teal-500);
}
.thanks-tick svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thanks h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }

.thanks-lead {
  max-width: 52ch;
  margin: 18px auto 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.7;
}
.thanks-lead strong { color: var(--navy-900); font-weight: 600; }

.thanks-next {
  max-width: 480px;
  margin: 44px auto 0;
  padding: 30px 34px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: start;
}
.thanks-next h2 { margin-bottom: 18px; font-size: 1.06rem; }

.thanks-next ol { counter-reset: tstep; display: grid; gap: 12px; }
.thanks-next li {
  position: relative;
  padding-inline-start: 34px;
  counter-increment: tstep;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}
.thanks-next li::before {
  content: counter(tstep);
  position: absolute;
  inset-inline-start: 0;
  top: .05em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-600);
  font-size: .78rem;
  font-weight: 700;
}

.thanks-urgent {
  margin: 32px 0 30px;
  color: var(--ink-soft);
  font-size: .95rem;
}
.thanks-urgent a { font-weight: 600; }

/* ---------------------------------------------------------------------------
   RESOURCES: Insights index and FAQ page
   The home page keeps a three-card teaser; these carry the full lists.
   --------------------------------------------------------------------------- */

/* The home grid reserves headroom for the raised middle card. On the index
   page every card sits level, so that reserved space is not wanted. */
.post-grid-flat { padding-top: 0; }

/* "All insights" under the home section heading */
.section-head-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--teal-600);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
}
.section-head-link::after { content: " \2192"; transition: margin .2s ease; }
.section-head-link:hover { color: var(--navy-800); }
.section-head-link:hover::after { margin-inline-start: 4px; }

/* The lockup on the About page's founding-story block. */
.story-logo {
  display: block;
  width: 100%;
  max-width: 370px;
  height: auto;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   FOOTER MARK
   The logo repeated under the brand line. The footer is navy, so the frame
   and the R are white and only the T stays teal — the same relationship the
   header uses, inverted for the dark ground.
   --------------------------------------------------------------------------- */
.footer-mark {
  display: block;
  width: 46px;
  height: 46px;
  margin-top: 22px;
}
.footer-mark .fm-frame {
  fill: none;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 5.5;
}
.footer-mark .fm-r path {
  fill: none;
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 6;
  stroke-linecap: square;
  stroke-linejoin: round;
}
.footer-mark .fm-t path {
  fill: none;
  stroke: var(--teal-500);
  stroke-width: 6;
  stroke-linecap: square;
}

/* ---------------------------------------------------------------------------
   CERTIFICATION TILES WITHOUT A LOGO
   Four credentials arrived without artwork. Rather than hold the whole grid
   back, they show as a lettered tile in the same 74px slot the logos occupy,
   so the rows stay aligned. Drop a real logo into images/cert/ and swap the
   <span> for an <img> when the artwork exists.
   --------------------------------------------------------------------------- */
.cert-logo-text {
  display: grid;
  place-items: center;
  min-width: 74px;
  height: 62px;
  padding: 0 14px;
  border: 2px solid var(--teal-500);
  border-radius: 2px;
  background: rgba(23, 163, 152, .07);
  color: var(--teal-600);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .04em;
}


/* ==========================================================================
   16. ARABIC / RIGHT-TO-LEFT
   --------------------------------------------------------------------------
   The layout itself is not repeated here. Every margin, padding, border and
   offset in this file is written as a logical property (inline-start /
   inline-end), so setting dir="rtl" on <html> mirrors the whole page on its
   own. What follows is only the handful of things that mirroring cannot do
   by itself: glyphs that point somewhere, a background image with a physical
   position, and the typographic rules that Arabic needs and Latin does not.
   ========================================================================== */

/* ---- 16.1 The Arabic face --------------------------------------------- */
/* IBM Plex Sans Arabic: open licence (SIL OFL), a matching Latin companion,
   and a technical rather than decorative tone, which suits this brand.
   The files are NOT in the repository. Download the woff2 files and drop
   them into fonts/ and these rules activate themselves; until then the
   system stack below carries the page, because a @font-face whose file is
   missing simply falls through to the next family in the list.

   Self-hosted, not Google Fonts, so the site still makes no third-party
   request and the privacy policy stays true. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Segoe UI carries Arabic on Windows but nowhere else, so the fallbacks
   matter: macOS and iOS land on SF Arabic or Geeza Pro, Android on Noto. */
[dir="rtl"] {
  --font-sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", "SF Arabic",
               "Segoe UI", Tahoma, "Geeza Pro", Arial, sans-serif;
}

/* ---- 16.2 Arabic typography ------------------------------------------- */
/* Arabic letters join. Tracking pulls those joins apart and turns a word
   into a row of loose, disconnected shapes - it is not a subtle difference,
   it makes the text look broken. Every letter-spacing in this file has to
   go, which is what earns the !important here: this is a correction for the
   script, not a style preference, and it has to beat 28 class selectors.
   Latin runs that still want their tracking opt back in with .lat below. */
[dir="rtl"] * { letter-spacing: normal !important; }

/* Arabic sits smaller on the line than Latin at the same size, and its
   ascenders and descenders need more room between lines. */
[dir="rtl"] body { font-size: 1.05rem; line-height: 1.8; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.45; }

/* Latin inside Arabic: the wordmark, "ISO 27001", "ERP", an email address.
   dir="ltr" keeps the characters in the right order, and the tracking and
   the Latin face come back. */
[dir="rtl"] .lat {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: revert !important;
}

/* Phone numbers, emails and URLs are Latin runs inside Arabic sentences.
   Without isolation the bidi algorithm reorders them and +962 7 9755 5112
   comes out backwards or with the + stranded at the wrong end. */
[dir="rtl"] bdi,
[dir="rtl"] .num {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- 16.3 Things that point ------------------------------------------- */
/* Every arrow on the site points the way the reader is travelling, so in RTL
   they all turn round - six of them, plus the nudge the CTA makes on hover. */
[dir="rtl"] .btn-arrow::after { content: "\2190"; }
[dir="rtl"] .section-more a::after,
[dir="rtl"] .card-more::after,
[dir="rtl"] .post-more::after,
[dir="rtl"] .ai-foot a::after,
[dir="rtl"] .section-head-link::after { content: " \2190"; }
[dir="rtl"] .btn-arrow:hover::after { transform: translateX(-5px); }

/* The tab list's chevron points back at the panel beside it. In LTR the list
   is on the right and the chevron points left; mirrored, both swap.
   Rebuilt rather than mirrored because the borders draw the glyph. */
[dir="rtl"] .tabs-nav label::before {
  border-left: 0;
  border-bottom: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

/* The select's chevron is a background image, and background-position has no
   logical form, so it is placed again on the other edge. */
[dir="rtl"] .field select { background-position: left 14px center; }

/* ---- 16.4 The language switch ----------------------------------------- */
.lang-switch {
  text-align: center;
  margin-inline-start: 18px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy-800);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.lang-switch:hover { border-color: var(--teal-500); color: var(--teal-600); }



/* ==========================================================================
   17. PHONE: CENTRED CONTENT
   --------------------------------------------------------------------------
   On a narrow screen the page reads as a single column, and a column of
   left-ranged blocks sitting under centred section headings looked
   half-finished. Everything is centred here instead.

   Two things are deliberately left ranged-left. Both are marked below with
   the reason, because in each case centring makes them worse rather than
   just different. Everything else follows the rule.
   ========================================================================== */
@media (max-width: 720px) {

  main,
  .site-footer { text-align: center; }

  /* Flex and grid rows do not answer to text-align, so each is centred on its
     own axis instead. */
  .hero-actions,
  .post-meta,
  .article-meta,
  .urgency-eyebrow,
  .footer-bottom { justify-content: center; }

  .footer-contact { align-items: center; }

  /* Label above its value rather than beside it, both centred */
  .contact-list li { flex-direction: column; align-items: center; gap: 4px; }
  .contact-label   { width: auto; }

  /* Icon above its heading rather than beside it */
  .cap-head { flex-direction: column; align-items: center; }

  /* Fixed-size blocks that sat at the start of their column */
  .page-hero-icon,
  .pillar-icon,
  .card-icon,
  .team-initials { margin-inline: auto; }

  /* ---- Exception 1: long-form prose --------------------------------------
     A centred paragraph starts every line in a different place, so the eye
     has to hunt for the beginning of the next one. That is survivable for two
     lines under a heading and not for a privacy policy or a 1,200-word
     article, so those stay ranged left. */
  .legal-block p,
  .legal-block li,
  .legal-block ul,
  .article-body p,
  .article-body li,
  .article-body ul,
  .article-body ol,
  .article-body blockquote { text-align: start; }

  /* ---- Exception 2: lists that carry their own markers -------------------
     These draw a bullet or a number into the item's leading padding. Centring
     the text leaves the marker stranded on the left, several words from the
     line it belongs to. The list is centred as a block instead and the items
     stay ranged left inside it, so every marker keeps its text.
     Each keeps its own inner display value, or the row gaps collapse. */
  .card-list,
  .feature-list   { display: inline-block; max-width: 100%; text-align: start; }

  .spec-list,
  .fw-list,
  .next-steps ol,
  .thanks-next ol { display: inline-grid; max-width: 100%; text-align: start; }

  /* Typed text belongs at the start of its field, whatever the page does */
  .field input,
  .field select,
  .field textarea { text-align: start; }

  /* A centred cell breaks the column edge that makes a table readable */
  .matrix-table th,
  .matrix-table td { text-align: start; }
}