@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-right: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-left:18px;}
  .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;}
  .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;}

  @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. */
  dialog.lead-dialog{
    border:0; background:var(--imad-white); color:var(--text);
    padding:0; margin:auto; width:min(94vw,520px); max-height:90svh; overflow:auto;
    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);
    scrollbar-width:thin; scrollbar-color:rgba(23,35,43,.25) transparent;
  }
  dialog.lead-dialog::-webkit-scrollbar{width:8px;}
  dialog.lead-dialog::-webkit-scrollbar-track{background:transparent;}
  dialog.lead-dialog::-webkit-scrollbar-thumb{background:rgba(23,35,43,.25); border-radius:4px;}
  dialog.lead-dialog::-webkit-scrollbar-thumb:hover{background:var(--muted);}
  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 now rather than of the form, so
     the dialog itself is the positioning context. */
  dialog.lead-dialog{position:relative;}
  .lead-body{display:flex; flex-direction:column;}
  /* 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:16px;}
  .lead-body .wpcf7,
  .lead-fallback{padding:26px clamp(22px,5vw,32px) clamp(26px,5vw,32px);}
  /* 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);}
  .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; padding:30px clamp(22px,5vw,32px) 28px;
    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 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(22px,4.6vw,28px);
    text-transform:none; letter-spacing:-.01em; line-height:1.2; color:var(--imad-white);
    max-width:20ch;
  }
  .lead-head p{margin-top:10px; max-width:44ch; font-size:14px; line-height:1.6; color:rgba(255,255,255,.76);}
  .lead-fields{display:flex; flex-direction:column; gap:14px;}
  .lead-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:380px){ .lead-row{grid-template-columns:1fr;} }
  .lead-fields label{display:flex; flex-direction:column; gap: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:44px; padding:11px 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:2px; border-color:var(--imad-navy);
  }
  .lead-fields textarea{min-height:96px; resize:vertical;}
  .lead-submit{
    min-height:50px; border:none; border-radius:8px; cursor:pointer; margin-top:6px; 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{padding:56px clamp(22px,5vw,32px); 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(3,minmax(150px,1fr));
    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-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);}

  .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; 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);}
  .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;}
  }