/* Look AK "Lane": the view from the driver's seat. Windscreen-arch photos over a dark dashboard, round instrument dials,
   odometer drums for prices, an H-pattern gear gate as the nav, shift lights for the steps to the licence and a round
   start button. Every class starts with ak- (design rules §9). Tokens: see design.ts. */
@font-face{font-family:"Space Mono AK";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono AK";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono AK";font-style:italic;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-ext-700-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono AK";font-style:italic;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-700-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken AK";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken AK";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* reference palette "sky" (design.ts check() prints these) */
:root{--bg:#d6e6f3;--ink:#041826;--mute:#455867;--line:#7e909f;--card:#f6fbff;--oncard:#041826;--cardmute:#566571;--cardline:#bfc8cf;--dash:#1c2733;--ondash:#edf2f9;--dashmute:#a8afb9;--dashline:#3c4753;--glow:#f5a524;--act:#c8102e;--onact:#ffffff;--drum:#0c1622;--ondrum:#f7f6f0;--l1:#2fb36b;--l2:#f5a524;--l3:#e5313f;
  --m-accent:var(--act);--wrap:1280px;--pad:clamp(20px,4vw,48px);--sec:clamp(64px,8vw,112px);--r:calc(18px*var(--tune-radius,1));--hh:72px}
@media (max-width:760px){:root{--hh:64px}}
body{--hf:"Space Mono AK",var(--fd);--tf:"Hanken AK",var(--ft);--nf:"Space Mono AK",var(--fd);--hs:normal;
  /* dial colours on the light page; dash panels re-point them */
  --df:var(--card);--dt:var(--line);--dn:var(--oncard);--dtx:var(--oncard);--dmu:var(--cardmute)}
body.ak-f-sport{--hs:italic}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 calc(17px*var(--tune-size,1))/1.55 var(--tf);text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--hf);font-weight:700;font-style:var(--hs);letter-spacing:-.04em;line-height:1.1;margin:0;text-wrap:balance}
h1,h2,h3,p,li,dd,dt,b,summary,figcaption,a{overflow-wrap:anywhere;hyphens:auto}
h2{font-size:calc(clamp(26px,3vw,40px)*var(--tune-size,1))}
h3{font-size:calc(clamp(18px,1.6vw,21px)*var(--tune-size,1));letter-spacing:-.03em}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
main{display:block}
.ak-wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.ak-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ak-lede{font-size:calc(clamp(17px,1.4vw,20px)*var(--tune-size,1));line-height:1.45;color:var(--mute);text-wrap:pretty}
.ak-sec{padding-block:var(--sec) 0}
.ak-sec>h2,.ak-sec>.ak-wrap>h2{margin-bottom:calc(clamp(28px,3.5vw,48px)*var(--tune-space,1))}
:focus-visible{outline:3px solid var(--act);outline-offset:3px}

/* the one action: a learner-red pill with the turn-signal arrow */
.ak-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border:0;border-radius:999px;background:var(--act);color:var(--onact);font:700 calc(17px*var(--tune-size,1))/1.2 var(--tf);text-decoration:none;text-align:center;cursor:pointer}
.ak-btn::after{content:"";flex:none;width:0;height:0;border-block:6px solid transparent;border-left:9px solid currentColor}

