/* ═══════════════════════════════════════════════
   GLOBAL-TEK CANADA
   Palette derived from the logo: navy, steel, maple.
   Type: Archivo (display) / IBM Plex Sans (body) / Plex Mono (data)
   ═══════════════════════════════════════════════ */

:root{
  --ink:        #0E1B3D;
  --navy:       #1B2F63;
  --navy-soft:  #2A417C;
  --steel:      #6F7C8C;
  --steel-line: #C9D1DA;
  --panel:      #E6EAEF;
  --porcelain:  #F6F8FA;
  --white:      #FFFFFF;
  --maple:      #D22630;
  --maple-deep: #A81C25;

  --f-disp: 'Archivo', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1240px;
  --pad:  clamp(20px, 4vw, 48px);
  --sec:  clamp(72px, 9vw, 132px);

  --r: 3px;                     /* near-square: this is equipment, not an app */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ─── reset ─── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* The header is sticky, so every in-page anchor has to clear it or the
     section title lands underneath the bar. scroll-padding-top handles the
     whole document at once — native #hash jumps, scrollIntoView, and the
     smooth scroll above — so no element needs its own scroll-margin.
     script.js keeps --head-h and --secnav-h in sync with the real measured
     heights across breakpoints; the fallbacks below cover the first paint
     before that measurement runs, and the no-JS case. */
  scroll-padding-top:calc(var(--head-h, 90px) + var(--secnav-h, 0px) + 18px);
}
body{
  margin:0;
  background:var(--porcelain);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2.5px solid var(--maple);
  outline-offset:3px;
}

.leaf{ color:var(--maple); }

/* ─── shared type ─── */
.eyebrow{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:22px;
}
.eyebrow span{ color:var(--maple); }
.eyebrow--dark{ color:var(--steel); }

.h2{
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 108;
  font-weight:700;
  font-size:clamp(28px,3.3vw,44px);
  line-height:1.1;
  letter-spacing:-.018em;
}
.h2--wide{ font-variation-settings:'wdth' 115; }
.h2--light{ color:var(--white); }

.sec-head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head__note{
  margin-top:18px; color:var(--steel); max-width:56ch;
  text-wrap:pretty;
}
.sec-head--center .sec-head__note{ margin-inline:auto; }

/* ─── buttons ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:12.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
  padding:16px 26px;
  border:1.5px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--solid{ background:var(--maple); color:#fff; border-color:var(--maple); }
.btn--solid:hover{ background:var(--maple-deep); border-color:var(--maple-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:inherit; border-color:currentColor; opacity:.85; }
.btn--ghost:hover{ opacity:1; transform:translateY(-2px); }
.btn--sm{ padding:11px 18px; font-size:11.5px; }
.btn--full{ width:100%; }

/* ═══════════ UTILITY BAR ═══════════ */
.utility{
  background:var(--ink);
  color:rgba(255,255,255,.7);
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.05em;
}
.utility__in{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; min-height:40px; flex-wrap:wrap;
}
.utility__region{ display:flex; align-items:center; gap:8px; }
.utility__contact{ display:flex; align-items:center; gap:12px; }
.utility a{ text-decoration:none; }
.utility a:hover{ color:#fff; }

/* ═══════════ HEADER ═══════════ */
.head{
  position:sticky; top:0; z-index:100;
  /* fully opaque: the logo file has a baked-in white background, so any
     translucency here makes it read as a brighter box around the mark */
  background:var(--white);
  border-bottom:1px solid var(--steel-line);
}
.head__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:90px;
}
.head__brand{ display:block; flex:none; }
.head__brand img{ height:50px; width:auto; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav > a:not(.btn){
  font-size:14.5px; font-weight:500; text-decoration:none;
  color:var(--navy);
  position:relative; padding-block:6px;
}
.nav > a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1.5px; background:var(--maple);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav > a:not(.btn):hover::after{ transform:scaleX(1); }
/* the site is page-driven now, so the header has to say where you are */
.nav > a:not(.btn)[aria-current="page"]{ color:var(--ink); font-weight:600; }
.nav > a:not(.btn)[aria-current="page"]::after{ transform:scaleX(1); }

.burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:10px; cursor:pointer;
}
.burger span{
  width:24px; height:2px; background:var(--navy);
  transition:transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ═══════════ SECTION NAV ═══════════
   An in-page rail for the two long pages. It sticks directly beneath the
   header (never over it — hence top:var(--head-h) rather than top:0) and
   the active link is driven by the scroll spy in script.js. Pages without
   a .secnav are unaffected: the JS is a no-op and --secnav-h stays 0. */
.secnav{
  position:sticky;
  top:var(--head-h, 90px);
  z-index:90;
  background:var(--white);
  border-bottom:1px solid var(--steel-line);
}
.secnav__in{
  display:flex; align-items:center;
  /* on narrow screens the rail scrolls sideways rather than wrapping into a
     second row, which would change the sticky offset mid-scroll */
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.secnav__in::-webkit-scrollbar{ display:none; }

.secnav a{
  position:relative; flex:none;
  padding:15px 0; margin-right:clamp(22px,3vw,38px);
  font-family:var(--f-mono);
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#6C7789; text-decoration:none; white-space:nowrap;
  transition:color .25s var(--ease);
}
.secnav a:last-child{ margin-right:0; }
.secnav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--maple);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.secnav a:hover{ color:var(--ink); }
.secnav a.is-active{ color:var(--ink); }
.secnav a.is-active::after{ transform:scaleX(1); }

/* ═══════════ HERO ═══════════
   Layered, back to front:
     0  the photograph + its scrims
     1  engineering grid and film grain
     2  the technical callout
     3  the type and the bottom rail                                   */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:var(--ink);          /* what the scrims resolve to */
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:620px;
  min-height:clamp(600px, 80svh, 860px);
}

