/* Polarwerk OÜ — „Joonis“: hele joonestuslehe kujundus (tume režiim süsteemi järgi).
   Kirjatüübid on oma serveris (assets/fonts/, SIL OFL 1.1): Archivo (pealkirjad), Geist (leib), Geist Mono (sildid). */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("../fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/geist-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/geist-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("../fonts/archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/geist-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/geist-mono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* Layout: drawing sheet. A wide 12-column sheet; type and hairlines carry the structure, photos sit in soft-cornered frames, and one technical drawing (a 60E1 rail section) anchors the opening. */
  --bg:#F2F3F1;
  --paper:#FAFAF9;
  --ink:#141516;
  --ink-2:#5C6064;
  --ink-3:#A9ADAF;
  --ink-soft:#848a8d;
  --on-accent:#141516;
  --glow:16%;
  --line:#D9DBD8;
  --accent:#E2662A;
  --accent-ink:#A84A17;
  --panel:#E6E8E5;
  --band-soft:#EAECE9;
  --floor:rgba(0,0,0,.16);
  --slab:#17191B;
  --slab-ink:#EDEEED;
  --slab-2:#9DA2A5;
  --slab-line:#2E3235;
  --badge-filter:grayscale(1);
  --badge-blend:multiply;
  --logo-o:#F58445;
  --logo-g:#949599;
  --logo-k:#211F20;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;

  --wrap:1320px;
  --gut:clamp(20px,4.5vw,64px);
  --col-gap:clamp(16px,2vw,28px);
  --r:22px;
  --r-lg:34px;
  --head-h:76px;
  --ease:cubic-bezier(.22,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F10; --paper:#151718; --ink:#EBECEA; --ink-2:#A2A6A8; --ink-3:#5B6064; --ink-soft:#80868A; --line:#26292B;
    --accent:#EE7434; --accent-ink:#F2915A;
    --panel:#17191C; --band-soft:#16191C; --floor:rgba(0,0,0,.55); --slab:#1A1D20; --slab-ink:#EBECEA; --slab-2:#9DA2A5; --slab-line:#2E3235;
    --badge-filter:grayscale(1) invert(1); --badge-blend:screen; --logo-k:#EBECEA;
    --glow:26%; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E0F10; --paper:#151718; --ink:#EBECEA; --ink-2:#A2A6A8; --ink-3:#5B6064; --ink-soft:#80868A; --line:#26292B;
  --accent:#EE7434; --accent-ink:#F2915A;
  --panel:#17191C; --band-soft:#16191C; --floor:rgba(0,0,0,.55); --slab:#1A1D20; --slab-ink:#EBECEA; --slab-2:#9DA2A5; --slab-line:#2E3235;
  --badge-filter:grayscale(1) invert(1); --badge-blend:screen; --logo-k:#EBECEA;
  --glow:26%; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
section[id]{scroll-margin-top:calc(var(--head-h) + 12px)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.skip{position:absolute;left:-999px;top:10px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{left:12px}

h1,h2,h3{font-family:var(--f-display);font-weight:300;font-stretch:110%;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;margin:0}
h2{font-size:clamp(2.1rem,4vw,3.75rem)}
h3{font-size:clamp(1.45rem,2.2vw,2.1rem);letter-spacing:-.02em;line-height:1.1}
.label{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.75rem;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.section{padding-block:clamp(96px,12vw,176px)}

/* Buttons and links */
.pill{display:inline-flex;align-items:center;gap:12px;font:500 1rem/1 var(--f-body);text-decoration:none;padding:16px 22px 16px 26px;border-radius:999px;background:var(--ink);color:var(--bg);border:0;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease)}
.pill svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.pill:hover{background:var(--accent);color:var(--on-accent)}
.pill:hover svg{transform:translateX(3px)}
.pill.light{background:var(--slab-ink);color:var(--slab)}
.pill.light:hover{background:var(--accent);color:var(--on-accent)}
.pill.small{padding:11px 18px;font-size:.92rem}
.tlink{display:inline-flex;align-items:center;gap:10px;font-weight:500;text-decoration:none;padding-block:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .3s var(--ease)}
.tlink:hover{background-size:0 1px;background-position:100% 100%}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:color-mix(in srgb,var(--bg) 95%,transparent);border-bottom:1px solid transparent;transition:border-color .3s}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-row{display:flex;align-items:center;gap:28px;min-height:var(--head-h)}
.brand{display:block;flex:none}
.brand svg{display:block;width:148px;height:auto}
.brand .lo{fill:var(--logo-o)}.brand .lg{fill:var(--logo-g)}.brand .lk{fill:var(--logo-k)}
.main-nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);margin-left:auto}
.main-nav a{font-size:.95rem;text-decoration:none;color:var(--ink-2);transition:color .2s}
.main-nav a:hover{color:var(--ink)}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:10px;font:500 .92rem/1 var(--f-body);color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:11px 16px;cursor:pointer}
.menu-btn i{position:relative;width:14px;height:8px;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-btn i::before{top:0}
.menu-btn i::after{top:6.5px}
.menu-btn[aria-expanded="true"] i::before{top:3.25px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{top:3.25px;transform:rotate(-45deg)}
.menu{display:none}

/* Hero */
.hero{padding-top:clamp(28px,3.4vw,52px)}
.hero-text{grid-column:1/7;grid-row:1;align-self:start}
.hero h1{margin-top:0;font-size:clamp(2.5rem,4.5vw,4.4rem);font-stretch:108%;font-weight:400;letter-spacing:-.03em;line-height:.98}
.hero h1 span{display:block;color:var(--ink-soft);font-weight:250;letter-spacing:-.035em}
.hero-lead{max-width:36rem;margin-top:clamp(24px,3vw,40px);display:grid;gap:14px;justify-items:start}
.hero-lead p{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.55;color:var(--ink-2)}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.hero-actions .pill{background:var(--accent);color:var(--on-accent)}
.hero-actions .pill:hover{background:var(--ink);color:var(--bg)}
.hero-call{font-size:.92rem;color:var(--ink-2)}
.hero-call a{font-family:var(--f-mono);color:var(--ink);text-decoration:none}

/* Hero photos: five rounded photo blocks with a soft orange glow behind them (from the 16.10 design).
   Laptop and desktop: a 3 × 3 grid with a large block (railways, 2 × 2), a tall one (tram) and three
   small ones. The photos open once on load, then everything stays still. */
.hero-photos{grid-column:7/13;grid-row:1;align-self:stretch;position:relative;isolation:isolate;min-height:440px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(8px,.85vw,12px)}
.hero-photos::before{content:"";position:absolute;inset:-18% -14% -14%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 46% at 48% 46%,color-mix(in srgb,var(--accent) calc(var(--glow) * 2.2),transparent),color-mix(in srgb,var(--accent) calc(var(--glow) * .6),transparent) 55%,transparent 74%);filter:blur(26px)}
.hb{position:relative;margin:0;overflow:hidden;border-radius:16px;background:var(--panel);box-shadow:0 18px 40px -20px rgba(0,0,0,.45),0 0 44px -10px color-mix(in srgb,var(--accent) 40%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);animation:hbIn 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.hb img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;animation:hbZoom 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.hb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(11,11,11,.55))}
.hb figcaption{position:absolute;left:10px;bottom:10px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;border-radius:8px;background:rgba(11,11,11,.5);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border:1px solid rgba(255,255,255,.12);font:600 .78rem/1.2 var(--f-body);color:#fff;animation:hbCap .8s var(--ease) calc(var(--d,0s) + .7s) backwards}
.hb figcaption span{font:500 .64rem/1 var(--f-mono);letter-spacing:.06em;color:#F79C66}
.t1{grid-column:1/span 2;grid-row:1/span 2}
.t2{grid-column:3;grid-row:1/span 2}
.t3{grid-column:1;grid-row:3}
.t4{grid-column:2;grid-row:3}
.t5{grid-column:3;grid-row:3}
.t1 img{object-position:50% 50%}
.t4 img{object-position:42% 55%}
.t5 img{object-position:62% 50%}
@keyframes hbIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes hbZoom{from{transform:scale(1.08)}}
@keyframes hbCap{from{opacity:0;transform:translateY(8px)}}

/* Hero photos: three blobs whose outline draws in, then the photo appears inside */
.blobs{grid-column:7/13;align-self:center;margin:0;position:relative;isolation:isolate}
.blobs::before{content:"";position:absolute;inset:-6% -8% -8% -4%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) var(--glow),transparent) 0%,color-mix(in srgb,var(--accent) calc(var(--glow) / 3),transparent) 55%,transparent 100%);pointer-events:none;animation:fade 2.4s var(--ease) .6s both}
.blobs svg{display:block;width:100%;height:auto;overflow:visible}
.blob{--t:.3s;animation:float 8s ease-in-out calc(var(--t) + 3s) infinite alternate}
.blob.b2{--t:1s;animation-duration:9.5s}
.blobs.off .blob{animation-play-state:paused}
.blob.b3{--t:1.7s;animation-duration:7s}
.ring{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.6s var(--ease) var(--t) both}
.ph{transform-box:fill-box;transform-origin:50% 50%;animation:reveal 1.3s var(--ease) calc(var(--t) + .55s) both}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes fade{from{opacity:0}}
@keyframes reveal{from{opacity:0;transform:scale(1.1)}}
@keyframes float{to{transform:translateY(-7px)}}

