@charset "UTF-8";
/*
 * IMAD International Contracting — design system.
 *
 * The site is a drawing set. Every token below exists to draw a sheet:
 * rules, ticks, title blocks, station stamps. Colour is client-fixed and not
 * open to substitution; hierarchy is built from opacity steps, never from new
 * grey values.
 *
 * Loaded on every template. Homepage-specific sheets live in home.css.
 */
:root{
    /* ---- Brand, fixed ---- */
    --imad-navy:#0E557F;
    --imad-blue:#509FC8;          /* blue-light */
    --imad-technical-blue:#3A8BCB;/* blue-mid */
    --imad-gold:#D7942E;
    --imad-light-gold:#EDC269;
    --imad-white:#FFFFFF;
    --imad-off-white:#F4F6F7;
    --imad-charcoal:#17232B;

    /* ---- Typography ----
       Two families, no more. Qanelas sets every heading, Questrial sets
       every paragraph. The width axis stays available but sits near normal:
       the old 118/78 extremes are what made headings read as site signage
       rather than as a company talking. --font-mono is the system stack now,
       used only by admin screens; nothing on the front end asks for it. */
    --font-display:'Qanelas',system-ui,sans-serif;
    --font-body:'Questrial',system-ui,-apple-system,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
    --wdth-wide:104;
    --wdth-narrow:100;

    /* ---- Type scale, capped ----
       The client's brief was "not too big". Every display size on the site
       resolves from one of these five; nothing authors a raw font-size for a
       heading. --fs-h1 tops out at 54px, roughly two thirds of what the
       drawing-set build reached. */
    --fs-h1:clamp(34px,4vw,54px);
    --fs-h2:clamp(26px,2.6vw,36px);
    --fs-h3:19px;
    --fs-eyebrow:12px;
    --fs-small:14px;
    --ls-eyebrow:.16em;

    /* ---- Surface roles (light sheets) ---- */
    --bg:var(--imad-white);
    --surface:var(--imad-off-white);
    --surface-2:var(--imad-white);
    --text:var(--imad-charcoal);
    /* Hierarchy is opacity, not new colours. 100 / 64 / 40. */
    --text-dim:color-mix(in srgb,var(--imad-charcoal) 64%,transparent);
    --text-faint:color-mix(in srgb,var(--imad-charcoal) 40%,transparent);
    --line:color-mix(in srgb,var(--imad-charcoal) 16%,transparent);
    --line-strong:color-mix(in srgb,var(--imad-charcoal) 42%,transparent);
    --brand:var(--imad-navy);
    --brand-dk:var(--imad-navy);
    --brand-soft:var(--imad-off-white);
    --navy:var(--imad-navy);
    --navy-2:var(--imad-charcoal);
    --muted:var(--text-dim);
    --yellow:var(--imad-light-gold);
    --on-navy:var(--imad-white);
    --on-navy-dim:color-mix(in srgb,var(--imad-white) 64%,transparent);
    /* Accent resolves per context. On light sheets gold fails AA as text
       (2.6:1), so --accent-text stays navy there and only --accent-rule —
       used for 3px+ non-text marks — carries gold. */
    --accent-rule:var(--imad-gold);
    --accent-text:var(--imad-navy);
    --brand-lt:var(--imad-navy);

    /* ---- Cards ----
       One surface for every collection on the site: projects, team, clients,
       certifications, posts. The resting shadow is almost nothing so a grid of
       twelve reads flat; the lift is the hover state's whole job. */
    --card-radius:10px;
    --card-pad:clamp(22px,2.2vw,30px);
    --card-shadow:0 1px 2px rgba(23,35,43,.05);
    --card-shadow-lift:0 20px 44px rgba(23,35,43,.13);

    /* ---- Motion ---- */
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-out:cubic-bezier(.16,1,.3,1);   /* expo.out */
    --ease-out-3:cubic-bezier(.22,1,.36,1);/* power3.out */
    --t-micro:180ms;
    --t-move:340ms;
    --t-reveal:700ms;

    /* ---- Rhythm. Register sheets run dense, statements breathe. ---- */
    --space-tight:clamp(48px,6vw,72px);
    --space-band:clamp(72px,9vw,120px);
    --space-open:clamp(96px,12vw,168px);
    --shell-pad:clamp(20px,4vw,32px);

    /* ---- Semantic z-index. No 999. ---- */
    --z-rule:1;
    --z-sticky:600;
    --z-header:700;
    --z-drawer:800;
    --z-scrim:790;
    --z-dialog:900;
    --z-skip:1000;
  }

  /* Dark bands flip the text roles locally, so every child rule keeps working
     without a parallel set of selectors. Gold becomes legal as text here:
     #D7942E on #17232B is 6.4:1. */
  .on-navy,
  .on-charcoal{
    --text:var(--imad-white);
    --text-dim:color-mix(in srgb,var(--imad-white) 64%,transparent);
    --text-faint:color-mix(in srgb,var(--imad-white) 40%,transparent);
    --line:color-mix(in srgb,var(--imad-white) 14%,transparent);
    --line-strong:color-mix(in srgb,var(--imad-white) 34%,transparent);
    --surface-2:color-mix(in srgb,var(--imad-white) 6%,transparent);
    --accent-text:var(--imad-gold);
    --brand-lt:var(--imad-light-gold);
    color:var(--text);
  }
  .on-navy{--accent-text:var(--imad-light-gold); background:var(--imad-navy);}
  .on-charcoal{background:var(--imad-charcoal);}

  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-text-size-adjust:100%;}
  /* Lenis owns smooth scrolling when it runs; native smooth would fight it. */
  html:not(.lenis) {scroll-behavior:smooth;}
  html.lenis,html.lenis body{height:auto;}
  .lenis.lenis-smooth{scroll-behavior:auto !important;}
  .lenis.lenis-stopped{overflow:clip;}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    font-synthesis-weight:none;
    -webkit-font-smoothing:antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:0.001ms !important;}
  }

  /* ---- SCROLL REVEAL ----------------------------------------------------
     Gated behind .imad-motion, which header.php sets before first paint and
     removes again if the motion bundle never arrives. The resting state of
     every element is visible: no JS, a failed script, a crawler or a
     background tab all get the content. Motion is added to a working page,
     never a precondition for seeing it. GSAP drives these on the homepage;
     inner pages use the same classes through the IntersectionObserver
     fallback in motion.js, so the two never disagree. */
  .imad-motion [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);}
  .imad-motion [data-reveal].in-view{opacity:1; transform:none;}
  .imad-motion [data-reveal-group] > *{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
  .imad-motion [data-reveal-group].in-view > *{opacity:1; transform:none;}
  .imad-motion [data-reveal-group] > *:nth-child(1){transition-delay:0ms;}
  .imad-motion [data-reveal-group] > *:nth-child(2){transition-delay:60ms;}
  .imad-motion [data-reveal-group] > *:nth-child(3){transition-delay:120ms;}
  .imad-motion [data-reveal-group] > *:nth-child(4){transition-delay:180ms;}
  .imad-motion [data-reveal-group] > *:nth-child(5){transition-delay:240ms;}
  .imad-motion [data-reveal-group] > *:nth-child(6){transition-delay:300ms;}
  .imad-motion [data-reveal-group] > *:nth-child(7){transition-delay:340ms;}
  .imad-motion [data-reveal-group] > *:nth-child(8){transition-delay:380ms;}
  .imad-motion [data-reveal-group] > *:nth-child(n+9){transition-delay:420ms;}

  /* Reduced motion: same sequence, no displacement — a plain crossfade. */
  @media (prefers-reduced-motion: reduce){
    .imad-motion [data-reveal],
    .imad-motion [data-reveal-group] > *{transform:none !important;}
  }
  a{color:inherit; text-decoration:none;}
  button,input[type="button"],input[type="submit"],input[type="reset"]{font-family:var(--font-display); font-weight:500;}
  .display{font-family:var(--font-display); font-variation-settings:'wdth' var(--wdth-wide); letter-spacing:-0.015em;}
  .mono{font-family:var(--font-body); letter-spacing:.08em;}
  ::selection{background:var(--brand); color:#fff;}
  :focus-visible{outline:2px solid var(--imad-navy); outline-offset:3px;}
  .on-navy :focus-visible{outline-color:var(--imad-light-gold);}

  section{position:relative;}

  /* ---- GLOBAL ENGINEERED-EDITORIAL SHELL ---- */
  :root{
    --imad-shell-offset:88px;
    /* One source of truth for the content column. The width used to be
       declared three times with three different values; the last copy to load
       won, which silently killed the 720px gutter rule below — it set a width
       the later rule immediately overrode, so mid-size screens got 64px
       gutters where 40px was intended. Anything that has to line up with the
       shell — the services slider is the other one — reads these two tokens,
       and the 720px rule now moves the gutter instead of the width. */
    --imad-shell-gutter:64px;
    --imad-shell-max:1440px;
  }
  .imad-shell{width:min(calc(100% - var(--imad-shell-gutter)),var(--imad-shell-max)); margin-inline:auto;}
  .imad-site-main{min-width:0; margin-left:0; padding-top:var(--imad-shell-offset);}
  .imad-site-main .hero{padding-top:0;}
  .imad-tech-index{
    font-family:var(--font-body); font-size:10px; font-weight:700;
    letter-spacing:.18em; line-height:1.4; text-transform:uppercase;
  }
  .imad-skip-link{
    position:fixed; top:8px; left:8px; z-index:1000; padding:12px 16px;
    background:var(--imad-gold); color:var(--imad-charcoal); font-weight:700;
    transform:translateY(-160%);
  }
  .imad-skip-link:focus{transform:translateY(0);}
  /* Fixed, opaque, and offset by --imad-shell-offset on .imad-site-main, so no
     page content ever passes behind it — which is why there is no translucency
     or backdrop blur here to pay for. What scrolling changes is the shadow:
     flat while the hero is under it, lifted once there is content behind. */
  .imad-site-header{
    position:fixed; inset:0 0 auto; z-index:700; height:88px;
    background:var(--imad-white);
    border-bottom:1px solid transparent;
    transition:box-shadow 220ms ease-out, border-color 220ms ease-out;
  }
  .imad-site-header.is-scrolled{
    border-bottom-color:var(--line);
    box-shadow:0 10px 30px rgba(23,35,43,.07);
  }
  .imad-header-inner{height:100%; display:grid; grid-template-columns:minmax(160px,1fr) auto auto; align-items:stretch;}
  .imad-brand{display:flex; align-items:center; min-width:0; padding-inline-end:24px;}
  .imad-brand img{display:block; width:auto; max-width:220px; height:60px; object-fit:contain;}
  .imad-wordmark{display:inline-flex; flex-direction:column; color:var(--imad-navy); line-height:.88; text-transform:uppercase;}
  .imad-wordmark-main{font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:.01em;}
  .imad-wordmark-sub{margin-top:6px; font-size:8px; font-weight:700; letter-spacing:.28em;}
  .imad-primary-nav,
  .imad-mobile-nav,
  .imad-footer-links,
  .imad-footer-services{
    position:static; inset:auto; z-index:auto; padding:0; background:none;
    border:0; box-shadow:none; backdrop-filter:none;
  }
  .imad-primary-nav{display:flex; align-items:stretch;}
  .imad-primary-nav a{
    position:relative; display:flex; align-items:center; min-height:44px; padding-inline:14px;
    color:var(--imad-charcoal); font-family:var(--font-display); font-size:13px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase;
    transition:color 180ms ease-out;
  }
  /* The mark sits under the label, not at the foot of an 88px bar, so it reads
     as an underline rather than as a second border on the header. */
  .imad-primary-nav a::after{
    content:''; position:absolute; inset:auto 14px calc(50% - 18px); height:2px;
    background:var(--imad-gold); transform:scaleX(0); transform-origin:left;
    transition:transform 180ms ease-out;
  }
  .imad-primary-nav a:hover,
  .imad-primary-nav a[aria-current="page"]{color:var(--imad-navy);}
  .imad-primary-nav a:hover::after,
  .imad-primary-nav a:focus-visible::after,
  .imad-primary-nav a[aria-current="page"]::after{transform:scaleX(1);}
  .imad-header-actions{display:flex; align-items:center; gap:10px; margin-inline-start:18px;}
  /* GTranslate builds its own markup inside .gtranslate_wrapper on load, so the
     theme styles the anchors it produces rather than an internal class of its
     own. min-inline-size reserves the slot: the wrapper is empty in the served
     HTML and filled by script, which would otherwise shift the header on load. */
  .imad-header-lang{display:flex; align-items:center; min-inline-size:64px;}
  /* Only ever show the language you are NOT reading. Two links do not fit here,
     and the active one is the least useful of the two. */
  .imad-header-lang .gt-current-lang{display:none;}
  .imad-header-lang a{
    display:inline-flex; align-items:center; justify-content:center;
    min-block-size:44px; padding-inline:12px; border:1px solid var(--line-strong); border-radius:6px;
    color:var(--imad-charcoal); font-family:var(--font-display); font-size:12px; font-weight:600;
    letter-spacing:.06em; white-space:nowrap;
    transition:border-color 180ms ease-out, color 180ms ease-out;
  }
  .imad-header-lang a:hover,
  .imad-header-lang a:focus-visible{border-color:var(--imad-navy); color:var(--imad-navy);}
  /* The quote CTA drops out here, leaving switcher + drawer toggle — which is
     the size at which reaching the footer to change language costs the most. */
  @media (max-width:400px){
    .imad-header-lang{min-inline-size:0;}
    .imad-header-lang a{padding-inline:9px; font-size:11px;}
  }
  .imad-header-cta,
  .imad-drawer-cta,
  .imad-footer-cta-button,
  .imad-cta-button{
    display:inline-flex; align-items:center; justify-content:space-between; gap:18px;
    min-height:44px; padding:12px 20px; border-radius:6px;
    background:var(--imad-gold); color:var(--imad-charcoal);
    font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:.04em;
    transition:background 180ms ease-out, color 180ms ease-out;
  }
  .imad-header-cta,
  .imad-cta-button,
  .imad-footer-cta-button,
  .imad-drawer-cta{text-transform:uppercase; font-size:12px; letter-spacing:.08em; gap:12px;}
  .imad-header-cta:hover,
  .imad-drawer-cta:hover,
  .imad-footer-cta-button:hover,
  .imad-cta-button:hover{background:var(--imad-light-gold); color:var(--imad-charcoal);}
  .imad-menu-toggle,
  .imad-drawer-close{
    display:none; min-width:44px; min-height:44px; border:0; background:none;
    color:inherit; cursor:pointer;
  }
  .imad-menu-toggle{position:relative; border-radius:6px; background:var(--imad-charcoal);}
  .imad-menu-toggle span{position:absolute; left:12px; width:20px; height:2px; background:var(--imad-white); transition:transform 200ms ease-out,opacity 160ms ease-out;}
  .imad-menu-toggle span:nth-child(1){top:15px;}
  .imad-menu-toggle span:nth-child(2){top:21px;}
  .imad-menu-toggle span:nth-child(3){top:27px;}
  .imad-menu-toggle[aria-expanded="true"] span:nth-child(1){top:21px; transform:rotate(45deg);}
  .imad-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .imad-menu-toggle[aria-expanded="true"] span:nth-child(3){top:21px; transform:rotate(-45deg);}
  .imad-menu-scrim{
    position:fixed; inset:0; z-index:790; visibility:hidden; opacity:0;
    background:rgba(23,35,43,.68); transition:opacity 220ms ease-out,visibility 0s linear 220ms;
  }
  .imad-menu-scrim.is-open{visibility:visible; opacity:1; transition-delay:0s;}
  .imad-mobile-drawer{
    position:fixed; inset:0 0 0 auto; z-index:800; display:flex; flex-direction:column;
    width:min(100%,460px); padding:28px clamp(24px,6vw,52px) 36px;
    background:var(--imad-navy); color:var(--imad-white); visibility:hidden;
    transform:translateX(100%); transition:transform 260ms var(--ease),visibility 0s linear 260ms;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  .imad-mobile-drawer.is-open{visibility:visible; transform:translateX(0); transition-delay:0s;}
  /* The drawer is pinned with physical inset and slides in on translateX, and
     transforms ignore direction — so under Arabic it kept entering from the
     right, against the reading order. Mirroring the anchor edge and the travel
     together keeps the open state at translateX(0) for both directions. */
  [dir="rtl"] .imad-mobile-drawer{inset:0 auto 0 0; transform:translateX(-100%);}
  [dir="rtl"] .imad-mobile-drawer.is-open{transform:translateX(0);}
  .imad-drawer-head{display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--imad-light-gold);}
  .imad-drawer-brand{display:flex; align-items:center; min-width:0;}
  .imad-drawer-brand img{display:block; width:auto; max-width:160px; height:38px; object-fit:contain;}
  .imad-drawer-brand .imad-wordmark{color:var(--imad-white);}
  .imad-drawer-contact{
    display:flex; flex-direction:column; gap:8px; margin-top:26px;
    padding-top:22px; border-top:1px solid rgba(255,255,255,.16);
    font-size:14px; color:rgba(255,255,255,.72);
  }
  .imad-drawer-contact a{transition:color var(--t-micro) linear;}
  .imad-drawer-contact a:hover{color:var(--imad-light-gold);}
  .imad-drawer-close{display:grid; place-items:center; border:1px solid rgba(255,255,255,.24); color:var(--imad-white); font-size:30px; line-height:1;}
  /* ponytail: no margin-block:auto — auto margins in an overflowing flex column
     push content past the scroll origin and make the top items unreachable. */
  .imad-mobile-nav{display:flex; flex-direction:column; margin-top:32px; counter-reset:imad-nav;}
  .imad-mobile-nav a{
    position:relative; counter-increment:imad-nav; display:flex; align-items:center; min-height:60px;
    border-bottom:1px solid rgba(255,255,255,.16); font-family:var(--font-display);
    font-size:15px; font-weight:500; line-height:1.2;
  }
  .imad-mobile-nav a::before{
    content:'0' counter(imad-nav); width:38px; flex:none; color:var(--imad-light-gold);
    font-family:var(--font-display); font-size:9px; letter-spacing:.12em;
  }
  .imad-drawer-cta{margin-top:28px;}
  .imad-mobile-nav a[aria-current="page"]{color:var(--imad-navy); background:var(--imad-white); padding-inline:12px;}
  .imad-mobile-nav a[aria-current="page"]::after{content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--imad-technical-blue);}
  body.menu-open{overflow:hidden;}
  body.admin-bar{--imad-shell-offset:120px;}
  body.admin-bar .imad-site-header{top:32px;}
  body.admin-bar .imad-site-header{top:68px;}

  /* The switcher costs the header ~64px, and the brand is the grid's flexible
     column, so it pays for all of it. Between the nav breakpoint and ~1320px
     that column was already at its 160px floor, and the logo (169px) started
     spilling out of it. Reclaiming the difference from padding keeps the logo
     whole without dragging the nav breakpoint up and taking the inline nav
     away from a whole band of desktop widths. */
  @media (min-width:1181px) and (max-width:1320px){
    .imad-brand{padding-inline-end:12px;}
    .imad-primary-nav a{padding-inline:10px;}
    .imad-primary-nav a::after{inset:auto 10px calc(50% - 18px);}
    .imad-header-actions{margin-inline-start:10px;}
  }
  @media (max-width:1180px){
    .imad-primary-nav{display:none;}
    .imad-menu-toggle{display:block;}
    .imad-header-inner{grid-template-columns:1fr auto;}
  }
  @media (max-width:782px){
    body.admin-bar{--imad-shell-offset:134px;}
    body.admin-bar .imad-site-header{top:46px;}
    body.admin-bar .imad-site-header{top:82px;}
  }
  @media (max-width:720px){
    :root{--imad-shell-gutter:40px;}
    .imad-site-main{margin-left:0;}
    .imad-header-cta{display:none;}
    .imad-brand img{height:40px; max-width:190px;}
  }
  @media (max-width:480px){
    .imad-header-inner{width:calc(100% - 32px);}
  }

  /* The pre-redesign homepage sections (hero, marquee, capabilities, about,
     service cards, process, stats) were deleted with their template parts.
     What remains below is shared shell and inner-page styling. */
  /* ---- SECTION HEADER W/ VERTICAL LABEL ---- */
  .sec-head{display:flex; gap:22px; align-items:flex-end; padding:70px 32px 34px; border-bottom:1px solid var(--line);}
  .sec-tag{
    writing-mode:vertical-rl; font-family:var(--font-body); font-size:11px;
    letter-spacing:.2em; color:var(--text-dim); text-transform:uppercase; padding-bottom:4px;
  }
  .sec-head h2{font-family:var(--font-display); font-size:42px; font-weight:700; text-transform:uppercase; line-height:1.10;}
  .sec-head p{max-width:420px; color:var(--text-dim); font-size:14px; margin-left:auto; padding-bottom:6px;}
  @media (max-width:720px){ .sec-head{flex-wrap:wrap;} .sec-head p{margin-left:0;} }

  /* ---- EMERGENCY BAND ---- */
  .emergency{
    display:grid; grid-template-columns:1.3fr 1fr;
    background:var(--navy);
  }
  .em-left{padding:60px 32px; display:flex; flex-direction:column; justify-content:center;}
  .em-left .eyebrow{color:var(--brand-lt);}
  .em-left h2{font-family:var(--font-display); font-size:42px; font-weight:700; text-transform:uppercase; line-height:1.10;}
  .em-left p{color:var(--text-dim); max-width:460px; margin-top:16px; font-size:15px; line-height:1.6;}
  /* Matches the footer's call link: same body face, same weight, same icon.
     It was Inter at .03em tracking, and a monospace advance width puts
     a full character cell around every digit and space — which is what made the
     number read as far too loosely set next to everything else on the site. */
  .em-phone{
    display:inline-flex; align-items:center; gap:12px; margin-top:26px;
    font-size:clamp(24px,3.2vw,34px); font-weight:600; letter-spacing:.01em;
    color:var(--yellow); transition:color 160ms ease-out;
    /* .em-left is a flex column, which blockifies inline-flex to flex and
       stretched the anchor across the full column — a 715px click target for a
       220px number. fit-content pins the box to the content in either layout. */
    width:fit-content;
  }
  .em-phone svg{width:26px; height:26px; flex:none;}
  .em-phone:hover{color:#fff;}
  .em-right{position:relative; min-height:280px;
    background:linear-gradient(180deg, rgba(14,85,127,.15), rgba(14,85,127,.85)), url('../images/imad-electrical.webp') center/cover;
  }
  @media (max-width:820px){ .emergency{grid-template-columns:1fr;} }

  /* ---- GALLERY (masonry via CSS columns — each photo keeps its own aspect ratio) ---- */
  .gallery{padding:0 32px 80px;}
  .gal-grid{column-count:4; column-gap:10px; margin-top:10px;}
  /* Now a <button> so the viewer is keyboard-reachable; strip the UA chrome and
     restore the block behaviour the CSS-columns masonry depends on. */
  .gal-item{
    overflow:hidden; break-inside:avoid; margin-bottom:10px;
    display:block; width:100%; padding:0; border:0; background:none;
    font:inherit; color:inherit; cursor:zoom-in; text-align:left;
  }
  .gal-item:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
  /* every source photo is 3:2, so masonry needs the stagger authored in —
     without varied aspect-ratios the columns render as a flat grid */
  .gal-grid img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover; filter:grayscale(15%) contrast(1.05); transition:transform 550ms var(--ease), filter 550ms ease-out;}
  .gal-item:nth-child(3n+2) img{aspect-ratio:3/4;}
  .gal-item:nth-child(4n+4) img{aspect-ratio:1/1;}
  @media (hover:hover) and (pointer:fine){
    .gal-item:hover img{transform:scale(1.06); filter:grayscale(0%) contrast(1.05);}
  }
  @media (max-width:900px){ .gal-grid{column-count:3;} }
  @media (max-width:640px){ .gal-grid{column-count:2;} }

  /* ---- LIGHTBOX (native <dialog>; no library) ---- */
  dialog.lightbox{
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    margin:0; padding:0; border:0; background:transparent; overflow:hidden;
    display:none; place-items:center; grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(8px,2vw,28px);
  }
  dialog.lightbox[open]{display:grid;}
  dialog.lightbox::backdrop{background:rgba(14,85,127,.92); backdrop-filter:blur(6px);}
  .lb-frame{
    grid-column:2; display:flex; flex-direction:column; align-items:center; gap:14px;
    max-height:100dvh; padding:clamp(48px,7vh,80px) 0;
  }
  .lb-frame img{
    max-width:100%; max-height:calc(100dvh - 170px);
    width:auto; height:auto; object-fit:contain; display:block; border-radius:10px;
    background:var(--navy-2);
  }
  .lb-meta{
    font-family:var(--font-body); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--on-navy-dim); text-align:center; max-width:60ch; line-height:1.6;
  }
  .lb-meta #lbCount{color:var(--brand-lt); margin-right:10px;}
  .lb-close, .lb-nav{
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
    color:var(--on-navy); border-radius:50%; cursor:pointer;
    display:grid; place-items:center; flex:none;
    transition:background 160ms ease-out, border-color 160ms ease-out;
  }
  .lb-close:hover, .lb-nav:hover{background:var(--brand); border-color:var(--brand);}
  .lb-close:focus-visible, .lb-nav:focus-visible{outline:2px solid #fff; outline-offset:2px;}
  .lb-nav{width:clamp(44px,5vw,52px); height:clamp(44px,5vw,52px);}
  .lb-nav svg{width:22px; height:22px;}
  .lb-prev{grid-column:1; margin-left:clamp(8px,2vw,24px);}
  .lb-next{grid-column:3; margin-right:clamp(8px,2vw,24px);}
  .lb-close{
    position:absolute; top:18px; right:18px; z-index:2;
    width:44px; height:44px;
  }
  .lb-close svg{width:18px; height:18px;}
  /* Below 640px the side arrows would crowd the photo off the screen, so they
     drop to the bottom edge and the image takes the full width. */
  @media (max-width:640px){
    dialog.lightbox{grid-template-columns:1fr; gap:0;}
    .lb-frame{grid-column:1; padding:64px 12px 92px;}
    .lb-frame img{max-height:calc(100dvh - 200px);}
    /* Same safe-area reasoning as the WhatsApp button: these sit at the very
       bottom edge, which is where phone chrome lives. */
    .lb-nav{position:absolute; bottom:calc(22px + env(safe-area-inset-bottom, 0px));}
    .lb-prev{left:calc(50% - 62px); margin:0;}
    .lb-next{right:calc(50% - 62px); margin:0;}
  }

  /* ---- WHATSAPP STICKY BUTTON ---- */
  .whatsapp-btn{
    /* Offset by the safe-area inset, not a bare 24px. On a phone with a home
       indicator — or Safari's bottom toolbar — a flat offset drops the button
       underneath the browser chrome, where it is neither visible nor tappable.
       The 0px fallback keeps every other browser exactly where it was. */
    position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:590;
    width:56px; height:56px; border-radius:50%; background:#25D366;
    display:grid; place-items:center; box-shadow:0 8px 22px rgba(14,85,127,.22);
    transition:transform 160ms ease-out, box-shadow 160ms ease-out, opacity 200ms ease-out;
  }
  .whatsapp-btn:hover{transform:scale(1.08); box-shadow:0 10px 28px rgba(14,85,127,.3);}
  /* The panel slides in at z-index 560 and the button sits at 590, so it would
     otherwise hover over the open menu as a stray green bubble. */
  body.menu-open .whatsapp-btn{opacity:0; visibility:hidden; pointer-events:none;}
  .whatsapp-btn svg{width:30px; height:30px;}
  @media (max-width:480px){
    .whatsapp-btn{right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:50px; height:50px;}
    .whatsapp-btn svg{width:26px; height:26px;}
  }

  /* ---- LEAD CAPTURE DIALOG ----
     A navy header cap over a white form. The cap does two jobs: it gives the
     dialog a face at the size it opens at, and it puts the close control on a
     dark ground where a 44px target does not have to shout to be visible. */
  /* The dialog is sized to fit the viewport rather than to scroll inside it.
     Every vertical measure below — cap padding, field gaps, control heights —
     is a clamp against svh, so on a short window the whole form compresses to
     the space available instead of pushing the submit button past the fold.
     The floors are the smallest comfortable tap targets, and the ceilings are
     the roomy desktop values, so nothing changes on a normal screen.

     .wpcf7 keeps overflow-y:auto purely as a backstop for the pathological
     case (a 320x400 window, a 200% font zoom); on real viewports it never
     engages, which is why the header is pinned and the submit is sticky. */
  dialog.lead-dialog{
    --lead-padx:clamp(20px,5vw,32px);
    --lead-padt:clamp(14px,3.4svh,26px);
    --lead-padb:clamp(15px,3.4svh,32px);
    --lead-gap:clamp(8px,1.8svh,14px);
    --lead-control:clamp(38px,5.6svh,44px);
    border:0; background:var(--imad-white); color:var(--text);
    padding:0; margin:auto; width:min(94vw,520px); max-height:92svh; overflow:hidden;
    display:flex; flex-direction:column;
    border-radius:16px;
    box-shadow:0 32px 80px rgba(14,32,45,.34), 0 4px 12px rgba(14,32,45,.18);
    transition:opacity 320ms var(--ease), transform 320ms var(--ease);
  }
  /* display:flex above is an author rule and beats the UA's
     dialog:not([open]){display:none}, so without this the closed dialog
     renders inline in the page instead of staying hidden until showModal(). */
  dialog.lead-dialog:not([open]){display:none;}
  dialog.lead-dialog[open]{opacity:1; transform:translateY(0) scale(1);}
  @starting-style{ dialog.lead-dialog[open]{opacity:0; transform:translateY(16px) scale(.97);} }
  dialog.lead-dialog::backdrop{
    background:rgba(11,24,34,.62);
    -webkit-backdrop-filter:blur(6px) saturate(.9); backdrop-filter:blur(6px) saturate(.9);
    transition:opacity 320ms var(--ease);
  }
  dialog.lead-dialog[open]::backdrop{opacity:1;}
  @starting-style{ dialog.lead-dialog[open]::backdrop{opacity:0;} }
  /* The close button is a child of the dialog rather than of the form, so the
     dialog itself has to be the positioning context. This used to say
     position:relative, which overrode the UA's position:fixed for a modal
     dialog: the dialog dropped into document flow, scrolled away with the page
     behind it, and any wheel over it chained to the document instead of
     reaching the open service picker. Fixed positioning restores both, and
     inset:0 with the margin:auto above keeps it centred in the viewport. */
  dialog.lead-dialog{position:fixed; inset:0;}
  /* Belt and braces on top of that: Chrome blocks page scrolling behind its own
     modal dialogs, but that is not universal, so the document is locked while
     the form is open. Verified to cause no layout shift here — the page has no
     classic scrollbar gutter to reclaim. */
  body:has(dialog.lead-dialog[open]){overflow:hidden;}
  .lead-body{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden;}
  /* An author display: wins over the UA's [hidden]{display:none}, so the
     JS that swaps the form for the confirmation panel was a no-op and both
     rendered at once. Anything given a display: needs this guard. */
  .lead-body[hidden]{display:none;}
  /* Contact Form 7 wraps its fields in <form class="wpcf7-form">; it inherits
     the stack the old .lead-form used to provide. */
  .lead-body .wpcf7-form{display:flex; flex-direction:column; gap:clamp(10px,2svh,16px);}
  .lead-body .wpcf7,
  .lead-fallback{
    padding:var(--lead-padt) var(--lead-padx) var(--lead-padb);
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:rgba(23,35,43,.25) transparent;
  }
  .lead-body .wpcf7::-webkit-scrollbar,
  .lead-fallback::-webkit-scrollbar{width:8px;}
  .lead-body .wpcf7::-webkit-scrollbar-track,
  .lead-fallback::-webkit-scrollbar-track{background:transparent;}
  .lead-body .wpcf7::-webkit-scrollbar-thumb,
  .lead-fallback::-webkit-scrollbar-thumb{background:rgba(23,35,43,.25); border-radius:4px;}
  .lead-body .wpcf7::-webkit-scrollbar-thumb:hover,
  .lead-fallback::-webkit-scrollbar-thumb:hover{background:var(--muted);}
  /* On the navy cap, so it is white-on-dark rather than a grey glyph floating
     over the first form label. */
  .lead-close{
    position:absolute; inset-block-start:16px; inset-inline-end:16px; z-index:2;
    display:grid; place-items:center; width:40px; height:40px;
    border:1px solid rgba(255,255,255,.28); border-radius:50%;
    background:rgba(255,255,255,.08); color:var(--imad-white); cursor:pointer;
    transition:background var(--t-micro) linear, transform var(--t-micro) var(--ease-out-3);
  }
  .lead-close:hover{background:var(--imad-gold); border-color:var(--imad-gold); color:var(--imad-charcoal); transform:rotate(90deg);}
  /* The confirmation panel drops the navy cap, which would leave a white glyph
     on white until the dialog auto-closes. */
  dialog.lead-dialog:has(.lead-body[hidden]) .lead-close{
    background:transparent; border-color:var(--line); color:var(--imad-navy);
  }
  .lead-close svg{width:15px; height:15px;}
  /* The cap. Its gold hairline is the only gold in the dialog until the submit
     button, so the eye runs eyebrow → heading → button without a detour. */
  .lead-head{
    position:relative; flex:none;
    padding:clamp(16px,3.8svh,30px) var(--lead-padx) clamp(14px,3.5svh,28px);
    /* Clears the 40px close button and its 16px inset, so a heading that runs
       long on a narrow screen wraps instead of colliding with the glyph. */
    padding-inline-end:calc(var(--lead-padx) + 44px);
    background:var(--imad-navy); color:var(--imad-white);
  }
  .lead-head::after{
    content:''; position:absolute; inset:auto 0 0; block-size:3px;
    background:var(--imad-gold);
  }
  .lead-head .sec-tag{
    writing-mode:horizontal-tb; display:block; margin:0 0 clamp(5px,1.3svh,10px);
    font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:600;
    letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--imad-light-gold);
  }
  .lead-head h3{
    font-family:var(--font-display); font-weight:700; font-size:clamp(19px,min(4.6vw,3.6svh),28px);
    text-transform:none; letter-spacing:-.01em; line-height:1.2; color:var(--imad-white);
    max-width:20ch;
  }
  .lead-head p{
    margin-top:clamp(5px,1.5svh,10px); max-width:44ch;
    font-size:clamp(12.5px,1.9svh,14px); line-height:1.5; color:rgba(255,255,255,.76);
  }
  /* Compressing the rhythm buys about 90px; below this the cap's supporting
     copy has to go too, or the submit button leaves the viewport. The heading
     still carries the ask, and #leadDialogTitle still labels the dialog. */
  @media (max-height:660px){
    .lead-head p{display:none;}
  }
  @media (max-height:580px){
    .lead-head .sec-tag{display:none;}
    .lead-fields textarea{min-height:44px;}
  }
  .lead-fields{display:flex; flex-direction:column; gap:var(--lead-gap);}
  .lead-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--lead-gap);}
  /* Name and Phone stay paired at every width. Stacking them below 340px used
     to be the rule, but it costs a whole field's height and is the single
     thing that pushed the dialog past the fold on a small screen — and a 126px
     input at 320px wide is still perfectly usable, whereas a form the visitor
     has to scroll is not. */
  .lead-fields label{display:flex; flex-direction:column; gap:clamp(4px,.9svh,7px); font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--imad-navy); text-transform:uppercase;}
  .lead-fields input, .lead-fields select, .lead-fields textarea{
    background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--text);
    min-height:var(--lead-control); padding:9px 12px; font-family:var(--font-body); font-size:14px; text-transform:none; letter-spacing:normal;
    transition:border-color 160ms ease-out;
  }
  .lead-fields input:focus-visible, .lead-fields select:focus-visible, .lead-fields textarea:focus-visible{
    outline:2px solid var(--imad-navy); outline-offset:0; border-color:var(--imad-navy);
  }
  .lead-fields textarea{min-height:clamp(54px,12svh,96px); resize:vertical;}
  /* Service dropdown stays the native control.

     It was briefly switched to appearance:base-select so the 18-entry list
     could be capped and styled rather than opening as an OS-drawn slab. It is
     reverted because the capped picker could not be scrolled in a real
     browser. The cause was not pinned down: the picker box is a correct
     150-232px overflow-y:auto container over ~664px of options, and keyboard
     navigation does scroll it, but wheel and trackpad reportedly do not, and
     no automated check here can confirm wheel routing either way (a synthetic
     wheel bypasses overflow entirely, scrolling the document even over a plain
     overflow:auto div). An unverifiable dropdown is not worth the styling: the
     native picker is guaranteed scrollable by wheel, trackpad, touch and
     keyboard on every platform. Revisit only with real-device testing. */
  /* Sticky action bar. The primary action was scrolling out of reach — and
     getting sliced in half by the dialog's bottom edge — on short viewports.
     bottom:0 is measured from the scroller's content box, so the button parks
     exactly one bottom-padding above the dialog edge — which is also where it
     comes to rest at the end of the scroll, so there is no jump. The
     offset+spread shadow paints the white gutter beneath it, clipped by the
     scroll container so it never bleeds past the rounded corners. */
  .lead-submit{
    position:sticky; bottom:0; z-index:1;
    box-shadow:0 32px 0 32px var(--imad-white);
    min-height:clamp(42px,6.4svh,50px); border:none; border-radius:8px; cursor:pointer; width:100%;
    background:var(--imad-gold); color:var(--imad-charcoal);
    font-family:var(--font-display); font-size:13px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    transition:background var(--t-micro) linear, transform var(--t-micro) var(--ease-out-3);
  }
  .lead-submit:hover{background:var(--imad-light-gold);}
  .lead-submit:active{transform:translateY(1px);}
  .lead-thanks{flex:1 1 auto; min-height:0; overflow-y:auto; padding:clamp(30px,7svh,56px) var(--lead-padx); text-align:center;}
  /* A gold tick drawn in CSS: the dialog is already loaded when this panel
     appears, so an image request at the moment of success is one that can fail. */
  .lead-thanks::before{
    content:''; display:block; width:56px; height:56px; margin:0 auto 22px;
    border-radius:50%; background:var(--imad-gold);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6 9.2 18 20 6.6'/%3E%3C/svg%3E") center/28px no-repeat,
            linear-gradient(#000,#000);
    -webkit-mask-composite:xor;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6 9.2 18 20 6.6'/%3E%3C/svg%3E") center/28px no-repeat,
          linear-gradient(#000,#000);
    mask-composite:exclude;
  }
  .lead-thanks h3{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,4.6vw,28px); line-height:1.2; text-transform:none; color:var(--imad-navy);}
  .lead-thanks p{font-size:14.5px; color:var(--text-dim); margin-top:10px; line-height:1.65;}

  /* Contact Form 7 chrome. CF7 wraps every field in its own <span>, which would
     otherwise break the label/input stack, and ships unstyled validation text. */
  .lead-fields .wpcf7-form-control-wrap{display:block;}
  .lead-fields .wpcf7-form-control{width:100%;}
  .lead-fields .wpcf7-not-valid{border-color:var(--brand);}
  .wpcf7-not-valid-tip{
    font-family:var(--font-body); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--brand); margin-top:6px; display:block;
  }
  .wpcf7-response-output{
    margin:0; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--brand);
    border-radius:8px; background:var(--surface-2); font-size:13px; line-height:1.5; color:var(--text-dim);
  }
  /* CF7 ships per-state border colours — amber for invalid, green for sent —
     at .wpcf7 form.invalid specificity, which outranks the rule above. Restate
     them per state rather than reaching for !important. */
  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output,
  .wpcf7 form.payment-required .wpcf7-response-output{
    border-color:var(--line); border-left-color:var(--brand);
  }
  .wpcf7 form.sent .wpcf7-response-output{border-color:var(--line); border-left-color:#1a7f37;}
  /* CF7 marks the whole form busy mid-submit; dim it so the wait reads as
     deliberate rather than as a dead button. */
  .wpcf7-form.submitting .lead-submit{opacity:.6; pointer-events:none;}
  /* The spinner is only visibility:hidden when idle, so it would otherwise
     reserve a blank strip under the button for the entire time the form sits
     untouched. */
  .wpcf7-spinner{display:none;}
  .wpcf7-form.submitting .wpcf7-spinner{display:block; margin:8px auto 0;}

  .lead-fallback{display:flex; flex-direction:column; gap:12px; text-align:center;}
  .lead-fallback .btn-primary{background:var(--imad-gold); color:var(--imad-charcoal); border-radius:8px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600;}
  .lead-fallback .btn-ghost{border:1px solid var(--line-strong); border-radius:8px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600;}
  .lead-fallback p{font-size:13px; color:var(--text-dim); line-height:1.5;}
  .lead-fallback .btn-primary, .lead-fallback .btn-ghost{width:100%; text-align:center;}

  /* ---- INNER PAGES (blog index, page, single, 404) ---- */
  /* ---- Article body ----
     One measured column. 68ch is the readable ceiling for 17px prose; wider
     and the eye loses the start of the next line. */
  .imad-post-shell{max-width:760px;}
  .imad-post-meta{
    display:flex; flex-wrap:wrap; gap:14px 40px;
    padding-block:0 26px; margin-block-end:30px;
    border-block-end:1px solid var(--line); font-size:14.5px; color:var(--text);
  }
  .imad-post-meta small{
    display:block; margin-bottom:5px; color:var(--imad-navy);
    font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  }
  .entry-content{max-width:68ch; font-size:17px; line-height:1.75; color:var(--text-dim);}
  .entry-content > * + *{margin-top:22px;}
  .entry-content h2, .entry-content h3, .entry-content h4{
    font-family:var(--font-display); text-transform:none; color:var(--imad-navy);
    letter-spacing:-.01em; margin-top:38px;
  }
  .entry-content h2{font-size:var(--fs-h2); line-height:1.2;}
  .entry-content h3{font-size:var(--fs-h3); line-height:1.3;}
  .entry-content h4{font-size:17px; line-height:1.35;}
  .entry-content a{color:var(--imad-navy); text-decoration:underline; text-decoration-color:var(--imad-gold); text-decoration-thickness:2px; text-underline-offset:3px;}
  .entry-content a:hover{color:var(--imad-technical-blue);}
  .entry-content img{max-width:100%; height:auto; border-radius:var(--card-radius);}
  .entry-content blockquote{
    padding:4px 0 4px 24px; border-inline-start:3px solid var(--imad-gold);
    font-family:var(--font-display); font-size:20px; font-style:normal;
    line-height:1.5; color:var(--imad-navy);
  }
  .entry-content ul, .entry-content ol{padding-inline-start:22px;}
  .entry-content li + li{margin-top:8px;}
  .entry-content li::marker{color:var(--imad-gold);}
  .entry-content code{padding:2px 6px; border-radius:4px; background:var(--surface); font-family:var(--font-mono); font-size:.88em;}
  .entry-content pre{padding:20px; border-radius:var(--card-radius); background:var(--imad-charcoal); color:var(--imad-off-white); overflow-x:auto;}
  .entry-content pre code{background:none; padding:0; color:inherit;}
  .entry-media{margin-bottom:26px;}
  .entry-media img{width:100%; height:auto; border-radius:var(--card-radius);}
  .entry-empty{color:var(--text-dim);}

  /* ---- Previous / next ---- */
  .imad-post-nav{
    display:grid; gap:clamp(14px,2vw,20px); margin-top:clamp(36px,4.5vw,56px);
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
  .imad-post-nav-link{
    display:flex; flex-direction:column; gap:8px; padding:var(--card-pad);
    border:1px solid var(--line); border-radius:var(--card-radius);
    background:var(--imad-white);
    transition:border-color var(--t-move) linear, box-shadow var(--t-move) var(--ease-out-3), transform var(--t-move) var(--ease-out-3);
  }
  .imad-post-nav-link:hover{transform:translateY(-3px); border-color:transparent; box-shadow:var(--card-shadow-lift);}
  .imad-post-nav-link small{
    color:var(--imad-gold); font-size:11px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
  }
  .imad-post-nav-link span{font-family:var(--font-display); font-size:17px; font-weight:600; line-height:1.35; color:var(--imad-navy);}
  .imad-post-nav-link.is-next{text-align:end;}

  /* ---- Pagination ---- */
  .pagination, .page-links{
    display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
    margin-top:clamp(32px,4vw,52px); font-size:14px; font-weight:600;
  }
  .pagination .page-numbers, .page-links a, .page-links > span{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; padding-inline:14px;
    border:1px solid var(--line); border-radius:8px; color:var(--text);
    transition:background var(--t-micro) linear, border-color var(--t-micro) linear, color var(--t-micro) linear;
  }
  .pagination .page-numbers:hover{border-color:var(--imad-navy); color:var(--imad-navy);}
  .pagination .page-numbers.current{background:var(--imad-navy); border-color:var(--imad-navy); color:var(--imad-white);}
  /* the phone in the navy band became an <a> in the theme; keep the flat look */
  /* inline-flex, not inline-block: the icon and number sit on one row now. */
  a.em-phone{display:inline-flex; text-decoration:none;}
  @media (max-width:720px){
    .imad-post-meta{gap:12px 26px;}
  }

  /* ---- SHARED INNER HERO ----
     Same composition as the homepage slider so every page opens the same way:
     full-bleed photograph, charcoal scrim from the inline-start edge, copy on
     top. The header floats over it, so the top padding clears the header
     rather than the section starting below it. */
  .imad-inner-hero{
    position:relative; display:flex; align-items:flex-end;
    min-height:clamp(380px,46svh,460px);
    padding-block:calc(var(--imad-shell-offset) + 40px) clamp(44px,6vw,72px);
    background:var(--imad-charcoal); color:var(--imad-white); overflow:clip;
  }
  .imad-inner-hero-media{position:absolute; inset:0; z-index:0;}
  .imad-inner-hero-media img{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.03);}
  .imad-inner-hero-scrim{
    position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(to bottom,rgba(23,35,43,.42),rgba(23,35,43,.22) 40%,rgba(23,35,43,.84)),
      linear-gradient(to right,rgba(14,32,45,.88),rgba(14,32,45,.42) 58%,rgba(14,32,45,.10));
  }
  [dir="rtl"] .imad-inner-hero-scrim{
    background:
      linear-gradient(to bottom,rgba(23,35,43,.42),rgba(23,35,43,.22) 40%,rgba(23,35,43,.84)),
      linear-gradient(to left,rgba(14,32,45,.88),rgba(14,32,45,.42) 58%,rgba(14,32,45,.10));
  }
  .imad-inner-hero-copy{position:relative; z-index:1;}
  .imad-inner-hero .imad-eyebrow{color:var(--imad-gold);}
  .imad-inner-hero h1{max-width:18ch; overflow-wrap:anywhere;}
  .imad-inner-intro{max-width:60ch; margin-top:18px; color:rgba(255,255,255,.80); font-size:clamp(15px,1.15vw,17px); line-height:1.65;}

  /* Services hero: shop-floor layout marks over the fabrication plate. */
  .imad-inner-hero--services .imad-inner-hero-media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      repeating-linear-gradient(-28deg, transparent 0 22px, rgba(215,148,46,.08) 22px 23px),
      linear-gradient(to right, transparent 72%, rgba(14,85,127,.18));
  }
  .imad-inner-hero--services h1{max-width:16ch;}

  /* ---- REUSABLE CTA ---- */
  .imad-cta{background:var(--imad-navy); border-block:1px solid rgba(255,255,255,.16);}
  .imad-cta-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:48px; padding-block:72px;}
  .imad-cta h2{max-width:20ch;}
  .imad-cta p{max-width:58ch; margin-top:20px; color:var(--imad-off-white); line-height:1.65;}
  .imad-cta-button{min-width:220px;}

  /* ---- FOUR-COLUMN FOOTER ---- */
  .imad-site-footer{background:var(--imad-navy); color:var(--imad-white);}

  /* ==== FOOTER =============================================================
     Lives in main.css, not home.css. It used to be styled in the homepage
     stylesheet — which only enqueues on is_front_page() — so every inner page
     on the site shipped an unstyled column of links. Nothing in here is
     homepage-specific, so nothing in here belongs there.

     Composition: a request band, a brand block with the contact details beside
     three link columns, then the fine print. */
  .foot{
    position:relative; overflow:clip;
    background:var(--imad-charcoal); color:var(--imad-white);
  }

  /* The request band. Only renders where the page has not already asked. */
  .imad-footer-cta{
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    gap:clamp(24px,4vw,56px); padding-block:clamp(40px,5vw,64px);
    border-block-end:1px solid var(--line);
  }
  .imad-footer-cta h2{max-width:18ch;}
  .imad-footer-cta p{max-width:56ch; margin-top:14px; color:var(--on-navy-dim); font-size:15px; line-height:1.65;}
  .imad-footer-cta-button{min-width:220px; justify-content:space-between;}

  .foot-main{
    display:grid; gap:clamp(30px,4vw,56px);
    grid-template-columns:minmax(260px,1.5fr) repeat(2,minmax(150px,1fr)) minmax(210px,1.25fr);
    padding-block:clamp(44px,5.5vw,72px);
  }
  .foot-brand{display:flex; flex-direction:column; gap:20px; min-width:0;}
  .foot-brand-mark{display:inline-flex; align-items:center; min-height:44px;}
  .foot-brand-mark img{display:block; width:auto; max-width:210px; height:46px; object-fit:contain;}
  .foot-brand-mark .imad-wordmark{color:var(--imad-white);}
  .foot-brand-mark .imad-wordmark-main{color:var(--imad-white);}
  .foot-brand p{max-width:42ch; color:var(--on-navy-dim); font-size:14.5px; line-height:1.7;}

  /* Contact details set as a definition list rather than more link soup: the
     address, the phone and the email are the three things a visitor scrolled
     this far to find. */
  .foot-contact{display:flex; flex-direction:column; gap:14px; margin-top:2px;}
  .foot-col-contact .foot-contact{margin-top:0;}
  .foot-contact > div{display:flex; gap:12px; align-items:flex-start;}
  .foot-contact .imad-icon{width:19px; height:19px; flex:none; margin-top:3px; color:var(--imad-gold);}
  .foot-contact address,
  .foot-contact a{font-size:14.5px; line-height:1.6; font-style:normal; color:var(--on-navy-dim); overflow-wrap:anywhere;}
  .foot-contact a{transition:color var(--t-micro) linear;}
  .foot-contact a:hover{color:var(--imad-light-gold);}

  /* .btn-line already carries the button language for both placements; all
     that differs is spacing, so only spacing is set per placement. */
  .imad-profile-download .imad-icon{width:18px; height:18px; flex:none;}
  /* .foot-brand is a stretch flex column — without this the button spans it. */
  .foot-profile{align-self:flex-start; margin-block-start:4px;}
  .imad-about-profile{margin-block-start:32px;}

  .foot-col{min-width:0;}
  .foot-col h3{
    margin-bottom:16px; color:var(--imad-light-gold);
    font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:600;
    letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  }
  .foot-col > a{
    position:relative; display:block; padding-block:7px;
    font-size:14.5px; line-height:1.5; color:var(--on-navy-dim);
    transition:color var(--t-micro) linear, padding-inline-start var(--t-micro) var(--ease-out-3);
  }
  /* The rule slides out from under the label rather than the label jumping. */
  .foot-col > a::before{
    content:''; position:absolute; inset-block-start:50%; inset-inline-start:0;
    inline-size:0; block-size:1px; background:var(--imad-gold);
    transition:inline-size var(--t-micro) var(--ease-out-3);
  }
  .foot-col > a:hover{color:var(--imad-white); padding-inline-start:16px;}
  .foot-col > a:hover::before{inline-size:10px;}

  .foot-base{
    display:flex; flex-wrap:wrap; gap:10px 32px; align-items:baseline;
    padding-block:18px; border-block-start:1px solid var(--line);
    font-size:13px; color:var(--text-faint);
  }
  .foot-base a{transition:color var(--t-micro) linear;}
  .foot-base a:hover{color:var(--imad-light-gold);}
  .foot-base-legal{margin-inline-end:auto;}



  @media (max-width:980px){
    .foot-main{grid-template-columns:repeat(2,minmax(0,1fr));}
    .foot-brand{grid-column:1 / -1;}
  }
  @media (max-width:560px){
    .imad-footer-cta{grid-template-columns:1fr;}
    .imad-footer-cta-button{width:100%;}
    .foot-main{grid-template-columns:1fr;}
    .foot-base-legal{margin-inline-end:0;}
  }
  .imad-footer-grid{display:grid; grid-template-columns:1.25fr .7fr 1.25fr 1fr;}
  .imad-footer-column{min-width:0; padding:56px 28px; border-right:1px solid rgba(255,255,255,.16);}
  .imad-footer-column:first-child{padding-left:0;}
  .imad-footer-column:last-child{padding-right:0; border-right:0;}
  .imad-footer-column h3{margin-bottom:24px; color:var(--imad-light-gold); font-family:var(--font-display); font-size:30px; font-weight:600; line-height:1.20; letter-spacing:0;}
  .imad-footer-company p{max-width:38ch; margin-top:26px; color:var(--imad-off-white); font-size:13px; line-height:1.75;}
  .imad-footer-brand{display:inline-flex; min-height:44px; align-items:center;}
  .imad-footer-brand img{display:block; width:auto; max-width:220px; height:48px; object-fit:contain; background:var(--imad-white); padding:5px 8px;}
  .imad-footer-brand .imad-wordmark{color:var(--imad-white);}
  .imad-footer-brand-sub{display:block; margin-top:8px; color:var(--imad-off-white); font-size:8px; letter-spacing:.22em; text-transform:uppercase;}
  .imad-footer-links,
  .imad-footer-services{display:flex; flex-direction:column; align-items:flex-start;}
  .imad-footer-links a,
  .imad-footer-services a,
  .imad-footer-contact a{display:inline-flex; align-items:center; min-height:44px; color:var(--imad-off-white); font-size:12px; line-height:1.45;}
  .imad-footer-links a:hover,
  .imad-footer-services a:hover,
  .imad-footer-contact a:hover{color:var(--imad-light-gold);}
  .imad-footer-contact address{margin-bottom:18px; color:var(--imad-off-white); font-size:13px; font-style:normal; line-height:1.75;}
  .imad-footer-contact a{overflow-wrap:anywhere;}
  .imad-footer-bottom{display:flex; justify-content:space-between; gap:32px; padding-block:24px 32px; border-top:1px solid rgba(255,255,255,.18); color:var(--imad-off-white); font-size:10px; line-height:1.6;}
  .imad-footer-legal{display:flex; flex-wrap:wrap; gap:12px 28px;}
  .imad-footer-legal a{display:inline-flex; align-items:center; min-height:44px;}
  .imad-footer-legal a:hover{color:var(--imad-light-gold);}

  @media (max-width:980px){
    .imad-inner-hero{min-height:clamp(300px,42svh,380px);}
    .imad-footer-grid{grid-template-columns:1fr 1fr;}
    .imad-footer-column{padding:42px 28px; border-bottom:1px solid rgba(255,255,255,.16);}
    .imad-footer-column:nth-child(2){border-right:0;}
    .imad-footer-column:nth-child(3){padding-left:0; border-bottom:0;}
    .imad-footer-column:nth-child(4){border-bottom:0;}
  }
  @media (max-width:640px){
    .imad-cta-grid,
    .imad-footer-cta{grid-template-columns:1fr; align-items:start; gap:32px; padding-block:56px;}
    .imad-cta-button,
    .imad-footer-cta-button{width:100%; min-width:0;}
    .imad-footer-grid{grid-template-columns:1fr;}
    .imad-footer-column,
    .imad-footer-column:first-child,
    .imad-footer-column:nth-child(3),
    .imad-footer-column:last-child{padding:36px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.16);}
    .imad-footer-column:last-child{border-bottom:0;}
    .imad-footer-bottom{flex-direction:column; padding-top:28px;}
  }

  /* ---- AUTHORITATIVE TYPE SCALE ---- */
  h1,h2,h3,h4,h5,h6{font-family:var(--font-display);}
  .imad-site-main h1{font-size:56px; line-height:1.05; font-weight:700;}
  .imad-site-main h2{font-size:42px; line-height:1.10; font-weight:700;}
  .imad-site-footer h2{font-size:42px; line-height:1.10; font-weight:700;}
  .imad-site-main h3{font-size:30px; line-height:1.20; font-weight:600;}
  .imad-site-footer h3{font-size:30px; line-height:1.20; font-weight:600;}
  .lead-dialog h3{font-size:30px; line-height:1.20; font-weight:600;}
  .imad-site-main h4{font-size:24px; line-height:1.25; font-weight:600;}
  .imad-site-main h5, .imad-site-footer h5, .lead-dialog h5{font-family:var(--font-display); font-size:20px; line-height:1.30; font-weight:600;}
  .imad-site-main h6, .imad-site-footer h6, .lead-dialog h6{font-family:var(--font-display); font-size:18px; line-height:1.40; font-weight:600;}
  .imad-footer-column h3{font-family:var(--font-display); font-size:30px; line-height:1.20; font-weight:600;}
  .imad-primary-nav a,
  .imad-mobile-nav a,
  .imad-footer-links a,
  .imad-footer-services a{font-family:var(--font-display); font-size:15px; font-weight:500;}
  .btn-primary,
  .btn-ghost,
  .imad-header-cta,
  .imad-drawer-cta,
  .imad-footer-cta-button,
  .imad-cta-button{font-family:var(--font-display); font-size:15px; font-weight:600;}

  @media (max-width:767px){
    .imad-site-main h1{font-size:36px;}
    .imad-site-main h2{font-size:32px;}
    .imad-site-footer h2{font-size:32px;}
    .imad-site-main h3{font-size:26px;}
    .imad-site-footer h3{font-size:26px;}
    .lead-dialog h3{font-size:26px;}
    .imad-footer-column h3{font-size:26px;}
  }

  /* ---- TASK 4: ENGINEERED-EDITORIAL PRIMARY PAGES ----
     No document-level clip: sections that deliberately bleed past the shell
     contain their own overflow, so a real layout bug still shows up as a
     horizontal scrollbar instead of being hidden site-wide. */
  .imad-section-kicker{
    color:var(--imad-navy); font-size:11px; font-weight:700; letter-spacing:.18em;
    line-height:1.5; text-transform:uppercase;
  }
  .on-navy .imad-section-kicker{color:var(--imad-light-gold);}
  .imad-home-section-rule{
    display:flex; justify-content:space-between; gap:24px; padding:14px 0;
    border-block:1px solid rgba(14,85,127,.22); color:var(--imad-navy);
    font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  }
  .on-navy .imad-home-section-rule{border-color:rgba(255,255,255,.18); color:var(--imad-light-gold);}
  .imad-home-section-heading,
  .imad-workflow-heading{
    display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
    align-items:end; gap:clamp(40px,8vw,120px); padding:72px 0 54px;
  }
  .imad-home-section-heading h2,
  .imad-workflow-heading h2{max-width:17ch; margin-top:12px; letter-spacing:-.02em;}
  .imad-home-section-heading > p,
  .imad-workflow-heading > p{max-width:54ch; color:var(--imad-charcoal); font-size:16px; line-height:1.7;}
  .imad-workflow-heading > p{color:var(--imad-off-white);}
  .imad-rich-copy{color:var(--imad-charcoal); font-size:16px; line-height:1.75;}
  .on-navy .imad-rich-copy{color:var(--imad-off-white);}
  .imad-rich-copy > * + *{margin-top:18px;}
  /* Reads the same as .arrow-link in home.css: small caps, gold glyph, and the
     gap opening rather than the whole label sliding. */
  .imad-arrow-link{
    display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:22px;
    color:var(--imad-navy); font-size:12px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    transition:gap var(--t-micro) var(--ease-out-3), color var(--t-micro) linear;
  }
  .imad-arrow-link span{color:var(--imad-gold);}
  .imad-arrow-link:hover{gap:16px; color:var(--imad-technical-blue);}
  .on-navy .imad-arrow-link{color:var(--imad-white);}
  .on-navy .imad-arrow-link span{color:var(--imad-light-gold);}
  [dir="rtl"] .imad-arrow-link span{transform:scaleX(-1);}
  .imad-editorial-placeholder{font-style:italic; color:inherit; opacity:.82;}

  /* Dark, image-led homepage hero. */
  .imad-home-hero{
    position:relative; min-height:calc(100svh - var(--imad-shell-offset));
    overflow:hidden; background:var(--imad-charcoal); color:var(--imad-white);
  }
  .imad-home-hero-media,
  .imad-home-hero-shade{position:absolute; inset:0;}
  .imad-home-hero-media img{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
  .imad-home-hero-shade{
    background:linear-gradient(90deg,rgba(14,85,127,.98) 0%,rgba(14,85,127,.86) 42%,rgba(23,35,43,.36) 72%,rgba(23,35,43,.1) 100%),
      linear-gradient(0deg,rgba(23,35,43,.62),transparent 50%);
  }
  .imad-home-hero-grid{
    position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 230px;
    align-items:stretch; min-height:inherit;
  }
  .imad-home-hero-copy{display:flex; flex-direction:column; justify-content:center; max-width:900px; padding:72px 6vw 82px 0;}
  .imad-home-hero-meta{
    display:flex; justify-content:space-between; gap:24px; max-width:760px; margin-bottom:48px;
    padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.24); color:var(--imad-off-white);
    font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  }
  .imad-home-hero-meta .imad-tech-index{color:var(--imad-light-gold);}
  .imad-home-eyebrow{margin-bottom:14px; color:var(--imad-light-gold); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;}
  .imad-home-hero h1{max-width:14ch; color:var(--imad-white); letter-spacing:-.035em; text-transform:uppercase;}
  .imad-home-hero h1 em{font-style:normal; color:var(--imad-light-gold);}
  .imad-home-hero-intro{max-width:690px; margin-top:26px; color:var(--imad-off-white); font-size:18px; line-height:1.65;}
  .imad-home-hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:36px;}
  .imad-home-primary{
    display:inline-flex; align-items:center; justify-content:space-between; gap:34px; min-width:220px;
    min-height:52px; padding:14px 18px; background:var(--imad-gold); color:var(--imad-charcoal);
    font-size:15px; font-weight:700; transition:background 180ms ease-out;
  }
  .imad-home-primary:hover{background:var(--imad-light-gold);}
  .imad-home-secondary{
    display:inline-flex; align-items:center; min-height:52px; padding:13px 18px;
    border:1px solid rgba(255,255,255,.48); color:var(--imad-white); font-size:15px; font-weight:600;
    transition:background 180ms ease-out,border-color 180ms ease-out;
  }
  .imad-home-secondary:hover{background:rgba(255,255,255,.1); border-color:var(--imad-white);}
  .imad-home-hero-rail{
    align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end; gap:0;
    border-inline:1px solid rgba(255,255,255,.2); background:rgba(14,85,127,.18);
  }
  .imad-home-hero-rail span{
    padding:18px 16px; border-top:1px solid rgba(255,255,255,.2); color:var(--imad-off-white);
    font-size:9px; font-weight:700; letter-spacing:.14em; line-height:1.5; text-transform:uppercase;
  }

  /* Large capability statement and restrained milestones. */
  .imad-home-statement{padding-bottom:96px; background:var(--imad-white);}
  .imad-home-statement-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr); gap:clamp(44px,8vw,112px); align-items:center; padding:88px 0 64px;}
  .imad-home-statement-copy h2{max-width:17ch; margin-top:14px; letter-spacing:-.025em;}
  .imad-home-statement-copy .imad-rich-copy{max-width:64ch; margin-top:30px;}
  .imad-home-statement-media{position:relative; min-height:560px; overflow:hidden; background:var(--imad-off-white);}
  .imad-home-statement-media img{display:block; width:100%; height:100%; min-height:560px; object-fit:cover;}
  .imad-home-statement-media > span{position:absolute; right:16px; bottom:16px; padding:7px 9px; background:var(--imad-navy); color:var(--imad-white); font-size:9px; font-weight:700; letter-spacing:.15em;}
  .imad-home-milestones{display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid rgba(14,85,127,.24);}
  .imad-home-milestones > div{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px; min-height:112px; padding:24px; border-right:1px solid rgba(14,85,127,.2);}
  .imad-home-milestones > div:last-child{border-right:0;}
  .imad-home-milestones strong{color:var(--imad-gold); font-family:var(--font-display); font-size:30px; line-height:1;}
  .imad-home-milestones span{font-size:12px; line-height:1.55;}

  /* Five-stage workflow as a structural navy band. */
  .imad-home-workflow{padding-block:var(--space-tight) 0; background:var(--imad-navy);}
  .imad-workflow-ledger{display:grid; grid-template-columns:repeat(5,1fr); list-style:none; border:1px solid rgba(255,255,255,.2);}
  .imad-workflow-ledger li{position:relative; min-height:330px; padding:30px 24px 28px; border-right:1px solid rgba(255,255,255,.2);}
  .imad-workflow-ledger li:last-child{border-right:0;}
  .imad-workflow-ledger li::after{content:''; position:absolute; inset:auto 24px 24px; height:2px; background:var(--imad-gold); transform:scaleX(.22); transform-origin:left; transition:transform 260ms var(--ease);}
  .imad-workflow-ledger li:hover::after{transform:scaleX(1);}
  .imad-workflow-number{display:block; margin-bottom:68px; color:var(--imad-light-gold); font-size:11px; font-weight:800; letter-spacing:.16em;}
  .imad-workflow-ledger h3{color:var(--imad-white); font-size:24px;}
  .imad-workflow-ledger p{margin-top:16px; color:var(--imad-off-white); font-size:13px; line-height:1.65;}

  /* Projects, verified client register, and quality marker. */
  .imad-home-projects{padding-bottom:104px; background:var(--imad-white);}
  .imad-featured-projects{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(14,85,127,.24); border:1px solid rgba(14,85,127,.24);}
  .imad-featured-project{display:grid; grid-template-columns:1.12fr .88fr; min-height:400px; background:var(--imad-white);}
  .imad-featured-project:first-child{grid-column:1/-1; min-height:570px;}
  .imad-featured-project:nth-child(n+2){grid-template-columns:1fr;}
  .imad-featured-project figure,
  .imad-project-image-pending{min-height:280px; overflow:hidden; background:var(--imad-charcoal);}
  .imad-featured-project figure img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease);}
  .imad-featured-project:hover figure img{transform:scale(1.035);}
  .imad-project-image-pending{display:grid; place-items:center; color:var(--imad-off-white); font-size:9px; font-weight:700; letter-spacing:.16em;}
  .imad-featured-project-copy{display:flex; flex-direction:column; justify-content:flex-end; padding:34px; border-left:1px solid rgba(14,85,127,.18);}
  .imad-featured-project-copy .imad-tech-index{color:var(--imad-gold);}
  .imad-project-sector{margin-top:auto; color:var(--imad-navy); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;}
  .imad-featured-project-copy h3{margin-top:14px; color:var(--imad-navy);}
  .imad-featured-project-copy > p:not(.imad-project-sector){margin-top:14px; color:var(--imad-charcoal); font-size:13px; line-height:1.65;}
  .imad-project-location{margin-top:24px; padding-top:14px; border-top:1px solid rgba(14,85,127,.18); font-size:11px;}
  .imad-home-trust{background:var(--imad-off-white); border-block:1px solid rgba(14,85,127,.22);}
  .imad-home-trust-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);}
  .imad-home-trust-copy{padding:88px clamp(40px,7vw,100px) 88px 0; border-right:1px solid rgba(14,85,127,.22);}
  .imad-home-trust-copy > .imad-tech-index{display:block; margin-bottom:54px; color:var(--imad-gold);}
  .imad-home-trust-copy h2{max-width:18ch; margin-top:14px; color:var(--imad-navy);}
  .imad-home-trust-copy > p:not(.imad-section-kicker){max-width:58ch; margin-top:24px; color:var(--imad-charcoal); line-height:1.7;}
  .imad-home-client-register{display:grid; grid-template-columns:repeat(2,1fr); align-content:center; padding:48px;}
  .imad-client-placeholder{grid-column:1/-1; align-self:center; padding:44px; border:1px solid rgba(14,85,127,.24); background:var(--imad-white);}
  .imad-client-placeholder span{color:var(--imad-gold); font-size:9px; font-weight:800; letter-spacing:.16em;}
  .imad-client-placeholder p{max-width:44ch; margin-top:20px; color:var(--imad-charcoal); line-height:1.65;}
  .imad-home-quality{padding-block:80px; background:var(--imad-white);}
  .imad-home-quality-grid{display:grid; grid-template-columns:140px minmax(0,1fr) auto; align-items:center; gap:44px;}
  .imad-quality-marker{display:grid; place-items:center; width:118px; aspect-ratio:1; border:1px solid var(--imad-gold); color:var(--imad-gold); font-family:var(--font-display); font-size:56px; font-weight:700;}
  .imad-home-quality .imad-tech-index{color:var(--imad-gold);}
  .imad-home-quality h2{margin-top:12px; color:var(--imad-navy);}
  .imad-home-quality p{margin-top:16px; color:var(--imad-charcoal); line-height:1.65;}
  .imad-home-quality-link{display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-width:220px; min-height:52px; padding:14px 18px; border:1px solid var(--imad-navy); color:var(--imad-navy); font-size:14px; font-weight:700;}
  .imad-home-quality-link:hover{background:var(--imad-navy); color:var(--imad-white);}

  /* Shared inner-page editorial grammar. */
  .imad-page-section{padding-block:96px; border-bottom:1px solid rgba(14,85,127,.22);}
  .imad-page-section-head{margin-bottom:64px;}
  .imad-page-section-head > .imad-tech-index{padding-top:9px; color:var(--imad-gold);}
  .imad-page-section-head h2{max-width:20ch; color:var(--imad-navy); letter-spacing:-.02em;}
  .imad-page-section-head p{max-width:62ch; margin-top:20px; color:var(--imad-charcoal); line-height:1.7;}
  /* About page — the brief's editorial sequence: industrial arrival, proof,
     human leadership, history, direction, values, then the 2030 ambition. */
  .imad-about-hero{position:relative; display:grid; min-height:clamp(500px,55vw,660px); overflow:hidden; color:var(--imad-white); background:var(--imad-charcoal); isolation:isolate;}
  .imad-about-hero-media,.imad-about-hero-shade{position:absolute; inset:0; z-index:-2;}
  .imad-about-hero-media img{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
  .imad-about-hero-shade{z-index:-1; background:linear-gradient(90deg,rgba(4,24,38,.96) 0%,rgba(4,24,38,.81) 38%,rgba(4,24,38,.2) 76%,rgba(4,24,38,.38) 100%);}
  .imad-about-hero-grid{display:grid; grid-template-columns:minmax(0,700px) 1fr; align-items:end; padding-block:clamp(80px,12vw,158px) clamp(54px,7vw,92px);}
  .imad-about-hero-copy{max-width:680px;}
  .imad-about-hero .imad-eyebrow,.imad-page-copy .imad-eyebrow,.imad-history-head .imad-eyebrow,.imad-direction-heading .imad-eyebrow,.imad-values .imad-eyebrow,.imad-goal .imad-eyebrow{color:var(--imad-gold);}
  .imad-about-hero h1{max-width:13ch; margin-top:20px; color:var(--imad-white); font-size:clamp(40px,4.9vw,70px); line-height:1.04; letter-spacing:-.035em;}
  .imad-about-hero-copy > p{max-width:55ch; margin-top:24px; color:rgba(255,255,255,.82); font-size:17px; line-height:1.7;}
  .imad-about-hero-stamp{justify-self:end; align-self:start; padding:10px 0; border-block:1px solid rgba(255,255,255,.42); color:var(--imad-light-gold); font-size:10px; font-weight:700; letter-spacing:.18em;}
  .imad-about-intro{background:linear-gradient(115deg,#fff 0%,#f7f8f8 100%);}
  .imad-about-intro-grid{display:grid; grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr); gap:clamp(52px,8vw,116px); align-items:center;}
  .imad-page-copy h2{max-width:15ch; margin-top:20px; color:var(--imad-navy); font-size:clamp(30px,3vw,43px); line-height:1.12;}
  .imad-page-copy .imad-rich-copy{max-width:57ch; margin-top:26px; color:var(--imad-charcoal);}
  .imad-page-copy .imad-rich-copy p + p{margin-top:16px;}
  .imad-about-assurances{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:38px;}
  .imad-about-assurances > div{display:grid; gap:9px; min-width:0; color:var(--imad-navy); font-size:11px; font-weight:700; line-height:1.3; text-align:center;}
  .imad-about-assurances img{width:30px; height:30px; margin-inline:auto; object-fit:contain;}
  .imad-page-feature-image{position:relative; min-height:0; margin:0; overflow:hidden; border-radius:10px; background:var(--imad-charcoal); aspect-ratio:1.12/1; box-shadow:0 18px 42px rgba(23,35,43,.12);}
  .imad-page-feature-image > img{display:block; width:100%; height:100%; object-fit:cover;}
  .imad-about-feature-image::after{content:''; position:absolute; inset:42% 0 0; background:linear-gradient(transparent,rgba(3,20,31,.94)); pointer-events:none;}
  .imad-about-facts{position:absolute; right:0; bottom:0; left:0; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); padding:28px clamp(16px,3vw,36px); color:var(--imad-white);}
  .imad-about-facts > div{display:grid; gap:3px; min-width:0; padding-inline:clamp(10px,1.8vw,24px); border-right:1px solid rgba(255,255,255,.34);}
  .imad-about-facts > div:first-child{padding-left:0;}
  .imad-about-facts > div:last-child{padding-right:0; border:0;}
  .imad-about-facts strong{font-family:var(--font-display); font-size:clamp(23px,2.1vw,34px); line-height:1;}
  .imad-about-facts span{font-size:10px; line-height:1.3;}
  .imad-chairman{padding-block:0; overflow:hidden; border:0; background:var(--imad-white);}
  .imad-chairman::before{display:none;}
  .imad-chairman-grid{position:relative; display:grid; grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr); gap:0; min-height:424px; margin-block:24px; overflow:hidden; border-radius:12px; background:linear-gradient(112deg,#073d61 0%,#082d49 58%,#041827 100%); isolation:isolate;}
  .imad-chairman-grid::before{content:''; position:absolute; inset:0 auto 0 0; z-index:-1; width:48%; background:repeating-radial-gradient(circle at 0 100%,transparent 0 42px,rgba(80,159,200,.16) 43px 44px,transparent 45px 62px); opacity:.8;}
  .imad-chairman-grid::after{content:''; position:absolute; inset:-30% 12% -30% auto; z-index:-1; width:30%; transform:skewX(-17deg); background:linear-gradient(180deg,rgba(80,159,200,.09),transparent 75%);}
  .imad-chairman-portrait{position:relative; z-index:1; align-self:end; width:min(100%,340px); height:400px; margin:0 0 0 clamp(20px,3vw,48px); overflow:hidden; border-radius:170px 170px 0 0; background:linear-gradient(155deg,#07528a,#062f50);}
  .imad-chairman-portrait::after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(4,24,39,.15),transparent 44%);}
  .imad-chairman-portrait img{display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom;}
  .imad-chairman-message{align-self:center; max-width:860px; padding:clamp(44px,5vw,72px) clamp(42px,6vw,94px);}
  .imad-chairman-message .imad-eyebrow{color:var(--imad-light-gold);}
  .imad-chairman-message > p,.imad-chairman-message .imad-rich-copy{max-width:22ch; margin-top:18px; color:var(--imad-white); font-size:clamp(28px,3.1vw,45px); font-style:italic; line-height:1.13; letter-spacing:-.025em;}
  .imad-chairman-message > p::before,.imad-chairman-message .imad-rich-copy::before{content:'“'; margin-right:10px; color:var(--imad-light-gold); font-family:Georgia,serif; font-size:1.55em; line-height:0; vertical-align:-.16em;}
  .imad-chairman-message > strong{display:block; margin-top:29px; color:var(--imad-white); font-family:var(--font-display); font-size:18px;}
  .imad-chairman-role{display:block; margin-top:3px; color:var(--imad-light-gold); font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;}
  .imad-chairman-principles{display:flex; flex-wrap:wrap; gap:0; margin-top:29px; list-style:none; border-top:1px solid rgba(255,255,255,.2);}
  .imad-chairman-principles li{display:flex; align-items:center; gap:9px; min-height:50px; padding:14px 20px 0 0; margin:0 20px 0 0; border-right:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.82); font-size:11px; font-weight:700; letter-spacing:.03em;}
  .imad-chairman-principles li:last-child{padding-right:0; margin-right:0; border-right:0;}
  .imad-chairman-principles .imad-icon{width:19px; height:19px; color:var(--imad-light-gold); stroke-width:1.7;}
  .imad-history{background:var(--imad-white);}
  .imad-history-layout{display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr); gap:clamp(48px,9vw,138px); align-items:start;}
  .imad-history-head{position:sticky; top:120px;}
  .imad-history-head h2{max-width:13ch; margin-top:20px; color:var(--imad-navy); font-size:clamp(30px,3vw,42px); line-height:1.12;}
  .imad-history-head p{max-width:34ch; margin-top:22px; color:var(--text-dim);}
  .imad-history-journey{position:relative; display:grid; gap:28px; list-style:none;}
  .imad-history-journey::before{content:''; position:absolute; top:40px; bottom:40px; left:30px; border-left:1px dashed rgba(14,85,127,.36);}
  .imad-history-journey li{position:relative; display:grid; grid-template-columns:62px minmax(0,1fr); gap:28px; align-items:start; padding-bottom:8px;}
  .imad-history-node{z-index:1; display:grid; width:62px; height:62px; place-items:center; border-radius:50%; background:#f3f6f7; box-shadow:0 0 0 8px var(--imad-white);}
  .imad-history-node img{width:32px; height:32px; object-fit:contain;}
  .imad-history-year{display:block; color:var(--imad-gold); font-family:var(--font-display); font-size:23px; font-weight:700; line-height:1;}
  .imad-history-journey h3{margin-top:7px; color:var(--imad-navy); font-size:16px;}
  .imad-history-journey p{max-width:58ch; margin-top:7px; color:var(--text-dim); font-size:14px; line-height:1.55;}
  .imad-direction{background:#f6f8f9;}
  .imad-direction-layout{display:grid; grid-template-columns:minmax(250px,.68fr) minmax(0,1.32fr); gap:clamp(42px,7vw,110px); align-items:center;}
  .imad-direction-heading h2{max-width:14ch; margin-top:20px; color:var(--imad-navy); font-size:clamp(30px,3vw,42px); line-height:1.12;}
  .imad-direction-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:0; border:0;}
  .imad-direction-grid article{min-height:260px; padding:clamp(28px,3vw,42px); border:1px solid rgba(14,85,127,.08); border-radius:8px; background:var(--imad-white); box-shadow:0 12px 25px rgba(23,35,43,.06);}
  .imad-direction-grid article + article{border-left:1px solid rgba(14,85,127,.08);}
  .imad-direction-icon{display:block; width:66px; height:66px; padding:16px; border-radius:50%; background:var(--imad-navy); object-fit:contain;}
  .imad-direction-grid h3{margin-top:34px; color:var(--imad-navy); font-size:21px;}
  .imad-direction-grid p{margin-top:12px; color:var(--text-dim); font-size:14px; line-height:1.6;}
  .imad-values{overflow:hidden; border:0; background:var(--imad-charcoal);}
  .imad-values-media{position:absolute; inset:0; opacity:.25; background:linear-gradient(90deg,rgba(4,27,43,.94) 0%,rgba(4,27,43,.72) 45%,rgba(4,27,43,.36) 100%),url('../images/imad-hvac.webp') center/cover;}
  .imad-values-stage{position:relative; display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr); gap:clamp(44px,8vw,118px); align-items:center;}
  .imad-values header h2{max-width:14ch; margin-top:20px; color:var(--imad-white); font-size:clamp(30px,3vw,42px); line-height:1.12;}
  .imad-values header p{max-width:36ch; margin-top:20px; color:rgba(255,255,255,.72);}
  .imad-values ol{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; border:0;}
  .imad-values li{display:grid; grid-template-columns:1fr; align-content:start; justify-items:center; text-align:center; gap:13px; min-height:196px; padding:18px; border-right:1px solid rgba(255,255,255,.26);}
  .imad-values li:last-child{border-right:0;}
  .imad-values li img{width:64px; height:64px; padding:16px; border:1px solid rgba(237,194,105,.42); border-radius:50%; object-fit:contain; filter:brightness(0) invert(1) sepia(.25) saturate(1.6);}
  .imad-values li h3{color:var(--imad-white); font-size:16px; line-height:1.2;}
  .imad-values li p{color:rgba(255,255,255,.64); font-size:13px; line-height:1.55;}
  .imad-goal{border:0; background:linear-gradient(110deg,#fff,#f5f7f8);}
  .imad-goal-grid{display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:clamp(48px,10vw,144px); align-items:center;}
  .imad-goal-year{color:transparent; -webkit-text-stroke:1px var(--imad-gold); font-family:var(--font-display); font-size:clamp(96px,15vw,210px); font-weight:700; line-height:.8; letter-spacing:-.08em;}
  .imad-goal h2{max-width:19ch; margin-top:16px; color:var(--imad-navy);}
  .imad-goal p:not(.imad-section-kicker){max-width:62ch; margin-top:20px; color:var(--imad-charcoal); line-height:1.7;}

  /* Services switchboard. One live bay, a breaker list of divisions. */
  .imad-service-index{padding-top:clamp(44px,5vw,72px); border-bottom:0;}
  .imad-service-index-head{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:end; gap:clamp(24px,4vw,56px); margin-bottom:clamp(36px,4vw,56px);
  }
  .imad-service-index-tally{
    display:flex; flex-direction:column; gap:4px; min-width:7ch;
    color:var(--imad-navy); line-height:1;
  }
  .imad-service-index-tally strong{
    font-family:var(--font-display); font-size:clamp(42px,5vw,64px); font-weight:700;
    letter-spacing:-0.04em; color:var(--imad-navy);
  }
  .imad-service-index-tally span{
    max-width:12ch; color:var(--text-dim);
    font-size:var(--fs-eyebrow); font-weight:600;
    letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  }
  .imad-service-board{
    display:grid; grid-template-columns:minmax(280px,.92fr) minmax(0,1.08fr);
    gap:clamp(28px,4vw,56px); align-items:start;
  }
  .imad-service-board-stage{
    position:sticky; top:calc(var(--imad-shell-offset) + 16px);
    isolation:isolate; overflow:hidden;
    min-height:clamp(360px,62vh,640px);
    border-radius:var(--card-radius); background:var(--imad-charcoal);
  }
  .imad-service-board-meter{
    position:absolute; z-index:2; inset-block:18px; inset-inline-start:14px;
    width:3px; border-radius:2px;
    background:color-mix(in srgb,var(--imad-white) 14%,transparent);
  }
  .imad-service-board-meter i{
    display:block; width:100%; border-radius:inherit;
    height:calc(100% / var(--service-count, 1));
    background:var(--imad-gold);
    transform:translateY(calc((var(--live, 1) - 1) * 100%));
    transition:transform 420ms var(--ease-out);
  }
  [dir="rtl"] .imad-service-board-meter i{transform-origin:top;}
  .imad-service-board-frames{position:absolute; inset:0;}
  .imad-service-board-frame{
    position:absolute; inset:0; margin:0; opacity:0;
    transition:opacity 480ms var(--ease-out);
  }
  .imad-service-board-frame.is-live{opacity:1; z-index:1;}
  .imad-service-board-frame img{
    display:block; width:100%; height:100%; object-fit:cover;
    filter:saturate(.82) contrast(1.04);
    transform:scale(1.04);
    transition:transform 900ms var(--ease-out-3);
  }
  .imad-service-board-frame.is-live img{transform:scale(1);}
  .imad-service-board-frames::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      linear-gradient(to top, rgba(23,35,43,.78) 0%, rgba(23,35,43,.12) 42%, transparent 68%),
      repeating-linear-gradient(-28deg, transparent 0 26px, rgba(215,148,46,.06) 26px 27px);
  }
  .imad-service-board-caption{
    position:absolute; z-index:3; inset-inline:28px 28px; bottom:24px;
    display:flex; align-items:flex-end; gap:16px; color:var(--imad-white);
  }
  .imad-service-board-caption-n{
    font-family:var(--font-display); font-size:13px; font-weight:600;
    letter-spacing:.16em; color:var(--imad-gold); text-transform:uppercase;
  }
  .imad-service-board-caption p{
    max-width:22ch; font-family:var(--font-display); font-size:clamp(18px,1.6vw,24px);
    font-weight:600; line-height:1.15; text-wrap:balance;
  }
  .imad-service-index-list{display:flex; flex-direction:column; min-width:0;}
  .imad-service-index-row + .imad-service-index-row{
    border-top:1px solid var(--line);
  }
  .imad-service-index-hit{
    display:grid; grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center; gap:16px 18px;
    padding-block:18px; padding-inline:14px 8px;
    border-inline-start:3px solid transparent;
    transition:background var(--t-micro) var(--ease-out), border-color var(--t-micro) linear;
  }
  .imad-service-index-row.is-live .imad-service-index-hit,
  .imad-service-index-hit:hover,
  .imad-service-index-hit:focus-visible{
    background:color-mix(in srgb,var(--imad-navy) 5%,transparent);
    border-inline-start-color:var(--imad-gold);
  }
  .imad-service-index-icon{
    display:grid; place-items:center; width:44px; height:44px;
    border:1px solid color-mix(in srgb,var(--imad-navy) 22%,transparent);
    border-radius:50%; color:var(--imad-navy); background:var(--imad-white);
    transition:background var(--t-micro) linear, color var(--t-micro) linear, border-color var(--t-micro) linear;
  }
  .imad-service-index-icon .imad-icon{width:20px; height:20px;}
  .imad-service-index-icon-fallback{
    font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.08em;
  }
  .imad-service-index-row.is-live .imad-service-index-icon,
  .imad-service-index-hit:hover .imad-service-index-icon{
    background:var(--imad-navy); border-color:var(--imad-navy); color:var(--imad-light-gold);
  }
  .imad-service-index-copy{display:flex; flex-direction:column; min-width:0;}
  .imad-service-index-number{
    color:var(--imad-gold); font-size:var(--fs-eyebrow); font-weight:600;
    letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  }
  .imad-service-index-copy h3{
    max-width:28ch; margin-top:4px; color:var(--imad-navy);
    font-size:clamp(16px,1.15vw,19px); line-height:1.2; text-wrap:balance;
  }
  .imad-service-index-copy > p{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; max-width:52ch; margin-top:6px;
    color:var(--text-dim); font-size:14px; line-height:1.55;
  }
  .imad-service-index-hit .imad-arrow-link{margin-top:0; min-height:0; padding-block:8px;}
  @media (prefers-reduced-motion: reduce){
    .imad-service-board-meter i,
    .imad-service-board-frame,
    .imad-service-board-frame img{transition:opacity 180ms linear, transform 180ms linear;}
  }

  /* ======================================================================
   SHARED FURNITURE
   ====================================================================== */

  .sheet{position:relative; padding-block:var(--space-band);}
  .sheet--open{padding-block:var(--space-open);}
  .sheet--tight{padding-block:var(--space-tight);}

  /* A small label used inline — counts, corner metadata, list keys. Same face
   and tracking as the eyebrow so the page has one voice for small caps. */
  .mark{
  font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--text-dim);
  }
  .mark--accent{color:var(--accent-text);}
  .mark--lg{font-size:13px;}

  .sheet-lede{
  font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--text-dim);
  max-width:62ch;
  }

  .arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding-block-end:8px; border-block-end:2px solid var(--accent-rule);
  transition:gap var(--t-micro) var(--ease-out-3), color var(--t-micro) linear;
  }
  .arrow-link:hover{gap:16px;}
  .arrow-link .g{font-size:14px; color:var(--accent-text);}
  [dir="rtl"] .arrow-link .g{transform:scaleX(-1);}

  /* One button pair, matching the hero's. */
  .btn-sheet,
  .btn-line{
  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) linear, border-color var(--t-micro) linear, color var(--t-micro) linear;
  }
  .btn-sheet{background:var(--imad-gold); color:var(--imad-charcoal);}
  .btn-sheet:hover{background:var(--imad-light-gold);}
  .btn-line{border:1px solid var(--line-strong); color:var(--text);}
  .btn-line:hover{border-color:var(--text);}
  .on-navy .btn-line,
  .on-charcoal .btn-line{border-color:rgba(255,255,255,.45); color:var(--imad-white);}
  .on-navy .btn-line:hover,
  .on-charcoal .btn-line:hover{background:var(--imad-white); border-color:var(--imad-white); color:var(--imad-charcoal);}
  [dir="rtl"] .btn-sheet .g,[dir="rtl"] .btn-line .g{transform:scaleX(-1);}

  /* Every section leads the same way: eyebrow, heading, lede. */
  .datum-head,
  .register-head,
  .evidence-main,
  .quality > .imad-shell,
  .sectors > .imad-shell{max-inline-size:100%;}

  /* ==== CARD SYSTEM ========================================================
     Every collection on the site draws from these rules — projects, team,
     clients, certifications, posts. Before this each grid was a hairline table:
     1px gaps over a tinted background so the cells read as ruled paper, which
     is the drawing-set idea again in a different costume. Cards are separate
     objects with air between them, and the only thing that moves on hover is
     the card itself. */

  /* All five collections share one responsive grid; only the minimum column
     width changes, because a portrait needs less room than a project. */
  .imad-project-index-list,
  .imad-team-grid,
  .imad-client-logo-grid,
  .imad-certificate-list,
  .entry-list{
    display:grid; gap:clamp(18px,2vw,28px);
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    background:none; border:0; padding:0;
  }
  .imad-team-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
  .imad-client-logo-grid{
    gap:clamp(20px,2.4vw,32px);
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  }

  /* The surface. Applied by class on the homepage and by selector list here,
     so a collection template never has to learn a new class name. */
  .imad-card,
  .imad-project-index-item,
  .imad-team-member,
  .imad-client-logo,
  .imad-certificate-record,
  .entry-card{
    position:relative; min-width:0; display:flex; flex-direction:column;
    margin:0; padding:0;
    background:var(--imad-white); border:1px solid var(--line);
    border-radius:var(--card-radius); box-shadow:var(--card-shadow);
    overflow:hidden;
    transition:transform var(--t-move) var(--ease-out-3), box-shadow var(--t-move) var(--ease-out-3), border-color var(--t-move) linear;
  }
  .imad-card:hover,
  .imad-project-index-item:hover,
  .imad-team-member:hover,
  .imad-client-logo:hover,
  .imad-certificate-record:hover,
  .imad-certificate-record:focus-within,
  .entry-card:hover{transform:translateY(-4px); box-shadow:var(--card-shadow-lift); border-color:transparent;}

  /* The image well. A fixed ratio so a grid lines up even when the uploads do
     not, and a slow zoom that reads as depth rather than as motion. */
  .imad-card-media,
  .imad-project-index-item > figure,
  .imad-project-index-item .imad-project-image-pending,
  .entry-card-media{
    position:relative; display:block; margin:0; min-height:0; overflow:hidden;
    aspect-ratio:16/10; background:var(--imad-charcoal);
  }
  .imad-card-media img,
  .imad-project-index-item > figure img,
  .entry-card-media img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 620ms var(--ease-out-3);}
  .imad-card:hover .imad-card-media img,
  .imad-project-index-item:hover > figure img,
  .entry-card:hover .entry-card-media img{transform:scale(1.05);}
  .imad-project-image-pending{display:grid; place-items:center; color:rgba(255,255,255,.42); font-size:11px; font-weight:600; letter-spacing:.14em;}

  .imad-card-body,
  .imad-project-index-copy,
  .imad-team-member-copy,
  .entry-card-body{display:flex; flex-direction:column; flex:1; padding:var(--card-pad); border:0;}
  .imad-card-body > h3,
  .imad-project-index-copy h3,
  .imad-team-member-copy h3,
  .entry-card-body h3{color:var(--imad-navy);}
  .imad-project-index-copy h3 a{transition:color var(--t-micro) linear;}
  .imad-project-index-item:hover h3 a{color:var(--imad-technical-blue);}
  .imad-card-body > p,
  .imad-project-index-copy > p,
  .entry-card-body > p{margin-top:12px; color:var(--text-dim); font-size:14.5px; line-height:1.65;}

  /* Small caps above a card title — sector, date, category. Items after the
     first are separated by a short rule rather than a bullet. */
  .imad-card-meta,
  .imad-project-meta,
  .entry-card-meta{
    display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:12px;
    color:var(--imad-navy); font-size:12px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .imad-card-meta > * + *,
  .imad-project-meta > * + *,
  .entry-card-meta > * + *{position:relative; padding-inline-start:17px;}
  .imad-card-meta > * + *::before,
  .imad-project-meta > * + *::before,
  .entry-card-meta > * + *::before{
    content:''; position:absolute; inset-inline-start:0; inset-block-start:50%;
    inline-size:5px; block-size:1px; background:var(--line-strong);
  }

  /* Key/value pairs pinned above the card's link. */
  .imad-card-facts,
  .imad-project-facts,
  .imad-certificate-dates{
    display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:20px; padding-top:16px;
    border-top:1px solid var(--line); font-size:13.5px;
  }
  .imad-card-facts small,
  .imad-project-facts small,
  .imad-certificate-dates small{
    display:block; margin-bottom:5px; color:var(--imad-navy);
    font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  }
  .imad-card .imad-arrow-link,
  .imad-project-index-item .imad-arrow-link,
  .imad-team-member .imad-arrow-link,
  .entry-card .imad-arrow-link{margin-top:auto; padding-top:18px;}

  /* ---- Projects ----
     The first project takes the full row and turns side-by-side: a lead story
     rather than simply a bigger tile. */
  .imad-project-index-item.is-featured{grid-column:1 / -1;}
  @media (min-width:900px){
    .imad-project-index-item.is-featured{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);}
    .imad-project-index-item.is-featured > figure,
    .imad-project-index-item.is-featured .imad-project-image-pending{aspect-ratio:auto; height:100%; min-height:400px;}
    .imad-project-index-item.is-featured .imad-project-index-copy{justify-content:center; padding:clamp(30px,3.4vw,48px);}
  }

  /* ---- Team ---- */
  .imad-team-portrait{
    display:grid; place-items:center; aspect-ratio:4/5; min-height:0; overflow:hidden;
    background:var(--imad-off-white); color:var(--imad-navy);
  }
  .imad-team-portrait img{display:block; width:100%; height:100%; min-height:0; object-fit:cover; transition:transform 620ms var(--ease-out-3);}
  .imad-team-member:hover .imad-team-portrait img{transform:scale(1.04);}
  /* No portrait supplied: the initial set in outline, rather than a grey box. */
  .imad-team-portrait > span{
    grid-area:1/1; color:transparent; -webkit-text-stroke:1px rgba(14,85,127,.34);
    font-family:var(--font-display); font-size:78px; font-weight:700;
  }
  .imad-team-portrait > small{
    grid-area:1/1; align-self:end; margin:0 0 22px; color:var(--text-faint);
    font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  }
  .imad-team-role{
    margin-top:6px; color:var(--imad-gold); font-size:12px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
  }
  .imad-team-member-copy > p:not(.imad-team-role){margin-top:14px; color:var(--text-dim); font-size:14px; line-height:1.65;}

  /* ---- Clients ----
     Verified marks in full colour on a quiet well — premium partner register,
     not a coupon grid. Gold rule on hover ties each card to IMAD's accent. */
  .imad-client-register{
    padding-block:clamp(40px,5vw,56px) clamp(28px,3.5vw,44px);
    background:var(--imad-off-white); border-bottom:1px solid var(--line);
  }
  .imad-inner-hero--clients + .imad-client-register{padding-block-start:clamp(48px,6vw,72px);}
  .imad-client-register-head{
    margin:0 auto; max-width:42rem; text-align:center;
  }
  .imad-client-register-head .imad-eyebrow{color:var(--imad-gold);}
  .imad-client-register-head h2{
    margin-top:14px; color:var(--imad-navy); font-size:var(--fs-h2);
    letter-spacing:-.025em; line-height:1.12;
  }
  .imad-client-register-rule{
    display:block; width:52px; height:3px; margin:26px auto 0;
    background:linear-gradient(90deg,var(--imad-gold),var(--imad-light-gold));
    border-radius:2px;
  }
  .imad-client-filter{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:6px 10px; margin-top:clamp(36px,4.5vw,52px);
  }
  .imad-client-filter button{
    border:0; margin:0; padding:11px 18px; border-radius:6px;
    background:transparent; color:var(--imad-navy);
    font-family:var(--font-body); font-size:10.5px; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; line-height:1;
    cursor:pointer; white-space:nowrap;
    transition:background var(--t-micro) linear, color var(--t-micro) linear, box-shadow var(--t-micro) linear;
  }
  .imad-client-filter button:hover,
  .imad-client-filter button:focus-visible{
    background:color-mix(in srgb,var(--imad-navy) 7%,transparent);
  }
  .imad-client-filter button.is-active{
    background:var(--imad-navy); color:var(--imad-white);
    box-shadow:0 6px 18px rgba(14,85,127,.22);
  }
  .imad-client-filter button:focus-visible{outline:2px solid var(--imad-gold); outline-offset:2px;}
  .imad-client-index{padding-block:clamp(40px,5vw,64px) 96px;}
  .imad-client-logo.is-filtered-out{display:none;}
  .imad-client-filter-empty{
    margin-top:clamp(24px,3vw,36px); padding:clamp(24px,2.8vw,36px);
    border:1px dashed var(--line-strong); border-radius:var(--card-radius);
    background:var(--imad-white); color:var(--text-dim);
    font-size:14.5px; text-align:center;
  }
  .imad-client-logo::after{
    content:''; position:absolute; inset-inline:0; inset-block-start:0; block-size:3px;
    background:var(--imad-gold); opacity:0; transition:opacity var(--t-move) linear;
  }
  .imad-client-logo:hover::after{opacity:1;}
  .imad-client-logo-well{
    display:grid; place-items:center; flex:1; min-height:0;
    aspect-ratio:5/3.2; padding:clamp(20px,2.6vw,32px) clamp(14px,1.8vw,22px);
    background:radial-gradient(ellipse 85% 75% at 50% 42%,var(--imad-white) 0%,var(--imad-off-white) 100%);
  }
  .imad-client-logo-well a{display:grid; place-items:center; width:100%; height:100%;}
  .imad-client-logo img{
    display:block; max-width:min(88%,260px); max-height:88px; width:auto; height:auto;
    object-fit:contain; object-position:center;
    transition:transform var(--t-move) var(--ease-out-3);
  }
  .imad-client-logo:hover img{transform:scale(1.04);}
  .imad-client-logo figcaption{
    margin:0; padding:10px 16px 14px; border-top:0; background:transparent;
    color:var(--text-faint); font-size:10.5px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; text-align:center;
    transition:color var(--t-micro) linear;
  }
  .imad-client-logo:hover figcaption{color:var(--imad-navy);}

  /* ---- Certifications ----
     Each record is a drawing-board folio: the scan sits as a paper sheet on a
     charcoal well, and the title block is a compact strip — never an empty
     dates row drawing a rule with nothing under it. */
  .imad-certificate-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
  .imad-certificate-record::after{
    content:''; position:absolute; inset-inline:0; inset-block-start:0; block-size:3px;
    background:var(--imad-gold); opacity:0; transition:opacity var(--t-move) linear;
  }
  .imad-certificate-record:hover::after,
  .imad-certificate-record:focus-within::after{opacity:1;}
  .imad-certificate-preview{
    position:relative; display:grid; place-items:center; aspect-ratio:4/5; min-height:0;
    padding:clamp(18px,2.2vw,28px) clamp(16px,1.8vw,24px);
    background:
      radial-gradient(ellipse 90% 70% at 50% 38%,#1E3340 0%,var(--imad-charcoal) 100%);
    color:transparent;
    -webkit-text-stroke:1px var(--imad-gold);
    font-family:var(--font-display); font-size:40px; font-weight:700; text-align:center;
  }
  .imad-certificate-preview a{
    display:grid; place-items:center; width:100%; height:100%; min-height:0;
    text-decoration:none; color:inherit;
  }
  .imad-certificate-preview a:focus-visible{
    outline:2px solid var(--imad-gold); outline-offset:4px;
  }
  .imad-certificate-preview img{
    display:block; width:auto; height:auto; max-width:100%; max-height:100%;
    object-fit:contain; background:var(--imad-white);
    box-shadow:0 10px 28px rgba(0,0,0,.38);
    transition:transform 620ms var(--ease-out-3);
  }
  .imad-certificate-record:hover .imad-certificate-preview img,
  .imad-certificate-record:focus-within .imad-certificate-preview img{transform:scale(1.03);}
  .imad-certificate-titleblock{
    display:flex; flex-direction:column; flex:1; gap:6px;
    padding:16px 18px 18px;
  }
  .imad-certificate-record h3{color:var(--imad-navy); font-size:16px; line-height:1.35; text-wrap:balance;}
  .imad-certificate-record p{margin-top:0; color:var(--text-dim); font-size:13.5px;}
  .imad-certificate-dates{margin-top:10px; padding-top:12px;}
  .imad-certificate-record .imad-arrow-link{margin-top:auto; padding-top:12px; min-height:40px;}

  /* ---- Empty states ----
     A dashed card in the same grid, so a collection with nothing in it still
     has a shape rather than a hole. */
  .imad-collection-empty{
    grid-column:1 / -1; padding:clamp(30px,3.6vw,52px);
    border:1px dashed var(--line-strong); border-radius:var(--card-radius);
    background:var(--imad-off-white);
  }
  .imad-collection-empty h3{max-width:26ch; color:var(--imad-navy);}
  .imad-collection-empty p{max-width:64ch; margin-top:12px; color:var(--text-dim); font-size:14.5px; line-height:1.7;}


  /* Client, team, certification, and contact pages. */
  .imad-client-statement{background:var(--imad-navy); color:var(--imad-white);}
  .imad-client-statement-grid{display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(48px,9vw,132px); align-items:center;}
  .imad-client-statement-index{color:transparent; -webkit-text-stroke:1px var(--imad-light-gold); font-family:var(--font-display); font-size:72px; font-weight:700; line-height:.85;}
  .imad-client-statement .imad-tech-index{color:var(--imad-light-gold);}
  .imad-client-statement h2{max-width:20ch; margin-top:22px; color:var(--imad-white);}
  .imad-client-statement p{max-width:66ch; margin-top:24px; color:var(--imad-off-white); line-height:1.75;}
  .imad-contact-layout{padding-block:0;}
  .imad-contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); align-items:stretch;}
  .imad-contact-details{padding:96px clamp(48px,8vw,112px) 96px 0;}
  .imad-contact-details > .imad-tech-index{color:var(--imad-gold);}
  .imad-contact-details h2{margin-top:24px; color:var(--imad-navy);}
  .imad-contact-details > p{max-width:58ch; margin-top:20px; color:var(--imad-charcoal); line-height:1.7;}
  .imad-contact-register{margin-top:48px; border-top:1px solid rgba(14,85,127,.24);}
  .imad-contact-register > div{display:grid; grid-template-columns:120px minmax(0,1fr); gap:24px; padding:22px 0; border-bottom:1px solid rgba(14,85,127,.24);}
  .imad-contact-register span{color:var(--imad-navy); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;}
  .imad-contact-register address,
  .imad-contact-register a{font-size:15px; font-style:normal; line-height:1.7; overflow-wrap:anywhere;}
  .imad-contact-form-panel{padding:96px clamp(36px,6vw,76px); background:var(--imad-navy);}
  .imad-contact-form-panel > .imad-tech-index{color:var(--imad-light-gold);}
  .imad-contact-form-panel h2{margin-top:24px; color:var(--imad-white);}
  .imad-contact-form-panel > p{margin-top:20px; color:var(--imad-off-white); line-height:1.7;}
  .imad-contact-form,
  .imad-contact-fallback{margin-top:46px;}
  .imad-contact-form .lead-fields label{color:var(--imad-off-white);}
  .imad-contact-form .lead-fields input,
  .imad-contact-form .lead-fields select,
  .imad-contact-form .lead-fields textarea{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:var(--imad-white);}
  .imad-contact-fallback{padding-top:34px; border-top:1px solid rgba(255,255,255,.22);}
  .imad-contact-fallback p{color:var(--imad-off-white); line-height:1.7;}
  .imad-contact-submit{display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:54px; margin-top:28px; padding:14px 18px; background:var(--imad-gold); color:var(--imad-charcoal); font-size:15px; font-weight:700;}

  @media (min-width:1100px){
    .imad-client-logo-grid{grid-template-columns:repeat(4,1fr);}
  }
  @media (max-width:1080px){
    .imad-workflow-ledger{grid-template-columns:repeat(2,1fr);}
    .imad-workflow-ledger li{min-height:250px; border-bottom:1px solid rgba(255,255,255,.2);}
    .imad-workflow-ledger li:nth-child(even){border-right:0;}
    .imad-workflow-ledger li:last-child{grid-column:1/-1; min-height:220px;}
    .imad-home-trust-grid{grid-template-columns:1fr;}
    .imad-home-trust-copy{padding-right:0; border-right:0; border-bottom:1px solid rgba(14,85,127,.22);}
    .imad-home-client-register{padding-inline:0;}
  }
  @media (max-width:900px){
    .imad-home-hero-grid{grid-template-columns:1fr;}
    .imad-home-hero-rail{display:none;}
    .imad-home-hero-shade{background:linear-gradient(90deg,rgba(14,85,127,.96),rgba(14,85,127,.74) 68%,rgba(23,35,43,.42));}
    .imad-home-statement-grid,
    .imad-about-intro-grid{grid-template-columns:1fr;}
    .imad-home-statement-media,
    .imad-home-statement-media img,
    .imad-page-feature-image,
    .imad-page-feature-image img{min-height:0; aspect-ratio:16/10;}
    .imad-featured-project,
    .imad-featured-project:first-child{grid-template-columns:1fr; min-height:0;}
    .imad-chairman-grid{grid-template-columns:180px minmax(0,1fr);}
    .imad-chairman-image{grid-column:2; max-width:320px;}
    .imad-values-grid,
    .imad-goal-grid{grid-template-columns:1fr;}
    .imad-goal-year{font-size:clamp(96px,28vw,180px);}
    .imad-service-index-head{grid-template-columns:1fr;}
    .imad-service-board{grid-template-columns:1fr;}
    .imad-service-board-stage{min-height:0; aspect-ratio:16/10;}
    .imad-service-index-hit{grid-template-columns:44px minmax(0,1fr); gap:14px;}
    .imad-service-index-hit .imad-arrow-link{grid-column:2; padding-inline-start:0; white-space:nowrap;}
    .imad-contact-grid{grid-template-columns:1fr;}
    .imad-contact-details{padding-right:0;}
    .imad-contact-form-panel{margin-inline:calc((100vw - min(calc(100vw - 64px),1280px)) / -2); padding-inline:max(32px,calc((100vw - min(calc(100vw - 64px),1280px)) / 2));}
  }
  @media (max-width:767px){
    .imad-home-section-heading,
    .imad-workflow-heading{grid-template-columns:1fr; gap:24px; padding:54px 0 38px;}
    .imad-home-hero-copy{padding:58px 0 68px;}
    .imad-home-hero-meta{margin-bottom:34px;}
    .imad-home-hero-meta > span:last-child{display:none;}
    .imad-home-hero-intro{font-size:16px;}
    .imad-home-milestones{grid-template-columns:1fr;}
    .imad-home-milestones > div{border-right:0; border-bottom:1px solid rgba(14,85,127,.2);}
    .imad-home-milestones > div:last-child{border-bottom:0;}
    .imad-workflow-ledger{grid-template-columns:1fr;}
    .imad-workflow-ledger li,
    .imad-workflow-ledger li:nth-child(even),
    .imad-workflow-ledger li:last-child{grid-column:auto; min-height:220px; border-right:0;}
    .imad-workflow-number{margin-bottom:44px;}
    .imad-featured-projects{grid-template-columns:1fr;}
    .imad-featured-project:first-child{grid-column:auto;}
    .imad-home-client-register{grid-template-columns:1fr;}
    .imad-home-quality-grid{grid-template-columns:82px minmax(0,1fr); gap:24px;}
    .imad-quality-marker{width:76px; font-size:36px;}
    .imad-home-quality-link{grid-column:1/-1; width:100%;}
    .imad-page-section{padding-block:72px;}
    .imad-page-section-head,
    .imad-direction-heading{grid-template-columns:1fr; gap:24px; margin-bottom:46px;}
    .imad-chairman-grid{grid-template-columns:1fr;}
    .imad-chairman-image{grid-column:auto;}
    .imad-history-track li{grid-template-columns:1fr; gap:16px;}
    .imad-direction-grid{grid-template-columns:1fr;}
    .imad-direction-grid article + article{border-left:0; border-top:1px solid rgba(14,85,127,.24);}
    .imad-direction-grid article{min-height:280px; padding:32px 24px;}
    .imad-direction-grid h3{margin-top:48px;}
    .imad-service-index-hit{padding-inline:4px 0;}
    .imad-service-index-hit .imad-arrow-link{display:none;}
    .imad-client-statement-grid{grid-template-columns:1fr;}
    .imad-client-statement-index{font-size:56px;}
    .imad-client-filter{
      flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
      margin-inline:calc(var(--shell-pad) * -1); padding-inline:var(--shell-pad);
      scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    .imad-client-filter::-webkit-scrollbar{display:none;}
    .imad-contact-register > div{grid-template-columns:1fr; gap:10px;}
    .imad-contact-form-panel{margin-inline:-20px; padding-inline:20px;}
  }
  @media (max-width:480px){
    .imad-home-hero-actions{align-items:stretch; flex-direction:column;}
    .imad-home-primary,
    .imad-home-secondary{width:100%;}
    .imad-featured-project-copy{padding:28px 22px;}
  }

  /* About-page responsive refinements live after the shared breakpoints so
     their component-specific geometry stays authoritative. */
  @media (max-width:900px){
    .imad-about-hero{min-height:560px;}
    .imad-about-intro-grid,.imad-history-layout,.imad-direction-layout,.imad-values-stage{grid-template-columns:1fr;}
    .imad-about-intro-grid{gap:44px;}
    .imad-page-feature-image{max-width:760px; width:100%;}
    .imad-chairman-grid{grid-template-columns:minmax(240px,.58fr) minmax(0,1.42fr); min-height:380px;}
    .imad-chairman-portrait{height:360px;}
    .imad-history-head{position:static;}
    .imad-history-head p{max-width:54ch;}
    .imad-direction-grid{max-width:760px;}
    .imad-values ol{max-width:760px;}
  }
  @media (max-width:767px){
    .imad-about-hero{min-height:580px;}
    .imad-about-hero-shade{background:linear-gradient(90deg,rgba(4,24,38,.96),rgba(4,24,38,.66));}
    .imad-about-hero-grid{padding-block:70px 44px;}
    .imad-about-hero-stamp{display:none;}
    .imad-about-hero h1{font-size:clamp(38px,11vw,54px);}
    .imad-about-hero-copy > p{font-size:15px;}
    .imad-about-assurances{gap:14px 8px;}
    .imad-about-assurances > div{font-size:10px;}
    .imad-about-facts{grid-template-columns:repeat(2,1fr); gap:16px 0; padding:22px 20px;}
    .imad-about-facts > div:nth-child(2){border-right:0;}
    .imad-about-facts > div:nth-child(n+3){padding-top:8px;}
    .imad-chairman-grid{grid-template-columns:1fr; min-height:0; margin-block:16px; padding-top:0;}
    .imad-chairman-portrait{order:2; width:min(100%,300px); height:300px; margin:0 auto; border-radius:150px 150px 0 0;}
    .imad-chairman-message{padding:34px 26px 0;}
    .imad-chairman-message > p,.imad-chairman-message .imad-rich-copy{font-size:clamp(26px,7vw,34px);}
    .imad-chairman-principles{margin-top:24px;}
    .imad-chairman-principles li{flex:1 1 44%; min-height:44px; padding:11px 10px 0 0; margin-right:10px; font-size:10px;}
    .imad-chairman-principles li:nth-child(2){border-right:0; margin-right:0;}
    .imad-history-journey li{grid-template-columns:52px minmax(0,1fr); gap:20px;}
    .imad-history-node{width:52px; height:52px;}
    .imad-history-node img{width:27px; height:27px;}
    .imad-history-journey::before{left:25px;}
    .imad-direction-grid{grid-template-columns:1fr;}
    .imad-direction-grid article{min-height:0;}
    .imad-values ol{grid-template-columns:repeat(2,minmax(0,1fr));}
    .imad-values li{min-height:164px; padding:16px 12px; border-bottom:1px solid rgba(255,255,255,.26);}
    .imad-values li:nth-child(even){border-right:0;}
    .imad-values li:nth-child(n+3){border-bottom:0;}
    .imad-values li img{width:54px; height:54px; padding:13px;}
  }

  /* ==== SECTION RULE =======================================================
     A labelled hairline above a heading. All that survives of the divisions
     register that used to live here: single-imad_service.php still opens with
     one, and it is the only caller. */
  .imad-register-rule{
    display:flex; justify-content:space-between; gap:24px; padding-bottom:14px;
    border-bottom:1px solid rgba(14,85,127,.24); color:var(--imad-navy);
    font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  }
  .on-navy .imad-register-rule{border-color:rgba(255,255,255,.2); color:var(--imad-light-gold);}
  .imad-motion .imad-home-hero-copy > *{animation:imad-rise 760ms var(--ease-out) both;}
  .imad-motion .imad-home-hero-copy > *:nth-child(1){animation-delay:120ms;}
  .imad-motion .imad-home-hero-copy > *:nth-child(2){animation-delay:200ms;}
  .imad-motion .imad-home-hero-copy > *:nth-child(3){animation-delay:280ms;}
  .imad-motion .imad-home-hero-copy > *:nth-child(4){animation-delay:360ms;}
  .imad-motion .imad-home-hero-copy > *:nth-child(5){animation-delay:440ms;}
  .imad-motion .imad-home-hero-rail{animation:imad-rise 900ms var(--ease-out) 520ms both;}
  .imad-motion .imad-home-hero-media img{animation:imad-plate 1600ms var(--ease-out) both;}
  @media (prefers-reduced-motion: reduce){
    .imad-motion .imad-home-hero-copy > *,
    .imad-motion .imad-home-hero-rail,
    .imad-motion .imad-home-hero-media img{animation:none;}
  }

  /* ==== TYPE ===============================================================
     Fluid scale, balanced headings, and a tracking floor so the display face
     never gets so tight the letters touch. */
  .imad-site-main h1{font-size:clamp(38px,5.1vw,74px); line-height:1.03; letter-spacing:-.032em;}
  .imad-site-main h2,
  .imad-site-footer h2{font-size:clamp(29px,3.3vw,48px); line-height:1.08; letter-spacing:-.026em;}
  .imad-site-main h3,
  .imad-site-footer h3{font-size:clamp(21px,1.9vw,29px); line-height:1.2; letter-spacing:-.014em;}
  .imad-site-main h1,
  .imad-site-main h2,
  .imad-site-main h3,
  .imad-site-footer h2{text-wrap:balance;}
  .imad-rich-copy p,
  .imad-inner-intro{text-wrap:pretty;}
  /* Sentence case reads considered; the shouted all-caps headline is the one
     industrial cliché this page does not need. Sized to hold three lines with
     the intro and both actions still above the fold at 900px tall. */
  .imad-home-hero h1{
    max-width:19ch; font-size:clamp(36px,4.1vw,60px); line-height:1.04;
    text-transform:none; letter-spacing:-.03em;
  }
  .imad-home-hero-intro{font-size:17px;}

  /* ==== MICRO-INTERACTIONS =================================================
     Everything here is colour or a few pixels of travel, 180ms, ease-out. */
  /* The primary nav already has its own underline system (see .imad-primary-nav
     above) — nothing to add here. */
  .imad-header-cta span:last-child,
  .imad-cta-button span:last-child,
  .imad-footer-cta-button span:last-child,
  .imad-home-primary span:last-child{transition:transform var(--t-micro) var(--ease-out);}
  .imad-header-cta:hover span:last-child,
  .imad-cta-button:hover span:last-child,
  .imad-footer-cta-button:hover span:last-child,
  .imad-home-primary:hover span:last-child{transform:translate(3px,-3px);}
  /* These arrows are bare spans rather than .g, so the existing
     [dir="rtl"] .btn-sheet .g rule never reached them — under Arabic they
     pointed back at the text they were leading away from. The hover pair has
     to restate the flip, otherwise translate() replaces it mid-transition. */
  [dir="rtl"] .imad-header-cta span:last-child,
  [dir="rtl"] .imad-cta-button span:last-child,
  [dir="rtl"] .imad-footer-cta-button span:last-child,
  [dir="rtl"] .imad-home-primary span:last-child{transform:scaleX(-1);}
  [dir="rtl"] .imad-header-cta:hover span:last-child,
  [dir="rtl"] .imad-cta-button:hover span:last-child,
  [dir="rtl"] .imad-footer-cta-button:hover span:last-child,
  [dir="rtl"] .imad-home-primary:hover span:last-child{transform:scaleX(-1) translate(3px,-3px);}
  .imad-footer-links a,
  .imad-footer-services a{transition:color var(--t-micro) var(--ease-out);}
  .imad-footer-links a:hover,
  .imad-footer-services a:hover{color:var(--imad-light-gold);}
  /* ==== SERVICE & PROJECT DETAIL ========================================== */
  .imad-service-overview-grid{
    display:grid; grid-template-columns:180px minmax(0,1fr);
    gap:clamp(36px,7vw,96px); align-items:start;
  }
  .imad-service-overview-grid .imad-rich-copy{max-width:68ch; font-size:17px;}
  .imad-capability-list{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1px; list-style:none; background:rgba(14,85,127,.18);
    border:1px solid rgba(14,85,127,.18);
  }
  .imad-capability-list li{padding:30px 26px; background:var(--imad-white);}
  .imad-capability-list .imad-icon{margin-bottom:18px; color:var(--imad-technical-blue);}
  .imad-capability-list h3{max-width:20ch; color:var(--imad-navy); font-size:19px; letter-spacing:-.01em;}
  .imad-capability-list p{max-width:44ch; margin-top:10px; color:rgba(23,35,43,.75); font-size:14px; line-height:1.65;}
  .imad-spec-table{display:grid; border-top:1px solid rgba(14,85,127,.22);}
  .imad-spec-table > div{
    display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px;
    padding:18px 0; border-bottom:1px solid rgba(14,85,127,.16);
  }
  .imad-spec-table dt{color:var(--imad-navy); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding-top:3px;}
  .imad-spec-table dd{color:var(--imad-charcoal); font-size:16px; line-height:1.6;}
  .imad-spec-table--row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:0; gap:1px; background:rgba(14,85,127,.18); border:1px solid rgba(14,85,127,.18);}
  .imad-spec-table--row > div{grid-template-columns:1fr; gap:6px; padding:20px 22px; border-bottom:0; background:var(--imad-off-white);}
  .imad-service-scope-grid{display:grid; grid-template-columns:minmax(220px,.55fr) minmax(0,1fr); gap:clamp(36px,7vw,96px); align-items:start;}
  .imad-service-scope-grid h2{margin-top:12px; max-width:14ch;}
  .imad-service-why-grid{display:grid; grid-template-columns:180px minmax(0,1fr); gap:clamp(36px,7vw,96px);}
  .imad-service-why-grid .imad-rich-copy{max-width:66ch; font-size:17px;}
  @media (max-width:900px){
    .imad-service-overview-grid,
    .imad-service-scope-grid,
    .imad-service-why-grid{grid-template-columns:1fr; gap:20px;}
    .imad-spec-table > div{grid-template-columns:1fr; gap:6px;}
  }

  /* ==== TURNKEY WORKFLOW: STACKED SHEETS ===================================
     The five-stage sequence is the one genuinely ordered story on the site, so
     it earns the scroll treatment: each stage is a full sheet that pins and is
     covered by the next, like drawings being laid on a plan table. Sticky
     positioning only — no scroll-jacking; the scrollbar stays honest, and
     without JS or on reduced motion it reads as five stacked panels.        */
  .imad-workflow-stack{list-style:none;}
  .imad-workflow-sheet{
    position:sticky; top:calc(var(--imad-shell-offset) + 8px);
    background:var(--imad-navy); border-top:1px solid rgba(255,255,255,.22);
    box-shadow:0 -18px 40px rgba(10,30,45,.35);
  }
  .imad-workflow-sheet:nth-child(even){background:#0B4568;}
  .imad-workflow-sheet-inner{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,5vw,72px); align-items:end;
    min-height:280px; padding-block:clamp(30px,4vw,54px);
  }
  .imad-workflow-sheet-inner > p{max-width:46ch; justify-self:start; padding-bottom:6px;}
  .imad-workflow-sheet-num{
    color:var(--imad-light-gold); font-family:var(--font-display);
    font-size:clamp(56px,7vw,104px); font-weight:700; line-height:.9; letter-spacing:-.02em;
  }
  .imad-workflow-sheet h3{margin-top:18px; max-width:14ch; color:var(--imad-white); font-size:clamp(24px,2.4vw,34px);}
  .imad-workflow-sheet p{max-width:52ch; color:rgba(244,246,247,.82); font-size:16px; line-height:1.7;}
  @media (max-width:767px){
    .imad-workflow-sheet{position:static; box-shadow:none;}
    .imad-workflow-sheet-inner{grid-template-columns:1fr; align-items:start; min-height:0;}
  }

  /* ==== PARALLAX PLATES ====================================================
     Hero and inner-hero photography drifts a few percent slower than the page.
     Driven by a rAF loop in script.js (data-parallax), transform-only, and
     skipped entirely under reduced motion. The 12% overdraw hides the edges. */
  [data-parallax]{overflow:hidden;}
  [data-parallax] img{height:112%; will-change:transform;}

  /* ==== LINE ICONS =========================================================
     One family: 1.5px strokes on a 24px grid, drawn from the divisions' own
     subject matter. Sized up slightly wherever they anchor a list item.     */
  .imad-icon{display:inline-block; width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}

  /* ---- TYPE OVERRIDES ---------------------------------------------------
     Applied after the legacy cascade so the whole site inherits one scale:
     the body face at eyebrow tracking for anything that is a small label
     for statements. The shell width used to be redeclared here too; it is a
     token on :root now, so this block cannot silently widen the site. */

  /* Technical labels are monospaced because they are data, not headings. */
  .imad-tech-index,
  .imad-section-kicker,
  .eyebrow,
  .sec-tag,
  .sec-tag-h,
  .imad-register-rule{
    font-family:var(--font-body);
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  h1,h2,h3,h4,h5,h6,.imad-footer-column h3{
    font-family:var(--font-display);
    font-variation-settings:'wdth' var(--wdth-wide);
    letter-spacing:-0.015em;
    text-wrap:balance;
  }
  /* Line-height loosens as the type shrinks. 0.98 on a 54px heading is tight
     but readable; on a 34px phone heading it collides. */
  h1{line-height:1.08;}
  h2{line-height:1.15;}
  h3,h4{line-height:1.3; letter-spacing:-0.01em;}
  p{text-wrap:pretty;}

  /* Every display size resolves from the capped scale in :root. */
  .imad-site-main h1{font-size:var(--fs-h1); font-weight:700; text-transform:none;}
  .imad-site-main h2,
  .imad-site-footer h2{font-size:var(--fs-h2); font-weight:700; text-transform:none;}
  .imad-site-main h3,
  .imad-site-footer h3,
  .lead-dialog h3,
  .imad-footer-column h3{font-size:var(--fs-h3); font-weight:600; text-transform:none;}
  .imad-site-main h4{font-size:17px; font-weight:600;}
  .imad-site-main p{max-width:68ch;}

  /* One eyebrow, used above every section heading and in the hero. */
  .imad-eyebrow{
    display:block; margin-bottom:12px;
    font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:600;
    letter-spacing:var(--ls-eyebrow); line-height:1.4; text-transform:uppercase;
    color:var(--accent-text);
  }

  /* Structural elements are drawn, not rounded. Radius survives only where it
     signals "this is an input". */
  .svc-card{border-radius:0;}
  input,select,textarea{border-radius:4px;}

  [dir="rtl"] body{font-family:'IBM Plex Sans Arabic',var(--font-body);}
  [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,
  [dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6{font-family:'IBM Plex Sans Arabic',var(--font-display); letter-spacing:0;}

  /* ---- BIDI: NUMBERS THAT MUST NOT MIRROR ------------------------------
     A phone number is a left-to-right run even in an Arabic paragraph. Left to
     the browser's bidi algorithm, "+966 55 569 1045" reorders to
     "1045 569 55 966+" — a number a visitor would dial wrong. Same reasoning
     as the kV scale: quantities keep their own direction. */
  a[href^="tel:"],
  .imad-drawer-contact a,
  .qa-ref{direction:ltr; unicode-bidi:isolate;}

  /* ==== PROJECT EVIDENCE CARDS ==========================================
     The collection follows the field-report layout: one strong lead record,
     then a compact four-column register of the remaining project evidence. */
  .imad-project-card-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:stretch;}

  /* The card is a nameplate, not a floating panel. Every object IMAD builds
     carries a stamped plate: hairline edge, square corners, no drop shadow.
     Hover reads as selecting a row in a register — a gold edge draws in from
     the left — rather than the card levitating off the page. */
  .imad-project-card{
    position:relative; display:flex; min-width:0; flex-direction:column;
    overflow:hidden; border:1px solid var(--line); border-radius:4px;
    background:var(--imad-white);
    transition:border-color 200ms var(--ease);
  }
  .imad-project-card::before{
    content:""; position:absolute; z-index:2; inset-block:0; inset-inline-start:0;
    width:3px; background:var(--imad-gold);
    transform:scaleY(0); transform-origin:top; transition:transform 260ms var(--ease);
  }
  .imad-project-card:hover,
  .imad-project-card:focus-within{border-color:color-mix(in srgb,var(--imad-navy) 38%,transparent);}
  .imad-project-card:hover::before,
  .imad-project-card:focus-within::before{transform:scaleY(1);}

  .imad-project-card-media,.imad-project-card .imad-project-image-pending{display:block; min-height:0; margin:0; overflow:hidden; aspect-ratio:16/9; background:var(--imad-charcoal);}
  .imad-project-card-media img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease);}
  .imad-project-card:hover .imad-project-card-media img{transform:scale(1.04);}
  .imad-project-card .imad-project-image-pending{display:grid; place-items:center; padding:20px; color:rgba(255,255,255,.75); font-size:10px; font-weight:700; letter-spacing:.12em; text-align:center;}

  .imad-project-card-copy{position:relative; display:flex; flex:1; flex-direction:column; padding:20px 20px 20px;}
  .imad-project-card-copy h3{margin:0; color:var(--imad-navy); font-size:clamp(17px,1.25vw,20px); font-weight:700; line-height:1.18;}
  .imad-project-card-copy h3 a{color:inherit; text-decoration:none;}
  .imad-project-card-copy h3 a:hover{color:var(--imad-technical-blue);}
  .imad-project-card-rule{display:block; width:26px; height:2px; margin:12px 0 11px; background:var(--imad-gold);}
  .imad-project-card-copy > p{margin:0 0 20px; color:var(--text-dim); font-size:14px; line-height:1.6;}

  /* The maker's stamp: out of the photograph, into the plate. Sitting half on
     the image it read as a rendering fault and disappeared on light shots. */
  .imad-project-card-icon{display:block; width:34px; height:34px; margin-block-end:14px;}
  .imad-project-card-icon img{display:block; width:100%; height:100%; object-fit:contain; opacity:.9;}

  /* CARD ACTION — outline, not filled. Eleven gold slabs carried the same
     weight as the one site-primary CTA in the header; an item-level action
     ranks below both. margin-block-start:auto lands every CTA in a row on one
     baseline regardless of how long its scope line runs. */
  .imad-project-card:not(.imad-project-card--featured) .imad-arrow-link{
    display:inline-flex; width:max-content; align-items:center; gap:10px;
    margin-block-start:auto; padding:11px 15px; border:1px solid var(--line-strong);
    border-radius:3px; background:transparent; color:var(--imad-navy);
    font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    transition:background-color 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease);
  }
  .imad-project-card:not(.imad-project-card--featured) .imad-arrow-link span{color:var(--imad-gold); transition:transform 180ms var(--ease),color 180ms var(--ease);}
  .imad-project-card:not(.imad-project-card--featured) .imad-arrow-link:hover{border-color:var(--imad-navy); background:var(--imad-navy); color:var(--imad-white);}
  .imad-project-card:not(.imad-project-card--featured) .imad-arrow-link:hover span{transform:translateX(3px); color:var(--imad-light-gold);}

  .imad-project-card--featured{grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.62fr) minmax(310px,.98fr); overflow:hidden; border:0; border-radius:4px; background:var(--imad-navy);}
  .imad-project-card--featured::before{content:none;}
  .imad-project-card--featured .imad-project-card-media,.imad-project-card--featured .imad-project-image-pending{height:300px; min-height:0; aspect-ratio:auto; border-radius:0;}
  .imad-project-card--featured .imad-project-card-copy{min-height:0; justify-content:center; padding:clamp(25px,3vw,40px); background:linear-gradient(135deg,#062d50,#011e38);}
  .imad-project-card-label{margin:0 0 14px!important; color:var(--imad-gold)!important; font-size:11px!important; font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
  .imad-project-card--featured .imad-project-card-copy h3,.imad-project-card--featured .imad-project-card-copy h3 a{color:var(--imad-white); font-size:clamp(27px,2.25vw,38px);}
  .imad-project-card--featured .imad-project-card-copy h3 a:hover{color:var(--imad-light-gold);}
  .imad-project-card--featured .imad-project-card-rule{width:42px; margin:17px 0;}
  .imad-project-card--featured .imad-project-card-copy > p{margin-block-end:0; color:rgba(255,255,255,.83);}
  .imad-project-card-featured-copy{margin-top:10px!important; font-size:13px!important; font-weight:600;}

  /* Section primary — the one filled button on the page. The arrow glyph is
     forced navy: it inherits gold from .imad-arrow-link and was invisible
     against the gold fill. */
  .imad-project-card--featured .imad-arrow-link{
    display:inline-flex; width:max-content; align-items:center; gap:10px;
    margin-block-start:26px; padding:13px 19px; border-radius:3px;
    background:var(--imad-gold); color:var(--imad-navy);
    font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    transition:background-color 180ms var(--ease),box-shadow 180ms var(--ease);
  }
  .imad-project-card--featured .imad-arrow-link span{color:var(--imad-navy); transition:transform 180ms var(--ease);}
  .imad-project-card--featured .imad-arrow-link:hover{gap:10px; background:var(--imad-light-gold); box-shadow:0 6px 18px rgba(0,0,0,.28); color:var(--imad-navy);}
  .imad-project-card--featured .imad-arrow-link:hover span{transform:translateX(3px);}

  @media (prefers-reduced-motion: reduce){
    .imad-project-card::before{transition:none;}
    .imad-project-card:hover .imad-project-card-media img{transform:none;}
    .imad-project-card .imad-arrow-link:hover span{transform:none;}
  }

  .imad-project-index{background:linear-gradient(135deg,#f3f7fa 0%,#fff 52%,#edf4f8 100%); box-shadow:inset 0 18px 28px rgba(3,40,73,.035),inset 0 -18px 28px rgba(3,40,73,.025);}
  .imad-project-scope{padding-block:48px;}
  .imad-project-gallery{padding-block:48px 64px;}
  @media (max-width:900px){
    .imad-project-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .imad-project-card--featured{grid-template-columns:1.18fr .82fr;}
  }
  @media (max-width:640px){
    .imad-project-card-grid{grid-template-columns:1fr; gap:18px;}
    .imad-project-card--featured{grid-template-columns:1fr;}
    .imad-project-card--featured .imad-project-card-media,.imad-project-card--featured .imad-project-image-pending{height:auto; min-height:230px; aspect-ratio:16/10;}
    .imad-project-card--featured .imad-project-card-copy{min-height:0; padding:28px 24px 31px;}
    .imad-project-card-copy{min-height:160px;}
  }

  /* ---- Translation loading screen (assets/js/rtl.js) --------------------- */
  /* Drawn on <html> itself so it exists from first paint, before any body
     markup is parsed. Always present but invisible, so lifting it fades
     rather than vanishes. The page shows through blurred under the brand navy;
     the logo sits on a white card because it is navy on white. */
  html::before,html::after{content:""; position:fixed; z-index:10000; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility 0s linear .35s;}
  html::before{inset:0; background:rgba(14,85,127,.84); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);}
  html::after{top:50%; left:50%; width:min(300px,70vw); aspect-ratio:2.4; transform:translate(-50%,-50%); border-radius:18px; background:var(--imad-white) url("../images/imad-logo.webp") center/82% auto no-repeat; box-shadow:0 24px 60px rgba(3,40,73,.35);}
  html.imad-translating::before,html.imad-translating::after{opacity:1; visibility:visible; pointer-events:auto; transition:none;}
  html.imad-translating::after{animation:imad-loader-pulse 1.4s ease-in-out infinite;}
  @keyframes imad-loader-pulse{0%,100%{transform:translate(-50%,-50%) scale(1); box-shadow:0 24px 60px rgba(3,40,73,.35);} 50%{transform:translate(-50%,-50%) scale(.94); box-shadow:0 12px 30px rgba(3,40,73,.25);}}
  @media (prefers-reduced-motion: reduce){
    html.imad-translating::after{animation:none;}
  }
  /* No backdrop-filter: go fully opaque so the English cannot show through. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    html::before{background:var(--imad-navy);}
  }