/* ─── the photographic field ─── */
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:57% 44%;        /* keeps the operator and machine in frame */
  /* pulled down and de-saturated so white type holds over it without a
     heavy blanket scrim flattening the photograph */
  filter:grayscale(.34) contrast(1.1) saturate(.95) brightness(.84);
  animation:heroSettle 2.4s var(--ease) both;
}
/* two scrims, not one: the horizontal pass clears the type column, the
   vertical pass dissolves the photo into flat ink at both edges so the
   section reads as a field rather than a cropped picture */
.hero__scrim{
  position:absolute; inset:0;
  background:
    /* vignette — pulls the corners down so the stainless in the middle
       carries the eye instead of the edges */
    radial-gradient(120% 90% at 62% 44%,
      rgba(14,27,61,0) 38%, rgba(14,27,61,.45) 100%),
    linear-gradient(90deg,
      var(--ink) 0%,
      rgba(14,27,61,.95) 25%,
      rgba(14,27,61,.74) 45%,
      rgba(14,27,61,.34) 68%,
      rgba(14,27,61,.20) 87%,
      rgba(14,27,61,.40) 100%),
    linear-gradient(180deg,
      rgba(14,27,61,.60) 0%,
      rgba(14,27,61,.06) 20%,
      rgba(14,27,61,.06) 46%,
      rgba(14,27,61,.78) 84%,
      var(--ink) 100%);
}

/* engineering grid — texture, not lattice */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:96px 96px;
  pointer-events:none;
}
/* fine grain, so the field reads as a surface rather than a fill */
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:.05;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* ─── the type column ─── */
.hero__in{
  position:relative; z-index:3;
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(64px,8vw,110px);
}
/* eyebrow sits on a short maple rule — the one saturated mark up here.
   inline-block, not a flex item: flex would split the text into separate
   items and wrap each one independently */
.hero__eyebrow{
  color:rgba(255,255,255,.62);
  margin-bottom:clamp(24px,3vw,38px);
}
.hero__eyebrow::before{
  content:''; display:inline-block; vertical-align:middle;
  width:clamp(22px,3vw,46px); height:1px;
  background:var(--maple);
  margin-right:14px; margin-bottom:3px;
}

/* One family, two extremes of its variable axes. The weight and width jump
   between the lines is the whole idea — it reads as a considered pairing
   without loading a second typeface that would fight the wordmark. */
.hero__h1{
  font-family:var(--f-disp);
  font-size:clamp(36px,5.2vw,68px);
  line-height:1.03;
  max-width:15.5em;
  /* the type sits directly on the photograph; a low, wide shadow lifts it
     off the stainless without reading as a drop shadow */
  text-shadow:0 2px 34px rgba(6,12,28,.5);
}
.hero__line{ display:block; }
.hero__line--lead{
  font-variation-settings:'wdth' 113;
  font-weight:800;
  letter-spacing:-.032em;
}
.hero__line--sub{
  font-variation-settings:'wdth' 98;
  font-weight:250;
  letter-spacing:-.018em;
  color:rgba(255,255,255,.8);
}
/* the gap sits between the lines, not on one of them, so the two can be
   reordered without the spacing following the wrong one */
.hero__line + .hero__line{ margin-top:.08em; }
/* the accent is a rule, not a second colour — the maple stays a signal */
.hero__h1 em{
  font-style:normal;
  position:relative;
  white-space:nowrap;
}
.hero__h1 em::after{
  content:''; position:absolute;
  left:0; right:0;
  bottom:-.04em;                 /* no descender in this line to clear */
  height:.055em;
  background:var(--maple);
  transform:scaleX(0); transform-origin:left;
  animation:heroRule .9s var(--ease) .75s both;
}

