/* ==========================================================================
   OMALSONS CORPORATION
   Custom Clearing Agent and Freight Forwarder, Karachi, Pakistan

   Typography follows the reference site supplied by the client: Outfit
   throughout, pill buttons, white ground with light neutral alternates and
   full width photographic banners.

   Colour: navy #16296E, teal #60B0C0, white.
   ========================================================================== */

:root {
  /* Brand palette: navy, #60B0C0, white.
     The navy carries 13.3:1 on white so it does text, buttons and links.
     The teal is only 2.48:1 on white, which fails even the 3:1 large text
     floor, so it is never text on white. It earns its place as the accent on
     the navy grounds (7.1:1) and as a solid fill with dark type on top. */
  --accent:       #16296E;   /* navy, 13.3:1 on white */
  --accent-deep:  #0D1A4A;   /* button hover */
  --accent-soft:  #E9ECF7;   /* pale navy tint for icon tiles */
  --accent-ink:   #16296E;

  --teal:         #60B0C0;
  --teal-soft:    #E7F3F6;
  --teal-deep:    #3E8D9E;

  /* Neutrals, tinted toward the navy so the greys belong to the palette */
  --dark:         #0B1638;   /* top bar, footer, banner overlays */
  --dark-soft:    #14225A;
  --heading:      #0C1330;   /* 18.2:1 on white */
  --body:         #454C6B;   /* 8.4:1 on white */
  --muted:        #666D8C;   /* 5.08:1 on white */

  --white:        #FFFFFF;
  --bg-alt:       #F4F5FA;
  --line-soft:    #E7E9F3;   /* soft block fill, never a rule */

  /* Text on dark */
  --on-dark:      #FFFFFF;
  --on-dark-70:   rgba(255, 255, 255, .78);
  --on-dark-50:   rgba(255, 255, 255, .58);

  --state-error:  #B3261E;
  --state-ok:     #1B7A4B;

  --shell:  1200px;
  --pad:    30px;
  --radius: 8px;
  --pill:   999px;

  --font:  'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-sm: 0 1px 2px rgba(12, 19, 48, .05), 0 6px 18px rgba(12, 19, 48, .07);
  --shadow-md: 0 4px 10px rgba(12, 19, 48, .08), 0 18px 44px rgba(12, 19, 48, .13);

  --dur:  220ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

/* ==========================================================================
   MOTION
   Everything here is additive. The `.js` class is set by app.js on first run,
   so if the script never loads nothing is ever hidden and the page renders as
   plain static HTML. All of it is switched off under prefers-reduced-motion.
   ========================================================================== */

/* Scroll reveal. Elements start offset and settle when they enter view. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal].is-in { will-change: auto; }

/* Hero copy arrives in sequence on load rather than all at once. */
@keyframes om-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .hero__copy > * { animation: om-rise .75s var(--ease) both; }
.js .hero__copy > :nth-child(1) { animation-delay: .10s; }
.js .hero__copy > :nth-child(2) { animation-delay: .20s; }
.js .hero__copy > :nth-child(3) { animation-delay: .30s; }
.js .hero__copy > :nth-child(4) { animation-delay: .40s; }

/* Slow push on the hero photograph so the banner is not a dead still. */
@keyframes om-drift { from { transform: scale(1); } to { transform: scale(1.09); } }
.js .hero .banner__img { animation: om-drift 24s ease-out both; }

/* Header condenses once the page is scrolled. */
.site-header { transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.site-header .shell { transition: height var(--dur) var(--ease); }
.site-header.is-scrolled { box-shadow: 0 6px 28px rgba(12, 19, 48, .14); }
.site-header.is-scrolled .shell { height: 68px; }
.site-header .brand__logo { transition: height var(--dur) var(--ease); }
.site-header.is-scrolled .brand__logo { height: 23px; }

/* Counters hold their own width so the layout does not jitter while running. */
.stat b { font-variant-numeric: tabular-nums; }

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* Every icon in the sprite is drawn as an outer shape with the detail cut out
   of it. fill-rule is inherited, so this reaches the symbol content through
   <use>; without it the inner marks merge into a solid blob. */
svg { fill-rule: evenodd; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent-ink); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-deep); }
::selection { background: var(--accent); color: var(--white); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --- Layout --------------------------------------------------------------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: 92px; }
.section--alt  { background: var(--bg-alt); }
.section--dark { background: var(--dark); color: var(--on-dark-70); }

