@charset "UTF-8";
/*
 * Homepage sections.
 *
 * Loaded only on the front page — which is why the shared furniture these
 * sections used to define (.sheet, .mark, .sheet-lede, .arrow-link, .btn-sheet,
 * .btn-line) now lives in main.css instead: footer.php and the inner templates
 * call all six, and this stylesheet never reaches them. The drawing-set furniture this file was built
 * around — sheet rules, dimension lines, station stamps, monospaced index
 * codes — is gone; what carries a section now is a gold eyebrow, a heading,
 * and the photograph or table underneath it.
 *
 * Layout is written in logical properties throughout (inline-start/end,
 * margin-inline, border-inline) so the Arabic build mirrors without a second
 * stylesheet. The two places that deliberately do NOT mirror are marked.
 */

/* ======================================================================
   01 — HERO SLIDER
   A horizontal scroll-snap track. Every behaviour below that looks like a
   carousel — swipe, flick, keyboard, scrollbar, no-JS — is the browser's own
   overflow scrolling, not JavaScript. assets/js/hero.js only advances it on a
   timer and keeps the counter in step.
   ====================================================================== */

.hero{
  position:relative; background:var(--imad-charcoal); color:var(--imad-white);
  overflow:clip;
}

.hero-track{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* Lenis hijacks vertical wheel scrolling; the track must keep its own. */
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.hero-track::-webkit-scrollbar{display:none;}

.hero-slide{
  position:relative; flex:0 0 100%; scroll-snap-align:start;
  display:flex; align-items:center;
  min-block-size:clamp(520px,78svh,760px);
  /* Room for the assurance strip that overlays the base of the hero. */
  padding-block:calc(var(--imad-shell-offset) + 32px) clamp(140px,16vw,190px);
}

.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{
  inline-size:100%; block-size:100%; object-fit:cover; display:block;
  filter:saturate(.78) contrast(1.03);
}
/* Two gradients, one element: a hard wash from the inline-start edge so the
   copy always has ground, and a softer one from the base so the assurance
   strip does not sit on a bright sky. */
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(23,35,43,.34),rgba(23,35,43,.12) 38%,rgba(23,35,43,.86)),
    linear-gradient(to right,rgba(14,32,45,.92),rgba(14,32,45,.55) 46%,rgba(14,32,45,.12));
}
[dir="rtl"] .hero-scrim{
  background:
    linear-gradient(to bottom,rgba(23,35,43,.34),rgba(23,35,43,.12) 38%,rgba(23,35,43,.86)),
    linear-gradient(to left,rgba(14,32,45,.92),rgba(14,32,45,.55) 46%,rgba(14,32,45,.12));
}

.hero-inner{position:relative; z-index:1;}
/* The rail occupies the first 84px of the shell on desktop, so the copy starts
   inside it rather than under it. */
.hero-copy{max-inline-size:640px; margin-inline-start:clamp(0px,7vw,104px);}
.hero .imad-eyebrow{color:var(--imad-gold);}

.hero-title{
  font-family:var(--font-display);
  font-size:var(--fs-h1); font-weight:700; line-height:1.08;
  /* Sentence case, not the reference's all-caps: with Qanelas standing in for
     a condensed face, 54px of capitals reads as shouting rather than as scale. */
  letter-spacing:-0.015em;
  margin-block:0 clamp(18px,2vw,26px);
  text-wrap:balance;
}
.hero-title em{font-style:normal; color:var(--imad-gold);}

.hero-sub{
  max-inline-size:52ch; color:rgba(255,255,255,.80);
  font-size:clamp(15px,1.15vw,17px); line-height:1.65;
}

.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-block-start:clamp(26px,3vw,38px);}
.hero-btn{
  display:inline-flex; align-items:center; gap:14px;
  min-block-size:48px; padding:13px 24px; border-radius:6px;
  font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:background var(--t-micro) ease-out, color var(--t-micro) ease-out, border-color var(--t-micro) ease-out;
}
.hero-btn-solid{background:var(--imad-gold); color:var(--imad-charcoal);}
.hero-btn-solid:hover{background:var(--imad-light-gold);}
.hero-btn-line{border:1px solid rgba(255,255,255,.45); color:var(--imad-white);}
.hero-btn-line:hover{background:var(--imad-white); border-color:var(--imad-white); color:var(--imad-charcoal);}
.hero-btn-arrow{transition:transform var(--t-micro) ease-out;}
.hero-btn:hover .hero-btn-arrow{transform:translateX(3px);}
[dir="rtl"] .hero-btn-arrow{transform:scaleX(-1);}
[dir="rtl"] .hero-btn:hover .hero-btn-arrow{transform:scaleX(-1) translateX(3px);}

/* ---- Counter and dots ---- */
.hero-rail{
  position:absolute; z-index:2;
  inset-block-start:50%; inset-inline-start:calc(50% - min(50% - 32px,640px));
  transform:translateY(-60%);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  pointer-events:none;
}
.hero-count{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:15px; font-weight:600; letter-spacing:.06em;
}
.hero-count-now{color:var(--imad-gold);}
.hero-count-all{color:rgba(255,255,255,.42);}
.hero-count-rule{inline-size:1px; block-size:22px; background:rgba(255,255,255,.34);}
.hero-dots{display:flex; flex-direction:column; gap:11px; pointer-events:auto;}
/* 7px of dot inside a 28px hit area — the target stays finger-sized without
   the dot growing into a bullet. */
.hero-dot{
  position:relative; inline-size:28px; block-size:28px; display:block;
}
.hero-dot::after{
  content:''; position:absolute; inset:50% auto auto 50%;
  inline-size:7px; block-size:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:rgba(255,255,255,.38);
  transition:background var(--t-micro) linear, transform var(--t-micro) var(--ease-out);
}
.hero-dot:hover::after{background:rgba(255,255,255,.7);}
.hero-dot[aria-current="true"]::after{background:var(--imad-gold); transform:scale(1.45);}

