/* ==========================================================================
   Global Energy Consultants — corporate home page
   Shared by docs/index.html, docs/ru/index.html, docs/fr/index.html.

   Four blocks, about three screens: a full-viewport hero over the "one field,
   two states" scene, the two business lines side by side, one cream company
   band, the site footer. The nav and footer keep their own inline CSS on the
   page, as on every other MRUS page; this file owns everything between them.

   Tokens are the hydropower stream's, copied (not linked) so the two streams
   cannot drift apart by accident.
   ========================================================================== */

:root{
  --ink:#0C0D0F;
  --cream:#F1EEE8;
  --accent:#FF4F00;
  --accent-text:#FF4F00;      /* accent AS TEXT — darkened on light grounds */
  --deep:#06131A;
  --hydro:#1B6E7E;
  --glacier:#9FD3D8;
  --paper:#E7E3DA;

  --ink-70:rgba(12,13,15,.70);
  --ink-55:rgba(12,13,15,.64);
  --ink-30:rgba(12,13,15,.58);
  --ink-18:rgba(12,13,15,.18);
  --ink-10:rgba(12,13,15,.10);
  --cream-82:rgba(241,238,232,.82);
  --cream-64:rgba(241,238,232,.64);
  --cream-42:rgba(241,238,232,.60);
  --cream-30:rgba(241,238,232,.52);
  --cream-16:rgba(241,238,232,.16);
  --cream-10:rgba(241,238,232,.10);

  --sans:'Space Grotesk',ui-sans-serif,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-display: clamp(3.25rem, 1.20rem + 8.75vw, 8.75rem);     /*  52 -> 140 */
  --fs-figure:  clamp(2.75rem, 1.08rem + 6.86vw, 7.25rem);     /*  44 -> 116 */
  --fs-section: clamp(2.375rem, 1.11rem + 5.19vw, 5.75rem);    /*  38 ->  92 */
  --fs-sub:     clamp(1.5rem, 1.27rem + 0.95vw, 2.125rem);     /*  24 ->  34 */
  --fs-lead:    clamp(1.1875rem, 1.02rem + 0.67vw, 1.625rem);  /*  19 ->  26 */
  --fs-body:    clamp(1rem, 0.95rem + 0.19vw, 1.125rem);       /*  16 ->  18 */
  --fs-small:   clamp(0.8125rem, 0.78rem + 0.175vw, 0.9375rem); /*  13 -> 15 */
  --fs-mono:    clamp(0.6875rem, 0.67rem + 0.089vw, 0.75rem);   /*  11 -> 12 */
  --fs-micro:   0.625rem;

  --lh-display:0.90; --lh-lead:1.35; --lh-body:1.60; --lh-mono:1.20;
  --tr-display:-0.045em; --tr-lead:-0.012em; --tr-body:-0.005em; --tr-mono:0.26em;

  --space-3xs:clamp(0.375rem,0.329rem + 0.19vw,0.5rem);
  --space-2xs:clamp(0.625rem,0.532rem + 0.38vw,0.875rem);
  --space-xs: clamp(1rem,0.861rem + 0.57vw,1.375rem);
  --space-s:  clamp(1.5rem,1.268rem + 0.95vw,2.125rem);
  --space-m:  clamp(2.25rem,1.786rem + 1.90vw,3.5rem);
  --space-l:  clamp(3.5rem,2.757rem + 3.05vw,5.5rem);
  --space-xl: clamp(5rem,3.7rem + 5.33vw,8.5rem);
  --space-2xl:clamp(6.5rem,4.643rem + 7.62vw,11.5rem);

  --gutter:clamp(20px,5vw,72px);
  --maxw:1560px;
  --col-gap:clamp(16px,1.95vw,28px);
  --rule:1px;
  --nav-h:68px;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-inout:cubic-bezier(0.4,0,0.6,1);
  --t-fast:150ms; --t-base:300ms; --t-mid:400ms; --t-slow:500ms;
}

html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);
  font-synthesis-weight:none;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Any figure that will be compared with another figure is tabular. */
.fig .v,.stat .v{font-variant-numeric:tabular-nums}

