/* ALTHOM — the homepage compositions.
   Loaded only by index.html. site.css owns the palette, the header and the
   hero; sections.css owns the shared system (surfaces, the one heading
   pattern, reveals) and the detail pages. This file owns the twelve
   compositions that sit between the hero and the footer, and nothing else
   loads it, which is what keeps the detail pages from inheriting weight
   they have no use for.

   THE RULE, restated because it is the one that keeps getting broken:
   one idea per section, and each section gets at most one primary motion.
   A composition that needs a legend is a composition that failed.

   Colour works in long blocks. The page runs
     white · tint · white · steel · white · RED · white · tint · white ·
     steel · white · tint · graphite
   so the brand arrives as a surface four times and as a decoration never. */

:root{
  /* The fourth surface. Cooler than the red tint and quieter than white,
     it is what separates two adjacent white sections without spending the
     brand colour on the job. */
  --steel:#EEEEE9;
  --steel-rule:#BEBEBE;      /* CI grey K25 */
}
.s-steel{background:var(--steel)}

/* ================ the drawing kit ================
   Every inline SVG on this page is built from these classes, so one block
   governs how the whole page draws itself.

   THE WEIGHTS ARE THE POINT. ISO 128 works with two thicknesses, the thick
   one about twice the thin, and the split is not decorative: what IS the
   part is thick, and what talks ABOUT the part — dimensions, centre lines,
   leaders, hatching — is thin. The first version of these drawings had
   every single line between 1.0 and 1.3, which is why an outline, a
   dimension and a centre line all arrived with the same voice and the whole
   thing read as a diagram somebody made in a slide deck. */
.tsvg{width:100%; height:auto; display:block; overflow:visible;
  stroke-linecap:round; stroke-linejoin:round}
