/* Vaihekallio Oy - sähköurakointi, Jyväskylä.
   Idea: keskus on talon sisällysluettelo. Device: the ryhmäkeskus drawn to scale,
   one px-per-millimetre on both axes, modules at their true 17,5 mm width.
   Type rule: Familjen Grotesk sets the words, Saira sets every figure on the page. */

/* ---------- fonts, self-hosted, OFL licences beside the files ---------- */
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/familjen-grotesk-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:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/familjen-grotesk-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:'Saira';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/saira-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}
/* the hand on the old cover card: a private subset, the eighteen glyphs those four words
   need and nothing else, 13 KB. It sets the card and nothing else on the page. */
@font-face{font-family:'Kansi';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/caveat-kansi.woff2) format('woff2')}
@font-face{font-family:'Saira';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/saira-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}

/* ---------- tokens ---------- */
:root{
  --ink:#14181D;          /* the plate, the dark sections */
  --paper:#F2F1ED;
  --sand:#E6E4DC;
  --line:#D6D3C9;
  --muted:#565C63;
  --volt:#B9C726;         /* the protective-earth colour: the one action colour */
  --volt-d:#A5B31F;
  --dim:#9BA3AB;          /* muted text on the plate */
  --body-d:#E4E3DC;       /* body text on the plate */
  --rule-d:rgba(242,241,237,.16);
  --dev:#E7E6E0;          /* a device face */
  --dev-2:#C6C5BE;        /* the toggle band */
  --hdr:72px;
  --disp:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;
  --sans:'Saira','Helvetica Neue',Arial,sans-serif;
  --mm:1.36px;            /* one millimetre of switchboard, drawn */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700}
p,ul,ol,dl,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sec--dark :focus-visible,.plate :focus-visible{outline-color:var(--volt)}

/* ---------- type ---------- */
h1{font-family:var(--disp);font-size:clamp(38px,4.1vw,54px);line-height:1.03;letter-spacing:-.022em}
h2{font-family:var(--disp);font-size:clamp(25px,2.6vw,35px);line-height:1.14;letter-spacing:-.018em}
h3{font-size:19px;line-height:1.3;letter-spacing:-.004em;font-weight:600}
/* every figure on the page is set in the text face, tabular where it sits in a column */
.num{font-family:var(--sans);font-weight:600;letter-spacing:0}
h1 .num,h2 .num{font-size:.95em;font-weight:700}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.5;overflow:visible;color:var(--muted)}
.eyebrow--l{color:var(--dim)}
.dek{font-size:18px;line-height:1.5;max-width:52ch;margin-top:18px}
.small{font-size:14.5px;color:var(--muted)}
.sec--dark .small{color:var(--dim)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  font:600 16.5px/1.25 var(--sans);letter-spacing:.005em;text-align:center;text-decoration:none;border:0;cursor:pointer}
.btn--p{background:var(--volt);color:var(--ink)}
.btn--p:hover{background:var(--volt-d)}
.lnk{font-weight:600;text-decoration:none;border-bottom:2px solid var(--volt);padding-bottom:2px}
.lnk:hover{border-color:var(--ink)}

/* ---------- header ---------- */
.hdr{height:var(--hdr);border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:30}
.hdr__in{max-width:1240px;margin:0 auto;padding:0 40px;height:100%;display:flex;align-items:center;gap:36px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.mark__glyph{flex:0 0 auto}
.mark__name{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.02em}
.only-d{display:inline}
.nav{margin-left:auto}
.nav ul{display:flex;gap:28px}
.nav a{font-size:15px;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--volt)}
.burger{display:none;margin-left:auto;background:none;border:1px solid #7C8288;
  padding:9px 16px;font:600 14.5px/1 var(--sans);letter-spacing:.02em;color:inherit;cursor:pointer;min-height:44px}
.burger:hover{border-color:var(--ink)}
.menu{border-bottom:1px solid var(--line);background:var(--paper)}
.menu ul{padding:8px 0 18px}
.menu a{display:block;padding:13px 40px;font-size:17px;font-weight:500;text-decoration:none;border-top:1px solid var(--line)}