.facts{margin-top:clamp(64px,8vw,112px);border-top:1px solid var(--line);padding-top:24px;row-gap:28px}
.fact{grid-column:span 3;min-width:0}
.fact dt{font-family:var(--f-display);font-stretch:108%;font-weight:300;font-size:clamp(1.35rem,2vw,1.85rem);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.fact dd{margin-top:8px;font-size:.88rem;line-height:1.45;color:var(--ink-2);max-width:17rem}

.pano{margin-top:clamp(56px,7vw,96px)}
.pano img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 64%;border-radius:var(--r);background:var(--line)}
.cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:14px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-2)}

/* About */
.about-head .label{grid-column:1/4;align-self:start;padding-top:.6em}
.statement{grid-column:4/13;font-family:var(--f-display);font-stretch:106%;font-weight:300;font-size:clamp(1.55rem,2.75vw,2.6rem);line-height:1.22;letter-spacing:-.02em;text-wrap:pretty}
.statement span{color:var(--ink-soft)}
.about-body{margin-top:clamp(56px,7vw,104px);align-items:end}
.about-img{grid-column:4/7}
.about-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.awards{grid-column:8/13}
.awards .label{margin-bottom:18px}
.award{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:18px;padding-block:14px;border-top:1px solid var(--line)}
.award:last-child{border-bottom:1px solid var(--line)}
.award img{width:56px;height:40px;object-fit:contain;filter:var(--badge-filter);mix-blend-mode:var(--badge-blend);opacity:.85}
.award span{font-size:.97rem}
.award .mono{font-size:.8rem;color:var(--ink-2)}