.tsvg .edge {stroke-width:1.75}   /* visible outline of the part          */
.tsvg .edge2{stroke-width:1}      /* secondary edge: bores, inner form    */
.tsvg .thin {stroke-width:.55}    /* everything that is not the part      */
.tsvg .hair{stroke:#BEBEBE}
.tsvg .body{stroke:var(--ci-grey)}
.tsvg .acc {stroke:var(--ci-red)}
.tsvg .dim {stroke:#999999; stroke-width:.55}

/* Material. Line alone has no mass, and a part with no mass is a wireframe
   no matter how well it is drawn. Two values are enough: the web faces the
   light, the flange is turned away from it. */
.tsvg .mat{fill:#E5E4DD; stroke:none}
.tsvg .web{fill:#F5F4F0; stroke:none}

.tsvg text{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  fill:var(--ink-3)}
.tsvg text.a{fill:var(--ci-red)}
.tsvg text.v{font-size:10px; letter-spacing:.06em; fill:var(--ink-2)}

/* The weights above are authored for a drawing that renders at roughly one
   user unit per pixel: a 640-unit rib in a 700px frame, a 400-unit panel in
   a 420px one. The actuator panels are a 160-unit viewBox in a 350px frame,
   which is 2.2 units per pixel, so the same declaration arrives twice as
   heavy and the shared text arrives at 19px. Halving the weights here is
   cheaper and safer than rewriting that geometry at 2× scale, and it keeps
   one set of numbers as the source for how this page draws. */
.tsvg.sm .edge {stroke-width:.85}
.tsvg.sm .edge2{stroke-width:.5}
.tsvg.sm .thin, .tsvg.sm .dim{stroke-width:.28}
.tsvg.sm text  {font-size:4.2px; letter-spacing:.1em}
.tsvg.sm text.v{font-size:5px}

/* Three passes, in the order a drawing is actually made: the outline is
   struck, the material fills in behind it, the dimensions land on top. */
.tsvg .ln{stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.25s cubic-bezier(.35,.6,.3,1) .1s}
.in .tsvg .ln{stroke-dashoffset:0}
.tsvg .tone{opacity:0; transition:opacity .85s ease .7s}
.in .tsvg .tone{opacity:1}
.tsvg .fdi{opacity:0; transition:opacity .7s ease 1s}
.in .tsvg .fdi{opacity:1}

/* The markers and patterns live once, in a hidden SVG at the top of the
   document, and every drawing points at them. Arrowheads sized in user
   units rather than stroke widths: a dimension line is half a pixel wide,
   and an arrowhead scaled to that is not an arrowhead. */
.drw-defs{position:absolute; width:0; height:0; overflow:hidden}

/* ================ 02 · the three disciplines ================
   Three full-width panels, not three cards. Each is a surface of its own,
   which is how the colour changes between them without a single tinted
   box: the visitor scrolls out of white and into tint and into steel, and
   the change registers as the page moving on rather than as decoration.

   The numeral, the word and one sentence on the left; one drawing on the
   right. Nothing else is allowed in here. */
/* The rule sits on top, not underneath. Panel three hands over to the next
   section by changing surface, so a closing border there would draw a line
   between two colours that are already telling the reader the same thing. */
.dsc{padding:clamp(70px,9.5vh,126px) var(--edge); border-top:1px solid var(--rule)}
.s-tint.dsc{border-top-color:var(--tint-rule)}
.s-steel.dsc{border-top-color:var(--steel-rule)}
.dsc .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(30px,5.5vw,96px); align-items:center}
.dsc-no{margin:0 0 clamp(18px,2.4vh,30px); font-family:var(--mono); font-size:11px;
  letter-spacing:.28em; color:var(--ci-red)}
.dsc h3{font-size:clamp(38px,7vw,112px); line-height:.9; letter-spacing:-.052em;
  transition:color .6s ease}
.dsc p{margin:clamp(24px,3.2vh,40px) 0 0; max-width:44ch;
  font-size:clamp(16px,1.2vw,19px); line-height:1.6; color:var(--ink-2)}
/* One specification line, not a row of loose fragments. Set as separate
   words with a gap they wrapped into three ragged lines that aligned with
   nothing; a red separator makes the wrap read as a line continuing. */
/* `p.dsc-tags`, not `.dsc-tags`. The rule above is `.dsc p`, which at
   (0,1,1) outranks a bare class, so the font-size and the measure written
   here were both losing: the line rendered at 16px instead of 10px and
   inherited a 44ch measure meant for body copy, which at that size is
   about 412px. It broke after every second tag and nothing in the
   declaration explained why. */
.dsc p.dsc-tags{margin:clamp(26px,3.4vh,42px) 0 0; max-width:none;
  display:flex; flex-wrap:wrap; gap:7px 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3)}
.dsc-tags b{color:var(--ci-grey); font-weight:400}
/* Trailing, not leading. As a ::before the separator travelled with the
   item it preceded, so a wrapped line began with a floating middot. A line
   that ends with one reads as a line continuing, which is what it is. */
.dsc-tags b:not(:last-child)::after{content:" ·"; color:var(--ci-red);
  padding-left:clamp(7px,.9vw,13px); padding-right:clamp(9px,1.1vw,16px)}
.dsc-art{position:relative}
/* Only where there is a pointer. On a touch screen the hover state sticks
   after a tap, which left whichever discipline the visitor last touched
   permanently red while the others stayed black. */
@media (hover: hover){ .dsc:hover h3{color:var(--ci-red)} }

/* ================ 03 · responsibility ================
   Four words and three arrows. The section carries one sentence and then
   stops talking, which is the point it is making. */
/* An <ol> keeps its 40px marker gutter even with no markers, which pushed
   the whole chain out of alignment with the headline above it. */
.chain{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,2.4vw,40px); border-top:1px solid var(--rule);
  margin:0; padding:clamp(34px,4.6vh,62px) 0 0; list-style:none}
.chain li{list-style:none; position:relative}
.chain b{display:block; font-size:clamp(20px,3.1vw,50px); line-height:1;
  letter-spacing:-.045em; font-weight:600; color:var(--ink)}
.chain span{display:block; margin-top:clamp(12px,1.8vh,20px); font-size:14.5px;
  line-height:1.55; color:var(--ink-2); max-width:24ch}
.chain em{position:absolute; left:0; top:calc(-1 * clamp(34px,4.6vh,62px) - 1px);
  height:1px; width:100%; background:var(--ci-red); font-style:normal;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.in .chain li:nth-child(1) em{transition-delay:.10s}
.in .chain li:nth-child(2) em{transition-delay:.35s}
.in .chain li:nth-child(3) em{transition-delay:.60s}
.in .chain li:nth-child(4) em{transition-delay:.85s}
.in .chain em{transform:scaleX(1)}

/* ================ 04 · engineering ================
   One part, three views. The drawing stays put and the engineering layer
   over it changes: the mesh for analysis, the geometry for design, the
   dimensions and callouts for substantiation.

   That is the whole interaction, and it earns its keep because it says
   something true about the work. Three separate pictures side by side
   would have said the opposite. */
.eng{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4.5vw,76px); align-items:start}
.eng-tabs{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.eng-tabs li{border-bottom:1px solid var(--rule)}
.eng-tab{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:16px; padding:clamp(20px,2.6vh,32px) 0; background:none; border:0; cursor:pointer;
  font-family:inherit; text-align:left; color:var(--ink-3); transition:color .35s ease;
}
.eng-tab u{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-decoration:none;
  color:var(--ink-3); transition:color .35s ease}
.eng-tab strong{font-size:clamp(21px,2.3vw,34px); line-height:1; letter-spacing:-.04em;
  font-weight:600}
.eng-tab i{width:24px; height:1px; background:var(--rule); transform-origin:100% 50%;
  transform:scaleX(.3); transition:transform .45s cubic-bezier(.2,.75,.25,1), background .35s}
#eng-an:checked ~ div [for="eng-an"],
#eng-de:checked ~ div [for="eng-de"],
#eng-ve:checked ~ div [for="eng-ve"]{color:var(--ink)}
#eng-an:checked ~ div [for="eng-an"] u,
#eng-de:checked ~ div [for="eng-de"] u,
#eng-ve:checked ~ div [for="eng-ve"] u{color:var(--ci-red)}
#eng-an:checked ~ div [for="eng-an"] i,
#eng-de:checked ~ div [for="eng-de"] i,
#eng-ve:checked ~ div [for="eng-ve"] i{background:var(--ci-red); transform:scaleX(1)}
.eng-tab:hover{color:var(--ink)}
.eng-panel{margin:0; padding:0 0 clamp(24px,3vh,38px); list-style:none; display:none}
#eng-an:checked ~ div #p-an,
#eng-de:checked ~ div #p-de,
#eng-ve:checked ~ div #p-ve{display:block; animation:open .55s cubic-bezier(.2,.75,.25,1)}
.eng-panel li{padding:0 0 9px; font-size:14.8px; line-height:1.5; color:var(--ink-2)}
.eng-panel li::before{content:""; display:inline-block; width:7px; height:1px;
  background:var(--ci-red); vertical-align:middle; margin-right:11px}

.eng-art{position:relative; border:1px solid var(--rule); background:var(--paper-2);
  padding:clamp(18px,2.4vw,34px)}
.eng-art::before{content:attr(data-cap); position:absolute; left:clamp(18px,2.4vw,34px);
  top:clamp(14px,1.8vw,22px); font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ci-red)}
/* The three overlays are stacked in one grid cell so the part underneath
   never moves when the view changes. Anything that reflows here breaks the
   claim the section is making. */
.eng-stack{display:grid}
.eng-stack > *{grid-area:1/1}
.eng-layer{opacity:0; transition:opacity .55s ease}
#eng-an:checked ~ .eng-art .eng-layer[data-view="an"],
#eng-de:checked ~ .eng-art .eng-layer[data-view="de"],
#eng-ve:checked ~ .eng-art .eng-layer[data-view="ve"]{opacity:1}
/* The view is held by three radios (see index.html), so this switch works
   in CSS alone; the caption follows them too. */
.eng-radio{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.eng-tab{-webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent}
#eng-de:checked ~ .eng-art::before{content:attr(data-cap-de)}
#eng-ve:checked ~ .eng-art::before{content:attr(data-cap-ve)}

/* ================ 05 · technical data ================
   The same procedure in four states, left to right, each panel dropped a
   little lower than the one before it so the eye is pulled down the page
   instead of across it. */
.tdata{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(16px,2.6vw,44px); align-items:start}
.tstep{margin:0; position:relative}
.tstep:nth-child(2){margin-top:clamp(20px,3vw,52px)}
.tstep:nth-child(3){margin-top:clamp(40px,6vw,104px)}
.tstep:nth-child(4){margin-top:clamp(60px,9vw,156px)}
.tstep figcaption{display:block; margin-bottom:14px; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.tstep figcaption b{color:var(--ci-red); font-weight:400; margin-right:8px}
.tstep-body{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--rule); padding:14px}
.tstep + .tstep::before{
  content:""; position:absolute; left:calc(-1 * clamp(16px,2.6vw,44px) / 2 - 4px);
  top:clamp(40px,5vw,86px); width:9px; height:9px;
  border-right:1.5px solid var(--ci-red); border-bottom:1.5px solid var(--ci-red);
  transform:rotate(-45deg);
}
.tstep-code{font-family:var(--mono); font-size:9px; line-height:1.85; color:var(--ink-2);
  white-space:pre; overflow:hidden}
.tstep-code .t{color:#A6ABAA}
.tstep-code .a{color:var(--ci-red)}
/* The published page, drawn rather than typeset: at this size real text
   would be unreadable and would invite the reader to try. */
.tstep-page{position:relative; height:100%; padding-left:13px}
.tstep-page::before{content:""; position:absolute; left:0; top:26px; bottom:14px;
  width:2px; background:var(--ci-red)}
.tstep-page b{display:block; font-size:11px; letter-spacing:-.01em; margin-bottom:4px}
.tstep-page i{display:block; font-style:normal; font-family:var(--mono); font-size:7px;
  letter-spacing:.14em; color:var(--ink-3); margin-bottom:14px}
.tstep-page s{display:block; text-decoration:none; height:3.5px; background:var(--paper-3);
  margin-bottom:7px}
.tstep-page s:nth-of-type(2){width:86%} .tstep-page s:nth-of-type(3){width:93%}
.tstep-page s:nth-of-type(4){width:58%}
.tstep-well{margin-top:12px; height:30%; border:1px solid var(--steel-rule);
  background:var(--paper-2)}

/* 01 is the part itself, photographed, and the only panel with no paper
   margin: a photograph framed like a drawing reads as a drawing. The
   documentation layer is uncovered by one red line crossing it, the same
   gesture as the hero, and then stays. */
.tstep-photo{padding:0; background:#F1F1EE}
.tstep-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tphoto-layer{position:absolute; inset:0; clip-path:inset(0 100% 0 0);
  transition:clip-path 2.2s cubic-bezier(.45,0,.55,1) .5s}
.tphoto-layer svg{width:100%; height:100%; display:block}
.tphoto-layer .cl{stroke:var(--ci-red); stroke-opacity:.45; stroke-width:2;
  stroke-dasharray:28 8 4 8}
.tphoto-layer .ld{stroke:var(--ci-red); stroke-width:4.5; stroke-linejoin:round}
.tphoto-layer .mk{stroke:var(--ci-red); stroke-width:3}
.tphoto-layer text{font-family:var(--mono); font-size:25px; letter-spacing:.12em;
  fill:var(--ci-red)}
.tphoto-scan{position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, var(--ci-red) 10%, var(--ci-red) 90%, transparent);
  opacity:0}
.in .tphoto-layer{clip-path:inset(0 -2% 0 0)}
.in .tphoto-scan{animation:tscan 2.2s cubic-bezier(.45,0,.55,1) .5s both}
@keyframes tscan{
  0%  {left:0; opacity:0}
  8%  {opacity:1}
  92% {opacity:1}
  100%{left:100%; opacity:0}
}

/* The specifications, said once, quietly, at the foot of the section. */
.spec-row{margin:clamp(48px,6.5vh,88px) 0 0; padding-top:clamp(22px,3vh,34px);
  border-top:1px solid var(--steel-rule); display:flex; flex-wrap:wrap;
  gap:10px clamp(18px,2.6vw,40px);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3)}
.spec-row b{color:var(--ink); font-weight:400}

/* ================ 06 · digital technology ================
   Five stops on one rail with a pulse that runs the length of it once when
   the section arrives. The rail is the section: the list under it is
   three lines of plain text and no more. */
/* No padding here. The rail is absolutely positioned at top 0 of this
   element and the stop dots are positioned against their own list items,
   so any padding on the wrapper drives the two apart: the dots sat 60px
   under the line they are supposed to sit on. The breathing room belongs
   to the list items instead. */
.flow{position:relative}
.flow-rail{position:absolute; left:0; right:0; top:0; height:1px; background:var(--rule)}
.flow-rail i{position:absolute; inset:0; background:var(--ci-red);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.6s cubic-bezier(.3,.7,.3,1) .15s}
.in .flow-rail i{transform:scaleX(1)}
.flow-stops{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,2vw,34px)}
.flow-stops li{position:relative; padding-top:clamp(30px,4vh,52px)}
.flow-stops li::before{
  content:""; position:absolute; left:0; top:-4.5px; width:9px; height:9px;
  border-radius:50%; background:var(--paper-2); border:1px solid var(--ci-red);
  opacity:0; transition:opacity .4s ease, background .4s ease;
}
.in .flow-stops li::before{opacity:1}
.in .flow-stops li:nth-child(1)::before{transition-delay:.25s; background:var(--ci-red)}
.in .flow-stops li:nth-child(2)::before{transition-delay:.55s; background:var(--ci-red)}
.in .flow-stops li:nth-child(3)::before{transition-delay:.85s; background:var(--ci-red)}
.in .flow-stops li:nth-child(4)::before{transition-delay:1.15s; background:var(--ci-red)}
.in .flow-stops li:nth-child(5)::before{transition-delay:1.45s; background:var(--ci-red)}
.flow-stops b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ci-red); margin-bottom:14px}
.flow-stops strong{display:block; font-size:clamp(17px,1.8vw,27px); line-height:1.08;
  letter-spacing:-.036em; font-weight:600; margin-bottom:12px}
