/* ── sections/hero.css — the landing ─────────────────────────────
   Owner, round two (2026-09-29): the mountain even higher, the opening words in the centre of the screen in
   Figtree bold, the IoT line right under them (lighter, "AI" and "IoT" in colour), a gap, then
   "Let's begin. What type of customer are you?" and the doors; the sky behind the mountain a little darker.
   Owner, round three (2026-09-29): the words own the middle of the screen, and the doors
   come second, lower down, at the foot of the first screen; and far less white over the photograph, so the mountain's snow, rock and sky keep their colours:
   a soft pool of light behind the words alone (sized to them, hero.js measures the lines), and the
   cloud sea running out into the page ground only at the very bottom, behind the doors.
   Owner's notes (2026-09-29 evening): the tag is "One Platform · Every Asset · Every Service"; "AI & IoT" in neon
   (the brand's gold and ice, travelling, on a navy highlight), with a button to the IoT & AI page after the sentence
   (on its own row on phones); two doors (Residential, Commercial): "Other" is gone.
   Layout: a four-row grid (room above · the words · a gap · the doors). hero.js measures the words (--copy-h,
   --words-w) and the doors (--start-h), so the room above puts the words' middle at the optical middle of the screen
   (--mid, a little above the centre), and the gap grows until the doors stand at the foot of
   the first screen (but never more than --gap-max, so on a tall screen they don't drift away from the words);
   without the script the same sums run on the typical sizes set below, so the layout is nearly the same.
   The room above never gets shorter than the header stack (--clear), so the words never run under the three
   buttons on the right.
   The photograph is placed by CSS alone, from where the summit is in each plate (a trace of the ridge):
     • the summit sits at --sum-y, just under the header bar, centred across the screen (the three buttons stand
       to its right);
     • the plate is sized so the foot of the main peak reaches the middle of the words (--foot-k below the centre
       of the screen), but never narrower than the screen (× --cover, since the summit is a little off-centre);
     • under a 9:10 aspect ratio the portrait plate (an outpaint of the same camera) takes over.
   Nothing is hidden before a script runs; hero.js only adds the small moves. */
.s7h {
  --ar: 1.7915;                 /* plate-frozen.webp, 2560 × 1429 */
  --sx: .4917; --sy: .3248;     /* the summit, as fractions of the plate */
  --mh: .41;                    /* summit → the foot of the main peak, where it meets the cloud sea */
  --pale: .25;                  /* summit → the far ridges, where the sky ends across the whole width (light zone) */
  --cover: 1.06;
  --sky-mask: url(../media/home/hero/sky-mask-land.webp);
  --bar: calc(var(--s7-nav-top) + var(--s7-nav-h));             /* the header bar alone, without the buttons under it */
  --gap: clamp(10px, 1.8vh, 20px);                                /* header bar → summit */
  --sum-y: calc(var(--bar) + var(--gap));
  --foot-k: clamp(24px, 4.4vh, 44px);                             /* the peak's foot, below the centre of the screen */
  --ph: max(calc(100vw * var(--cover) / var(--ar)), calc((50svh + var(--foot-k) - var(--sum-y)) / var(--mh)));
  --clear: calc(var(--s7-top) + clamp(18px, 2.6vh, 30px));       /* the words start at least this far down */
  --mid: 47svh;                                                   /* the words' middle: the optical middle of the screen */
  --begin: clamp(30px, 5.6vh, 60px);                              /* the least gap: IoT line → "Let's begin" */
  --gap-max: max(var(--begin), 25svh);                            /* the most, on tall screens */
  --foot-pad: clamp(24px, 4.6vh, 52px);                           /* after the doors: a small gap, then the next section */
  --door-h: 62px;
  --copy-h: 250px;                                                /* the words' height, measured by hero.js */
  --start-h: 200px;                                               /* the question and the doors (with --foot-pad), ditto */
  --words-w: min(100vw - 2 * var(--s7-gutter), 900px);            /* the longest line of the headline, ditto */
  /* the words' middle at the optical middle of the screen (--r1, the room above them), then a gap (--r3) that brings
     the doors down to the foot of the first screen, never less than --begin, never more than --gap-max; so on a
     screen too short for both, the hero simply runs a little past the fold */
  --r1: max(var(--clear), calc(var(--mid) - var(--copy-h) / 2));
  --r3: clamp(var(--begin), calc(100svh - var(--r1) - var(--copy-h) - var(--start-h)), var(--gap-max));
  --wash: 244, 246, 249;                                          /* var(--page) as rgb, for the fades */
  --veil: 250, 252, 255;                                          /* the light behind the words */
  --figtree: 'Figtree', var(--font);                              /* the headline's face (loaded by hero.html) */
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--r1) auto var(--r3) auto;
  /* the sky's own colours (graded as the photograph is), so the frame reads before the photograph arrives */
  background: linear-gradient(180deg, #111B2A, #34465E 22%, #93A1B4 42%, var(--page) 72%);
}
@media (max-aspect-ratio: 9/10) {   /* plate-frozen-portrait.webp, 1312 × 2336 */
  .s7h { --ar: .5616; --sx: .483; --sy: .4038; --mh: .276; --pale: .19; --cover: 1.08; --sky-mask: url(../media/home/hero/sky-mask-port.webp); }
}