/* Services index */
.ico{grid-column:1/3;width:100%;max-width:120px;height:92px;overflow:visible;align-self:center}
.ico path{fill:none;stroke:var(--accent);stroke-width:var(--sw);stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ico path.m{fill:var(--bg)}
.ico path.thin{stroke:var(--ink-3);stroke-width:calc(var(--sw) * .6)}
.ico path.ax{stroke-dasharray:none}
.js-draw .ico.wait path{stroke-dashoffset:1}
.ico.go path{animation:draw 1.5s var(--ease) both}
.ico.go path.thin{animation-delay:.5s}
#teenused{padding-block:clamp(48px,5.5vw,80px) clamp(56px,7vw,104px)}
/* Section divider: a thin orange line that draws itself left to right */
.track-line{height:2px;margin-bottom:clamp(44px,5vw,72px);background:linear-gradient(90deg,transparent,var(--accent) 6%,var(--accent) 94%,transparent)}
.has-flow #teenused .track-line{visibility:hidden}
.track-line{position:relative;overflow:hidden}
.js-draw .track-line::after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:calc(100% + 160px);background:linear-gradient(90deg,transparent,var(--bg) 160px);transform:translate3d(-160px,0,0);will-change:transform}
.track-line.end{margin:clamp(56px,6vw,88px) 0 0}
.js-draw .track-line.go::after{animation:uncover 2.4s cubic-bezier(.45,.05,.25,1) both}
@keyframes uncover{from{transform:translate3d(-160px,0,0)}to{transform:translate3d(100%,0,0)}}
#teenused .sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin-bottom:0}
#teenused .sec-head .label{padding-top:0}
#teenused .sec-head h2{font-size:clamp(1.35rem,1.9vw,1.8rem);letter-spacing:-.015em}
#teenused .sec-head .intro{margin:0 0 0 auto;font-size:.95rem}
#teenused .index{margin-top:clamp(20px,2.4vw,32px)}
.sec-head .label{grid-column:1/4;align-self:start;padding-top:.9em}
.sec-head h2{grid-column:4/11}
.sec-head .intro{grid-column:4/10;margin-top:24px;color:var(--ink-2);max-width:36rem}
.index{margin-top:clamp(56px,7vw,96px);border-bottom:1px solid var(--line)}
.index li{border-top:1px solid var(--line)}
.row-link{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start;padding-block:clamp(22px,2.6vw,36px);text-decoration:none;position:relative}
.thumb{grid-column:1/3;width:100%;max-width:140px;height:auto;overflow:visible;align-self:center}
.thumb image{transform-box:fill-box;transform-origin:50% 50%;transition:transform .6s var(--ease)}
.thumb-ring{fill:none;stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.row-link:hover .thumb image{transform:scale(1.08)}
.row-link h3{grid-column:3/7;align-self:center;transition:transform .45s var(--ease)}
.row-desc{grid-column:7/12;color:var(--ink-2);display:grid;gap:14px;align-self:center}
.row-desc .tags{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.03em;color:var(--ink-2);opacity:.9}
.arrow{grid-column:12/13;justify-self:end;align-self:center;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.arrow svg{width:16px;height:16px;transition:transform .45s var(--ease)}
.row-link:hover h3{transform:translateX(8px)}
.row-link:hover .arrow{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.row-link:hover .arrow svg{transform:rotate(-45deg)}
.index-note{margin-top:28px;color:var(--ink-2);font-size:.95rem}
.index-note b{font-weight:500;color:var(--ink)}
.peek{position:fixed;left:0;top:0;z-index:40;width:300px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0);transition:opacity .25s var(--ease)}
.peek img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform .6s var(--ease)}
.peek.on{opacity:1}
.peek.on img{transform:scale(1)}

/* Rental cards (same idea as the old site: one card per machine) */
#rent{padding-block:clamp(40px,4.5vw,64px) clamp(72px,8vw,120px)}
/* Background rhythm: sections alternate black and a slightly lighter band that fades in and out (no boxes) */
.band{background:linear-gradient(180deg,var(--bg) 0,var(--band-soft) clamp(120px,14vw,200px),var(--band-soft) calc(100% - clamp(120px,14vw,200px)),var(--bg) 100%)}
.band .tl-mark{background:var(--band-soft)}
/* Soft orange glow per section, alternating sides; fades out completely so no edges show */
.glow{position:relative;isolation:isolate}
html{overflow-x:clip}
/* Variant A: a giant faint technical drawing behind each section */
.bgd{position:absolute;z-index:-1;pointer-events:none;top:50%;height:auto;opacity:.32;overflow:visible}
.bgd path{fill:none;stroke:var(--accent);stroke-width:1.4px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.bgd path.m{fill:none}
.js-draw .bgd.wait path{stroke-dashoffset:1}
.bgd.go path{animation:draw 3.2s var(--ease) both}
.flow{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible}
.flow path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:1 1;will-change:stroke-dashoffset}
.flow .beacon{opacity:0;transition:opacity .3s}
.b-core{fill:var(--accent)}
.b-halo{fill:var(--accent);opacity:.22}
.b-ring{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:bring 1.8s ease-out infinite}
@keyframes bring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.8);opacity:0}}
@media (max-width:900px){.flow{display:none}}
main{position:relative}
.bgl{top:0;bottom:0;height:100%;width:calc((100vw - min(100vw,var(--wrap))) / 2 + var(--gut) - 14px);transform:none;opacity:.6;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.bgl-r{right:0;left:auto}
.bgl-l{left:0;right:auto;transform:scaleX(-1)}
.bgl path{stroke-width:1.2px}
@media (max-width:900px){.bgl{display:none}}
.bgd-r{right:-6vw;width:min(52vw,760px);transform:translateY(-50%)}
.bgd-l{left:-6vw;width:min(52vw,760px);transform:translateY(-50%)}
#teenused,#rent,#projektid,#kontakt{position:relative;isolation:isolate}
.panel{border-radius:var(--r-lg);padding:clamp(28px,5vw,72px) clamp(20px,4.5vw,64px)}
.panel-dark{--bg:var(--slab);--ink:var(--slab-ink);--ink-2:var(--slab-2);--ink-3:#5B6064;--line:var(--slab-line);--accent-ink:#F2915A;--paper:#202427;background:var(--slab);color:var(--ink);color-scheme:dark}
.panel-warm{background:radial-gradient(ellipse 75% 65% at 92% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),radial-gradient(ellipse 60% 50% at 0% 100%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),var(--panel)}
.panel .sec-head.compact .intro{color:var(--ink-2)}
.sec-head.compact{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin-bottom:0}
.sec-head.compact .label{padding-top:0}
.sec-head.compact h2{font-size:clamp(1.35rem,1.9vw,1.8rem);letter-spacing:-.015em}
.sec-head.compact .intro{margin:0 0 0 auto;font-size:.95rem;color:var(--ink-2)}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);margin-top:clamp(24px,3vw,40px)}
/* Rental cards: soft dark card whose frame fades towards the bottom; machine on top with a floor shadow */
.mcard{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 5.5%,transparent) 0%,color-mix(in srgb,var(--ink) 2%,transparent) 65%,transparent 100%);transition:transform .4s var(--ease)}
.mcard::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid color-mix(in srgb,var(--ink) 11%,transparent);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 95%);mask-image:linear-gradient(180deg,#000 35%,transparent 95%)}
/* cards float gently, each on its own rhythm; hover lifts a little more (translate composes with the float) */
.mcard{animation:cardFloat 6s ease-in-out infinite alternate;will-change:transform;transition:translate .4s var(--ease)}
.mcard:nth-child(2){animation-duration:7s;animation-delay:-2.1s}
.mcard:nth-child(3){animation-duration:6.5s;animation-delay:-4.3s}
.mcard:nth-child(4){animation-duration:7.5s;animation-delay:-1.2s}
.mcard:nth-child(5){animation-duration:6.8s;animation-delay:-3.4s}
.mcard:nth-child(6){animation-duration:6.2s;animation-delay:-5.1s}
.mcard:nth-child(7){animation-duration:7.2s;animation-delay:-0.6s}
.mcard:nth-child(8){animation-duration:6.6s;animation-delay:-2.8s}
@keyframes cardFloat{from{transform:translateY(3px)}to{transform:translateY(-7px)}}
.mcard:hover{translate:0 -5px}
.mgrid.still .mcard{animation-play-state:paused}
.mcard-img{position:relative;aspect-ratio:16/11;margin:0;background:radial-gradient(ellipse 42% 5% at 50% 80%,var(--floor),transparent 75%)}
.mcard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;padding:9% 9% 14%;transition:transform .6s var(--ease)}
.mcard:hover .mcard-img img{transform:scale(1.05)}
.mcard-body{padding:4px clamp(18px,1.8vw,26px) 26px;display:grid;gap:6px}
.mcard-body h3{font-family:var(--f-body);font-weight:600;font-stretch:100%;font-size:clamp(1.08rem,1.35vw,1.3rem);letter-spacing:-.01em;line-height:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.chip{font:500 .74rem/1 var(--f-mono);letter-spacing:.02em;color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:7px;padding:4px 7px}
.mcard-desc{color:var(--ink-2);font-size:.97rem}
.mcard-price{margin-top:14px;color:var(--ink-2);font-size:.97rem}
.mcard-price b{color:var(--ink);font-weight:600}
.rent-foot2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(36px,4vw,56px);padding-top:28px;border-top:1px solid var(--line)}
.rent-foot2 p{color:var(--ink-2);font-size:.95rem}
.rent-foot2 .pill{background:var(--accent);color:var(--on-accent)}
.rent-foot2 .pill:hover{background:var(--ink);color:var(--bg)}
@media (max-width:960px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.sec-head.compact .intro{margin-left:0}}