.flow-stops span{display:block; font-size:14px; line-height:1.55; color:var(--ink-2)}
.flow-note{margin:clamp(44px,6vh,80px) 0 0; max-width:62ch;
  font-size:clamp(15.5px,1.15vw,18px); line-height:1.62; color:var(--ink-2)}

/* ================ 07 · ALTHOM Publisher ================
   The one saturated section on the page, and it is a product launch inside
   a corporate site. Input, the machine, output. Four facts. One link. */
/* Five columns for five children. Declared as three, the two connectors
   pushed the output label onto a second row where it sat under the
   machine, left aligned, reading as a caption rather than as the far end
   of the chain. The connector columns also need a share of the row: as
   `auto` they collapse to the width of their content, which is a 1px
   rule, so the line never appears at all. */
.pub-stage{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(30px,.5fr) auto minmax(30px,.5fr) minmax(0,1fr);
  align-items:center; gap:clamp(14px,2.4vw,40px);
  margin:clamp(52px,8vh,104px) 0 0; padding-top:clamp(34px,4.6vh,60px);
  border-top:1px solid rgba(255,255,255,.34)}
.pub-end b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.66); margin-bottom:16px}
.pub-end span{display:block; font-size:clamp(15px,1.5vw,22px); line-height:1.24;
  letter-spacing:-.03em; color:#fff}
.pub-end.r{text-align:right}
.pub-core{position:relative; background:#fff; color:var(--ci-red);
  padding:clamp(20px,2.8vw,34px) clamp(24px,3.4vw,46px); text-align:center}
.pub-core b{display:block; font-size:clamp(15px,1.6vw,23px); letter-spacing:-.03em;
  font-weight:600; line-height:1.1}
.pub-core i{display:block; margin-top:9px; font-style:normal; font-family:var(--mono);
  font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ci-grey)}
