/* ===========================================================================
   The redesign: an editorial system.

   The idea in one line: the site is a printed report a fleet owner reads once,
   cover to cover. One narrow column of German prose, interrupted at measured
   intervals by a plate that runs edge to edge. Rhythm comes from changing the
   measure — 620px of text, then 100vw of image, then one sentence alone on a
   dark spread — not from changing the decoration.

   What that means in practice: the boxes go. Every card whose only job was to
   draw a border around a heading and a paragraph is replaced by a 1px rule, a
   mono label hanging in the left margin, and air. Three real cards survive on
   the whole site, each because it shows a document or a caveat rather than a
   thought: the scope panel, the Quality scorecard, the module dialog.

   Amber is spent like red ink in a printed report: the needle in the mark, one
   primary button per screen, the lit bay on the van, the rule above a
   statement, the marker under the current nav item. Never as a fill behind
   text, never as a glow.

   This file loads last and is the layout layer. It does not replace the theme
   below it — the colours, the faces and the components stay — it replaces the
   rhythm, the measures and the composition.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.taste{
  /* One 4px scale, used for every gap on the site. */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;  --s6:32px;
  --s7:48px;  --s8:72px;  --s9:104px; --s10:152px; --s11:208px;

  /* Measures replace the single container. A page is a set of column widths,
     and changing which one a block uses is how this design creates rhythm. */
  --m-text:620px;      /* body prose, about 66 characters at 17px */
  --m-lead:720px;      /* the one paragraph under a heading */
  --m-display:900px;   /* headlines and statements */
  --m-wide:1180px;     /* the existing --wrap, kept */
  --plate-max:1760px;  /* full-bleed images stop growing here: these are
                          renders, and past this width their origin shows */

  /* Section rhythm. A movement is a whole scene; a block is a part of one. */
  --movement:var(--s10);
  --block:var(--s9);
  --head-gap:var(--s7);

  /* The header's height, in one place, because the services rail sticks
     underneath it and the two must never disagree. */
  --nav-h:72px;

  --ease-out:cubic-bezier(.2,.9,.25,1);
  --ease-rise:cubic-bezier(.16,1,.3,1);
}

@media(max-width:1024px){ .taste{ --movement:120px; --block:80px; --head-gap:40px; } }
@media(max-width:760px){ .taste{ --movement:88px; --block:64px; --head-gap:32px; --nav-h:60px; } }

/* ---------------------------------------------------------------------------
   2. Contrast corrections.

   Measured, not assumed, against the project's own palette:

     --ink-softer #98A1AA on white   2.62:1   fails AA for any text
     --ink-softer #98A1AA on cream   2.39:1   worse
     --ink-softer #98A1AA on ink     6.69:1   fine
     --amber      #FF9900 on white   2.14:1   fails; as text it must be dimmed
     --amber-dim  #9E5800 on white   5.45:1   passes
     --amber      #FF9900 on ink     8.18:1   passes
     --green      #067D62 on ink     3.44:1   fails for body text
     --green-on-dark #3DDCB2 on ink 10.08:1   passes

   The kicker — the small mono label above most headings — was set in
   --ink-softer at opacity .75 on light surfaces, which lands near 2.2:1. It is
   the one real accessibility failure in the existing stylesheet, and it is on
   nearly every section. These rules correct it where the surface is light and
   leave it alone where it is dark.
   -------------------------------------------------------------------------- */