/* Rent slab */
.slab{background:var(--slab);color:var(--slab-ink);border-radius:var(--r-lg);padding:clamp(32px,6vw,88px) clamp(22px,5vw,80px);border:1px solid var(--slab-line)}
.slab .label{color:var(--slab-2)}
.rent-copy{grid-column:1/7;display:grid;gap:26px;align-content:start}
.rent-copy p{color:var(--slab-2);max-width:32rem}
.rent-img{grid-column:8/13}
.rent-img img{width:100%;aspect-ratio:9/8;object-fit:cover;object-position:20% 50%;border-radius:var(--r)}
.slab .cap{color:var(--slab-2)}
.fleet-wrap{margin-top:clamp(56px,6vw,88px)}
.fleet{width:100%;border-collapse:collapse;font-size:.97rem}
.fleet caption{caption-side:top;text-align:left;padding-bottom:20px}
.fleet th{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--slab-2);text-align:left;padding:0 18px 14px 0;border-bottom:1px solid var(--slab-line)}
.fleet td{padding:22px 18px 22px 0;border-bottom:1px solid var(--slab-line);vertical-align:baseline}
.fleet th:last-child,.fleet td:last-child{text-align:right;padding-right:0}
.fleet .model{font-family:var(--f-display);font-stretch:108%;font-weight:300;font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.02em;line-height:1.1}
.fleet .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.fleet .dim{color:var(--slab-2)}
.dot{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.rent-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:36px}
.rent-foot p{color:var(--slab-2);font-size:.92rem;max-width:34rem}