/* ---------- the fold: words on paper, the switchboard drawn on its plate ---------- */
.hero{min-height:calc(100svh - var(--hdr));display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,700px);align-items:stretch}
.hero__text{padding:34px 60px 34px max(40px,calc((100vw - 1240px)/2 + 40px));
  display:flex;flex-direction:column;justify-content:center}
.hero__mid{margin:12px 0 0}
.hero__text h1{margin-top:0}
.hero__act{display:flex;align-items:center;gap:26px;margin-top:26px;flex-wrap:wrap}
.hero__note{margin-top:20px;font-size:14.5px;color:var(--muted);max-width:40ch}

/* the plate: a dark technical sheet. The board is drawn at one scale on both axes,
   every module 17,5 mm wide and every device 85 mm tall, which is what they are. */
.plate{background:var(--ink);color:var(--body-d);padding:34px 40px 34px;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;overflow:hidden}
.plate__top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:12px;border-bottom:1px solid var(--rule-d)}
.plate__label{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.5;color:var(--dim)}
.plate__sum{font-size:13px;line-height:1;color:var(--dim);white-space:nowrap}
.plate__sumfig{font-size:24px;color:var(--paper);font-weight:700}

/* the drawing: the enclosure, three DIN rails, and every device at its true width.
   One px per millimetre on both axes, so a 4-module main switch is four times as wide
   as a 1-module group and every device is the same 85 mm tall, which is what they are. */