/* --- Type ----------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--heading); font-weight: 600; line-height: 1.24; }

/* Light grounds use the deepened blue for a little more weight at 13px. */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
/* The brand blue is only 2:1 against the deep indigo grounds, so the teal
   takes over as the accent there (6.89:1). */
.on-dark .eyebrow,
.hero .eyebrow,
.section--dark .eyebrow { color: var(--teal); }

.h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; line-height: 1.14; }
.h2 { font-size: clamp(27px, 2.6vw, 36px); }
.h3 { font-size: 19px; font-weight: 600; }

.lede { font-size: 17px; line-height: 1.8; color: var(--body); max-width: 68ch; }
/* Justified with automatic hyphenation. Without the hyphens the justification
   would open ugly rivers of white space between words on a narrow measure. */
.prose p {
  font-size: 16.5px;
  line-height: 1.85;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.prose p + p { margin-top: 18px; }

.section-head { max-width: 70ch; margin-bottom: 52px; }
.section-head.is-centred { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-bottom: 14px; }

.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); }
.on-dark .lede, .on-dark p { color: var(--on-dark-70); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: var(--pill);
  font-size: 15.5px;
  font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-deep); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* White pill with a brand blue label, the reference site's button treatment */
.btn--light { background: var(--white); color: var(--accent); box-shadow: var(--shadow-sm); }
.btn--light:hover { background: var(--accent); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.btn--outline:hover { background: var(--white); color: var(--accent); transform: translateY(-2px); }

.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* --- Top bar -------------------------------------------------------------- */
.topbar { background: var(--dark); color: var(--on-dark-70); font-size: 14px; }
.topbar .shell {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 26px; padding-block: 10px;
}
.topbar a { color: var(--on-dark); font-weight: 500; }
/* Navy on navy would vanish here, so hover goes to the teal. */
.topbar a:hover { color: var(--teal); }
.topbar .tbc {
  background: var(--accent); color: var(--white);
  padding: 1px 9px; border-radius: var(--pill);
  font-size: 12px; font-weight: 600;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(12, 19, 48, .09);
}
.site-header .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; height: 84px;
}

/* Logo: the company's own artwork, taken from their existing site. The source
   file is 249x33, so it is held at 26px tall to stay above 1:1 density. */
.brand { display: flex; align-items: center; }
.brand__logo { height: 26px; width: auto; max-width: 100%; }
@media (max-width: 480px) { .brand__logo { height: 22px; } }

/* Reversed for the footer. The artwork is a single navy ink, so knocking it
   to white keeps the exact shapes rather than needing a second file. */
.brand__logo--rev { filter: brightness(0) invert(1); margin-bottom: 14px; height: 28px; }

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { font-size: 15.5px; font-weight: 500; color: var(--body); }
.site-nav a:hover { color: var(--accent); }

/* `.site-nav a` (0,1,1) outranks `.btn--primary` (0,1,0), so without this the
   button label inherits the grey body colour and sits at 1.6:1 on the navy,
   which is effectively invisible. Keep these selectors at or above 0,2,0. */
.site-nav a.btn { padding: 12px 26px; font-size: 14.5px; }
.site-nav a.btn--primary,
.site-nav a.btn--primary:hover { color: var(--white); }
.site-nav a.btn--light { color: var(--accent); }
.site-nav a.btn--light:hover { color: var(--white); }

.nav-toggle { display: none; padding: 10px; margin-right: -10px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--heading); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   BANNER SLOTS
   Every banner uses the same three part structure so artwork can be swapped
   by changing one <img src>. Sizes are noted in the markup.
   ========================================================================== */