/* ---- Assurance strip ---- */
.hero-marks{
  position:absolute; z-index:2; inset:auto 0 0;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  list-style:none;
  background:rgba(14,32,45,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-block-start:1px solid rgba(255,255,255,.14);
}
.hero-mark{
  display:flex; align-items:center; gap:12px;
  padding:20px clamp(12px,1.6vw,24px);
  border-inline-end:1px solid rgba(255,255,255,.10);
}
.hero-mark:last-child{border-inline-end:0;}
.hero-mark .imad-icon{
  inline-size:26px; block-size:26px; flex:none; color:var(--imad-gold);
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.hero-mark-text{
  display:flex; flex-direction:column; line-height:1.2;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* Below the desktop breakpoint the rail would sit on top of the copy, so the
   counter moves under the buttons and the dots go horizontal. */
@media (max-width:1180px){
  .hero-copy{margin-inline-start:0;}
  .hero-rail{
    inset:auto auto clamp(150px,17vw,196px) var(--shell-pad);
    transform:none; flex-direction:row; align-items:center; gap:16px;
  }
  .hero-count{flex-direction:row; gap:8px;}
  .hero-count-rule{inline-size:14px; block-size:1px;}
  .hero-dots{flex-direction:row; gap:2px;}
}

@media (max-width:900px){
  .hero-marks{
    grid-auto-flow:column; grid-template-columns:none;
    grid-auto-columns:minmax(150px,1fr);
    overflow-x:auto; scroll-snap-type:x proximity;
    /* Same treatment as the slide track: the strip is obviously swipeable from
       the cut-off item at its edge, so a visible bar is only noise. */
    scrollbar-width:none;
  }
  .hero-marks::-webkit-scrollbar{display:none;}
  .hero-mark{scroll-snap-align:start;}
}

/* On a phone the strip stops overlaying the photograph and simply follows it —
   six items over a hero image leaves no room for the headline. */
@media (max-width:640px){
  .hero-slide{
    min-block-size:clamp(460px,72svh,600px);
    padding-block:calc(var(--imad-shell-offset) + 24px) clamp(96px,24vw,120px);
  }
  .hero-marks{position:static; background:var(--imad-charcoal);}
  .hero-mark{padding-block:16px;}
  /* The rail is absolute against .hero, and .hero now ends below the static
     assurance strip — so any inset-block-end lands the counter on top of it.
     It becomes a row in normal flow between the two instead. */
  .hero-rail{
    position:static; transform:none;
    justify-content:center; gap:14px; padding-block:14px;
    background:var(--imad-charcoal); border-block-start:1px solid var(--line);
  }
  .hero-btn{flex:1 1 auto; justify-content:center;}
}
/* ======================================================================
   02 — SOLUTIONS ORBIT
   Two-column claim: copy on the inline-start, every trade IMAD holds in
   house ringed around the company mark. The circle is a CSS polar layout,
   not a canvas — each node stays a real link, the angular step is derived
   from the node count so the ring re-spaces itself when a service is added
   or retired, and the whole diagram collapses to a list below 720px rather
   than shrinking until the labels collide.

   Three geometry rules keep eleven nodes legible where nine were not:
   the icon plates sit ON the ring rather than inside it, so nothing has to
   cross a line to be read; labels hang outside the plates, where the arc
   between neighbours is widest; and the diagram is flushed to the shell's
   inline-end edge instead of floating in the middle of its own column.
   ====================================================================== */

.solutions{
  background:var(--imad-white);
  padding-block:var(--space-band);
}
.solutions-grid{
  display:grid;
  /* Content-sized columns, centred. Even columns left the ring flushed to one
     shell edge and the copy to the other with ~200px of dead air between them;
     sizing each column to what it holds sends that slack to the outer margins,
     where it reads as breathing room instead of a gap. */
  grid-template-columns:minmax(0,40rem) auto;
  justify-content:center;
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.solutions-copy{max-inline-size:40rem;}
.solutions .imad-eyebrow{color:var(--imad-gold);}
.solutions-copy h2{
  max-width:14ch;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.solutions-copy h2::after{
  content:'';
  display:block;
  inline-size:52px;
  block-size:3px;
  margin-block-start:18px;
  background:var(--imad-gold);
}
.solutions-copy .sheet-lede{
  margin-block-start:22px;
  max-width:56ch;
  color:var(--text-dim);
}

.solutions-btn{
  display:inline-flex; align-items:stretch; overflow:hidden;
  margin-block-start:clamp(26px,3vw,36px);
  background:var(--imad-navy); color:var(--imad-white);
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:4px;
  transition:background var(--t-micro) ease-out, color var(--t-micro) ease-out;
}
.solutions-btn > span:first-child{
  display:flex; align-items:center;
  padding:15px 22px;
}
.solutions-btn-arrow{
  display:grid; place-items:center;
  inline-size:50px; background:var(--imad-gold); color:var(--imad-white);
  font-size:18px; line-height:1;
  transition:background var(--t-micro) ease-out, transform var(--t-micro) var(--ease-out);
}
.solutions-btn:hover{background:var(--imad-charcoal); color:var(--imad-white);}
.solutions-btn:hover .solutions-btn-arrow{background:var(--imad-light-gold); transform:translateX(2px);}
.solutions-btn:focus-visible{outline:2px solid var(--imad-gold); outline-offset:3px;}
[dir="rtl"] .solutions-btn-arrow{transform:scaleX(-1);}
[dir="rtl"] .solutions-btn:hover .solutions-btn-arrow{transform:scaleX(-1) translateX(2px);}

.solutions-orbit{
  /* The step is the node count, not a constant: nine trades at a fixed 40deg
     was what let the ring fall out of step with the Services CPT. */
  --orbit-n:11;
  --orbit-step:calc(360deg / var(--orbit-n));
  --orbit-r:37cqi;
  /* Chord between two neighbouring nodes — the exact width a label is allowed
     to be before it touches its neighbour. Derived, so it re-solves itself at
     every ring size AND at every node count; hand-tuned breakpoints could do
     neither, and were the reason plates overlapped once the ring was capped. */
  --orbit-chord:calc(2 * var(--orbit-r) * sin(180deg / var(--orbit-n)));
  container-type:inline-size;
  position:relative;
  /* A square is bounded by whichever viewport axis runs out first, and on a
     desktop that is always the height. Sized off the column alone the ring
     rendered ~790px at a 1440px shell and pushed its own bottom nodes below
     the fold. The vh term is a ceiling, not a target: this is a scrolling
     page, so the diagram only has to stay near the fold, not inside it —
     54vh was strict enough to shrink the ring to ~380px on a short window. */
  /* Its column is auto-sized, so this width IS the column: no percentage term
     here, and 44vw keeps the ring and the copy inside the shell together on a
     narrow desktop where 42rem alone would push the copy out. */
  inline-size:min(42rem, 78vh, 44vw);
  aspect-ratio:1;
}
.orbit-rings{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* The gradient stops read currentColor, so the whole diagram stays one
     colour token instead of hardcoding navy into the markup. */
  color:var(--imad-navy);
  pointer-events:none;
  overflow:visible;
}
.orbit-rings circle{fill:none;}
.orbit-rings-outer{
  stroke:url(#orbit-ring-fade);
  stroke-width:0.3;
  stroke-dasharray:0.7 1.35;
  stroke-linecap:round;
}
/* A second hairline between hub and nodes: it gives the ring depth and reads
   as the boundary the trades work around, not decoration. */
.orbit-rings-inner{
  stroke:color-mix(in srgb, var(--imad-gold) 42%, transparent);
  stroke-width:0.18;
  stroke-dasharray:0.35 2.4;
  stroke-linecap:round;
}
.orbit-rings-halo{stroke:none;}

.orbit-hub{
  position:absolute;
  left:50%; top:50%;
  width:44%;
  transform:translate(-50%,-50%);
  z-index:1;
  pointer-events:none;
}
.orbit-hub-art{
  width:100%; height:auto; display:block;
  object-fit:contain;
}

.orbit-nodes{list-style:none; position:absolute; inset:0; margin:0; padding:0;}
.orbit-node{
  --theta:calc((var(--i) * var(--orbit-step)) - 90deg);
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
}
.orbit-link{
  position:absolute;
  left:0; top:0;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(5px, 1.5cqi, 7px);
  inline-size:6.2rem; /* Fallback for engines without CSS sin(). */
  inline-size:calc(var(--orbit-chord) - 5px);
  /* Rotate out to the node's angle, run along the radius, rotate the content
     back upright. The label rides below the plate, outside the ring, where the
     arc between neighbouring nodes is at its widest. */
  transform:rotate(calc(-1 * var(--theta))) translateX(calc(-1 * var(--orbit-r))) rotate(var(--theta)) translate(-50%,-50%);
  text-align:center;
  color:var(--imad-navy);
  transition:color var(--t-micro) linear;
}
/* Upper half of the ring: label above the plate, so every label reads away
   from the mark rather than back into it. */
.orbit-node-above .orbit-link{flex-direction:column-reverse;}
.orbit-icon{
  display:grid; place-items:center;
  inline-size:clamp(2.3rem, 8cqi, 3rem);
  block-size:clamp(2.3rem, 8cqi, 3rem);
  border-radius:50%;
  background:var(--imad-white);
  border:1.5px solid color-mix(in srgb, var(--imad-navy) 24%, transparent);
  box-shadow:0 6px 18px rgba(14,85,127,.10);
  color:var(--imad-navy);
  transition:border-color var(--t-micro) ease-out, background var(--t-micro) ease-out, color var(--t-micro) ease-out, transform var(--t-micro) var(--ease-out);
}
.orbit-icon .imad-icon{width:clamp(16px, 4cqi, 22px); height:clamp(16px, 4cqi, 22px);}
.orbit-label{
  font-family:var(--font-display);
  font-size:clamp(9px, 2.2cqi, 11px); font-weight:700; line-height:1.3;
  letter-spacing:.05em; text-transform:uppercase;
  text-wrap:balance;
}
.orbit-link:hover{color:var(--imad-gold);}
.orbit-link:hover .orbit-icon,
.orbit-link:focus-visible .orbit-icon{
  background:var(--imad-navy); color:var(--imad-white);
  border-color:var(--imad-navy);
  transform:scale(1.06);
}
.orbit-link:focus-visible{outline:none;}
.orbit-link:focus-visible .orbit-icon{outline:2px solid var(--imad-gold); outline-offset:3px;}

@media (width <= 900px){
  .solutions-grid{grid-template-columns:1fr; justify-content:stretch; gap:clamp(28px,5vw,48px);}
  .solutions-copy{max-inline-size:42rem;}
  .solutions-copy h2{max-width:18ch;}
  .solutions-orbit{inline-size:min(100%, 32rem, 62vh); justify-self:center;}
}

@media (width <= 720px){
  /* Below this the arc between nodes is narrower than a two-word label, so the
     ring stops being a diagram and becomes a plain grid of the same links. */
  .orbit-rings{display:none;}
  .solutions-orbit{
    aspect-ratio:auto; inline-size:100%; max-inline-size:none;
    display:flex; flex-direction:column; align-items:center; gap:28px;
  }
  .orbit-hub{position:static; transform:none; width:min(44vw, 10rem);}
  .orbit-nodes{
    position:static;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px 10px;
    inline-size:100%;
  }
  .orbit-node{position:static; width:auto; height:auto;}
  .orbit-link{
    position:static;
    inline-size:auto;
    transform:none;
    gap:10px;
  }
  .orbit-icon{inline-size:2.9rem; block-size:2.9rem;}
  .orbit-icon .imad-icon{width:20px; height:20px;}
  .orbit-label{font-size:10px;}
  /* Above/below is a property of the ring. In the grid every cell reads the
     same way, so the plates line up across a row. */
  .orbit-node-above .orbit-link{flex-direction:column;}
}

@media (prefers-reduced-motion: reduce){
  .orbit-icon,.solutions-btn,.solutions-btn-arrow{transition:none;}
  .orbit-link:hover .orbit-icon,
  .orbit-link:focus-visible .orbit-icon{transform:none;}
}

/* ======================================================================
   03 — ABOUT IMAD
   ====================================================================== */

.home-about{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  inline-size:100%;
  min-block-size:clamp(610px,47vw,760px);
  margin-inline:0;
  overflow:hidden;
  background:#061e31;
  color:var(--imad-white);
  scroll-margin-top:88px;
}
.home-about-copy{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  /* Align copy with .imad-shell while the section itself is full-bleed. */
  padding-block:clamp(64px,7vw,108px) clamp(56px,6vw,88px);
  padding-inline-start:max(2rem,calc(50vw - 720px));
  padding-inline-end:clamp(48px,6vw,96px);
  background:linear-gradient(116deg,#061e31 0%,#072b46 100%);
}
.home-about-copy::after{
  content:'';
  position:absolute;
  z-index:1;
  inset-block:-1px;
  inset-inline-end:clamp(-148px,-9.2vw,-96px);
  inline-size:clamp(150px,10vw,188px);
  background:#072b46;
  clip-path:polygon(0 0,38% 0,100% 50%,38% 100%,0 100%);
  pointer-events:none;
}
[dir="rtl"] .home-about-copy::after{
  clip-path:polygon(100% 0,62% 0,0 50%,62% 100%,100% 100%);
}
.home-about-copy-inner{position:relative; z-index:2; max-inline-size:640px;}
.home-about .imad-eyebrow{color:var(--imad-gold);}
.home-about h2{margin-block-start:18px; font-size:clamp(34px,3.25vw,58px); line-height:1.08; letter-spacing:-.025em; text-transform:uppercase;}
.home-about h2 em{color:var(--imad-gold); font-style:normal;}
.home-about-lede{max-inline-size:60ch; margin-block-start:24px; color:rgba(255,255,255,.8); font-size:clamp(15px,1.12vw,18px); line-height:1.75;}
.home-about-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-block-start:clamp(34px,4vw,54px); list-style:none;}
.home-about-stats li{position:relative; display:grid; justify-items:center; gap:10px; min-inline-size:0; padding-inline:clamp(8px,1.2vw,18px); text-align:center;}
.home-about-stats li+li{border-inline-start:1px solid rgba(255,255,255,.23);}
.home-about-stat-icon{display:block; color:var(--imad-gold);}
.home-about-stat-icon .imad-icon{inline-size:34px; block-size:34px; stroke-width:1.45;}
.home-about-stats strong{font-family:var(--font-display); font-size:clamp(28px,2.35vw,42px); line-height:1;}
/* The labels used to be visually hidden to match the mock, which left four
   bare figures — 8+ / 50+ / 30+ / 100% — with nothing to say what they count.
   A number without its unit is not restraint, it is a riddle. */
.home-about-stats li > span:not(.home-about-stat-icon){
  font-size:12.5px; line-height:1.4; letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-navy-dim); text-wrap:balance;
}
.home-about-cta{display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-inline-size:200px; margin-block-start:clamp(34px,4vw,52px); padding:15px 20px; border:1px solid var(--imad-gold); color:var(--imad-white); font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; transition:background-color var(--t-move),color var(--t-move);}
.home-about-cta:hover{background:var(--imad-gold); color:#061e31;}
.home-about-media{position:relative; min-inline-size:0; overflow:hidden; background:#061e31;}
.home-about-media::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,30,49,.28),transparent 32%),linear-gradient(0deg,rgba(6,30,49,.42),transparent 55%); pointer-events:none;}
[dir="rtl"] .home-about-media::after{background:linear-gradient(270deg,rgba(6,30,49,.28),transparent 32%),linear-gradient(0deg,rgba(6,30,49,.42),transparent 55%);}
.home-about-media>img{inline-size:100%; block-size:100%; object-fit:cover; object-position:center;}

@media (max-width:1050px){
  .home-about{grid-template-columns:1fr;}
  .home-about-copy{
    padding-inline-start:max(1.25rem,calc(50vw - 720px));
    padding-inline-end:max(1.25rem,calc(50vw - 720px));
  }
  .home-about-copy::after{display:none;}
  .home-about-copy-inner{max-inline-size:none;}
  .home-about-media{min-block-size:480px;}
}
@media (max-width:620px){
  .home-about{min-block-size:0;}
  .home-about-copy{padding-block:58px 48px;}
  .home-about h2{font-size:clamp(30px,9.2vw,42px);}
  .home-about-stats{grid-template-columns:repeat(2,1fr); gap:26px 0;}
  .home-about-stats li:nth-child(3){border-inline-start:0;}
  .home-about-media{min-block-size:350px;}
}

/* ======================================================================
   03 — SERVICES BAY
   A scroll-snap strip of photographic plates. The signature is the peek:
   the next service is always half in frame, like walking a workshop aisle.
   ====================================================================== */

.register{
  background:var(--imad-charcoal); color:var(--imad-white);
}
.register-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,3vw,48px); margin-block-end:clamp(28px,3.6vw,44px);
}
.register-head-copy{max-inline-size:54ch;}
.register-head h2{color:var(--imad-white);}
.register .imad-eyebrow{color:var(--imad-gold);}
.register-head .sheet-lede{margin-block-start:16px; color:rgba(255,255,255,.72);}

.register-controls{
  display:flex; align-items:center; gap:clamp(18px,2vw,28px);
  flex-shrink:0; padding-block-end:4px;
}
.register-all{color:var(--imad-white);}
.register-all .g{color:var(--imad-gold);}
.register-pos{
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:.08em;
  color:var(--imad-gold);
}
.register-pos-of,.register-pos span:last-child{color:rgba(255,255,255,.38);}
.register-arrows{display:flex; gap:8px;}
.register-arrow{
  inline-size:44px; block-size:44px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); background:transparent; color:var(--imad-white);
  font-size:16px; cursor:pointer;
  transition:background var(--t-micro) ease-out, border-color var(--t-micro) ease-out, color var(--t-micro) ease-out;
}
.register-arrow:hover:not(:disabled){background:var(--imad-gold); border-color:var(--imad-gold); color:var(--imad-charcoal);}
.register-arrow:disabled{opacity:.32; cursor:not-allowed;}
.register-arrow:focus-visible{outline:2px solid var(--imad-gold); outline-offset:3px;}
[dir="rtl"] .register-arrow span{display:inline-block; transform:scaleX(-1);}

/* Sibling of .imad-shell, not a child of it, so the slider's first card lines
   up with the section head above. It reads the shell's own tokens rather than
   restating the width — that restatement is what let the two drift apart. */
.register-viewport{
  width:min(calc(100% - var(--imad-shell-gutter)),var(--imad-shell-max)); margin-inline:auto;
}
.register-track{
  list-style:none; display:flex; gap:clamp(16px,1.8vw,24px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding-inline:0;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding-block-end:4px;
}
.register-track::-webkit-scrollbar{display:none;}

.svc-card{
  flex:0 0 calc((100% - 48px) / 2.4);
  max-inline-size:400px;
  scroll-snap-align:start;
  background:transparent;
}
.svc-card > a{
  position:relative; display:block; color:inherit;
  overflow:hidden; isolation:isolate;
  min-block-size:clamp(420px,52vw,520px);
}
.svc-card > a:focus-visible{outline:2px solid var(--imad-gold); outline-offset:3px;}

.svc-card-media{position:absolute; inset:0; z-index:0; background:#0b151b;}
.svc-card-media img{
  inline-size:100%; block-size:100%; object-fit:cover; display:block;
  filter:saturate(.86) contrast(1.04);
  transition:transform 700ms var(--ease-out-3);
}
.svc-card > a:hover .svc-card-media img{transform:scale(1.05);}
.svc-card-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(11,21,27,.96) 0%,rgba(11,21,27,.42) 42%,rgba(11,21,27,.08) 72%);
}

.svc-card-body{
  position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  block-size:100%; min-block-size:inherit;
  padding:28px 24px 24px;
}
.svc-card-name{
  font-family:var(--font-display); font-size:clamp(20px,1.7vw,24px); font-weight:600;
  letter-spacing:-0.015em; line-height:1.2; color:var(--imad-white);
  text-wrap:balance;
}
.svc-card-scope{
  margin-block-start:10px; max-inline-size:42ch;
  font-size:14px; line-height:1.55; color:rgba(255,255,255,.72);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.svc-card-go{
  display:inline-flex; align-items:center; gap:9px; margin-block-start:18px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--imad-gold);
  transition:gap var(--t-micro) var(--ease-out-3);
}
.svc-card > a:hover .svc-card-go{gap:15px;}
.svc-card-go .g{color:var(--imad-light-gold);}
[dir="rtl"] .svc-card-go .g{transform:scaleX(-1);}

.register-empty{padding:32px; border:1px dashed rgba(255,255,255,.28); color:rgba(255,255,255,.64);}

@media (max-width:720px){
  .register-head{flex-direction:column; align-items:flex-start;}
  /* The label wraps to two lines at this width, which leaves its arrow
     floating between them; give it a row of its own instead. */
  .register-controls{inline-size:100%; flex-wrap:wrap; justify-content:space-between; row-gap:18px;}
  .register-all{flex-basis:100%;}
  .svc-card{flex-basis:min(320px,86vw);}
  .svc-card > a{min-block-size:440px;}
}

@media (prefers-reduced-motion:reduce){
  .svc-card-media img{transition:none;}
  .svc-card > a:hover .svc-card-media img{transform:none;}
}

/* ======================================================================
   04 — MEDIUM VOLTAGE RMU / MRMU
   ====================================================================== */

.mv{position:relative; background:var(--imad-charcoal); color:var(--imad-white); overflow:clip;}
.mv-bg{position:absolute; inset:0; z-index:0;}
.mv-bg img{inline-size:100%; block-size:100%; object-fit:cover; opacity:.14; filter:grayscale(.4);}
.mv-inner{position:relative; z-index:var(--z-rule);}
.mv-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(28px,3.6vw,56px);}
.mv-main{grid-column:1 / span 8;}
.mv-side{
  grid-column:9 / -1; padding-inline-start:clamp(20px,2.4vw,36px);
  border-inline-start:1px solid var(--line);
}

