/* Starter layout system for one-page demo sites.
   Copy this file to the top of the site's styles.css. Set the five SETTINGS from the chosen design direction;
   leave the SYSTEM as it is. Every size on the site uses a token below: --s-*, --step-*, --u or --t. */

:root{
  /* ---------- SETTINGS: one set per design direction ---------- */
  --font-display:"Big Shoulders Display",sans-serif;
  --font-body:"Hanken Grotesk",sans-serif;
  --ratio:1.333;     /* type ratio: 1.2 calm (law, dental) … 1.25 neutral … 1.333 dramatic (carwash, gym). Above 1.333
                        h1/h2 get too big; for a bigger hero headline, size that one heading in --u instead */
  --density:1;       /* spacing multiplier: .85 tight and energetic … 1 neutral … 1.25 airy and luxurious */
  --content:1240;    /* widest content box at 1440×900, as a number of px */
  --text-base:17;    /* body text at 1440×900, as a number of px */
  --bg:#f7f7f5;--fg:#121212;--muted:#55585d;--accent:#f7b500;--line:rgba(18,18,18,.12);

  /* ---------- SYSTEM: the same on every site ---------- */
  /* --u: 1px at 1440×900. Layout, spacing and headings grow and shrink with it on desktop screens.
     --t: like --u but never below 1px, for running text so it stays readable at 1100px. */
  --u:1px;
  --t:max(1px,var(--u));
  --r:var(--ratio);
  --base:var(--text-base);

  /* Type scale: --step-0 is body text; each step is --ratio times the one below */
  --step--1:calc(var(--base) / var(--r) * var(--t));
  --step-0:calc(var(--base) * var(--t));
  --step-1:calc(var(--base) * var(--r) * var(--t));
  --step-2:calc(var(--base) * pow(var(--r),2) * var(--u));
  --step-3:calc(var(--base) * pow(var(--r),3) * var(--u));
  --step-4:calc(var(--base) * pow(var(--r),4) * var(--u));
  --step-5:calc(var(--base) * pow(var(--r),5) * var(--u));
  --step-6:calc(var(--base) * pow(var(--r),6) * var(--u));
  --step-7:calc(var(--base) * pow(var(--r),7) * var(--u));

  /* Spacing scale (px at 1440×900, times --density). Use only these for gaps, padding and margins. */
  --k:calc(var(--density) * var(--u));
  --s-1:calc(4 * var(--k));
  --s-2:calc(8 * var(--k));
  --s-3:calc(12 * var(--k));
  --s-4:calc(16 * var(--k));
  --s-5:calc(24 * var(--k));
  --s-6:calc(32 * var(--k));
  --s-7:calc(48 * var(--k));
  --s-8:calc(64 * var(--k));
  --s-9:calc(96 * var(--k));
  --s-10:calc(128 * var(--k));
  --s-11:calc(192 * var(--k));

  /* Grid: phone 4 columns, tablet 8, desktop 12 */
  --cols:4;
  --gap:16px;
  --margin:20px;
  --section:var(--s-9);
}
/* Phone (below 768px): flatter type scale, smaller big gaps */
@media (max-width:767px){
  :root{--r:calc(1 + (var(--ratio) - 1) * .7);--base:calc(var(--text-base) - 1);
    --s-9:calc(64 * var(--density) * 1px);--s-10:calc(80 * var(--density) * 1px);--s-11:calc(112 * var(--density) * 1px)}
}
@media (min-width:768px){
  :root{--cols:8;--gap:20px;--margin:32px;--r:calc(1 + (var(--ratio) - 1) * .85);--section:var(--s-10)}
}
/* Desktop (1100px+ and landscape): everything scales with the screen, from 0.8× at 1100px to 1.85× at 2560px+ */
@media (min-width:1100px) and (min-aspect-ratio:6/5){
  :root{--u:clamp(.8px,min(100vw / 1440,100svh / 900),1.85px);--r:var(--ratio);
    --cols:12;--gap:calc(24 * var(--u));--margin:max(32px,calc(64 * var(--u)));--section:var(--s-10)}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--step-0)/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);line-height:1.05;text-wrap:balance}