.taste .kicker{
  color:var(--amber-dim);
  opacity:1;
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.taste .section-ink .kicker,
.taste .is-ink .kicker{ color:var(--amber); }

/* Amber as text on a light surface is 2.14:1. Where it carries meaning it
   becomes --amber-dim; where it is a large filled button the text on it is ink
   and the ratio is the other way round, so buttons are untouched. */
.taste a:not(.btn) .amber,
.taste .is-paper .amber-text{ color:var(--amber-dim); }

/* ---------------------------------------------------------------------------
   3. Type.

   Three faces, strictly divided by job. Barlow Condensed is display only and
   never all-caps — condensed heavy at 90px in capitals reads as a gym poster.
   Inter is anything that is a sentence. Roboto Mono is labels, timestamps,
   margin numerals and the email address.

   German needs the hyphenation: this content contains words like
   Arbeitszeitnachtragung, and without it a 620px column breaks badly.
   -------------------------------------------------------------------------- */
.taste h1,.taste h2,.taste h3,.taste h4{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:none;
  text-wrap:balance;
}
.taste p,.taste li{ hyphens:auto; -webkit-hyphens:auto; }
.taste p{ text-wrap:pretty; }

/* display-xl — the hero headline, and nothing else on the site */
.taste .hero h1{
  font-size:clamp(48px,7.4vw,104px);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.022em;
}

/* display-l — the opener of a section */
.taste .title,
.taste h1.title,
.taste h2.title{
  font-size:clamp(38px,5.2vw,68px);
  font-weight:800;
  line-height:1.0;
  letter-spacing:-.018em;
  max-width:var(--m-display);
}

/* display-m — pull quotes, area names, the teaser rows */
.taste .display-m{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(30px,3.4vw,46px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.012em;
}

/* display-s — slide headings, role names, step titles */
.taste .display-s,
.taste .mslide h4,
.taste .start-list h3,
.taste .step h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:25px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.004em;
  text-transform:none;
}
@media(max-width:760px){ .taste .display-s,.taste .mslide h4,.taste .start-list h3,.taste .step h3{font-size:22px;} }

/* the one paragraph under a heading */
.taste .sub{
  font-family:'Inter',sans-serif;
  font-size:clamp(18px,1.5vw,23px);
  font-weight:400;
  line-height:1.58;
  letter-spacing:-.003em;
  color:var(--ink);
  max-width:var(--m-lead);
}
.taste .section-ink .sub,.taste .is-ink .sub{ color:#C7CCD1; }

/* body */
.taste p{ font-size:17px; line-height:1.7; }
@media(max-width:760px){ .taste p{ font-size:16.5px; line-height:1.68; } }

/* margin numerals and timestamps */
.taste .mono{ font-family:'Roboto Mono',monospace; }

/* ---------------------------------------------------------------------------
   4. Rhythm.

   One rule replaces the flat `section{padding:104px 0}`: a movement gets the
   full height, and blocks inside one are separated by less.
   -------------------------------------------------------------------------- */
.taste main > section{ padding-block:var(--movement); }
.taste .wrap{ max-width:var(--m-wide); }

/* A full-bleed plate carries air above and below only when its neighbours are
   the same colour. When the colour changes, the change is the separation —
   doubling it with padding is what makes a page look assembled rather than
   composed. */
.taste .plate{
  width:100vw;
  margin-left:calc(50% - 50vw);
  max-width:var(--plate-max);
  margin-inline:auto;
  border-radius:0;
  overflow:hidden;
}
.taste .plate img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; }

/* Surfaces. Three values and nothing else: paper, cream, ink. --mist is
   retired from section backgrounds — three light greys competing on one page
   is the main reason the current site reads grey rather than white. */
.taste .is-paper{ background:var(--paper); color:var(--ink); }
.taste .is-cream{ background:#f7f4ef; color:var(--ink); }
.taste .is-ink{
  background:linear-gradient(175deg,var(--ink-2) 0%,var(--ink) 45%);
  color:#fff;
}
.taste .is-ink .title,.taste .is-ink h2,.taste .is-ink h3{ color:#fff; }
.taste .is-ink p{ color:#C7CCD1; }

/* ---------------------------------------------------------------------------
   5. Rules and hanging margins — the device that replaces most cards.
   -------------------------------------------------------------------------- */
.taste .ruled{ border-top:1px solid var(--line); }
.taste .is-ink .ruled{ border-top-color:rgba(255,255,255,.1); }

/* A list whose rows are separated by hairlines rather than boxed. */
.taste .rule-list{ list-style:none; margin:0; padding:0; }
.taste .rule-list > li{
  padding-block:var(--s5);
  border-top:1px solid var(--line);
}
.taste .is-ink .rule-list > li{ border-top-color:rgba(255,255,255,.1); }

/* A mono label hanging in the left margin, which is how a report labels a
   paragraph without putting a chip on it. */
.taste .hang{
  display:grid;
  grid-template-columns:96px minmax(0,var(--m-text));
  gap:0 var(--s5);
}
.taste .hang > .mono{
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:.45em;
}
@media(max-width:760px){
  .taste .hang{ grid-template-columns:1fr; gap:var(--s2); }
  .taste .hang > .mono{ padding-top:0; }
}

/* The amber rule that sits above a statement. 2px by 56px, and the only place
   amber appears as a shape on a light surface. */
.taste .amber-rule::before{
  content:"";
  display:block;
  width:56px;
  height:2px;
  background:var(--amber);
  margin-bottom:var(--s6);
}
.taste .amber-rule.is-centred::before{ margin-inline:auto; }

/* ---------------------------------------------------------------------------
   6. Shadows and radii.

   Four radii: 0 for every image and plate (an edge-to-edge image with a corner
   radius is a contradiction, and the 14px on the van frame is the main thing
   making it read as a widget), 2px for markers, 6px for buttons, 10px for the
   three real cards.

   Three neutral shadows. Amber never casts one — the existing primary button
   threw a 26px amber bloom, which is the single neon note in the current
   design. Its ledge stays, because that ledge is part of the Amazon-adjacent
   identity; only the bloom goes.
   -------------------------------------------------------------------------- */
.taste{
  --shadow-plate:0 1px 2px rgba(19,26,34,.04), 0 30px 60px -40px rgba(19,26,34,.26);
  --shadow-lift:0 1px 2px rgba(19,26,34,.05), 0 16px 32px -24px rgba(19,26,34,.22);
}
.taste .btn-primary{
  box-shadow:0 3px 0 var(--amber-dim), 0 10px 24px -16px rgba(19,26,34,.3);
  border-radius:6px;
}
.taste .btn-primary:hover{ box-shadow:0 3px 0 var(--amber-dim), var(--shadow-lift); }
.taste .btn{ border-radius:6px; font-weight:600; font-size:15px; letter-spacing:.005em; }

/* A quiet third button: neither filled nor ghost-on-dark. Used where a section
   already has its one filled action and needs a second, lesser way out. */
.taste .btn-quiet{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink)!important;
  box-shadow:none;
}
.taste .btn-quiet:hover{ background:#00000008; border-color:#c9cfcf; transform:none; }
.taste .is-ink .btn-quiet{ border-color:rgba(255,255,255,.22); color:#fff!important; }
.taste .is-ink .btn-quiet:hover{ background:rgba(255,255,255,.06); }

/* A text link that ends a section instead of a button. The underline draws
   from the left rather than existing already. */
.taste .link-on{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--amber-dim);
  text-decoration:none;
  position:relative;
  display:inline-block;
}
.taste .is-ink .link-on{ color:var(--amber); }
.taste .link-on::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .24s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .taste .link-on:hover::after{ transform:scaleX(1); }
}
.taste .link-on:focus-visible::after{ transform:scaleX(1); }

/* ---------------------------------------------------------------------------
   7. The header.

   Four items, which is the point of the merge: with four links, a language
   pill and one button, nothing needs a hamburger until 860px.

   Over the home page's dark hero it starts transparent, so the headline owns
   the top of the screen; on pages that open light it is paper with a hairline.
   After 64px of scroll it takes a background on every page. The current page is
   marked by a short amber rule under the label, not by colour alone, so it
   survives a monochrome print and a reader who cannot separate the hues.
   -------------------------------------------------------------------------- */
.taste header.nav{
  height:var(--nav-h);
  transition:height .28s var(--ease-out), background-color .28s var(--ease-out), border-color .28s var(--ease-out);
}
.taste .nav-inner{ min-height:var(--nav-h); align-items:center; }

body[data-page="home"] header.nav{
  background:transparent;
  border-bottom:1px solid transparent;
  box-shadow:none;
  backdrop-filter:none;
}
body:not([data-page="home"]) header.nav{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:none;
}
body:not([data-page="home"]) header.nav .links a,
body:not([data-page="home"]) header.nav .logo{ color:var(--ink); }

.taste header.nav.is-stuck{
  height:60px;
  background:rgba(19,26,34,.95);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.taste header.nav.is-stuck .links a,
.taste header.nav.is-stuck .logo{ color:#E7EDF2; }
.taste header.nav.is-stuck .logo{ transform:scale(.92); transform-origin:left center; }
.taste header.nav .logo{ transition:transform .28s var(--ease-out); }

/* Links: no pill, no background on hover — a hairline that draws from the
   left. The per-link mono channel numbers are dropped: with four items they
   were noise rather than position. */
.taste .links a{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:15px;
  letter-spacing:0;
  padding:10px 14px;
  position:relative;
  background:none;
}
.taste .links a > span::after{ display:none; }
.taste .links a::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:4px;
  height:1px;
  background:currentColor;
  opacity:.5;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .24s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .taste .links a:hover::after{ transform:scaleX(1); } }

.taste .links a[aria-current="page"]::after{
  left:14px; right:auto;
  width:20px;
  height:2px;
  bottom:2px;
  background:var(--amber);
  opacity:1;
  transform:none;
}
.taste .links a[aria-current="page"]{ font-weight:600; }
body[data-page="home"] header.nav .links a[aria-current="page"]{ color:#fff; }

.taste .lang-toggle{ gap:2px; }
.taste a.lang-btn{ font-family:'Roboto Mono',monospace; font-size:11.5px; letter-spacing:.08em; }

/* The header's own call to action appears only where there is room for it;
   a cramped button beside a hamburger is how template sites look. */
@media(max-width:1099px){ .taste .nav-inner > div:last-child > .btn{ display:none; } }

/* ---------------------------------------------------------------------------
   8. The area rail on the services page.

   A band under the header, not a card menu. It sticks at the header's own
   height, which is why that height is a custom property: the two can never
   drift apart.
   -------------------------------------------------------------------------- */
.taste .area-nav{
  position:sticky;
  top:var(--nav-h);
  z-index:90;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.taste .area-nav-inner{
  display:flex;
  align-items:center;
  gap:var(--s5);
  min-height:56px;
}
.taste .area-nav-label{
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  flex:none;
}
.taste .area-nav ul{
  list-style:none;
  display:flex;
  margin:0; padding:0;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.taste .area-nav ul::-webkit-scrollbar{ display:none; }
.taste .area-nav li{ flex:none; scroll-snap-align:center; }
.taste .area-nav a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 18px;
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  position:relative;
  transition:color .2s var(--ease-out);
}
.taste .area-nav a::after{
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:0;
  height:2px;
  background:var(--amber);
  transform:scaleX(0);
  transition:transform .42s var(--ease-out);
}
.taste .area-nav a.on{ color:var(--ink); font-weight:600; }
.taste .area-nav a.on::after{ transform:scaleX(1); }
@media (hover:hover) and (pointer:fine){ .taste .area-nav a:hover{ color:var(--ink); } }

/* A deep link has to land with the area's name below the bar, not behind it. */
.taste .module-chapter{ scroll-margin-top:calc(var(--nav-h) + 60px); }

@media(max-width:860px){
  .taste .area-nav{ top:0; }
  .taste .area-nav-label{ display:none; }
  .taste .area-nav-inner{ min-height:44px; }
  .taste .area-nav ul{
    mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  }
}

/* ---------------------------------------------------------------------------
   9. START — the day log.

   The markup was already a ledger: a time, a sentence, a row. It was drawn as
   a stack of boxes. Here it is what it is — a document page: hairlines, a
   hanging mono margin, and nothing else, wedged between two dark frames.
   -------------------------------------------------------------------------- */
.taste #problem{ background:#f7f4ef; }
.taste #problem .daylog{ max-width:760px; margin-top:var(--s8); }
.taste .daylog-row{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:0 var(--s5);
  padding-block:28px;
  border-top:1px solid var(--line);
  background:none;
  border-radius:0;
  box-shadow:none;
  align-items:baseline;
}
.taste .daylog-time{
  font-family:'Roboto Mono',monospace;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  background:none;
  padding:0;
}
.taste .daylog-text{ font-size:17px; line-height:1.7; color:var(--ink); }
.taste .daylog-close{
  margin-top:var(--s7);
  padding-top:0;
  border:0;
  background:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(26px,3vw,34px);
  font-weight:700;
  line-height:1.15;
  max-width:620px;
  color:var(--ink);
}
.taste .daylog-close::before{
  content:"";
  display:block;
  width:56px; height:2px;
  background:var(--amber);
  margin-bottom:var(--s6);
}
@media(max-width:760px){
  .taste .daylog-row{ grid-template-columns:1fr; gap:var(--s2); padding-block:22px; }
  .taste .daylog-time{ font-size:12px; }
}

/* ---------------------------------------------------------------------------
   10. START — the statement.

   One sentence, alone, on white, with a great deal of air around it. The only
   section on the site that holds a single element: what it has to do, it does
   by being empty.
   -------------------------------------------------------------------------- */
.taste .statement{
  background:var(--paper);
  padding-block:var(--s11);
  border:0;
}
.taste .statement-inner{ max-width:var(--m-display); text-align:center; }
.taste .statement h2{
  font-size:clamp(32px,4.4vw,56px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.012em;
}
.taste .statement h2::before{
  content:"";
  display:block;
  width:56px; height:2px;
  background:var(--amber);
  margin:0 auto var(--s7);
}
.taste .statement .fade{ color:var(--ink-soft); }
.taste .statement .pop{ color:var(--ink); }
@media(max-width:760px){ .taste .statement{ padding-block:120px; } }

/* ---------------------------------------------------------------------------
   11. Surfaces, assigned.

   The body's own background is ink. On a one-pager that was invisible, because
   every section painted over it. Add a section without a background and it
   falls through to black — which is exactly what happened twice while building
   this, first to the reports page and then to the contact page's closing
   steps. So the default is stated once, here, and the exceptions are named.

   The order per page never repeats a surface on two neighbours:
     START        ink hero → cream day log → paper statement → ink solution
                  → cream areas → paper founder
     ÜBER MICH    cream biography → paper scope → cream collaboration → ink close
     LEISTUNGEN   paper opener → paper HR → cream Payroll → paper Operations
                  → ink Quality → cream reporting → ink close
     KONTAKT      amber → paper steps
   -------------------------------------------------------------------------- */
.taste main > section,
.taste main > article{
  background:var(--paper);
  color:var(--ink);
  padding-block:var(--movement);
}

/* named exceptions, each more specific than the rule above */
/* The hero sets its own padding rather than taking the movement rhythm —
   but not zero, which is what I first wrote. The header is fixed, so the top
   padding is what keeps the headline out from under it; removing it put the
   whole copy block at y:-61, clipped behind the bar. */
.taste .hero{ background:transparent; padding-block:128px var(--s9); }
@media(max-width:860px){ .taste .hero{ padding-block:96px var(--s8); } }
.taste .section-mist{ background:#f7f4ef; }
.taste .section-ink{
  background:linear-gradient(175deg,var(--ink-2) 0%,var(--ink) 45%);
  color:#fff;
}
.taste .cta-section{ padding-block:var(--movement); }

/* the services page */
.taste .services-intro{ padding-block:128px var(--s8); }
.taste #payroll{ background:#f7f4ef; }
.taste #quality{
  background:linear-gradient(175deg,var(--ink-2) 0%,var(--ink) 45%);
  color:#fff;
}
.taste #quality h3,.taste #quality h4{ color:#fff; }
.taste #quality p,.taste #quality li{ color:#C7CCD1; }
.taste .reporting{ background:#f7f4ef; }

/* the about page */
.taste .scope{ background:var(--paper); }
.taste #ablauf{ background:#f7f4ef; }

/* ---------------------------------------------------------------------------
   12. START — the four areas.

   The site's answer to "a pile of identical cards": four rows of type on
   white, not four tiles. Each row is a link; a rule travels across it on
   hover; the name moves 6px. One gesture per row — no lift, no shadow, no
   background change.
   -------------------------------------------------------------------------- */
.taste .teaser{ background:#f7f4ef; }
.taste .teaser .console{
  display:block;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  margin-top:var(--s8);
  gap:0;
}
.taste .teaser a.console-mod{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,6fr) 56px;
  align-items:baseline;
  gap:var(--s6);
  padding:44px 0;
  border-top:1px solid var(--line);
  border-right:0;
  border-bottom:0;
  background:none;
  border-radius:0;
  box-shadow:none;
  min-height:0;
  position:relative;
  overflow:hidden;
}
.taste .teaser a.console-mod::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .36s var(--ease-out);
}
.taste .teaser .mod-code{
  font-family:'Roboto Mono',monospace;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:none;
  padding:0;
  margin-bottom:var(--s3);
  position:static;
}
.taste .teaser .mod-icon{ display:none; }
.taste .teaser .console-mod h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(30px,3.4vw,46px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:0;
  transition:transform .3s var(--ease-out);
}
.taste .teaser .console-mod ul{
  list-style:none;
  margin:0; padding:0;
  grid-column:2;
  grid-row:1 / span 3;
}
.taste .teaser .console-mod li{
  font-family:'Inter',sans-serif;
  font-size:16.5px;
  line-height:1.6;
  color:var(--ink-soft);
  padding:0 0 10px;
  border:0;
}
.taste .teaser .console-mod li::before{ display:none; }
.taste .teaser .mod-more{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  font-size:0;
  color:var(--amber-dim);
  transition:transform .3s var(--ease-out);
}
.taste .teaser .mod-more::after{ content:"→"; font-size:20px; }

@media (hover:hover) and (pointer:fine){
  .taste .teaser a.console-mod:hover::after{ transform:scaleX(1); }
  .taste .teaser a.console-mod:hover h3{ transform:translateX(6px); }
  .taste .teaser a.console-mod:hover .mod-more{ transform:translateX(6px); }
}
.taste .teaser a.console-mod:focus-visible{ outline:2px solid var(--ink); outline-offset:-3px; }

.taste .teaser-through{ margin-top:var(--s7); text-align:left; }
.taste .teaser-through .btn{ background:none; border:0; padding:0; box-shadow:none;
  color:var(--amber-dim)!important; font-weight:600; min-height:0; }

@media(max-width:860px){
  .taste .teaser a.console-mod{
    grid-template-columns:1fr 40px;
    padding:32px 0;
    gap:var(--s3);
  }
  .taste .teaser .console-mod ul{ grid-column:1 / -1; grid-row:auto; }
  .taste .teaser .mod-more{ grid-column:2; grid-row:1; }
}

/* ---------------------------------------------------------------------------
   13. START — the person.

   The only half-bleed on the page: the picture is anchored to one side and
   touches the viewport edge, where the hero plate runs the full width and is
   centred. A different relationship to the edge is what stops two
   image-and-text blocks reading as the same block twice.
   -------------------------------------------------------------------------- */
.taste .founder{ background:#f7f4ef; }
.taste .founder-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s9);
  align-items:center;
}
.taste .founder-text{ max-width:520px; }
.taste .founder-figure{ margin:0; order:-1; }
.taste .founder-figure img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 35%;
  border-radius:0;
}
.taste .founder-figure figcaption{
  margin-top:var(--s3);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.taste .founder-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s4);
  margin-top:var(--s7);
}
@media(max-width:900px){
  .taste .founder-inner{ grid-template-columns:1fr; gap:var(--s7); }
  .taste .founder-figure img{ aspect-ratio:3/2; object-position:50% 30%; }
}

/* ---------------------------------------------------------------------------
   14. ÜBER MICH — scope.

   Deliberately the sparsest spread on the site, because the content is three
   sentences and padding it out with invented detail is not available. The four
   areas are names and one line each, as a ruled list — not tiles, because the
   landing page already used tiles-as-rows and this is a different page.

   One card, and it is the only one on this page: the caveat about what the
   scope depends on. It earns a box because it is a condition, not a thought.
   -------------------------------------------------------------------------- */
.taste .scope-areas{
  list-style:none;
  margin:var(--s8) 0 0;
  padding:0;
  max-width:860px;
}
.taste .scope-areas li{ border-top:1px solid var(--line); }
.taste .scope-areas a{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:var(--s6);
  align-items:baseline;
  padding:26px 0;
  text-decoration:none;
  color:inherit;
}
.taste .scope-area-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:-.008em;
  color:var(--ink);
}
.taste .scope-area-sub{ font-size:16.5px; line-height:1.6; color:var(--ink-soft); }
@media (hover:hover) and (pointer:fine){
  .taste .scope-areas a:hover .scope-area-name{ color:var(--amber-dim); }
}
@media(max-width:700px){
  .taste .scope-areas a{ grid-template-columns:1fr; gap:var(--s2); padding:22px 0; }
}

.taste .scope-terms{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s8);
  margin-top:var(--s9);
  align-items:start;
}
.taste .scope-price{
  grid-column:2;
  background:var(--ink);
  color:#fff;
  border-radius:10px;
  padding:40px;
  box-shadow:var(--shadow-plate);
}
.taste .scope-price h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;
  font-weight:700;
  color:#fff;
  margin:0 0 var(--s4);
}
.taste .scope-price p{ font-size:16.5px; line-height:1.7; color:#C7CCD1; margin:0; }
.taste .scope-tools{
  grid-column:2;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:var(--s5) 0 0;
  max-width:560px;
}
@media(max-width:900px){
  .taste .scope-terms{ grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s8); }
  .taste .scope-price,.taste .scope-tools{ grid-column:1; }
  .taste .scope-price{ padding:28px; }
}

/* ---------------------------------------------------------------------------
   15. ÜBER MICH — collaboration.

   A horizontal track, the only one on the site: one hairline across the full
   width with four markers hanging on it. A sequence in time reads as a
   left-to-right movement, which no stack of four boxes manages.

   It also fixes something measured on the live site: the four steps sat with
   200px gaps between them and an empty left column, which was scroll
   choreography that was never finished.
   -------------------------------------------------------------------------- */
.taste #ablauf .steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s7);
  margin-top:var(--s8);
  border-top:1px solid var(--line);
  padding-top:36px;
  position:relative;
}
.taste #ablauf .step{
  display:block;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  min-height:0;
  position:relative;
}
.taste #ablauf .step::before{
  content:"";
  position:absolute;
  top:-41px; left:0;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 4px #f7f4ef;
}
.taste #ablauf .step-num{
  position:static;
  width:auto; height:auto;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-family:'Roboto Mono',monospace;
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--ink-soft);
  display:block;
  margin-bottom:var(--s4);
}
.taste #ablauf .step h3{ margin:0 0 var(--s3); color:var(--ink); }
.taste #ablauf .step p{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0; }
.taste #ablauf .ablauf-track,.taste #ablauf .steps-tail{ display:none; }