/* ---- type primitives ---------------------------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:.9em;
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;
  letter-spacing:var(--tr-mono);text-transform:uppercase;line-height:var(--lh-mono);
  color:var(--accent-text);
}
.kicker::before{content:"";width:1.7em;height:1px;background:currentColor;opacity:.5}

/* The section's title bar. Clearance either side of the label is PADDING, so
   no caller can put the label on the hairline. */
.rule-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-top:18px;padding-bottom:14px;
  margin-bottom:calc(var(--space-m) - 14px);
  border-top:var(--rule) solid var(--ink-18);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55);line-height:var(--lh-mono);
}
.on-dark .rule-head{border-top-color:var(--cream-16);color:var(--cream-42)}
.rule-head .l{color:var(--accent-text)}

/* Drafting chrome: corner crop marks. */
.block{position:relative}
.block::before,.block::after{
  content:"+";position:absolute;font-family:var(--mono);font-size:var(--fs-small);
  font-weight:500;line-height:1;color:var(--ink-55);pointer-events:none;
}
.block::before{left:-17px;top:-11px}
.block::after{right:-17px;bottom:-11px}
.on-dark .block::before,.on-dark .block::after{color:var(--cream-30)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ==========================================================================
   1. Hero — full viewport, copy over the scene, foot row on a hairline
   ========================================================================== */

.hero{
  position:relative;isolation:isolate;
  min-height:min(100svh,1100px);display:flex;flex-direction:column;
  background:var(--ink);color:var(--cream);overflow:hidden;
}

/* The stage holds the CSS fallback and, on top of it, the WebGL canvas. The
   fallback is the same idea drawn in CSS — a bar field left, water right — so
   the page is complete with no WebGL and no JavaScript. */
.hero-stage{position:absolute;inset:0;z-index:0;will-change:transform}
.hero-fallback{
  position:absolute;inset:0;
  background:var(--photo-a) center 42%/cover no-repeat #0C0D0F;
  filter:grayscale(1) contrast(1.1);
}
/* the river takes the right of the frame, tinted toward the water */
.hero-fallback::before{
  content:"";position:absolute;inset:0;
  background:var(--photo-b) center 40%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 60%,#000 64%);
  mask-image:linear-gradient(90deg,transparent 60%,#000 64%);
}
.hero-fallback::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(255,79,0,.10) 0%,rgba(12,13,15,0) 40%,rgba(12,13,15,0) 60%,rgba(27,110,126,.55) 64%,rgba(27,110,126,.55) 100%),
    linear-gradient(180deg,rgba(12,13,15,.35),rgba(12,13,15,.55));
  mix-blend-mode:multiply;
}
/* the seam of the static diptych */
.hero-fallback{--seam:62%}
html.no-webgl .hero-stage::before,html:not(.js-on) .hero-stage::before{
  content:"";position:absolute;top:0;bottom:0;left:var(--seam,62%);width:1px;z-index:1;
  background:rgba(159,211,216,.85);box-shadow:0 0 24px 6px rgba(159,211,216,.25);
}
#hero-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The far field dissolves into the ink behind the bar instead of ending: a
   second fog, in the page, from ink at the bar to nothing by ~260px. It rides
   on the stage, so it parallaxes with the scene. */
.hero-stage::after{
  content:"";position:absolute;left:0;right:0;top:0;height:270px;pointer-events:none;
  background:linear-gradient(180deg,#0C0D0F 0,#0C0D0F var(--nav-h),rgba(12,13,15,.86) calc(var(--nav-h) + 40px),rgba(12,13,15,.42) calc(var(--nav-h) + 110px),rgba(12,13,15,0) 100%);
}
html.no-webgl #hero-scene,html:not(.js-on) #hero-scene{display:none}
#hero-scene{z-index:1}

/* Scrim: the copy sits on the left; the right stays open for the scene. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(12,13,15,.66) 0%,rgba(12,13,15,.40) 38%,rgba(12,13,15,.16) 66%,rgba(12,13,15,.04) 100%),
    linear-gradient(180deg,rgba(12,13,15,.30) 0%,rgba(12,13,15,0) 20%,rgba(12,13,15,0) 60%,rgba(12,13,15,.80) 100%);
  /* The left scrim is for the lead and the CTAs; above the headline it thins,
     so the field shows through the top-left instead of a slab of ink. */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.7) 14%,#000 26%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.7) 14%,#000 26%);
}
/* The headline band: when the pointer brings the water under the type, the
   strip behind the display lines is dimmed a second time, feathered on every
   side; it ends at 56% of the width, so the divide at rest (62%) and the water
   beyond it stay bright. */
