/* Kivikannas Oy - pihatyöt ja viherrakentaminen, Lahti.
   Idea: piha rakennetaan alaspäin. Device: the cross-section, layers stacked to depth scale.
   Type rule: Fraunces sets the words, Public Sans sets every figure on the page. */

/* ---------- fonts, self-hosted, OFL licences beside the files ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/fraunces-700-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:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/fraunces-700-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:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/public-sans-400-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:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/public-sans-400-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:#16201a;         /* body ink and the ground below the fold */
  --paper:#f5f2ea;       /* dry sand */
  --sand:#eae4d6;        /* gravel */
  --line:#d7cfbd;
  --muted:#556052;
  --green:#2c6138;       /* the one action colour */
  --green-d:#1f4a2a;
  --green-l:#a8ccA4;     /* green on the dark ground */
  --paper-dim:#c8cec4;
  --rule-dark:rgba(245,242,234,.18);
  --hdr:72px;
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --u:.40px;             /* one millimetre of build-up, 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.62;font-weight:400;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
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(--green);outline-offset:3px;border-radius:2px}
.sec--dark :focus-visible,.band :focus-visible{outline-color:var(--green-l)}

/* ---------- type ---------- */
h1{font-family:var(--disp);font-size:clamp(38px,4.3vw,56px);line-height:1.04;letter-spacing:-.016em}
h2{font-family:var(--disp);font-size:clamp(26px,2.8vw,37px);line-height:1.16;letter-spacing:-.012em}
h3{font-size:19px;line-height:1.3;letter-spacing:-.005em}
/* every figure on this page is set in the text face: the display serif's 4 and 3 are
   ambiguous at small sizes, and this page is read for its numbers. */
.num{font-family:var(--sans);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
h1 .num,h2 .num{font-size:.93em;letter-spacing:-.015em}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.145em;text-transform:uppercase;
  line-height:1.5;overflow:visible;color:var(--muted)}
.eyebrow--l{color:var(--paper-dim)}
.dek{font-size:18px;line-height:1.55;max-width:58ch;margin-top:18px}
.small{font-size:14.5px;color:var(--muted)}
.sec--dark .small{color:var(--paper-dim)}

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

/* ---------- 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}
.only-d{display:inline}
.mark__name{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.015em}
.nav{margin-left:auto}
.nav ul{display:flex;gap:30px}
.nav a{font-size:15px;font-weight:600;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--green)}
.burger{display:none;margin-left:auto;background:none;border:1px solid #827F73;
  padding:9px 16px;font:700 14.5px/1 var(--sans);letter-spacing:.02em;color:inherit;cursor:pointer;min-height:44px}
.burger:hover{border-color:var(--green);color:var(--green)}
.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:600;text-decoration:none;border-top:1px solid var(--line)}

/* ---------- the fold: photograph left to the edge, words right, ground line under both ---------- */
.hero{min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column}
.hero__in{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
  align-items:center;gap:56px}
.hero__text{padding:32px max(40px,calc((100vw - 1240px)/2 + 40px)) 32px 0}
.hero__text h1{margin-top:12px}
.hero__act{display:flex;align-items:center;gap:28px;margin-top:26px;flex-wrap:wrap}
.hero__note{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:44ch}
.hero__pic{order:-1;position:relative;align-self:stretch;min-height:0;overflow:hidden;background:var(--sand)}
.hero__pic picture{display:block;height:100%}
.hero__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}

/* the cross-section: the fold ends on the ground line, and under it the layers are
   stacked in the order they are built, each one drawn to its own thickness. */
.band{background:var(--ink);color:var(--paper);flex:0 0 auto}
.band__in{max-width:1240px;margin:0 auto;padding:16px 40px 22px}
.band__top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:12px;border-bottom:1px solid var(--rule-dark)}
.band__label{font-size:12px;font-weight:700;letter-spacing:.145em;text-transform:uppercase;
  line-height:1.5;color:var(--paper-dim)}