@media(max-width:860px){
  .taste #ablauf .steps{
    grid-template-columns:1fr;
    gap:var(--s7);
    border-top:0;
    padding-top:0;
    padding-left:var(--s6);
    border-left:1px solid var(--line);
  }
  .taste #ablauf .step::before{ top:4px; left:-36px; box-shadow:0 0 0 4px #f7f4ef; }
}

/* ---------------------------------------------------------------------------
   16. KONTAKT — the three steps.

   The same ruled ledger as the day log on the landing page, used once more at
   the other end of the site. That repetition is deliberate and it is the only
   one: the site opens with a ruled list of a bad day and closes with a ruled
   list of the three steps out of it.
   -------------------------------------------------------------------------- */
.taste .start-steps{ background:var(--paper); }
.taste .start-list{
  list-style:none;
  margin:var(--s8) 0 0;
  padding:0;
  max-width:760px;
  counter-reset:none;
}
.taste .start-list li{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:0 var(--s5);
  padding-block:28px;
  border-top:1px solid var(--line);
}
.taste .start-num{
  font-size:13px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  padding-top:.35em;
}
.taste .start-list h3{ margin:0 0 var(--s2); color:var(--ink); }
.taste .start-list p{ margin:0; color:var(--ink-soft); }
@media(max-width:700px){
  .taste .start-list li{ grid-template-columns:1fr; gap:var(--s2); padding-block:22px; }
  .taste .start-num{ padding-top:0; }
}