.hero-scrim::before{
  content:"";position:absolute;left:0;right:44%;top:20%;bottom:30%;
  background:linear-gradient(90deg,rgba(12,13,15,.34) 0%,rgba(12,13,15,.46) 60%,rgba(12,13,15,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}

.hero-copy{
  position:relative;z-index:2;flex:1 0 auto;
  display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--nav-h) + var(--space-s)) var(--gutter) var(--space-m);
}
/* Two datums shared by the three languages on landscape screens: the kicker
   sits at a fixed distance under the bar (y≈190 at 1440×900) and the CTA row
   at a fixed distance above the foot. A shorter headline — the Russian h1 is
   three lines to the English four — opens the gap between headline and lead
   instead of dropping the whole block. */
@media (min-width:960px){
  .hero-copy{justify-content:space-between;padding-top:calc(var(--nav-h) + clamp(80px,13.5vh,122px))}
  .hero-row{margin-top:var(--space-s)}
  html:not(.js-on) .hero-copy{padding-top:clamp(80px,13.5vh,122px)}
}
/* The hero kicker is the quiet label; only its dash carries the accent, so the
   orange in the hero belongs to the one display word and the CTA. */
.hero-kicker{color:var(--cream-82);animation:heroIn .9s var(--ease-out) both}
.hero-kicker::before{background:var(--accent);opacity:1}
/* 18px under the kicker: with the display face's own overhang the visual gap
   lands at ~32px, the same beat as h1→lead and lead→CTA. */
.hero h1{
  margin-top:18px;
  /* --fs-display's floor (52px), on a slope that lands at 104px at 1440 and
     is capped there: four lines of 104px in a 6.4em measure end near x=740,
     so the divide between the two states (62% of the width at rest) stands
     in the open, right of the type, instead of under it. */
  font-size:clamp(3.25rem,0.9rem + 6.3vw,6.5rem);font-weight:700;
  line-height:var(--lh-display);letter-spacing:var(--tr-display);
  max-width:6.4em;text-wrap:balance;
  animation:heroIn .9s var(--ease-out) .08s both;
}
.hero h1 em{font-style:normal;color:var(--accent)}
/* French: "hydroélectricité," is the longest word on the site; one step down
   holds it on one line in a wider measure that still ends before the divide. */
html:lang(fr) .hero h1{font-size:clamp(2.875rem,0.8rem + 5.4vw,5.6rem);max-width:8.3em}
/* Russian: "НПЗ и малые ГЭС —" is one line of wide capitals; one step down
   and a wider measure keep it, and its dash, on one line. */
html:lang(ru) .hero h1{font-size:clamp(3rem,0.8rem + 5.2vw,5.25rem);max-width:9.4em}

/* Lead and CTAs stay in the left column, under each other; the right 60% of
   the hero belongs to the scene. */
.hero-row{
  margin-top:var(--space-s);
  animation:heroIn .9s var(--ease-out) .18s both;
}
.hero-lead{
  font-size:clamp(1.125rem,1rem + 0.5vw,1.375rem);line-height:var(--lh-lead);letter-spacing:var(--tr-lead);
  max-width:48ch;color:var(--cream-82);text-wrap:pretty;
}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:32px}
.hero-ctas .cta{min-width:220px}

/* CTA: a block, one per line. Only transform and opacity animate. */
.cta{
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:56px;padding:15px 22px;
  font-family:var(--sans);font-size:1.0625rem;font-weight:600;letter-spacing:-.005em;line-height:1.2;
  color:var(--ink);background:var(--accent);
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out);
}
.cta::after{
  content:"";position:absolute;inset:0;background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--ease-out);
  z-index:-1;
}
.cta{isolation:isolate;z-index:0}
.cta:hover,.cta:focus-visible{color:var(--ink);transform:translateY(-3px)}
.cta:hover::after,.cta:focus-visible::after{transform:scaleX(1)}
.cta--ghost{color:var(--cream);background:rgba(12,13,15,.8);box-shadow:inset 0 0 0 1px var(--cream-30)}
.cta--ghost::after{background:var(--glacier)}
.cta--ghost:hover,.cta--ghost:focus-visible{color:var(--ink)}
.cta:focus-visible{outline:2px solid var(--glacier);outline-offset:3px}

