/* HS Autosdružení s.r.o.
   Warm paper, slate ink, teal for every action and rose for the numerals and
   accents. Built from the supplied palette. Sections: 1 fonts, 2 tokens,
   3 base, 4 header, 5 hero, 6 blocks, 7 services, 8 guide, 9 form, 10 footer,
   11 cookie bar, 12 motion, 13 print, 14 narrow. */

/* ---------------------------------------------------------------- 1 fonts
   Served from this origin, never a font CDN, so no request leaves the
   visitor's browser to a third party before the cookie choice is made. One
   variable file per family per Unicode range covers every weight.

   The extended files are cut down to the letters Czech and Slovak actually
   use rather than the whole Latin Extended block, which took them from 69 kB
   to 17 kB together. The declared unicode-range matches what is inside them,
   so a character outside that set falls back to a system font instead of
   triggering a download that could not render it. Both families are under the SIL
   Open Font License; see LICENSE.txt in this folder. */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/archivo-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-0107,U+010C-010F,U+0118-011B,U+0139-013A,U+013D-013E,U+0141-0144,U+0147-0148,U+0154-0155,U+0158-0161,U+0164-0165,U+016E-016F,U+0179-017E; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/archivo.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:'Newsreader'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/news-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-0107,U+010C-010F,U+0118-011B,U+0139-013A,U+013D-013E,U+0141-0144,U+0147-0148,U+0154-0155,U+0158-0161,U+0164-0165,U+016E-016F,U+0179-017E; }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/news.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; }

/* --------------------------------------------------------------- 2 tokens */
:root{
  --slate:#2F4454;
  --dark:#1C3334;
  --deepest:#2E151B;
  --teal:#376E6F;
  --teal-d:#2B5859;
  --rose:#DA7B93;

  --paper:#F6F4F1;
  --paper-2:#EDEAE4;
  --card:#FFFFFF;
  --ink:#22323F;
  --ink-2:#4C5E6C;
  --mute:#7E8C98;
  --line:#DCD7D0;
  --line-2:#E7E3DC;

  --disp:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --text:'Newsreader',Georgia,'Times New Roman',serif;
  --ui:'Archivo',system-ui,sans-serif;

  --shell:76rem;
  --measure:35rem;
  --rail:12rem;
  --gut:clamp(18px,5vw,56px);
  --hh:66px;
  --r:4px;
  --r-lg:16px;
  --e:cubic-bezier(.2,.6,.35,1);
  --e-soft:cubic-bezier(.33,.06,.18,1);
}

/* ----------------------------------------------------------------- 3 base */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:18px; line-height:1.68;
  font-synthesis-weight:none; overflow-x:clip; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--teal); text-underline-offset:.2em; text-decoration-thickness:1px; }
a:hover{ color:var(--teal-d); }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:620; line-height:1.1;
  letter-spacing:-.022em; margin:0 0 .5em; }
h1{ font-size:clamp(2.1rem,5.2vw,3.9rem); line-height:1.02; letter-spacing:-.033em; }
h2{ font-size:clamp(1.65rem,3.2vw,2.5rem); }
h3{ font-size:clamp(1.12rem,1.8vw,1.35rem); }
p{ margin:0 0 1.1em; }
:focus-visible{ outline:2.5px solid var(--teal); outline-offset:3px; border-radius:2px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--slate);
  color:#fff; padding:12px 20px; font-family:var(--ui); font-weight:600; }
.skip:focus{ left:0; }

.shell{ width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto; }
.measure{ max-width:var(--measure); }
.num{ font-variant-numeric:tabular-nums lining-nums; }
.ui{ font-family:var(--ui); }

/* The eyebrow, with the rose rule that draws itself in. */
.kick{ display:flex; align-items:center; gap:.7em; font-family:var(--ui);
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal); margin:0 0 1.1em; }
.kick::before{ content:''; width:24px; height:2px; background:var(--rose); flex:none;
  transform-origin:left; transform:scaleX(0); transition:transform .8s var(--e-soft) .1s; }