/* The two connectors grow outward from the machine, which reads as the
   machine doing the work rather than as data drifting past it. */
.pub-wire{position:relative; height:1px; background:rgba(255,255,255,.4)}
.pub-wire i{position:absolute; inset:0; background:#fff; transform:scaleX(0);
  transition:transform 1s cubic-bezier(.2,.75,.25,1) .5s}
.in .pub-wire i{transform:scaleX(1)}
.pub-stage > .pub-wire:nth-of-type(1) i{transform-origin:100% 50%}
.pub-stage > .pub-wire:nth-of-type(2) i{transform-origin:0 50%}
.pub-facts{list-style:none; margin:clamp(46px,6.5vh,86px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,46px);
  border-top:1px solid rgba(255,255,255,.28); padding-top:clamp(28px,3.8vh,48px)}
.pub-facts b{display:block; font-size:clamp(20px,2.4vw,36px); line-height:1.04;
  letter-spacing:-.04em; color:#fff; margin-bottom:11px}
.pub-facts span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(255,255,255,.62); line-height:1.7}

/* The product, shown. Lead on the left, one published page on the right:
   the same actuator and data module the Technical Data section followed,
   now as what an operator opens. White paper on the red surface is the
   only white object in the section, so it is unmistakably the output. */
.pub-top{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,5vw,90px); align-items:center}
.pub-top .lead{margin:0}
.pub-grid{justify-self:end; width:min(100%, 440px)}
.pub-sheet{position:relative; background:#FBFAF8; color:var(--ink);
  padding:clamp(22px,2.4vw,34px) clamp(22px,2.4vw,34px) clamp(18px,2vw,26px) clamp(30px,3vw,44px);
  box-shadow:0 30px 60px -28px rgba(60,0,6,.55), 0 2px 0 rgba(0,0,0,.04);
  transform:rotate(1.2deg)}
.ps-head{display:flex; justify-content:space-between; padding-bottom:10px;
  border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:8.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.ps-title{margin:18px 0 4px; font-size:clamp(17px,1.5vw,21px); font-weight:600;
  letter-spacing:-.025em}
.ps-dmc{margin:0 0 16px; font-family:var(--mono); font-size:8px; letter-spacing:.12em;
  color:var(--ink-3)}
.ps-warn{border:1px solid var(--ci-red); padding:9px 11px; font-size:11.5px; line-height:1.45;
  color:var(--ink-2); margin-bottom:14px}
.ps-warn b{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ci-red); font-weight:400; margin-bottom:4px}
.ps-steps{margin:0; padding:0 0 0 18px; font-size:12px; line-height:1.5; color:var(--ink-2)}
.ps-steps li{position:relative; padding:3px 0 3px 4px}
.ps-steps li::marker{font-family:var(--mono); font-size:10px; color:var(--ink-3)}
/* The change bar: a revision mark in the outer margin, against exactly the
   lines that changed in this issue. */
.ps-steps li.chg::before{content:""; position:absolute; top:4px; bottom:4px;
  left:calc(-18px - clamp(18px,1.9vw,30px)); width:3px; background:var(--ci-red);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform .6s cubic-bezier(.2,.75,.25,1) .9s}