.hero__lede{
  margin-top:clamp(24px,2.6vw,34px);
  max-width:46ch;
  color:rgba(255,255,255,.72);
  font-size:clamp(15.5px,1.1vw,17px);
  text-wrap:pretty;
}
.hero__actions{
  margin-top:clamp(30px,3.4vw,46px);
  display:flex; gap:14px; flex-wrap:wrap;
}
.hero__actions .btn--ghost{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
.hero__actions .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); }

/* ─── technical callout on the photograph ─── */
.hero__note{
  position:absolute; z-index:2;
  right:clamp(28px,4.5vw,72px);
  top:30%;
  margin:0;
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.24);
  border-left:2px solid var(--maple);
  background:rgba(14,27,61,.4);
  backdrop-filter:blur(9px);
  animation:heroFade 1s var(--ease) 1s both;
}
/* leader line back toward the machine, with a survey dot at its end */
.hero__leader{
  position:absolute; right:100%; top:50%;
  width:clamp(34px,5vw,78px); height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55));
}
.hero__leader::before{
  content:''; position:absolute; left:0; top:-2.5px;
  width:6px; height:6px; border-radius:50%;
  border:1px solid rgba(255,255,255,.65);
}
.hero__note b{
  display:block;
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 104;
  font-weight:700; font-size:15px; letter-spacing:-.01em;
}
.hero__note span{
  display:block; margin-top:5px;
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ─── bottom rail ─── */
.hero__rail{
  position:relative; z-index:3;
  border-top:1px solid rgba(255,255,255,.15);
  background:rgba(14,27,61,.42);
  backdrop-filter:blur(8px);
  animation:heroFade 1s var(--ease) .9s both;
}
.hero__rail-in{ display:flex; align-items:center; }
.hero__rail-in p{
  flex:1;
  padding:17px 0 17px clamp(14px,2vw,26px);
  border-left:1px solid rgba(255,255,255,.13);
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
}
.hero__rail-in p:first-child{ border-left:0; padding-left:0; }
.hero__rail-in p span{ color:var(--maple); margin-right:9px; }
.hero__scroll{
  flex:0 0 auto !important;
  color:rgba(255,255,255,.45) !important;
  display:flex; align-items:center; gap:10px;
}
.hero__scroll::after{
  content:''; width:1px; height:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation:heroScroll 1.9s var(--ease) infinite;
}

@keyframes heroSettle{
  from{ transform:scale(1.07); }
  to  { transform:scale(1); }
}
@keyframes heroFade{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@keyframes heroRule{ to{ transform:scaleX(1); } }
@keyframes heroScroll{
  0%  { transform:translateY(-5px); opacity:0; }
  40% { opacity:1; }
  100%{ transform:translateY(7px);  opacity:0; }
}
/* staged entrance, top of the stack down */
.hero__in > *{ animation:heroFade .85s var(--ease) both; }
.hero__eyebrow{ animation-delay:.08s; }
.hero__h1     { animation-delay:.2s;  }
.hero__lede   { animation-delay:.36s; }
.hero__actions{ animation-delay:.48s; }

/* ─── SIGNATURE: the machine data plate ─── */
.plate{
  position:relative;
  margin-bottom:calc(var(--sec) * -.42);
  border-radius:var(--r);
  padding:clamp(24px,3vw,34px) clamp(20px,3vw,38px) clamp(20px,2.4vw,28px);
  color:var(--ink);
  background:var(--porcelain);
  border:1px solid #D2D9E1;
  box-shadow:0 18px 44px -28px rgba(14,27,61,.45);
  z-index:3;
}
.plate__rivet{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:#C2CAD4;
}
.plate__rivet--tl{ top:12px; left:12px; }
.plate__rivet--tr{ top:12px; right:12px; }
.plate__rivet--bl{ bottom:12px; left:12px; }
.plate__rivet--br{ bottom:12px; right:12px; }

.plate__stamp{
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#67727F;
  padding-bottom:16px;
  margin-bottom:22px;
  border-bottom:1px solid rgba(0,0,0,.13);
}
.plate__grid{
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.4vw,30px);
}
.plate__cell{ position:relative; padding-left:clamp(16px,2vw,26px); }
.plate__cell:first-child{ padding-left:0; }
.plate__cell:not(:first-child)::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px;
  width:1px; background:rgba(0,0,0,.14);
}
.plate__cell dt{
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#646F7D;
  margin-bottom:8px;
}
.plate__cell dd{
  margin:0;
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 100;
  font-weight:600;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1;
  letter-spacing:-.015em;
  color:var(--ink);
}
.plate__cell dd span{
  font-family:var(--f-mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.04em;
  margin-left:5px;
  color:#646F7D;
}
.plate__cell p{
  margin-top:9px;
  font-size:12.5px;
  color:#646F7D;
  line-height:1.4;
}

/* ═══════════ WHAT WE DO ═══════════ */
.what{
  padding-top:calc(var(--sec) * 1.05);
  padding-bottom:var(--sec);
  background:var(--porcelain);
}
.what__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px);
  align-items:start;
}
.what__body p + p{ margin-top:18px; }
.what__body p{ color:#48536A; font-size:clamp(15.5px,1.1vw,17px); }

/* two purchase lanes */
.paths{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--steel-line);
  border:1px solid var(--steel-line);
  border-radius:var(--r); overflow:hidden;
}
.paths li{ background:var(--white); padding:clamp(20px,2.2vw,26px); }
/* .what__body p sets colour and size, so match its specificity here */
.what__body .paths__tag{
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--maple); margin-bottom:14px;
}
.what__body .paths li:last-child .paths__tag{ color:#646F7D; }
.paths h3{
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 104;
  font-weight:700; font-size:17.5px;
  letter-spacing:-.01em; margin-bottom:10px;
}
/* the lane copy sits tighter than the intro paragraphs above it */
.what__body .paths li > p:last-child{
  margin-top:0; font-size:14px; color:#5A6577; line-height:1.55;
}

/* ═══════════ SUBPAGE HEAD ═══════════ */
/* same field as .hero so interior pages read as one site, minus the
   two-column figure — these pages lead with the product, not a photo */
.subhead{
  background:
    radial-gradient(118% 82% at 14% -6%, rgba(43,66,126,.62) 0%, rgba(43,66,126,0) 58%),
    var(--ink);
  color:#fff;
  padding-top:clamp(40px,5vw,64px);
  padding-bottom:0;
  position:relative;
  isolation:isolate;
}
.subhead::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:96px 96px;
  pointer-events:none;
}
.subhead__in{
  position:relative; z-index:1;
  max-width:min(var(--wrap), 900px);
  margin-inline:auto;
  padding-bottom:clamp(52px,6vw,84px);
}
.subhead .eyebrow{ color:rgba(255,255,255,.58); margin-bottom:24px; }
.subhead__h1{
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 108;
  font-weight:700;
  font-size:clamp(32px,3.5vw,50px);
  line-height:1.08;
  letter-spacing:-.022em;
}
.subhead__lede{
  margin-top:22px;
  max-width:52ch;
  color:rgba(255,255,255,.68);
  font-size:clamp(15.5px,1.1vw,17px);
  text-wrap:pretty;
}
.subhead__actions{ margin-top:clamp(28px,3vw,40px); display:flex; gap:14px; flex-wrap:wrap; }
/* the plate overhangs the next section, so it must clear the padding above */
.subhead__in + .wrap .plate{ margin-top:0; }
/* pages whose first section runs the full wrap need the head to share that
   left edge, or the h1 floats inboard of everything under it */