.in .kick::before,.kick.in::before{ transform:scaleX(1); }
.lede{ font-size:clamp(1.05rem,1.8vw,1.26rem); line-height:1.6; color:var(--ink-2); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:transparent; padding:.8em 1.5em; border:1.6px solid transparent;
  border-radius:var(--r); font-family:var(--ui); font-weight:620; font-size:.95rem;
  text-decoration:none; transition:background .2s var(--e), color .2s var(--e),
  border-color .2s var(--e), transform .2s var(--e); }
.btn:active{ transform:translateY(1px); }
.b-fill{ background:var(--teal); color:#fff; }
.b-fill:hover{ background:var(--teal-d); color:#fff; }
.b-line{ border-color:var(--line); color:var(--ink); background:var(--card); }
.b-line:hover{ border-color:var(--teal); color:var(--teal); }
.b-ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.b-ghost:hover{ background:rgba(255,255,255,.1); color:#fff; }
.b-sm{ padding:.56em 1.05em; font-size:.85rem; }
.row{ display:flex; flex-wrap:wrap; gap:12px; }

/* --------------------------------------------------------------- 4 header */
.hdr{ position:sticky; top:0; z-index:80; background:rgba(246,244,241,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2); }
.hdr-in{ height:var(--hh); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--ink); flex:none; }
.brand svg{ width:26px; height:26px; flex:none; }
.brand b{ font-family:var(--disp); font-weight:700; font-size:1.06rem; letter-spacing:-.02em; }
.brand s{ text-decoration:none; font-family:var(--ui); font-size:.6rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.nav{ display:flex; align-items:center; gap:22px; }
.nav a{ font-family:var(--ui); text-decoration:none; color:var(--ink-2); font-size:.88rem;
  font-weight:540; position:relative; padding-block:5px; }
.nav a::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1.6px;
  background:var(--rose); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--e); }
.nav a:hover{ color:var(--ink); }
.nav a:hover::after,.nav a[aria-current]::after{ transform:scaleX(1); }
.nav a[aria-current]{ color:var(--ink); }
.hdr-act{ display:flex; align-items:center; gap:10px; flex:none; }
.tel{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--ui);
  font-size:.85rem; font-weight:620; color:var(--ink); text-decoration:none;
  white-space:nowrap; }
.tel svg{ width:17px; height:17px; flex:none; color:var(--teal); }
.tel:hover{ color:var(--teal); }
.burger{ display:none; width:40px; height:40px; border:1.5px solid var(--line);
  background:var(--card); border-radius:var(--r); position:relative; }
.burger i{ position:absolute; left:10px; right:10px; height:1.7px; background:var(--ink);
  transition:transform .3s var(--e); }
.burger i:nth-child(1){ top:16px; } .burger i:nth-child(2){ top:22px; }
.burger[aria-expanded=true] i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded=true] i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.sheet{ position:fixed; inset:var(--hh) 0 auto; z-index:79; background:var(--card);
  border-bottom:1px solid var(--line); padding:8px var(--gut) 24px;
  transform:translateY(-102%); transition:transform .4s var(--e); }
.sheet.open{ transform:none; }
.sheet a{ display:block; font-family:var(--disp); font-size:1.3rem; font-weight:620;
  text-decoration:none; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--line-2); }
.sheet .btn{ margin-top:18px; width:100%; }

/* ----------------------------------------------------------------- 5 hero */
.hero{ padding-block:clamp(40px,6vw,86px) clamp(28px,4vw,52px); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4.5vw,60px); align-items:center; }
.hero-grid > *{ min-width:0; }
.hero h1{ margin-bottom:.4em; }
.hero .lede{ max-width:32rem; }
.hero-act{ margin-top:26px; }
.hero-fig{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3.1; background:var(--paper-2); border:1px solid var(--line-2); }
.hero-fig img{ width:100%; height:100%; object-fit:cover; }
.tick{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:24px; padding-top:20px;
  border-top:1px solid var(--line); font-family:var(--ui); font-size:.82rem; color:var(--mute); }