/* The kV figure is a drawn graphic rather than a heading, but it still answers
   to the brief's ceiling: it tops out just above the H1, not at three times it. */
.mv-figure{
  /* A numeric range, so it keeps LTR order under RTL — otherwise bidi renders
     the band as "36 – 7.2". */
  direction:ltr; unicode-bidi:isolate;
  font-family:var(--font-display); font-variation-settings:'wdth' 104;
  font-size:clamp(46px,6vw,74px); font-weight:700; line-height:0.95;
  letter-spacing:-0.025em; color:var(--imad-white);
}
/* direction:ltr also flips text-align:start, so restate the edge it hangs on. */
[dir="rtl"] .mv-figure{text-align:right;}
.mv-figure sub{font-size:.36em; font-weight:500; letter-spacing:0; vertical-align:baseline; color:var(--imad-blue);}
.mv h2{margin-block-start:clamp(18px,2.2vw,28px); max-width:22ch;}
.mv-body{margin-block-start:16px; color:var(--on-navy-dim); max-width:58ch;}

/* Graduated scale. Deliberately NOT mirrored: a numeric axis ascends
   left-to-right in Arabic too, so the element keeps dir="ltr" while the
   columns around it mirror. */
.mv-scale{margin-block-start:clamp(30px,3.6vw,46px); direction:ltr;}
.mv-scale-rule{position:relative; block-size:60px;}
.mv-scale-rule::before{
  content:''; position:absolute; inset-block-start:22px; inset-inline:0;
  block-size:1px; background:var(--line-strong);
}
.mv-scale-band{
  position:absolute; inset-block-start:20px; left:0; block-size:5px; border-radius:3px;
  background:var(--imad-technical-blue); transform-origin:left center;
}
.mv-scale-tick{position:absolute; inset-block-start:14px; inline-size:1px; block-size:17px; background:var(--imad-blue);}
.mv-scale-tick b{
  position:absolute; inset-block-start:26px; left:0; transform:translateX(-50%);
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--text-dim); white-space:nowrap;
}
.mv-scale-tick.is-end{background:var(--imad-gold); block-size:26px; inset-block-start:10px;}
.mv-scale-tick.is-end b{color:var(--imad-light-gold); inset-block-start:32px;}
.mv-scale-cap{margin-block-start:16px; font-size:13px; color:var(--text-faint);}