/* Labour */
.labor-copy{grid-column:1/6;display:grid;gap:26px;align-content:start;justify-items:start}
.labor-copy p{color:var(--ink-2);max-width:30rem}
.labor-img{grid-column:7/13}
.labor-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.roles{margin-top:clamp(56px,6vw,88px);row-gap:28px}
.role{grid-column:span 4;border-top:1px solid var(--line);padding-top:22px;display:grid;gap:10px;align-content:start}
.role h3{font-size:clamp(1.3rem,1.7vw,1.55rem)}
.role p{color:var(--ink-2);font-size:.97rem}

/* Projects: timeline drawn as a vertical track; the orange rails fill as you scroll */
#projektid{padding-block:clamp(72px,8vw,120px)}
.tl{--yw:11rem;--tw:18px;--g:clamp(20px,3vw,44px);position:relative;list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:clamp(28px,3vw,44px) 0 0;border-top:1px solid var(--line)}
.tl-rails{position:absolute;top:clamp(28px,3vw,44px);bottom:0;left:calc(var(--yw) + var(--g) + var(--tw) / 2 - 1px);width:2px;pointer-events:none}
.tl-base,.tl-fill{position:absolute;inset:0;border-radius:2px}
.tl-head{display:none;position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 3px color-mix(in srgb,var(--accent) 55%,transparent);opacity:0;transition:opacity .3s;will-change:transform}
.js-tl .tl-head{display:block}
.tl-base{background:linear-gradient(180deg,var(--line) 0,var(--line) 90%,transparent)}
.tl-fill{background:linear-gradient(180deg,var(--accent) 0,var(--accent) 92%,transparent);transform-origin:50% 0;will-change:transform}
.js-tl .tl-fill{transform:scaleY(0)}
.tl-stop{display:grid;grid-template-columns:var(--yw) var(--tw) minmax(0,1fr) minmax(0,18.5rem);column-gap:var(--g);align-items:start;padding-bottom:clamp(30px,3.4vw,48px);position:relative}
.tl-yr{font-family:var(--f-display);font-stretch:108%;font-weight:250;font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.02em;line-height:1.1;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .4s var(--ease)}
.tl-stop.lit .tl-yr{color:var(--ink)}
.tl-mark{justify-self:center;width:16px;height:16px;margin-top:.3em;border-radius:50%;background:var(--bg);border:2px solid var(--ink-3);position:relative;z-index:1;transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.tl-stop.lit .tl-mark{border-color:var(--accent)}
.tl-stop.now .tl-mark{background:var(--accent);border-color:var(--accent)}
.tl-stop.now .tl-mark::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--accent);animation:ring 2.4s ease-out infinite;will-change:transform,opacity}
@keyframes ring{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.tl-body{min-width:0;max-width:44rem}
.tl-body h3{font-size:clamp(1.25rem,1.8vw,1.6rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.tl-body p{color:var(--ink-2);margin-top:6px;font-size:.98rem}
.tl-meta{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.03em;color:var(--ink-2);text-align:right;padding-top:.55em;margin:0}
.tl-live{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:8px}
.tl-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.js-tl .tl-stop:not(.lit) .tl-body,.js-tl .tl-stop:not(.lit) .tl-meta{opacity:.5}
.tl-body,.tl-meta{transition:opacity .5s var(--ease)}
@media (max-width:1000px){.tl-stop{grid-template-columns:var(--yw) var(--tw) minmax(0,1fr)}.tl-meta{grid-column:3;text-align:left;padding-top:8px}}
@media (max-width:700px){
  .tl{--g:16px}
  .tl-rails{left:calc(var(--tw) / 2 - 1px)}
  .tl-stop{grid-template-columns:var(--tw) minmax(0,1fr);grid-template-areas:"mark yr" "mark body" "mark meta";row-gap:4px}
  .tl-yr{grid-area:yr;text-align:left;font-size:1.15rem}
  .tl-meta{grid-area:meta;text-align:left;padding-top:6px}
  .tl-mark{grid-area:mark;margin-top:.1em}
  .tl-body{grid-area:body}
}

/* Projects */
.proj-head .label{grid-column:1/4;align-self:start;padding-top:.9em}
.proj-head h2{grid-column:4/10}
.proj-head .intro{grid-column:4/10;margin-top:24px;color:var(--ink-2);max-width:34rem}
.gal-nav{grid-column:10/13;grid-row:2/4;align-self:end;justify-self:end;display:flex;gap:10px}
.gal-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.gal-nav button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gal-nav svg{width:16px;height:16px}
.gallery{--edge:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));display:flex;gap:var(--col-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding-inline:var(--edge);padding-bottom:16px;margin-top:clamp(48px,5vw,72px);scrollbar-width:none;overscroll-behavior-x:contain}
.gallery::-webkit-scrollbar{display:none}
.gallery::after{content:"";flex:0 0 1px}
.shot{flex:0 0 clamp(280px,36vw,500px);scroll-snap-align:start;min-width:0}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--line)}
.shot figcaption{margin-top:18px;display:grid;gap:8px}
.shot .when{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--accent-ink)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.shot h3{font-size:clamp(1.2rem,1.6vw,1.45rem);font-stretch:106%}
.shot .meta{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-2)}
.more{margin-top:clamp(64px,7vw,104px)}
.more .label{grid-column:1/4;align-self:start;padding-top:22px}
.more ol{grid-column:4/13;border-bottom:1px solid var(--line)}
.more li{display:grid;grid-template-columns:7.5rem minmax(0,1fr) minmax(0,12rem) 5.5rem;gap:8px 20px;align-items:baseline;padding-block:20px;border-top:1px solid var(--line)}
.more .yr{font-family:var(--f-mono);font-size:.82rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.more .t{font-size:1.05rem}
.more .t small{display:block;font-size:.9rem;color:var(--ink-2);margin-top:2px}
.more .k{font-size:.88rem;color:var(--ink-2)}
.more .g{font-family:var(--f-mono);font-size:.82rem;text-align:right}

/* Contact */
.contact-head .label{grid-column:1/4;align-self:start;padding-top:1.4em}
.contact-head h2{grid-column:4/13;font-size:clamp(2.6rem,6vw,5.6rem);font-weight:250;font-stretch:112%;letter-spacing:-.035em;line-height:.98}
.contact-body{margin-top:clamp(56px,6vw,96px);align-items:start}
.contact-copy{grid-column:1/6;display:grid;gap:40px}
.contact-copy > p{color:var(--ink-2);max-width:30rem}
.steps li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:16px;padding-block:16px;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-family:var(--f-mono);font-size:.8rem;color:var(--accent-ink);padding-top:.25em}
.steps b{font-weight:500;display:block}
.steps .d{display:block;color:var(--ink-2);font-size:.94rem}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.person{display:grid;gap:4px;min-width:0;align-content:start}
.person h3{font-size:1.45rem;margin-bottom:8px}
.person a{text-decoration:none;color:var(--ink-2);font-size:.95rem;overflow-wrap:anywhere;width:fit-content}
.person a:hover{color:var(--ink)}
.person a.tel{font-family:var(--f-mono);color:var(--ink)}
.addr{font-size:.92rem;color:var(--ink-2)}