/* ---------- header: the name, the gear gate, the phone; one row on phones (name + the gear knob) ---------- */
.ak-top{position:relative;z-index:5;background:var(--bg)}
.ak-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;min-height:var(--hh);padding-block:8px}
.ak-name{justify-self:start;font:700 var(--hs) calc(clamp(17px,1.5vw,21px)*var(--tune-size,1))/1.15 var(--hf);letter-spacing:-.04em;text-decoration:none}
.ak-name[aria-current]{cursor:default}
.ak-top .nav-end{justify-self:end}
.ak-toptel{font:700 15px/1 var(--nf);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.ak-top .nav-end .langs{display:flex}
/* the gate: the pages at the ends of an H shift pattern (1 top left, 2 below it, 3 top right…), the neutral bar across
   the middle, a slot from the bar to every page, and the knob (a dark ball) in the current page's slot. Pages added
   later (Pricing, About) become gears 5 and 6. */
.ak-gate ul{--gg:14px;--gc:30px;--gl:var(--line);display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);column-gap:var(--gc);row-gap:var(--gg);margin:0;padding:0;list-style:none}
.ak-gate li{position:relative;display:flex;justify-content:center}
.ak-gate li::after{content:"";position:absolute;left:50%;width:10px;height:calc(var(--gg) / 2 + 1px);margin-left:-5px;background:linear-gradient(var(--gl),var(--gl)) 50% 0/1.5px 100% no-repeat}
.ak-gate li:nth-child(odd)::after{top:100%}
.ak-gate li:nth-child(even)::after{bottom:100%}
.ak-gate li:nth-child(odd)::before{content:"";position:absolute;top:calc(100% + var(--gg) / 2 - .75px);left:calc(var(--gc) / -2);right:calc(var(--gc) / -2);height:1.5px;background:var(--gl)}
.ak-gate li:first-child::before{left:50%}
.ak-gate li:last-child::before,.ak-gate li:nth-last-child(2):nth-child(odd)::before{right:50%}
.ak-gate li:has(>a[aria-current])::after{height:calc(var(--gg) / 2 + 6px);background:radial-gradient(circle,var(--ink) 4.2px,transparent 4.8px) 50% 0/10px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) 50% 0/2px 100% no-repeat}
.ak-gate li:nth-child(odd):has(>a[aria-current])::after{top:calc(100% - 5px)}
.ak-gate li:nth-child(even):has(>a[aria-current])::after{bottom:calc(100% - 5px);background-position:50% 100%,50% 0}
.ak-gate a{position:relative;display:block;padding:1px 2px;font:550 14px/1.2 var(--tf);text-decoration:none;white-space:nowrap}
.ak-gate li:nth-child(odd) a{padding-bottom:5px}
.ak-gate li:nth-child(even) a{padding-top:5px}
.ak-gate a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.ak-gate a[aria-current]{font-weight:700}
/* header bar: one tidy row (the H-pattern with its ruler reads as a wrapped menu on wide screens); the big sheet keeps the full gate */
.ak-bar .ak-gate ul{grid-template-rows:auto;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:none;grid-auto-flow:column;column-gap:clamp(22px,2.4vw,40px)}
.ak-bar .ak-gate li::before,.ak-bar .ak-gate li::after,.ak-bar .ak-gate li:has(>a[aria-current])::after{content:none}
.ak-bar .ak-gate li a,.ak-bar .ak-gate li:nth-child(odd) a,.ak-bar .ak-gate li:nth-child(even) a{padding:6px 2px}
.ak-bar .ak-gate a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
/* phones: the gear knob opens the whole gate as a sheet under the bar */
.ak-knob{display:none}
.ak-knob summary{display:flex;align-items:center;gap:12px;min-height:44px;list-style:none;cursor:pointer;font:600 calc(15px*var(--tune-size,1))/1 var(--tf)}
.ak-knob summary::-webkit-details-marker{display:none}
.ak-knob summary i{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--ondash) 22%,var(--dash)) 0 5px,var(--dash) 6px);box-shadow:0 0 0 1.5px var(--bg),0 0 0 3px var(--line)}
.ak-knob[open] summary i{background:var(--dash);box-shadow:inset 0 0 0 12px var(--dash),inset 0 0 0 40px var(--ondash)}
.ak-sheet{position:absolute;left:0;right:0;top:100%;display:grid;gap:32px;justify-items:center;padding:28px var(--pad) 36px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px color-mix(in srgb,var(--ink) 30%,transparent)}
.ak-gate-big ul{--gg:40px;--gc:32px}
.ak-gate-big a{font-size:calc(19px*var(--tune-size,1));font-weight:600}
.ak-gate-big li:nth-child(odd) a{padding-bottom:10px}
.ak-gate-big li:nth-child(even) a{padding-top:10px}
.ak-sheet-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 32px}
.ak-sheet-tel{display:grid;gap:2px;justify-items:center;font:700 calc(20px*var(--tune-size,1))/1.1 var(--nf);text-decoration:none}
.ak-sheet-tel small{font:500 calc(13px*var(--tune-size,1))/1.2 var(--tf);color:var(--mute)}
@media (max-width:760px){
  .ak-bar{grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .ak-bar>.ak-gate,.ak-bar>.nav-end{display:none}
  .ak-knob{display:block}
}

/* ---------- dials ---------- */
.ak-dial{position:relative;aspect-ratio:1;width:100%;container-type:inline-size}
.ak-dial-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ak-dial-face{fill:var(--df);stroke:var(--dt);stroke-opacity:.35;stroke-width:1.5}
.ak-dial-ticks line{stroke:var(--dt);stroke-width:2;stroke-linecap:round}
.ak-dial-ticks .ak-maj{stroke-width:3.6}
.ak-dial-ticks .ak-lit{stroke:var(--glow)}
.ak-needle{transform-box:view-box;transform-origin:100px 100px}
.ak-needle path{fill:var(--dn)}
.ak-needle circle{fill:var(--dn);stroke:var(--df);stroke-width:3}
.ak-dial-in{position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqi;text-align:center;color:var(--dtx)}
.ak-has-needle .ak-dial-in{inset:60% 17% 5%;justify-content:flex-start}
.ak-dial-big{font:700 var(--hs) 19cqi/1 var(--hf);letter-spacing:-.05em}
.ak-dial-lab{font-size:max(12px,5.4cqi);line-height:1.25;color:var(--dmu)}
.ak-dial-dur{font:700 max(12px,6.4cqi)/1.1 var(--hf);color:var(--dmu);letter-spacing:-.02em}
.ak-dial-price{font-size:max(13px,8cqi)}
.ak-svc-dial .ak-dial-price,.ak-dial-hero .ak-dial-price{font-size:max(10px,min(8cqi,calc(70cqi / var(--len, 6))))}
.ak-dial-hero:not(.ak-has-needle) .ak-dial-price{font-size:max(14px,min(15cqi,calc(80cqi / var(--len, 6))))}
.ak-dial-photo .ak-dial-in{inset:11%;border-radius:50%;overflow:hidden;background:var(--drum)}
.ak-dial-photo .ak-dial-in img{width:100%;height:100%;object-fit:cover}
.ak-dial-init .ak-dial-in b{font:700 var(--hs) 34cqi/1 var(--hf);letter-spacing:0;color:var(--dtx)}

/* ---------- odometer drums ---------- */
.ak-odo{display:inline-flex;align-items:center;font-family:var(--hf);font-style:normal;white-space:nowrap;line-height:1}
.ak-odo-v{display:inline-flex;align-items:center;gap:.1em}
.ak-drum{display:inline-block;width:.86em;height:1.36em;overflow:hidden;border-radius:calc(.16em*var(--tune-radius,1));background:var(--drum);color:var(--ondrum);font-style:normal;font-weight:700;text-align:center;box-shadow:inset 0 .32em .28em -.22em rgb(0 0 0/.7),inset 0 -.32em .28em -.22em rgb(0 0 0/.7),inset 0 0 0 1px color-mix(in srgb,var(--ondrum) 18%,transparent)}
.ak-drum b{display:block;width:100%;white-space:normal;line-height:1.36em;font-weight:700;word-break:break-all;transform:translateY(calc(var(--d) * -1.36em))}
.ak-odo-t{padding-inline:.06em;font-weight:700}

/* ---------- hero "windscreen": the photo through the screen edge to edge, the dash rising over it with the headline,
   the action and the gauge; together they fill the first screen (the photo takes what the dash leaves) ---------- */
.ak-hw{display:grid;grid-template-rows:minmax(clamp(330px,36vw,680px),1fr) auto;min-height:calc(100svh - var(--hh));overflow:hidden;--curve:calc(clamp(36px,5.8vw,84px)*var(--tune-radius,1))}
.ak-hw-glass{position:relative;margin:0;min-height:0;overflow:hidden;border-radius:46% 46% 0 0 / 32% 32% 0 0;background:var(--dash)}
.ak-hw-glass img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.ak-glass-band{aspect-ratio:21/8;margin-top:var(--sec);border-radius:42% 42% var(--r) var(--r) / 30% 30% var(--r) var(--r)}
.ak-glass-band img{position:static}
.ak-hw-dash{position:relative;z-index:1;margin-top:calc(var(--curve) * -1);padding-block:calc(var(--curve) * .55 + 6px) calc(clamp(28px,3.4vw,48px)*var(--tune-space,1));background:var(--dash);color:var(--ondash);border-radius:50% 50% 0 0 / var(--curve) var(--curve) 0 0;
  --df:var(--drum);--dt:var(--dashmute);--dn:var(--glow);--dtx:var(--ondash);--dmu:var(--dashmute)}
.ak-hw-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h d" "l d" "a d";column-gap:clamp(32px,6vw,96px);width:100%;max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.ak-nodial .ak-hw-in{grid-template-columns:minmax(0,1fr)}
.ak-hw h1{grid-area:h;font-size:calc(clamp(44px,7.2vw,116px)*var(--tune-size,1));line-height:.94;letter-spacing:-.05em}
.ak-hw .ak-lede{grid-area:l;margin-top:clamp(14px,1.4vw,20px);max-width:44em;color:var(--dashmute)}
.ak-hw-act .ak-btn,.ak-hc-txt .ak-btn{background:var(--glow);color:var(--dash)}
.ak-hw-act{grid-area:a;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(20px,2vw,28px)}
.ak-tel{display:grid;gap:2px;text-decoration:none;font:700 19px/1.15 var(--nf);letter-spacing:-.03em;white-space:nowrap}
.ak-tel small{font:500 calc(13px*var(--tune-size,1))/1.2 var(--tf);letter-spacing:0;color:var(--dashmute)}
/* the gauge stands on the dash, its foot level with the button */
.ak-hero-dial{margin:0;display:grid;gap:10px;justify-items:center;text-align:center}
.ak-hw-dial{grid-area:d;align-self:end;width:clamp(200px,19vw,272px)}
.ak-hero-dial .ak-dial{width:100%}
.ak-dial-cap{max-width:18em;font-size:calc(15px*var(--tune-size,1));line-height:1.3;color:var(--dashmute);text-wrap:balance}
.ak-dial-cap small{font-size:calc(13px*var(--tune-size,1))}
/* a gauge in a row (the cluster's second instrument, phones) reads at a glance: bigger figures inside the small ring */
.ak-hc-r .ak-dial-big{font-size:25cqi}
.ak-hc-r .ak-dial-price{font-size:max(14px,min(24cqi,calc(86cqi / var(--len, 6))))}
@media (max-width:760px){.ak-hero-dial .ak-dial-big{font-size:25cqi}.ak-hero-dial .ak-dial-price{font-size:max(14px,min(24cqi,calc(86cqi / var(--len, 6))))}}
@media (min-width:761px){.ak-hw .ak-tel{display:none}}
@media (max-width:760px){
  .ak-hw{min-height:0;grid-template-rows:clamp(300px,86vw,420px) auto}
  .ak-hw-glass{border-radius:46% 46% 0 0 / 26% 26% 0 0}
  .ak-hw-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "a" "d" "l"}
  .ak-hw-act{flex-direction:column;align-items:stretch;gap:14px;margin-top:20px}
  .ak-hw-act .ak-btn{width:100%}
  .ak-tel{justify-items:center}
  .ak-hw .ak-lede{margin-top:22px}
  .ak-hw-dial{margin-top:22px}
}
/* a phone gauge is a row: the dial and its caption side by side */
@media (max-width:760px){
  .ak-hero-dial{grid-template-columns:clamp(96px,28vw,120px) minmax(0,1fr);justify-items:start;align-items:center;column-gap:18px;width:100%;text-align:left}
  .ak-hero-dial .ak-dial-cap{font-size:calc(15px*var(--tune-size,1))}
}