.band__sum{font-size:13px;line-height:1;color:var(--paper-dim);white-space:nowrap}
.band__sumfig{font-size:25px;color:var(--paper)}
.band__grid{margin-top:12px;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:calc(80*var(--u)) calc(30*var(--u)) calc(150*var(--u)) calc(340*var(--u)) 22px;
  column-gap:22px}
.layer,.sub{display:contents}
.layer__name,.sub__name{grid-column:1;justify-self:end;text-align:right;align-self:center;
  font-size:12px;font-weight:700;letter-spacing:.115em;text-transform:uppercase;line-height:1.5;color:var(--c)}
.layer__bar{grid-column:2;width:100%;height:100%;background-color:var(--c);background-image:var(--tex);
  border-top:1px solid rgba(22,32,26,.55);transform-origin:top center}
.layer__fig{grid-column:3;align-self:center;font-family:var(--sans);font-weight:700;font-size:20px;
  line-height:1;letter-spacing:-.01em;white-space:nowrap}
.layer__u{font-size:13px;font-weight:400;letter-spacing:0;color:var(--paper-dim)}
.layer:nth-child(1) .layer__name,.layer:nth-child(1) .layer__fig{grid-row:1}
.layer:nth-child(2) .layer__name,.layer:nth-child(2) .layer__fig{grid-row:2}
.layer:nth-child(3) .layer__name,.layer:nth-child(3) .layer__fig{grid-row:3}
.layer:nth-child(4) .layer__name,.layer:nth-child(4) .layer__fig{grid-row:4}
.layer:nth-child(1) .layer__bar{grid-row:1}
.layer:nth-child(2) .layer__bar{grid-row:2}
.layer:nth-child(3) .layer__bar{grid-row:3}
.layer:nth-child(4) .layer__bar{grid-row:4}
.sub__name{grid-row:5;color:#a29883}
.sub__bar{grid-row:5;grid-column:2;width:100%;height:100%;border-top:2px dashed rgba(245,242,234,.5);
  background-image:repeating-linear-gradient(45deg,rgba(245,242,234,.12) 0 1px,transparent 1px 7px)}
.sub__note{grid-row:5;grid-column:3;align-self:center;font-size:12px;line-height:1.5;color:var(--paper-dim);white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .layer__bar{animation:grow .7s cubic-bezier(.22,.68,.3,1) both}
  .layer:nth-child(1) .layer__bar{animation-delay:.10s}
  .layer:nth-child(2) .layer__bar{animation-delay:.22s}
  .layer:nth-child(3) .layer__bar{animation-delay:.34s}
  .layer:nth-child(4) .layer__bar{animation-delay:.46s}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

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

.dual{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start}
.dual__text h2{margin:14px 0 26px}
.dual__text p+p{margin-top:18px}
.sec--dark .dual__text p{color:#e6e3d9;max-width:52ch}
.dual__pic img{width:100%;height:auto}
.dual__pic figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}
.sec--dark .dual__pic figcaption{color:var(--paper-dim)}
.dual--rev .dual__text{order:2}
.dual--rev .dual__pic{order:1}

/* the layers section carries no photograph: no free-stock frame of Finnish groundwork
   exists that is not warmer, sunnier or more foreign than the fold's, and a foreign
   photograph costs more than an empty column. The heading holds the left column instead. */
.dual--split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.dual--split h2{margin-top:14px}
.dual--split .dual__body p{max-width:56ch}
.dual--split .dual__body p+p{margin-top:18px}
.sec--dark .dual__body p{color:#e6e3d9}

.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:72px;
  border-top:1px solid var(--rule-dark)}
.notes li{padding:26px 30px 0 0}
.notes li+li{padding-left:30px;border-left:1px solid var(--rule-dark)}
.notes h3{color:var(--green-l)}
.notes p{margin-top:10px;font-size:15.5px;line-height:1.55;color:#e6e3d9}

/* ---------- työt: no photographs here, the depths are the picture ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.card{padding:30px 0 34px}
.card:nth-child(odd){padding-right:56px;border-right:1px solid var(--line)}
.card:nth-child(even){padding-left:56px}
.card:nth-child(-n+2){border-top:1px solid var(--line)}
.card:nth-child(n+3){border-top:1px solid var(--line)}
.card h3{font-size:22px}
.chip{display:inline-block;margin-top:12px;padding:5px 11px;background:var(--sand);
  font-size:12px;font-weight:700;letter-spacing:.115em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.chip .num{letter-spacing:.06em}
.card p:not(.chip){margin-top:14px;font-size:16px;line-height:1.6;max-width:48ch}
.card ul{margin-top:18px;border-top:1px solid var(--line)}
.card li{padding:9px 0 9px 20px;border-bottom:1px solid var(--line);font-size:15px;position:relative;color:var(--muted)}
.card li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:2px;background:var(--green)}

/* ---------- kohteet ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.work img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--paper)}
.work__where{margin-top:20px;font-size:12px;font-weight:700;letter-spacing:.145em;text-transform:uppercase;
  line-height:1.5;color:var(--muted)}
.work__year{letter-spacing:.1em}
.work h3{margin-top:8px;font-size:20px}
.work p:not(.work__where){margin-top:12px;font-size:15.5px;line-height:1.58}
.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:11.5px;font-weight:700;letter-spacing:.115em;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}
.facts--wide{grid-template-columns:repeat(4,1fr);margin-top:30px}
.facts--wide dd{font-size:26px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.steps li{padding:22px 24px 0 0}
.steps li+li{padding-left:24px;border-left:1px solid var(--line)}
.steps__n{font-size:28px;line-height:1;color:var(--green)}
.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:72px}
.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:12.5px;font-weight:700;letter-spacing:.115em;text-transform:uppercase;
  line-height:1.5;color:var(--paper-dim);margin-bottom:8px}
.field input,.field select,.field textarea{font:400 16.5px/1.5 var(--sans);color:var(--paper);
  background:#1e2a22;border:1px solid #728276;padding:13px 14px;min-height:50px;border-radius:0}
.field textarea{resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#819281}
.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(--green-l);font-weight:600}
.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:64px 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:12px;font-weight:700;letter-spacing:.145em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.ftr__h--2{margin-top:22px}
.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(--green)}
.ftr p .lnk--l{color:var(--green);border-color:var(--green)}
.ftr__fiction{margin-top:52px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted)}
.ftr__fiction span{color:var(--muted)}

/* ---------- narrow ---------- */
@media (max-width:1080px){
  .works{gap:32px}
  .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:28px}
  .dual--rev .dual__text{order:1}
  .dual--rev .dual__pic{order:2}
  .notes{grid-template-columns:1fr;margin-top:48px}
  .notes li{padding:22px 0 22px}
  .notes li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule-dark)}
  .card:nth-child(odd){padding-right:36px}
  .card:nth-child(even){padding-left:36px}
}