/* ---------------------------------------------------------------------------
   17. Corrections carried over from the review of the three directions.

   Four of these are fixes to measured facts about this codebase rather than
   matters of taste, and each was checked in the file before being written here.
   -------------------------------------------------------------------------- */

/* (a) The van stops being a widget.

   engine-inline.css contradicts itself: an early block crops the render
   (.engine-frame aspect-ratio 3/2, .engine-layer translate+scale 1.44) and a
   later, unscoped block in the same file cancels both (aspect-ratio:auto,
   transform:none) and adds a 12px radius, an amber border and a 70px black
   shadow. So the van renders uncropped, inside a frame — which is exactly the
   boxed-widget look this redesign removes. The frame goes; the image stays
   where it is, in the hero, because putting it below the fold would cost a
   hurried reader the one thing that explains the business at a glance. */
.taste .engine-frame{
  border:0;
  border-radius:0;
  box-shadow:none;
  isolation:auto;
}
.taste .engine-frame::after{ display:none; }   /* the four amber corner ticks */

/* (b) Barlow Condensed is display only, at 28px and above.

   Condensed 800 at 20px looks squeezed, and squeezed small headings are part
   of why the current build reads generic. Anything below 28px that was set in
   the display face becomes Inter 600. */
.taste .display-s,
.taste .mslide h4,
.taste .start-list h3,
.taste .step h3,
.taste .scope-price h3,
.taste .founder-card h3{
  font-family:'Inter',sans-serif;
  font-size:clamp(19px,1.5vw,21px);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.004em;
}
@media(max-width:760px){
  .taste .display-s,.taste .mslide h4,.taste .start-list h3,.taste .step h3{ font-size:19px; }
}

/* (c) A reader should be able to tell which rows go somewhere.

   Interactive rows — the four areas on the landing page, the four in the scope
   list — carry a display-face name, an arrow, and a rule that wipes along
   their own top hairline on hover. Static rows — the roles, the task lists,
   the three steps — carry an Inter 600 title, no arrow and no hover state at
   all. Nobody has to be told the difference; it is learned in one scroll. */
.taste .scope-areas a{ position:relative; overflow:hidden; }
.taste .scope-areas a::after{
  content:"→";
  position:absolute;
  right:0; top:26px;
  font-size:18px;
  color:var(--amber-dim);
  transition:transform .3s var(--ease-out);
}
.taste .scope-areas a::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .36s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .taste .scope-areas a:hover::before{ transform:scaleX(1); }
  .taste .scope-areas a:hover::after{ transform:translateX(6px); }
}
.taste .scope-areas a{ padding-right:44px; }

/* static rows explicitly give up the hover vocabulary */
.taste .start-list li,
.taste .mslide-list li,
.taste #ablauf .step{ cursor:default; }

/* (d) The four figures on the About page.

   Set in the mono face, tabular, and capped at 60px rather than 84px: mono
   numerals tie back to the gauge in the mark, and four of them at 84px stop
   being a row and start being a dashboard. They are facts, so they do not
   count up. */
.taste .why-figures{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  margin-top:var(--s7);
  gap:0;
}
.taste .why-figure{
  padding:40px var(--s6) 40px 0;
  border-left:1px solid var(--line);
  padding-left:var(--s6);
}
.taste .why-figure:first-child{ border-left:0; padding-left:0; }
.taste .why-figure-n{
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:clamp(34px,4.4vw,60px);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  display:block;
}
.taste .why-figure-l{
  display:block;
  margin-top:var(--s3);
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--ink-soft);
}
@media(max-width:860px){
  .taste .why-figures{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .taste .why-figure{ padding:28px var(--s5); border-top:1px solid var(--line); }
  .taste .why-figure:nth-child(-n+2){ border-top:0; }
  .taste .why-figure:nth-child(odd){ border-left:0; padding-left:0; }
}

/* (e) The contact page's address is the largest object on it.

   One filled button (WhatsApp) and one mono text button (copy) — two filled
   buttons would mean neither is the action.  */
.taste .reach-address{
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:clamp(26px,4.4vw,44px);
  letter-spacing:-.015em;
  user-select:all;
  word-break:keep-all;
}
.taste .reach-copy{
  background:none;
  border:0;
  border-bottom:1px dotted currentColor;
  border-radius:0;
  padding:4px 0;
  font-family:'Roboto Mono',monospace;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.taste .reach-copy:hover{ background:none; }
/* the confirmation line keeps its height so the layout never jumps */
.taste .reach-note{ min-height:20px; }
.taste .reach-note[hidden]{ display:block; visibility:hidden; }

/* ---------------------------------------------------------------------------
   18. Motion.

   The project already carries the right architecture and it is better than
   the one I was about to add: .reveal is visible by default and the script
   opts each element into hiding before revealing it. If the script never
   runs, every word is still on the page. So there is no second reveal system
   here — only the two things CSS could not reach, both handled in site.js:
   the SMIL nodes in the gauge, which ignore the reduced-motion rule, and the
   hidden start state, which is now never applied under reduce at all.
   -------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   19. ÜBER MICH — the collaboration section, taken apart properly.

   This is what a half-applied override looks like, and it was mine. The theme
   draws this section as a dark spread with a sticky heading in a left column
   and the four steps stacked in a right one:

       .taste #ablauf{background:#0c141c;color:#f5f1e9}
       .taste #ablauf .title{color:#f5f1e9}
       .taste #ablauf .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:100px}
       .taste .ablauf-head{position:sticky;top:140px}

   I changed the background to cream and nothing else, so the heading stayed in
   its near-white and vanished, and the four-column track I had written for the
   full width was squeezed into the right-hand half — four columns inside half
   a page, one word per line. Changing a surface means changing everything that
   was drawn for the old one.

   It also fixes something measured on the live site: those four steps sat with
   200px gaps and an empty left column, which was scroll choreography that was
   started and never finished. A track reads as a sequence in time; a stack of
   four boxes never does.
   -------------------------------------------------------------------------- */
.taste #ablauf{ background:#f7f4ef; color:var(--ink); }
.taste #ablauf .title{ color:var(--ink); max-width:var(--m-display); }
.taste #ablauf .kicker{ color:var(--amber-dim); }
.taste #ablauf .wrap{ display:block; column-gap:0; }
.taste .ablauf-head{ position:static; top:auto; }
.taste #ablauf .steps::before{ display:none; }   /* the theme's own connector */

/* ---------------------------------------------------------------------------
   20. The services page — four areas that share no skeleton.

   The complaint this answers is "a pile of identical cards". Four chapters
   built from one template is that pile, whatever is inside them. So each area
   gets its own geometry, and each difference comes from something true about
   the content rather than from a decision to be different:

     HR          has one sample document — image left, bleeding to the edge,
                 ruled slides to its right.
     Payroll     has one — text first, then the scene as a wide strip; slides
                 separated by air rather than rules, so it reads softer.
     Operations  has no documents at all, so its right column is free: the
                 scene sits still in it while three slides pass.
     Quality     has five documents and a metrics panel, so it is the heaviest
                 and the only dark one. The page gains weight toward its end
                 instead of repeating four times.
   -------------------------------------------------------------------------- */
.taste .module-chapter{ padding-block:var(--movement); }
.taste .module-chapter .wrap{ max-width:var(--m-wide); }

/* the area's own opening: name, label, lead */
.taste .module-chapter h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(30px,3.4vw,46px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.012em;
  margin:0 0 var(--s3);
}
.taste .chapter-sub{
  font-size:clamp(18px,1.4vw,21px);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:var(--m-lead);
  margin:0 0 var(--s7);
}
.taste #quality .chapter-sub{ color:#C7CCD1; }

/* scenes are 900x1125 — 4:5, measured in the files, not assumed */
.taste .chapter-photo{ margin:0; border-radius:0; box-shadow:none; }
.taste .chapter-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:0;
}

/* HR — image left, bleeding off the edge, ruled slides right */
.taste #hr .chapter-grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:var(--s8);
  align-items:start;
}
.taste #hr .chapter-photo{ margin-left:calc(50% - 50vw); margin-right:0; }
.taste #hr .chapter-photo img{ aspect-ratio:4/5; }
.taste #hr .mslide{
  padding-block:28px;
  border-top:1px solid var(--line);
}