/* the header's tone: the hero is data-tone="dark" for the sky; from the far ridges (--pale under the summit, where
   the sky ends across the whole width, so it follows the photograph at every size) to the hero's bottom edge, this
   empty layer is data-tone="light", so the header goes navy over the bright snow, the cloud sea and the light wash */
.s7h-tone { position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--sum-y) + var(--pale) * var(--ph)); bottom: 0; pointer-events: none; }

/* ── the photograph ── */
.s7h-plate {
  position: absolute; z-index: 0; left: 50%; top: calc(var(--sum-y) - var(--sy) * var(--ph));
  width: calc(var(--ph) * var(--ar)); height: var(--ph); margin-left: calc(var(--ph) * var(--ar) * var(--sx) * -1);
  pointer-events: none;
}
.s7h-photo { position: absolute; inset: 0; transform-origin: calc(var(--sx) * 100%) calc(var(--sy) * 100%); }
.s7h-photo picture, .s7h-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; }
.s7h-photo::after {   /* the cloud sea runs out into the page ground, so the next section simply continues; round three:
                         only its lower part, so the top of the cloud sea keeps its blue-grey folds. It runs 3px past
                         the photograph's bottom edge, so that edge's half-covered pixel row can't show as a grey line */
  content: ""; position: absolute; inset: 0 0 -3px;
  background: linear-gradient(180deg, rgba(var(--wash), 0) 80%, rgba(var(--wash), .18) 86%, rgba(var(--wash), .5) 91.5%,
    rgba(var(--wash), .82) 96%, rgba(var(--wash), .96) 98.6%, rgb(var(--wash)) 99.6%);
}
/* the owner's "slightly darker" sky: a navy grade over the sky alone. sky-mask-*.webp is the sky of each plate
   (traced from the photograph's own skyline, feathered), so the mountain and the far ridges keep all their light.
   Strongest behind the header (the top of the screen), easing off towards the ridges. */
.s7h-grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 22, 52, .54) 0,
    rgba(0, 22, 52, .5) calc(var(--sy) * var(--ph) - var(--sum-y)),
    rgba(0, 26, 60, .38) calc(var(--sy) * var(--ph)),
    rgba(0, 30, 66, .22) calc((var(--sy) + var(--pale)) * var(--ph)),
    rgba(0, 30, 66, .12) 100%);
  -webkit-mask: var(--sky-mask) 0 0 / 100% 100% no-repeat; mask: var(--sky-mask) 0 0 / 100% 100% no-repeat;
}
/* the sunrise on the summit, and three banks of mist along the cloud line */
.s7h-glow {
  position: absolute; left: calc(var(--sx) * 100%); top: calc(var(--sy) * 100%); width: 30%; aspect-ratio: 1; translate: -50% -40%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 222, 176, .5), rgba(255, 222, 176, .16) 55%, rgba(255, 222, 176, 0));
  mix-blend-mode: screen; opacity: .36;
}
.s7h-mist {
  position: absolute; top: calc((var(--sy) + var(--mh)) * 100% - 7%); height: 16%; width: 62%;
  background:
    radial-gradient(36% 46% at 30% 58%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 72%),     /* each ellipse is clear */
    radial-gradient(30% 40% at 55% 44%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 72%),    /* before the box's edge, */
    radial-gradient(30% 44% at 74% 60%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 72%);    /* so a bank never shows a seam */
  opacity: .7;
}
.s7h-mist.m1 { left: -6%; }
.s7h-mist.m2 { left: 44%; top: calc((var(--sy) + var(--mh)) * 100% - 3%); width: 56%; opacity: .55; }
.s7h-mist.m3 { left: 18%; top: calc((var(--sy) + var(--mh)) * 100% + 3%); width: 70%; height: 13%; opacity: .5; }