.banner { position: relative; overflow: hidden; background: var(--dark); }
.banner__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* Port photography is dark to begin with. Lift it a little so it still
     reads as a photograph once the overlay is on top. */
  filter: brightness(1.12) saturate(.92);
}
.banner__overlay { position: absolute; inset: 0; }
.banner .shell { position: relative; }

/* Hero banner */
.hero { min-height: 620px; display: flex; align-items: center; }
/* Heavy enough on the left to hold white headline text at AA, then falls away
   quickly so the right side of the photograph is actually visible. */
.hero .banner__overlay {
  background:
    linear-gradient(92deg,
      rgba(11, 22, 56, .94) 0%,
      rgba(11, 22, 56, .86) 30%,
      rgba(20, 40, 80, .48) 64%,
      rgba(96, 176, 192, .14) 100%);
}
.hero .shell { width: 100%; padding-block: 92px; }
.hero__copy { max-width: 730px; }
.hero .h1 { color: var(--on-dark); margin-bottom: 22px; }
.hero__sub { font-size: 18.5px; line-height: 1.8; color: var(--on-dark-70); max-width: 58ch; margin-bottom: 36px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Interior page banner: same three part banner structure as the hero, shorter,
   with the page title and a breadcrumb. */
.page-banner { min-height: 320px; display: flex; align-items: center; }
.page-banner .banner__overlay {
  background:
    linear-gradient(92deg,
      rgba(11, 22, 56, .94) 0%,
      rgba(11, 22, 56, .86) 38%,
      rgba(20, 40, 80, .62) 72%,
      rgba(96, 176, 192, .22) 100%);
}
.page-banner .shell { width: 100%; padding-block: 78px; }
.page-banner h1 { color: var(--on-dark); font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 12px; }
.page-banner p { color: var(--on-dark-70); font-size: 17px; max-width: 58ch; }

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 14.5px; color: var(--on-dark-50); margin-bottom: 16px;
}
.crumb a { color: var(--teal); }
.crumb a:hover { color: var(--white); }
.crumb i { font-style: normal; opacity: .6; }

/* Current page in the nav */
.site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.site-nav a.btn[aria-current="page"] { color: var(--white); }

