/* ==========================================================================
   HITCO — header, mega menu, mobile drawer, footer
   Panels anchor to the inline-start of their trigger, so RTL is a true
   mirror rather than a patched LTR layout.
   ========================================================================== */

/* ---------- utility bar ---------- */
.topbar {
  background: var(--c-band);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--t-xs);
      border-bottom: 1px solid #a7a7a738;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-block-size: 38px;
}

/* ---------- chrome width ---------- */
/* The topbar and the header row are FULL-BLEED on every page: they keep the
   `.container` class in the markup for the small-screen padding, but drop its
   1240px cap and take `--gutter` instead, so the brand mark and the utility
   links sit on the screen's own edge.

   Asked for by the user, twice: first for the homepage, where the chrome is
   overlaid on a full-bleed photograph and a centred container left the logo
   ~350px short of the window edge, then for the whole site. It is a deliberate
   lift of CLAUDE.md rule 4 — do not undo it as "the header should match the
   container".

   ⚠️ The consequence is that on ordinary pages the chrome is WIDER than the
   content under it: the logo sits at the screen gutter while the page's own
   `.container` still stops at 1240px. That is the intended look (chrome to the
   edge, reading column contained), not a bug to be tidied away.

   NOT the mega panels: those were full-bleed for one build and the user's read
   was «خیلی بزرگه». They are dropdowns now, sized to their own content and
   anchored under their own trigger — see the mega block below.
   NOT `.searchbar__inner` either — a search field stretched across 1840px is
   harder to use, not easier. */
.topbar__inner,
.header__inner {
  max-inline-size: none;
  padding-inline: var(--gutter);
}
.topbar__links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.topbar a {
  color: rgba(255, 255, 255, 0.7);
}
.topbar a:hover {
  color: #fff;
}
.topbar__pv {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: #fff !important;
  font-weight: 700;
}
.topbar__pv::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--c-green);
  flex: none;
}
@media (max-width: 860px) {
  .topbar__links--sec {
    display: none;
  }
}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-surface);
  border-block-end: 1px solid var(--c-line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  min-block-size: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}
.brand img {
  block-size: 42px;
  inline-size: auto;
}
.brand__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand__txt b {
  font-size: var(--t-base);
  color: var(--c-ink);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand__txt span {
  font-size: 10.5px;
  color: var(--c-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[dir="rtl"] .brand__txt span {
  letter-spacing: 0;
  text-transform: none;
  font-size: 11.5px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
  flex: none;
}

.icon-btn {
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--c-body);
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.icon-btn:hover {
  background: var(--c-wash);
  color: var(--c-primary);
}
.icon-btn svg {
  inline-size: 19px;
  block-size: 19px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-body);
}
.lang-switch:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* ---------- primary nav ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
@media (max-width: 1100px) {
  .nav {
    display: none;
  }
}

.nav__item {
  position: static;
}
.nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  block-size: var(--header-h);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink);
  border-block-end: 2px solid transparent;
  transition: color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
  white-space: nowrap;
}
/* Panel-less nav entries (Home) — same slot as .nav__btn, no chevron gap. */
.nav__btn--link {
  gap: 0;
}
.nav__btn:hover,
.nav__btn[aria-expanded="true"] {
  color: var(--c-primary);
  border-block-end-color: var(--c-primary);
}
.nav__btn.is-active {
  color: var(--c-primary);
  border-block-end-color: var(--c-green);
}
.nav__chev {
  inline-size: 11px;
  block-size: 11px;
  flex: none;
  opacity: 0.55;
  transition: transform var(--dur-2) var(--ease);
}
.nav__btn[aria-expanded="true"] .nav__chev {
  transform: rotate(180deg);
}

/* ---------- mega panel ---------- */
/* A DROPDOWN under its own trigger, not a sheet across the window. It was
   full-bleed for one build and the user's verdict was «خیلی بزرگه»: a two-column
   list of links does not need 1840px, and a panel that wide stops reading as
   belonging to the button that opened it.
   Each panel is now as wide as its own content, capped, and its horizontal
   position is set by `place()` in hitco.js.
   ⚠️ WHY JS AND NOT CSS: the panels are siblings of `.header__inner`, not
   children of `.nav__item` (see partials/header.php), so there is no ancestor
   to anchor to — `position:relative` on the item would do nothing from here.
   Positioning them in CSS would mean moving six large blocks of markup inside
   their `<div class="nav__item">`. JS also buys the edge clamp for free, which
   CSS cannot do without anchor positioning: in LTR the last triggers sit far
   enough right that a panel aligned to their start would run off-screen. */