.form{grid-column:7/13;background:var(--paper);border-radius:var(--r-lg);padding:clamp(26px,4vw,52px);display:grid;gap:28px;border:1px solid var(--line)}
.form h3{font-size:1.6rem}
.field{display:grid;gap:4px;min-width:0}
.field label,.field legend{font-size:.82rem;color:var(--ink-2);padding:0}
.field .opt{opacity:.75}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{font:inherit;font-size:1.02rem;width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);border-radius:0;transition:border-color .2s}
.form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(-45deg,transparent 50%,var(--ink-2) 50%);background-position:calc(100% - 10px) 52%,calc(100% - 5px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px}
.form select option{background:var(--paper);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--ink)}
.form textarea{min-height:96px;resize:vertical}
.form input[type=file]{font-size:.88rem;color:var(--ink-2);padding-top:8px;max-width:100%}
.form input[type=file]::file-selector-button{font:inherit;font-size:.85rem;margin-right:12px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:.9rem;cursor:pointer;user-select:none;transition:background-color .2s,color .2s,border-color .2s}
.chip span:hover{border-color:var(--ink-2)}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.form-foot p{font-size:.84rem;color:var(--ink-2)}
.form-status{padding:16px 18px;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,transparent);font-size:.95rem}

/* Careers */
.jobs .label{grid-column:1/4;align-self:start;padding-top:.9em}
.jobs h2{grid-column:4/13}
.job-list{grid-column:4/13;margin-top:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.job{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px 32px;padding-block:28px;border-top:1px solid var(--line)}
.job h3{font-size:clamp(1.3rem,1.8vw,1.65rem)}
.job p{color:var(--ink-2);font-size:.97rem}
.jobs-foot{grid-column:4/13;margin-top:28px}

/* Footer */
.foot{border-top:1px solid var(--line);padding-block:64px 36px;font-size:.92rem;color:var(--ink-2)}
.foot .brand svg{width:140px}
.foot-a{grid-column:1/5;display:grid;gap:18px;align-content:start;justify-items:start}
.foot-b{grid-column:6/9}
.foot-c{grid-column:9/13}
.foot b{display:block;font-weight:500;color:var(--ink);margin-bottom:10px}
.foot ul{display:grid;gap:6px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:56px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em}

/* Responsive */
@media (max-width:1100px){
  .main-nav,.head-row > .pill{display:none}
  .menu-btn{display:inline-flex}
  .menu{position:fixed;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + var(--head-h));z-index:59;background:var(--bg);padding:16px var(--gut) 40px;overflow-y:auto;flex-direction:column}
  .menu.open{display:flex}
  .menu a{font-family:var(--f-display);font-stretch:110%;font-weight:300;font-size:clamp(1.8rem,6vw,2.6rem);letter-spacing:-.025em;text-decoration:none;padding-block:14px;border-bottom:1px solid var(--line)}
  .menu .pill{font-family:var(--f-body);font-size:1rem;letter-spacing:0;align-self:flex-start;margin-top:28px;border:0;padding:16px 22px 16px 26px}
  .menu p{margin-top:20px;font-family:var(--f-mono);font-size:.85rem;color:var(--ink-2)}
}
@media (max-width:960px){
  .grid > *{grid-column:1/-1 !important;grid-row:auto !important}
  .hero h1{margin-top:24px}
  .hero-lead{margin-top:24px}
  .blobs{max-width:500px;margin-top:56px}
  .fact{grid-column:span 6 !important}
  .pano img{aspect-ratio:16/10}
  .about-head .label,.sec-head .label,.proj-head .label,.contact-head .label,.jobs .label,.more .label{padding-top:0;margin-bottom:22px}
  .about-img{max-width:420px}
  .awards{margin-top:48px}
  .rent-img{margin-top:40px}
  .labor-img{margin-top:40px}
  .role{grid-column:1/-1 !important}
  .gal-nav{justify-self:start;margin-top:28px}
  .contact-copy{gap:32px}
  .form{margin-top:48px}
  .foot-b,.foot-c{margin-top:32px}
  .row-link h3{padding-right:64px}
  .row-link h3,.row-desc{grid-column:1/-1}
  .ico{grid-column:1/-1;max-width:110px;height:76px;margin-bottom:16px;justify-self:start}
  .row-desc{margin-top:12px}
  .arrow{position:absolute;right:0;top:clamp(22px,3vw,40px);width:44px;height:44px}
}
@media (max-width:640px){
  body{font-size:1rem}
  .row2,.people{grid-template-columns:minmax(0,1fr)}
  .more li{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px}
  .more .yr{grid-column:1}
  .more .g{grid-column:2;grid-row:1}
  .more .t,.more .k{grid-column:1/-1}
  .job{grid-template-columns:minmax(0,1fr)}
  .fleet thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .fleet,.fleet tbody,.fleet tr,.fleet td{display:block}
  .fleet tr{padding-block:18px;border-bottom:1px solid var(--slab-line)}
  .fleet td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:16px;text-align:right}
  .fleet td::before{content:attr(data-label);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slab-2);text-align:left;padding-top:.25em}
  .fleet td.model{text-align:left;font-size:1.45rem;padding-bottom:8px}
  .fleet td.model::before{display:none}
}
/* Tablet and phone: the photo blocks come first and the text follows, so nothing covers anything */
@media (max-width:960px){
  .hero-photos{order:-1;min-height:0;height:clamp(320px,62vw,480px)}
  .hero .hero-text{margin-top:8px}
}
/* Phone: like a phone's home screen. Railways is a widget (2 × 2, label inside), the other four are
   "app icons" with the name underneath, and the text sits in its own card below them. */