.subhead__in--wide{ max-width:var(--wrap); }

/* the quote page keeps the same ink field from head straight into the form,
   so the section below must not add its own top padding on top of the head's */
.subhead--flush + .quote{ padding-top:0; }
/* the process list follows a head that already carries the title and note */
.subhead + .proc{ padding-top:clamp(40px,5vw,64px); }

.crumb{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:26px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.crumb a{ text-decoration:none; color:rgba(255,255,255,.7); }
.crumb a:hover{ color:#fff; }
.crumb [aria-current]{ color:#fff; }

/* ═══════════ MACHINE CARDS ═══════════ */
.mgrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,28px);
}
.mcard{
  display:flex; flex-direction:column;
  height:100%;
  position:relative;
  background:var(--white);
  border:1px solid var(--steel-line);
  border-radius:var(--r);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease),
             transform .25s var(--ease);
}
a.mcard:hover{
  border-color:var(--navy-soft);
  box-shadow:0 20px 40px -30px rgba(14,27,61,.55);
  transform:translateY(-3px);
}
.mcard__badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--f-mono);
  font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--steel-line);
  color:#5A6577;
}
.mcard__badge--live{
  background:var(--maple); border-color:var(--maple); color:#fff;
}
.mcard__pic{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--panel) 0%, #F3F5F8 55%, var(--panel) 100%);
  border-bottom:1px solid var(--steel-line);
  aspect-ratio:4/3;
  padding:clamp(16px,2vw,26px);
  /* flex items default to min-height:auto, which would let the tall product
     PNG override the ratio and stretch the card */
  flex:none; min-height:0; overflow:hidden;
}
.mcard__pic img{
  max-height:100%; width:auto; object-fit:contain;
  mix-blend-mode:multiply;
}
/* placeholder art for a model that has no photography yet */
.mcard__pic--empty{
  background:
    repeating-linear-gradient(135deg,
      rgba(14,27,61,.035) 0 2px, transparent 2px 11px),
    var(--panel);
}
.mcard__mark{
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 118;
  font-weight:800;
  font-size:clamp(34px,4vw,52px);
  letter-spacing:.04em;
  color:rgba(14,27,61,.13);
}
.mcard__body{
  display:flex; flex-direction:column;
  flex:1;
  padding:clamp(20px,2.2vw,26px);
}
.mcard__kicker{
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#646F7D; margin-bottom:12px;
}
.mcard__name{
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 106;
  font-weight:700; font-size:22px;
  line-height:1.15; letter-spacing:-.015em;
  margin-bottom:12px;
}
.mcard__desc{ font-size:14px; color:#5A6577; line-height:1.55; }
.mcard__stats{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--steel-line);
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.06em;
  color:#646F7D;
}
.mcard__stats b{ color:var(--ink); font-weight:600; }
.mcard__go{
  margin-top:auto; padding-top:20px;
  font-family:var(--f-mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--maple);
}
.mcard__go::after{ content:' \2192'; }
.mcard__go--muted{ color:#646F7D; }
.mcard__go--muted::after{ content:none; }
.mcard__go--muted a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.mcard__go--muted a:hover{ color:var(--maple); }
/* the placeholders are deliberately quieter than the live model */
.mcard--soon{ background:#FCFDFE; }
.mcard--soon .mcard__name{ color:#646F7D; }

.equip__more{ margin-top:clamp(32px,4vw,48px); }

.range{ padding-block:var(--sec); background:var(--white); border-block:1px solid var(--steel-line); }
.range__foot{
  margin-top:clamp(32px,4vw,48px);
  color:var(--steel); font-size:14.5px; max-width:58ch;
}
.range__foot a{ color:var(--navy); text-underline-offset:3px; }
.range__foot a:hover{ color:var(--maple); }

/* ═══════════ NEXT-UP STRIP ═══════════ */
.nextup{ padding-block:clamp(52px,6vw,86px); background:var(--porcelain); }
.nextup__in{
  display:flex; justify-content:space-between; align-items:end;
  gap:clamp(24px,4vw,56px); flex-wrap:wrap;
}
.nextup__act{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.nextup__act p{ color:var(--steel); font-size:14.5px; max-width:32ch; }
.nextup__btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* ═══════════ HOME DIRECTORY ═══════════
   The detail sections live on their own pages, so the home page needs a
   second, larger way into them than the header links alone. */
.hub{
  padding-block:var(--sec);
  background:var(--white);
  border-block:1px solid var(--steel-line);
}
.hub__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--steel-line);
  border:1px solid var(--steel-line);
  border-radius:var(--r); overflow:hidden;
}
.hub__card{
  display:flex; flex-direction:column; height:100%;
  background:var(--white);
  padding:clamp(26px,3vw,40px);
  text-decoration:none; color:inherit;
  transition:background .25s var(--ease);
}
.hub__card:hover{ background:var(--porcelain); }
.hub__num{
  font-family:var(--f-mono);
  font-size:11.5px; letter-spacing:.16em;
  color:var(--maple); margin-bottom:20px;
}
.hub__card h3{
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 106;
  font-weight:700; font-size:clamp(20px,1.7vw,24px);
  letter-spacing:-.015em; margin-bottom:12px;
}
.hub__card > p:not(.hub__num):not(.hub__go){
  font-size:14.5px; color:#5A6577; line-height:1.55;
}
.hub__go{
  margin-top:auto; padding-top:24px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--maple);
}
/* the arrow slides on hover, so it needs to be its own inline box */
.hub__go::after{
  content:'\2192'; display:inline-block; margin-left:8px;
  transition:transform .25s var(--ease);
}
.hub__card:hover .hub__go::after{ transform:translateX(4px); }

/* ═══════════ EQUIPMENT VIEWER ═══════════ */
.equip{
  padding-block:var(--sec);
  background:var(--white);
  border-block:1px solid var(--steel-line);
}
.viewer{
  display:grid;
  grid-template-columns:1.45fr .55fr;
  gap:clamp(24px,3.4vw,48px);
  align-items:stretch;
}
.viewer__stage{
  position:relative;
  background:
    linear-gradient(160deg,var(--panel) 0%, #F3F5F8 55%, var(--panel) 100%);
  border:1px solid var(--steel-line);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,3vw,44px);
  min-height:440px;
}
.viewer__stage img{
  max-height:520px; width:auto; object-fit:contain;
  /* product shots ship on white — multiply drops the box out */
  mix-blend-mode:multiply;
  transition:opacity .3s var(--ease);
}
.viewer__stage.is-swap img{ opacity:0; }
.viewer__tag{
  position:absolute; left:18px; bottom:16px;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel);
}
.viewer__side{ display:flex; flex-direction:column; }
.viewer__label{
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); margin-bottom:16px;
}
.viewer__thumbs{ display:flex; flex-direction:column; gap:10px; }
.thumb{
  display:flex; align-items:center; gap:14px;
  background:var(--white);
  border:1px solid var(--steel-line);
  border-radius:var(--r);
  padding:8px 14px 8px 8px;
  cursor:pointer; text-align:left;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.thumb img{ width:46px; height:52px; object-fit:contain; mix-blend-mode:multiply; }
.thumb span{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel);
}
.thumb:hover{ border-color:var(--steel); }
.thumb.is-on{ border-color:var(--maple); background:#FDF4F4; }
.thumb.is-on span{ color:var(--maple); font-weight:600; }
.viewer__note{
  margin-top:auto; padding-top:22px;
  font-size:14px; color:#5A6577; line-height:1.5;
  border-top:1px solid var(--steel-line);
}

/* ═══════════ SPECS ═══════════ */
.specs{
  padding-block:var(--sec);
  background:var(--navy);
  color:#fff;
}
.specs__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(34px,5vw,80px);
  align-items:start;
}
.specs__lead .eyebrow{ color:rgba(255,255,255,.6); }
.specs__lead p{
  margin-block:22px 32px;
  color:rgba(255,255,255,.72);
  max-width:42ch;
}
.specs__table table{
  width:100%; border-collapse:collapse;
  font-family:var(--f-mono); font-size:13.5px;
}
.specs__table tr{ border-bottom:1px solid rgba(255,255,255,.15); }
.specs__table tr:first-child{ border-top:1px solid rgba(255,255,255,.15); }
.specs__table th{
  text-align:left; font-weight:400;
  color:rgba(255,255,255,.6);
  padding:15px 0;
  letter-spacing:.03em;
}
.specs__table td{
  text-align:right; font-weight:500; color:#fff; padding:15px 0;
}
.specs__foot{
  margin-top:20px; font-size:12px; line-height:1.5;
  color:rgba(255,255,255,.5); max-width:52ch;
}