.mega {
  position: absolute;
  /* `left` is what JS writes — physical, because it computes the value for both
     directions itself, the same call as `.phero__pager`'s `direction:ltr`.
     These two are the pre-JS fallback and the reset between openings. */
  left: 0;
  right: auto;
  top: calc(100% + 6px);
  /* As wide as it wants to be, then capped. The cap is what makes the Companies
     panel's 6-column logo grid fold down to a sane size — its tiles are 300px
     square at max-content and would otherwise ask for ~1800px. */
  /* Every desktop panel uses the same frame. The previous max-content sizing
     made Contact look like a small popover while Companies looked like a full
     navigation surface, even though both belong to the same nav bar. */
  inline-size: min(920px, calc(100vw - var(--gutter) * 2));
  min-inline-size: 0;
  max-inline-size: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  /* ⚠️ **14px, NOT `--radius-card` (6px).** The token is calibrated for cards
     sitting IN the page; this is a sheet floating over it, and at 6px a 380px
     panel reads as a bare box. The larger curve is the single change that most
     makes it read as a considered surface — but it stays local to the panel, so
     nothing else in the design system moves with it. */
  border-radius: 14px;
  /* Layered rather than one drop shadow: a tight contact shadow that sets the
     panel ON the page, a long diffuse one that lifts it OFF, and a 1px inner
     highlight along the top edge — the light-catching edge is what separates
     "floating box" from "physical sheet". `--shadow-2` alone is a card shadow
     and reads flat at this size. */
  box-shadow: 0 1px 1px rgba(14, 31, 39, 0.04), 0 6px 16px -8px rgba(14, 31, 39, 0.16),
    0 28px 64px -28px rgba(14, 31, 39, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* Clips the accent rule below to the corner radius. Safe: the only absolutely
     positioned descendant is `.mega__fly`, which is inset inside `.mega__browse`
     and never reaches the panel's edge. */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  /* Rises AND settles: the slight under-scale makes the panel arrive rather than
     appear. Kept small — anything more is a flourish you notice on the second
     open and resent by the tenth. */
  transform: translateY(-10px) scale(0.985);
  transform-origin: top center;
  transition: opacity var(--dur-2) var(--ease),
    transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  z-index: 99;
}
/* ⚠️ **NO TRANSLUCENCY, NO BACKDROP FILTER, DELIBERATELY.** The obvious modern
   move here is glass — and it is wrong on this panel: `hero-poster.js` turns the
   header opaque (`.is-solid`) precisely BECAUSE this sheet is opaque white, and
   a see-through panel would put the hero artwork behind the menu links while the
   header sits solid above them. See the note in hero-poster.css.

   The hairline of brand colour along the top edge is the substitute: it is what
   marks the sheet as HITCO's rather than as a default browser-grey dropdown. */
.mega::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(
    to right,
    var(--c-primary) 0%,
    var(--c-green) 55%,
    rgba(52, 155, 71, 0) 100%
  );
  z-index: 1;
}
/* The gradient reads start-to-end, so in RTL it has to run the other way or the
   accent fades out under the trigger instead of away from it. */
[dir="rtl"] .mega::before {
  background: linear-gradient(
    to left,
    var(--c-primary) 0%,
    var(--c-green) 55%,
    rgba(52, 155, 71, 0) 100%
  );
}
/* The two BROWSE panels are wider — they are not a list of links but a rail
   plus a flyout, and the flyout has to hold logo tiles at a readable size. */
.mega--browse {
  inline-size: min(920px, calc(100vw - var(--gutter) * 2));
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    transition: none;
  }
}

/* Still carries `.container` in the markup; inside a dropdown that class's
   1240px cap, auto margins and page gutter are all wrong, so they are undone
   here and replaced with panel padding. `inline-size:auto` matters: `.container`
   sets `width:100%`, and a percentage width on the only child of a
   `max-content` box is a circular sizing question best not asked. */