/* ---------- hero "cluster": the hero is the instrument cluster. The photo is the big gauge, bleeding off the left
   edge with its ticks on a dark bezel; the pass-rate (or price) gauge sits at its rim like a second instrument; the
   headline is the display beside them. Phones and tablets: the photo gauge on top, the words under it. ---------- */
.ak-hc{--H:clamp(600px,calc(100svh - var(--hh)),980px);--D:calc(var(--H) * 1.3);position:relative;height:var(--H);overflow:hidden;background:var(--dash);color:var(--ondash);
  --df:var(--drum);--dt:var(--dashmute);--dn:var(--glow);--dtx:var(--ondash);--dmu:var(--dashmute)}
.ak-hc-photo{position:absolute;left:calc(var(--D) * -.27);top:calc((var(--H) - var(--D)) / 2);width:var(--D)}
.ak-dial-photo .ak-dial-in{inset:0;border-radius:50%;overflow:hidden;background:var(--drum)}
.ak-dial-photo .ak-dial-in img{width:100%;height:100%;max-width:none;object-fit:cover}
.ak-bezel .ak-dial-svg{z-index:1}
.ak-dial-bezel{fill:none;stroke:var(--dash);stroke-width:6}
.ak-hc .ak-dial.ak-bezel .ak-dial-ticks line{stroke:var(--dashmute);stroke-width:.45}
.ak-hc .ak-dial.ak-bezel .ak-dial-ticks .ak-maj{stroke:var(--ondash);stroke-width:.9}
/* the second instrument: the pass-rate (or price) gauge as a row under the button */
.ak-hc-r{display:grid;grid-template-columns:clamp(96px,8.4vw,128px) minmax(0,1fr);justify-items:start;align-items:center;column-gap:18px;margin-top:calc(clamp(28px,3vw,44px)*var(--tune-space,1));text-align:left}
.ak-hc-txt{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%;margin-left:calc(var(--D) * .73 + clamp(32px,3.4vw,56px));margin-right:clamp(24px,4vw,64px)}
.ak-hc h1{font-size:calc(clamp(48px,6.2vw,108px)*var(--tune-size,1));line-height:.96;letter-spacing:-.05em;max-width:7.5em}
.ak-hc .ak-lede{margin-top:clamp(16px,1.6vw,24px);max-width:26em;color:var(--dashmute)}
.ak-hc-txt .ak-btn{margin-top:clamp(24px,2.4vw,36px)}
@media (max-width:1023px){
  .ak-hc{--D:min(80vw,600px);height:auto;display:flex;flex-direction:column;padding-bottom:calc(clamp(36px,6vw,56px)*var(--tune-space,1))}
  .ak-hc-photo{position:relative;left:auto;top:auto;align-self:center;flex:none;margin-top:calc(var(--D) * -.13)}
  .ak-hc-txt{order:1;height:auto;margin:clamp(20px,4vw,32px) 0 0;padding-inline:var(--pad)}
  .ak-hc h1{font-size:calc(clamp(44px,9.4vw,80px)*var(--tune-size,1));max-width:none}
  .ak-hc-txt .ak-btn{width:100%;max-width:420px}
}
@media (max-width:760px){.ak-hc{--D:min(124vw,640px)}}