.in .ps-steps li.chg::before{transform:scaleY(1)}
.ps-fig{margin:14px 0 0; border:1px solid var(--steel-rule); padding:8px 10px 6px;
  display:flex; align-items:flex-end; gap:10px}
.ps-fig svg{flex:1; height:auto; display:block}
.ps-fig span{font-family:var(--mono); font-size:8px; letter-spacing:.14em; color:var(--ink-3)}
.ps-foot{display:flex; justify-content:space-between; margin-top:14px; padding-top:9px;
  border-top:1px solid var(--rule); font-family:var(--mono); font-size:8px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.pub-sheet-note{margin:18px 0 0; text-align:right; font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62)}

/* ================ 08 · ILS and LSA ================
   A ring, because the argument is that the work does not end. Six stages
   on the circle, one red arc that draws its way round, and the analyses
   listed underneath in plain type. */
.ils{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,84px); align-items:center}
.ils-ring{max-width:520px; width:100%; margin:0 auto}
.ils-ring .arc{stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2s cubic-bezier(.35,.6,.3,1) .2s}
.in .ils-ring .arc{stroke-dashoffset:0}
.ils-ring .nd{opacity:0; transition:opacity .5s ease}
.in .ils-ring .nd:nth-of-type(1){transition-delay:.45s}
.in .ils-ring .nd:nth-of-type(2){transition-delay:.7s}
.in .ils-ring .nd:nth-of-type(3){transition-delay:.95s}
.in .ils-ring .nd:nth-of-type(4){transition-delay:1.2s}
.in .ils-ring .nd:nth-of-type(5){transition-delay:1.45s}
.in .ils-ring .nd:nth-of-type(6){transition-delay:1.7s}
.in .ils-ring .nd{opacity:1}
.ils-ring text{font-size:10px; letter-spacing:.16em; fill:var(--ink-2)}
.ils-ring text.c{font-size:9px; fill:var(--ink-3); letter-spacing:.2em}
.ils-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.ils-list li{display:grid; grid-template-columns:clamp(56px,5vw,84px) 1fr; gap:18px;
  padding:clamp(15px,2vh,24px) 0; border-bottom:1px solid var(--rule); align-items:baseline}
.ils-list b{font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--ci-red); font-weight:400}
.ils-list span{font-size:15.5px; line-height:1.45; color:var(--ink-2)}
.ils-list strong{font-weight:600; color:var(--ink)}

/* ================ 09 · industries ================
   An editorial list with one drawing behind it. The drawing changes with
   the row under the cursor and cross-fades rather than cutting, which is
   what keeps a six-state hover from feeling like a slideshow.

   Six equal cards were the first attempt. They flattened aerospace and
   civil into the same claim, which is not true and does not look like
   anything either. */
.indwrap{position:relative}
.ind-art{
  display:grid; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:min(30%, 400px); pointer-events:none; z-index:0;
}
.ind-art > svg{grid-area:1/1; opacity:0; transition:opacity .6s ease}
.ind-art > svg[data-on]{opacity:1}
/* The list stops short of the drawing rather than running underneath it.
   Full width, the wing planform landed on top of the description column
   and both became unreadable, which is the opposite of what a background
   visual is for. The short rules read as editorial, not as an accident. */
.indwrap .inds{position:relative; z-index:1; width:min(100%, 64%)}
.inds .ind p{max-width:34ch}

/* ================ 10 · Hamburg and Patras ================
   Two names, a measured line between them, and the two certified scopes
   underneath. The geometry is a graticule and a great circle, not a map:
   a map invites the reader to look for other offices. */
.geo{position:relative; margin:0 0 clamp(34px,5vh,64px)}
.geo svg{width:100%; height:auto; display:block}
.geo .grat{stroke:#BEBEBE; stroke-width:1}
.geo .route{stroke:var(--ci-red); stroke-width:1.4; fill:none;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.3,1) .3s}
.in .geo .route{stroke-dashoffset:0}
.geo .pin{opacity:0; transition:opacity .5s ease 1.4s}
.in .geo .pin{opacity:1}
.geo text{font-family:var(--mono); font-size:9px; letter-spacing:.16em; fill:var(--ink-3)}
.geo text.big{font-size:9.5px; fill:var(--ci-red); letter-spacing:.2em}

/* ================ 11 · quality ================
   Five facts at scale on the steel surface, then one line of practice.
   No certificate logos: a wall of other companies' marks is the least
   convincing way to claim a standard of your own. */
.proof-lines{margin:clamp(44px,6vh,78px) 0 0; padding-top:clamp(24px,3.2vh,38px);
  border-top:1px solid var(--steel-rule); display:flex; flex-wrap:wrap;
  gap:10px clamp(18px,2.6vw,40px);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3)}
.proof-lines b{color:var(--ink); font-weight:400}
.s-steel .proof{border-top-color:var(--steel-rule)}

/* ================ 12 · people ================
   Names as type, not as cards. Four portraits in a grid would have made
   this the third grid in a row and said nothing the names do not. */
.people-line{list-style:none; margin:clamp(44px,6vh,80px) 0 0; padding:0;
  border-top:1px solid var(--rule); display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(20px,3vw,48px)}
.people-line li{padding:clamp(24px,3.2vh,40px) 0 0}
.people-line b{display:block; font-size:clamp(17px,1.5vw,22px); line-height:1.2;
  letter-spacing:-.03em; font-weight:600; margin-bottom:10px}
.people-line span{display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ci-red); line-height:1.7}
.people-line em{display:block; margin-top:9px; font-style:normal; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.15em; color:var(--ink-3)}

/* ================ 13 · development ================
   Four numbers. The sentence under each is one line and has to stay one
   line: a paragraph here turns the section into a timeline, and a timeline
   is a page of its own. */