.mega__inner {
  display: grid;
  inline-size: auto;
  max-inline-size: none;
  margin-inline: 0;
  gap: var(--s-6);
  padding: var(--s-8);
  grid-template-columns: minmax(0, 1fr) 260px;
  min-block-size: 340px;
  align-items: stretch;
}
/* Under ~1240px the panel is clamped by the viewport rather than by its own
   cap, so the aside is the first thing to give. */
@media (max-width: 1240px) {
  .mega__inner {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: var(--s-6);
  }
}
/* The browse panels have no aside — the rail is the navigation and the flyout
   is the content, so a third column would only take room off the tiles. */
.mega--browse .mega__inner {
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

/* ---------- browse panel: category rail + flyout ---------- */
/* The rail lists the categories; the flyout shows ONLY the active one's
   children, laid over the same box. That is what lets a 960px panel carry a
   set of logo tiles that a single flat grid could only render at ~40px.
   Modelled on the client's other site (/peleh) at their request. */
.mega__browse {
  position: relative;
  /* Fixed, so the panel does not resize as the pointer runs down the rail —
     a panel that changes height under the cursor is the classic way to make a
     mega menu feel unstable. Tall enough for the longest flyout AND for the
     rail itself, which is what actually sets the floor here: seven sectors at
     ~38px. */
  min-block-size: 260px;
}
.mega__cats {
  inline-size: 232px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-inline-end: 1px solid var(--c-line);
  padding-inline-end: var(--s-3);
}
.mega__cat-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px var(--s-3);
  border-radius: 9px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-body);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
/* The rail's active row is the panel's centre of gravity — it says which flyout
   you are looking at. A wash fill alone was too quiet to carry that, so the
   marker states it in brand colour. Same device as `.mega__link`, one size up. */
.mega__cat-link::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 3px;
  inline-size: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-green));
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.mega__cat.is-active > .mega__cat-link::before,
.mega__cat > .mega__cat-link:hover::before {
  opacity: 1;
  transform: none;
}
.mega__cat-link > span:first-child {
  flex: 1;
  min-inline-size: 0;
}
/* The count is the only thing telling you how much is behind a rail row while
   its flyout is closed. */
.mega__cat-n {
  flex: none;
  font-size: var(--t-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
/* The `chevron` glyph points DOWN, so a caret pointing along the reading
   direction is a ROTATION, not a mirror: `rotate(-90deg)` = →, `rotate(90deg)`
   = ←. See md/frontend.md §RTL — and note this shipped backwards once, which
   is invisible until you put the two locales side by side. */
.mega__cat-chev {
  flex: none;
  inline-size: 13px;
  block-size: 13px;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity var(--dur-1) var(--ease);
}
[dir="rtl"] .mega__cat-chev {
  transform: rotate(90deg);
}
/* ⚠️ Colour and fill only — NOT `font-weight`. The rail is a fixed 232px and a
   bolder label is a wider one, so a seven-row list would reflow under the
   pointer and a long sector name would wrap on hover and unwrap on leave. Same
   rule as `.mega__link` above: the surface moves, the text does not. */
.mega__cat.is-active > .mega__cat-link,
.mega__cat > .mega__cat-link:hover {
  background: var(--c-wash);
  color: var(--c-primary-deep);
}
.mega__cat.is-active > .mega__cat-link .mega__cat-chev,
.mega__cat > .mega__cat-link:hover .mega__cat-chev {
  opacity: 0.7;
}

.mega__fly {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(232px + var(--s-6));
  inset-inline-end: 0;
  display: none;
  overflow-y: auto;
}
/* JS owns the state once it has run: exactly one `.is-active` at a time, so a
   previous category's flyout can never linger behind the new one. Keying off
   :hover AND :focus-within instead is what produced two open flyouts at once on
   the site this was modelled on. */
.mega__browse.is-js .mega__cat.is-active > .mega__fly {
  display: block;
}
/* No-JS fallback, scoped so it can never coexist with the rule above: the first
   category is shown, and hover swaps it. */
.mega__browse:not(.is-js) .mega__cat:first-child > .mega__fly {
  display: block;
}
.mega__browse:not(.is-js)
  .mega__cats:has(.mega__cat:not(:first-child):hover)
  .mega__cat:first-child
  > .mega__fly {
  display: none;
}
.mega__browse:not(.is-js) .mega__cat:hover > .mega__fly {
  display: block;
}

.mega__fly-all {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-primary);
}
.mega__fly-all:hover {
  color: var(--c-primary-deep);
}
.mega__fly-all .arw {
  inline-size: 14px;
  block-size: 14px;
}
/* Down first, then across — a menu column reads as a list; the same links
   spread across a row read as unrelated. `auto-fill` was tried and is wrong
   here: HITCO's categories have 1–4 children, so it produced one sparse row
   with three quarters of the flyout empty beside it.
   ⚠️ No images in this flyout, unlike the companies one: `categories.image`
   holds legacy filenames (`39.png`) whose files were never migrated into
   `uploads/`. If they are ever restored, this is the place tiles belong. */
.mega__fly-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  grid-auto-columns: minmax(150px, max-content);
  justify-content: start;
  gap: 2px var(--s-10);
  align-content: start;
}