.hero-foot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:13px var(--gutter) 14px;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-64);line-height:var(--lh-mono);
  border-top:var(--rule) solid var(--cream-10);
  /* the row sits on the scene: its own ink, so the coordinates hold AA over the
     brightest crest as well as the troughs */
  background:rgba(12,13,15,.55);
}
.hero-foot .cue{display:inline-flex;align-items:center;gap:9px}
.hero-foot .meta{white-space:nowrap}
.hero-foot .cue i{display:block;width:2px;height:22px;background:var(--accent);
  transform-origin:top;animation:cue 2.2s var(--ease-inout) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:0}25%{opacity:1}
  70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ==========================================================================
   2. Two business lines — a split panel, side by side from 960px
   ========================================================================== */

.duo{position:relative;background:var(--ink);color:var(--cream)}
.duo-grid{
  position:relative;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
}
/* The section label rides inside the refining panel's top padding, 16px under
   the hero foot's hairline — the one rule between the hero and the panels. It
   is positioned off the article, not the reveal block, so the reveal's
   transform never moves it. */
.duo-kicker{position:absolute;z-index:2;left:var(--pl);top:16px;color:var(--cream-42)}
.duo-kicker::before{background:var(--accent);opacity:1}

.bl{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-m);
  min-height:clamp(520px,86vh,800px);
  --pl:clamp(24px,3.4vw,56px);--pr:clamp(24px,3.4vw,56px);--pt:var(--space-l);--pb:var(--space-m);
  padding:var(--pt) var(--pr) var(--pb) var(--pl);
}
.bl--refining{--pl:var(--gutter)}
.bl--hydro{--pr:var(--gutter);border-left:var(--rule) solid var(--cream-16)}
.bl--hydro{background:var(--deep)}

/* Photo: grayscale, at about 40% effective strength through the window between
   the description and the figures (40–60% of the panel), where it carries the
   space — the column cascade and the weir are evidence, not murk. Near ink at
   the top under the orange kicker (orange holds AA only on ink), held at ~.5
   through the description lines, and dark again under the figure strip and
   the links. Both halves rest at the same opacity; the refining photo is
   cropped to its column cascade. */
.bl-photo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.bl--refining .bl-photo img{object-position:50% 22%}
.bl-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);
  opacity:.55;transform:scale(1.02);
  transition:opacity var(--t-slow) var(--ease-out),transform 1.4s var(--ease-out)}
.bl-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,13,15,.92) 0%,rgba(12,13,15,.86) 14%,rgba(12,13,15,.50) 32%,rgba(12,13,15,.44) 40%,rgba(12,13,15,.24) 50%,rgba(12,13,15,.26) 58%,rgba(12,13,15,.70) 70%,rgba(12,13,15,.93) 100%);
}
.bl--hydro .bl-photo::after{
  background:linear-gradient(180deg,rgba(6,19,26,.90) 0%,rgba(6,19,26,.84) 14%,rgba(6,19,26,.50) 32%,rgba(6,19,26,.44) 40%,rgba(6,19,26,.24) 50%,rgba(6,19,26,.26) 58%,rgba(6,19,26,.70) 70%,rgba(6,19,26,.93) 100%);
}
.bl--refining .bl-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 50% at 18% 92%,rgba(255,79,0,.16),transparent 62%);
}
.bl--hydro .bl-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 50% at 82% 92%,rgba(27,110,126,.32),transparent 62%);
}
.bl-mark{position:absolute;z-index:1;font-family:var(--mono);font-size:var(--fs-small);line-height:1;
  color:var(--cream-30);pointer-events:none}
.bl-mark--tl{left:calc(var(--pl) - 22px);top:calc(var(--pt) - 26px)}
.bl-mark--br{right:calc(var(--pr) - 22px);bottom:calc(var(--pb) - 26px)}