.tick span{ display:inline-flex; align-items:center; gap:.5em; }
.tick span::before{ content:''; width:6px; height:6px; background:var(--rose);
  border-radius:50%; flex:none; }

.crumb{ font-family:var(--ui); font-size:.78rem; color:var(--mute); margin-bottom:16px; }
.crumb a{ color:var(--mute); text-decoration:none; }
.crumb a:hover{ color:var(--teal); }
.head{ padding-block:clamp(32px,5vw,64px) clamp(18px,2.4vw,30px); }
.head h1{ font-size:clamp(1.9rem,4.2vw,3rem); }

/* --------------------------------------------------------------- 6 blocks */
.sec{ padding-block:clamp(44px,6.2vw,88px); scroll-margin-top:calc(var(--hh) + 10px); }
.sec-sm{ padding-block:clamp(28px,3.6vw,48px); scroll-margin-top:calc(var(--hh) + 10px); }
.band{ background:var(--paper-2); border-block:1px solid var(--line-2); }
.ink{ background:var(--dark); color:#fff; }
.ink h2,.ink h3{ color:#fff; }
.ink .kick{ color:var(--rose); }
.ink .kick::before{ background:#fff; }
.ink .lede{ color:rgba(255,255,255,.76); }
.ink a{ color:var(--rose); }

.s-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,3.5vw,52px); align-items:end; margin-bottom:clamp(26px,3.4vw,46px); }
.s-head > *{ min-width:0; }
.s-head > p{ margin:0; }

.g2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); }
.g3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); }
.g4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px); }
.g2 > *,.g3 > *,.g4 > *{ min-width:0; }

/* The three pillars. A heavy rose numeral above a rule that draws in. */
.pil{ padding-top:20px; border-top:1.5px solid var(--line); position:relative; }
.pil::before{ content:''; position:absolute; top:-1.5px; left:0; width:100%; height:1.5px;
  background:var(--rose); transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--e-soft); }
.pil.in::before{ transform:scaleX(1); }
.pil i{ font-style:normal; font-family:var(--disp); font-size:1.45rem; font-weight:800;
  color:var(--rose); display:block; margin-bottom:10px; letter-spacing:-.03em; }
.pil h3{ margin-bottom:.45em; }
.pil p{ margin:0; color:var(--ink-2); font-size:.97rem; }

.card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,26px); }
.card h3{ margin-bottom:.45em; }
.card p{ margin:0; color:var(--ink-2); font-size:.95rem; }

.step{ padding-top:18px; border-top:1.5px solid var(--line); }
.step b{ font-family:var(--disp); font-size:1.3rem; font-weight:800; color:var(--rose);
  display:block; margin-bottom:10px; letter-spacing:-.03em; }
.step h4{ font-family:var(--disp); font-size:1.04rem; margin-bottom:.4em; }
.step p{ font-size:.93rem; color:var(--ink-2); margin:0; }

/* The principles, numbered, on the dark band. */
.princ{ counter-reset:pr; margin:0; padding:0; }
.princ li{ counter-increment:pr; list-style:none; display:grid;
  grid-template-columns:2.4rem minmax(0,1fr); gap:1em; padding-block:1em;
  border-bottom:1px solid rgba(255,255,255,.14); align-items:start; }
.princ li:last-child{ border-bottom:none; }
.princ li::before{ content:counter(pr,decimal-leading-zero); font-family:var(--disp);
  font-weight:800; font-size:.86rem; color:var(--rose); padding-top:.35em; }
.princ li span{ color:rgba(255,255,255,.88); line-height:1.6; }

.qa{ border-top:1px solid var(--line); max-width:52rem; }
.qa-i{ border-bottom:1px solid var(--line); }
.qa-q{ width:100%; background:none; border:0; text-align:left; padding:1.1em 2.4em 1.1em 0;
  font-family:var(--disp); font-size:1.05rem; font-weight:620; line-height:1.35;
  position:relative; color:var(--ink); }