/* Tiles, not a bare list: a subsidiary is recognised by its mark first. */
.mega__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-2);
}
/* ⚠️ **A RESTING SURFACE, NOT `transparent`.** With an invisible box the flyout
   read as a handful of grey logos floating in a large white void — a sector with
   four subsidiaries has to look composed, not unfinished. A faint paper fill and
   hairline make each one a chip, so the grid has a rhythm whether it holds four
   or twelve. Hover then lifts the chip to white. */
.mega__tile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  border-radius: 10px;
  font-size: var(--t-sm);
  color: var(--c-body);
  transition: border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* A 1px lift with a shadow under it. ⚠️ `translateY`, never a margin or a
   size change — a tile that reflows on hover shoves the rest of the grid, and
   these sit twelve to a panel. */
.mega__tile:hover {
  border-color: var(--c-line);
  background: var(--c-surface);
  color: var(--c-primary-deep);
  box-shadow: 0 6px 18px -10px rgba(14, 31, 39, 0.35);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .mega__tile:hover {
    transform: none;
  }
}
/* 44px square: every company logo on disk is a 1:1 canvas, so a square box is
   the only shape `object-fit:contain` can actually fill — see the note on
   `.mega__logo` below and md/frontend.md §Square logo tiles. */
.mega__tile-img {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  overflow: hidden;
}
.mega__tile-img--empty {
  display: none;
}
.mega__tile-img img {
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.mega__tile:hover img {
  filter: none;
  opacity: 1;
}
/* Company identities should be recognisable before interaction. Their brand
   colours are content, not a hover effect; keep product-category artwork on
   the shared treatment above. */
#mega-companies .mega__tile-img img {
  filter: none;
  opacity: 1;
  transition: none;
}
.mega__tile-name {
  line-height: 1.45;
}
.mega__tile--text {
  min-block-size: 58px;
  padding: var(--s-3);
  font-weight: 600;
}
.mega__tile-icon {
  inline-size: 38px;
  block-size: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.mega__tile-icon svg {
  inline-size: 20px;
  block-size: 20px;
}
.mega__tile:hover .mega__tile-icon {
  background: var(--c-green-soft);
  color: var(--c-green);
}

.mega__foot {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--c-line);
}

.mega__cols {
  display: grid;
  gap: var(--s-6);
  align-content: start;
}
.mega__cols--2 {
  grid-template-columns: 1fr;
}
.mega__cols--3 {
  grid-template-columns: repeat(3, 1fr);
}
.mega__cols--4 {
  grid-template-columns: repeat(4, 1fr);
}

.mega__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-inline-size: 0;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-paper);
}
.mega__label {
  position: relative;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* ⚠️ The page justifies body copy, and a heading inherits it: in English
     «BOARD OF DIRECTORS» wrapped to two lines and the first was stretched edge
     to edge — «BOARD        OF». A heading is never justified. */
  text-align: start;
  color: var(--c-ink);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--c-line);
}
/* A short brand segment laid over the start of the hairline. The rule under a
   group heading is structure; this turns it into a detail — and it costs one
   pseudo-element rather than a second border colour to keep in sync. */