.board{position:relative;flex:0 0 auto;align-self:flex-start;
  width:calc(254*var(--mm));height:calc(411*var(--mm));
  background:#20262E;box-shadow:inset 0 0 0 calc(2*var(--mm)) #4C555F}
.board__rail{position:absolute;left:calc(22*var(--mm));width:calc(210*var(--mm));
  height:calc(85*var(--mm));display:flex}
/* the rail itself, visible where no device sits on it */
.board__rail::before{content:"";position:absolute;left:calc(-10*var(--mm));right:calc(-10*var(--mm));
  top:calc(42*var(--mm));height:calc(7*var(--mm));background:#39424C;
  border-top:1px solid #4C555F;border-bottom:1px solid #2B333B}
.board__rail:nth-child(1){top:calc(50*var(--mm))}
.board__rail:nth-child(2){top:calc(175*var(--mm))}
.board__rail:nth-child(3){top:calc(300*var(--mm))}

.dev{position:relative;z-index:1;width:calc(var(--m)*17.5*var(--mm));height:100%;
  border-right:calc(2.2*var(--mm)) solid #20262E;background-color:var(--dev);background-clip:padding-box;
  background-image:
    /* the toggle of each module, one per 17,5 mm */
    repeating-linear-gradient(90deg,transparent 0 calc(5.5*var(--mm)),#2E3640 calc(5.5*var(--mm)) calc(12*var(--mm)),transparent calc(12*var(--mm)) calc(17.5*var(--mm))),
    /* the terminal openings, top and bottom */
    repeating-linear-gradient(90deg,transparent 0 calc(5*var(--mm)),#9A9992 calc(5*var(--mm)) calc(12.5*var(--mm)),transparent calc(12.5*var(--mm)) calc(17.5*var(--mm))),
    repeating-linear-gradient(90deg,transparent 0 calc(5*var(--mm)),#9A9992 calc(5*var(--mm)) calc(12.5*var(--mm)),transparent calc(12.5*var(--mm)) calc(17.5*var(--mm))),
    /* the joint between one module and the next */
    repeating-linear-gradient(90deg,transparent 0 calc(17.5*var(--mm) - 1px),#D2D1CA calc(17.5*var(--mm) - 1px) calc(17.5*var(--mm)));
  background-size:100% calc(19*var(--mm)),100% calc(7*var(--mm)),100% calc(7*var(--mm)),100% 100%;
  background-position:0 calc(33*var(--mm)),0 calc(9*var(--mm)),0 calc(69*var(--mm)),0 0;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat}
/* a multi-module device is one body: its handles are linked, which is what makes a
   4-module main switch read as one device and not as four groups */
.dev::after{content:"";position:absolute;left:calc(5.5*var(--mm));right:calc(5.5*var(--mm));
  top:calc(39.5*var(--mm));height:calc(4.5*var(--mm));background:#2E3640}
.dev--free::after{display:none}
.dev--free{background:none;border-right-width:0;box-shadow:inset 0 0 0 1px rgba(185,199,38,.45);
  background-image:repeating-linear-gradient(45deg,rgba(185,199,38,.28) 0 1px,transparent 1px 6px)}
/* the label carrier: it sits below the device, on the enclosure's own face, which is why it
   carries that face's colour rather than inheriting the device's */
.dev__n{position:absolute;left:0;right:0;top:calc(100% + 5*var(--mm));text-align:center;
  background:#20262E;font-size:11px;line-height:1.25;font-weight:600;color:var(--dim);
  font-variant-numeric:tabular-nums}

/* the key figures, under the drawing */
.board-row{display:flex;gap:30px;align-items:flex-start}
.keys{display:flex;gap:34px;padding-top:16px;border-top:1px solid var(--rule-d)}
.keys dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--dim)}
.keys dd{margin:1px 0 0;font-size:23px;line-height:1.15;font-weight:700;color:var(--paper)}
.keys .volt{color:var(--volt)}

/* the group list: the document the customer is left with */
.ryhmat{flex:1 1 auto;min-width:0}
.ryhmat__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.5;color:var(--dim);padding-bottom:9px;border-bottom:1px solid var(--rule-d)}
.ryhmat__u{text-transform:none;letter-spacing:.02em}
.ryhmat__list{margin-top:4px}
.ryhmat__list li{display:flex;gap:9px;align-items:baseline;padding:8px 0;font-size:13.5px;line-height:1.3}
.ryhmat__list li+li{border-top:1px solid rgba(242,241,237,.07)}
.r__n{flex:0 0 17px;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;font-size:12px}
.r__name{flex:1 1 auto;color:var(--body-d)}
.r__m{flex:0 0 auto;color:var(--dim);font-variant-numeric:tabular-nums;font-size:12.5px}
.r--free .r__name,.r--free .r__m{color:var(--volt)}

/* ---------- sections ---------- */
.sec{padding:92px 0}
.sec--dark{background:var(--ink);color:var(--body-d)}
.sec--dark .eyebrow{color:var(--dim)}
.sec--sand{background:var(--sand)}
.sec__head{max-width:38ch;margin-bottom:44px}
.sec__head h2{margin-top:14px}

.dual{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:60px;align-items:start}
.dual__text h2{margin:14px 0 24px}
.dual__text p+p{margin-top:16px}
.dual__pic img{width:100%;height:auto}
.dual__pic figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}
.dual--rev .dual__text{order:2}
.dual--rev .dual__pic{order:1}
/* the argument section: headline and the counter-example photograph on the left,
   the argument and its three notes on the right, so both columns carry weight */
.dual--split{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:60px;align-items:start}
.dual--split .dual__head{grid-column:1;grid-row:1 / span 2}
.dual--split .dual__body{grid-column:2;grid-row:1}
.dual--split .notes{grid-column:2;grid-row:2;margin-top:34px}
.dual--split h2{margin-top:14px}
.dual--split .dual__body p{max-width:56ch}
.dual--split .dual__body p+p{margin-top:16px}

.notes{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.notes li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:24px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.notes h3{font-size:17px}
.notes p{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:46ch}

/* ---------- työt: no photographs, the specifications are the picture ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr)}
.card{padding:28px 0 32px;border-top:1px solid var(--rule-d)}
.card:nth-child(odd){padding-right:54px;border-right:1px solid var(--rule-d)}
.card:nth-child(even){padding-left:54px}
.card h3{font-size:22px;color:var(--paper)}
/* the label is a tracked cap, the value is a measurement: kW, kWp, mm² and h are units and
   uppercasing them turns them into different units */
.chip{display:inline-block;margin-top:12px;padding:5px 11px;background:rgba(242,241,237,.09);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--volt)}
.chip .num{text-transform:none;letter-spacing:.02em;font-size:12px}
.card p:not(.chip){margin-top:14px;font-size:16px;line-height:1.58;max-width:46ch}
.card ul{margin-top:18px;border-top:1px solid var(--rule-d)}
.card li{padding:9px 0 9px 20px;border-bottom:1px solid var(--rule-d);font-size:15px;position:relative;color:var(--dim)}
.card li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:2px;background:var(--volt)}

/* ---------- kohteet ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.work img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--paper)}
.work__where{margin-top:20px;font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.5;color:var(--muted)}
.work h3{margin-top:8px;font-size:20px}
.work p:not(.work__where){margin-top:12px;font-size:15.5px;line-height:1.55}
.facts{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;margin-top:22px;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-rows:subgrid;grid-row:span 2;padding:14px 12px 0 0}
.facts div+div{padding-left:14px;border-left:1px solid var(--line)}
.facts dt{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.facts dd{margin:3px 0 0;font-size:21px;line-height:1.2;white-space:nowrap;font-weight:700}
.facts--wide{grid-template-columns:repeat(4,1fr);margin-top:30px}
.facts--wide dd{font-size:25px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.steps li{padding:22px 26px 0 0}
.steps li+li{padding-left:26px;border-left:1px solid var(--line)}
.steps__n{font-size:27px;line-height:1;font-weight:700}
.steps h3{margin-top:12px;font-size:18px}
.steps p:not(.steps__n){margin-top:9px;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- form ---------- */
.dual--form{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:70px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.field{display:flex;flex-direction:column}
.field--wide{grid-column:1 / -1}
.field--wide .btn{align-self:flex-start;padding:0 46px}
.field label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.5;color:var(--dim);margin-bottom:8px}
.field input,.field select,.field textarea{font:400 16.5px/1.5 var(--sans);color:var(--paper);
  background:#1D232A;border:1px solid #767E87;padding:13px 14px;min-height:50px;border-radius:0}
.field textarea{resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--volt)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#F0B4AC}
.err{margin-top:7px;font-size:14px;color:#F0B4AC}
.form__ok{grid-column:1 / -1;font-size:15.5px;color:var(--volt);font-weight:500}
.form__ok:empty{display:none}

/* ---------- the standing ask ---------- */
.sec__cta{display:none}
.cta-bar{display:none}

/* ---------- footer ---------- */
.ftr{background:var(--paper);border-top:1px solid var(--line);padding:60px 0 40px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:44px}
.mark--ftr{display:flex;align-items:center;gap:11px}
.ftr__h{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.ftr__line{margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted);max-width:34ch}
.ftr__list{margin-top:10px}
.ftr__list li{padding:5px 0}
.ftr__list a{font-size:15px;text-decoration:none;border-bottom:1px solid transparent}
.ftr__list a:hover{border-color:var(--volt)}
.ftr__fiction{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted)}

/* ---------- narrow ---------- */
@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,600px)}
  :root{--mm:1.10px}
}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__text{padding:38px 40px 34px}
  .plate{padding:26px 40px 34px}
  .works{gap:30px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li{padding-bottom:22px;border-bottom:1px solid var(--line)}
  .steps li:nth-child(odd){padding-left:0;border-left:0}
  .dual,.dual--form,.dual--split{grid-template-columns:1fr;gap:26px}
  .dual--rev .dual__text{order:1}
  .dual--rev .dual__pic{order:2}
  .dual--split .dual__head,.dual--split .dual__body,.dual--split .notes{grid-column:auto;grid-row:auto}
  .dual--split .notes{margin-top:8px}
  .notes li{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .cards{grid-template-columns:1fr}
  .card:nth-child(odd){padding-right:0;border-right:0}
  .card:nth-child(even){padding-left:0}
}

/* ---------- the phone is its own composition ---------- */
@media (max-width:860px){
  :root{--hdr:60px;--mm:.967px}
  .wrap{padding:0 20px}
  .hdr__in{padding:0 20px;gap:14px}
  .nav{display:none}
  .burger{display:inline-flex}
  .menu a{padding:13px 20px}
  /* the sheet ends on the viewport edge: a hard border across the plate cut a label in half */
  .menu{min-height:calc(100svh - var(--hdr))}
  .only-d{display:none}

  /* the fold is words and the switchboard, and it ends on the bottom edge of the
     enclosure. The list of what is inside it continues under the fold, on the same plate. */
  /* the fold ends on the bottom edge of the enclosure: 60 header + 326 words + 14 + 30 + 16
     + 411 mm of switchboard = 844. The list of what is inside it continues under the fold. */
  .hero{display:block}
  .hero__text{padding:16px 20px 18px;min-height:326px;justify-content:flex-start}
  .hero__mid{margin:12px 0 0}
  .hero .eyebrow{font-size:11px;letter-spacing:.12em}
  .hero h1{font-size:35px;margin-top:0}
  .dek{font-size:16.5px;margin-top:13px;line-height:1.45}
  .hero__act{margin-top:16px;gap:14px}
  .hero__act .btn{width:100%;min-height:54px}
  .hero__act .lnk{display:none}
  .hero__note{margin-top:13px;font-size:13px;line-height:1.4;max-width:none}
  .field--wide .btn{align-self:stretch;width:100%}

  .plate{padding:14px 20px 30px;gap:16px}
  .plate__sumfig{font-size:20px}
  .board{align-self:center}
  .board-row{flex-direction:column;gap:18px;align-items:stretch}
  .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:0;
    border-top:1px solid var(--rule-d);padding-top:14px}
  .keys div+div{margin-top:0}
  .keys dd{font-size:19px}
  .ryhmat__list{columns:1}
  .ryhmat__list li{padding:6px 0;font-size:14px}

  .sec{padding:60px 0}
  .sec__head{margin-bottom:30px}
  .works{grid-template-columns:1fr;gap:40px}
  .work img{aspect-ratio:5/4}
  .card:nth-child(n+2){border-top:1px solid var(--rule-d)}

  /* four steps as one spine down the page, not a broken row of desktop columns */
  .steps{grid-template-columns:1fr;border-top:0}
  .steps li,.steps li+li{display:grid;grid-template-columns:40px minmax(0,1fr);
    padding:0 0 24px;border-left:0;border-bottom:0;column-gap:12px}
  .steps li+li{padding-top:24px;border-top:1px solid var(--line)}
  .steps__n{grid-column:1;grid-row:1;font-size:23px;line-height:1.15;padding-top:2px}
  .steps__b{grid-column:2;grid-row:1}
  .steps h3{margin-top:0}

  .form{grid-template-columns:1fr}

  /* the ask is never more than one screen away: once after the projects, and standing
     at the bottom edge from the moment the fold is behind you */
  .sec__cta{display:block;margin-top:36px}
  .sec__cta .btn{width:100%;min-height:54px}
  .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:block;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(242,241,237,.97);border-top:1px solid var(--line)}
  .cta-bar[hidden]{display:none}
  .cta-bar .btn{width:100%;min-height:50px}
  .ftr{padding-bottom:104px}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:30px}
  .ftr__list li{padding:0}
  .ftr__list a{display:block;padding:12px 0}
  .mark{min-height:44px}
  .ftr__fiction{margin-top:34px}
}