.qa-x{ position:absolute; right:2px; top:1.45em; width:13px; height:13px; }
.qa-x::before,.qa-x::after{ content:''; position:absolute; background:var(--teal);
  left:0; top:5.6px; width:13px; height:1.8px; transition:transform .3s var(--e); }
.qa-x::after{ transform:rotate(90deg); }
.qa-i.open .qa-x::after{ transform:rotate(0); }
.qa-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s var(--e); }
.qa-i.open .qa-a{ grid-template-rows:1fr; }
.qa-a > div{ overflow:hidden; }
.qa-a p{ margin:0 0 1.25em; color:var(--ink-2); max-width:var(--measure); font-size:.97rem; }

.kv{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.5em 1.6em;
  font-size:.95rem; align-items:baseline; font-family:var(--ui); }
.kv dt{ color:var(--mute); }
.kv dd{ margin:0; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.hours{ display:grid; grid-template-columns:auto auto; gap:.4em 1.8em;
  font-family:var(--ui); font-size:.92rem; justify-content:start; }
.hours span:nth-child(even){ font-variant-numeric:tabular-nums; font-weight:620; }
.hours .cl{ color:var(--mute); font-weight:400; }

.cta{ background:var(--dark); color:#fff; border-radius:var(--r-lg);
  padding:clamp(26px,4.5vw,52px); text-align:center; }
.cta h2{ color:#fff; margin-bottom:.4em; }
.cta p{ color:rgba(255,255,255,.78); max-width:34rem; margin-inline:auto; }
.cta .row{ justify-content:center; margin-top:24px; }


/* The workshop band. A full width photograph with the text sitting over its
   lower half on a wide screen, and stacked beneath it on a narrow one, which
   is the one place on the site where an image carries a section on its own. */
.shopband{ position:relative; margin-block:clamp(10px,2vw,24px); }
.shop-fig{ margin:0; position:relative; overflow:hidden; aspect-ratio:21/9;
  background:var(--dark); }
.shop-fig img{ width:100%; height:100%; object-fit:cover; }
.shop-fig::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,51,52,.15) 8%,rgba(28,51,52,.9)); }
.shop-in{ position:absolute; inset-inline:0; bottom:clamp(20px,3.5vw,46px); left:50%;
  transform:translateX(-50%); }
.shop-txt{ max-width:34rem; color:#fff; }
.shop-txt h2{ color:#fff; margin-bottom:.4em; }
.shop-txt p{ color:rgba(255,255,255,.84); margin:0; }
.shop-txt .kick{ color:var(--rose); }
.shop-txt .kick::before{ background:#fff; }
.shop-txt .hours{ color:rgba(255,255,255,.84); }
.shop-txt .hours span:nth-child(even){ color:#fff; }
.shop-txt .hours .cl{ color:rgba(255,255,255,.55); }

/* The service cards on the home page carry their one line summary, so the grid
   is not eight near identical tiles. */
.srv-card{ display:flex; flex-direction:column; gap:.55em; text-decoration:none;
  color:inherit; transition:border-color .2s var(--e), transform .2s var(--e); }
.srv-card:hover{ border-color:var(--teal); transform:translateY(-2px); }
.srv-card h3{ font-size:1rem; margin:0; }
.srv-card p{ font-size:.88rem; }
.srv-card-h{ margin-top:auto; padding-top:.6em; border-top:1px solid var(--line-2);
  font-family:var(--ui); font-size:.78rem; color:var(--mute); }

/* ------------------------------------------------------------- 7 services
   A ledger rather than a grid of cards: the eye runs down one column and the
   orientational duration sits on the right where a price would normally be. */
.srv{ display:grid; grid-template-columns:3.2rem minmax(0,1fr) auto;
  gap:clamp(12px,2vw,28px); padding-block:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--line); align-items:start;
  scroll-margin-top:calc(var(--hh) + 14px); }
.srv > *{ min-width:0; }
.srv:last-of-type{ border-bottom:1px solid var(--line); }
.srv-n{ font-family:var(--disp); font-size:.84rem; font-weight:800; letter-spacing:.1em;
  color:var(--rose); padding-top:.4em; }
.srv h3{ margin-bottom:.35em; }
.srv > div > p{ margin:0 0 .9em; color:var(--ink-2); font-size:.97rem; max-width:40rem; }
.srv ul{ list-style:none; margin:0; padding:0; display:grid; gap:.35em; }
.srv li{ position:relative; padding-left:1.1em; font-family:var(--ui); font-size:.88rem;
  color:var(--ink-2); line-height:1.55; }
.srv li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:1.6px;
  background:var(--teal); }
.srv-h{ font-family:var(--ui); font-size:.82rem; color:var(--mute); white-space:nowrap;
  padding-top:.5em; text-align:right; }
.srv-h b{ display:block; color:var(--ink); font-weight:620; font-size:.9rem; }

/* ---------------------------------------------------------------- 8 guide */
.g-wrap{ display:grid; grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(24px,4vw,60px); align-items:start; }
.g-wrap > *{ min-width:0; }
.toc{ position:sticky; top:calc(var(--hh) + 24px); font-family:var(--ui); font-size:.85rem; }
.toc h4{ font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute); margin:0 0 14px; }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:tc; }
.toc li{ counter-increment:tc; }
.toc a{ display:grid; grid-template-columns:1.8em 1fr; gap:.3em; text-decoration:none;
  color:var(--ink-2); padding:7px 0; line-height:1.35; border-bottom:1px solid var(--line-2);
  transition:color .2s; }