/* ---------- services ---------- */
.ak-dials{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px);margin:0;padding:0;list-style:none}
.ak-dials>li{flex:0 1 210px;display:grid;justify-items:center;align-content:start;gap:10px;text-align:center}
.ak-svc-dial{width:min(100%,184px);margin-bottom:8px}
.ak-svc-dial .ak-dial-dur{display:grid;justify-items:center;gap:1cqi;max-width:100%;font:600 max(13px,9cqi)/1.15 var(--tf);color:var(--dtx);text-wrap:balance}
.ak-svc-dial .ak-dial-dur:has(b){font-size:max(12px,7cqi);color:var(--dmu)}
.ak-svc-dial .ak-dial-dur b{font:700 22cqi/1 var(--nf);letter-spacing:-.05em;color:var(--dtx)}
.ak-svc-dial .ak-dial-dur small{font-size:inherit}
.ak-svc-dial .ak-dial-in>.ak-dial-price{font-size:max(14px,min(12cqi,calc(80cqi / var(--len, 6))))}
.ak-svc-price{margin-top:4px;font-size:calc(19px*var(--tune-size,1))}
.ak-dials p{color:var(--mute);font-size:calc(16px*var(--tune-size,1));line-height:1.45}
.ak-svc-full .ak-dials{display:grid;max-width:920px;margin-inline:auto;gap:0}
.ak-svc-full .ak-dials>li{grid-template-columns:clamp(120px,14vw,170px) minmax(0,1fr);grid-template-areas:"d n" "d s" "d p" "d b" "d .";grid-template-rows:auto auto auto auto 1fr;column-gap:clamp(20px,3vw,40px);row-gap:8px;justify-items:start;align-items:start;text-align:left;padding-block:28px;border-top:1px solid var(--line)}
.ak-svc-full .ak-dials>li:first-child{border-top:0;padding-top:0}
.ak-svc-full .ak-svc-dial{grid-area:d;width:100%;margin:0}.ak-svc-full .ak-dials h3{grid-area:n;font-size:calc(clamp(20px,1.8vw,24px)*var(--tune-size,1))}.ak-svc-full .ak-dials p{grid-area:p}.ak-svc-full .ak-dials .ak-best{grid-area:b}.ak-svc-full .ak-dials .ak-svc-price{grid-area:s;margin:2px 0 4px}
@media (max-width:600px){.ak-dials{column-gap:16px}.ak-dials>li{flex-basis:calc(50% - 8px)}.ak-dials p{font-size:calc(15px*var(--tune-size,1))}.ak-svc-full .ak-dials>li{grid-template-columns:minmax(0,1fr);grid-template-areas:"d" "n" "s" "p" "b";grid-template-rows:none;justify-items:center;text-align:center}.ak-svc-full .ak-svc-dial{width:min(70%,200px);margin-bottom:8px}}
.ak-best{font-size:calc(15px*var(--tune-size,1))}.ak-best span{font-weight:700;color:var(--ink)}
.ak-more{margin-top:calc(clamp(32px,4vw,48px)*var(--tune-space,1));text-align:center}
.ak-more a{display:inline-flex;align-items:center;gap:12px;font:700 var(--hs) calc(18px*var(--tune-size,1))/1.2 var(--hf);letter-spacing:-.03em;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:4px}
.ak-more i{width:0;height:0;border-block:6px solid transparent;border-left:9px solid var(--act)}
/* panel: the backlit console */
.ak-panel{padding:clamp(8px,1.4vw,16px) clamp(18px,3vw,36px);border-radius:calc(clamp(22px,3vw,36px)*var(--tune-radius,1));background:var(--dash);color:var(--ondash);--df:var(--drum);--dt:var(--dashmute);--dn:var(--glow);--dtx:var(--ondash);--dmu:var(--dashmute)}
.ak-panel ul{margin:0;padding:0;list-style:none}
.ak-row{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(90px,auto) minmax(0,auto);align-items:center;column-gap:clamp(16px,2.4vw,32px);padding-block:22px}
.ak-row-dial{width:60px;--dt:var(--ondash)}
.ak-row-dial .ak-dial-face{fill:color-mix(in srgb,var(--ondash) 14%,var(--dash));stroke:var(--ondash);stroke-opacity:.6;stroke-width:3}
.ak-row-dial .ak-dial-ticks line{stroke-width:5;stroke-opacity:.9}
.ak-row-dial .ak-dial-ticks .ak-lit{stroke-opacity:1}
.ak-row h3{font-size:calc(20px*var(--tune-size,1))}
.ak-row .ak-tell{justify-self:center}
.ak-row+.ak-row{border-top:1px solid var(--dashline)}
.ak-tell{width:12px;height:12px;border-radius:50%;background:var(--glow);box-shadow:0 0 12px var(--glow)}
.ak-row-t{display:grid;gap:4px}
.ak-row-t p{color:var(--dashmute);font-size:calc(15px*var(--tune-size,1))}
.ak-row .ak-best span{color:var(--ondash)}
.ak-readout{font:700 15px/1 var(--hf);color:var(--glow);letter-spacing:-.02em;white-space:nowrap;text-align:right}
.ak-row-p{justify-self:end;font-size:calc(20px*var(--tune-size,1))}
@media (max-width:760px){
  .ak-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"l t t" ". r p";row-gap:14px;align-items:start}
  .ak-row-dial{grid-area:l;width:44px}
  .ak-tell{grid-area:l;margin-top:7px}.ak-row-t{grid-area:t}.ak-readout{grid-area:r;align-self:center;text-align:left}.ak-row-p{grid-area:p;font-size:calc(18px*var(--tune-size,1))}
}

