/* ── Construction ───────────────────────────────────────────────────────────────────
   Porto Construction 2 adapted for Farza: square geometry, a navy shell,
   slate navigation, neutral reading surfaces and angled bands. Content still comes exclusively from
   the CMS; this sheet only owns presentation. */





.construction-theme {
  /* Navy/slate branding surrounds the owner's #eee reading surface and black text. */
  --construction-primary: #0b192f;
  --construction-fill: #0b192f;
  --construction-ink: #000;
  --construction-primary-deep: #0b192f;
  --construction-primary-light: #37474f;
  --construction-navy: #37474f;
  --construction-header-background: #37474f;
  --construction-accent: #0b192f;
  --construction-on-dark: #e5e7eb;
  --construction-surface: #eee;
  --construction-soft: #e2e2e2;
  --construction-second: #eee;
  --construction-text: #000;
  --construction-title: #000;
  --construction-line: #ccc;
  --construction-muted: #000;
  --construction-dark: #0b192f;

  font-family: "IRANSansX", Tahoma, Arial, sans-serif;
  color: var(--construction-text);
  margin: 0;
}

/* Width utilities and full-width containers include their padding and borders. */
.construction-theme,
.construction-theme *,
.construction-theme *::before,
.construction-theme *::after {
  box-sizing: border-box;
}

/* This theme omits Tailwind Preflight, so reset browser link decoration here. */
.construction-theme a {
  text-decoration: none;
}

@layer base {
  .construction-theme a { color: inherit; }
}

/* The default heading colour has to be overridable by a utility class, because a heading
   laid over a dark band carries `text-white`. Specificity alone cannot achieve that:
   Tailwind emits every utility inside `@layer utilities`, and unlayered CSS beats layered
   CSS outright, whatever the selectors look like. Joining the `components` layer — which
   app.build.css already establishes ahead of `utilities` — puts this rule where a utility
   can win. Element-level defaults belong here; the .construction-* component classes below stay
   unlayered on purpose, so nothing overrides them by accident. */
@layer components {
  .construction-theme :where(h1, h2, h3, h4, h5, h6) {
    color: var(--construction-text);
    font-weight: 800;
  }
}

/* ── Shell ──────────────────────────────────────────────────────────────────
   One width for every band on the page, so a card in a grid lines up with the
   heading above it and with the footer column below. */
.construction-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 64rem) {
  .construction-container { padding-inline: 2rem; }
}

/* Every band on the page measures its breathing room from here, so a phone can be given back its
   screen in one place. Three sizes, because the theme uses three: the banner stands taller than a
   content band, and a call-to-action strip sits shorter than one.

   These belong in CSS rather than in `py-*` utilities on each view. A section's padding is not a
   per-view decision — it is the rhythm of the theme — and spelling it out eleven times meant a
   phone kept the desktop 5rem in all eleven, which is 160px of empty band per section and most of
   the reason the home page ran to ten thousand pixels on a 390px screen. */
.construction-section { padding-block: 5rem; }
.construction-section--tall { padding-block: 6rem; }
.construction-section--short { padding-block: 4rem; }

@media (max-width: 36rem) {
  .construction-section { padding-block: 3rem; }
  .construction-section--tall { padding-block: 3.5rem; }
  .construction-section--short { padding-block: 2.5rem; }
}

/* ── Decoration ─────────────────────────────────────────────────────────────
   Background texture only. These never stand in for a field the editor left
   empty; they sit behind whatever is there. */
.construction-dots {
  background-image: radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
}

.construction-slant {
  background-image:
    linear-gradient(164deg, transparent 0 72%, rgb(229 231 235 / 0.08) 72.1% 76%, transparent 76.1%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 14px);
}

.construction-slant--ink {
  background-image: repeating-linear-gradient(
    135deg,
    rgb(11 25 47 / 0.06) 0 1px,
    transparent 1px 14px);
}