p{margin:0;text-wrap:pretty}
h1{font-size:var(--step-6)}
h2{font-size:var(--step-5)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
small{font-size:var(--step--1)}

/* ---------- Layout ---------- */
/* .wrap: the content box. .section: vertical rhythm between sections. */
.wrap{width:100%;max-width:calc(var(--content) * var(--u) + 2 * var(--margin));margin-inline:auto;padding-inline:var(--margin)}
.section{padding-block:var(--section)}
/* .grid: children span the full width on every screen unless a span class says otherwise.
   .span-N works from 1100px (12 columns), .span-t-N from 768px (8 columns). */
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-6)}
.grid>*{grid-column:1/-1;min-width:0}
@media (min-width:768px){
  .span-t-2{grid-column:span 2}.span-t-3{grid-column:span 3}.span-t-4{grid-column:span 4}
  .span-t-5{grid-column:span 5}.span-t-6{grid-column:span 6}.span-t-8{grid-column:span 8}
}
@media (min-width:1100px) and (min-aspect-ratio:6/5){
  .span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}
  .span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-9{grid-column:span 9}
  .span-10{grid-column:span 10}.span-12{grid-column:span 12}
}
/* .stack: vertical spacing inside a block; set --gap-y to another --s-* token when needed */
.stack{display:flex;flex-direction:column;gap:var(--gap-y,var(--s-4))}

/* ======================================================================
   CleanCrew · Werkplaats 305
   ====================================================================== */
:root{
  --ink:#121212;--card:#fff;--orange:#f2892b;--sub:#33363a;
  --tape-h:calc(34 * var(--u));--checker:calc(14 * var(--u));
  --radius:calc(6 * var(--u));--round:calc(999 * var(--u));
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (min-width:768px){:root{--tape-h:calc(40 * var(--u))}}
@media (min-width:1100px) and (min-aspect-ratio:6/5){:root{--checker:calc(16 * var(--u))}}

h1,h2,h3{text-transform:uppercase;line-height:.9;font-weight:900;letter-spacing:-.005em}
h3{font-weight:800}
a{color:inherit}
:focus-visible{outline:calc(3 * var(--t)) solid var(--ink);outline-offset:calc(3 * var(--t))}
.skip{position:absolute;left:var(--s-3);top:-100%;z-index:200;background:var(--ink);color:var(--accent);padding:var(--s-2) var(--s-4);border-radius:var(--round)}
.skip:focus{top:var(--s-3)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:calc(56 * var(--u));padding-inline:var(--s-5);
  border-radius:calc(14 * var(--u));font:700 var(--step-0)/1.1 var(--font-body);text-decoration:none;text-align:center;
  transition:transform .25s var(--ease-out),background-color .2s,color .2s}
.btn svg{width:calc(22 * var(--u));height:calc(22 * var(--u));flex:none}
.btn--wa{background:var(--ink);color:var(--accent)}
.btn--wa:hover{background:#000;transform:translateY(calc(-2 * var(--u)))}
.btn--line{box-shadow:inset 0 0 0 calc(2 * var(--t)) var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--card)}

/* ---------- Checker strip (his workshop floor) ---------- */
.checker{height:var(--checker);background:conic-gradient(var(--ink) 25%,var(--card) 0 50%,var(--ink) 0 75%,var(--card) 0) 0 0/var(--checker) var(--checker)}

/* ---------- Service tape ---------- */
.tape{position:relative;z-index:2;height:var(--tape-h);background:var(--accent);overflow:hidden;display:flex;align-items:center}
.tape__track{display:flex;flex:none;overflow:clip;white-space:nowrap;animation:tape 48s linear infinite}
.tape__track span{font:900 calc(var(--tape-h) * .56)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;padding-right:.5em}
@keyframes tape{to{transform:translateX(-50%)}}
.tape__demo{position:absolute;inset:0 0 0 auto;display:flex;align-items:center;gap:var(--s-2);padding-inline:var(--s-3) var(--margin);
  background:var(--ink);color:var(--accent);font:700 calc(11 * var(--t))/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.tape__demo::after{content:"";position:absolute;right:100%;top:0;bottom:0;width:var(--s-6);background:linear-gradient(90deg,transparent,var(--accent))}
.tape__demo::before{content:"";width:calc(7 * var(--u));aspect-ratio:1;border-radius:50%;background:var(--orange)}

/* ---------- Nav ---------- */
.nav{position:absolute;z-index:20;top:calc(var(--tape-h) + var(--s-3));left:var(--margin);right:var(--margin);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);transition:top .35s var(--ease-out)}
.nav__brand{display:flex;align-items:center;gap:var(--s-2);background:var(--card);border-radius:var(--round);
  padding:var(--s-1) var(--s-4) var(--s-1) var(--s-1);text-decoration:none;font:900 calc(20 * var(--u))/1 var(--font-display);
  text-transform:uppercase;letter-spacing:.01em;box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(18,18,18,.18)}
.nav__brand img{width:calc(34 * var(--u));height:auto}
.nav__links{display:none}
.nav__right{display:flex;align-items:center;gap:var(--s-2)}
.nav__wa{display:none}
.lang{display:flex;gap:calc(2 * var(--u));background:rgba(18,18,18,.78);border-radius:var(--round);padding:var(--s-1)}
.lang button{min-width:calc(36 * var(--u));min-height:calc(34 * var(--u));padding-inline:var(--s-2);border:0;border-radius:var(--round);
  background:none;color:var(--card);font:700 calc(12 * var(--t))/1 var(--font-body);letter-spacing:.04em;cursor:pointer;transition:background-color .2s}
.lang button:hover{background:rgba(255,255,255,.14)}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--ink)}
.lang button:focus-visible{outline-color:var(--accent)}