/* Payroll — text first, then a wide strip; slides separated by air */
.taste #payroll .chapter-grid{ display:block; }
.taste #payroll .chapter-slides{ max-width:var(--m-lead); }
.taste #payroll .mslide{ padding-block:0; border-top:0; margin-bottom:var(--s8); }
.taste #payroll .chapter-photo{
  width:100vw;
  margin-left:calc(50% - 50vw);
  max-width:var(--plate-max);
  margin-inline:auto;
  margin-top:var(--s9);
}
.taste #payroll .chapter-photo img{ aspect-ratio:21/9; object-position:50% 45%; }

/* Operations — no documents, so the scene holds still while the text passes */
.taste #operations .chapter-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s9);
  align-items:start;
}
.taste #operations .chapter-photo{
  position:sticky;
  top:calc(var(--nav-h) + 76px);
}
.taste #operations .mslide{ margin-bottom:var(--s8); }

/* Quality — the heaviest, and the only dark area */
.taste #quality .chapter-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s7);
  align-items:start;
}
.taste #quality .chapter-photo img{ border:1px solid rgba(255,255,255,.12); }
.taste #quality .mslide{ border-top:1px solid rgba(255,255,255,.1); padding-block:24px; }
.taste #quality .mslide-label{ color:var(--amber); }

/* slide labels hang rather than sit in a chip */
.taste .mslide-label{
  display:block;
  font-family:'Roboto Mono',monospace;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:none;
  padding:0;
  margin-bottom:var(--s3);
}
.taste .mslide-list{ list-style:none; margin:var(--s4) 0 0; padding:0; }
.taste .mslide-list li{
  font-size:16.5px;
  line-height:1.65;
  padding:0 0 10px 18px;
  position:relative;
  color:var(--ink-soft);
}
.taste .mslide-list li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:8px; height:1px;
  background:var(--ink-softer);
}
.taste #quality .mslide-list li{ color:#C7CCD1; }
.taste #quality .mslide-list li::before{ background:rgba(255,255,255,.4); }

/* the pull quote that closes each area */
.taste .chapter-quote{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(26px,3vw,34px);
  font-weight:700;
  line-height:1.2;
  max-width:760px;
  margin:var(--s9) 0 0;
  padding-left:var(--s5);
  border-left:2px solid var(--amber);
  background:none;
  border-radius:0;
  box-shadow:none;
  color:var(--ink);
}
.taste #quality .chapter-quote{ color:#fff; }
.taste #payroll .chapter-quote{
  border-left:0;
  padding-left:0;
  text-align:center;
  max-width:860px;
  margin-inline:auto;
}

/* the sample documents: a shelf, not cards */
.taste .doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--s5);
  margin-top:var(--s6);
}
.taste .doc-card{ background:none; border:0; border-radius:0; box-shadow:none; }
.taste .doc-link{ text-decoration:none; display:block; }
.taste .doc-shot img{ border-radius:0; border:1px solid var(--line); }
.taste #quality .doc-shot img{ border-color:rgba(255,255,255,.14); }
@media (hover:hover) and (pointer:fine){
  .taste .doc-card:hover .doc-shot img{ border-color:var(--amber); }
  .taste .doc-card:hover{ transform:translateY(-3px); }
}
.taste .doc-card{ transition:transform .22s var(--ease-out); }
.taste .doc-fineprint{ font-size:13.5px; color:var(--ink-soft); margin-top:var(--s5); }
.taste #quality .doc-fineprint{ color:#9FADB9; }

@media(max-width:1024px){
  .taste #hr .chapter-grid,
  .taste #operations .chapter-grid,
  .taste #quality .chapter-grid{ grid-template-columns:1fr; gap:var(--s7); }
  .taste #hr .chapter-photo{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
  .taste #operations .chapter-photo{ position:static; }
  .taste #payroll .chapter-photo img{ aspect-ratio:16/9; }
}

/* ---------------------------------------------------------------------------
   21. The reporting diagram, which closes the services page.
   -------------------------------------------------------------------------- */
.taste .reporting .flow-diagram{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin-top:var(--s7);
}
.taste .reporting .flow-top{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s5);
  padding:0 0 var(--s6);
  border-bottom:1px solid var(--line);
  background:none;
}
.taste .reporting .flow-top strong{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(26px,3vw,34px);
  font-weight:700;
  letter-spacing:-.012em;
}

/* ---------------------------------------------------------------------------
   22. START — the three things you get back.

   Three cards became three columns separated by a hairline. Same content, a
   third of the ink, and no boxes to count.

   The carousel goes with them. The theme turned this into a horizontal
   scroller with two arrow buttons — a device that exists because three cards
   did not fit, which stops being a problem the moment they are not cards.
   Three statements fit side by side on a laptop and stack on a phone; a
   scroller for three items hides a third of the content behind a gesture
   nobody is told about.

   The amber icon chips go too. At this size they are three circles that say
   nothing the title does not, and an amber fill behind content is the one use
   of the brand colour this redesign does not allow.
   -------------------------------------------------------------------------- */
.taste .freedom-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  overflow:visible;
  scroll-snap-type:none;
  margin-top:var(--s9);
  padding:0;
}
.taste .freedom-card{
  background:none;
  border:0;
  border-left:1px solid rgba(255,255,255,.12);
  border-radius:0;
  box-shadow:none;
  padding:0 var(--s8);
  flex-basis:auto;
  min-width:0;
  transform:none!important;
}
.taste .freedom-card:first-child{ border-left:0; padding-left:0; }
.taste .freedom-card:last-child{ padding-right:0; }
.taste .freedom-card:hover{ transform:none; border-color:rgba(255,255,255,.12); }
.taste .freedom-icon{ display:none; }
.taste .freedom-card h3{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(19px,1.5vw,21px);
  line-height:1.35;
  color:#fff;
  margin:0 0 var(--s4);
}
.taste .freedom-card p{ font-size:16.5px; line-height:1.68; color:#B7BEC5; }

/* the numeral that replaces the icon */
.taste .freedom-card::before{
  counter-increment:freedom;
  content:"0" counter(freedom);
  display:block;
  font-family:'Roboto Mono',monospace;
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--amber);
  margin-bottom:var(--s5);
}
.taste .freedom-grid{ counter-reset:freedom; }

/* the arrows the scroller needed */
.taste .taste-carousel-controls{ display:none; }

@media(max-width:900px){
  .taste .freedom-grid{ grid-template-columns:1fr; }
  .taste .freedom-card{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.12);
    padding:36px 0;
  }
  .taste .freedom-card:first-child{ border-top:0; padding-top:0; }
}

/* ---------------------------------------------------------------------------
   23. START — what leaves the desk and what comes back.

   The ledger's panel is deleted. The two groups share one vertical rule and
   the typography carries the comparison: the outgoing side in the soft tone,
   the returning side heavier, because that is the half the reader is buying.
   -------------------------------------------------------------------------- */