/* ═══════════ BAND ═══════════ */
.band{
  position:relative;
  min-height:clamp(240px,30vw,340px);
  display:flex; align-items:center;
  overflow:hidden;
}
.band > img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.band > img{ filter:grayscale(.55) contrast(1.05); }
.band__veil{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(14,27,61,.95) 0%, rgba(14,27,61,.78) 100%);
}
.band__in{ position:relative; color:#fff; }
.band__kicker{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:18px;
}
.band__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap;
  column-gap:clamp(20px,2.6vw,38px); row-gap:6px;
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 105;
  font-weight:600;
  font-size:clamp(18px,2.2vw,29px);
  line-height:1.3;
}
/* dot travels with its item, so it can never orphan on a new line */
.band__list li{ display:flex; align-items:center; gap:clamp(20px,2.6vw,38px); }
.band__list li:not(:last-child)::after{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--maple); flex:none;
}

/* ═══════════ PROCESS ═══════════ */
.proc{ padding-block:var(--sec); background:var(--porcelain); }
.proc__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--steel-line);
  border:1px solid var(--steel-line);
  border-radius:var(--r); overflow:hidden;
}
.proc__list li{
  background:var(--white);
  padding:clamp(24px,2.8vw,36px);
}
.proc__num{
  font-family:var(--f-mono);
  font-size:11.5px; letter-spacing:.16em;
  color:var(--maple); margin-bottom:20px;
}
.proc__list :is(h2,h3){
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 104;
  font-weight:700; font-size:19px;
  letter-spacing:-.01em; margin-bottom:12px;
}
.proc__list li > p:last-child{
  font-size:14.5px; color:#5A6577; line-height:1.55;
}
.proc__opt{
  font-family:var(--f-mono);
  font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:#5A6577;
  border:1px solid var(--steel-line);
  border-radius:999px;
  padding:3px 8px;
  margin-left:8px;
  vertical-align:middle;
  white-space:nowrap;
}