/* ---------- Hero (phone first) ---------- */
.hero{position:relative;background:var(--bg)}
.hero__photo{position:relative;height:52svh;overflow:hidden;background:#3a2b25}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero__panel{padding:var(--s-5) var(--margin) var(--s-6)}
.hero h1{font-size:calc(56 * var(--u));letter-spacing:-.01em}
.ln{display:block;overflow:hidden;vertical-align:top;padding-block:.06em;margin-block:-.06em}
.ln>span{display:inline-block}
.hero h1 mark{background:var(--accent);color:var(--ink);padding-inline:.08em;margin-left:-.08em}
.hero__sub{margin-top:var(--s-3);color:var(--sub);max-width:42ch}
.hero__actions{margin-top:var(--s-5);display:grid;gap:var(--s-3)}
.hero__actions .btn--line{display:none}
.hero__meta{margin-top:var(--s-3);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  font-size:var(--step--1);line-height:1.4;color:var(--muted);white-space:nowrap}
.hero__meta b{color:var(--ink)}
.hero__meta a{text-decoration:none}
.hero__meta a:hover{text-decoration:underline}
@media (max-height:760px) and (max-width:767px){.hero__photo{height:42svh}.hero__photo img{object-position:50% 8%}}
@media (max-height:700px) and (max-width:767px){.hero__photo{height:36svh}}

@media (min-width:768px){
  .hero__photo{height:55svh}
  .hero__photo img{object-position:70% 60%}
  .hero__panel{padding-block:var(--s-6) var(--s-7)}
  .hero h1{font-size:calc(84 * var(--u));max-width:calc((100% - var(--gap)) * 7 / 8)}
  .ln.l1,.ln.l2{display:inline-block}
  .hero__actions{grid-template-columns:auto auto;justify-content:start}
  .hero__actions .btn--line{display:inline-flex}
  .hero__meta{justify-content:flex-start;gap:var(--s-5)}
}

/* Laptop and wide: photo fills the screen, headline sits on a white ticket over the street */
@media (min-width:1100px) and (min-aspect-ratio:6/5){
  .hero{height:100svh;min-height:calc(600 * var(--u));display:flex;flex-direction:column}
  .hero__photo{flex:1;height:auto;min-height:0}
  .hero__photo img{width:114%;max-width:none;object-position:0% 60%}
  .hero__wrap{position:absolute;inset:auto 0 calc(64 * var(--u) + var(--checker));padding-inline:var(--margin);
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);pointer-events:none}
  .hero__panel{grid-column:1 / span 5;padding:0;pointer-events:auto;filter:drop-shadow(0 calc(16 * var(--u)) calc(28 * var(--u)) rgba(18,18,18,.3))}
  .hero__ticket{container-type:inline-size;--stub-h:calc(2 * var(--s-5) + 56 * var(--u) + var(--s-3) + var(--step--1) * 1.4 + 2 * var(--t));background:var(--card);border-radius:var(--radius)}
  .hero__top{padding:var(--s-6) var(--s-6) var(--s-5)}
  .hero h1{font-size:min(calc(100 * var(--u)),calc((100cqi - 2 * var(--s-6)) / 4.95));max-width:none}
  .ln.l1,.ln.l2{display:block}
  .hero__stub{height:var(--stub-h);padding:var(--s-5) var(--s-6);border-top:calc(2 * var(--t)) dashed rgba(18,18,18,.22)}
  .hero__actions{margin-top:0;grid-template-columns:1fr auto}
  .hero__actions .btn{height:calc(56 * var(--u))}
  .hero__meta{justify-content:space-between}
}

