/* ==================================================================
   Sana Logistics campaign landing page: stylesheet
   Arabic, right-to-left, mobile first. One file, no build step.

   Contents
   1.  Fonts (Cairo, self-hosted, Arabic and Latin subsets)
   2.  Design tokens (colours, type, easing, radii)
   3.  Base
   4.  Buttons
   5.  Top bar
   6.  Hero (6a benefits band on phones, 6b desktop grid)
   7.  Numbers strip
   8.  Our process
   9.  Section rhythm
   10. Products
   11. Facility gallery
   12. How it works and the platform scene
   13. Clients
   14. FAQ
   15. FAQ call to action and footer
   16. WhatsApp floating button
   17. Privacy dialog
   18. Motion

   Breakpoints are content-driven: 600, 700, 760, 860, 900, 960, 1240px.
   All paths are relative to this file (../fonts, ../img).
   ================================================================== */

/* ------------------------------------------------------------------
   1. Fonts
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cairo-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
    U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cairo-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cairo-arabic-600-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
    U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cairo-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cairo-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
    U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cairo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/cairo-arabic-800-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
    U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/cairo-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/cairo-arabic-900-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
    U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/cairo-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ------------------------------------------------------------------
   2. Design tokens
   Navy carries the structure, orange is reserved for actions, ticks and
   the arrow motif from the logo. Change colours here, not in the rules.
   ------------------------------------------------------------------ */
:root {
  --navy: #244082;
  --navy-deep: #1f2d4d;
  --desk: #02081c;
  --ink: #15213d;
  --text: #1b2437;
  --muted: #56607a;
  --orange: #f17624;
  --orange-deep: #c9560a;
  --orange-hover: #f98a3e;
  --orange-soft: #fdebdd;
  --mist: #eef2f7;
  --mist-2: #dfe5ee;
  --line: #cfd6e2;
  --white: #ffffff;
  --wa: #25d366;
  --wa-deep: #1ebe5d;
  --font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(21, 33, 61, 0.08), 0 24px 48px -16px rgba(21, 33, 61, 0.32);
  --ruler: repeating-linear-gradient(to right, transparent 0 7px, rgba(255, 255, 255, 0.28) 7px 8px),
    repeating-linear-gradient(to right, transparent 0 39px, rgba(255, 255, 255, 0.55) 39px 40px);
  color-scheme: light;
}
/* ------------------------------------------------------------------
   3. Base
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  background: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  touch-action: pan-y pinch-zoom;
}
/* Horizontal overflow is clipped per section, never on html/body: WebKit treats a clipped ancestor as the sticky header's scroller and the header stops sticking */
main > section:not(#services) {
  overflow-x: clip;
}
::selection {
  background: var(--orange-soft);
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
  font-weight: 900;
}
h1 {
  font-size: clamp(28px, 2.1rem + 1.6vw, 50px);
}
h2 {
  font-size: clamp(28px, 1.5rem + 1.6vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h3 {
  font-size: clamp(19px, 1.1rem + 0.3vw, 22px);
  font-weight: 700;
}
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter) max(16px, env(safe-area-inset-right, 0px));
}