/* ---------- the phone is its own composition ---------- */
@media (max-width:860px){
  :root{--hdr:60px;--u:.45px}
  .wrap{padding:0 20px}
  .hdr__in{padding:0 20px;gap:14px}
  .nav{display:none}
  .burger{display:inline-flex}
  .menu a{padding:13px 20px}

  .only-d{display:none}
  /* the phone fold is words and the ground line, nothing else: the photograph is the
     first thing under the ground, full width and at its own height, not a letterbox. */
  .hero{--bandh:357px}
  .hero__in{display:contents}
  .hero__text{order:1;padding:16px 20px 18px;display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100svh - var(--hdr) - var(--bandh))}
  .hero .eyebrow{font-size:11px;letter-spacing:.12em}
  .hero h1{font-size:40px;margin-top:12px}
  .dek{font-size:16.5px;margin-top:14px;line-height:1.5}
  .hero__act{margin-top:16px;gap:14px}
  .hero__act .btn{width:100%;min-height:54px}
  .field--wide .btn{align-self:stretch;width:100%}
  .hero__act .lnk{display:none}
  .hero__note{margin-top:12px;font-size:13px;line-height:1.45}
  .band{order:2}
  .hero__pic{order:3;height:auto;aspect-ratio:4/3;align-self:auto}
  .hero__pic img{object-position:50% 50%}

  /* the section runs off the right edge: the ground does not stop at the margin */
  .band__in{padding:12px 20px 16px}
  .band__top{padding-bottom:8px}
  .band__label{font-size:11px;letter-spacing:.12em}
  .band__sumfig{font-size:21px}
  .band__grid{margin-top:9px;column-gap:13px;
    grid-template-rows:calc(80*var(--u)) calc(30*var(--u)) calc(150*var(--u)) calc(340*var(--u)) 18px}
  .layer__name,.sub__name{font-size:10.5px;letter-spacing:.1em}
  .layer__fig{font-size:16px}
  .layer__u{font-size:11px}
  .sub__note{display:none}

  /* on the phone the finished yards come before the argument about what is under them:
     a reader on a small screen wants the result on screen two. Desktop order is untouched,
     and so is the menu, which lists the sections in their document order. */
  main{display:flex;flex-direction:column}
  .hero{order:-3}
  #kohteet{order:-2}
  #rakenne{order:-1}

  .sec{padding:64px 0}
  .sec__head{margin-bottom:32px}
  .cards{grid-template-columns:1fr}
  .card{padding:26px 0 30px}
  .card:nth-child(odd),.card:nth-child(even){padding-left:0;padding-right:0;border-right:0}
  .card:nth-child(n+2){border-top:1px solid var(--line)}
  .works{grid-template-columns:1fr;gap:44px}
  .work img{aspect-ratio:5/4}

  /* five 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:44px minmax(0,1fr);
    padding:0 0 26px;border-left:0;border-bottom:0;column-gap:12px}
  .steps li+li{padding-top:26px;border-top:1px solid var(--line)}
  .steps__n{grid-column:1;grid-row:1;font-size:24px;line-height:1.1;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: repeated once after the projects,
     and standing at the bottom edge from the moment the fold is behind you */
  .sec__cta{display:block;margin-top:40px}
  .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(245,242,234,.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:32px}
  .ftr__list li{padding:0}
  .ftr__list a{display:block;padding:12px 0}
  .mark{min-height:44px}
  .ftr p .lnk--l{display:inline-block;padding:11px 0}
  .ftr__fiction{margin-top:36px}
}