/* ---------- the way to the licence: shift lights ---------- */
.ak-shift{display:grid;grid-template-columns:repeat(calc(var(--n) * 3),minmax(0,1fr));gap:6px;padding:10px;border-radius:999px;background:var(--dash)}
.ak-shift i{height:12px;border-radius:999px;background:var(--l1);box-shadow:0 0 10px var(--l1)}
.ak-shift i.l2{background:var(--l2);box-shadow:0 0 10px var(--l2)}
.ak-shift i.l3{background:var(--l3);box-shadow:0 0 10px var(--l3)}
.ak-steps ol{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;margin:24px 0 0;padding:0 10px;list-style:none;counter-reset:ak-step}
.ak-steps li{display:grid;align-content:start;gap:8px;padding-right:20px;counter-increment:ak-step}
.ak-steps li::before{content:counter(ak-step);font:700 var(--hs) calc(15px*var(--tune-size,1))/1 var(--hf);color:var(--mute)}
.ak-steps li p{color:var(--mute);font-size:calc(16px*var(--tune-size,1));line-height:1.45}
@media (max-width:760px){
  .ak-shift{display:none}
  .ak-steps ol{grid-template-columns:1fr;gap:0;padding:0;margin-top:0}
  .ak-steps li{grid-template-columns:28px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:18px 0;border-top:1px solid var(--line)}
  .ak-steps li::before{grid-row:1/3;align-self:start;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--dash);color:var(--ondash);font-size:calc(13px*var(--tune-size,1));line-height:1;box-shadow:inset 0 0 0 3px var(--l1)}
  .ak-steps li.ak-l2::before{box-shadow:inset 0 0 0 3px var(--l2)}
  .ak-steps li.ak-l3::before{box-shadow:inset 0 0 0 3px var(--l3)}
}