.miles{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,3vw,50px);
  border-top:1px solid var(--tint-rule); padding-top:clamp(30px,4vh,54px)}
.miles b{display:block; font-size:clamp(30px,4.4vw,70px); line-height:1;
  letter-spacing:-.05em; color:var(--ci-red); margin-bottom:16px}
.miles span{display:block; font-size:15px; line-height:1.55; color:var(--ink-2);
  max-width:26ch}

/* ---------------- narrow ---------------- */
@media (max-width: 1100px){
  .eng{grid-template-columns:1fr; gap:clamp(30px,5vh,52px)}
  .eng-art{order:-1}
  .ils{grid-template-columns:1fr; gap:clamp(30px,5vh,56px)}
  .ind-art{display:none}
  .inds .ind p{max-width:42ch}
}
@media (max-width: 900px){
  .dsc .wrap{grid-template-columns:1fr; gap:clamp(26px,4vh,44px)}
  .dsc-art{max-width:400px}
  .chain{grid-template-columns:1fr 1fr; gap:clamp(24px,4vh,40px) clamp(16px,3vw,30px)}
  .chain li:nth-child(3) em, .chain li:nth-child(4) em{display:none}
  .tdata{grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,40px)}
  .tstep:nth-child(2), .tstep:nth-child(3), .tstep:nth-child(4){margin-top:0}
  .tstep + .tstep::before{display:none}
  .flow-stops{grid-template-columns:1fr; gap:0}
  .flow-stops li{padding-top:26px; padding-bottom:22px}
  /* The rail is horizontal and the stops are now vertical, so the dots
     would sit on nothing. One line at the top is enough of a spine. */
  .flow-stops li::before{display:none}
  .pub-stage{grid-template-columns:1fr; gap:20px}
  .pub-wire{display:none}
  .pub-end.r{text-align:left}
  .pub-facts{grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,34px)}
  .people-line, .miles{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .chain, .tdata, .pub-facts, .people-line, .miles{grid-template-columns:1fr}
  .chain em{display:none}
  .dsc h3{font-size:clamp(40px,13vw,66px)}
}

@media (prefers-reduced-motion: reduce){
  .chain em, .flow-rail i, .pub-wire i{transform:none; transition:none}
  .tsvg .ln, .ils-ring .arc, .geo .route{stroke-dashoffset:0; transition:none}
  .tsvg .fdi, .tsvg .tone, .ils-ring .nd, .geo .pin, .flow-stops li::before{opacity:1; transition:none}
  .eng-panel{animation:none!important}
  .eng-layer, .ind-art > svg{transition:none}
  .tphoto-layer{clip-path:none; transition:none}
  .tphoto-scan{display:none}
  .dsc h3, .eng-tab, .eng-tab i, .eng-tab u{transition:none}
}

/* ================ additions: portraits, publisher, sheets ================
   Kept together at the end so the block can be read, and reverted, as one
   piece of work. */

/* The homepage row borrows the company page's portrait frame. There the
   frame bleeds to the edge of a padded card; here there is no card, so the
   bleed is undone and the frame gets a rule of its own. */
.people-line .person-photo{margin:0 0 18px; border:1px solid var(--rule); aspect-ratio:4/5}
/* `.people-line span` styles the role caption and would otherwise catch the
   initials too, shrinking them to 9.5px red and dropping the centring. */
.people-line .person-photo span{display:inline; font-size:clamp(20px,2.2vw,28px);
  letter-spacing:.24em; color:var(--ink-3); line-height:1}
.people-line li{padding-top:clamp(28px,3.6vh,44px)}

/* ---- drawing sheets (built by site.js from data-sheet) ----
   A 13px margin carries the zone marks, a hairline frame sits inside it,
   and the title block takes the bottom right corner. The drawing is padded
   clear of all three, so nothing it draws can land under the furniture. */
[data-sheet]{position:relative; padding:34px 30px 70px}
.dsc-art[data-sheet]{background:rgba(255,255,255,.35)}
.eng-art[data-sheet]{padding:44px 30px 74px}
.eng-art[data-sheet]::before{left:30px; top:22px}
.sheet{position:absolute; inset:0; pointer-events:none; border:1px solid var(--rule)}
.sheet::before{content:""; position:absolute; inset:13px; border:1px solid var(--rule)}
.sz{position:absolute; display:flex; font-style:normal}
.sz b{flex:1; display:grid; place-items:center; font-family:var(--mono); font-size:7px;
  font-weight:400; letter-spacing:.1em; color:var(--ink-3)}
.sz.t{top:0; left:13px; right:13px; height:13px}
.sz.t b + b{border-left:1px solid var(--rule)}
.sz.l{left:0; top:13px; bottom:13px; width:13px; flex-direction:column}
.sz.l b + b{border-top:1px solid var(--rule)}
.sheet-tb{position:absolute; right:13px; bottom:13px; display:grid;
  grid-template-columns:repeat(4,auto); background:var(--paper-2);
  border-top:1px solid var(--ink-3); border-left:1px solid var(--rule);
  font-family:var(--mono); font-size:7.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2)}
.sheet-tb span{padding:5px 9px 6px; border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule); white-space:nowrap}
.sheet-tb span:last-child, .sheet-tb .st{border-right:0}
.sheet-tb em{display:block; font-style:normal; font-size:6px; letter-spacing:.2em;
  color:var(--ink-3); margin-bottom:2px}
.sheet-tb .st{grid-column:1 / -1; color:var(--ink); letter-spacing:.12em}
.sheet-tb .st em{display:inline; font-size:inherit; letter-spacing:inherit;
  color:var(--ci-red); margin:0}