.mv-tests{list-style:none; counter-reset:t; margin-block-start:16px;}
.mv-tests li{
  counter-increment:t; position:relative; padding-block:12px;
  padding-inline-start:36px; border-block-end:1px solid var(--line);
  font-size:14.5px; line-height:1.5;
}
.mv-tests li::before{
  content:counter(t,decimal-leading-zero); position:absolute;
  inset-inline-start:0; inset-block-start:13px;
  font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--imad-blue);
}
.mv-apps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-block-start:clamp(34px,4vw,56px);
  border-block-start:1px solid var(--line-strong);
}
.mv-apps div{
  padding:18px 18px 20px; border-block-end:1px solid var(--line);
  border-inline-end:1px solid var(--line);
  font-size:13.5px; color:var(--text-dim);
}
.mv-apps div:last-child{border-inline-end:0;}
.mv-note{margin-block-start:20px; font-size:13px; color:var(--text-faint);}
.mv-cta{margin-block-start:clamp(26px,3vw,40px);}

@media (max-width:900px){
  .mv-main,.mv-side{grid-column:1 / -1;}
  .mv-side{border-inline-start:0; padding-inline-start:0; border-block-start:1px solid var(--line); padding-block-start:26px;}
}

/* ======================================================================
   05 — FIVE-STAGE DELIVERY PROCESS
   Horizontal timeline on white: gold index, navy disc, deliverable card.
   ====================================================================== */