@media (max-width:599px){
  .hero-photos{height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;column-gap:14px;row-gap:12px}
  .hero-photos::before{inset:-12% -20% 0;filter:blur(30px)}
  .t1{grid-column:1/span 2;grid-row:1/span 2;border-radius:22px}
  .t1 img{object-position:50% 55%}
  .t1 figcaption{left:9px;bottom:9px;padding:4px 9px 4px 7px;border-radius:9px;font-size:.75rem;gap:6px}
  .t2,.t3,.t4,.t5{display:flex;flex-direction:column;align-items:center;gap:6px;overflow:visible;background:none;box-shadow:none;border-radius:0}
  .t2{grid-column:3;grid-row:1}.t3{grid-column:4;grid-row:1}.t4{grid-column:3;grid-row:2}.t5{grid-column:4;grid-row:2}
  .t2::after,.t3::after,.t4::after,.t5::after{content:none}
  .t2 img,.t3 img,.t4 img,.t5 img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;border-radius:18px;box-shadow:0 10px 24px -12px rgba(0,0,0,.5),0 0 26px -6px color-mix(in srgb,var(--accent) 40%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
  .t2 img{object-position:28% 70%}
  .t2 figcaption,.t3 figcaption,.t4 figcaption,.t5 figcaption{position:static;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:100%;justify-content:center;text-align:center;font-size:.7rem;font-weight:500;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .t2 figcaption span,.t3 figcaption span,.t4 figcaption span,.t5 figcaption span{display:none}
  .hero .hero-text{margin-top:18px;padding:22px 20px 20px;border-radius:26px;background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(0,0,0,.35)}
  .hero h1{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}