/* Feature cards riding the bottom of the hero */
.highlights { position: relative; z-index: 5; margin-top: -66px; }
.highlights__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.highlight {
  background: var(--white); border-radius: var(--radius);
  padding: 28px 26px 30px; box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.highlight:hover { transform: translateY(-4px); }
/* Teal tint here, blue tint on the service cards below, so the two card rows
   are distinguishable without introducing a third hue. */
.highlight__icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--teal-soft); display: grid; place-items: center; margin-bottom: 16px;
}
.highlight__icon svg { width: 24px; height: 24px; fill: var(--accent); }
.highlight b { display: block; font-size: 17px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.highlight p { font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* Mid page call to action banner */
.cta-banner { min-height: 340px; display: flex; align-items: center; }
.cta-banner .banner__overlay {
  background:
    linear-gradient(90deg,
      rgba(11, 22, 56, .93) 0%,
      rgba(11, 22, 56, .84) 34%,
      rgba(20, 40, 80, .46) 68%,
      rgba(96, 176, 192, .12) 100%);
}
.cta-banner .shell { padding-block: 76px; }
.cta-banner__inner { max-width: 640px; }
.cta-banner h2 { color: var(--on-dark); margin-bottom: 14px; }
.cta-banner p { color: var(--on-dark-70); font-size: 17px; margin-bottom: 28px; max-width: 52ch; }

/* --- Trust strip ---------------------------------------------------------- */
.trust { background: var(--white); padding-block: 40px; }
.trust__label { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.trust__wrap { overflow: hidden; }
.trust__track { display: flex; align-items: center; width: max-content; animation: om-marquee 64s linear infinite; }
.trust:hover .trust__track { animation-play-state: paused; }

/* Each slot is a fixed box so logos of wildly different aspect ratios sit on a
   common optical baseline instead of jumping in size. */
.trust__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: 30px;
}
.trust__item img {
  /* Every logo gets an identical box and is scaled to fit inside it, so a
     square mark and a 10:1 wordmark occupy exactly the same footprint. Doing
     this in CSS rather than by padding the source files means a new logo can
     be dropped in with no processing. */
  width: 168px;
  height: 60px;
  object-fit: contain;
  object-position: center;
  /* Full brand colour, no desaturation. */
  opacity: .92;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.trust__item:hover img { opacity: 1; transform: scale(1.04); }

/* On the clients page the strip is the content, not a footnote, so it runs
   larger and sits on the tinted ground. */
.trust--page { background: var(--bg-alt); padding-block: 26px; }
.trust--page .trust__item { height: 104px; padding-inline: 34px; }
.trust--page .trust__item img { width: 210px; height: 78px; opacity: 1; }
@media (max-width: 720px) {
  .trust--page .trust__item { height: 76px; padding-inline: 20px; }
  .trust--page .trust__item img { width: 150px; height: 56px; }
}

/* Fallback for clients with no obtainable logo file. */
.trust__item .wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted);
  white-space: nowrap;
}
@keyframes om-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* --- About ---------------------------------------------------------------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 66px; align-items: center; }
.about__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.about__media img { width: 100%; min-height: 470px; object-fit: cover; }
.about__badge {
  position: absolute; left: 0; bottom: 0;
  background: var(--accent); color: var(--white);
  padding: 24px 30px; border-radius: 0 var(--radius) 0 0; max-width: 260px;
}
.about__badge b { display: block; font-size: 40px; font-weight: 700; line-height: 1; }
.about__badge span { display: block; font-size: 14px; line-height: 1.55; margin-top: 8px; color: rgba(255, 255, 255, .94); }
.about__points { margin-top: 26px; display: grid; gap: 14px; }
.about__points li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; color: var(--body); }
.about__points svg { width: 21px; height: 21px; fill: var(--accent); flex: none; margin-top: 4px; }

/* --- Service cards -------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 30px 34px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Navy bar wipes in across the top edge on hover. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--teal) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }

.card:hover,
.card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.card__icon {
  width: 54px; height: 54px; border-radius: var(--radius);
  background: var(--accent-soft);
  display: grid; place-items: center; margin-bottom: 20px;
  transition: background var(--dur) var(--ease), transform 320ms var(--ease);
}
.card__icon svg {
  width: 27px; height: 27px; fill: var(--accent);
  transition: fill var(--dur) var(--ease);
}
/* Tile fills navy and the glyph reverses out of it. */
.card:hover .card__icon,
.card:focus-within .card__icon { background: var(--accent); transform: rotate(-6deg) scale(1.06); }
.card:hover .card__icon svg,
.card:focus-within .card__icon svg { fill: var(--white); }

.card h3 { color: var(--accent-ink); margin-bottom: 9px; transition: color var(--dur) var(--ease); }
.card:hover h3, .card:focus-within h3 { color: var(--accent-deep); }
.card p { font-size: 15.5px; line-height: 1.72; color: var(--body); }

/* --- Trade tools ---------------------------------------------------------- */
.tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tool-tile {
  background: rgba(255, 255, 255, .06); border-radius: var(--radius);
  padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 9px;
  color: var(--on-dark);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Hover lands on the solid teal with dark indigo type over it: 7.19:1, and a
   far clearer state change than blue on blue would give. */
.tool-tile:hover { background: var(--teal); color: var(--heading); transform: translateY(-4px); }
.tool-tile svg { width: 26px; height: 26px; fill: var(--teal); transition: fill var(--dur) var(--ease); }
.tool-tile:hover svg { fill: var(--heading); }
.tool-tile b { font-size: 17px; font-weight: 600; }
.tool-tile span { font-size: 13.5px; line-height: 1.6; color: var(--on-dark-50); transition: color var(--dur) var(--ease); }
.tool-tile:hover span { color: rgba(12, 19, 48, .82); }

.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.calc { background: rgba(255, 255, 255, .06); border-radius: var(--radius); padding: 30px 28px 32px; }
.calc h3 { color: var(--on-dark); margin-bottom: 20px; font-size: 20px; }
.calc__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }

.field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100px; min-width: 0; }
.field > span { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-50); }
.field input, .field select {
  background: rgba(5, 10, 28, .55); border: 0; border-radius: var(--radius);
  color: var(--on-dark); padding: 13px 14px; outline: none; font-size: 16px; width: 100%;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus { box-shadow: inset 0 0 0 2px var(--teal); }
.field select option { background: var(--dark-soft); color: var(--on-dark); }

.swap { background: rgba(255, 255, 255, .14); color: var(--on-dark); border-radius: var(--radius); padding: 13px 16px; font-size: 13px; font-weight: 600; }
.swap:hover { background: var(--teal); color: var(--heading); }

.calc__out { font-size: 34px; font-weight: 600; color: var(--on-dark); margin-top: 24px; line-height: 1.2; }
.calc__note { font-size: 13.5px; color: var(--on-dark-50); margin-top: 8px; line-height: 1.6; }

/* --- Why choose us -------------------------------------------------------- */
/* auto-fit so the same component handles the four "why" points and the five
   clearance stages without a second grid definition. */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 28px; }
.why__num {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); color: var(--white);
  display: grid; place-items: center; font-size: 18px; font-weight: 700; margin-bottom: 18px;
}
.why__item b { display: block; font-size: 18px; font-weight: 600; color: var(--heading); margin-bottom: 8px; }
.why__item p { font-size: 15.5px; line-height: 1.72; }

/* --- Milestone strip ------------------------------------------------------ */
.stat-strip { background: var(--accent); color: var(--on-dark); padding-block: 46px; }
.stat-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.stat { text-align: center; }
.stat b {
  display: block; font-size: clamp(32px, 4vw, 44px); font-weight: 700;
  line-height: 1.05; color: var(--white); letter-spacing: -.01em;
}
.stat span {
  display: block; margin-top: 8px; font-size: 14px; font-weight: 500;
  letter-spacing: .04em; color: rgba(255, 255, 255, .8);
}

/* --- Leadership ------------------------------------------------------------
   Portrait cards. Where no photograph exists the slot keeps its exact
   dimensions and shows a monogram, so the row stays even whether a picture is
   available or not. */