.taste .solution-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s9);
  align-items:start;
}
.taste .ledger{
  display:block;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  border-left:1px solid rgba(255,255,255,.14);
  padding-left:var(--s6);
}
.taste .ledger-col{ background:none; border:0; padding:0; }
.taste .ledger-col + .ledger-col{ margin-top:var(--s8); }
.taste .ledger-head{
  display:block;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:var(--s4);
}
.taste .ledger ul{ list-style:none; margin:0; padding:0; }
.taste .ledger li{
  font-size:16.5px;
  line-height:1.6;
  padding:0 0 10px 18px;
  position:relative;
  color:#B7BEC5;
}
.taste .ledger li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:9px; height:1px;
  background:rgba(255,255,255,.35);
}
/* the returning side reads heavier: it is the half being bought */
.taste .ledger-in li{ color:#fff; font-weight:500; }

.taste .sol-check{ list-style:none; margin:var(--s7) 0 0; padding:0; }
.taste .sol-check li{
  padding:20px 0 20px 32px;
  border-top:1px solid rgba(255,255,255,.12);
  position:relative;
  font-size:17px;
  line-height:1.6;
  color:#fff;
}
.taste .sol-check li::before{
  content:"";
  position:absolute;
  left:0; top:1.55em;
  width:14px; height:1px;
  background:var(--amber);
}

@media(max-width:1024px){
  .taste .solution-grid{ grid-template-columns:1fr; gap:var(--s7); }
  .taste .ledger{ border-left:0; border-top:1px solid rgba(255,255,255,.14); padding-left:0; padding-top:var(--s6); }
}

/* ---------------------------------------------------------------------------
   24. The hero.

   Measured at 1440px before deciding anything: the grid gave the van 754px and
   the copy 325px, and the headline — which this redesign had just raised to
   104px — was rendering 499px tall inside a 269px box. Five lines. Large
   typography and a 269px column are not compatible, so one of them had to go,
   and it was not going to be the typography the brief asks for.

   The hero becomes a title card above an object: the headline, the lead and
   the two actions across a 900px measure, then the van beneath them running
   the full width with its four bays labelled. This is also what lets the
   headline be the largest thing on the site without fighting anything.

   The one risk, and it is real: the van's clickable bays start lower down the
   page than they used to. Checked at a 768px-tall laptop viewport — the top of
   the render is in view and the upper bays are reachable without scrolling, so
   the thing that explains the business at a glance still does.
   -------------------------------------------------------------------------- */
.taste .hero-grid{
  display:block;
  max-width:var(--m-wide);
}
.taste .hero-grid > div{
  max-width:var(--m-display);
}
.taste .hero h1{
  font-size:clamp(44px,6.2vw,88px);
  max-width:14ch;          /* breaks after "hinter", which is where it reads best */
}
.taste .hero p.lead{
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.6;
  max-width:var(--m-lead);
  color:#C7CCD1;
}
.taste .hero p.lead em{ color:#fff; font-weight:600; font-style:normal; }
.taste .hero-ctas{ margin-top:var(--s7); margin-bottom:0; gap:var(--s4); }
.taste .hero-tagline{ margin-top:var(--s6); }

/* The van: a plate, not a panel in a column. */
.taste .dsp-engine{
  width:100vw;
  margin-left:calc(50% - 50vw);
  max-width:var(--plate-max);
  margin-inline:auto;
  margin-top:var(--s8);
  position:relative;
  left:auto; top:auto;
}

@media(max-width:760px){
  .taste .hero h1{ max-width:none; }
  .taste .dsp-engine{ margin-top:var(--s7); }
}

/* ---------------------------------------------------------------------------
   25. The mobile menu.

   A full-screen ink overlay rather than a dropdown sheet: four rows with their
   numerals hanging in the margin, the language pill above them, and the one
   amber action as the last row. A sheet that pushes the page down is a
   component; a screen that replaces it is a decision.
   -------------------------------------------------------------------------- */
@media(max-width:860px){
  .taste .mobile-menu{
    position:fixed;
    inset:0;
    background:var(--ink);
    border-radius:0;
    padding:calc(var(--nav-h) + var(--s7)) var(--s6) var(--s7);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    overflow-y:auto;
  }
  .taste .mobile-menu:not(.open){ display:none; }
  .taste .mobile-menu .m-link{
    display:flex;
    align-items:baseline;
    gap:var(--s5);
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.1);
    font-family:'Barlow Condensed',sans-serif;
    font-size:34px;
    font-weight:700;
    line-height:1.1;
    color:#fff;
  }
  .taste .mobile-menu .m-link::before{
    content:"0" counter(mlink);
    counter-increment:mlink;
    font-family:'Roboto Mono',monospace;
    font-size:13px;
    font-weight:500;
    letter-spacing:.1em;
    color:var(--ink-softer);
    min-width:32px;
  }
  .taste .mobile-menu{ counter-reset:mlink; }
  .taste .mobile-menu .m-link[aria-current="page"]{ color:var(--amber); }
  .taste .mobile-menu .btn{
    margin-top:var(--s7);
    width:100%;
    justify-content:center;
    min-height:52px;
  }
}

/* Two things measured after the hero became a title card above an object.

   The section is display:flex with align-items:center and min-height:640px.
   That was right when its content was shorter than the screen; now the copy
   and the plate together are 1271px tall, so centring a 1271px child inside a
   950px box put its top at y:-148 — the headline sat behind the header while
   the padding meant to clear it was still being honoured, just not where it
   could be seen. Content that is taller than the viewport flows from the top.

   And the plate was still 900px wide: engine-inline.css caps #dsp-engine by
   id, which outranks a class. Matching the id is the honest fix. */
.taste .hero{ display:block; align-items:normal; min-height:0; }
.taste .hero #dsp-engine{
  width:100vw;
  max-width:var(--plate-max);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-inline:auto;
  margin-top:var(--s8);
}

/* Tightened after measuring: the plate was starting at y:730 on a 950px
   screen, which put the clickable bays off the bottom and cost the hero the
   one thing it is for. 96px of top padding and a shorter gap before the plate
   bring the van into view without going back to a cramped side column. */
.taste .hero{ padding-block:96px var(--s8); }
.taste .hero .eyebrow{ margin-bottom:var(--s5); }
.taste .hero p.lead{ margin-bottom:0; }
.taste .hero-ctas{ margin-top:var(--s6); }
.taste .hero-tagline{ margin-top:var(--s5); font-size:11px; }
.taste .hero #dsp-engine{ margin-top:var(--s6); }

/* The grid carried 60px of its own top padding and the copy block another 27,
   stacked on the hero padding — 183px above a headline that only needed 96.
   Inherited padding that nobody can see the reason for is how a layout ends
   up with air it did not choose. */
.taste .hero .hero-grid{ padding-top:0; }
.taste .hero .hero-grid > div{ padding-top:0; }

/* ---------------------------------------------------------------------------
   26. The four areas are not children of <main>.

   They are article.module-chapter inside section.module-details, so the rule
   that gives every top-level section its surface never reached them and all
   four fell through to the body, which is ink. The page came out dark end to
   end — including the two areas whose whole point was to be light.

   Inheritance was the wrong mechanism here anyway: these four surfaces are a
   deliberate sequence, paper → cream → paper → ink, and a sequence should be
   written down rather than inferred.
   -------------------------------------------------------------------------- */
.taste .module-details{ background:var(--paper); padding-block:0; }
.taste .module-chapter{ background:var(--paper); color:var(--ink); }
.taste .module-chapter#payroll{ background:#f7f4ef; }
.taste .module-chapter#quality{
  background:linear-gradient(175deg,var(--ink-2) 0%,var(--ink) 45%);
  color:#fff;
}
.taste .module-chapter#quality h3,.taste .module-chapter#quality h4{ color:#fff; }
/* the wrapper carries no rhythm of its own; each area supplies its own */
.taste .module-details > .wrap{ max-width:none; width:auto; padding:0; }

/* The HR scene is supposed to run from the left edge of the window to the
   middle of the grid. My first attempt used calc(50% - 50vw) for the margin
   and left the width alone — but that 50% is the grid cell, not the page, so
   the image started 306px off-screen and only 233px of it was ever visible.

   The gutter is what the margin needs to cancel: half of whatever the window
   has over the 1180px measure. Below that width there is no gutter to cancel,
   so the rule only applies where one exists. */
@media(min-width:1181px){
  .taste #hr .chapter-photo{
    margin-left:calc((var(--m-wide) - 100vw) / 2);
    width:calc(100% + (100vw - var(--m-wide)) / 2);
    max-width:none;
  }
}
@media(max-width:1180px){
  .taste #hr .chapter-photo{ margin-left:0; width:100%; }
}

/* The Payroll strip, written out rather than inferred.

   Two things were quietly cancelling each other: margin-inline:auto came
   after margin-left and reset the bleed, and the image kept an explicit
   height from further up the cascade, so its aspect-ratio computed correctly
   and then did nothing. An aspect ratio only governs a box whose other
   dimension is auto. */
.taste #payroll .chapter-photo{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:var(--s9);
  margin-bottom:var(--s9);
}
.taste #payroll .chapter-photo img{
  width:100%;
  height:auto;
  max-height:520px;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:50% 42%;
}
/* and the scene images elsewhere need the same release from a fixed height */
.taste .chapter-photo img{ height:auto; }
@media(max-width:1024px){
  .taste #payroll .chapter-photo img{ aspect-ratio:16/9; max-height:380px; }
}