/* ------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms ease,
    box-shadow 160ms ease;
  will-change: transform;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--orange);
  color: var(--navy-deep);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 8px 18px -10px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover {
  background: var(--orange-hover);
}
.btn-sm {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ------------------------------------------------------------------
   5. Top bar (sticky)
   ------------------------------------------------------------------ */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy-deep);
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--navy-deep);
  z-index: 41;
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-block: 8px;
}
.top img {
  width: 118px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ------------------------------------------------------------------
   6. Hero: headline, quote form, benefits band, yard photo
   Phones stack them in that order; from 960px the desktop grid in 6b
   puts the copy and the form side by side and the photo last.
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--navy-deep);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 380px;
  background: url("../img/hero-bg-lines-1000.webp") left top/cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 380px;
  background: linear-gradient(
    to bottom,
    rgba(31, 45, 77, 0.25) 0,
    rgba(31, 45, 77, 0.45) 50%,
    rgba(31, 45, 77, 1) 100%
  );
  pointer-events: none;
}
.hero-copy,
.hero-formwrap,
.hero-band {
  position: relative;
  z-index: 1;
}
.hero-media {
  display: none;
  position: relative;
  overflow: hidden;
  order: 5;
  aspect-ratio: 16/10;
  background: var(--navy-deep);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-copy {
  padding: 24px var(--gutter) 0 max(16px, env(safe-area-inset-right, 0px));
}
.hero-copy h1 {
  color: #fff;
  font-size: clamp(29px, 1.4rem + 2.6vw, 38px);
  line-height: 1.28;
  display: grid;
  gap: 6px;
}
.hero-copy h1 .lead {
  display: block;
}
.hero-copy h1 .sub {
  display: block;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  max-width: 22em;
}
.hero-copy h1 em {
  display: inline-block;
  justify-self: start;
  font-style: normal;
  font-size: 0.56em;
  font-weight: 900;
  color: var(--orange);
  margin-top: 4px;
  padding: 4px 12px;
  border: 1.5px solid rgba(241, 118, 36, 0.55);
  border-radius: 999px;
  line-height: 1.4;
}
.hero-copy p {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 30em;
  margin-top: 14px;
}
.hero-formwrap {
  z-index: 3;
  padding: 22px var(--gutter) 0 max(16px, env(safe-area-inset-right, 0px));
}
/* 6a. Benefits band (phones): the yard photo sits under it, its sky extended upward and dissolving into the navy, so the ticks read on navy and the photo shows in full below them */
.hero-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--navy-deep);
  padding: 28px var(--gutter) calc(55.8vw + 8px) max(16px, env(safe-area-inset-right, 0px));
}
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero-sky-1000.webp") center bottom/100% auto no-repeat;
  background-image: image-set(url("../img/hero-sky-1000.webp") 1x, url("../img/hero-sky-1600.webp") 2x);
  pointer-events: none;
}
.hero-band::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% - 55.8vw + 80px);
  background: linear-gradient(
    to bottom,
    rgba(31, 45, 77, 0.92) 0,
    rgba(31, 45, 77, 0.82) 38%,
    rgba(31, 45, 77, 0.5) 66%,
    rgba(31, 45, 77, 0) 100%
  );
  pointer-events: none;
}
.hero-band .wrap {
  position: relative;
  z-index: 1;
}
.hero .ticks li {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  text-wrap: balance;
}
.ticks {
  display: grid;
  gap: 10px 22px;
}
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.ticks svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
}
.hero .ticks {
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 600px) {
  .hero .ticks {
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
  }
}
.card {
  background: #fff;
  color: var(--text);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 24px 48px -16px rgba(0, 0, 0, 0.45);
  padding: 26px 22px 22px;
}
.card h2 {
  font-size: 22px;
  margin-bottom: 2px;
  letter-spacing: 0;
  text-align: center;
}
.card .lead {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
  text-align: center;
  text-wrap: pretty;
}
.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 7px;
}
.input {
  width: 100%;
  height: 52px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--mist);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
  caret-color: var(--orange);
}
.input[dir="ltr"] {
  text-align: left;
}
.input::placeholder {
  color: #5d6780;
}
.input:hover {
  background: #e6ebf2;
}
.input:focus {
  outline: none;
  background: #fff;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(36, 64, 130, 0.14);
}
.field.invalid .input {
  background: #fdf0ee;
  border-color: #c8321f;
  box-shadow: none;
}
.err {
  display: none;
  color: #b52a18;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 5px;
  line-height: 1.4;
}
.field.invalid .err {
  display: block;
}
.phone {
  display: flex;
  direction: ltr;
  border: 1.5px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mist);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}