/* ---- 04 · a new view is swept in by one red line ---- */
.eng-stack{position:relative}
.eng-art.scanning .eng-layer.is-on{animation:engReveal .95s cubic-bezier(.45,0,.55,1) both}
@keyframes engReveal{ from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 -1% 0 0)} }
.eng-art.scanning .eng-stack::after{content:""; position:absolute; top:-6px; bottom:-6px;
  width:2px; margin-left:-1px; background:var(--ci-red); pointer-events:none;
  box-shadow:0 0 0 6px rgba(190,22,34,.06);
  animation:engScan .95s cubic-bezier(.45,0,.55,1) both}
@keyframes engScan{
  0%{left:0; opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:100%; opacity:0}
}

/* ---- 10 · local time at both sites ---- */
.lt{display:flex; align-items:center; gap:9px; margin-top:8px; font-family:var(--mono);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.lt time{color:var(--ink); letter-spacing:.1em; font-variant-numeric:tabular-nums}
.lt i{width:6px; height:6px; border-radius:50%; background:var(--ci-red);
  animation:ltPulse 2.4s ease-in-out infinite}
@keyframes ltPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.duo-feet p:last-child .lt{justify-content:flex-end}

/* ---- 11 · the two certificates as documents ----
   Paper, a double rule, and the scope written the way a certificate
   states it. Deliberately no seal or badge: those belong to the
   certification body, and imitating one would claim something the page
   cannot back. */
.proof .cert{position:relative; background:#FCFCFA; padding:22px 22px 20px;
  outline:1px solid var(--steel-rule); outline-offset:-6px; border:1px solid var(--steel-rule)}
.cert small{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ci-red); margin-bottom:14px}
.cert em{display:block; margin-top:14px; padding-top:10px; border-top:1px solid var(--steel-rule);
  font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.6}
.cert::after{content:""; position:absolute; top:0; right:0; width:18px; height:18px;
  background:linear-gradient(225deg, var(--steel) 50%, var(--steel-rule) 50%)}

/* ---- responsive for the additions ---- */
@media (max-width: 1100px){
  .pub-top{grid-template-columns:1fr}
  .pub-grid{justify-self:start}
}
@media (max-width: 900px){
  .duo-feet p:last-child .lt{justify-content:flex-start}
}
@media (max-width: 560px){
  [data-sheet]{padding:22px 16px 62px}
  .eng-art[data-sheet]{padding:40px 16px 62px}
  .eng-art[data-sheet]::before{left:16px}
  .sz{display:none}
  .sheet::before{inset:6px}
  .sheet-tb{right:6px; bottom:6px; grid-template-columns:repeat(2,auto)}
  .sheet-tb span:nth-child(4), .sheet-tb span:nth-child(5){display:none}
  .pub-sheet{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .ps-steps li.chg::before{transform:none; transition:none}
  .lt i{animation:none}
  .eng-art.scanning .eng-layer.is-on, .eng-art.scanning .eng-stack::after{animation:none}
}
/* Two portraits per row on a phone. One per row made four screen-high
   grey squares, which reads as missing content, not as a team. */
@media (max-width: 560px){
  .people-line{grid-template-columns:1fr 1fr; gap:0 16px}
  .people-line b{font-size:16px}
  .people-line .person-photo span{font-size:18px}
}

/* ---- 11 · recognition and networks ----
   Three marks at one optical size, transparent on the section ground,
   capped by height rather than width so wordmarks of different proportions
   carry the same weight. The EcoVadis medal sits with its rating above. */
.marks{margin:clamp(40px,6vh,72px) 0 0; padding-top:clamp(24px,3.2vh,38px);
  border-top:1px solid var(--steel-rule)}
.marks-label{margin:0 0 18px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3)}
.marks-row{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,40px)}
.marks-row li{display:flex; flex-direction:column; gap:12px}
.mk-img{display:grid; place-items:center start; height:84px}
.mk-img img{max-height:58px; max-width:100%; width:auto; height:auto}
.mk-cap{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.7}
@media (max-width: 560px){ .marks-row{grid-template-columns:1fr} .mk-img{height:64px} }
.proof-eco img{display:block; width:clamp(76px,7vw,104px); height:auto; margin-top:16px}

/* ================ 02 · services ================
   One full-screen panel per service, after SpaceX's homepage: the image
   carries the service, the type sits bottom left on a dark fade, and one
   outlined button leads on. Four panels, so a visitor knows what ALTHOM
   does within four scrolls of arriving. */
/* Slate, not black: the panels sit in the grey of the hangar light the
   images are shot in, so a panel never ends in a hard dark bar. */
.svc-wrap{background:#3A3F43}
.svc{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden;
  color:#fff; isolation:isolate}

.svc-media{position:absolute; inset:0; z-index:-2}
.svc-media img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.03); transition:transform 1.6s cubic-bezier(.2,.75,.25,1)}
.svc:hover .svc-media img{transform:scale(1.06)}
/* The fade the type stands on: strongest bottom left, gone by the upper
   right, so the picture keeps most of the frame. */
.svc::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(45,50,54,.78) 0%, rgba(45,50,54,.42) 32%, rgba(45,50,54,0) 60%),
    linear-gradient(to right, rgba(45,50,54,.5) 0%, rgba(45,50,54,.18) 38%, rgba(45,50,54,0) 60%)}
/* The seam between two panels: the one below opens with a short slate
   veil, so the eye passes from one image into the next instead of across
   an edge. */
.svc + .svc::before{content:""; position:absolute; left:0; right:0; top:0; height:clamp(80px,14vh,160px);
  z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(45,50,54,.55), rgba(45,50,54,0))}
.svc-text{padding:0 var(--edge) clamp(64px,11vh,120px); max-width:min(820px, 100%)}
.svc-no{margin:0 0 16px; font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(255,255,255,.72)}
.svc h2{margin:0; font-size:clamp(40px,6.2vw,100px); line-height:.94; letter-spacing:-.047em;
  font-weight:600; text-wrap:balance}