/* Three children, two columns: the numeral takes column 1, the heading takes
   column 2, and the paragraph wrapped onto the next row — into column 1,
   which is 56px wide. It rendered one syllable per line. Auto-placement does
   exactly what it is told; the heading and the paragraph have to say they
   belong in the same column. */
.taste .start-list h3,
.taste .start-list p{ grid-column:2; }

/* ---------------------------------------------------------------------------
   27. Components drawn for a dark chapter, now standing on a light one.

   Found by measuring what the browser actually painted rather than by reading
   the stylesheet, which is the only way this class of fault shows up: the
   colours are all perfectly valid, they are simply on the wrong surface. The
   audit reported ratios of 1:1 — white on white — for the HR pipeline, its
   heading and its lead paragraph, on the two areas this redesign moved onto
   paper. Invisible text, not merely low contrast.

   Quality keeps every one of these values, because Quality is still dark.
   -------------------------------------------------------------------------- */
.taste #hr .mslide-label,
.taste #operations .mslide-label,
.taste .reporting .mslide-label{ color:var(--ink-soft); }

.taste #hr .mslide-open .mslide-label,
.taste #operations .mslide-open .mslide-label{ color:var(--amber-dim); }

.taste #hr .mslide-lead,
.taste #hr .mslide-open .mslide-lead,
.taste #operations .mslide-lead,
.taste #operations .mslide-open .mslide-lead{ color:var(--ink); }

.taste #hr .dg-title,
.taste #operations .dg-title{ color:var(--ink); }

.taste #hr .dg-note,.taste #hr .mslide-note,
.taste #operations .dg-note,.taste #operations .mslide-note{ color:var(--ink-soft); }

/* the pipeline: the steps he takes on are marked, the rest are quiet */
.taste #hr .dg-step,
.taste #operations .dg-step{ color:var(--ink-soft); }
.taste #hr .dg-step.is-mine,
.taste #operations .dg-step.is-mine{ color:var(--ink); font-weight:600; }

/* ---------------------------------------------------------------------------
   28. Two smaller contrast failures, both on light headers.

   The inactive language button was #AEB8C2 on white — 2.01:1 — and the amber
   full stop after the wordmark was 2.14:1, where large text needs 3. The dot
   is part of the mark, so it keeps the brand family and moves to the dim
   amber that the project already uses for amber on light.
   -------------------------------------------------------------------------- */
body:not([data-page="home"]) header.nav:not(.is-stuck) .lang-btn:not(.active){ color:var(--ink-soft); }
body:not([data-page="home"]) header.nav:not(.is-stuck) .logo span{ color:var(--amber-dim); }

/* Payroll is light too — cream — and I had only corrected the two paper
   chapters, so the same white-on-light text survived one area longer than it
   should have. Written once for all three light areas and the reporting
   section, so the next surface change has one place to look. */
.taste #payroll .mslide-label,
.taste .reporting .mslide-label{ color:var(--ink-soft); }
.taste #payroll .mslide-open .mslide-label{ color:var(--amber-dim); }
.taste #payroll .mslide-lead,
.taste #payroll .mslide-open .mslide-lead,
.taste #payroll .dg-title{ color:var(--ink); }
.taste #payroll .dg-note,.taste #payroll .mslide-note{ color:var(--ink-soft); }
.taste #payroll .dg-step{ color:var(--ink-soft); }
.taste #payroll .dg-step.is-mine{ color:var(--ink); font-weight:600; }

/* the secondary document list under each area */
.taste #hr .ex-more-label,.taste #payroll .ex-more-label,
.taste #operations .ex-more-label{ color:var(--ink-soft); }
.taste #hr .ex-more li,.taste #payroll .ex-more li,
.taste #operations .ex-more li{ color:var(--ink-soft); }
.taste #hr .doc-fineprint,.taste #payroll .doc-fineprint,
.taste #operations .doc-fineprint{ color:var(--ink-soft); }

/* The month calendar in Payroll, the last component still wearing its dark
   colours on a light surface. The amber day numbers were 1.95:1 on cream —
   amber as text on anything light is the failure the project stylesheet
   already documents, and --amber-dim is the answer it already gives. */
.taste #payroll .dg-running,
.taste #payroll .dg-next{ color:var(--ink-soft); }
.taste #payroll .dg-mark span:not(.dg-mark-day){ color:var(--ink); }
.taste #payroll .dg-mark-day{ color:var(--amber-dim); font-weight:600; }
.taste #payroll .dg-day-cell{ background:#e6e1d8; }
.taste #payroll .dg-day-cell.is-mark{ background:var(--amber-dim); }

/* The day timeline in Operations — the last of the dark-theme components.

   Five of these turned up one after another, each found only by measuring
   what was painted. The pattern is worth stating plainly: this theme encodes
   its surface in every component colour, so moving a section from dark to
   light moves every descendant with it, and the stylesheet gives no warning
   because none of the colours are wrong — they are simply somewhere else. */
.taste #operations .dg-pin-time{ color:var(--amber-dim); font-weight:600; }
.taste #operations .dg-pin-label{ color:var(--ink-soft); }
.taste #operations .dg-pin::before,
.taste #operations .dg-pin::after{ background:var(--amber-dim); }
.taste #operations .dg-timeline,
.taste #operations .dg-rail{ background:var(--line); }

/* The reporting diagram closes the services page, and it is drawn in light
   type on dark — four source labels, a hub and three outputs. Putting it on
   cream left all of it at about 1.1:1.

   Rather than repaint a diagram that works, the section joins Quality on ink
   and is separated from it by a hairline instead of a colour change. That is
   also the right reading of the content: the four areas feed this, so the
   page should not change register between the last area and what it produces. */