/* ── Utility bar ───────────────────────────────────────────────────────────── */
.construction-topbar {
  border-bottom: 1px solid var(--construction-line);
  background: var(--construction-surface);
  color: var(--construction-muted);
  font-size: 0.8125rem;
}

.construction-topbar a { transition: color 0.3s ease; }
.construction-topbar a:hover { color: var(--construction-ink); }

.construction-header {
  border-bottom: 0;
  background: var(--construction-header-background);
  box-shadow: 0 0.75rem 2rem rgb(11 25 47 / 0.14);
}

.construction-header__inner {
  display: flex;
  min-height: 5.2rem;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.5rem;
}

.construction-header__navigation {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

.construction-brand {
  position: relative;
  display: flex;
  min-width: min(19rem, 42vw);
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.75rem;
  background: var(--construction-fill);
  color: #fff;
}

.construction-brand::after {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -1.5rem;
  width: 1.55rem;
  background: var(--construction-fill);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: "";
}

/* The logo gets a steel-grey tile instead of sitting straight on the navy brand block.
   A mark with a transparent ground takes the colour behind it. The tile
   echoes the header bar, so the badge looks placed rather than pasted on. `contain` because the
   logo's proportions are the logo's business, not the theme's. */
.construction-brand__logo {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  padding: 0.25rem;
  background: var(--construction-header-background);
  object-fit: contain;
}

.construction-brand__title {
  overflow: hidden;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.construction-menu-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  /* On a phone this is the only way into the site, so it may never be the thing that gives way when
     the bar runs short of room. A flex item shrinks below its width by default; this one does not. */
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: transparent;
  color: #fff;
}

.construction-mobile-menu {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  background: var(--construction-surface);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.construction-account { position: relative; flex: 0 0 auto; }
.construction-account__trigger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  color: #fff;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
.construction-account__trigger::-webkit-details-marker { display: none; }
.construction-account__trigger:hover,
.construction-account[open] > .construction-account__trigger { background: rgb(255 255 255 / 0.12); }
.construction-account__trigger:focus-visible {
  outline: 2px solid var(--construction-on-dark);
  outline-offset: 3px;
}
.construction-account__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  inset-inline-end: 0;
  z-index: 70;
  width: 16rem;
  max-height: min(24rem, 60dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem;
  border: 1px solid var(--construction-line);
  background: var(--construction-surface);
  color: var(--construction-text);
  box-shadow: 0 0.75rem 2rem rgb(11 25 47 / 0.18);
}
.construction-account__name {
  margin: 0 0 0.25rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--construction-line);
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  font-weight: 700;
}
.construction-account__panel form { margin: 0; }
.construction-account__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--construction-text);
  font: inherit;
  font-size: 0.875rem;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}
.construction-account__item:hover { background: var(--construction-soft); }

@media (max-width: 63.999rem) {
  .construction-header__navigation { gap: 0.5rem; }
  .construction-account { position: static; }
  .construction-account__panel { top: 100%; inset-inline: 1rem; width: auto; }
}

@media (max-width: 48rem) {
  /* Reserve room for both account and navigation controls, their gaps and the brand slant. */
  .construction-header__inner { gap: 1rem; padding-inline-end: 1rem; }
  .construction-brand { min-width: 0; max-width: calc(100% - 7.75rem); padding-inline: 1rem; }
  .construction-brand::after { inset-inline-end: -0.9rem; width: 0.95rem; }
  .construction-brand__title { font-size: 0.9rem; }
}

@media (max-width: 36rem) {
  /* A company name is not a label that may be cut short. Held on one line, «شرکت طرح و ساخت زرین
     فناور» loses its last word to an ellipsis on a 320px screen, and the ellipsis lands mid-name
     where it reads as a different company. Two lines cost a few pixels of bar height and keep it. */
  .construction-brand__title {
    overflow: visible;
    font-size: 0.875rem;
    line-height: 1.5;
    text-overflow: clip;
    white-space: normal;
  }

  /* The name needs the width more than the badge does once the two share a phone's brand block. */
  .construction-brand__logo { width: 2.25rem; height: 2.25rem; }
}