.sequence{
  position:relative;
  overflow:visible;
  background:var(--imad-white);
  color:var(--imad-charcoal);
}
.sequence .imad-eyebrow{color:var(--imad-gold);}
.sequence h2{max-width:18ch; color:var(--imad-navy);}

.sequence-wash{
  position:absolute;
  inset-block-start:0;
  inset-inline-end:0;
  inline-size:min(52%, 620px);
  block-size:min(48%, 340px);
  margin:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.sequence-wash img{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  object-position:center 20%;
  opacity:.42;
  filter:saturate(.45) contrast(.92) brightness(1.18);
  -webkit-mask-image:
    linear-gradient(to left, #000 8%, transparent 78%),
    linear-gradient(to bottom, #000 18%, transparent 92%);
  mask-image:
    linear-gradient(to left, #000 8%, transparent 78%),
    linear-gradient(to bottom, #000 18%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
[dir="rtl"] .sequence-wash img{
  -webkit-mask-image:
    linear-gradient(to right, #000 8%, transparent 78%),
    linear-gradient(to bottom, #000 18%, transparent 92%);
  mask-image:
    linear-gradient(to right, #000 8%, transparent 78%),
    linear-gradient(to bottom, #000 18%, transparent 92%);
}

.sequence .imad-shell{position:relative; z-index:1;}
.sequence-head{max-inline-size:40rem;}
.sequence-note{
  margin-block-start:14px;
  max-width:54ch;
  color:var(--text-dim);
  font-size:15px;
  line-height:1.65;
}
.sequence-assurance{
  display:flex;
  align-items:center;
  gap:10px;
  margin-block-start:16px;
  color:var(--imad-navy);
  font-size:14.5px;
  font-weight:600;
}
.sequence-assurance-mark{
  display:grid;
  place-items:center;
  inline-size:28px;
  block-size:28px;
  border-radius:50%;
  background:var(--imad-gold);
  color:var(--imad-white);
  flex:0 0 auto;
}
.sequence-assurance-mark .imad-icon{width:15px; height:15px; stroke:#fff;}

/* --seq-disc and --seq-gap are the only two numbers the row is built from: the
   connector, the arrowhead and the marker column all measure off them, so the
   rail cannot drift out of the discs the way a hand-tuned percentage does. */
.sequence-stack{
  --seq-disc:72px;
  --seq-gap:clamp(16px,1.8vw,24px);
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  /* The deliverable row sizes to the tallest card rather than to a fixed
     11.5rem floor. Subgrid still levels all five, so they stay a row without
     four of them carrying 40px of dead space to match a number nothing needs. */
  grid-template-rows:auto auto auto auto;
  column-gap:var(--seq-gap);
  margin:clamp(36px,4.4vw,56px) 0 0;
  padding:0;
  position:relative;
}

.sequence-stage{
  position:relative;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 4;
  min-width:0;
}
/* The connector runs from this stage's disc to the next one's, measured rather
   than guessed: the disc ends at --seq-disc, and the next column starts one
   gap past this stage's own width. */
.sequence-stage:not(:last-child)::before{
  content:"";
  position:absolute;
  z-index:0;
  inset-block-start:71px;
  inset-inline-start:calc(var(--seq-disc) + 12px);
  inline-size:calc(100% + var(--seq-gap) - var(--seq-disc) - 24px);
  block-size:2px;
  background:var(--imad-gold);
  pointer-events:none;
}
/* The arrowhead sits at the far end of its own connector, pointing into the
   stage it leads to, instead of floating at a fixed offset from a centre. */
.sequence-stage:not(:last-child)::after{
  content:"";
  position:absolute;
  z-index:0;
  inset-block-start:67px;
  inset-inline-start:calc(100% + var(--seq-gap) - 22px);
  inline-size:10px;
  block-size:10px;
  border-block-end:2px solid var(--imad-gold);
  border-inline-end:2px solid var(--imad-gold);
  transform:rotate(-45deg);
  pointer-events:none;
}
[dir="rtl"] .sequence-stage:not(:last-child)::after{transform:rotate(135deg);}

/* Held to the disc's own width so the 28px index stays centred over the 72px
   disc, while the disc itself starts on the same line as the heading and the
   card below it. Centring the marker across the whole column is what pushed
   the disc 96px clear of everything it labels. */
.sequence-marker{
  inline-size:var(--seq-disc);
  justify-self:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  position:relative;
  z-index:1;
  margin-block-end:18px;
}

.sequence-num{
  display:grid;
  place-items:center;
  inline-size:28px;
  block-size:28px;
  border-radius:50%;
  background:var(--imad-gold);
  color:var(--imad-white);
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
}
.sequence-icon{
  display:grid;
  place-items:center;
  inline-size:72px;
  block-size:72px;
  border-radius:50%;
  background:var(--imad-navy);
  color:var(--imad-white);
  box-shadow:0 0 0 6px var(--imad-white);
}
.sequence-icon .imad-icon{width:32px; height:32px; stroke:#fff;}

.sequence-stage > h3{
  font-size:clamp(16px,1.15vw,18px);
  color:var(--imad-navy);
  letter-spacing:-.01em;
  line-height:1.3;
  margin:0 0 8px;
  overflow-wrap:break-word;
}
.sequence-stage > p{
  margin:0 0 16px;
  color:var(--text-dim);
  font-size:13.5px;
  line-height:1.55;
}

.sequence-deliver{
  margin:0;
  padding:16px;
  background:#F3F5F7;
  border-radius:12px;
  min-height:100%;
  box-sizing:border-box;
}
.sequence-deliver > span{
  display:flex;
  align-items:center;
  gap:8px;
  margin-block-end:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--imad-navy);
}
.sequence-deliver > span .imad-icon{width:16px; height:16px; stroke:var(--imad-gold);}
.sequence-deliver ul{list-style:none;}
.sequence-deliver li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding-block:5px;
  font-size:13px;
  line-height:1.45;
  color:var(--imad-charcoal);
}
.sequence-deliver li .imad-icon{
  width:14px;
  height:14px;
  margin-block-start:2px;
  flex:0 0 auto;
  stroke:var(--imad-gold);
}

.sequence-band{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content;
  gap:24px 32px;
  align-items:center;
  margin-block-start:clamp(36px,4vw,52px);
  padding:20px 24px;
  background:#F3F5F7;
  border:1px solid rgba(14,85,127,.12);
  border-radius:14px;
}
.sequence-band p{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  min-width:0;
  font-size:14px;
  line-height:1.45;
  color:var(--imad-navy);
  font-weight:600;
}
.sequence-band-icon{
  display:grid;
  place-items:center;
  inline-size:48px;
  block-size:48px;
  border-radius:50%;
  background:var(--imad-navy);
  color:var(--imad-white);
  flex:0 0 auto;
}
.sequence-band-icon .imad-icon{width:22px; height:22px; stroke:#fff;}

.sequence-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-block-size:48px;
  padding:12px 22px;
  border-radius:8px;
  background:var(--imad-gold);
  color:var(--imad-charcoal);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.sequence-cta:hover{background:var(--imad-light-gold);}
[dir="rtl"] .sequence-cta span:last-child{transform:scaleX(-1);}

@media (max-width:1100px){
  .sequence-stack{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-rows:none;
    gap:28px 24px;
  }
  .sequence-stage{
    display:flex;
    flex-direction:column;
    grid-row:auto;
  }
  .sequence-deliver{flex:1 1 auto; min-height:0;}
  /* Stacked two-up, the connector has nothing to connect. */
  .sequence-stage:not(:last-child)::before,
  .sequence-stage:not(:last-child)::after{display:none;}
  .sequence-band{grid-template-columns:1fr; justify-items:stretch;}
  .sequence-cta{justify-self:start;}
}

@media (max-width:640px){
  .sequence-stack{grid-template-columns:1fr;}
  .sequence-wash{inline-size:70%; block-size:220px; opacity:.85;}
}

/* ======================================================================
   06 — FABRICATION & MATERIALS
   ====================================================================== */

.fab{background:var(--imad-white); color:var(--imad-charcoal);}
.fab-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(28px,3.6vw,56px);}
.fab-intro{grid-column:1 / span 5;}
.fab-intro h2{max-width:16ch;}
.fab-intro .sheet-lede{margin-block-start:16px;}
.fab-scope{margin-block-start:clamp(24px,2.8vw,36px); list-style:none; border-block-start:1px solid var(--line-strong);}
.fab-scope li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding-block:12px; border-block-end:1px solid var(--line); font-size:14.5px;
}
.fab-scope b{font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--text-faint);}
.fab-table-wrap{grid-column:6 / -1; overflow-x:auto;}
.fab-table{inline-size:100%; border-collapse:collapse; min-inline-size:520px;}
.fab-table caption{
  text-align:start; padding-block-end:12px;
  font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--text-faint);
}
.fab-table th{
  text-align:start; padding:12px 16px 12px 0;
  border-block-end:1px solid var(--line-strong);
  font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--text-dim);
}
.fab-table td{
  padding:14px 16px 14px 0; border-block-end:1px solid var(--line);
  font-size:14.5px; vertical-align:top;
}
.fab-table tbody tr:nth-child(odd){background:rgba(23,35,43,.03);}
.fab-table td:first-child{font-weight:600;}
.fab-table td:last-child{color:var(--text-dim);}
.fab-note{
  grid-column:1 / -1; margin-block-start:clamp(22px,2.6vw,34px); padding-block-start:14px;
  border-block-start:1px solid var(--line);
  font-size:13px; color:var(--text-faint);
}
.fab-media{grid-column:1 / span 5; margin-block-start:clamp(26px,3vw,40px); aspect-ratio:4/3; overflow:hidden;}
/* Oversized inside its frame so the parallax drift never exposes an edge. */
.fab-media img{inline-size:100%; block-size:120%; margin-block-start:-10%; object-fit:cover; will-change:transform;}

@media (max-width:900px){
  .fab-intro,.fab-table-wrap,.fab-media{grid-column:1 / -1;}
}

/* ======================================================================
   06 — SECTORS
   The primary sector leads on a filled navy band; the rest read as a
   two-column directory of marks, names and one line each. The old list ran
   01-07 down a single column, numbering a set that has no order.
   ====================================================================== */

.sectors{background:var(--imad-off-white); color:var(--imad-charcoal);}

/* ---- The lead band ---------------------------------------------------
   The one place on this page where navy is a plane rather than a text
   colour, which is what makes the primary sector read as primary without a
   badge saying so. Gold is legal here and nowhere else in the section. */
.sector-lead{
  margin-block-start:clamp(26px,3vw,42px);
  display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3vw,52px); align-items:center;
  padding:clamp(28px,3.2vw,40px) clamp(26px,3vw,44px);
  background:var(--imad-navy); color:var(--imad-white);
}
.sector-lead-head{display:flex; align-items:center; gap:clamp(16px,1.8vw,24px);}
/* The rule between the two halves is what makes the band read as one
   composition rather than a headline with text drifting beside it. */
.sector-lead-body{
  border-inline-start:1px solid rgba(255,255,255,.22);
  padding-inline-start:clamp(24px,3vw,52px);
}
.sector-lead-mark{
  inline-size:clamp(44px,4vw,54px); block-size:clamp(44px,4vw,54px);
  display:grid; place-items:center; flex-shrink:0;
  border:1px solid rgba(255,255,255,.32);
}
.sector-lead-mark .imad-icon{
  inline-size:26px; block-size:26px; stroke:var(--imad-light-gold); stroke-width:1.4;
}
.sector-lead-tag{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--imad-light-gold);
}
.sector-lead-name{
  margin-block-start:8px;
  font-family:var(--font-display); font-size:clamp(26px,2.9vw,38px);
  font-weight:700; letter-spacing:-0.02em; line-height:1.1; color:var(--imad-white);
  text-wrap:balance;
}
.sector-lead-name a{
  color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--imad-light-gold),var(--imad-light-gold));
  background-size:0 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--t-micro) var(--ease-out-3);
}
.sector-lead-name a:hover{background-size:100% 2px;}
.sector-lead-name a:focus-visible{outline:2px solid var(--imad-light-gold); outline-offset:4px;}
.sector-lead-note{
  font-size:clamp(15px,1.2vw,16.5px); line-height:1.6; color:rgba(255,255,255,.82);
  text-wrap:pretty;
}
/* The trades that go into one of these plants — the only place the sectors
   and the service register cross-reference each other. .72 rather than the
   .66 this started at: at 13.5px it measured 4.47:1 on navy, just under AA. */
.sector-lead-trades{
  margin-block-start:14px;
  font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.72);
}