.bl-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.bl-no{font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:var(--tr-mono);color:var(--cream-82)}
.bl--hydro .kicker{color:var(--glacier)}
.bl-name{
  margin-top:var(--space-m);
  font-size:clamp(2.125rem,1.2rem + 2.6vw,3.5rem);font-weight:700;line-height:.98;letter-spacing:-.035em;
  text-wrap:balance;
}
.bl-what{margin-top:var(--space-xs);font-size:var(--fs-body);line-height:1.55;color:rgba(241,238,232,.94);max-width:44ch;text-wrap:pretty}
/* "Нефтепереработка — MRUS" is four characters longer than the English and
   measures 644px at 50px: a step down to 46px keeps the Russian h2 on one line
   in the 599px column, so the two descriptions start level. */
html:lang(ru) .bl-name{font-size:clamp(1.875rem,0.75rem + 2.25vw,2.875rem)}
/* Both bodies reserve the same height, so the two foot blocks start on one y
   whatever the description's line count. */
.bl-body{min-height:clamp(220px,17vw,260px)}

.bl-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--col-gap)}
.fig{padding-top:16px;padding-bottom:6px;border-top:var(--rule) solid var(--cream-16)}
.fig .v{display:block;font-family:var(--mono);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.75rem,1.1rem + 1.6vw,2.5rem);color:var(--cream)}
.bl--refining .fig .v{color:var(--accent)}
.bl--hydro .fig .v{color:var(--glacier)}
/* The qualifier ("up to") rides inside the figure, so the caption is a whole
   phrase and the number never lies. */
.fig .v{white-space:nowrap}
.fig .v small{font-size:.42em;font-weight:500;letter-spacing:.02em;color:var(--cream-64);margin-right:.4em}
/* The unit rides after the number, so the figure is "+14 M t/year" and the
   caption is a whole phrase. */
.fig .v small.u{margin-right:0;margin-left:.3em;white-space:nowrap}
/* "jusqu’à" is two characters longer than "up to"/"до": a step down keeps the
   French figures on one line in the three-column strip. */
html:lang(fr) .fig .v{font-size:clamp(1.375rem,0.5rem + 1.8vw,2.125rem)}
html:lang(fr) .fig .v small{font-size:.38em}
.fig .k{display:block;margin-top:10px;min-height:calc(2 * 1.45em);font-size:16px;line-height:1.45;color:var(--cream-64);text-wrap:pretty}
/* A range in a caption never breaks at its dash. */
.nb{white-space:nowrap}
/* Russian and French captions run to three lines in the three-column strip;
   both panels reserve the same three, so the figure rules stay level. */
html:lang(ru) .fig .k,html:lang(fr) .fig .k{min-height:calc(3 * 1.45em)}

.bl-links{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2vw,30px);margin-top:var(--space-s)}
.bl-links a{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 0;
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-82);border-bottom:var(--rule) solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.bl-links a::after{content:"\2192";transition:transform var(--t-base) var(--ease-out)}
.bl-links a:hover,.bl-links a:focus-visible{color:var(--accent);border-bottom-color:currentColor}
.bl--hydro .bl-links a:hover,.bl--hydro .bl-links a:focus-visible{color:var(--glacier)}
.bl-links a:hover::after,.bl-links a:focus-visible::after{transform:translateX(5px)}

/* Hover lifts the panel's content 10px, warms its photo and lights a hairline
   along its top edge; the other cools to half. The box itself stays put, so
   the hairlines around it are never painted over. */