/* Below the desktop breakpoint this link lives in the drawer instead, where it has a row to itself.
   Two classes rather than one on purpose: `.construction-button` sets `display: inline-flex` further
   down the file, a lone `.construction-header__cta` ties with it on specificity and then loses on
   source order, and the call to action stayed in the bar on every phone — wrapped onto two lines,
   cut off by the brand block, and squeezing the menu button to a 24px sliver. Scoping it to the
   header settles the tie wherever either rule ends up. */
@media (max-width: 63.999rem) {
  .construction-header {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 100dvh;
  }

  .construction-header .construction-header__cta { display: none; }
}

@media (min-width: 64rem) {
  .construction-menu-button { display: none; }
}

@media (max-width: 63.999rem) and (max-height: 30rem) {
  .construction-topbar { display: none; }
}

/* ── Header ─────────────────────────────────────────────────────────────────
   The nav link keeps a transparent border of the same weight it grows on hover,
   so nothing shifts when the mark appears. */
.construction-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: 1.65rem;
  border-bottom: 2px solid transparent;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.construction-nav-link:hover,
.construction-mega[data-open] > .construction-nav-link {
  border-bottom-color: var(--construction-on-dark);
  color: var(--construction-on-dark);
}

.construction-mega__panel { color: var(--construction-text); }

.construction-nav-trigger {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  cursor: pointer;
}

.construction-nav-trigger svg { transition: transform 0.2s ease; }
.construction-mega[data-open] .construction-nav-trigger svg { transform: rotate(180deg); }

/* ── Buttons ────────────────────────────────────────────────────────────────
   Square, small and set in the paragraph face — the template's buttons never
   round off, which is most of what separates this theme from a soft one. */
.construction-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--construction-fill);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.construction-button:hover {
  background: var(--construction-navy);
  box-shadow: 0 0.75rem 1.75rem rgb(11 25 47 / 0.22);
}

.construction-button--accent {
  background: var(--construction-accent);
  color: #fff;
}

.construction-button--accent:hover {
  background: var(--construction-surface);
  color: var(--construction-text);
}

.construction-button--ghost {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.55);
  color: #fff;
}

.construction-button--ghost:hover {
  background: var(--construction-surface);
  border-color: var(--construction-surface);
  color: var(--construction-text);
  box-shadow: none;
}

/* An inline "read on" link; the arrow is decorative and RTL-flipped by the page. */
.construction-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--construction-ink);
  font-size: 0.875rem;
  font-weight: 700;
  transition: gap 0.25s ease, color 0.25s ease;
}

.construction-textlink:hover { gap: 0.85rem; color: var(--construction-text); }

/* "همه خدمات ←" and its kind are 21px of text with nothing around them — half the height a
   fingertip needs, and on a phone they are how the visitor leaves the section. The link grows a
   touch area; being inline-flex and centred, the text does not move. */
@media (max-width: 48rem) {
  .construction-textlink { min-height: 2.75rem; }

  .construction-footer a,
  .construction-mobile-menu a,
  .construction-mobile-menu button {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    overflow-wrap: anywhere;
  }
}

/* Keyboard focus has to be visible on every control the theme restyles. A button with
   `border: 0` and a background of its own loses the platform ring on some engines, and the
   mega-menu model is built for arrow keys, so the ring is the only thing telling a keyboard
   user where they are. */
.construction-theme :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--construction-primary);
  outline-offset: 3px;
}

.construction-header :is(.construction-nav-link, .construction-header__cta, .construction-menu-button, .construction-account__trigger):focus-visible,
.construction-theme section.text-white :is(a, button):focus-visible,
.construction-cta :is(a, button):focus-visible,
.construction-footer :is(a, button):focus-visible,
.construction-showcase :is(a, button):focus-visible {
  outline-color: var(--construction-on-dark);
}