/* ═══════════ QUOTE ═══════════ */
.quote{ padding-block:var(--sec); background:var(--ink); color:#fff; }
.quote__grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(34px,5vw,74px);
  align-items:start;
}
.quote__copy .eyebrow{ color:rgba(255,255,255,.6); }
.quote__copy > p{
  margin-top:22px; color:rgba(255,255,255,.72); max-width:40ch;
}
.quote__copy a{ color:#fff; text-underline-offset:3px; }
.quote__pic{
  margin:34px 0 0; border-radius:var(--r); overflow:hidden;
}
.quote__pic img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
/* the quote page leads with the head, so the copy column carries the
   reach-us detail instead of repeating the title */
.quote--page .quote__pic{ margin-top:28px; }
.qcontact{ margin:0; display:grid; gap:1px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r); overflow:hidden; }
.qcontact > div{ background:var(--ink); padding:16px 20px; }
.qcontact dt{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:7px;
}
.qcontact dd{ margin:0; font-size:14.5px; color:#fff; line-height:1.5; }
.qcontact dd a{ color:#fff; text-decoration:none; }
.qcontact dd a:hover{ text-decoration:underline; text-underline-offset:3px; }

.form{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  padding:clamp(24px,3vw,40px);
}
.form__row{ margin-bottom:18px; }
.form__two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form label{
  display:block;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-bottom:9px;
}
.form input,.form select,.form textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);
  color:#fff;
  font-family:var(--f-body); font-size:15px;
  padding:13px 14px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.form textarea{ resize:vertical; }
.form select{
  appearance:none; -webkit-appearance:none;
  padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23D22630' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
}
.form select option{ color:#111; background:#fff; }
.form input::placeholder,.form textarea::placeholder{ color:rgba(255,255,255,.36); }
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--maple); background:rgba(255,255,255,.1);
}
.form .btn{ margin-top:8px; }
.form__ok{
  margin-top:16px; font-family:var(--f-mono); font-size:12.5px;
  color:#7FE0A8; letter-spacing:.04em;
}
.form__err{
  margin-top:16px; font-family:var(--f-mono); font-size:12.5px;
  line-height:1.5; letter-spacing:.04em;
  color:#FF9AA0;              /* 6.4:1 on --ink, unlike the brand maple */
}
.form__fine{
  margin-top:16px; font-size:11.5px; line-height:1.5;
  color:rgba(255,255,255,.55);
}
.form button[type="submit"][disabled]{ opacity:.6; cursor:progress; }