@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}
}

/* ---------- 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(--paper-dim);
  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:#fff;font-weight:700;letter-spacing:.005em}
.demo-banner__act{color:#fff;text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;font-weight:700;padding-block:.4rem}
.demo-banner__act:focus-visible{outline-color:var(--green-l)}
/* Both folds are measured against the viewport, so the bar has to come out of that measure
   or the first screen grows by exactly the height of the bar and the cross-section band
   loses its bottom. --banner-h is the bar's rendered height, measured: 50px at the desktop
   size (the verb's own tap padding sets it) and 53px on two lines on a phone. */
:root{--banner-h:50px}
.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}
  /* the phone fold is sized on .hero__text, not on .hero */
  .hero__text{min-height:calc(100svh - var(--hdr) - var(--bandh) - var(--banner-h))}
}

/* ---------- one layout fix carried on the storefront copy ----------
   The Kohteet grid keeps three columns down to 861px, and each card is floored by the
   min-content of its three-column .facts row (300px measured), so the page scrolled
   sideways between roughly 880 and 1035px: iPad landscape and a half-screen laptop, the
   exact band tools/showcase-shots.js was given a third viewport for. The same 300px floor
   also broke the smallest phone still in use: at 320px the card overflowed by 11px, with the
   grid already down to one column. The facts wrap to two columns in both bands, which drops
   the card floor to about 200px and leaves every width between them untouched. Same shape as
   the .facts--wide rule at 520px.
   Reported to the example's own round: if the source gains this fix, this block is
   redundant rather than wrong. Listed in NOTES.md with the label bar above. */
@media (max-width:1080px) and (min-width:861px),(max-width:339px){
  .work .facts{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;row-gap:14px}
  .work .facts div:nth-child(3){padding-left:0;border-left:0}
}