/* ── Eyebrow chip ───────────────────────────────────────────────────────────
   A solid block of primary behind a short label, straight from the template's
   hero sub-heading. */
.construction-chip {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--construction-fill);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.construction-chip--soft {
  background: var(--construction-soft);
  color: var(--construction-ink);
}

/* ── Section heading ────────────────────────────────────────────────────────
   The signature of the template: a centred title with a hairline reaching out
   to both margins. Flex handles RTL on its own. */
.construction-heading { margin-bottom: 2.5rem; text-align: center; }

.construction-heading__title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.95rem;
  font-size: 1.7rem;
  line-height: 1.6;
}

.construction-heading__title::before,
.construction-heading__title::after {
  flex-grow: 1;
  height: 1px;
  margin-inline: 0.95rem;
  background-color: var(--construction-ink);
  content: "\a0";
}

.construction-heading__lead {
  margin: 0;
  color: var(--construction-text);
  font-size: 1rem;
  line-height: 2;
}

/* The same heading where a link sits beside it, so the rules would collide. */
.construction-heading--start { margin-bottom: 2.5rem; text-align: start; }
.construction-heading--start .construction-heading__title { justify-content: flex-start; font-size: 1.7rem; }
.construction-heading--start .construction-heading__title::before,
.construction-heading--start .construction-heading__title::after { content: none; }

/* Where the heading shares a row with a link, the row itself owns the spacing. */
.construction-heading--flush { margin-bottom: 0; }

@media (max-width: 36rem) {
  .construction-heading__title,
  .construction-heading--start .construction-heading__title { font-size: 1.4rem; }
  .construction-heading__lead { font-size: 0.875rem; }
}

/* ── Cards ──────────────────────────────────────────────────────────────────
   A hairline at rest, a wide soft shadow on hover. No radius anywhere. */
.construction-card {
  position: relative;
  border: 1px solid var(--construction-line);
  background: var(--construction-surface);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.construction-card:hover {
  border-color: transparent;
  box-shadow: 0 0 1.875rem 0 rgb(19 19 28 / 0.12);
}

.construction-card::before {
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  z-index: 1;
  width: 0;
  height: 3px;
  background: var(--construction-primary);
  content: "";
  transition: width 0.35s ease;
}

.construction-card:hover::before { width: 100%; }

/* Image frame: clips the zoom and carries the bottom gradient the template puts
   under every caption laid over a picture. */
.construction-media {
  position: relative;
  display: block;
  overflow: hidden;
}

.construction-media img {
  display: block;
  width: 100%;
  transition: transform 0.4s linear;
}

.construction-media:hover img,
.construction-card:hover .construction-media img { transform: scale(1.05); }

.construction-media--shaded::after {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(transparent, rgb(14 14 14 / 0.85));
  content: "";
  pointer-events: none;
}

/* A label pinned to the corner of a picture. */
.construction-badge {
  position: absolute;
  top: 0.65rem;
  inset-inline-end: 0.65rem;
  z-index: 2;
  padding: 0.15rem 0.5rem;
  background: var(--construction-navy);
  box-shadow: 1px 2px 1px rgb(94 93 99 / 0.08), 0 1px 2px rgb(61 60 66 / 0.12);
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

/* A square tile behind an icon or a number. */
.construction-tile {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  background: var(--construction-soft);
  color: var(--construction-ink);
  font-size: 1.15rem;
  font-weight: 800;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.construction-card:hover .construction-tile,
/* Sizes live here rather than on the element: a utility class would tie with
   .construction-tile on specificity and lose to it, since this sheet is loaded last. */
.construction-tile--sm { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
/* ── Figure counters ────────────────────────────────────────────────────────
   The template frames its numbers in a doubled hairline rather than a box. */
.construction-stat {
  padding: 1.15rem 1.35rem;
  border: double 3px rgb(255 255 255 / 0.6);
  text-align: center;
}

.construction-stat__value {
  display: block;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.4;
}

.construction-stat__label {
  display: block;
  margin-top: 0.35rem;
  color: rgb(255 255 255 / 0.7);
  font-size: 0.8125rem;
}

/* ── Call to action band ────────────────────────────────────────────────────
   Navy separates this strip from the slate header and footer.
   A background image the editor uploads covers it. */
.construction-cta {
  background: var(--construction-fill);
}

.construction-cta .construction-button--accent { background: var(--construction-surface); color: var(--construction-text); }
.construction-cta .construction-button--accent:hover { background: var(--construction-navy); color: #fff; }

/* ── Showcase tile ──────────────────────────────────────────────────────────
   A picture with its caption laid over the foot of it. The caption rises a
   little under the pointer, which is the template's own gesture. Without a
   picture the tile keeps its ink background and the caption simply sits on it. */
.construction-showcase {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 26rem;
  background: var(--construction-navy);
}

.construction-showcase > .construction-media { width: 100%; }

.construction-showcase__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.01) 0%, rgb(11 25 47 / 0.92) 100%);
}

.construction-showcase__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.85rem;
  transition: transform 0.4s ease;
}

.construction-showcase:hover .construction-showcase__body { transform: translateY(-0.6rem); }

@media (prefers-reduced-motion: reduce) {
  .construction-showcase__body { transition: none; }
  .construction-showcase:hover .construction-showcase__body { transform: none; }
}

/* ── Quote card ─────────────────────────────────────────────────────────────── */
.construction-quote {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--construction-line);
  background: var(--construction-surface);
  box-shadow: -4px 3px 2rem -2px rgb(11 25 47 / 0.1);
}