.bl::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--rule);background:var(--cream-16);opacity:0;pointer-events:none}
@media (hover:hover){
  .bl:hover .bl-body,.bl:hover .bl-foot{transform:translateY(-10px)}
  .bl:hover .bl-photo img{opacity:.66;transform:scale(1.05)}
  .bl:hover::after{opacity:1}
  .duo-grid:hover .bl:not(:hover) .bl-photo img{opacity:.12}
  .duo-grid:hover .bl:not(:hover) .bl-body,.duo-grid:hover .bl:not(:hover) .bl-foot{opacity:.5}
  .bl-body,.bl-foot{transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
  .bl::after{transition:opacity var(--t-slow) var(--ease-out)}
}

/* ==========================================================================
   3. Company band — cream: a head line, then one slim row of facts
   ========================================================================== */

.band{background:var(--cream);color:var(--ink);--accent-text:#B73800}
.band-inner{padding-top:0;padding-bottom:0}
/* The head line names the section and states the scope in one mono line —
   full cycle, as a list — so the stat row below is three numerals on one beat. */
.band-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;
  padding:26px 0 18px;
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;line-height:var(--lh-mono);color:var(--ink-55);
}
.band-head h2{font:inherit;letter-spacing:var(--tr-mono);color:var(--accent-text)}
.band-head .scope{text-wrap:balance}
/* The scope line's short form lives only on phones; the six-step list above 760px. */
.scope-short{display:none}
/* The company as three stat cells on the panels' hairline grid — a value in
   the figures' mono, carrying its noun the way the panel figures carry their
   unit, over a mono label — and the About & Contact CTA at the right.
   The row clears its rule with padding. A cell divided by a rule is padded on
   both sides; only the cell that opens the row goes flush. */
.band-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px clamp(24px,3vw,48px);padding:20px 0 24px;border-top:var(--rule) solid var(--ink-18)}
.band-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.stat{padding:2px clamp(14px,1.8vw,26px) 0;border-left:var(--rule) solid var(--ink-18)}
.stat:first-child{padding-left:0;border-left:0}
.stat .v{display:block;font-family:var(--mono);font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink);white-space:nowrap}
.stat .v small{font-size:.46em;font-weight:500;letter-spacing:.02em;color:var(--ink-55);margin-left:.35em}
.stat .k{display:block;margin-top:6px;font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:var(--lh-mono);color:var(--ink-55);white-space:nowrap}
/* The hero's ghost CTA, on cream: ink outline, fills ink on hover. */
.cta--band{flex:0 0 auto;min-height:48px;padding:11px 20px;color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--ink-30)}
/* The four delivered projects, named, with their capacities: one mono row on
   its own hairline under the stats, linking to the projects page. The row
   clears its rule with padding on both sides. */
.band-ticker{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 32px;
  min-height:44px;padding:14px 0;border-top:var(--rule) solid var(--ink-18);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.35;color:var(--ink-55);
  transition:color var(--t-fast);
}
.band-ticker .l{color:var(--accent-text)}
.band-ticker .t{flex:1 1 auto;letter-spacing:.14em}
.band-ticker .t i{font-style:normal;margin:0 .1em;color:var(--ink-30)}
.band-ticker .u{text-transform:none}
.band-ticker .r{white-space:nowrap}
.band-ticker .r::after{content:"\2192";display:inline-block;margin-left:.6em;transition:transform var(--t-base) var(--ease-out)}
.band-ticker:hover,.band-ticker:focus-visible{color:var(--ink)}
.band-ticker:hover .r::after,.band-ticker:focus-visible .r::after{transform:translateX(5px)}
.band-ticker:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cta--band::after{background:var(--ink)}
.cta--band:hover,.cta--band:focus-visible{color:var(--cream)}
.cta--band:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ==========================================================================
   Reveal — 400ms, felt not watched; gated on .js-on so nothing hides
   without JavaScript
   ========================================================================== */