/* ---------- prices on drums + the dash clock ---------- */
.ak-prices-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ak-one .ak-prices-grid{grid-template-columns:minmax(0,1fr);max-width:820px}
.ak-one .ak-clock{max-width:520px}
.ak-meter{display:grid;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.ak-meter li{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;min-height:76px;padding:16px 0;border-top:1px solid var(--line)}
.ak-meter-l{font-weight:600;font-size:calc(17px*var(--tune-size,1))}
.ak-meter-v{display:inline-flex;align-items:center;gap:10px;font-size:calc(22px*var(--tune-size,1))}
.ak-meter-v small{font:500 calc(14px*var(--tune-size,1))/1 var(--tf);color:var(--mute)}
.ak-clock{padding:24px 26px 26px;border-radius:calc(24px*var(--tune-radius,1));background:var(--dash);color:var(--ondash)}
.ak-clock h3{font-size:calc(17px*var(--tune-size,1));color:var(--dashmute);margin-bottom:14px}
.ak-clock dl{display:grid;gap:10px;margin:0}
.ak-clock dl>div{display:flex;justify-content:space-between;gap:16px;padding-top:10px;border-top:1px solid var(--dashline)}
.ak-clock dt{font-weight:600}
.ak-clock dd{margin:0;font:700 16px/1.3 var(--hf);color:var(--glow);letter-spacing:-.02em;text-shadow:0 0 14px color-mix(in srgb,var(--glow) 45%,transparent);white-space:nowrap}
.ak-clock .wk{color:var(--ondash)}
.ak-clock .wk ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ak-clock .wk li{display:grid;grid-template-columns:40px minmax(0,1fr) 92px;gap:12px;align-items:center;font-size:calc(14px*var(--tune-size,1))}
.ak-clock .wk-bar{position:relative;height:10px;border-radius:999px;background:var(--dashline)}
.ak-clock .wk-bar i{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--glow)}
.ak-clock .wk-t{color:var(--dashmute);font-size:13px;text-align:right;white-space:nowrap}
.ak-clock .wk-scale{display:flex;justify-content:space-between;margin:8px 104px 0 52px;color:var(--dashmute);font-size:calc(12px*var(--tune-size,1))}
.ak-clock .off .wk-n{color:var(--dashmute)}
@media (max-width:760px){.ak-prices-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- photo in a rear-view mirror + reviews ---------- */
.ak-rev{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.ak-rev.ak-noq,.ak-rev.ak-nopic,.ak-rev-row{grid-template-columns:minmax(0,1fr)}
.ak-mirror{margin:0;display:grid;gap:14px}
.ak-mirror img{width:100%;aspect-ratio:12/5;object-fit:cover;border:clamp(8px,1.1vw,14px) solid var(--dash);border-radius:30% / 50%;background:var(--dash)}
.ak-mirror.m-unveil{overflow:visible}
.ak-mirror figcaption{text-align:center;color:var(--ink);font-size:calc(17px*var(--tune-size,1))}
.ak-quotes h2{margin-bottom:24px}
.ak-quotes ul{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.ak-quotes li{padding-top:20px;border-top:1px solid var(--line)}
.ak-quotes blockquote{margin:0;font-size:calc(clamp(20px,1.9vw,26px)*var(--tune-size,1));line-height:1.4}
.ak-quotes blockquote::before{content:'\201C';display:block;font:700 calc(72px*var(--tune-size,1))/.8 var(--hf);color:var(--act);margin-bottom:6px}
.ak-quotes em{font-style:normal;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--glow) 40%,transparent) 0)}
.ak-by{margin-top:14px;font-weight:700;font-size:calc(17px*var(--tune-size,1))}.ak-by small{font-weight:400;color:var(--mute)}
.ak-quotes ul{gap:28px}
.ak-rev-row .ak-quotes ul{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px clamp(28px,4vw,56px)}
/* row: the band photo edge to edge through a windscreen arch, the quotes under it */
.ak-rev-row{gap:clamp(40px,5vw,64px)}
.ak-rev-row .ak-mirror img{height:clamp(300px,40vw,620px);aspect-ratio:auto;border:0;border-radius:46% 46% 0 0 / 30% 30% 0 0;background:var(--dash)}
.ak-rev-row .ak-mirror figcaption{padding-inline:var(--pad)}
@media (max-width:760px){.ak-rev{grid-template-columns:minmax(0,1fr)}.ak-mirror img{aspect-ratio:2/1}}

.ak-gal,.ps{--g-space:var(--sec);--g-max:calc(var(--wrap) + 2 * var(--pad));--g-pad:var(--pad);--g-bg:var(--bg);--g-paper:var(--bg);--g-surface:var(--card);--g-ink:var(--ink);--g-muted:var(--mute);--g-line:var(--line);--g-accent:var(--act);--g-radius:var(--r);--g-fd:var(--hf);--g-ft:var(--tf)}

/* ---------- closing: the start button on the dash ---------- */
.ak-gal+.ak-close{margin-top:0}
.ak-close{margin-top:var(--sec);padding-block:calc(clamp(56px,7vw,96px)*var(--tune-space,1));background:var(--dash);color:var(--ondash);border-radius:50% 50% 0 0 / calc(clamp(28px,4vw,64px)*var(--tune-radius,1)) calc(clamp(28px,4vw,64px)*var(--tune-radius,1)) 0 0}
.ak-close-in{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:clamp(28px,5vw,72px)}
.ak-close h2{text-align:right;font-size:calc(clamp(26px,2.8vw,40px)*var(--tune-size,1))}
.ak-start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:clamp(164px,15vw,200px);aspect-ratio:1;padding:20px;border-radius:50%;background:var(--act);color:var(--onact);text-align:center;text-decoration:none;box-shadow:0 0 0 8px var(--drum),0 0 0 11px var(--dashline)}
.ak-start-w{font:700 var(--hs) calc(clamp(24px,2.2vw,30px)*var(--tune-size,1))/1 var(--hf);letter-spacing:-.04em}
.ak-start-l{font-size:calc(14px*var(--tune-size,1));line-height:1.25;font-weight:600}
@media (max-width:760px){
  .ak-close-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .ak-close h2{text-align:center}
}