.construction-quote__mark {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1.25rem;
  color: var(--construction-line);
  font-size: 3.5rem;
  line-height: 1;
  pointer-events: none;
}

/* The speaker sits half outside the card, the way the template overlaps them. */
.construction-quote__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: -1.85rem;
  padding-inline-start: 1.85rem;
}

.construction-quote__avatar {
  width: 4.7rem;
  height: 4.7rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 4px solid var(--construction-surface);
  box-shadow: 0 0.5rem 1.5rem rgb(19 19 28 / 0.12);
}

.construction-quote__name {
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--construction-line);
  background: var(--construction-surface);
  box-shadow: 3px 1.1rem 1.8rem -1.1rem rgb(11 25 47 / 0.15);
  color: var(--construction-ink);
  font-size: 0.875rem;
  font-weight: 700;
}

/* ── Bordered list ─────────────────────────────────────────────────────────
   The template's sidebar widget: rows divided by a hairline inside one frame,
   the row indenting slightly under the pointer. */
.construction-widget {
  border: 1px solid var(--construction-line);
  background: var(--construction-surface);
}

.construction-widget__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--construction-line);
  transition: padding-inline-start 0.3s ease, background-color 0.3s ease;
}

.construction-widget__row:last-child { border-bottom: 0; }
.construction-widget__row:hover { padding-inline-start: 1.75rem; background: var(--construction-soft); }

/* ── Rich text ──────────────────────────────────────────────────────────────
   Editor markup lands here. Persian prose needs the generous leading. */
.construction-rich-content {
  color: var(--construction-text);
  font-size: 1.0313rem;
  line-height: 2.1;
}

.construction-rich-content h2,
.construction-rich-content h3,
.construction-rich-content h4,
.construction-rich-content h5 {
  margin-block: 2rem 0.8rem;
  color: var(--construction-text);
  font-weight: 800;
  line-height: 1.6;
}