/* ═══════════ FOOTER ═══════════ */
.foot{ background:var(--ink); color:rgba(255,255,255,.66); padding-top:clamp(48px,6vw,72px); }
.foot__grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr;
  gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(36px,4vw,56px);
}
.foot__brand img{
  height:46px; width:auto; margin-bottom:20px;
  background:#fff; padding:9px 13px; border-radius:var(--r);
}
.foot__brand p{ max-width:34ch; font-size:14.5px; }
.foot__h{
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; margin-bottom:18px;
}
.foot__col a{
  display:block; text-decoration:none; font-size:14.5px;
  margin-bottom:11px;
}
.foot__col a:hover{ color:#fff; }
.foot__addr{ font-size:14.5px; margin-top:16px; line-height:1.5; }
.foot__base{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.13);
  font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.05em;
}

/* ═══════════ FILE DOWNLOAD ═══════════
   The spec sheet is a real file rather than another page, so the button
   says so with a downward arrow instead of the rightward one used for
   navigation elsewhere. */
.dl{ display:inline-flex; align-items:center; gap:11px; }
.dl::after{
  content:'\2193';
  font-size:1.05em; line-height:1;
  transition:transform .25s var(--ease);
}
.dl:hover::after{ transform:translateY(2px); }

/* two downloads sit side by side; they wrap rather than shrink so neither
   button ever gets narrower than its label */
.dl__row{ display:flex; gap:12px; flex-wrap:wrap; }
/* the ghost button sits on the ink panel here, so it borrows the light text
   colour rather than the dark one it uses on porcelain sections */
.dl__row .btn--ghost{ border-color:rgba(255,255,255,.42); }
.dl__row .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* weight, format and page count up front — someone on kitchen wifi wants to
   know what they are about to pull down */