/* motion: the photo settles once, the glow breathes, the mist drifts (both paused off screen) */
html.fx-motion .s7h-photo { animation: s7h-settle 2.8s var(--ease) both; }
html.fx-motion .s7h-glow { animation: s7h-breathe 9s ease-in-out infinite alternate; }
html.fx-motion .s7h-mist { animation: s7h-drift 46s ease-in-out infinite alternate; }
html.fx-motion .s7h-mist.m2 { animation-duration: 58s; animation-direction: alternate-reverse; }
html.fx-motion .s7h-mist.m3 { animation-duration: 71s; animation-delay: -20s; }
.s7h.is-away :is(.s7h-glow, .s7h-mist), .s7h.is-away :is(.s7h-iot-edge, .s7h-iot-glow)::before { animation-play-state: paused; }
@keyframes s7h-settle { from { transform: scale(1.045); } to { transform: none; } }
@keyframes s7h-breathe { from { opacity: .24; } to { opacity: .48; } }
@keyframes s7h-drift { from { transform: translateX(-9%); } to { transform: translateX(9%); } }
/* calm (app/fx.js): the photo does not settle and the mist does not drift (hero.js leaves the photo still too); the
   glow breathes, and the IoT button's edge keeps turning its colours */
html.fx-calm :is(.s7h-photo, .s7h-mist) { animation: none; }

/* ── the words, in the optical middle of the screen, on a soft pool of light ── */
.s7h-copy {
  grid-row: 2; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
  padding-inline: var(--s7-gutter);
}
.s7h-copy > * { max-width: 100%; box-sizing: border-box; }   /* large text (Android font size): nothing wider than the screen */
/* round three: in place of the earlier full-width wash (clear above the words, near-white from them down), a pool of
   light behind the words alone: as wide as
   the headline's longest line plus --veil-x each side and as tall as the words plus --veil-y above and below, at its
   strongest (--veil-a) behind the lines and gone by its edge, so the snow, rock and sky show all round the words.
   --veil-a is about the least that, with the soft halo each line carries (text-shadow, below: light only right behind
   the letters), keeps the headline, the IoT line and "AI" / "IoT" at WCAG AA over the darkest rock behind them. */