/* ---- The directory ---------------------------------------------------- */
.sector-grid{
  list-style:none; margin-block-start:clamp(24px,2.8vw,36px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,64px);
}
.sector-cell{border-block-end:1px solid var(--line);}
/* Aligned to the top rather than centred: a note that wraps to three lines on
   a phone would otherwise leave the mark floating halfway down the row. */
.sector-cell > a,
.sector-cell-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,1.6vw,20px); align-items:start;
  padding-block:clamp(18px,2vw,24px);
  color:inherit; text-decoration:none;
}
.sector-cell > a:focus-visible{outline:2px solid var(--imad-navy); outline-offset:3px;}
.sector-cell-mark{
  inline-size:34px; block-size:34px; display:grid; place-items:center; flex-shrink:0;
}
.sector-cell-mark .imad-icon{
  inline-size:26px; block-size:26px; stroke:var(--imad-navy); stroke-width:1.4;
  transition:transform var(--t-micro) var(--ease-out-3);
}
.sector-cell-text{display:block; min-inline-size:0;}
.sector-cell-name{
  display:block;
  font-family:var(--font-display); font-size:clamp(18px,1.4vw,21px);
  font-weight:600; letter-spacing:-0.01em; line-height:1.25;
}
.sector-cell-note{
  display:block; margin-block-start:5px;
  font-size:14px; line-height:1.55; color:var(--text-dim); text-wrap:pretty;
}
/* Kept faintly visible rather than revealed on hover: there is no hover on a
   phone, and a row with no affordance at all reads as static text. */