/* ---------- inner pages ---------- */
.ak-ph{display:grid;gap:16px;padding-block:calc(clamp(40px,6vw,80px)*var(--tune-space,1)) 0;max-width:calc(900px + 2 * var(--pad));margin-inline:auto;text-align:center;justify-items:center}
.ak-ph h1{font-size:calc(clamp(34px,4.6vw,64px)*var(--tune-size,1));letter-spacing:-.055em}
.ak-ph .ak-lede{max-width:36em}
.ak-svc-full{padding-top:calc(clamp(48px,6vw,80px)*var(--tune-space,1))}
.ak-faq-list{display:grid;gap:12px;max-width:900px}
.ak-faq-list details{border-radius:var(--r);background:var(--card);color:var(--oncard)}
.ak-faq-list summary{align-items:center;min-height:64px;padding:16px 22px;font:700 calc(18px*var(--tune-size,1))/1.35 var(--tf)}
.ak-faq-list summary::after{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--dash);color:var(--glow);font:700 calc(18px*var(--tune-size,1))/1 var(--hf)}
.ak-faq-list details p{padding:0 22px 20px;color:var(--cardmute)}
.ak-faq-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
.ak-faq-open>div{display:grid;gap:8px;padding-top:18px;border-top:2px solid var(--ink);align-content:start}
.ak-faq-open h3{font-size:calc(18px*var(--tune-size,1))}
.ak-faq-open p{color:var(--mute)}
@media (max-width:760px){.ak-faq-open{grid-template-columns:minmax(0,1fr)}}
/* team */
.ak-crew ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin:0;padding:0;list-style:none}
.ak-crew li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;padding:22px;border-radius:var(--r);background:var(--card);color:var(--oncard);--dtx:var(--oncard)}
.ak-crew.ak-solo ul{max-width:720px;margin-inline:auto}
.ak-crew h2{font-size:calc(21px*var(--tune-size,1))}
.ak-role{margin:4px 0 8px;font:700 calc(14px*var(--tune-size,1))/1.3 var(--hf);color:var(--cardmute);letter-spacing:-.02em}
.ak-crew li p:not(.ak-role){color:var(--cardmute);font-size:calc(16px*var(--tune-size,1))}
.ak-rows ul{margin:0;padding:0;list-style:none;max-width:900px}
.ak-rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-areas:"n b" "r b";column-gap:32px;padding-block:22px;border-top:2px solid var(--ink)}
.ak-rows h2{grid-area:n;font-size:calc(21px*var(--tune-size,1))}.ak-rows .ak-role{grid-area:r;color:var(--mute)}.ak-rows li p:last-child{grid-area:b;color:var(--mute)}
@media (max-width:760px){.ak-rows li{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "r" "b"}}
/* contact */
.ak-contact-lede{margin:-24px 0 32px;color:var(--mute);max-width:40em}
.ak-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,4vw,56px);align-items:start}
.ak-reach{display:grid;gap:20px}
.ak-reach dl{display:grid;gap:16px;margin:0}
.ak-reach>dl dt{font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
.ak-reach>dl dd{margin:2px 0 0;font:700 calc(18px*var(--tune-size,1))/1.3 var(--hf);letter-spacing:-.03em}
:where(.ak-reach>dl dd) a{text-decoration:none}
.ak-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:clamp(20px,3vw,32px);border-radius:calc(24px*var(--tune-radius,1));background:var(--card);color:var(--oncard)}
.ak-form label{display:grid;gap:6px;font-weight:600;font-size:calc(15px*var(--tune-size,1))}
.ak-wide{grid-column:1/-1}
.ak-form input,.ak-form textarea,.ak-form select{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--cardline);border-radius:calc(12px*var(--tune-radius,1));background:var(--card);color:var(--oncard);font:inherit;font-weight:400}
.ak-form input:focus,.ak-form textarea:focus,.ak-form select:focus{border-color:var(--oncard);outline:none}
.ak-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.ak-send p{font-size:calc(14px*var(--tune-size,1));color:var(--cardmute);flex:1 1 220px}
.ak-reach-dash{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 48px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:calc(clamp(24px,3vw,40px)*var(--tune-radius,1));background:var(--dash);color:var(--ondash)}
.ak-big{display:grid;gap:6px;text-decoration:none}
.ak-big small{font-size:calc(15px*var(--tune-size,1));color:var(--dashmute)}
.ak-big b{font:700 calc(clamp(28px,4vw,52px)*var(--tune-size,1))/1.05 var(--hf);letter-spacing:-.05em;color:var(--glow)}
.ak-reach-more{display:grid;gap:14px}
.ak-reach-more p{display:grid;gap:2px}.ak-reach-more small{font-size:calc(14px*var(--tune-size,1));color:var(--dashmute)}
.ak-legal-line{padding-top:32px;font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
@media (max-width:760px){.ak-contact-grid,.ak-reach-dash,.ak-form{grid-template-columns:minmax(0,1fr)}.ak-big b{font-size:calc(clamp(24px,8vw,34px)*var(--tune-size,1))}}

/* ---------- footer: the dash continues ---------- */
.ak-foot{background:var(--dash);color:var(--ondash);padding-block:calc(48px*var(--tune-space,1)) 28px;border-top:1px solid var(--dashline)}
main:not(:has(.ak-close))+.ak-foot{margin-top:var(--sec)}
.ak-fgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr);gap:32px}
.ak-fn{font:700 var(--hs) calc(20px*var(--tune-size,1))/1.2 var(--hf);letter-spacing:-.04em;margin-bottom:8px}
.ak-fname p:not(.ak-fn){color:var(--dashmute)}
.ak-fcontact{display:grid;gap:10px;margin:0}
.ak-fcontact dt{font-size:calc(13px*var(--tune-size,1));color:var(--dashmute)}.ak-fcontact dd{margin:0}
:where(.ak-fcontact,.ak-fnav,.ak-flegal) a{text-decoration:none}
:where(.ak-fcontact,.ak-fnav,.ak-flegal) a:hover{text-decoration:underline}
.ak-fnav{display:grid;gap:8px;margin:0;padding:0;list-style:none;align-content:start}
.ak-fbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:calc(40px*var(--tune-space,1));padding-top:20px;background:linear-gradient(var(--dashline),var(--dashline)) var(--pad) 0/calc(100% - 2 * var(--pad)) 1px no-repeat;color:var(--dashmute);font-size:calc(14px*var(--tune-size,1))}
.ak-flegal{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none}
.ak-flegal a{display:inline-block;padding-block:4px}
.ak-foot .langs{margin-top:0}
@media (max-width:760px){.ak-fgrid{grid-template-columns:minmax(0,1fr)}}

/* legal and 404 pages */
main>div.ak-wrap:only-child{padding-block:calc(clamp(40px,5vw,72px)*var(--tune-space,1)) 0}
.nf .btn{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;background:var(--act);color:var(--onact);font-weight:700;text-decoration:none}
.legal-page h1,.nf h1{font-size:calc(clamp(30px,4vw,52px)*var(--tune-size,1));letter-spacing:-.05em;margin-bottom:24px}