.taste .reporting{
  background:var(--ink);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.1);
}
.taste .reporting .title,.taste .reporting strong{ color:#fff; }
.taste .reporting .kicker{ color:var(--amber); }
.taste .reporting p{ color:#C7CCD1; }
.taste .reporting .flow-top{ border-bottom-color:rgba(255,255,255,.12); }
.taste .reporting .mslide-label{ color:#9FADB9; }
.taste .reporting .btn-dark{
  background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.22);
}

/* The last one: the funnel output label in Operations, amber-light on a 10%
   amber tint over white — 1.45:1. The tint stays, because it is what marks
   the node; the label takes the dim amber that is legible on light. */
.taste #hr .dg-funnel-out,
.taste #payroll .dg-funnel-out,
.taste #operations .dg-funnel-out{ color:var(--amber-dim); }
.taste #hr .dg-funnel-out span,
.taste #payroll .dg-funnel-out span,
.taste #operations .dg-funnel-out span{ color:var(--amber-dim); font-weight:600; }

/* The four steps each carried a top offset (140, 162, 184, 206px) and a 200px
   top margin — the remains of a scroll sequence that was started and never
   finished, and the same thing that left 200px of dead air between them on
   the live site. In a four-column track they staggered the columns down the
   page and pushed the last one 94px past the end of its own section. A track
   is a row; the four entries start level. */
.taste #ablauf .steps{ align-items:start; }
.taste #ablauf .step{ top:auto; margin-top:0; }

/* The hero is a dark section. My base rule gave every top-level section paper
   and ink; the hero override removed the background and left the colour, so
   the headline was ink on ink — rgb(19,26,34) on rgb(19,26,34), the exact
   same value. "Der Motor hinter" was invisible and only the amber half of the
   line could be read. Every dark surface now states its text colour next to
   its background, in one place, so the two cannot be separated again. */
.taste .hero{ color:#fff; }
.taste .hero h1{ color:#fff; }
.taste .hero h1 em{ color:var(--amber); font-style:normal; }

/* ---------------------------------------------------------------------------
   29. The hero, put back together.

   I split it into a title card with the van stacked underneath. Measured
   against the screens people actually use, that put the van — the one thing
   that explains this business at a glance — below the fold on every laptop:

       1366x768   23% of it visible, first clickable bay at 745px
       1280x720   24%,                                      688px
       1440x900   34%,                                      768px

   The copy ran 565px tall before the image began. So the two sit side by side
   again, which is where they were before I moved them, and the headline is
   sized for the column it lives in rather than for the full page. 58/42 rather
   than the original 71/29: the old copy column was 325px wide, which is why a
   large headline never fit in it and why I moved it in the first place.
   -------------------------------------------------------------------------- */
@media(min-width:901px){
  .taste .hero{ padding-block:88px var(--s8); }
  .taste .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,58fr) minmax(360px,42fr);
    gap:var(--s7);
    align-items:center;
    max-width:var(--m-wide);
  }
  /* the van is the second child in the markup because a script appends it */
  .taste .hero #dsp-engine{
    grid-column:1;
    grid-row:1;
    width:auto;
    max-width:none;
    margin:0;
  }
  .taste .hero-grid > div{
    grid-column:2;
    grid-row:1;
    max-width:none;
  }
  .taste .hero h1{
    font-size:clamp(34px,3.6vw,56px);
    max-width:none;
  }
  .taste .hero p.lead{ font-size:clamp(15px,1.15vw,17px); line-height:1.62; max-width:none; }
  .taste .hero-ctas{ margin-top:var(--s5); }
  .taste .hero-tagline{ margin-top:var(--s4); }
}

/* Below 900 the two stack, and then the only thing that keeps the van near the
   top is how much text precedes it — so the lead and the tagline tighten
   rather than the image shrinking. */
@media(max-width:900px){
  .taste .hero{ padding-block:80px var(--s7); }
  .taste .hero h1{ font-size:clamp(36px,8vw,52px); max-width:none; }
  .taste .hero p.lead{ font-size:16px; line-height:1.6; }
  .taste .hero-ctas{ margin-top:var(--s5); }
  .taste .hero-tagline{ display:none; }
  .taste .hero #dsp-engine{ margin-top:var(--s6); }
}

/* ===========================================================================
   30. Density pass — taste-skill v1, VISUAL_DENSITY 4.

   Measured before changing anything: section padding was 152px top and bottom
   on five sections, which is 1520px of the page spent on nothing, plus 416px
   wrapped around the single sentence of the statement. That is density 1–2
   — "art gallery" — on a site whose job is to get a fleet owner to the point.
   Density 4 is "normal spacing for standard web apps", so the scale comes down
   accordingly rather than being nudged.

   DESIGN_VARIANCE 8 is answered by the layouts below, not by the spacing: the
   four areas stop being four identical full-width rows and become an
   asymmetric tile grid, and the hero is already a 58/42 split rather than
   centred.
   =========================================================================== */
.taste{
  --movement:96px;
  --block:64px;
  --head-gap:36px;
}
@media(max-width:1024px){ .taste{ --movement:80px; --block:56px; --head-gap:32px; } }
@media(max-width:760px){ .taste{ --movement:64px; --block:44px; --head-gap:28px; } }

.taste .statement{ padding-block:112px; }
@media(max-width:760px){ .taste .statement{ padding-block:72px; } }
.taste .statement h2::before{ margin-bottom:var(--s6); }

/* the day log and the three steps lose a third of their row height */
.taste .daylog-row{ padding-block:20px; }
.taste #problem .daylog{ margin-top:var(--s7); }
.taste .daylog-close{ margin-top:var(--s6); }
.taste .start-list li{ padding-block:20px; }
.taste .start-list{ margin-top:var(--s7); }

/* ---------------------------------------------------------------------------
   31. The four areas: an asymmetric tile grid.

   They were four full-width rows — a name on the left, three grey lines on the
   right, and a great deal of nothing between. It read as a table of contents.
   Four equal cards would be the other failure, and a three-up is banned
   outright, so the grid is deliberately uneven: HR and Quality take two
   columns, Payroll and Operations take one, and the row order alternates which
   side the wide tile sits on.

   The tiles are surfaces, not boxes: a hairline, a soft radius and a shadow
   tinted to the background rather than to black. The lift on hover is the
   tactile feedback the skill asks for, and the press state goes the other way.
   -------------------------------------------------------------------------- */
.taste .teaser .console{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:var(--s7);
}
.taste .teaser a.console-mod{
  display:flex;
  flex-direction:column;
  padding:32px 32px 28px;
  border:1px solid #0000000f;
  border-top:1px solid #0000000f;
  border-radius:20px;
  background:#fffdfa;
  box-shadow:0 1px 2px rgba(19,26,34,.03), 0 18px 32px -24px rgba(92,51,0,.18);
  min-height:0;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s cubic-bezier(.16,1,.3,1);
}
.taste .teaser a.console-mod:nth-child(1){ grid-column:span 2; }
.taste .teaser a.console-mod:nth-child(2){ grid-column:span 1; }
.taste .teaser a.console-mod:nth-child(3){ grid-column:span 1; }
.taste .teaser a.console-mod:nth-child(4){ grid-column:span 2; }

.taste .teaser a.console-mod::after{ display:none; }
.taste .teaser .console-mod h3{
  font-size:clamp(24px,2.1vw,32px);
  margin:0 0 14px;
  transform:none;
}
.taste .teaser .console-mod ul{
  grid-column:auto;
  grid-row:auto;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid #0000000d;
}
.taste .teaser .console-mod li{
  font-size:13.5px;
  line-height:1.5;
  padding:0;
  color:var(--ink-soft);
}
.taste .teaser .console-mod li:not(:last-child)::after{
  content:"·";
  margin-left:10px;
  color:#0000002e;
}
.taste .teaser .mod-code{ margin-bottom:10px; }
.taste .teaser .mod-more{
  grid-column:auto;
  grid-row:auto;
  justify-self:start;
  align-self:flex-start;
  position:absolute;
  top:30px; right:30px;
  transform:none;
}
.taste .teaser a.console-mod{ position:relative; }

@media (hover:hover) and (pointer:fine){
  .taste .teaser a.console-mod:hover{
    transform:translateY(-3px);
    border-color:#5c330026;
    box-shadow:0 1px 2px rgba(19,26,34,.04), 0 26px 44px -26px rgba(92,51,0,.3);
  }
  .taste .teaser a.console-mod:hover h3{ transform:none; }
  .taste .teaser a.console-mod:hover .mod-more{ transform:translateX(4px); }
}
.taste .teaser a.console-mod:active{ transform:translateY(-1px) scale(.995); }

@media(max-width:900px){
  .taste .teaser .console{ grid-template-columns:1fr; gap:12px; }
  .taste .teaser a.console-mod:nth-child(n){ grid-column:span 1; }
  .taste .teaser a.console-mod{ padding:26px 24px 24px; }
}

/* ---------------------------------------------------------------------------
   32. The founder block: the picture stops setting the page height.

   A 4:5 render at half the width is 700px tall on its own, which is why this
   section ran to 1456px for three sentences and two buttons.
   -------------------------------------------------------------------------- */
.taste .founder-inner{ gap:var(--s8); align-items:center; }
.taste .founder-figure img{
  aspect-ratio:1/1;
  max-height:420px;
  object-position:50% 30%;
  border-radius:20px;
}
@media(max-width:900px){
  .taste .founder-figure img{ aspect-ratio:16/10; max-height:300px; }
}

/* ---------------------------------------------------------------------------
   33. Motion, to the skill's spec.

   One easing curve everywhere — cubic-bezier(.16,1,.3,1) — transform and
   opacity only, and a cascade rather than everything arriving at once. The
   project's own reveal already staggers by sibling index and already refuses
   to hide anything when the reader has asked for less motion; this gives it
   the curve and trims the travel.
   -------------------------------------------------------------------------- */
.taste .reveal{
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
.taste .reveal.pre{ transform:translateY(14px); }

.taste .btn{
  transition:transform .3s cubic-bezier(.16,1,.3,1), background-color .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.taste .btn:active{ transform:translateY(1px); }

@media (prefers-reduced-motion: reduce){
  .taste .reveal{ transition-duration:1ms; transition-delay:0ms; }
  .taste .teaser a.console-mod{ transition-duration:1ms; }
}

/* ---------------------------------------------------------------------------
   34. The hero void.

   scene-landing.css pins the hero with height:100svh — a fixed height, not a
   floor. With the content now 682px tall inside a 950px box, the remainder
   was 268px of empty dark below the van. It is also the pattern the taste
   skill calls out by name: a full-height hero takes min-height, never height,
   or it either clips on a short window or holds air on a tall one.

   So: a floor of one screen, a box that grows past it when the content needs
   to, and the content centred in whatever is left. Centring is only safe once
   the height can grow — it was centring inside a fixed box that put the
   headline at y:-148 earlier in this rebuild. */
@media(min-width:901px){
  .taste .hero.image-depth-hero,
  .taste .hero{
    height:auto;
    min-height:100dvh;
    max-height:none;
    display:flex;
    align-items:center;
    padding-block:88px 72px;
  }
  .taste .hero > .hero-grid{ width:100%; }
}
@media(max-width:900px){
  .taste .hero.image-depth-hero,
  .taste .hero{ height:auto; min-height:0; display:block; }
}

/* ---------------------------------------------------------------------------
   35. The wordmark.

   The theme set it at -0.07em. At 28px in the navigation that reads, because
   the eye closes the gap; blown up to a business card or a vehicle it does
   not — the I merges into the B and IBSS becomes BSS. The logo files are drawn
   at -0.03em, where every letter stands apart and the word keeps its condensed
   character, so the site matches them.
   -------------------------------------------------------------------------- */
.taste .logo{ letter-spacing:-.03em; }
.taste .logo span{ margin-left:-.015em; }