/* ==========================================================================
   IWS DOME GALLERY
   Vanilla port of React Bits' DomeGallery. Geometry is the upstream component's:
   tiles sit on a sphere of radius --dome-radius, each rotated into place and
   pushed out along Z, and the sphere itself is pulled back by the same radius
   so the front of it lands on the stage.

   Colours are the IWS dark system (IWS_DESIGN.md 3.3). The upstream overlay
   colour #120F17 is a warm near-black and not an IWS colour, so Deep Navy
   #070D2E replaces it. grayscale is off: the photographs are real students and
   draining them of colour is exactly the "stock education imagery" look that
   section 7 rules out.

   Flagged as PROPOSED under section 12: this is a new visual device, requested
   by Burak on 25 Jul 2026, and section 13 rule 7 says not to introduce those
   silently. Mustafa to confirm.
   ========================================================================== */

.iwsstu{
  position:relative;
  /* Deep Navy to Navy Glow and back. Burak asked for a gradient rather than a
     flat fill, and this is the one gradient IWS_DESIGN.md 3.4 actually permits:
     "subtle Deep Navy to Navy Glow depth within the dark system". Darkest at the
     top and bottom edges so the dome's own edge fades still meet the section
     cleanly, lightest behind the middle of the sphere. */
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(19,38,107,.85) 0%, rgba(19,38,107,0) 62%),
    linear-gradient(168deg, #070D2E 0%, #13266B 46%, #070D2E 100%);
  padding:82px 0 0;
  overflow:hidden;
}
.iwsstu__in{
  position:relative;z-index:2;
  max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box;text-align:center;
}
.iwsstu__ey{
  display:block;
  font-family:var(--iws-font-display);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iws-sky-light,#7BA7FF);margin:0 0 14px;
}
.iwsstu h2{
  font-family:var(--iws-font-display)!important;
  font-size:clamp(27px,3.3vw,40px);font-weight:700;line-height:1.3;
  color:#fff;margin:0 0 16px;letter-spacing:-.015em;
}
.iwsstu__sub{
  font-family:var(--iws-font-body);
  font-size:17px;line-height:1.65;color:var(--iws-body-light,#C7CEEA);
  max-width:60ch;margin:0 auto;
}
/* The drag hint, with a horizontal gradient that travels across it on a 2.5s
   loop (Burak, 25 Jul). Two amber tones from the palette carry the base and a
   third, lighter tone is the travelling highlight, so the movement reads as a
   sheen passing over the words rather than the words changing colour.

   background-clip:text is the mechanism, so the SVG cannot inherit it: a
   background clipped to glyphs has no glyphs to clip to in an icon. The icon
   animates its own stroke on the same 2.5s loop instead, which keeps the two
   in step.

   Note for anyone editing this: do NOT animate opacity on a child of a
   background-clip:text element. That gives the child its own compositing layer
   and the clip silently stops working, which is recorded in Website/STATE.md. */
.iwsstu__hint{
  display:inline-flex;align-items:center;gap:9px;
  margin:22px 0 0;
  font-family:var(--iws-font-display);
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(199,206,234,.7);
}
.iwsstu__hint span{
  /* 27 Jul: this shimmer ran on amber (#D97706 / #F5B860 / #FFE0B0), and this
     section is the DARK one. Two of those three were invented tints, and the
     rule in 4.3b is that the amber family hands over to Periwinkle on a dark
     ground rather than being lightened until it survives. Rebuilt on the
     Periwinkle pair, which keeps the travelling highlight (the sweep still has
     three tones) using only palette values. */
  background-image:linear-gradient(90deg,
    var(--iws-peri,#CFE0FF) 0%,
    var(--iws-peri-light,#EAF1FF) 28%,
    #FFFFFF 50%,     /* the travelling highlight, the light end of the family */
    var(--iws-peri-light,#EAF1FF) 72%,
    var(--iws-peri,#CFE0FF) 100%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:iwshintsweep 2.5s linear infinite;
}
.iwsstu__hint svg{
  width:16px;height:16px;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke:var(--iws-peri,#CFE0FF);   /* 27 Jul: dark section, so Periwinkle not amber (4.3b) */
  animation:iwshinticon 2.5s linear infinite;
}
@keyframes iwshintsweep{
  from{background-position:220% 0;}
  to{background-position:-20% 0;}
}
@keyframes iwshinticon{
  0%,100%{stroke:var(--iws-peri,#CFE0FF);}
  50%{stroke:#FFFFFF;}
}
@media (prefers-reduced-motion:reduce){
  .iwsstu__hint span{animation:none;background-position:50% 0;}
  .iwsstu__hint svg{animation:none;stroke:var(--iws-peri,#CFE0FF);}
}
.iwsstu:has(.iwsdome[data-enlarged="true"]) .iwsstu__hint{opacity:0;}  /* L5: ~ never matched, the hint is not a sibling of .iwsdome */

/* The buttons had the dome pressing straight down onto them. Burak: "give more
   space to breathe for the cta buttons on that section". The gap above is now
   larger than the gap below the dome's own edge fade, so the pair reads as its
   own moment rather than as a caption to the gallery. */
.iwsstu__cta{
  position:relative;z-index:3;
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin:0;padding:34px 24px 74px;
}
.iwsstu__btn{
  font-family:var(--iws-font-display);
  font-size:15.5px;font-weight:600;text-decoration:none;
  padding:16px 32px;border-radius:13px;
  /* Gradient, not a flat fill: Burak, 25 Jul, "never use solid colours please
     for background colours or cta background colour". FLAGGED: IWS_DESIGN.md
     3.4 permits gradients only as Deep Navy to Navy Glow inside the dark
     system, so a white-to-periwinkle button is a departure from the written
     rule and needs Thomas to sign it off under section 12. Kept as narrow a
     ramp as possible so it reads as a sheen, not a colour change. */
  background-image:linear-gradient(160deg,#FFFFFF 0%,#EAF1FF 100%);
  color:var(--iws-royal,#0A1776);
  box-shadow:0 10px 26px -12px rgba(4,8,28,.7);
  transition:background-image .25s ease,transform .25s ease,box-shadow .25s ease;
}
.iwsstu__btn:hover{
  background-image:linear-gradient(160deg,#EAF1FF 0%,var(--iws-peri,#CFE0FF) 100%);
  color:var(--iws-royal,#0A1776);transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(4,8,28,.8);
}
.iwsstu__btn--ghost{
  background-image:linear-gradient(160deg,rgba(207,224,255,.14) 0%,rgba(207,224,255,.04) 100%);
  color:#fff;border:1px solid rgba(207,224,255,.42);box-shadow:none;
}
.iwsstu__btn--ghost:hover{
  background-image:linear-gradient(160deg,rgba(207,224,255,.26) 0%,rgba(207,224,255,.12) 100%);
  color:#fff;border-color:var(--iws-peri,#CFE0FF);
}
.iwsstu__btn:focus-visible{outline:2px solid var(--iws-peri,#CFE0FF);outline-offset:3px;}

/* ---- the dome itself ---------------------------------------------------- */
.iwsdome{
  position:relative;
  width:100%;
  /* Taller than it was. The number of ROWS you can see is box height divided
     by tile height, and a tile is 2(pi)R/segments: at 620px that came to 3.1 of
     the 5 rows, so the top and bottom of the sphere sat outside the box and it
     read as a band again. 800px shows 4.0 rows, which is the reference's
     proportion. The width is untouched, so the columns across stay at 7. */
  height:clamp(440px,56vw,800px);
  margin:6px 0 0;
  --dome-radius:600px;
  --dome-pad:60px;
  --dome-seg-x:24;
  --dome-seg-y:24;
  --circ:calc(var(--dome-radius) * 3.14);
  --rot-y:calc((360deg / var(--dome-seg-x)) / 2);
  --rot-x:calc((360deg / var(--dome-seg-y)) / 2);
  --item-w:calc(var(--circ) / var(--dome-seg-x));
  --item-h:calc(var(--circ) / var(--dome-seg-y));
}
.iwsdome *{box-sizing:border-box;}
.iwsdome__sphere,.iwsdome__item,.iwsdome__tile{transform-style:preserve-3d;}

.iwsdome__main{
  position:absolute;inset:0;
  display:grid;place-items:center;
  overflow:hidden;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
  background:transparent;
  cursor:grab;
  /* THE EDGE FADE IS A MASK, NOT PAINT.
     It used to be three divs filled with flat Deep Navy: a vignette and a fade
     at the top and bottom. The section behind them is a gradient, so a flat
     colour matched it in exactly one place and showed as a patch everywhere
     else. That is the mismatch Burak circled on 26 Jul.

     Masking the tiles instead means the section's gradient is never painted
     over, so the two can never disagree, whatever the gradient is changed to
     later.

     Two layers, intersected. The radial alone leaves a hard horizontal cut
     along the bottom of the box, because a radial sized to the box only
     reaches transparent in its corners; the linear finishes the top and bottom
     edges the way the retired .iwsdome__fade divs used to, without painting a
     colour. */
  --dome-mask-a:radial-gradient(112% 104% at 50% 50%,
    #000 0%, #000 46%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.26) 89%, transparent 100%);
  --dome-mask-b:linear-gradient(180deg,
    transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-image:var(--dome-mask-a),var(--dome-mask-b);
  mask-image:var(--dome-mask-a),var(--dome-mask-b);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.iwsdome__main:active{cursor:grabbing;}

.iwsdome__stage{
  width:100%;height:100%;
  display:grid;place-items:center;
  perspective:calc(var(--dome-radius) * 2);
  perspective-origin:50% 50%;
  contain:layout paint size;
}
.iwsdome__sphere{
  transform:translateZ(calc(var(--dome-radius) * -1));
  will-change:transform;
}

.iwsdome__item{
  position:absolute;
  top:-999px;bottom:-999px;left:-999px;right:-999px;margin:auto;
  width:calc(var(--item-w) * var(--sx));
  height:calc(var(--item-h) * var(--sy));
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:transform .3s;
  transform:
    rotateY(calc(var(--rot-y) * (var(--ox) + ((var(--sx) - 1) / 2)) + var(--rot-y-delta,0deg)))
    rotateX(calc(var(--rot-x) * (var(--oy) - ((var(--sy) - 1) / 2)) + var(--rot-x-delta,0deg)))
    translateZ(var(--dome-radius));
}

.iwsdome__tile{
  position:absolute;inset:8px;
  display:block;padding:0;border:0;
  border-radius:14px;overflow:hidden;
  background:#070D2E;
  backface-visibility:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transform:translateZ(0);
  transition:transform .3s;
}
.iwsdome__tile img{
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;backface-visibility:hidden;display:block;
}
.iwsdome__tile:focus-visible{outline:2px solid var(--iws-peri,#CFE0FF);outline-offset:2px;}

/* .iwsdome__vig and .iwsdome__fade are RETIRED. They painted flat Deep Navy
   over a gradient section and were the colour seam. The edge fade is now the
   mask on .iwsdome__main above. The rules are kept as no-ops only so an old
   cached copy of the markup cannot suddenly paint a navy slab over the dome. */
.iwsdome__vig,.iwsdome__fade{display:none;}

/* ---- enlarged tile ------------------------------------------------------ */
.iwsdome__viewer{
  position:absolute;inset:0;z-index:20;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding:var(--dome-pad);
}
.iwsdome__frame{height:100%;aspect-ratio:3/4;max-width:100%;display:flex;}
@media (max-aspect-ratio:1/1){.iwsdome__frame{height:auto;width:min(320px,80%);aspect-ratio:3/4;}}

.iwsdome__scrim{
  position:absolute;inset:0;z-index:10;
  background:rgba(4,8,28,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.iwsdome[data-enlarged="true"] .iwsdome__scrim{opacity:1;pointer-events:auto;}

.iwsdome__big{
  position:absolute;z-index:30;
  border-radius:18px;overflow:hidden;
  transform-origin:top left;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.iwsdome__big img{width:100%;height:100%;object-fit:cover;display:block;}
.iwsdome__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 18px 15px;
  background:linear-gradient(0deg,rgba(4,8,28,.92) 0%,rgba(4,8,28,0) 100%);
  font-family:var(--iws-font-body);
  font-size:13.5px;line-height:1.4;color:#fff;text-align:left;
}

/* ---- reduced motion / no-JS fallback ------------------------------------ */
.iwsdome__strip{
  display:flex;gap:14px;overflow-x:auto;list-style:none;
  margin:0;padding:8px 24px 22px;scroll-snap-type:x mandatory;
}
.iwsdome__strip li{position:relative;flex:0 0 210px;scroll-snap-align:start;}
.iwsdome__strip img{width:100%;height:280px;object-fit:cover;border-radius:14px;display:block;}
.iwsdome__strip span{
  position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px;
  background:linear-gradient(0deg,rgba(4,8,28,.9) 0%,rgba(4,8,28,0) 100%);
  border-radius:0 0 14px 14px;
  font-family:var(--iws-font-body);font-size:13px;color:#fff;
}
.iwsdome[data-reduced="true"]{height:auto;}
.iwsstu:has(.iwsdome[data-reduced="true"]) .iwsstu__hint{display:none;}  /* L5: descendant selector never matched, hint is a sibling of the dome */

@media (max-width:760px){
  .iwsstu{padding-top:62px;}
  .iwsdome{height:clamp(360px,86vw,440px);}
  /* backdrop-filter on a phone, over a 3D scene, is the most expensive thing
     on this page. The scrim alone carries the job. */
  .iwsdome__scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,8,28,.78);}
}
@media (prefers-reduced-motion:reduce){
  .iwsdome__item,.iwsdome__tile,.iwsdome__scrim{transition:none;}
}


/* ==========================================================================
   IWS ARC  (.iwsarc)  — the CircularGallery effect in CSS
   Cards sit on a shallow arc, curving down and rotating away from the centre.
   Real <a> elements, so every student is crawlable, keyboard-reachable and
   linked to their own story. See the note in iws-dome.js for why this is not
   WebGL.
   ========================================================================== */
.iwsach--arc{background:linear-gradient(168deg,#F8FAFC 0%,#EAF1FF 52%,#F8FAFC 100%);padding:86px 0 0;}
.iwsarc{
  position:relative;
  height:clamp(340px,38vw,430px);
  margin:38px 0 0;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.iwsarc.is-dragging{cursor:grabbing;}
.iwsarc:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:-4px;border-radius:14px;}
.iwsarc__track{position:absolute;inset:0;--gap:26px;gap:var(--gap);}
.iwsarc__card{
  position:absolute;top:12px;left:50%;
  width:clamp(168px,15.5vw,206px);
  margin-left:calc(clamp(168px,15.5vw,206px) / -2);
  text-decoration:none;
  will-change:transform,opacity;
  transform-origin:50% 50%;
}
.iwsarc__shot{
  display:block;width:100%;aspect-ratio:3/4;
  border-radius:16px;overflow:hidden;
  background:#E6ECF6;
  box-shadow:0 18px 40px -20px rgba(10,23,118,.5);
  transition:box-shadow .3s ease,transform .3s ease;
}
.iwsarc__shot img{width:100%;height:100%;object-fit:cover;display:block;}
.iwsarc__card:hover .iwsarc__shot{transform:translateY(-5px);box-shadow:0 26px 52px -20px rgba(10,23,118,.62);}
.iwsarc__nm{
  display:block;margin:15px 0 3px;text-align:center;
  font-family:var(--iws-font-display);
  font-size:16px;font-weight:700;color:var(--iws-royal,#0A1776);
}
.iwsarc__rl{
  display:block;text-align:center;
  font-family:var(--iws-font-body);
  font-size:13.5px;line-height:1.4;color:#64748B;
}
.iwsarc__nav{
  position:absolute;top:38%;z-index:5;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(160deg,#FFFFFF 0%,#EAF1FF 100%);
  border:1px solid #DCE4F2;color:var(--iws-royal,#0A1776);
  box-shadow:0 10px 24px -12px rgba(10,23,118,.45);
  transition:border-color .2s ease,transform .2s ease;
}
.iwsarc__nav:hover{border-color:var(--iws-royal,#0A1776);transform:scale(1.06);}
.iwsarc__nav:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:3px;}
.iwsarc__nav svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.iwsarc__nav--prev{left:14px;}
.iwsarc__nav--next{right:14px;}

/* No JavaScript, or reduced motion: a plain horizontal scroller with the same
   cards. Nothing moves on its own and nothing is hidden. */
.iwsarc[data-reduced="true"],.iwsarc:not([data-booted]){height:auto;}
.iwsarc[data-reduced="true"] .iwsarc__track,
.iwsarc:not([data-booted]) .iwsarc__track{
  position:static;display:flex;overflow-x:auto;padding:8px 24px 20px;
  scroll-snap-type:x mandatory;
}
.iwsarc[data-reduced="true"] .iwsarc__card,
.iwsarc:not([data-booted]) .iwsarc__card{
  position:static;flex:0 0 auto;transform:none!important;opacity:1!important;
  scroll-snap-align:center;
}
.iwsarc[data-reduced="true"] .iwsarc__nav{display:none;}

@media (max-width:760px){
  .iwsarc{height:clamp(320px,92vw,380px);}
  .iwsarc__nav{display:none;}
}

/* Elementor containers are display:flex, so a plain <section> inside one is a
   flex item and can shrink-wrap instead of filling the row. Every other
   IWS section in iws-home.css carries this same declaration; these two were the
   only ones without it. Trap 6 in Website/STATE.md.

   HONEST NOTE ON HOW THIS GOT ADDED: it went in after a measurement showing the
   section at 0px wide, which I read as the flex collapse. That measurement was
   worthless. The browser pane was hidden, so document.documentElement itself
   measured 0px and every element on the page reported zero. The declaration is
   still right, for consistency with the other four sections, but it was not
   fixing the fault I thought it was, and no fault has actually been observed
   here yet. Do not treat this as evidence that the arc was broken. */
.iwsach,.iwsstu{width:100%;flex:1 0 100%;align-self:stretch;}


/* ---- the centred card carries a travelling amber border ------------------
   Burak, 25 Jul: "i want the tile that gets centred highlighted, a moving
   gradient animation orange colour, the border shouldnt be too thick but not
   too thin as well".

   3px. The ring is a conic-gradient rotated by a registered custom property,
   masked so only the border band paints. @property is what makes an angle
   animatable at all; without it the browser interpolates the whole gradient as
   a discrete value and the ring jumps rather than turns. */
@property --iwsarc-a{syntax:'<angle>';inherits:false;initial-value:0deg;}

.iwsarc__shot{position:relative;}
.iwsarc__card.is-centre .iwsarc__shot{
  box-shadow:0 22px 48px -18px rgba(217,119,6,.55);
}
.iwsarc__card.is-centre .iwsarc__shot::after{
  content:"";position:absolute;inset:0;z-index:2;
  border-radius:inherit;pointer-events:none;
  padding:3px;
  background:conic-gradient(from var(--iwsarc-a),
    /* 27 Jul: #F5B860 and #FFE0B0 were invented tints. This section is white,
       so amber is still right for a decorative ring; the sweep now uses only
       palette values and keeps its luminance travel. */
    var(--iws-amber,#D97706) 0deg, var(--iws-amber-ink,#B45309) 90deg, #7C2D12 170deg,
    var(--iws-amber-ink,#B45309) 250deg, var(--iws-amber,#D97706) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:iwsarcspin 3.4s linear infinite;
}
@keyframes iwsarcspin{to{--iwsarc-a:360deg;}}
.iwsarc__card.is-centre .iwsarc__nm{color:var(--iws-amber-ink,#B45309);}

@media (prefers-reduced-motion:reduce){
  .iwsarc__card.is-centre .iwsarc__shot::after{animation:none;}
}

/* Burak: "make this font/text slightly bigger please". */
.iwsstu__hint{font-size:13.5px;letter-spacing:.1em;gap:11px;}
.iwsstu__hint svg{width:19px;height:19px;}


/* ==========================================================================
   ARC, second pass (Burak, 26 Jul)
   Four things: room to breathe between the standfirst and the tiles, taller
   cards so the longer role lines fit, labels that can hold two lines without
   colliding, and arrows that read as controls rather than decoration.
   ========================================================================== */

/* "give some breathing room for the text ... between the tiles and the title
   so there is symmetry". The gap above the tiles now matches the gap below
   them: 58px each side of the gallery. The standfirst also gets a measure so
   it breaks into two balanced lines instead of one long and one short. */
.iwsach--arc .iwspw__sub{max-width:62ch;margin-left:auto;margin-right:auto;}
.iwsarc{margin-top:58px;}
.iwsach--arc .iwsstu__in + .iwsarc{margin-top:58px;}

/* Taller, because two of the role lines Burak supplied run to three lines at
   this width and the old 430px box cut them off. */
.iwsarc{height:clamp(392px,42vw,486px);}
.iwsarc__card{width:clamp(176px,16.5vw,214px);margin-left:calc(clamp(176px,16.5vw,214px) / -2);}

/* The label block is given a fixed minimum so every card's photograph starts
   and ends at the same height whatever the caption length, which is the same
   row-alignment argument as the pathways cards. */
.iwsarc__nm{margin-top:16px;font-size:16.5px;}
.iwsarc__rl{
  font-size:13px;line-height:1.42;
  min-height:2.84em;                 /* two lines, so short and long labels agree */
  padding:0 2px;
}

/* The arrows sit level with the middle of the photograph rather than at 38%,
   and they are pushed clear of the first and last visible card. */
.iwsarc__nav{top:calc(50% - 46px);width:48px;height:48px;}
.iwsarc__nav--prev{left:18px;}
.iwsarc__nav--next{right:18px;}
.iwsarc__nav:active{transform:scale(.96);}

@media (max-width:760px){
  .iwsarc{height:clamp(360px,104vw,430px);margin-top:40px;}
  .iwsarc__rl{min-height:0;}
}

/* ---------------------------------------------------------------------------
   PERFORMANCE, 4 Aug 2026.
   The dome renders 120 tiles, and .iwsdome__tile sets transform-style:preserve-3d
   with backface-visibility:hidden, so every tile is promoted to its own compositor
   layer. The dome sits roughly 14,000px down the page, yet those 120 layers were
   composited on every frame anyway, which delayed the paint after ANY interaction
   elsewhere on the page, including the header and the enquiry form.

   Measured on live, 390px viewport, Slow 4G, 4x CPU throttle, real input events:
   worst interaction 488ms, of which 486ms was presentation delay (input delay 2ms,
   event handlers 0ms). It is not JavaScript and it is not layout: a forced full
   relayout costs 0ms. With this rule the worst interaction is 32ms.

   Nothing shifts: .iwsdome carries an explicit height at every breakpoint
   (line 159 and the max-width:760px override at line 311), so skipping its
   contents cannot change the box. Verified: document height 21510px either way.

   Excluded from the reduced-motion variant at line 306, which sets height:auto
   and therefore does depend on its contents.
   --------------------------------------------------------------------------- */
.iwsdome:not([data-reduced="true"]){
  content-visibility:auto;
  contain-intrinsic-size:auto 800px;
}