.phone:hover {
  background: #e6ebf2;
}
.phone:focus-within {
  background: #fff;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(36, 64, 130, 0.14);
}
.field.invalid .phone {
  background: #fdf0ee;
  border-color: #c8321f;
  box-shadow: none;
}
.phone .pre {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 14px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  border-inline-end: 1px solid rgba(21, 33, 61, 0.14);
  white-space: nowrap;
}
.phone .pre .flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  background: #0b7a3b;
  display: inline-block;
  position: relative;
}
.phone .pre .flag::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 5px;
  height: 1.5px;
  background: #fff;
  box-shadow: 0 2.5px 0 #fff;
}
.phone .input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
  text-align: left;
  letter-spacing: 0.03em;
  background: transparent;
}
.phone .input:hover,
.phone .input:focus {
  background: transparent;
  box-shadow: none;
}
.field.invalid .phone .input {
  background: transparent;
}
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.consent {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 14px;
  text-align: center;
}
.linkbtn {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.linkbtn:hover {
  color: var(--orange-deep);
}
.btn-submit {
  width: 100%;
  margin-top: 10px;
  position: relative;
  min-height: 56px;
  font-size: 17px;
  border-radius: 999px;
}
.btn-submit[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.85;
}
.btn-submit .spin {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(31, 45, 77, 0.3);
  border-top-color: var(--navy-deep);
  border-radius: 50%;
  animation: spin 0.55s linear infinite;
}
.btn-submit[aria-busy="true"] .spin {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.sendfail {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #fdecea;
  color: #8e2113;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.sendfail.on {
  display: block;
}
.sendfail a {
  color: inherit;
  font-weight: 800;
}

/* 6b. Desktop hero (min-width: 960px): the same world as the phone (navy, the line drawing behind the headline, the form card beside the copy); the yard photo follows the benefits and melts in from the navy */
@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 700px) 420px minmax(var(--gutter), 1fr);
    grid-template-rows: auto auto auto;
    background: var(--navy-deep);
    color: #fff;
  }
  .hero::before {
    inset: 0 0 auto;
    height: 620px;
    background: url("../img/hero-bg-lines-1000.webp") right top/min(62vw, 980px) auto no-repeat;
    opacity: 0.42;
  }
  .hero::after {
    inset: 0 0 auto;
    height: 620px;
    background: linear-gradient(to bottom, rgba(31, 45, 77, 0.2) 0, rgba(31, 45, 77, 0.5) 45%, rgba(31, 45, 77, 1) 100%),
      linear-gradient(to left, rgba(31, 45, 77, 0) 50%, rgba(31, 45, 77, 0.9) 100%);
  }
  .hero-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 56px 0 44px;
    padding-inline-end: 64px;
    margin: 0;
  }
  .hero-copy h1 {
    font-size: clamp(40px, 2rem + 1.4vw, 52px);
    line-height: 1.2;
    gap: 10px;
    text-shadow: none;
  }
  .hero-copy h1 .sub {
    font-size: 0.5em;
    line-height: 1.4;
  }
  .hero-copy h1 em {
    font-size: 0.42em;
    margin-top: 6px;
  }
  .hero-copy p {
    font-size: 18px;
    line-height: 1.6;
    margin-top: 18px;
    max-width: 32em;
    color: rgba(255, 255, 255, 0.88);
  }
  .hero-formwrap {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    padding: 48px 0 36px;
    background: none;
  }
  .card {
    padding: 28px 26px 24px;
  }
  .hero-band {
    grid-column: 1/-1;
    grid-row: 2;
    overflow: visible;
    padding: 0 var(--gutter) 40px;
    background: var(--navy-deep);
  }
  .hero-band::before,
  .hero-band::after {
    display: none;
  }
  .hero-band .wrap {
    display: block;
  }
  .hero-band .ticks {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    margin-top: 0;
  }
  .hero .ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 40px;
    max-width: 900px;
  }
  .hero .ticks li {
    text-shadow: none;
    font-size: 16.5px;
  }
  .hero-media {
    display: block;
    grid-column: 1/-1;
    grid-row: 3;
    order: 0;
    aspect-ratio: auto;
    height: clamp(440px, 38vw, 580px);
  }
  .hero-media img {
    object-position: center 58%;
  }
  .hero-shade {
    background: linear-gradient(
      to bottom,
      rgba(31, 45, 77, 1) 0%,
      rgba(31, 45, 77, 0.55) 22%,
      rgba(31, 45, 77, 0) 48%,
      rgba(31, 45, 77, 0) 80%,
      rgba(31, 45, 77, 0.9) 100%
    );
  }
}

@media (min-width: 1240px) {
  .hero-copy {
    padding-block: 72px 56px;
  }
  .hero-formwrap {
    padding-block: 56px 44px;
  }
  .hero .ticks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 28px;
    max-width: none;
  }
}
/* ------------------------------------------------------------------
   7. Numbers strip: label above value, hairlines between the cells
   ------------------------------------------------------------------ */