.toc a::before{ content:counter(tc,decimal-leading-zero); font-weight:700; color:var(--mute);
  font-size:.76rem; }
.toc a:hover{ color:var(--teal); }
.toc a.on{ color:var(--teal); font-weight:620; }
.toc a.on::before{ color:var(--rose); }
.toc-note{ margin-top:16px; font-size:.78rem; color:var(--mute); line-height:1.5; }

.prog{ position:fixed; top:0; left:0; right:0; height:3px; z-index:90; pointer-events:none; }
.prog i{ display:block; height:100%; width:0; background:var(--rose);
  transition:width .12s linear; }

.chap{ padding-bottom:clamp(34px,5vw,64px); scroll-margin-top:calc(var(--hh) + 18px); }
.chap + .chap{ padding-top:clamp(30px,4.4vw,56px); border-top:1px solid var(--line); }
.chap-n{ font-family:var(--disp); font-size:clamp(2.4rem,5.4vw,3.9rem); font-weight:800;
  line-height:.9; letter-spacing:-.045em; color:transparent;
  -webkit-text-stroke:1.4px var(--line); display:block; margin-bottom:8px;
  transition:color .7s var(--e-soft), -webkit-text-stroke-color .7s var(--e-soft); }
.chap.in .chap-n{ color:rgba(218,123,147,.14); -webkit-text-stroke-color:rgba(218,123,147,.55); }
.chap h2{ margin-bottom:.35em; }
.chap .dek{ font-family:var(--text); font-style:italic; font-size:clamp(1.05rem,1.7vw,1.22rem);
  color:var(--teal); line-height:1.5; margin-bottom:1.4em; max-width:34rem; }
.chap p,.chap ul{ max-width:var(--measure); }
.chap h3{ font-size:1.22rem; margin-block:1.7em .5em; }
.chap ul{ padding-left:0; list-style:none; margin:0 0 1.3em; }
.chap ul li{ position:relative; padding-left:1.3em; margin-bottom:.55em; }
.chap ul li::before{ content:''; position:absolute; left:0; top:.72em; width:8px; height:1.8px;
  background:var(--rose); }

.pull{ font-family:var(--disp); font-size:clamp(1.18rem,2.2vw,1.6rem); line-height:1.3;
  font-weight:620; letter-spacing:-.02em; color:var(--slate); margin-block:1.7em;
  padding-left:clamp(14px,2vw,24px); border-left:3px solid var(--rose); max-width:33rem; }