.construction-rich-content h2 { font-size: 1.6rem; }
.construction-rich-content h3 { font-size: 1.35rem; }
.construction-rich-content h4,
.construction-rich-content h5 { font-size: 1.1rem; }
.construction-rich-content strong,
.construction-rich-content b { font-weight: 800; }
.construction-rich-content em,
.construction-rich-content i { font-style: italic; }
.construction-rich-content u { text-decoration: underline; text-underline-offset: 0.18em; }
.construction-rich-content p,
.construction-rich-content ul,
.construction-rich-content ol,
.construction-rich-content blockquote,
.construction-rich-content pre,
.construction-rich-content table { margin-block: 1.1rem; }
.construction-rich-content ul { list-style: disc; padding-inline-start: 1.6rem; }
.construction-rich-content ol { list-style: decimal; padding-inline-start: 1.6rem; }
.construction-rich-content a { color: var(--construction-ink); text-decoration: none; }
/* Style editor links directly: inline, nested, external and standalone links all work without JS. */
.construction-rich-content a[href]:not(:has(img, picture)) {
  padding: 0.12em 0.4em;
  border-radius: 0.3rem;
  background: var(--construction-soft);
  color: var(--construction-ink);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 160ms ease, color 160ms ease;
}
.construction-rich-content a[href] :is(u, span, strong, em) { text-decoration: none; }
.construction-rich-content a[href]:not(:has(img, picture))::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-inline-start: 0.5em;
  vertical-align: -0.08em;
  background: currentColor;
  clip-path: polygon(38% 8%, 48% 18%, 24% 43%, 100% 43%, 100% 57%, 24% 57%, 48% 82%, 38% 92%, 0 50%);
}
/* Hide the old JS icon if a browser still has the previous script cached. */
.construction-reading-link__icon { display: none; }
.construction-rich-content p > a[href]:only-child:not(:has(img, picture)) {
  display: inline-block;
  max-width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--construction-line);
  border-radius: 0.5rem;
  background: var(--construction-soft);
  color: var(--construction-ink);
  font-weight: 700;
  line-height: 1.9;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.construction-rich-content a[href]:not(:has(img, picture)):is(:hover, :focus-visible) {
  background: var(--construction-second);
  border-color: var(--construction-ink);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .construction-rich-content a[href]:not(:has(img, picture)) { transition: none; }
}
.construction-rich-content blockquote {
  border-inline-start: 3px solid var(--construction-primary);
  background: var(--construction-soft);
  padding: 1rem 1.25rem;
}
.construction-rich-content pre {
  overflow-x: auto;
  background: var(--construction-navy);
  padding: 1.1rem;
  color: #f8fafc;
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
}
.construction-rich-content code {
  background: var(--construction-soft);
  padding: 0.12rem 0.35rem;
  color: var(--construction-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  direction: ltr;
}
.construction-rich-content pre code { background: transparent; padding: 0; color: inherit; }
.construction-rich-content table { width: 100%; border-collapse: collapse; }
.construction-rich-content th,
.construction-rich-content td { border: 1px solid var(--construction-line); padding: 0.7rem; text-align: start; }
.construction-rich-content th { background: var(--construction-soft); color: var(--construction-text); font-weight: 800; }
.construction-rich-content img,
.construction-rich-content video,
.construction-rich-content audio { max-width: 100%; }
.construction-rich-content figure { margin: 1.25rem 0; }
.construction-rich-content figure img {
  display: block;
  height: auto;
  margin-inline: auto;
}
.construction-rich-content figcaption {
  margin-top: 0.5rem;
  color: var(--construction-muted);
  font-size: 0.875rem;
  text-align: center;
}
.construction-rich-content hr { margin-block: 1.5rem; border: 0; border-top: 1px solid var(--construction-line); }

/* The hero caption is written in the same rich-text field, so it inherits none
   of the article spacing above. */
.construction-caption > :first-child { margin-top: 0; }
.construction-caption > :last-child { margin-bottom: 0; }
.construction-caption p { margin: 0 0 0.6rem; }
.construction-caption a { color: var(--construction-ink); text-decoration: none; }

/* The same caption laid over the dark hero band uses the bright construction accent. */
.construction-caption--ondark a { color: var(--construction-on-dark); }
.construction-caption--ondark strong,
.construction-caption--ondark b { color: #fff; }

/* ── Reveal on scroll ──────────────────────────────────────────────────────── */
[data-construction-reveal] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-construction-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-construction-reveal] { opacity: 1; transform: none; transition: none; }
  .construction-card,
  .construction-card::before,
  .construction-button,
  .construction-media img,
  .construction-widget__row,
  .construction-textlink { transition: none; }
  .construction-media:hover img,
  .construction-card:hover .construction-media img { transform: none; }
}