.numbers {
  background: var(--navy-deep);
  color: #fff;
  padding-block: 10px 14px;
}
.numbers ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.numbers li {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 30px 12px;
  min-width: 0;
}
.numbers li:nth-child(odd) {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.2);
}
.numbers li:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.numbers span {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  line-height: 1.4;
}
.numbers b {
  font-size: clamp(30px, 1.4rem + 2.6vw, 46px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--orange);
}
.numbers b small {
  font-size: 0.66em;
  font-weight: 900;
  margin-inline-start: 0.12em;
}
.numbers b.t {
  font-size: clamp(24px, 1rem + 2.2vw, 38px);
}

@media (min-width: 760px) {
  .numbers {
    padding-block: 34px 38px;
  }
  .numbers ul {
    grid-template-columns: repeat(4, 1fr);
  }
  .numbers li {
    padding: 8px 24px;
    border-bottom: 0 !important;
    justify-items: center;
    text-align: center;
  }
  .numbers li:nth-child(odd) {
    border-inline-end: 0;
  }
  .numbers li + li {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
  }
  .numbers b {
    font-size: clamp(34px, 1.4rem + 1.6vw, 48px);
  }
}

/* ------------------------------------------------------------------
   8. Our process: intro and the three stages drawn in line
   ------------------------------------------------------------------ */
.about {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.about .wrap {
  display: grid;
  gap: 26px;
}
.about h2 {
  font-size: clamp(26px, 1.3rem + 1.8vw, 38px);
}
.about p {
  color: var(--text);
  font-size: 17px;
  margin-top: 12px;
  max-width: 36em;
}
/* The three stages: complete drawings on a soft floor, no boxes; a dashed connector with an orange chevron between them (down the middle on phones, across on desktop) */
.path {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18'%3E%3Cpath d='M6 1v14M1.5 10.5 6 15l4.5-4.5' fill='none' stroke='%23F17624' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: grid;
  gap: 0;
}
.path li {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  position: relative;
  padding: 0 0 46px;
}
.path li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 46px;
  border-inline-start: 2px dashed rgba(36, 64, 130, 0.3);
  transform: translateX(-50%);
}
.path li::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12px;
  height: 18px;
  background: var(--arrow) center/contain no-repeat;
  transform: translateX(-50%);
  z-index: 1;
}
.path li:last-child {
  padding-bottom: 0;
}
.path li:last-child::before,
.path li:last-child::after {
  display: none;
}
.path img {
  display: block;
  width: min(74%, 240px);
  height: auto;
  mix-blend-mode: multiply;
  position: relative;
}
.path b {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  text-wrap: balance;
  margin-top: -6px;
}

@media (min-width: 760px) {
  .path {
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M17 6H3M7.5 1.5 3 6l4.5 4.5' fill='none' stroke='%23F17624' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
  }
  .path li {
    padding: 0;
  }
  .path li::after {
    left: auto;
    inset-inline-start: calc(-28px);
    bottom: auto;
    top: 38%;
    width: 28px;
    height: 0;
    border-inline-start: 0;
    border-top: 2px dashed rgba(36, 64, 130, 0.3);
    transform: none;
  }
  .path li::before {
    left: auto;
    inset-inline-start: -23px;
    bottom: auto;
    top: 38%;
    width: 18px;
    height: 12px;
    transform: translateY(-50%);
  }
  .path li:first-child::before,
  .path li:first-child::after {
    display: none;
  }
  .path li:last-child::before,
  .path li:last-child::after {
    display: block;
  }
  .path img {
    width: 100%;
    max-width: 230px;
  }
  .path b {
    font-size: 16.5px;
    margin-top: -10px;
  }
}

@media (min-width: 860px) {
  .about .wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: center;
  }
}

/* ------------------------------------------------------------------
   9. Section rhythm
   ------------------------------------------------------------------ */
section.block,
section.sec {
  padding-block: clamp(64px, 6vw + 24px, 112px);
}
section.about {
  padding-block: clamp(48px, 5vw + 16px, 88px);
}
.block-head {
  margin-bottom: 34px;
  max-width: 60ch;
}
.block-head p {
  color: var(--muted);
  margin-top: 10px;
  font-size: 17px;
}