.dl__meta{
  margin-top:12px;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ═══════════ REVEAL ═══════════
   Both variants are opt-in from script.js, so if the JS never runs the
   classes are never applied and every section renders at full opacity.
   Fires once per element — script.js unobserves on entry. */
.rise{ opacity:0; transform:translateY(22px); }
.rise.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* Card grids read better arriving in sequence than as one block. The
   parent stays put and only the children move, so this must not be
   combined with .rise on the same element or the fade doubles up. */
.rise--seq > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.rise--seq.is-in > *{ opacity:1; transform:none; }
/* 70ms apart — enough to read as deliberate, not enough to leave the last
   card visibly lagging behind the first */
.rise--seq.is-in > *:nth-child(2){ transition-delay:.07s; }
.rise--seq.is-in > *:nth-child(3){ transition-delay:.14s; }
.rise--seq.is-in > *:nth-child(4){ transition-delay:.21s; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  /* the vw-driven clamps bottom out here, so trim the fixed rhythm by hand */
  :root{ --sec:clamp(56px,7vw,132px); }

  .viewer{ grid-template-columns:1fr; }
  .viewer__thumbs{ flex-direction:row; }
  .thumb{ flex:1; flex-direction:column; gap:8px; padding:12px 8px; text-align:center; }
  .viewer__note{ margin-top:20px; }
  .proc__list{ grid-template-columns:repeat(2,1fr); }

  .viewer__stage{ min-height:320px; }
  .viewer__stage img{ max-height:360px; }
}

@media (max-width:900px){
  .utility__in{ justify-content:center; text-align:center; padding-block:8px; }
  .head__in{ min-height:76px; }

  .burger{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white);
    border-bottom:1px solid var(--steel-line);
    padding:14px var(--pad) 26px;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .28s var(--ease), transform .28s var(--ease),
               visibility .28s;
    box-shadow:0 24px 40px -22px rgba(14,27,61,.4);
  }
  .nav.is-open{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0);
  }
  .nav > a:not(.btn){ padding-block:16px; border-bottom:1px solid var(--panel); }
  .nav .btn{ margin-top:18px; }

  .what__grid,
  .specs__grid,
  .quote__grid{ grid-template-columns:1fr; }
  .mgrid{ grid-template-columns:repeat(2,1fr); }
  .hub__grid{ grid-template-columns:1fr; }
  /* the mobile nav is one column, so the active underline reads as a rule
     across the whole row unless it is pulled back to the label */
  .nav > a:not(.btn)::after{ display:none; }
  .nav > a:not(.btn)[aria-current="page"]{ color:var(--maple); }

  /* the callout is kept down to 760px (see its own query below) — the
     shorter headline leaves room for it well under this breakpoint */
  /* type now sits over the picture itself, so the scrim has to work
     vertically instead of across */
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(14,27,61,.94) 0%,
        rgba(14,27,61,.80) 38%,
        rgba(14,27,61,.62) 62%,
        rgba(14,27,61,.88) 88%,
        var(--ink) 100%);
  }
  .hero__bg img{ object-position:68% 44%; }
  .hero__rail-in p{ font-size:10px; letter-spacing:.1em; }
  /* three nowrap claims already fill the row at this width — the scroll cue
     pushes the last one past the wrap padding */
  .hero__scroll{ display:none; }
  .plate__grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .plate__cell{ padding-left:0; }
  .plate__cell:not(:first-child)::before{ display:none; }
  .plate__cell:nth-child(n+3){ padding-top:20px; border-top:1px solid rgba(0,0,0,.12); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}

/* The callout only collides with the headline once the type runs wide enough
   to reach it. With the current two-line headline that happens just under
   760px, so it survives a good deal further down than the layout's other
   breakpoints. */
@media (max-width:760px){
  .hero__note{ display:none; }
}

@media (max-width:600px){
  .head__brand img{ height:44px; }

  .hero{ min-height:clamp(560px, 82svh, 760px); }

  /* on a phone the three claims stack into a block that still reads as a rail */
  .hero__rail-in{ flex-direction:column; align-items:stretch; padding-block:6px; }
  .hero__rail-in p{
    flex:none; border-left:0; padding:9px 0;
    border-top:1px solid rgba(255,255,255,.11);
    white-space:normal;
  }
  .hero__rail-in p:first-child{ border-top:0; }

  .form__two{ grid-template-columns:1fr; gap:0; }
  .paths{ grid-template-columns:1fr; }
  .mgrid{ grid-template-columns:1fr; }
  .proc__list{ grid-template-columns:1fr; }
  .viewer__thumbs{ flex-wrap:wrap; }
  .thumb{ flex:1 1 42%; }
  .viewer__stage{ min-height:320px; }
  .viewer__stage img{ max-height:290px; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__base{ justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  /* anchors jump instantly instead of gliding; scroll-padding-top still
     applies, so they still land clear of the sticky header */
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  /* the reveal is neutralised at the source rather than sped up, so content
     is simply present from the start */
  .rise{ opacity:1; transform:none; }
  .rise--seq > *{ opacity:1; transform:none; }
}