.s7h-copy::before {
  --veil-x: clamp(56px, 13vw, 240px); --veil-y: clamp(56px, 10vh, 120px); --veil-a: .5;
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; pointer-events: none;
  width: calc(var(--words-w) + 2 * var(--veil-x)); height: calc(100% + 2 * var(--veil-y)); translate: -50% -50%;
  background: radial-gradient(closest-side,
    rgba(var(--veil), var(--veil-a)) 0, rgba(var(--veil), calc(var(--veil-a) * .96)) 50%,
    rgba(var(--veil), calc(var(--veil-a) * .62)) 74%, rgba(var(--veil), calc(var(--veil-a) * .22)) 90%, rgba(var(--veil), 0) 100%);
}
/* the tag chip */
.s7h-first {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 9px; min-height: 34px; padding-block: 7px; box-sizing: border-box; margin: 0 0 clamp(14px, 2.2vh, 22px); padding: 0 15px;
  border-radius: 999px; background: rgba(255, 255, 255, .74); border: 1px solid rgba(0, 57, 108, .12);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  font: 600 13.5px/1.2 var(--figtree); letter-spacing: -.003em; color: var(--navy);
}
.s7h-first > span { white-space: nowrap; }   /* each beat stays whole; with large text the chip wraps between them */
.s7h-pin { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(247, 183, 68, .28); }
/* the owner's three beats, a small steel-blue dot between each (the gap each side is the chip's own) */
.s7h-sep { flex: none; width: 3px; height: 3px; border-radius: 50%; background: #5D7E9B; }
/* the opening line: Figtree bold, tight, the emphasis in
   Newsreader italic */
.s7h .s7h-h1 {
  margin: 0; max-width: min(17.2em, 100%); text-wrap: balance;
  font: 700 calc(clamp(34px, min(5.1vw, 8.2vh), 76px) * var(--fit, 1))/1.02 var(--figtree); letter-spacing: -.035em; color: var(--navy);
  text-shadow: 0 0 22px rgba(var(--veil), .7), 0 0 60px rgba(var(--veil), .45);   /* the halo (see .s7h-copy::before) */
}
.s7h .s7h-h1 em { font-family: var(--display); font-style: italic; font-weight: 500; letter-spacing: -.01em; padding-right: .03em; }
/* the IoT line: the same type, a lighter weight */
.s7h-sub {
  margin: clamp(14px, 2.2vh, 22px) 0 0; max-width: 40em; text-wrap: balance;
  font: 500 clamp(16px, 1.45vw, 21px)/1.45 var(--figtree); letter-spacing: -.012em; color: var(--navy);
  text-shadow: 0 0 14px rgba(var(--veil), .9), 0 0 34px rgba(var(--veil), .5);
}
/* "AI & IoT" in neon (owner's note, 2026-09-29): the brand's gold, light gold, white and ice travelling slowly through
   the letters, on a small navy highlight, because neon needs a dark ground and this line sits on the light behind the
   words (and gold is never text on a light ground). Since 2026-09-30 it is app/neon.css (.neon-ai-pill, .neon-ai), the
   one definition every place that names the feature shares: the colours, the two blurred glows, the timing, and the
   rule that it only moves while it is on screen. Here only its place in the sentence. The same letters light the
   button to the IoT & AI page (below). The highlight is not a link, so it doesn't look like one; the button after
   the sentence is the one that looks pressable. */
.s7h-keep { white-space: nowrap; }   /* the highlight and its full stop, never split across two lines */
.s7h .neon-ai-pill { margin: 0 .08em 0 .04em; }

/* the button to the IoT & AI page (owner's note: the page left the header for this line). A navy pill with a
   gold-and-ice edge that slowly turns and glows (the same edge blurred, behind it), the neon letters and a
   gold arrow, as on the Commercial door. Its words, "See what's coming", are the page's own (iot.html: nothing
   there is live yet) and don't repeat the highlight's; a hidden " with IoT & AI" names the page for a screen reader.
   The turning (2026-09-30): the edge and the glow are each a pill-shaped window (.s7h-iot-edge, .s7h-iot-glow, overflow
   clipped to the pill) onto a square of the edge's colours, centred on the pill, that rotates. A conic gradient
   turned about its centre is the same picture as the gradient started at a new angle, so it looks as the earlier
   animated angle did, but a rotation is something the GPU does on its own: no repaint and no main-thread work per
   frame (the animated angle, an @property, was repainted on the main thread at the screen's refresh rate).
   The edge's width: the pill itself has no border now, so the windows can cover it exactly (inset 0); the fill carries
   the 1.5px transparent border instead and paints only inside it, so each browser rounds the ring exactly as it
   rounded the pill's own border before (Chrome draws 1px). The padding is the old 4px / 16px plus that 1px. */
.s7h-iot {
  /* two gold and two ice points, opposite each other, so the glow sits evenly round the pill as they turn */
  --edge: conic-gradient(#F7B744, #FFD487, #FFFFFF, #BACEDF, #F7B744, #FFD487, #FFFFFF, #BACEDF, #F7B744);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; vertical-align: middle;
  height: 38px; margin: 0 0 0 .45em; padding: 0 5px 0 17px; border-radius: 999px;
  text-decoration: none; text-shadow: none; white-space: nowrap;
  font: 700 15px/1 var(--figtree); letter-spacing: -.005em;
  box-shadow: 0 10px 24px -12px rgba(0, 42, 80, .8);
  transition: transform 220ms var(--ease), box-shadow 220ms ease;
}
.s7h-iot::before {   /* the fill, inside the edge */
  content: ""; position: absolute; inset: 0; z-index: -1; border: 1.5px solid transparent; border-radius: inherit;
  background: var(--navy) padding-box;
}
.s7h-iot-edge, .s7h-iot-glow { position: absolute; border-radius: inherit; overflow: hidden; pointer-events: none; }
.s7h-iot-edge { inset: 0; z-index: -3; }   /* the edge: the whole pill, under everything */
.s7h-iot-glow {   /* the glow: the edge again, a little wider, blurred, over the edge and under the fill */
  inset: -1px; z-index: -2; filter: blur(11px); opacity: .6; transition: opacity 220ms ease;
}
/* the turning square: 120% of the pill's width on each side, so it covers the pill (whose diagonal is barely longer
   than its width) at every angle; margin-top is a share of the width too, so it stays centred */
.s7h-iot-edge::before, .s7h-iot-glow::before {
  content: ""; position: absolute; left: -10%; top: 50%; width: 120%; aspect-ratio: 1; margin-top: -60%; background: var(--edge);
}
.s7h-iot-arr { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); transition: transform 220ms var(--ease); }
.s7h-iot-arr svg { width: 15px; height: 15px; }
.s7h-iot:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(0, 42, 80, .85); }
.s7h-iot:hover .s7h-iot-glow { opacity: 1; }
.s7h-iot:hover .s7h-iot-arr { transform: translateX(2px); }
.s7h-iot:active { transform: none; }
.s7h-iot:focus-visible { outline: 3px solid var(--navy) !important; outline-offset: 3px; }
html.fx-motion :is(.s7h-iot-edge, .s7h-iot-glow)::before { animation: s7h-turn 7s linear infinite; }
/* held while a form, the booking sheet or a dialog covers the page: the blurred scrim over it would re-blur every turn */
:is(html.f7-open, body.locked) :is(.s7h-iot-edge, .s7h-iot-glow)::before { animation-play-state: paused; }
@keyframes s7h-turn { to { transform: rotate(360deg); } }
html.fx-reduce :is(.s7h-iot, .s7h-iot-arr, .s7h-iot-glow) { transition: none; }