.mega__label::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 26px;
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--c-primary), var(--c-green));
}
[dir="rtl"] .mega__label {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--t-sm);
}
/* Pulled back by the link's own inline padding, so the LABEL and the link TEXT
   still share one edge while the hover surface extends past it on both sides.
   Without this the whole list sits 10px inside its heading. */
.mega__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-inline: -10px;
}
/* ⚠️ **HOVER MUST NOT MOVE THE TEXT.** The previous state animated
   `padding-inline-start`, so pointing at a link nudged it sideways and, with the
   pointer travelling down a column, the whole list twitched row by row. The
   surface moves instead of the content: a soft pill fades in behind the text and
   a brand marker grows in the gutter it already occupies. */
.mega__link {
  position: relative;
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: var(--t-sm);
  color: var(--c-body);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mega__link::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 2px;
  inline-size: 2px;
  block-size: 14px;
  margin-block-start: -7px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-green));
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.mega__link:hover,
.mega__link:focus-visible {
  background: var(--c-wash);
  color: var(--c-primary-deep);
}
.mega__link:hover::before,
.mega__link:focus-visible::before {
  opacity: 1;
  transform: none;
}
.mega__link small {
  display: block;
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin-block-start: 1px;
}

/* logo grid variant (Companies) */
/* 6 columns, not 4: every company logo on disk is a 1:1 square canvas, so a
   wide short tile can never be filled by an object-fit:contain square — it
   caps at the tile's height. Narrow, near-square tiles let the mark actually
   occupy the box. 12 logos → 2 rows. */
.mega__logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-2);
}
/* The logo is the tile: the <img> stretches to the full content box and
   object-fit:contain scales the mark up as large as it will go without
   distorting it. Only the no-logo fallback centres text. */
.mega__logo {
  /* grid-template-rows:minmax(0,1fr) is load-bearing, not decoration.
     The tile needs a fixed block-size, and the <img> below must resolve its
     block-size:100% against it. A bare `auto` or `1fr` row will not do it:
     both floor at the row's min-content size, which for a 300px-square logo
     is 300px — the row blows past the 82px tile and overflow:hidden clips the
     middle out of every mark. minmax(0,…) removes that floor. */
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  padding: 10px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-surface);
  transition: border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--c-body);
  font-weight: 500;
  line-height: 1.35;
}
.mega__logo--text {
  place-items: center;
  padding: var(--s-3);
  aspect-ratio: auto;
  min-block-size: 82px;
}
.mega__logo:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  box-shadow: 0 8px 20px -12px rgba(15, 127, 184, 0.55);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .mega__logo:hover {
    transform: none;
  }
}
.mega__logo img {
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.mega__logo:hover img {
  filter: none;
  opacity: 1;
}
@media (max-width: 1240px) {
  .mega__logos {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* featured rail */
/* The one editorial object in the whole menu, so it is allowed to look like a
   card rather than like a column: a soft vertical wash instead of a flat fill,
   and a deeper curve that echoes the panel's own. */
.mega__rail {
  background: linear-gradient(170deg, var(--c-wash) 0%, var(--c-surface) 78%);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-block-size: 100%;
}
.mega__rail-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 9px;
  overflow: hidden;
  background: var(--c-line);
}
/* A hairline drawn INSIDE the image rather than a border on the box: a border
   would sit outside the radius clip and read as a frame, and against a photo
   that is heavier than the panel's own edges. */
.mega__rail-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(14, 31, 39, 0.08);
  pointer-events: none;
}
.mega__rail-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}
.mega__rail:hover .mega__rail-media img {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .mega__rail:hover .mega__rail-media img {
    transform: none;
  }
}
.mega__rail h4 {
  font-size: var(--t-base);
  line-height: var(--lh-snug);
}
/* ⚠️ **NOT JUSTIFIED**, though the page's body copy is. This column is ~200px
   wide, and justification at that measure opens rivers of white space between
   words — «By investing in    and   managing» — which is the single fastest way
   to make a considered card look cheap. Ragged edge, even spacing. */
.mega__rail p {
  font-size: var(--t-sm);
  color: var(--c-body);
  text-align: start;
  line-height: var(--lh-body);
}