/* ── Mega menu ──────────────────────────────────────────────────────────────
   The panel is absolutely positioned so opening it never moves the header. */
.construction-mega { position: relative; }

.construction-mega__panel {
  --mega-gap: 0.15rem;
  /* Centred on its trigger. A trigger near the edge of the header would push a wide
     panel off-screen, so construction.js measures the overflow after opening and writes it
     back as --panel-shift; the panel then slides just far enough to fit. */
  --panel-shift: 0px;
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(calc(50% + var(--panel-shift)));
  top: calc(100% + var(--mega-gap));
  z-index: 60;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  min-width: 15rem;
  max-width: min(72rem, calc(100vw - 3rem));
  padding: 1.35rem;
  border: 1px solid var(--construction-line);
  border-top: 2px solid var(--construction-primary);
  background: var(--construction-surface);
  box-shadow: 0 1.5rem 3rem rgb(19 19 28 / 0.16);
}

/* The gap under the trigger is a dead zone the pointer has to cross; a
   transparent strip belonging to the panel keeps the pointer inside the group
   the whole way, so the menu cannot close out from under the mouse. */
.construction-mega__panel::before {
  position: absolute;
  inset-inline: -1rem;
  bottom: 100%;
  height: calc(var(--mega-gap) + 0.35rem);
  content: "";
}

.construction-mega__panel[hidden] { display: none; }

.construction-mega__inner {
  display: grid;
  grid-template-columns: repeat(var(--mega-columns, 3), minmax(11rem, 1fr));
  gap: 1.35rem;
  width: max-content;
  max-width: 100%;
}

.construction-mega__panel--vertical,
.construction-mega__panel--flyout { min-width: 14rem; padding: 0.6rem; }

.construction-mega__panel--vertical .construction-mega__inner,
.construction-mega__panel--flyout .construction-mega__inner { display: block; width: 14.5rem; }

.construction-mega__panel--horizontal .construction-mega__inner {
  grid-template-columns: repeat(var(--mega-columns, 3), minmax(9rem, 1fr));
  align-items: start;
  gap: 0.85rem 1.85rem;
}

.construction-mega__panel--grid .construction-mega__inner { gap: 0.75rem; }

/* A column heads itself: the label and its caption are one anchor, so the
   highlighted block and the clickable block are the same rectangle. */