/* ── a gap, then the question and the two doors, at the foot of the first screen ── */
.s7h-start {
  grid-row: 4; align-self: start; position: relative; z-index: 2; display: grid; justify-items: center; text-align: center;
  padding: 0 var(--s7-gutter) var(--foot-pad);
}
/* the soft light behind the doors (the owner: the doors keep their white ground, for contrast): the cloud sea's own
   run-out into the page ground does most of it; this evens it out where the photograph reaches down behind them */
.s7h-start::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -48px; bottom: -8px; width: min(100vw, 1240px); translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--wash), .72), rgba(var(--wash), .6) 55%, rgba(var(--wash), 0));
}
.s7h-ask { margin: 0 0 clamp(12px, 1.8vh, 18px); font: 500 clamp(15px, 1.2vw, 17px)/1.4 var(--font); color: var(--text); text-wrap: balance; }
.s7h-ask b { font-weight: 800; color: var(--navy); }

/* the doors: Residential and Commercial */
.s7h-doors { position: relative; display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
.s7h-door-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.s7h-door {
  box-sizing: border-box; width: clamp(200px, 19vw, 262px); height: var(--door-h); border-radius: calc(var(--door-h) / 2); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 9px 0 26px;
  font: 600 16px/1 var(--font); letter-spacing: -.005em;
  transition: transform 220ms var(--ease), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
.s7h-door.res { background: #fff; border-color: var(--mist); color: var(--navy); }
.s7h-door.com { background: var(--navy); color: #fff; }
.s7h-arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: transform 220ms var(--ease), background-color 220ms ease; }
.s7h-arrow svg { width: 18px; height: 18px; }
.s7h-door.res .s7h-arrow { background: var(--navy); color: #fff; }
.s7h-door.com .s7h-arrow { background: var(--gold); color: var(--navy); }
a.s7h-door:hover { transform: translateY(-2px); }
.s7h-door.res:hover { box-shadow: 0 18px 40px -18px rgba(138, 82, 0, .5); }      /* each door's hover shadow in its feature's colour */
.s7h-door.com:hover { box-shadow: 0 18px 40px -18px rgba(26, 77, 181, .7); }
a.s7h-door:hover .s7h-arrow { transform: translateX(3px); }
a.s7h-door:active { transform: translateY(0); box-shadow: none; }
a.s7h-door:focus-visible { outline: 3px solid var(--navy) !important; outline-offset: 4px; }   /* theme.css's gold ring is under 2:1 on the wash */
.s7h-note { margin: 0; max-width: 232px; font: 400 13px/1.5 var(--font); color: var(--charcoal); }
html.fx-reduce :is(.s7h-door, .s7h-arrow) { transition: none; }

/* portrait tablets: the portrait plate gives the words more width than a landscape screen of the same size */
@media (max-aspect-ratio: 9/10) and (min-width: 721px) { .s7h .s7h-h1 { font-size: calc(clamp(34px, 5.8vw, 62px) * var(--fit, 1)); } }
/* short laptop screens: the door notes drop here */
@media (max-height: 760px) and (min-width: 721px) {
  .s7h-note { display: none; }
  .s7h { --door-h: 58px; }
}
/* narrow tablets: the doors a little narrower */
@media (max-width: 900px) and (min-width: 721px) {
  .s7h-doors { gap: 12px; }
  .s7h-door { width: clamp(196px, 28vw, 240px); padding-left: 22px; }
}
/* phones: the doors stack; the summit sits under the whole header stack (its buttons run across the
   screen here), and the words keep some mountain above them, but never so much that a door falls below the first
   screen: once measured, the words start at the usual --clear (or the optical middle, if lower), raised as far as
   --fit needs to keep the question and the doors (--start-h, which ends --foot-pad above the bottom edge) on
   the first screen, and never higher than --floor, just under the buttons. The gap (--r3) then takes what's left. */
@media (max-width: 720px) {
  .s7h {
    --gap: 16px; --sum-y: calc(var(--s7-top) + var(--gap)); --foot-k: 28px;
    --clear: calc(var(--s7-top) + clamp(112px, 16vh, 170px)); --begin: 30px; --door-h: 56px; --door-gap: 10px;
    --foot-pad: 16px; --gap-max: max(var(--begin), 16svh);
    --floor: calc(var(--s7-top) + 30px); --copy-h: 250px; --start-h: 250px;
    --fit: calc(100svh - var(--copy-h) - var(--begin) - var(--start-h));
    --r1: max(var(--floor), min(max(var(--clear), calc(var(--mid) - var(--copy-h) / 2)), var(--fit)));
  }
  .s7h-copy::before { --veil-x: 36px; --veil-y: 64px; --veil-a: .56; }
  .s7h-start::before { top: -36px; width: 190vw; }
  .s7h-first { font-size: 12.5px; min-height: 32px; padding-block: 6px; padding: 0 13px; gap: 8px; }
  .s7h .s7h-h1 { font-size: calc(clamp(29px, 8.4vw, 40px) * var(--fit, 1)); line-height: 1.04; letter-spacing: -.03em; }
  .s7h-sub { font-size: 16px; }
  /* the IoT line wraps here, so the button takes a row of its own under it, centred, rather than landing on the
     second line against the highlight above it */
  .s7h-iot { display: flex; width: max-content; margin: 12px auto 0; }
  .s7h-ask { font-size: 15px; }
  .s7h-doors { flex-direction: column; align-items: stretch; gap: var(--door-gap); width: min(340px, 100%); }
  .s7h-door-wrap { width: 100%; }
  .s7h-door { width: 100%; padding-left: 24px; }
  .s7h-note { display: none; }
}
/* shorter phones (an iPhone 8 Plus at 414 × 736, many Androids at 360 × 740 or 411 × 731): everything under the
   words a little tighter, so --fit keeps more of the mountain above them */
@media (max-width: 720px) and (max-height: 760px) {
  .s7h { --begin: 18px; --door-h: 50px; --door-gap: 8px; --foot-pad: 14px; }
  .s7h-first { margin-bottom: 10px; }
  .s7h-sub { margin-top: 10px; font-size: 15px; line-height: 1.4; }
  .s7h-iot { margin-top: 10px; }
  .s7h-ask { margin-bottom: 10px; }
}
/* short phones (an iPhone SE or 8 at 375 × 667, most Androids at 360 × 640): a slightly smaller headline too, so the
   words can still sit about the middle of the screen with the doors on it */
@media (max-width: 720px) and (max-height: 700px) {
  .s7h .s7h-h1 { font-size: calc(clamp(26px, 7.5vw, 34px) * var(--fit, 1)); }
}
@media (max-width: 359px) {
  .s7h-first { font-size: 11.5px; padding: 0 11px; gap: 7px; }
}