.sector-cell-go{
  color:var(--imad-navy); font-size:16px; opacity:.3;
  transition:opacity var(--t-micro) linear, transform var(--t-micro) var(--ease-out-3);
}
[dir="rtl"] .sector-cell-go{transform:scaleX(-1);}
.sector-cell > a:hover .sector-cell-go,
.sector-cell > a:focus-visible .sector-cell-go{opacity:1; transform:translateX(4px);}
[dir="rtl"] .sector-cell > a:hover .sector-cell-go{transform:scaleX(-1) translateX(4px);}
.sector-cell > a:hover .sector-cell-mark .imad-icon{transform:translateX(3px);}
[dir="rtl"] .sector-cell > a:hover .sector-cell-mark .imad-icon{transform:translateX(-3px);}
.sector-cell:has(> a:hover){border-block-end-color:var(--imad-navy);}

.sectors-foot{
  margin-block-start:clamp(22px,2.6vw,32px);
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:14px 32px;
  color:var(--text-dim); font-size:14.5px;
}
.sectors-foot p{max-inline-size:60ch;}

@media (max-width:760px){
  .sector-grid{grid-template-columns:minmax(0,1fr);}
  .sector-lead{grid-template-columns:minmax(0,1fr); gap:20px; align-items:start;}
  .sector-lead-body{
    border-inline-start:0; padding-inline-start:0;
    border-block-start:1px solid rgba(255,255,255,.22); padding-block-start:20px;
  }
}

@media (prefers-reduced-motion:reduce){
  .sector-lead-name a,
  .sector-cell-go,
  .sector-cell-mark .imad-icon{transition:none;}
  .sector-cell > a:hover .sector-cell-go,
  .sector-cell > a:hover .sector-cell-mark .imad-icon{transform:none;}
}

/* ======================================================================
   07 — OUR WORK
   Four photographic plates in a row on navy. The index, the name and the city
   sit on the picture; there is nothing else to read. Replaces the record-
   schema sheet that used to close the page.
   ====================================================================== */

.work{background:var(--imad-navy); color:var(--imad-white);}
.work-head{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between;
  gap:20px clamp(20px,3vw,48px);
}
.work .imad-eyebrow{color:var(--imad-light-gold);}
.work h2{max-inline-size:20ch; text-transform:uppercase; text-wrap:balance;}
.work h2 em{color:var(--imad-gold); font-style:normal;}
.work-all{
  display:inline-flex; align-items:center; gap:14px; flex:none;
  padding:13px 20px; border:1px solid rgba(255,255,255,.34);
  font-family:var(--font-display); font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--imad-white);
  transition:background-color var(--t-move),border-color var(--t-move),color var(--t-move);
}
.work-all:hover{background:var(--imad-gold); border-color:var(--imad-gold); color:#0b2338;}
.work-all-arrow{transition:transform var(--t-move);}
.work-all:hover .work-all-arrow{transform:translateX(4px);}
[dir="rtl"] .work-all-arrow{transform:scaleX(-1);}
[dir="rtl"] .work-all:hover .work-all-arrow{transform:scaleX(-1) translateX(4px);}

.work-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,1.4vw,22px);
  margin-block-start:clamp(28px,3.4vw,46px); list-style:none;
}
.work-plate{min-inline-size:0;}
.work-plate > a{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/4; background:#0b2338;
}
.work-plate-media{position:absolute; inset:0; display:block;}
.work-plate img{
  inline-size:100%; block-size:100%; object-fit:cover;
  transition:transform .7s var(--ease-out);
}
.work-plate > a:hover img,
.work-plate > a:focus-visible img{transform:scale(1.05);}
.work-plate-scrim{
  position:absolute; inset:0; display:block; pointer-events:none;
  background:linear-gradient(to top,rgba(8,25,40,.96) 0%,rgba(8,25,40,.82) 20%,rgba(8,25,40,.34) 50%,transparent 78%);
}
.work-plate-body{
  position:absolute; inset-inline:0; inset-block-end:0;
  display:grid; gap:7px; padding:clamp(18px,1.8vw,26px);
  padding-inline-end:clamp(56px,5vw,72px);
}
.work-plate-num{
  font-family:var(--font-display); font-size:clamp(20px,1.7vw,26px);
  font-weight:700; line-height:1; color:var(--imad-gold);
}
.work-plate-name{
  font-family:var(--font-display); font-size:clamp(15px,1.15vw,18px);
  font-weight:600; line-height:1.25; letter-spacing:.01em;
  text-transform:uppercase; color:var(--imad-white); text-wrap:balance;
}
.work-plate-place{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:rgba(255,255,255,.76);
}
.work-plate-place .imad-icon{inline-size:14px; block-size:14px; stroke:var(--imad-gold);}
/* The arrow is the plate's affordance, not a second link: the whole plate is
   the anchor, so this only has to look pressable. */
.work-plate-go{
  position:absolute; inset-block-end:clamp(18px,1.8vw,26px); inset-inline-end:clamp(18px,1.8vw,26px);
  display:grid; place-items:center; inline-size:36px; block-size:36px;
  background:var(--imad-gold); color:#0b2338; font-size:15px;
  transition:background-color var(--t-move),transform var(--t-move);
}
.work-plate > a:hover .work-plate-go{background:var(--imad-light-gold); transform:translateX(3px);}
[dir="rtl"] .work-plate-go{transform:scaleX(-1);}
[dir="rtl"] .work-plate > a:hover .work-plate-go{transform:scaleX(-1) translateX(3px);}