.note{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(17px,2.3vw,25px); margin-block:1.7em; max-width:var(--measure); }
.note h4{ font-family:var(--ui); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); margin:0 0 .7em; }
.note p{ margin:0; font-size:.95rem; color:var(--ink-2); }

.chap-fig{ margin-block:2em; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); }
.chap-fig img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.tbl{ margin-block:1.8em; }
.tbl-cap{ font-family:var(--ui); font-size:.84rem; color:var(--mute); margin-bottom:.8em;
  line-height:1.5; }
.tbl-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); }
table{ border-collapse:collapse; width:100%; font-family:var(--ui); font-size:.9rem;
  min-width:28rem; }
th,td{ text-align:left; padding:.75em 1em; border-bottom:1px solid var(--line-2);
  vertical-align:top; }
thead th{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute); background:var(--paper-2); border-bottom:1px solid var(--line);
  white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }
.tbl-foot{ font-family:var(--ui); font-size:.82rem; color:var(--mute); margin-top:.8em;
  line-height:1.55; }

/* The handover checklist, the most actionable block in the guide. */
.checks{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-block:1.8em; }
.check{ background:var(--card); padding:clamp(15px,2vw,21px); display:grid;
  grid-template-columns:2rem minmax(0,1fr); gap:.2em 1em; align-items:start; }
.check em{ grid-row:span 2; font-style:normal; font-family:var(--disp); font-weight:800;
  font-size:1rem; color:var(--rose); line-height:1.5; }
.check b{ grid-column:2; font-family:var(--disp); font-size:1rem; line-height:1.4; }
.check span{ grid-column:2; font-size:.94rem; color:var(--ink-2); line-height:1.6; }

/* ----------------------------------------------------------------- 9 form */
.form{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,3.2vw,36px); }
.fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 18px; }
.fld{ display:flex; flex-direction:column; gap:6px; }
.fld.wide{ grid-column:1 / -1; }
.fld label{ font-family:var(--ui); font-size:.82rem; font-weight:620; color:var(--ink-2); }
.fld label i{ font-style:normal; color:var(--mute); font-weight:400; }
.fld input,.fld select,.fld textarea{ font-family:var(--ui); font-size:.95rem;
  color:var(--ink); background:var(--paper); border:1.5px solid var(--line);
  border-radius:var(--r); padding:.7em .85em; width:100%; transition:border-color .2s, background .2s; }
.fld textarea{ min-height:6em; resize:vertical; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ background:var(--card);
  border-color:var(--teal); }
.fld.bad input,.fld.bad select,.fld.bad textarea{ border-color:#B4404C; }
.err{ font-family:var(--ui); font-size:.8rem; color:#A8323E; min-height:1.1em; }
.consent{ grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:.7em; align-items:start; font-family:var(--ui); font-size:.88rem; color:var(--ink-2);
  line-height:1.55; }
.consent input{ width:18px; height:18px; margin-top:.2em; accent-color:var(--teal); }
.form-foot{ margin-top:18px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:space-between; }
.form-note{ font-family:var(--ui); font-size:.82rem; color:var(--mute); max-width:24rem;
  line-height:1.5; margin:0; }
.fallback{ margin-top:18px; padding:15px; background:var(--paper-2); border-radius:var(--r);
  font-family:var(--ui); font-size:.88rem; }
.fallback textarea{ width:100%; min-height:8em; margin-top:9px; font-family:var(--ui);
  font-size:.85rem; border:1px solid var(--line); border-radius:var(--r); padding:.65em;
  background:var(--card); color:var(--ink); }

/* -------------------------------------------------------------- 10 footer */
.disc{ background:var(--paper-2); border-block:1px solid var(--line-2); }
.disc p{ margin:0; padding-block:15px; font-family:var(--ui); font-size:.84rem;
  color:var(--ink-2); line-height:1.55; }
.disc b{ color:var(--slate); }
.ftr{ background:var(--slate); color:rgba(255,255,255,.76); padding-block:clamp(38px,5vw,66px) 26px;
  font-family:var(--ui); font-size:.88rem; }
.ftr a{ color:rgba(255,255,255,.82); text-decoration:none; }
.ftr a:hover{ color:var(--rose); }
.ftr h4{ font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin:0 0 1em; }
.ftr-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(20px,3vw,40px);
  padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.14); }