.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1000px;
  margin-inline: auto;
}
.person {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: center;
  padding-bottom: 28px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.person:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.person__photo {
  aspect-ratio: 3 / 4;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.person__photo--placeholder { background: linear-gradient(160deg, var(--accent-soft), var(--teal-soft)); }
.person__photo--placeholder span {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  opacity: .55;
}

.person__name { font-size: 19px; font-weight: 600; color: var(--heading); margin: 24px 22px 4px; }
.person__role {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 22px 12px;
}
.person__bio { font-size: 15px; line-height: 1.7; color: var(--body); margin: 0 22px; }

@media (max-width: 900px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 620px) {
  .people { grid-template-columns: 1fr; max-width: 340px; }
  /* Square, not landscape. The portraits are shot 3:4, so a landscape box would crop
     away most of the frame and leave a tight band across the face. */
  .person__photo { aspect-ratio: 1 / 1; }
  .person__photo img { object-position: center 18%; }
}

/* --- Mission statement ---------------------------------------------------- */
.mission { max-width: 900px; margin-inline: auto; text-align: center; }
.mission .eyebrow { color: var(--teal); }
.mission__quote {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--on-dark);
  position: relative;
  padding-top: 18px;
}
/* Quote mark as a decorative flourish rather than a literal glyph in the text. */
.mission__quote::before {
  content: "\201C";
  display: block;
  font-size: 68px;
  line-height: .6;
  color: var(--teal);
  margin-bottom: 10px;
}

/* --- Clients ---------------------------------------------------------------
   Two sections. Current clients run as logos in the marquee above; the rest
   are named here until their artwork arrives. */
.client-names {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.client-name {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--heading);
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 78px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.client-name:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Small navy tick so the row reads as an entry, not a heading. */
.client-name::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
/* Logo tile, same footprint as a name tile so the grid stays even. */
.client-tile {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.client-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Identical box per tile, same principle as the marquee. The box is kept close
   to square rather than wide and short: a round mark is limited by the shorter
   side, so the old 190x52 box rendered circular logos at just 52px and left
   them looking lost in a wide card. */
.client-tile img { width: 180px; height: 84px; object-fit: contain; object-position: center; }

/* The short name row that sits under the current clients marquee. */
.client-names--inline {
  grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
  justify-content: center;
  margin-top: 30px;
}

@media (max-width: 1024px) { .client-names { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .client-names { grid-template-columns: 1fr; gap: 10px; }
  .client-name { min-height: 0; padding: 15px 18px; font-size: 14.5px; }
  /* Same reasoning as desktop: the tile goes full width on a phone, so a short
     box would shrink the round marks to nothing. */
  .client-tile { min-height: 0; padding: 16px 18px; }
  .client-tile img { width: 100%; height: 68px; }
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 900px; margin-inline: auto; display: grid; gap: 14px; }
.faq__item { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; font-size: 17px; font-weight: 600; color: var(--heading); text-align: left;
}
.faq__q:hover { color: var(--accent); }
.faq__mark { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 18px; font-weight: 600; transition: transform var(--dur) var(--ease); }
.faq__item.is-open .faq__mark { transform: rotate(45deg); }
.faq__a { display: none; padding: 0 26px 24px; font-size: 16px; line-height: 1.8; color: var(--body); }
.faq__item.is-open .faq__a { display: block; }

/* --- Contact -------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.contact__details { margin-top: 30px; display: grid; gap: 20px; }
.contact__row { display: flex; gap: 16px; align-items: flex-start; }
.contact__ico { width: 44px; height: 44px; border-radius: var(--radius); background: var(--accent-soft); display: grid; place-items: center; flex: none; }
.contact__ico svg { width: 22px; height: 22px; fill: var(--accent); }
.contact__row b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.contact__row span, .contact__row a { font-size: 16.5px; color: var(--heading); }
.contact__row a:hover { color: var(--accent); }
.tbc { background: var(--accent); color: var(--white); padding: 1px 10px; border-radius: var(--pill); font-size: 13px; font-weight: 600; }

/* Map panel on the contact page. Keyless Google embed, so nothing to
   configure; the link underneath is the fallback if the frame ever fails. */
.map-panel {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-alt);
  aspect-ratio: 16 / 7;
  min-height: 300px;
}
.map-panel iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 720px) { .map-panel { aspect-ratio: 4 / 3; } }

.contact__row a + a { margin-top: 2px; }

.form { background: var(--white); border-radius: var(--radius); padding: 38px 36px 40px; box-shadow: var(--shadow-md); }
.section--alt .form { background: var(--white); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-grid .field--wide { grid-column: span 2; }
.form .field > span { color: var(--muted); }
.form .field input, .form .field textarea {
  background: var(--bg-alt); border: 0; border-radius: var(--radius); color: var(--heading);
  padding: 14px 15px; outline: none; width: 100%; resize: vertical;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--dur) var(--ease);
}
.form .field input:focus, .form .field textarea:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.form .field input[aria-invalid="true"], .form .field textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--state-error); }
.form__foot { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.form__foot .field { flex: 0 0 160px; }
.form__msg { margin-top: 18px; font-size: 15px; line-height: 1.6; }
.form__msg[data-state="error"] { color: var(--state-error); }
.form__msg[data-state="ok"] { color: var(--state-ok); }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--dark); color: var(--on-dark-50); padding-block: 66px 0; }
.site-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 44px; }
.site-footer .name { font-size: 24px; font-weight: 700; color: var(--on-dark); margin-bottom: 14px; }
.site-footer p { font-size: 15px; line-height: 1.8; max-width: 40ch; }
.site-footer h4 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 18px; }
.site-footer li { margin-bottom: 11px; font-size: 15px; }
.site-footer a { color: var(--on-dark-70); }
.site-footer a:hover { color: var(--accent); }
.site-footer__base {
  margin-top: 52px; padding-block: 24px; font-size: 14px;
  background: rgba(255, 255, 255, .07);
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
}
.site-footer__base .shell { display: contents; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .about { grid-template-columns: 1fr; gap: 44px; }
  /* Once the column stacks, the media is full width, so the 470px desktop
     floor made a very tall frame. Scale it with the viewport and cap it. */
  .about__media img { min-height: 0; height: clamp(225px, 46vw, 330px); }
  .about__badge { padding: 18px 22px; max-width: 220px; }
  .about__badge b { font-size: 32px; }
  .about__badge span { font-size: 13px; margin-top: 6px; }
  .contact { grid-template-columns: 1fr; gap: 44px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  :root { --pad: 20px; }

  .section { padding-block: 62px; }
  .site-header .shell { height: 72px; }

  /* Touch targets. Stacked link lists render as 19px line boxes on a phone,
     well under the 44px anyone can reliably hit, so they get real vertical
     padding rather than being left as bare text. */
  .nav-toggle { display: grid; place-content: center; min-width: 44px; min-height: 44px; }
  .site-footer li a,
  .site-footer__base a,
  .contact__row a,
  .topbar a { display: inline-block; padding-block: 9px; }
  .site-footer li { margin-bottom: 2px; }
  .crumb a { display: inline-block; padding-block: 10px; }

  .site-nav {
    position: fixed; inset: 100% 0 auto;
    background: var(--white);
    box-shadow: 0 18px 36px rgba(12, 19, 48, .18);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px var(--pad) 26px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a { padding-block: 15px; font-size: 17px; }
  .site-nav .btn { margin-top: 14px; }

  /* Top bar: the tagline wrapped to two lines and ate the fold, so on a phone
     it drops to the contact details only. */
  .topbar { font-size: 13px; }
  .topbar .shell { padding-block: 7px; justify-content: center; }
  .topbar__tagline { display: none; }
  .topbar a { padding-block: 5px; }

  /* Hero: shorter panel and tighter type so the first cards are reachable
     without a long scroll. */
  .hero { min-height: 0; }
  .hero .shell { padding-block: 48px 44px; }
  .hero .h1 { font-size: clamp(29px, 8.2vw, 36px); margin-bottom: 14px; }
  .hero__sub { font-size: 15.5px; line-height: 1.65; margin-bottom: 26px; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { flex: 1 1 auto; padding: 13px 20px; font-size: 14.5px; }

  /* Two cards per screen rather than one. */
  .highlights { margin-top: 26px; }
  .highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .highlight { padding: 18px 16px 20px; }
  .highlight__icon { width: 38px; height: 38px; margin-bottom: 12px; }
  .highlight__icon svg { width: 19px; height: 19px; }
  .highlight b { font-size: 15px; line-height: 1.3; margin-bottom: 5px; }
  .highlight p { font-size: 13px; line-height: 1.55; }

  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .why__num { width: 40px; height: 40px; font-size: 15px; margin-bottom: 12px; }
  .why__item b { font-size: 16px; }
  .why__item p { font-size: 14px; line-height: 1.6; }

  .cards, .tools-grid, .calc-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field--wide { grid-column: span 1; }
  .form { padding: 28px 22px 30px; }
  /* Height is already handled by the clamp in the 1024px block above. */
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Reveal targets must be fully visible, not just instantly transitioned,
     in case the observer never fires. */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .hero .banner__img { animation: none !important; }
  .btn:hover, .card:hover, .tool-tile:hover, .highlight:hover { transform: none; }
  .card:hover .card__icon, .card:focus-within .card__icon { transform: none; }
  .card::before { transition: none; }
}