/* below 340 px the plate's right-hand label has nowhere to go, and a clipped label is
   worse than no label */
@media (max-width:340px){
  .plate__sum{display:none}
}

@media (max-width:520px){
  .facts--wide{grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto auto auto;row-gap:14px}
  .facts--wide div:nth-child(3){padding-left:0;border-left:0}
  .ftr__grid{grid-template-columns:1fr}
}

/* ---------- the old cover, drawn ----------
   The counter-example is the other half of the device: the label card that is actually inside
   most covers. It is drawn rather than photographed because free stock has no Finnish
   ryhmäkeskus in it, and a foreign board under a Finnish caption is the tell this page is
   least able to afford. */
.kansi-fig{margin-top:30px}
.kansi{background:#FBFAF7;border:1px solid #C7C3B6;padding:22px 26px 26px}
.kansi__h{font-family:'Kansi',cursive;font-size:24px;font-weight:var(--w,500);line-height:1;
  color:#4A5058;padding-bottom:12px;border-bottom:2px solid var(--line);
  transform:rotate(var(--r,0));transform-origin:left center}
.kansi__rows{margin-top:2px}
.kansi__rows li{height:38px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.kansi__rows li:last-child{border-bottom:0}
/* written, not typed: an uneven weight and baseline per word, which is what a ballpoint on a
   cover card looks like and what the prose beside it says */
.kansi__w{margin-left:var(--o,0);font-family:'Kansi',cursive;font-size:var(--s,24px);
  font-weight:var(--w,500);line-height:1;color:#4A5058;letter-spacing:.01em;
  transform:rotate(var(--r,-.6deg));transform-origin:left center}
.kansi__w--yli{text-decoration:line-through;text-decoration-thickness:1.5px}
.kansi-fig figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted);max-width:36ch}