.ftr-top > *{ min-width:0; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55em; }
.ftr .brand b{ color:#fff; } .ftr .brand s{ color:rgba(255,255,255,.5); }
.blurb{ margin-top:14px; font-size:.85rem; line-height:1.6; max-width:23rem;
  color:rgba(255,255,255,.62); }
.lnk{ background:none; border:0; padding:0; color:rgba(255,255,255,.82);
  text-decoration:underline; text-underline-offset:.2em; font-size:inherit; }
.lnk:hover{ color:var(--rose); }
.imprint{ padding-block:22px; border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.8rem; line-height:1.75; color:rgba(255,255,255,.6); }
.imprint b{ color:rgba(255,255,255,.86); font-weight:620; }
.ftr-btm{ padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.78rem; color:rgba(255,255,255,.5); }

/* ---------------------------------------------------------- 11 cookie bar */
.ck{ position:fixed; z-index:96; bottom:0; left:0; right:0; background:var(--card);
  border-top:1px solid var(--line); box-shadow:0 -10px 36px rgba(34,50,63,.09);
  transform:translateY(102%); transition:transform .42s var(--e); }
.ck.show{ transform:none; }
.ck-in{ padding-block:18px 20px; display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:18px 26px; align-items:center; }
.ck h4{ font-family:var(--disp); font-size:1.05rem; font-weight:620; margin:0 0 .35em;
  color:var(--ink); }
.ck p{ margin:0; font-family:var(--ui); font-size:.86rem; color:var(--ink-2);
  max-width:44rem; line-height:1.55; }
.ck .row{ flex:none; }
.ck-opts{ grid-column:1 / -1; display:none; gap:18px; flex-wrap:wrap; padding-top:14px;
  border-top:1px solid var(--line-2); }
.ck.x .ck-opts{ display:flex; }
.ck-opts label{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--ui);
  font-size:.86rem; color:var(--ink-2); }
.ck-opts input{ width:16px; height:16px; accent-color:var(--teal); }
.ck-opts .fix{ color:var(--mute); }

/* --------------------------------------------------------------- 12 motion
   The resting state never clips the box to zero: a clipped element reports an
   intersection ratio of 0, so the observer that is meant to reveal it never
   sees it arrive. The wipe runs as an animation once the class is on. */
.up{ opacity:0; transform:translateY(12px);
  transition:opacity .5s linear, transform .75s var(--e-soft); }
.up.in{ opacity:1; transform:none; animation:rise .8s var(--e-soft) both; }
@keyframes rise{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
.stg > *{ opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--e-soft), transform .6s var(--e-soft); }
.stg.in > *{ opacity:1; transform:none; }
.stg.in > *:nth-child(2){ transition-delay:.07s; }
.stg.in > *:nth-child(3){ transition-delay:.14s; }
.stg.in > *:nth-child(4){ transition-delay:.21s; }
.stg.in > *:nth-child(5){ transition-delay:.28s; }
.stg.in > *:nth-child(6){ transition-delay:.35s; }
.stg.in > *:nth-child(7){ transition-delay:.42s; }
.stg.in > *:nth-child(8){ transition-delay:.49s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .up,.stg > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .pil::before,.kick::before{ transform:scaleX(1) !important; }
}

/* ---------------------------------------------------------------- 13 print
   The guide is what people print, so it is laid out for paper. */