/* Ticket notches: half circles cut from both sides at the perforation line */
.notched{--nr:calc(12 * var(--u));--ny:calc(100% - var(--stub-h));
  -webkit-mask:radial-gradient(circle at 0 var(--ny),#0000 var(--nr),#000 calc(var(--nr) + var(--t))) 0 0/51% 100% no-repeat,
               radial-gradient(circle at 100% var(--ny),#0000 var(--nr),#000 calc(var(--nr) + var(--t))) 100% 0/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 var(--ny),#0000 var(--nr),#000 calc(var(--nr) + var(--t))) 0 0/51% 100% no-repeat,
               radial-gradient(circle at 100% var(--ny),#0000 var(--nr),#000 calc(var(--nr) + var(--t))) 100% 0/51% 100% no-repeat}
@media (max-width:1099px),(max-aspect-ratio:6/5){.hero__ticket.notched{-webkit-mask:none;mask:none}}

/* ---------- Desktop nav ---------- */
@media (min-width:1100px) and (min-aspect-ratio:6/5){
  .nav{position:fixed;top:calc(var(--tape-h) + var(--s-4))}
  .nav.is-stuck{top:var(--s-4)}
  .nav__links{display:flex;gap:calc(2 * var(--u));position:absolute;left:50%;translate:-50% 0;margin:0;padding:var(--s-1);list-style:none;
    background:var(--card);border-radius:var(--round);box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(18,18,18,.18)}
  .nav__links a{display:block;padding:var(--s-2) var(--s-4);border-radius:var(--round);text-decoration:none;font:500 calc(15 * var(--t))/1.2 var(--font-body);transition:background-color .2s}
  .nav__links a:hover{background:var(--bg)}
  .nav__wa{display:inline-flex;align-items:center;gap:var(--s-2);min-height:calc(42 * var(--u));padding-inline:var(--s-4);border-radius:var(--round);
    background:var(--accent);color:var(--ink);text-decoration:none;font:700 calc(15 * var(--t))/1 var(--font-body);
    box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(18,18,18,.18);transition:transform .25s var(--ease-out)}
  .nav__wa:hover{transform:translateY(calc(-2 * var(--u)))}
  .nav__wa svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
}

/* ---------- Dock (phone and tablet) ---------- */
.dock{position:fixed;z-index:30;left:50%;bottom:calc(var(--s-4) + env(safe-area-inset-bottom));translate:-50% calc(100% + var(--s-7));
  display:flex;align-items:center;gap:var(--s-1);padding:var(--s-1);background:var(--accent);border-radius:var(--round);
  box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(18,18,18,.24);transition:translate .5s var(--ease-out)}
.dock.is-on{translate:-50% 0}
.dock__menu{min-height:calc(48 * var(--u));padding-inline:var(--s-4) var(--s-3);border:0;background:none;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;gap:var(--s-2);font:800 calc(17 * var(--u))/1 var(--font-display);text-transform:uppercase;letter-spacing:.06em}
.dock__menu i{display:grid;gap:calc(4 * var(--u));width:calc(16 * var(--u))}
.dock__menu i::before,.dock__menu i::after{content:"";height:calc(2 * var(--u));background:currentColor;border-radius:var(--round)}
.dock__wa{display:inline-flex;align-items:center;gap:var(--s-2);min-height:calc(48 * var(--u));padding-inline:var(--s-4) var(--s-5);border-radius:var(--round);
  background:var(--ink);color:var(--accent);text-decoration:none;font:700 calc(15 * var(--u))/1 var(--font-body);white-space:nowrap}
.dock__wa svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
@media (min-width:1100px) and (min-aspect-ratio:6/5){.dock{display:none}}

.menu{inset:auto 0 0;width:100%;max-width:none;max-height:90svh;margin:0;border:0;padding:var(--s-7) var(--margin) calc(var(--s-6) + env(safe-area-inset-bottom));
  background:var(--ink);color:var(--card);border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
  transition:translate .4s var(--ease-out),display .4s allow-discrete,overlay .4s allow-discrete;translate:0 100%}
.menu:popover-open{translate:0 0}
@starting-style{.menu:popover-open{translate:0 100%}}
.menu::backdrop{background:rgba(18,18,18,.5)}
.menu ul{list-style:none;margin:0;padding:0}
.menu__link{display:block;padding-block:var(--s-1);color:var(--card);text-decoration:none;font:900 calc(44 * var(--u))/1 var(--font-display);text-transform:uppercase}
.menu__link:hover{color:var(--accent)}
.menu__close{position:absolute;top:var(--s-4);right:var(--margin);min-height:calc(40 * var(--u));padding-inline:var(--s-4);border:0;border-radius:var(--round);
  background:rgba(255,255,255,.12);color:var(--card);font:700 calc(14 * var(--u))/1 var(--font-body);cursor:pointer}
.menu__foot{margin-top:var(--s-6);display:grid;gap:var(--s-3)}
.menu__foot .btn--wa{background:var(--accent);color:var(--ink)}
.menu__foot .btn--line{box-shadow:inset 0 0 0 calc(2 * var(--t)) rgba(255,255,255,.4);color:var(--card)}
.menu .lang{margin-top:var(--s-5);width:max-content;background:rgba(255,255,255,.1)}
.menu :focus-visible{outline-color:var(--accent)}

/* ---------- Intro: his checkered floor flips away (first visit only) ---------- */
.tiles{display:none}
.intro .tiles{display:grid;position:fixed;inset:0;z-index:100;grid-template-columns:repeat(6,1fr);align-content:start;pointer-events:none}
.tiles i{background:var(--ink);animation:flip .42s cubic-bezier(.6,0,.3,1) both}
.tiles i.w{background:var(--card)}
@keyframes flip{to{transform:scale(0)}}
.intro .hero h1 .ln>span{animation:rise .55s var(--ease-out) both}
.intro .hero h1 .l1>span{animation-delay:.45s}
.intro .hero h1 .l2>span{animation-delay:.52s}
.intro .hero h1 .l3>span{animation-delay:.59s}
@keyframes rise{from{transform:translateY(110%)}}
.intro .tape__track{animation-play-state:paused}

/* ---------- Proof strip ---------- */
.proof{background:var(--card);border-bottom:var(--t) solid var(--line)}
.proof__list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.proof__item{display:flex;flex-direction:column;justify-content:center;gap:var(--s-1);height:100%;padding:var(--s-5) var(--s-3);text-decoration:none;min-width:0}
.proof li:nth-child(odd){border-right:var(--t) solid var(--line)}
.proof li:nth-child(-n+2){border-bottom:var(--t) solid var(--line)}
.proof li:nth-child(odd) .proof__item{padding-left:0}
.proof__big{display:flex;align-items:baseline;gap:var(--s-2);font:900 var(--step-2)/.95 var(--font-display);text-transform:uppercase}
.proof__stars{color:var(--accent);font-size:var(--step-0);letter-spacing:.06em}
.proof__small{font-size:var(--step--1);line-height:1.35;color:var(--muted)}
a.proof__item:hover .proof__big{text-decoration:underline;text-decoration-thickness:calc(3 * var(--t));text-decoration-color:var(--accent);text-underline-offset:.12em}
.status{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--ink);font-weight:700}
.status::before{content:"";width:calc(7 * var(--u));aspect-ratio:1;border-radius:50%;background:var(--orange)}
.status.is-open::before{background:var(--accent);box-shadow:0 0 0 calc(2 * var(--u)) rgba(247,181,0,.3)}
@media (min-width:768px){.proof__big{font-size:var(--step-3)}.proof__item{padding-block:var(--s-6)}}
@media (min-width:1100px) and (min-aspect-ratio:6/5){
  .proof__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .proof li{border-bottom:0!important;border-right:var(--t) solid var(--line)}
  .proof li:last-child{border-right:0}
  .proof__item{padding:var(--s-6) var(--s-4)}
  .proof li:first-child .proof__item{padding-left:0}
  .proof li:nth-child(3) .proof__item{padding-left:var(--s-4)}
  .proof__big{font-size:var(--step-3)}
}

/* ---------- Diensten ---------- */
.services{position:relative;background:var(--accent);overflow:hidden;padding-top:0}
.services__giant{margin-left:calc(-12 * var(--u));padding-top:var(--s-7);white-space:nowrap;user-select:none;
  font:900 calc(112 * var(--u))/.85 var(--font-display);text-transform:uppercase;color:transparent;-webkit-text-stroke:.022em var(--ink)}
.services__head{align-items:end;margin-top:var(--s-6);margin-bottom:var(--s-7)}
.services h2{font-size:var(--step-5)}
.services__intro{max-width:44ch}
.spray{display:inline-block;width:.9em;height:auto;margin-left:.22em;vertical-align:top;translate:0 -.18em}
.spray .o{fill:var(--orange)}.spray .k{fill:var(--ink)}
.services__list{list-style:none;margin:0;padding:0;row-gap:var(--s-5)}
.svc{filter:drop-shadow(0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(18,18,18,.16));transition:translate .35s var(--ease-out)}
.svc:hover{translate:0 calc(-4 * var(--u))}
.ticket{position:relative;display:flex;flex-direction:column;height:100%;background:var(--card);border-radius:var(--radius)}
.svc__media{position:relative;margin:var(--s-2) var(--s-2) 0;overflow:hidden;border-radius:var(--radius)}
.svc__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:scale .6s var(--ease-out)}
.svc:hover .svc__media img{scale:1.04}
.svc__flag{position:absolute;left:var(--s-2);top:var(--s-2);padding:var(--s-1) var(--s-3);border-radius:var(--round);background:var(--ink);color:var(--accent);
  font:700 calc(12 * var(--t))/1.3 var(--font-body);letter-spacing:.02em}
.svc__body{flex:1;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-6)}
.svc h3{font-size:var(--step-3)}
.svc__line{color:var(--sub)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);font-size:calc(15 * var(--t));line-height:1.4}
.checks li{display:grid;grid-template-columns:calc(18 * var(--u)) 1fr;gap:var(--s-2)}
.checks li::before{content:"";width:calc(18 * var(--u));aspect-ratio:1;margin-top:.12em;border-radius:calc(4 * var(--u));
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23121212' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.svc .ticket{--stub-h:calc(2 * var(--s-5) + var(--step-4) * .9 + var(--s-4) + 52 * var(--u) + 2 * var(--t))}
.svc__stub{position:relative;height:var(--stub-h);display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);border-top:calc(2 * var(--t)) dashed rgba(18,18,18,.22)}
.price{display:flex;align-items:flex-end;gap:var(--s-2);height:calc(var(--step-4) * .9);margin:0}
.price small{font:500 var(--step--1)/1 var(--font-body);color:var(--muted);padding-bottom:.2em}
.price b{font:900 var(--step-4)/.8 var(--font-display)}
.price__tag{position:absolute;right:var(--s-2);top:var(--s-2);padding:var(--s-1) var(--s-3);border-radius:var(--round);background:rgba(255,255,255,.92);color:var(--ink);
  font:700 calc(11 * var(--t))/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.svc .btn{height:calc(52 * var(--u));min-height:0;font-size:calc(15 * var(--t))}
.services__note{margin-top:var(--s-6);font-size:calc(15 * var(--t));max-width:60ch}
@media (min-width:768px){.svc h3{min-height:1.8em}.services__giant{font-size:calc(180 * var(--u));margin-left:calc(-16 * var(--u))}}
@media (min-width:1100px) and (min-aspect-ratio:6/5){.services__giant{font-size:calc(230 * var(--u))}.services__head{margin-top:var(--s-7)}}

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion:reduce){
  .tape__track{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}