.svc-line{margin:clamp(18px,2.4vh,28px) 0 0; max-width:46ch; font-size:clamp(16px,1.25vw,20px);
  line-height:1.55; color:rgba(255,255,255,.86)}
.svc-btn{display:inline-flex; align-items:center; gap:12px; margin-top:clamp(26px,3.6vh,40px);
  min-height:50px; padding:0 28px; border:1.5px solid rgba(255,255,255,.9); color:#fff;
  text-decoration:none; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s, color .25s, border-color .25s}
.svc-btn span{transition:transform .25s}
.svc-btn:hover, .svc-btn:focus-visible{background:#fff; color:var(--ink); border-color:#fff}
.svc-btn:hover span{transform:translateX(4px)}

/* Digital Technology: the drawing on paper instead of a photograph. */
.svc-drawing{background:var(--paper); color:var(--ink)}
.svc-drawing::after{display:none}
.svc-drawing .svc-media{display:grid; place-items:center;
  padding:calc(var(--head) + 40px) var(--edge) 40px 42%}
.svc-drawing .svc-svg{width:100%; max-width:820px; height:auto}
.svc-drawing .svc-no{color:var(--ci-red)}
.svc-drawing .svc-line{color:var(--ink-2)}
.svc-drawing .svc-btn{border-color:var(--ink); color:var(--ink)}
.svc-drawing .svc-btn:hover, .svc-drawing .svc-btn:focus-visible{background:var(--ink); color:#fff}
/* The drawing strikes itself when its panel arrives, like every other
   drawing on the page. */
.svc-drawing:has(.in) .tsvg .ln{stroke-dashoffset:0}
.svc-drawing:has(.in) .tsvg .tone, .svc-drawing:has(.in) .tsvg .fdi{opacity:1}

@media (max-width: 820px), (max-width: 1180px) and (orientation: portrait){
  .svc h2{font-size:clamp(34px,9vw,60px)}
  .svc-btn{min-height:46px; padding:0 22px}
  .svc-drawing{flex-direction:column; justify-content:flex-end}
  .svc-drawing .svc-media{position:relative; inset:auto; flex:1; padding:calc(var(--head) + 24px) var(--edge) 0}
}
@media (hover: none){ .svc:hover .svc-media img{transform:scale(1.03)} }
@media (prefers-reduced-motion: reduce){
  .svc-media img, .svc-btn, .svc-btn span{transition:none}
  .svc-drawing .tsvg .ln{stroke-dashoffset:0}
  .svc-drawing .tsvg .tone, .svc-drawing .tsvg .fdi{opacity:1}
}

/* ---- 10 · the Hamburg–Patras story ----
   Under the pairing and the clocks: the four steps from Hamburg in 2010 to
   one organisation today, in a two-column block that reads in under a
   minute. The legal entity names sit under the two location labels. */
.duo-entity{display:block; margin-top:4px; font-weight:400; letter-spacing:.14em; color:var(--ink-3)}
.loc-story{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,5vw,90px); margin:clamp(40px,6vh,80px) 0 0; padding-top:clamp(28px,4vh,44px);
  border-top:1px solid var(--rule)}
.loc-story h3{margin:0; font-size:clamp(28px,3.2vw,50px); line-height:1; letter-spacing:-.045em}
.loc-story h3 em{font-style:normal; color:var(--ci-grey)}
.loc-story-sub{margin:14px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ci-red)}
.loc-story-body p{margin:0 0 14px; max-width:62ch; font-size:clamp(15.5px,1.15vw,18px);
  line-height:1.62; color:var(--ink-2)}
.loc-story-body .loc-legal{margin-top:18px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; line-height:1.7; color:var(--ink-3)}
@media (max-width: 900px){ .loc-story{grid-template-columns:1fr} }

/* Five milestones since the 2013 company was added. */
.miles{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width: 1100px){ .miles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width: 560px){ .miles{grid-template-columns:1fr 1fr} }

/* Each mark links to its association; the caption answers the hover. */
.mk-link{display:flex; flex-direction:column; gap:12px; color:inherit; text-decoration:none}
.mk-link .mk-img img{transition:opacity .25s}
.mk-link:hover .mk-img img{opacity:.8}
.mk-link:hover .mk-cap, .mk-link:focus-visible .mk-cap{color:var(--ci-red)}

/* ---- 11 · five credentials ----
   Certificate, certificate, register entry, industrial security,
   sustainability rating. The certificates stay documents (paper, double
   rule, red type label) and carry their PDFs; the other three are plain
   outlined cards with a grey type label, because they are a different kind
   of evidence. One row on a wide screen, then three, two, one. */
.proof-five{grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,1.4vw,22px); align-items:stretch}
.proof-five > div{display:flex; flex-direction:column}
.proof-five b{font-size:clamp(22px,1.9vw,32px); line-height:1.06; letter-spacing:-.035em;
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto}
.proof-card{position:relative; padding:22px 22px 20px; border:1px solid var(--steel-rule)}
.proof-card small{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.proof-card em{display:block; margin-top:14px; padding-top:10px; border-top:1px solid var(--steel-rule);
  font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.6}
.cert-dates{margin:12px 0 0; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); line-height:1.6}
.cert-docs{margin:auto 0 0; padding-top:16px; display:flex; flex-wrap:wrap; gap:4px 16px}
.cert-docs a{display:inline-block; padding:5px 0; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink-3);
  transition:color .2s, border-color .2s}
.cert-docs a:hover, .cert-docs a:focus-visible{color:var(--ci-red); border-color:var(--ci-red)}
.proof-five .proof-eco img{margin-top:auto; padding-top:14px}
@media (max-width: 1279px){ .proof-five{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width: 900px){ .proof-five{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .proof-five{grid-template-columns:1fr} }