/* ---------- mobile ---------- */
.burger {
  display: none;
}
@media (max-width: 1100px) {
  .burger {
    display: grid;
  }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 31, 39, 0.5);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.drawer.is-open .drawer__scrim {
  opacity: 1;
}
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: min(400px, 88vw);
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--dur-3) var(--ease);
  box-shadow: var(--shadow-2);
}
[dir="rtl"] .drawer__panel {
  transform: translateX(100%);
}
.drawer.is-open .drawer__panel {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .drawer__panel,
  .drawer__scrim {
    transition: none;
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--c-line);
  flex: none;
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-3) var(--s-5) var(--s-10);
  -webkit-overflow-scrolling: touch;
}
.drawer__foot {
  padding: var(--s-5);
  border-block-start: 1px solid var(--c-line);
  display: flex;
  gap: var(--s-3);
  flex: none;
}

.acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 15px 0;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--c-ink);
  border-block-end: 1px solid var(--c-line);
  text-align: start;
}
.acc__btn .nav__chev {
  opacity: 0.5;
}
.acc__btn[aria-expanded="true"] {
  color: var(--c-primary);
}
.acc__btn[aria-expanded="true"] .nav__chev {
  transform: rotate(180deg);
}
/* A drawer row that navigates instead of expanding (e.g. Careers). Its arrow
   points along the reading direction rather than rotating open. */
.acc__btn--flat .nav__chev {
  opacity: 0.45;
  inline-size: 16px;
  block-size: 16px;
}
[dir="rtl"] .acc__btn--flat .nav__chev {
  transform: scaleX(-1);
}
.acc__btn--flat:hover {
  color: var(--c-primary);
}
.acc__panel {
  display: none;
  padding: var(--s-3) 0 var(--s-5);
  border-block-end: 1px solid var(--c-line);
}
.acc__panel.is-open {
  display: block;
}
.acc__panel .mega__label {
  margin-block-start: var(--s-4);
}
.acc__panel .mega__label:first-child {
  margin-block-start: 0;
}
.acc__group {
  display: block;
  padding-block: 8px;
  text-decoration: none;
}
.acc__sub {
  border-block-end: 1px solid var(--c-line);
}
.acc__sub > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 12px 10px;
  color: var(--c-ink);
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.acc__sub > summary::-webkit-details-marker { display: none; }
.acc__sub > summary:hover { background: var(--c-paper); }
.acc__sub-chev {
  inline-size: 14px;
  block-size: 14px;
  opacity: .45;
  transition: transform var(--dur-1, .15s);
}
.acc__sub[open] > summary {
  color: var(--c-primary-deep);
  background: var(--c-primary-soft);
}
.acc__sub[open] .acc__sub-chev { transform: rotate(180deg); }
.acc__sub-panel {
  padding: 3px 10px 10px;
}
.acc__link--all {
  color: var(--c-primary);
  font-weight: 700;
}
.acc__link {
  display: block;
  padding: 9px 0;
  font-size: var(--t-sm);
  color: var(--c-body);
}
.acc__link--child {
  margin-inline-start: var(--s-2);
  padding: 7px var(--s-3);
  border-inline-start: 1px solid var(--c-line);
}
.acc__link:hover {
  color: var(--c-primary);
}

/* ---------- search overlay ----------
   A sheet hanging off the header's bottom edge, same as a mega panel.
   `.is-open` is the only state and hitco.js owns it.

   `visibility`, NOT `display:none`: display cannot be transitioned, and
   visibility takes the panel out of the tab order and the accessibility tree
   just as well — which was the only thing display:none was buying. The delayed
   `visibility` step in the transition is what keeps the panel around long
   enough to fade OUT; without it the close is instant and the fade never
   plays. */
.searchbar {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--c-surface);
  border-block-end: 1px solid var(--c-line);
  box-shadow: var(--shadow-2);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.searchbar.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

/* Dims the page under the panel and is the click-anywhere close target.
   A SIBLING of the header, not a child, at a z-index just under the header's
   100 — so the header and its panel stay sharp and everything else recedes,
   including the fixed AI launcher at 90.
   ⚠️ It was a child with `z-index:-1` first. That does not work: a
   negative-z child paints above its stacking context's OWN background and only
   below that context's in-flow content, so the header background went grey
   under it while the labels on top stayed sharp. */