/* ------------------------------------------------------------------
   10. Products: a row of chips, each with a small line icon
   ------------------------------------------------------------------ */
.kinds {
  background: var(--mist);
}
.kinds .block-head {
  margin-bottom: 22px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px 0 20px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(21, 33, 61, 0.04);
}
.chips svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--orange);
}

@media (max-width: 699px) {
  .chips .chip-long {
    order: 1;
  }
} /* phones: the long chip closes the list so the short ones pack together */
.kinds-more {
  margin-top: 20px;
  color: var(--text);
  font-size: 16px;
  max-width: 52ch;
}
.kinds-cta {
  margin-top: 26px;
  width: 100%;
}

@media (min-width: 700px) {
  .chips {
    gap: 12px;
  }
  .chips li {
    min-height: 56px;
    font-size: 17px;
    padding: 0 22px 0 24px;
  }
  .kinds-cta {
    width: auto;
  }
}

/* ------------------------------------------------------------------
   11. Facility gallery: six square tiles of Sana's own photos
   ------------------------------------------------------------------ */
.facility {
  background: #fff;
}
.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.shot figure {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 1;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .shot figure:hover img {
    transform: scale(1.03);
  }
}

@media (min-width: 760px) {
  .shots {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* ------------------------------------------------------------------
   12. How it works: three steps; the orange rails draw once when the
   section enters the viewport (class .in is added by main.js)
   ------------------------------------------------------------------ */
.how {
  background: var(--navy-deep);
  color: #fff;
  position: relative;
}
.how::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: var(--ruler);
  background-size:
    8px 10px,
    40px 10px;
  opacity: 0.6;
}
.how h2 {
  color: #fff;
}
.steps {
  display: grid;
  gap: 0;
  position: relative;
  margin-top: 8px;
}
.step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: 20px;
  position: relative;
}
.step .n {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  text-align: start;
}
.step .t {
  font-size: clamp(18px, 1rem + 0.6vw, 22px);
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  padding-top: 7px;
  max-width: 30ch;
}
.step + .step::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.step .rail {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 40px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
}
.step:first-child .rail {
  display: none;
}
.how.in .step + .step .rail {
  animation: rail 420ms var(--ease-out) forwards;
}
.how.in .step:nth-child(2) .rail {
  animation-delay: 120ms;
}
.how.in .step:nth-child(3) .rail {
  animation-delay: 420ms;
}

@keyframes rail {
  to {
    transform: scaleX(1);
  }
}
.how .btn {
  margin-top: 36px;
}
/* 12a. Platform scene: the desk mockup (platform-desk-2600/1300.webp, transparent above the desk) runs edge to edge; --desk continues under the caption and the button so the picture never looks cut */
.how.block {
  padding-bottom: 0;
}
.desk {
  margin: 34px 0 0;
}
.desk .scene-wrap {
  position: relative;
  background: var(--navy-deep);
}
.desk .scene {
  display: block;
  width: 100%;
  height: clamp(340px, 54vw, 820px);
  object-fit: cover;
  object-position: center bottom;
}
.desk .scene-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(2, 8, 28, 0), var(--desk));
}
.desk figcaption {
  background: var(--desk);
  padding: 12px var(--gutter) 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.how-foot {
  background: var(--desk);
  padding: 24px 0 clamp(52px, 6vw, 80px);
}
.how-foot .wrap {
  display: flex;
  justify-content: center;
}
.how-foot .btn {
  margin-top: 0;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 16px;
  }
  .step {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .step .n {
    font-size: 56px;
    width: auto;
    text-align: start;
  }
  .step + .step::before {
    display: none;
  }
  .step + .step .rail {
    inset-inline-start: auto;
    inset-inline-end: 0;
    top: -1px;
    width: 100%;
    height: 2px;
    transform-origin: right;
  }
  .step:first-child .rail {
    display: block;
    position: absolute;
    inset-inline: 0;
    width: 100%;
    top: -1px;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: right;
  }
  .how.in .step:first-child .rail {
    animation: rail 420ms var(--ease-out) forwards;
  }
  .how.in .step:nth-child(2) .rail {
    animation-delay: 380ms;
  }
  .how.in .step:nth-child(3) .rail {
    animation-delay: 760ms;
  }
  .desk {
    margin-top: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how.in .step .rail {
    animation: none;
    transform: none;
  }
}

/* ------------------------------------------------------------------
   13. Clients: a quiet wall of ten logos, hairlines only
   ------------------------------------------------------------------ */
.logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.logos li {
  display: grid;
  place-items: center;
  height: 96px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.logos li:nth-child(odd) {
  border-inline-end: 1px solid var(--line);
}
.logos img {
  max-height: 60px;
  width: auto;
  max-width: 84%;
  opacity: 1;
}

@media (min-width: 700px) {
  .logos {
    grid-template-columns: repeat(5, 1fr);
  }
  .logos li {
    height: 116px;
    padding: 20px 22px;
    border-inline-end: 1px solid var(--line);
  }
  .logos li:nth-child(5n) {
    border-inline-end: 0;
  }
  .logos img {
    max-height: 68px;
  }
}
#clients {
  padding-block-end: clamp(28px, 3vw, 44px);
}
#faq {
  padding-block-start: clamp(28px, 3vw, 44px);
}

/* ------------------------------------------------------------------
   14. FAQ (native <details>, height animated with grid rows)
   ------------------------------------------------------------------ */
.faq {
  max-width: 760px;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  transition: color 140ms ease;
}
.faq summary:hover {
  color: var(--navy);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--orange);
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary svg {
  transform: rotate(45deg);
}
.faq .a {
  color: var(--text);
  padding: 0 4px 20px;
  max-width: 62ch;
  font-size: 16.5px;
}
.faq .a p {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ease-out);
}
.faq .a p > span {
  overflow: hidden;
}