.construction-mega__heading {
  display: grid;
  gap: 0.2rem;
  padding: 0.5rem 0.65rem;
  border-inline-start: 2px solid transparent;
  color: var(--construction-text);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.construction-mega__heading-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.construction-mega__heading-caption { color: var(--construction-muted); font-size: 0.8125rem; line-height: 1.9; }

.construction-mega__heading:hover,
.construction-mega__heading:focus-visible {
  border-inline-start-color: var(--construction-ink);
  background: var(--construction-soft);
  color: var(--construction-ink);
}

.construction-mega__heading:hover .construction-mega__heading-caption,
.construction-mega__heading:focus-visible .construction-mega__heading-caption { color: var(--construction-ink); }

.construction-mega__links {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}

.construction-mega__links a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.65rem;
  border-inline-start: 2px solid transparent;
  color: var(--construction-text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.construction-mega__links a:hover,
.construction-mega__links a:focus-visible {
  border-inline-start-color: var(--construction-ink);
  background: var(--construction-soft);
  color: var(--construction-ink);
}

.construction-mega__links small { color: var(--construction-muted); font-size: 0.76rem; }
.construction-mega__links--nested {
  margin-inline-start: 0.85rem;
  border-inline-start: 1px solid var(--construction-line);
}

.construction-mega__tile {
  border: 1px solid var(--construction-line);
  padding: 0.35rem;
  background: var(--construction-second);
  transition: border-color 0.18s ease;
}

.construction-mega__tile-link {
  display: grid;
  gap: 0.25rem;
  padding: 0.6rem 0.65rem;
  color: var(--construction-text);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.construction-mega__tile-link i { color: var(--construction-ink); font-size: 1.05rem; }
.construction-mega__tile-link strong { font-weight: 800; }
.construction-mega__tile-link span { color: var(--construction-muted); font-size: 0.8rem; line-height: 1.85; }
.construction-mega__tile:has(.construction-mega__tile-link:hover) { border-color: var(--construction-ink); }

.construction-mega__tile-link:hover,
.construction-mega__tile-link:focus-visible { background: var(--construction-soft); color: var(--construction-ink); }
.construction-mega__tile-link:hover span,
.construction-mega__tile-link:focus-visible span { color: var(--construction-ink); }

/* ── Nested fly-out: a panel opening off a panel ───────────────────────────── */
.construction-mega__branch { position: relative; }

.construction-mega__branch-trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-inline-start: 2px solid transparent;
  background: none;
  color: var(--construction-text);
  font: inherit;
  font-size: 0.875rem;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.construction-mega__branch-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.construction-mega__branch-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.construction-mega__branch-trigger small { color: var(--construction-muted); font-size: 0.76rem; }
.construction-mega__branch-caret { flex: 0 0 auto; margin-inline-start: auto; }

.construction-mega__branch[data-open] .construction-mega__branch-trigger,
.construction-mega__branch-trigger:hover {
  border-inline-start-color: var(--construction-ink);
  background: var(--construction-soft);
  color: var(--construction-ink);
}

.construction-mega__panel--sub {
  --mega-gap: 1.1rem;
  top: -0.6rem;
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--mega-gap));
  /* A fly-out hangs off the side of its parent panel, which is already inside the
     viewport, so it needs no shift of its own. */
  transform: none;
  display: block;
  min-width: 13.5rem;
  padding: 0.6rem;
}

/* Bridge the side gap the same way the top gap is bridged. */
.construction-mega__panel--sub::before {
  inset-inline: auto;
  inset-block: 0;
  inset-inline-start: 100%;
  width: calc(var(--mega-gap) + 0.35rem);
  height: auto;
}

.construction-mega__promo { flex: 0 0 15rem; align-self: start; overflow: hidden; background: var(--construction-soft); }
.construction-mega__promo img { display: block; width: 100%; height: 9rem; object-fit: cover; }
.construction-mega__promo p { margin: 0; padding: 0.85rem 1rem; color: var(--construction-muted); font-size: 0.82rem; line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .construction-nav-trigger svg,
  .construction-mega__branch-trigger,
  .construction-mega__links a,
  .construction-mega__heading { transition: none; }
}

@media (max-width: 60rem) {
  .construction-mega__panel { max-width: calc(100vw - 2rem); }
  .construction-mega__inner { width: auto; grid-template-columns: 1fr; }
  .construction-mega__promo { display: none; }
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.construction-footer { background: var(--construction-navy); color: #cbd0d4; }
.construction-footer h2 { color: #fff; font-size: 1.125rem; }
.construction-footer a { transition: color 0.3s ease; }
.construction-footer a:hover { color: #fff; }
.construction-footer__bottom { background: #0b192f; border-top: 1px solid rgb(255 255 255 / 0.09); color: #dce0e3; }

/* ── Scroll to top ──────────────────────────────────────────────────────────── */
.construction-to-top {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: 1.85rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgb(0 0 0 / 0.34);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}

.construction-to-top:hover { background: var(--construction-fill); }
.construction-to-top.is-visible { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .construction-to-top { transition: none; }
}