.searchbar__scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(14, 31, 39, 0.34);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease),
    visibility 0s linear var(--dur-2);
}
.searchbar__scrim.is-open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.searchbar__inner {
  padding-block: var(--s-6) var(--s-5);
}
.searchbar__form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Pill field rather than the old full-width underline: the underline ran the
   whole container and read as a page rule, not as an input. */
.searchbar__field {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-inline: var(--s-5);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  transition: background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.searchbar__field:focus-within {
  background: var(--c-surface);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.searchbar__icon {
  inline-size: 19px;
  block-size: 19px;
  flex: none;
  color: var(--c-muted);
}
.searchbar__field:focus-within .searchbar__icon {
  color: var(--c-primary);
}

.searchbar input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  padding-block: 14px;
  font-size: var(--t-base);
  color: var(--c-ink);
}
.searchbar input:focus {
  outline: none;
}
.searchbar input::placeholder {
  color: var(--c-muted);
}
/* Chrome's native clear affordance is unstyleable, sits at the wrong edge in
   RTL and duplicates .searchbar__clear. */
.searchbar input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.searchbar__clear {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--c-muted);
  background: var(--c-wash);
  transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.searchbar__clear:hover {
  background: var(--c-line);
  color: var(--c-ink);
}
.searchbar__clear svg {
  inline-size: 12px;
  block-size: 12px;
}
.searchbar__clear[hidden] {
  display: none;
}

.searchbar__go {
  flex: none;
  white-space: nowrap;
}

/* ⚠️ NOT `.icon-btn`. hero-poster.css paints `.header:not(.is-solid) .icon-btn`
   white so the overlaid nav reads on the banner, and a white glyph on this
   white sheet is invisible — which is exactly what shipped. Its own class
   cannot be caught by that rule at all. (The header is also forced solid while
   the panel is open, but this button must not depend on that.) */
.searchbar__close {
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--c-muted);
  border: 1px solid var(--c-line);
  background: transparent;
  transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.searchbar__close:hover {
  background: var(--c-wash);
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}
.searchbar__close svg {
  inline-size: 15px;
  block-size: 15px;
}

/* Most visitors open this looking for a section, not a keyword. */
.searchbar__hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-4);
}
.searchbar__hints-label {
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin-inline-end: var(--s-1);
}
.searchbar__chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-body);
  background: var(--c-wash);
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.searchbar__chip:hover {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
}

/* Field and close share the first row, submit takes the second at full width —
   at this size the three of them on one line leave the field too narrow to
   read what you typed. */
@media (max-width: 640px) {
  .searchbar__form {
    flex-wrap: wrap;
  }
  .searchbar__field {
    flex: 1 1 auto;
    order: 1;
  }
  .searchbar__close {
    order: 2;
  }
  .searchbar__go {
    order: 3;
    flex-basis: 100%;
  }
  .searchbar__hints {
    margin-block-start: var(--s-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .searchbar,
  .searchbar__scrim {
    transition: none;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--c-band);
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--t-sm);
}
.footer a {
  color: rgba(255, 255, 255, 0.62);
}
.footer a:hover {
  color: #fff;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--s-10);
  padding-block: var(--s-20) var(--s-16);
}
@media (max-width: 1000px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-10);
  }
}
@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 36ch;
}
.footer__brand img {
  block-size: 46px;
  inline-size: auto;
}
.footer__col h4 {
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block-end: var(--s-5);
}
[dir="rtl"] .footer__col h4 {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--t-sm);
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.footer__social {
  display: flex;
  gap: var(--s-2);
}
.footer__social a {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
.footer__social a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}
.footer__social svg {
  inline-size: 16px;
  block-size: 16px;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-xs);
  flex-wrap: wrap;
}
.footer__legal {
  display: flex;
  gap: var(--s-6);
  flex-wrap: wrap;
}

/* ---- justified body copy · centred blocks keep their centring ------------
   The `:where(p, blockquote, dd)` rule in hitco.css declares alignment ON the
   paragraph, and a direct declaration outranks the `text-align: center` these
   containers pass DOWN to it by inheritance. Re-inheriting restores them.
   Add a centred container that holds a paragraph and it belongs in this list. */
.mega__logo :where(p, blockquote, dd) {
  text-align: inherit;
}