/* ---------- one animation, and it is the device: the parts land on the rail ---------- */
@media (prefers-reduced-motion:no-preference){
  .dev{animation:snap .5s cubic-bezier(.2,.7,.3,1) both}
  .board__rail:nth-child(1) .dev{animation-delay:.12s}
  .board__rail:nth-child(2) .dev{animation-delay:.26s}
  .board__rail:nth-child(3) .dev{animation-delay:.40s}
  @keyframes snap{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
}

/* read by a screen reader, not set on the page: the plate's scale line is "1 mod on 17,5 mm" */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ftr__cred{margin-top:8px}

/* ---------- Archbotics label bar ----------
   Added when this example was placed on the storefront (2026-09-06). It is our labelling
   chrome, not part of the fictional firm's page, so it lives in one appended block and the
   two lines of markup it styles are listed in NOTES.md beside this file: a re-synced copy of
   the example is re-labelled in one edit. Same wording pattern as the other specimen sites.
   tools/demo-shots.js hides .demo-banner in the storefront card render, where the caption
   carries the label instead. */
.demo-banner{margin:0;max-width:none;padding:9px 40px;background:var(--ink);color:var(--body-d);
  font-family:var(--sans);font-size:13px;line-height:1.45;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
/* Whose bar this is, first, then what the page is, then ONE verb on the right. The sentence is
   the same one every specimen site here carries; the verb is the only link in the bar, and it
   lands on the price band the visitor came to ask about. */
.demo-banner__mark{color:var(--paper);font-weight:700;letter-spacing:.005em}
.demo-banner__act{color:var(--paper);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;font-weight:700;padding-block:.4rem}
/* The bar is our chrome and the page's focus ring is dark ink, which is invisible on it. */
.demo-banner__act:focus-visible{outline-color:var(--volt)}
/* The bar takes 53px on a phone and 50px on a desktop, measured here, and both numbers have
   to come out of anything on this page that is sized from the WINDOW, or that thing grows by
   exactly the height of the bar. Two rules are sized from the window: the desktop fold
   (.hero is calc(100svh - --hdr)) and the phone menu panel.
   The phone FOLD is deliberately not corrected. It is not a window measure: below 861px the
   source sets .hero{min-height:0} and counts the first screen instead (60 header + 326 words +
   the plate + 411 mm of switchboard = 844), so it already ends exactly on the enclosure's
   bottom edge only on a phone that is exactly 844 tall and overshoots on every shorter one.
   The 326 has 5px of slack in it and the rest of the 53 would have to come out of the drawing,
   which is the one thing this page is about. A taller phone screen and our bar are the same
   case, and the answer to both is to leave the composition alone. */
:root{--banner-h:50px}
@media (min-width:1001px){
  .hero{min-height:calc(100svh - var(--hdr) - var(--banner-h))}
}
@media (max-width:860px){
  :root{--banner-h:53px}
  .demo-banner{padding:9px 20px;font-size:12px}
  .menu{min-height:calc(100svh - var(--hdr) - var(--banner-h))}
}