@media print{
  .hdr,.sheet,.ck,.prog,.burger,.hero-act,.cta,.hero-fig,.form{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; line-height:1.5; }
  .g-wrap{ display:block; }
  .toc{ position:static; page-break-after:always; }
  .sec,.hero,.head{ padding-block:0 16pt; }
  .chap h2,.chap h3{ page-break-after:avoid; }
  .note,.checks,.tbl,.chap-fig,.srv,.qa-i{ page-break-inside:avoid; }
  .chap-fig{ max-height:70mm; }
  .chap-n{ color:#777 !important; -webkit-text-stroke:0 !important; font-size:17pt; }
  .qa-a{ grid-template-rows:1fr !important; }
  .up,.stg > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .band,.card,.note,.ink,.ftr,.disc{ background:none !important; color:#000 !important;
    border-color:#bbb !important; }
  .ftr a,.imprint,.princ li span,.ink h2,.ink h3{ color:#000 !important; }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:8pt; word-break:break-all; }
}

/* --------------------------------------------------------------- 14 narrow */
@media (max-width:1080px){ :root{ --rail:10rem; } .brand s{ display:none; } }
@media (max-width:920px){
  /* the text cannot sit over the picture once the picture is this short */
  .shop-fig{ aspect-ratio:16/10; }
  .shop-fig::after{ display:none; }
  .shop-in{ position:static; transform:none; margin-top:clamp(18px,3vw,28px); }
  .shop-txt{ max-width:none; color:var(--ink); }
  .shop-txt h2{ color:var(--ink); }
  .shop-txt p{ color:var(--ink-2); }
  .shop-txt .kick{ color:var(--teal); }
  .shop-txt .kick::before{ background:var(--rose); }
  .shop-txt .hours{ color:var(--ink-2); }
  .shop-txt .hours span:nth-child(even){ color:var(--ink); }
  .shop-txt .hours .cl{ color:var(--mute); }
  .nav{ display:none; }
  .burger{ display:block; }
  .hdr-act > .btn{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-fig{ aspect-ratio:16/10; }
  .g-wrap{ grid-template-columns:1fr; }
  .toc{ position:static; border:1px solid var(--line); border-radius:var(--r-lg);
    background:var(--card); padding:18px 20px; margin-bottom:32px; }
  .s-head{ grid-template-columns:1fr; align-items:start; }
  .g3,.g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftr-top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  body{ font-size:17px; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .fields{ grid-template-columns:1fr; }
  .srv{ grid-template-columns:2.4rem minmax(0,1fr); }
  .srv-h{ grid-column:2; text-align:left; padding-top:0; margin-top:.7em; }
  .srv-h b{ display:inline; }
  .ck-in{ grid-template-columns:1fr; }
  .ck .row .btn{ flex:1 1 auto; }
}
@media (max-width:430px){
  .hdr-in{ gap:8px; }
  .brand{ gap:7px; } .brand svg{ width:22px; height:22px; } .brand b{ font-size:.95rem; }
  .hdr-act{ gap:7px; }
  /* 320px leaves 284px of content, which the wordmark, the full number and the
     burger do not fit into. Calling stays one tap away as an icon rather than
     disappearing into the menu, because for a workshop it is the main action. */
  .tel{ width:36px; height:36px; justify-content:center; gap:0;
    border:1.5px solid var(--line); border-radius:var(--r); background:var(--card); }
  .tel span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .tel svg{ width:18px; height:18px; }
  .burger{ width:36px; height:36px; }
  .burger i{ left:9px; right:9px; }
  .burger i:nth-child(1){ top:14px; } .burger i:nth-child(2){ top:20px; }
  .btn{ white-space:normal; text-align:center; line-height:1.3; }
  .hero-act .btn,.cta .row .btn{ flex:1 1 100%; }
  .ftr-top{ grid-template-columns:1fr; }
  .kv{ grid-template-columns:1fr; gap:.1em; }
  .kv dt{ margin-top:.75em; } .kv dt:first-child{ margin-top:0; }
  .check{ grid-template-columns:1fr; }
  .check em{ grid-row:auto; grid-column:1; margin-bottom:.2em; }
  .check b,.check span{ grid-column:1; }
  .princ li{ grid-template-columns:1.8rem minmax(0,1fr); gap:.7em; }
}