.js-on [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
.js-on [data-reveal].is-visible{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:80ms}
[data-reveal][data-delay="2"]{transition-delay:160ms}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1359px){
  /* Below 1360px a figure column is under ~150px: the unit drops under the
     number instead of running into the next column. */
  .fig .v small.u{display:block;margin:3px 0 0}
  .fig .v{font-size:clamp(1.5rem,0.6rem + 1.6vw,2.125rem)}
  html:lang(fr) .fig .v{font-size:clamp(1.375rem,0.4rem + 1.6vw,2rem)}
}
@media (max-width:959px){
  .fig .k{font-size:15px}
  /* Stacked, the panel is shorter and the figures start at ~45% of it: the
     picture window sits behind the description instead, and the scrim is
     dark again from 40% down so the figure strip and the links hold AA. */
  .bl-photo::after{background:linear-gradient(180deg,rgba(12,13,15,.92) 0%,rgba(12,13,15,.86) 12%,rgba(12,13,15,.50) 26%,rgba(12,13,15,.46) 38%,rgba(12,13,15,.76) 48%,rgba(12,13,15,.86) 60%,rgba(12,13,15,.93) 100%)}
  .bl--hydro .bl-photo::after{background:linear-gradient(180deg,rgba(6,19,26,.90) 0%,rgba(6,19,26,.84) 12%,rgba(6,19,26,.50) 26%,rgba(6,19,26,.46) 38%,rgba(6,19,26,.76) 48%,rgba(6,19,26,.86) 60%,rgba(6,19,26,.93) 100%)}
  .duo-grid{grid-template-columns:minmax(0,1fr)}
  .bl{min-height:0;padding:var(--space-l) var(--gutter) var(--space-m);gap:var(--space-m)}
  .bl:first-child,.bl:last-child{--pl:var(--gutter);--pr:var(--gutter)}
  .bl:last-child{border-left:0;border-top:var(--rule) solid var(--cream-16)}
  .bl:last-child{--pt:var(--space-l)}
}
@media (max-width:760px){
  :root{--nav-h:60px}
  /* With no JavaScript the bar is static and in flow, so the hero must not
     also leave room for it. */
  html:not(.js-on) .hero-copy{padding-top:var(--space-m)}
  .hero-copy{padding-bottom:var(--space-s)}
  .hero-kicker{letter-spacing:.16em}
  /* One column: the copy spans the width, so the scrim turns vertical — open
     above the kicker, where the field lives, darkening from the headline down. */
  .hero-scrim{background:linear-gradient(180deg,rgba(12,13,15,.10) 0%,rgba(12,13,15,0) 18%,rgba(12,13,15,.58) 34%,rgba(12,13,15,.76) 46%,rgba(12,13,15,.92) 100%);-webkit-mask-image:none;mask-image:none}
  .hero-scrim::before{display:none}
  /* The field starts lower on a phone: the top fade is shorter, so it thins
     out before the rows do. */
  .hero-stage::after{height:150px;background:linear-gradient(180deg,#0C0D0F 0,#0C0D0F var(--nav-h),rgba(12,13,15,.7) calc(var(--nav-h) + 30px),rgba(12,13,15,0) 100%)}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px;margin-top:var(--space-s)}
  .hero-ctas .cta{width:100%}
  /* The foot is one line on phones: the coordinates. Everyone scrolls a phone;
     the cue is a desktop courtesy. */
  .hero-foot{justify-content:flex-start;font-size:11px;letter-spacing:.08em;color:var(--cream-64);padding-top:13px;padding-bottom:13px}
  .hero-foot .cue{display:none}
  /* Three figures in one row above one rule: values bottom-aligned in the
     first grid row, captions top-aligned in the second. A qualifier ("up to")
     takes its own line above the number; the unit stays on the number's line. */
  .bl-figs{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-flow:column;gap:0 10px;padding-top:14px;border-top:var(--rule) solid var(--cream-16)}
  .fig{display:contents}
  .fig .v{align-self:end;font-size:1.5rem;white-space:normal}
  html:lang(fr) .fig .v{font-size:1.375rem}
  .fig .v small:not(.u){display:block;margin:0 0 5px;font-size:.5em}
  .fig .v small.u{display:inline;margin:0 0 0 .3em;font-size:.46em}
  .fig .k{align-self:start;margin-top:8px;font-size:15px;overflow-wrap:break-word}
  .bl-links{gap:0 18px}
  /* The head line stacks; the facts become rows on hairlines, the value in a
     fixed column and the label beside it at full width, so no label ever
     wraps around an orphan; the CTA is full-width beneath. */
  .band-head{flex-direction:column;align-items:flex-start;gap:8px;padding:22px 0 16px}
  .band-head .scope{font-size:12px;letter-spacing:.08em;line-height:1.6}
  .scope-full{display:none}
  .scope-short{display:inline}
  .band-ticker{padding:12px 0 14px;letter-spacing:.08em;gap:4px 18px}
  .band-ticker .t{flex-basis:100%;letter-spacing:.08em}
  .band-row{flex-direction:column;align-items:stretch;gap:0;padding:0 0 18px;border-top:0}
  .band-stats{display:block}
  .stat{display:flex;align-items:baseline;gap:14px;padding:12px 0 11px;border-left:0;border-top:var(--rule) solid var(--ink-18)}
  .stat .v{flex:0 0 118px;font-size:1.375rem}
  html:lang(fr) .stat .v{flex-basis:132px}
  .stat .k{margin-top:0;white-space:normal;text-wrap:pretty}
  .cta--band{display:flex;width:100%;margin-top:18px}
  .bl{padding-top:40px}
  /* The section label needs its own room above "01" on phones. */
  .bl--refining{padding-top:64px}
  .duo-kicker{top:14px}
  .bl-mark{display:none}
  .block::before,.block::after{display:none}
  .rule-head{flex-direction:column;align-items:flex-start;gap:6px}
  /* Site footer on this page: 44px link rows on touch (the site-wide footer
     CSS has 22px rows on 10px gaps). */
  .footer-col{gap:0}
  .footer-col a{display:block;padding-block:11px}

  /* ---- The phone page is the desktop page with one idea per screen. ----
     Hero: headline, lead, two buttons — no kicker, no coordinates row.
     Lines: number, status, name, one sentence, ONE figure, the three links.
     Band: three facts and the button — no scope line, no project ticker.
     (The seam in the hero is static on touch: scene.js.) */
  .hero-kicker{display:none}
  .hero h1{margin-top:0}
  .hero-foot{display:none}
  .duo-kicker{display:none}
  .duo .bl{min-height:0;padding-top:44px;padding-bottom:40px}
  .duo .bl--refining{padding-top:44px}
  .bl-body{min-height:0}
  .bl-what{max-width:none}
  .bl-figs .fig:not(:first-child){display:none}
  .bl-figs .fig:first-child{border-top:0;padding-top:0}
  .bl-foot{margin-top:var(--space-s)}
  .band-head .scope{display:none}
  .band-head{padding-bottom:6px}
  .band-ticker{display:none}
  .band-row{padding-bottom:22px}
}

/* ==========================================================================
   Reduced motion — one static frame of everything
   ========================================================================== */

@media (max-width:600px){
  /* Under 600px a three-up strip gives each figure ~110px and the captions
     wrap to four lines: the three figures stack as rows on hairlines instead —
     the value in a fixed mono column, the caption beside it on its baseline. */
  .bl-figs{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:0;padding-top:0;border-top:0}
  .fig{display:grid;grid-template-columns:minmax(112px,max-content) minmax(0,1fr);column-gap:14px;align-items:baseline;min-height:44px;padding:12px 0 11px;border-top:var(--rule) solid var(--cream-16)}
  .fig .v{font-size:1.5rem;align-self:baseline}
  html:lang(fr) .fig .v{font-size:1.375rem}
  .fig .v small:not(.u){display:inline;margin:0 .35em 0 0;font-size:.5em}
  .fig .k{margin-top:0;min-height:0;align-self:baseline}
}

@media (prefers-reduced-motion:reduce){
  .hero-kicker,.hero h1,.hero-row{animation:none;opacity:1;transform:none}
  .hero-foot .cue i{animation:none;opacity:.6}
  .hero-stage{transform:none !important;opacity:1 !important}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .cta,.cta::after,.bl,.bl-photo img,.bl-links a::after,.bl-body,.bl-foot{transition:none}
  .bl:hover .bl-body,.bl:hover .bl-foot{transform:none}
}

/* ==========================================================================
   Site footer, on this page: one-line wordmark, a shorter top, a legible
   bottom line. The inline footer block is the site's verbatim copy, so these
   ride over it with one extra level of specificity.
   ========================================================================== */
body .footer{padding-top:64px}
/* The wordmark is the nav brand at rest — the three-bar mark and a solid
   22px name — not an outlined display line. */
.footer .footer-wordmark{
  display:flex;align-items:center;gap:14px;
  font-size:22px;letter-spacing:.06em;line-height:1;
  color:var(--cream);-webkit-text-stroke:0;
}
.footer .footer-wordmark::before{
  content:"";flex:0 0 auto;width:17px;height:20px;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 100%/4px 9px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 6.5px 100%/4px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 13px 100%/4px 20px no-repeat;
}
.footer .footer-cols{margin-top:44px}
.footer .footer-bottom{font-size:12px;color:var(--cream-64)}

@media print{
  .nav,.hero-stage,.hero-scrim,.hero-foot .cue{display:none}
  .hero,.duo,.bl--hydro{background:#fff !important;color:#000 !important}
  .hero{min-height:0}
  [data-reveal]{opacity:1;transform:none}
}