/* ------------------------------------------------------------------
   15. FAQ call to action and footer
   ------------------------------------------------------------------ */
.faq-cta {
  margin-top: 32px;
}
.foot {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.foot .wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px));
  padding-inline-end: max(84px, env(safe-area-inset-right, 0px));
}
.foot .linkbtn {
  color: #fff;
  font-size: 15px;
}

@media (min-width: 700px) {
  .foot .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline-end: 200px;
  }
}

/* ------------------------------------------------------------------
   16. WhatsApp floating button (href is set by main.js from the config)
   ------------------------------------------------------------------ */
.wa {
  position: fixed;
  inset-inline-end: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wa);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  padding: 0 18px 0 14px;
  min-height: 54px;
  border-radius: 999px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 12px 28px -10px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms ease;
}
.wa:hover {
  background: var(--wa-deep);
}
.wa:active {
  transform: scale(0.97);
}
.wa svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 599px) {
  .wa {
    width: 54px;
    min-height: 54px;
    padding: 0;
    justify-content: center;
    inset-inline-end: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .wa span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .consent {
    padding-inline: 52px;
  }
}

/* ------------------------------------------------------------------
   17. Privacy dialog (native <dialog>)
   ------------------------------------------------------------------ */
dialog.privacy {
  border: 0;
  border-radius: 10px;
  padding: 0;
  max-width: min(680px, calc(100vw - 32px));
  width: 100%;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    overlay 180ms allow-discrete,
    display 180ms allow-discrete;
}
dialog.privacy[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  dialog.privacy[open] {
    opacity: 0;
    transform: scale(0.96);
  }
}
dialog.privacy::backdrop {
  background: rgba(21, 33, 61, 0.55);
}
.privacy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.privacy-head h2 {
  font-size: 20px;
}
.xbtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition:
    background-color 140ms ease,
    transform 140ms var(--ease-out);
}
.xbtn:hover {
  background: var(--mist);
}
.xbtn:active {
  transform: scale(0.94);
}
.privacy-body {
  padding: 18px 22px 24px;
  max-height: min(68vh, 560px);
  overflow: auto;
  font-size: 15.5px;
}
.privacy-body h3 {
  font-size: 16px;
  margin: 14px 0 4px;
}
.privacy-body p {
  margin-bottom: 8px;
}
.privacy-body .draft {
  font-size: 13px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------------
   18. Motion: the hero entrance, only when motion is allowed
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy h1,
  .hero-copy p,
  .hero-formwrap .card {
    animation: rise 560ms var(--ease-out) both;
  }
  .hero-copy p {
    animation-delay: 90ms;
  }
  .hero-formwrap .card {
    animation-delay: 180ms;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}