/* ---------- motion (Basic and Advanced) ---------- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ak-btn::after{transition:opacity .2s}
  .ak-btn:hover::after{animation:ak-blink .8s steps(1) 2}
  .ak-start{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .ak-start:hover{transform:scale(.97)}
  .ak-gate a{transition:border-color .2s,background-color .2s}
}
@keyframes ak-blink{50%{opacity:0}}

/* ===== Advanced hero moment =====
   Ignition: the screen comes into focus, the dash rises, and the needle does the self-test sweep (all the way round
   and back to the pass rate) while the ticks light up behind it; prices on the hero dial roll up on their drums.
   cluster: the panel settles, the photo ring turns into place, the needle sweeps. Transform/rotate/opacity only. */
@media (prefers-reduced-motion:no-preference){
  .m-js .ak-hw-glass{animation:ak-focus 1.3s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .ak-hw-dash{animation:ak-rise .9s .1s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .ak-hw-dial,.m-js .ak-hc-r{animation:ak-pop .7s .25s cubic-bezier(.3,1,.5,1) backwards}
  .m-js [data-wow] .ak-needle{animation:ak-sweep 1.2s .35s cubic-bezier(.45,0,.2,1) backwards}
  .m-js [data-wow] .ak-dial-ticks .ak-lit{animation:ak-on .25s backwards;animation-delay:calc(.45s + var(--i) * 22ms)}
  .m-js [data-wow] .ak-drum b,.m-js .m-stagger>.m-in .ak-drum b{animation:ak-roll 1.1s .3s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .ak-hc-panel{animation:ak-settle .9s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .ak-hc-l{animation:ak-pop .7s .15s cubic-bezier(.3,1,.5,1) backwards}
  .m-js .ak-dial-photo .ak-dial-svg{animation:ak-turn 1.2s .2s cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .ak-hc-mid{animation:ak-rise .8s .1s cubic-bezier(.2,.7,.2,1) backwards}
  /* the shift lights come on one after another when the steps scroll into view */
  .m-js .ak-shift.m-in i{animation:ak-on .3s backwards;animation-delay:calc(var(--i) * 45ms)}
}
@keyframes ak-focus{from{transform:scale(1.06)}}
@keyframes ak-rise{from{transform:translateY(36px)}}
@keyframes ak-settle{from{transform:scale(.97)}}
@keyframes ak-pop{from{transform:scale(.82);opacity:0}}
@keyframes ak-sweep{0%{rotate:-135deg}48%{rotate:135deg}}
@keyframes ak-turn{from{transform:rotate(-120deg)}}
@keyframes ak-on{from{opacity:.12}}
@keyframes ak-roll{from{transform:translateY(0)}}

/* ── serious (the default tone; engine/shared/tone.ts already calmed the colours). The instruments stay, drawn calm:
   hairline gauges without glow, the gear gate in hairlines, prices on quiet drum cells, the shift lights as a slim
   capsule, a round start button with a thin ring. Headings in Hanken; Space Mono stays for the figures (the gauges,
   the drums, phone numbers and times), the look's typographic signature. No drawn rear-view mirror. */
[data-tone=serious] body{--hf:"Hanken AK",var(--ft);--hs:normal}
[data-tone=serious] :is(h1,h2,h3){font-weight:650;letter-spacing:-.025em;line-height:1.12}
[data-tone=serious] :is(.ak-hw h1,.ak-hc h1){letter-spacing:-.045em;line-height:.95}
[data-tone=serious] .ak-ph h1{letter-spacing:-.035em;line-height:1.05}
[data-tone=serious] :is(.ak-name,.ak-fn){font-weight:700;letter-spacing:-.02em}
[data-tone=serious] .ak-more a{border-bottom-width:1.5px}
[data-tone=serious] .ak-dial-hero{--hf:var(--nf)}
/* gauges: hairline ticks, the lit ones in the backlight colour, no glow */
[data-tone=serious] .ak-dial-ticks line{stroke-width:1.4}
[data-tone=serious] .ak-dial-ticks .ak-maj{stroke-width:2.6}
[data-tone=serious] .ak-dial-face{stroke-opacity:.5;stroke-width:1}
/* drums: quiet cells, no inner shadow */
[data-tone=serious] .ak-drum{border-radius:calc(.12em*var(--tune-radius,1));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ondrum) 14%,transparent)}
/* services "panel": readouts in the text face */
[data-tone=serious] .ak-tell{width:8px;height:8px;margin-left:2px;box-shadow:none}
[data-tone=serious] .ak-readout{font:600 calc(15px*var(--tune-size,1))/1 var(--tf);font-variant-numeric:tabular-nums;letter-spacing:0}
/* the way to the licence: a slim capsule of lights, no glow */
[data-tone=serious] .ak-shift{gap:4px;padding:6px}
[data-tone=serious] .ak-shift i{height:6px;box-shadow:none}
/* hours: no glowing digits */
[data-tone=serious] .ak-clock dd{text-shadow:none}
/* reviews: the photo without the mirror frame, quotes without highlighter */
[data-tone=serious] .ak-mirror img{border:0;border-radius:var(--r)}
[data-tone=serious] .ak-quotes em{background:none}
/* rules: hairlines */
[data-tone=serious] :is(.ak-faq-open>div,.ak-rows li){border-top-width:1px}
[data-tone=serious] .ak-form :is(input,textarea,select){border-width:1px}
/* closing: the round start button with a thin ring */
[data-tone=serious] .ak-start{box-shadow:0 0 0 6px var(--dash),0 0 0 7px var(--dashline)}
[data-tone=serious] .ak-gal .g-title{font-size:calc(clamp(26px,3vw,40px)*var(--tune-size,1));line-height:1.12;letter-spacing:-.025em}
@media (min-width:761px) and (max-width:1023px){.ak-toptel{display:none}.ak-gate ul{--gc:20px}}
[data-tone=serious] .ak-rev-row .ak-mirror img{border-radius:46% 46% 0 0 / 30% 30% 0 0}