@media (max-width:560px){
  .work-head{align-items:start;}
  .work-plate > a{aspect-ratio:4/3;}
}

/* ======================================================================
   08 — CLIENTS
   One quiet row of marks under a three-part head. Replaces the quality-
   control table; the companies that awarded the work make the same case.
   ====================================================================== */

/* White, not off-white: most client marks ship as PNGs with a white plate
   behind them, and any tinted ground turns fifteen logos into fifteen visible
   rectangles. */
.clients-strip{background:var(--imad-white); color:var(--imad-charcoal);}
.clients-strip-head{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  align-items:end; gap:18px clamp(24px,3.4vw,56px);
}
.clients-strip h2{text-wrap:balance;}
.clients-strip-lede{
  max-inline-size:52ch; color:var(--text-dim);
  font-size:15px; line-height:1.7; text-wrap:pretty;
}
.clients-strip-all{flex:none; white-space:nowrap;}

/* The rail clips the drifting track and fades both ends, so marks enter and
   leave the row instead of being sliced off at a hard edge. */
.clients-rail{
  margin-block-start:clamp(30px,3.6vw,52px);
  padding-block-start:clamp(26px,3vw,42px);
  border-block-start:1px solid var(--line);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.clients-row{
  --clients-drift:80s;
  display:flex; align-items:center;
  inline-size:max-content;
  list-style:none; margin:0; padding:0;
  animation:clients-drift var(--clients-drift) linear infinite;
  will-change:transform;
}
/* Spacing rides on the marks, not on a flex gap. The track is the client list
   rendered twice and the loop resets at exactly -50%; a gap between siblings
   is only counted 2n-1 times, so half a gap's worth of drift accumulates every
   cycle and the row visibly walks. A trailing margin makes both halves the
   same width, which is what -50% assumes. */
.clients-mark{
  flex:none;
  display:grid; place-items:center;
  margin-inline-end:clamp(30px,3.8vw,64px);
}
/* Fifteen marks drawn in fifteen different palettes read as noise. Desaturating
   them lets the row sit quietly and the full colour return on hover. */
/* Height is the constant, width follows: marks arrive square, wide and tall,
   and matching them on width alone makes the square ones tower. */
.clients-mark img{
  inline-size:auto; max-inline-size:none; block-size:clamp(58px,5.4vw,80px);
  object-fit:contain; filter:grayscale(1); opacity:.6;
  transition:filter var(--t-move),opacity var(--t-move);
}
.clients-mark:hover img{filter:none; opacity:1;}
/* Hold the row still while someone is reading a particular mark. */
.clients-rail:hover .clients-row{animation-play-state:paused;}

@keyframes clients-drift{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
[dir="rtl"] .clients-row{animation-name:clients-drift-rtl;}
@keyframes clients-drift-rtl{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(50%,0,0);}
}

@media (max-width:900px){
  .clients-strip-head{grid-template-columns:1fr;}
  .clients-strip-all{justify-self:start;}
}

@media (prefers-reduced-motion:reduce){
  /* No drift, so the duplicate pass has nothing to do but repeat itself. What
     is left is a row the reader scrolls by hand. */
  .clients-row{animation:none;}
  .clients-mark[aria-hidden="true"]{display:none;}
  .clients-rail{
    overflow-x:auto;
    -webkit-mask-image:none; mask-image:none;
  }
}

/* ======================================================================
   10 — COMPANY RECORD
   ====================================================================== */

.record-sheet{background:var(--imad-navy); color:var(--imad-white);}
.record-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(28px,3.6vw,56px); align-items:start;}
.record-lede{grid-column:1 / span 7;}
.record-lede h2{max-width:16ch;}
.record-lede p{margin-block-start:16px; color:var(--on-navy-dim); max-width:56ch;}
.record-vision{
  grid-column:8 / -1; padding-inline-start:clamp(18px,2.2vw,32px);
  border-inline-start:1px solid var(--line-strong);
  font-size:15px; line-height:1.65; color:var(--on-navy-dim);
}
.record-vision b{color:var(--imad-white); font-weight:600;}
.record-vision span{
  display:block; margin-block-end:10px;
  font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--imad-light-gold);
}

.title-block{
  grid-column:1 / -1; margin-block-start:clamp(30px,3.6vw,50px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--line);
}
.title-block div{padding:16px 18px 18px; border-inline-end:1px solid var(--line); border-block-end:1px solid var(--line);}
.title-block .k{
  display:block; font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--imad-blue);
}
.title-block .v{display:block; margin-block-start:7px; font-size:14.5px; line-height:1.5;}
.title-block .v em{font-style:normal; color:var(--text-faint);}

.roster{
  grid-column:1 / -1; margin-block-start:clamp(26px,3vw,44px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0 clamp(24px,3vw,48px);
}
.roster div{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding-block:12px; border-block-end:1px solid var(--line);
}
.roster .nm{font-size:14.5px; min-inline-size:0;}
.roster .rl{font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--text-faint); text-align:end; max-inline-size:46%;}

@media (max-width:900px){
  .record-lede,.record-vision{grid-column:1 / -1;}
  .record-vision{border-inline-start:0; padding-inline-start:0;}
}

/* ======================================================================
   11 — ENQUIRY BAND
   ====================================================================== */

.enquiry{background:var(--imad-navy); color:var(--imad-white);}
.enquiry-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(28px,3.6vw,56px);}
.enquiry-main{grid-column:1 / span 7;}
.enquiry-side{grid-column:9 / -1;}
.enquiry h2{max-width:16ch;}
.enquiry p{margin-block-start:16px; color:var(--on-navy-dim); max-width:52ch;}
.enquiry-check{list-style:none; margin-block-start:clamp(22px,2.8vw,34px); border-block-start:1px solid var(--line-strong);}
.enquiry-check li{
  padding-block:12px; border-block-end:1px solid var(--line);
  font-size:14px; color:var(--on-navy-dim);
}
.enquiry-contact{list-style:none;}
.enquiry-contact li{padding-block:12px; border-block-end:1px solid var(--line);}
.enquiry-contact .k{
  display:block; font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--imad-light-gold);
}
.enquiry-contact .v{display:block; margin-block-start:5px; font-size:15px;}
.enquiry-contact a:hover{color:var(--imad-light-gold);}
.enquiry-cta{margin-block-start:clamp(24px,2.8vw,36px);}

@media (max-width:900px){
  .enquiry-main,.enquiry-side{grid-column:1 / -1;}
}

/* ======================================================================
   MOTION — resting states
   Everything above is the final, visible state. GSAP animates from these; if
   the motion bundle never loads, html.imad-motion is removed and nothing here
   is ever hidden.
   ====================================================================== */
.imad-motion .js-rule{transform:scaleX(0);}
@media (prefers-reduced-motion: reduce){
  .imad-motion .js-rule{transform:none;}
  /* .sequence-stage keeps position:relative here. The connector and its
     arrowhead are absolutely positioned against the stage, so unsetting it
     would drop both onto .sequence-stack and stretch them across the row. */
}