/*
Theme Name: הנדי דוד
Theme URI: https://handydavid.hostey.co.il
Author: Webey
Author URI: https://webey.co.il
Description: Custom classic theme for Handy David. Layout locked, all text from Meta Box fields (plugin hd-core).
Version: 1.0.0
Requires PHP: 8.1
Text Domain: handydavid
*/

/* ===== FONTS (self-hosted, hebrew + latin subsets) ===== */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-hebrew-400-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-hebrew-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-hebrew-500-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-hebrew-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-hebrew-600-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-hebrew-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-hebrew-700-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-hebrew-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/karantina-400-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/karantina-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/karantina-700-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/karantina-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== HOME (1:1 from the approved static index.html) ===== */
:root{
  --ink:#121212;--ink-2:#1B1B1B;--ink-3:#242422;--line-d:#2F2E2B;
  --paper:#F1EEE6;--paper-2:#E8E4D9;--card:#FBFAF6;--line:#D9D4C6;
  --y:#FFE102;
  --mute:#5A574F;--mute-d:#B5B1A6;--mute-dd:#8E8A7E;
  --disp:'Karantina',sans-serif;--body:'IBM Plex Sans Hebrew',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1240px;
  /* spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  /* layout rhythm */
  --gutter:40px;      /* page side padding */
  --sec-y:120px;      /* vertical padding of every section = gap between any two sections */
  --head-gap:56px;    /* section heading block -> its content */
  --col-gap:64px;     /* gap between two-column halves */
  --grid-gap:28px;    /* gap inside card grids */
  --card-pad:24px;    /* inner padding of cards */
  --hang:124px;       /* hero: distance from lamp column top to badge top */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:6px}
.skip{position:absolute;top:-60px;right:16px;background:var(--y);color:var(--ink);padding:10px 16px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.disp{font-family:var(--disp);font-weight:700;line-height:.86;letter-spacing:0}
.num{font-variant-numeric:tabular-nums}
.sec{padding:var(--sec-y) 0}
.sec.flush{padding-top:0} /* continues the previous section's background: the previous section's bottom padding is the gap */
.h2{font-size:clamp(60px,8vw,112px);margin:var(--sp-5) 0 0;text-wrap:balance}
.lead{font-size:18px;line-height:1.75;color:#4A4842;max-width:540px;margin:var(--sp-5) 0 0;text-wrap:pretty}
.lead+.lead{margin-top:var(--sp-4)}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-7);margin-bottom:var(--head-gap)}
.tape{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;padding:7px 14px 6px;background:var(--ink);color:var(--paper);border-radius:3px;transform:rotate(-1.2deg);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.tape i{width:6px;height:6px;border-radius:50%;background:var(--y);display:block;flex:none}
.tape.y{background:var(--y);color:var(--ink)}
.tape.y i{background:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;border:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{flex:none}
.btn-y{background:var(--y);color:var(--ink)}
.btn-y:hover{box-shadow:0 12px 30px -12px rgba(255,225,2,.75)}
.btn-ghost{border:1.5px solid #4A4842;color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{color:var(--y)}
.btn-line{border:1.5px solid var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}

.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* tape measure scroll progress */
.measure{position:fixed;top:0;right:0;left:0;height:14px;z-index:60;pointer-events:none}
.measure .blade{position:absolute;top:0;right:0;height:14px;width:0;background:var(--y);border-bottom:1px solid rgba(0,0,0,.35)}
.measure .blade::before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:repeating-linear-gradient(to left,#121212 0 1px,transparent 1px 10px)}
.measure .blade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:repeating-linear-gradient(to left,#121212 0 1.5px,transparent 1.5px 50px)}
.measure .case{position:absolute;top:-6px;right:0;width:30px;height:26px;border-radius:7px;background:#2A2926;box-shadow:inset 0 0 0 2px #3A3936,0 4px 10px rgba(0,0,0,.35)}
.measure .case::after{content:"";position:absolute;top:8px;left:9px;width:12px;height:10px;border-radius:50%;background:var(--y)}

/* weekday strip */
.week{display:inline-flex;gap:6px}
.week span{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:var(--y);color:var(--ink)}
.week span.off{background:transparent;color:#6A675E;border:1.5px dashed #3E3D39;position:relative}
.week span.off::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:1.5px;background:#6A675E;transform:rotate(-35deg)}
.week.sm{gap:3px}
.week.sm span{width:19px;height:19px;border-radius:4px;font-size:11px}
.week.sm span.off{border-color:#C9C3B3;color:#A9A497}
.week.sm span.off::after{background:#A9A497;left:3px;right:3px}

/* ===== HERO ===== */
.hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-5) 0 var(--sp-3);position:relative;z-index:5}
.brand{display:block;flex:none;border-radius:50%}
.brand img{width:60px;height:60px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));transform:rotate(-8deg);transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .7s}
.brand:hover img{transform:rotate(4deg) scale(1.06)}
.navlinks{display:flex;gap:28px}
.navlinks a{color:#C9C5BA;font-size:15px;font-weight:500;transition:color .2s}
.navlinks a:hover{color:var(--y)}
.nav .btn{min-height:46px;padding:0 20px;font-size:15px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-8);align-items:center;padding:var(--sp-2) 0 calc(var(--sec-y) * .6)}
.hero-id{display:flex;align-items:center;padding-top:var(--sp-5)}
/* tape hung on a nail */
.tape.hang{position:relative;transform:rotate(-2deg);transform-origin:50% -19px}
.tape.hang::before{content:"";position:absolute;bottom:100%;left:16%;right:16%;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20L50 1L100 20' fill='none' stroke='%23A9A497' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;pointer-events:none}
.tape.hang::after{content:"";position:absolute;bottom:calc(100% + 14px);left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4F2EC,#A9A497 50%,#4E4C46);box-shadow:0 2px 3px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.35)}
.tape.hang:hover{animation:swing 1.8s cubic-bezier(.3,0,.3,1)}
@keyframes swing{0%{transform:rotate(-2deg)}20%{transform:rotate(4deg)}45%{transform:rotate(-5deg)}68%{transform:rotate(2deg)}86%{transform:rotate(-3deg)}100%{transform:rotate(-2deg)}}
.hero h1{margin:var(--sp-5) 0 0;font-size:clamp(84px,8.6vw,136px)}
.rot{display:block;position:relative;overflow:hidden;height:.92em}
.rot>span{display:block;transition:transform .55s cubic-bezier(.7,0,.2,1),opacity .4s ease}
.rot.out>span{transform:translateY(-105%);opacity:0}
.rot.pre>span{transform:translateY(105%);opacity:0;transition:none}
.rot2{white-space:nowrap}
.lit{color:var(--y);transition:color .6s ease}
.sub{font-size:20px;line-height:1.65;color:#C9C5BA;max-width:560px;margin:var(--sp-5) 0 0;transition:opacity .6s;text-wrap:pretty}
.sub b{color:var(--paper);font-weight:600}
.ctas{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

.stage{position:relative;display:flex;justify-content:center;padding-top:var(--hang);padding-bottom:var(--sp-5)}
.glow{position:absolute;top:40px;left:50%;width:640px;height:640px;margin-left:-320px;border-radius:50%;background:radial-gradient(circle,rgba(255,225,2,.28) 0%,rgba(255,225,2,.07) 42%,rgba(255,225,2,0) 68%);pointer-events:none;transition:opacity .6s ease}
.lamp{position:absolute;top:calc(var(--hang) - 174px);left:50%;margin-left:-40px;width:80px;z-index:2}
.bulb{fill:var(--y);transition:fill .5s ease}
.badge{position:relative;width:340px;background:var(--paper);color:var(--ink);border-radius:22px;padding:22px;box-shadow:0 40px 70px -30px rgba(0,0,0,.8);transform:rotate(2.5deg);transition:filter .7s ease,transform .5s ease;z-index:3}
.badge:hover{transform:rotate(0)}
.badge::before{content:"";position:absolute;top:-50px;left:50%;width:3px;height:56px;margin-left:-1.5px;background:linear-gradient(#3A3936,#5B5850)}
.badge .clip{position:absolute;top:-10px;left:50%;width:54px;height:18px;margin-left:-27px;border-radius:6px;background:#3A3936}
.badge-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mute);border-bottom:1.5px dashed var(--line);padding-bottom:12px}
.badge-top span:first-child{font-family:var(--mono);font-weight:600;color:var(--ink)}
.badge-body{display:flex;gap:16px;margin-top:16px;align-items:flex-start}
.badge-photo{width:112px;height:140px;border-radius:12px;object-fit:cover;flex:none;background:#ddd}
.badge-name{font-size:62px}
.badge-role{font-size:14px;color:var(--mute);margin-top:6px;line-height:1.5}
.badge-score{margin-top:16px;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);border-radius:14px;padding:12px 14px}
.badge-score .n{font-size:60px;color:var(--y)}
.badge-score small{display:block;font-size:13px;color:var(--mute-d);line-height:1.4;flex:1}
.badge-score img{height:24px;width:auto;flex:none;margin-inline-start:var(--sp-1)}
.badge-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:var(--mute)}
.wallplate{position:absolute;bottom:30px;left:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px}
.switch{appearance:none;border:0;cursor:pointer;width:66px;height:98px;border-radius:14px;background:#E9E5DA;box-shadow:inset 0 0 0 1px #CFCABC,0 14px 24px -10px rgba(0,0,0,.7);position:relative;padding:0}
.switch .rock{position:absolute;inset:14px;border-radius:8px;background:#F7F5EF;box-shadow:inset 0 0 0 1px #D8D3C6;overflow:hidden}
.switch .rock::before{content:"";position:absolute;left:0;right:0;height:50%;top:50%;background:#DCD7CA;transition:top .25s ease}
.switch .led{position:absolute;top:5px;left:50%;margin-left:-3px;width:6px;height:6px;border-radius:50%;background:var(--y);box-shadow:0 0 8px var(--y);transition:all .3s}
.switch .sc{position:absolute;bottom:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#CFCABC}
.wallplate small{font-size:12px;color:var(--mute-dd);font-weight:500}
.hint{position:absolute;bottom:138px;left:74px;font-size:13px;color:var(--mute-dd);white-space:nowrap;transform:rotate(-6deg);pointer-events:none;transition:opacity .4s}
.hint svg{display:inline-block;vertical-align:middle;margin-left:4px}
.hero.touched .hint{opacity:0}
.hero.off .lit{color:#3B3A36}
.hero.off .sub{opacity:.45}
.hero.off .glow{opacity:0}
.hero.off .bulb{fill:#2A2925}
.hero.off .badge{filter:brightness(.38) grayscale(.6)}
.hero.off .brand img{filter:brightness(.4) grayscale(.5)}
.hero.off .switch .rock::before{top:0}
.hero.off .switch .led{background:#8E8A7E;box-shadow:none}

/* ===== TICKER ===== */
.ticker{background:var(--y);overflow:hidden;border-block:1px solid var(--ink)}
.track{display:flex;width:max-content;animation:tick 80s linear infinite}
.track span{display:inline-flex;align-items:center;gap:24px;padding:16px 12px;font-family:var(--disp);font-weight:700;font-size:34px;line-height:1;white-space:nowrap}
.ticker:hover .track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(50%)}}

/* ===== MIDRAG WALL ===== */
.midrag{position:relative;background-color:#E6E1D4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .26 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.md-top{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--col-gap);align-items:end;margin-bottom:var(--head-gap)}
.md-brand{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-5)}
.md-brand img{height:40px;width:auto;flex:none}
.md-brand span{font-size:15px;color:var(--mute)}
.score{display:flex;align-items:flex-end;gap:22px;margin-top:14px}
.score .big{font-size:clamp(150px,19vw,250px);line-height:.78}
.score .of{padding-bottom:18px}
.score .of b{display:block;font-family:var(--disp);font-size:44px;line-height:1}
.score .of span{font-size:15px;color:var(--mute)}
.bars{display:grid;gap:16px}
.bar{display:grid;grid-template-columns:120px minmax(0,1fr) 54px;align-items:center;gap:16px;font-size:16px;font-weight:600}
.bar .t{display:block;height:12px;border-radius:99px;background:#D2CCBD;overflow:hidden}
.bar .f{display:block;position:relative;height:100%;width:0;background:var(--ink);border-radius:99px}
.bar .f::after{content:"";position:absolute;top:0;bottom:0;left:0;width:28px;border-radius:99px;background:linear-gradient(to right,var(--y),rgba(255,225,2,0));opacity:0;transition:opacity .5s ease}
.bar.filling .f::after{opacity:1}
.bar .v{font-family:var(--body);font-variant-numeric:tabular-nums;font-size:15px;text-align:left}
.verify{display:flex;gap:var(--sp-4);align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-6);font-size:15px;color:#4A4842;line-height:1.65}
.verify svg{flex:none;margin-top:2px}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--grid-gap) + 12px) var(--grid-gap);align-items:start;padding-top:var(--sp-3)}
.note{position:relative;margin:0;background:#FFFEF8;padding:34px var(--card-pad) var(--card-pad);box-shadow:0 1px 1px rgba(0,0,0,.08),0 18px 26px -18px rgba(0,0,0,.45);rotate:var(--r,0deg);transform-origin:50% 0}
.js .note.rv,.note{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),rotate .45s cubic-bezier(.2,.7,.2,1),translate .45s cubic-bezier(.2,.7,.2,1),scale .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.note:hover{rotate:0deg;translate:0 -4px;scale:1.02;box-shadow:0 1px 1px rgba(0,0,0,.08),0 30px 40px -22px rgba(0,0,0,.5);z-index:2}
.note::before{content:"";position:absolute;top:-13px;left:50%;width:96px;height:28px;margin-left:-48px;background:rgba(255,236,120,.72);box-shadow:0 1px 2px rgba(0,0,0,.08);transform:rotate(var(--tr,-3deg));clip-path:polygon(3% 0,97% 4%,100% 50%,97% 100%,4% 96%,0 50%)}
.note.pin::before{width:18px;height:18px;margin-left:-9px;top:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff6b6b,#b3261e 70%);clip-path:none;box-shadow:0 3px 4px rgba(0,0,0,.35);transform:none}
.note.y{background:#FFF3A6}
.note.dark{background:var(--ink);color:var(--paper)}
.note .job{font-size:13px;color:var(--mute);display:flex;justify-content:space-between;align-items:center;gap:10px}
.note.dark .job{color:var(--mute-dd)}
.note .stars{color:var(--ink);font-size:13px;font-weight:700;background:var(--y);padding:1px 8px;border-radius:4px;white-space:nowrap}
.note blockquote{margin:14px 0 16px;font-size:18px;line-height:1.55;font-weight:500}
.note.big blockquote{font-family:var(--disp);font-weight:700;font-size:40px;line-height:1}
.note figcaption{font-size:14px;color:var(--mute);border-top:1px dashed #D9D2BF;padding-top:var(--sp-4);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.note.dark figcaption{border-color:#3A3936;color:var(--mute-d)}
.note figcaption img{height:20px;width:auto;flex:none;opacity:.95}
.note .vol{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 var(--sp-3);padding:2px 10px;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink);background:rgba(255,225,2,.35);border-radius:999px}
.note .vol svg{width:13px;height:13px;flex:none}
.note.dark .vol{color:var(--paper);background:rgba(255,225,2,.18)}
.goodhour{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--head-gap);background:var(--y);border-radius:16px;padding:var(--sp-5);font-size:16px;line-height:1.6}
.goodhour b{font-weight:700}
.md-cta{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.md-cta .btn{padding:0 var(--sp-6)}
.md-cta .btn img{height:22px;width:auto;flex:none}

/* ===== SERVICES ===== */
.cabinet{background:var(--ink-2);border-radius:26px;padding:var(--card-pad);position:relative;box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#6A6862,#34322E)}
.screw i{position:absolute;top:50%;left:2px;right:2px;height:2px;margin-top:-1px;background:#1A1A1A;display:block;transform:rotate(var(--sr,0deg))}
.screw i::after{content:"";position:absolute;inset:0;background:inherit;transform:rotate(90deg)}
.cab-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding:var(--sp-1) var(--sp-4) var(--sp-4);color:var(--mute-dd);font-size:13px}
.cab-head span:first-child{font-family:var(--mono)}
.drawers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.drawer{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-5);background:var(--ink-3);border:1px solid var(--line-d);border-radius:14px;color:var(--paper);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .3s,background .25s}
.drawer:hover{transform:translateY(-6px);border-color:var(--y);background:#282826;box-shadow:0 18px 30px -18px rgba(0,0,0,.9)}
.drawer .handle{width:46px;height:8px;border-radius:99px;background:#3E3D39;transition:background .25s,width .3s}
.drawer:hover .handle{background:var(--y);width:62px}
.drawer .no{position:absolute;top:16px;left:18px;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:12px;color:#6F6C63}
.drawer h3{margin:var(--sp-1) 0 0;font-size:38px;color:var(--paper);text-wrap:balance}
.drawer p{margin:0;font-size:14.5px;line-height:1.65;color:var(--mute-d);text-wrap:pretty}
.cab-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap;padding:var(--sp-5) var(--sp-4) var(--sp-1);color:var(--mute-d);font-size:15px}
.cab-foot a{color:var(--y);font-weight:600;border-bottom:1.5px solid currentColor}

/* ===== ABOUT ===== */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--col-gap);align-items:center}
.about-vis{position:relative;width:100%;max-width:440px;padding-bottom:40px}
.about-vis .ph{border-radius:24px;overflow:hidden;aspect-ratio:3/4;background:#ddd}
.about-vis .ph img{width:100%;height:100%;object-fit:cover}
.level{position:absolute;bottom:0;left:-28px;right:-28px;height:58px;border-radius:10px;background:linear-gradient(#FFE84D,#F2CF00);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 18px 30px -14px rgba(0,0,0,.45);transform:rotate(var(--tilt,0deg));transition:transform .7s cubic-bezier(.2,1.6,.4,1);cursor:grab;touch-action:none;user-select:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.level .end{width:10px;height:30px;border-radius:3px;background:#1E1E1E;opacity:.85}
.vial{position:relative;width:150px;height:28px;border-radius:99px;background:linear-gradient(#DDF3B5,#B9E07A);box-shadow:inset 0 0 0 2px #1E1E1E,inset 0 6px 8px rgba(255,255,255,.5)}
.vial::before,.vial::after{content:"";position:absolute;top:3px;bottom:3px;width:2px;background:#1E1E1E;left:calc(50% - 20px)}
.vial::after{left:calc(50% + 18px)}
.bubble{position:absolute;top:5px;left:50%;width:34px;height:18px;margin-left:-17px;border-radius:99px;background:radial-gradient(ellipse at 40% 30%,#fff,rgba(255,255,255,.55) 60%,rgba(255,255,255,.2));transition:transform .35s cubic-bezier(.2,.8,.3,1.2)}
.level .ok{position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;background:var(--ink);color:var(--y);padding:3px 10px;border-radius:6px;opacity:0;transition:opacity .25s;white-space:nowrap}
.level.flat .ok{opacity:1}
.level.drag{transition:none;cursor:grabbing}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink);margin-top:var(--sp-7)}
.fact{padding:var(--sp-5) var(--sp-4) 0 0;border-right:1px solid var(--line)}
.fact:first-child{border-right:0;padding-right:0}
.fact .n{font-size:58px}
.fact .l{font-size:14px;color:var(--mute);margin-top:6px}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);position:relative}
.wire{position:absolute;top:28px;right:15px;left:0;height:2px;background:repeating-linear-gradient(to left,var(--ink) 0 14px,transparent 14px 22px)}
.step{position:relative;padding-top:64px}
.step .dot{position:absolute;top:14px;right:0;width:30px;height:30px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;z-index:2}
.step .dot i{width:10px;height:10px;border-radius:50%;background:var(--ink);transition:background .3s}
.step:hover .dot i{background:var(--y)}
.step .bg{display:block;font-size:72px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px #121212;margin-bottom:var(--sp-4)}
.step h3{margin:0 0 var(--sp-3);font-size:50px}
.step p{margin:0;color:#4A4842;max-width:340px;line-height:1.7;text-wrap:pretty}

/* ===== PRICES ===== */
.prices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap);align-items:start}
.receipt{background:#FFFEFA;border-radius:6px;padding:34px 34px 30px;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);position:relative;rotate:-1deg}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;background:radial-gradient(circle at 10px 0,#FFFEFA 9.5px,rgba(255,254,250,0) 10px) 0 0/20px 10px repeat-x}
.receipt h3{font-family:var(--disp);font-size:42px;margin:0;text-align:center}
.receipt .sub2{text-align:center;font-size:13px;color:var(--mute);margin:6px 0 20px}
.rline{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px dashed #D3CDBE;font-size:16px}
.rline span:first-child{flex:1}
.rline span:last-child{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;direction:ltr}
.receipt .tot{margin-top:18px;font-size:12.5px;color:var(--mute);line-height:1.6;text-align:center}

/* ===== AREA ===== */
.area{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--col-gap);align-items:center}
.cities{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.city{padding:12px 20px;border-radius:999px;border:1.5px solid var(--ink);font-weight:600;font-size:17px;transition:background .2s,color .2s}
.city:hover{background:var(--ink);color:var(--y)}
.city.main{background:var(--ink);color:var(--y)}

/* ===== FAQ ===== */
/* FAQ: questions + the "ask David" card. Desktop = two columns, card sticks on the left. */
.faqs{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr);gap:var(--sp-7) var(--col-gap);align-items:start}
.faqs.solo{display:block}
.faq details{border-top:1.5px solid var(--ink)}
.faq details:last-child{border-bottom:1.5px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 36px;align-items:center;gap:var(--sp-4);padding:26px 0;font-family:var(--disp);font-weight:700;font-size:42px;line-height:1}
.faq summary::-webkit-details-marker{display:none}
.faq .qn{justify-self:start;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;line-height:1;color:var(--mute);padding:5px 7px 4px;border-radius:3px;transition:background .25s,color .25s}
.faq summary:hover .qn{color:var(--ink)}
.faq details[open] .qn{background:var(--y);color:var(--ink);transform:rotate(-2deg)}
.faq summary .pm{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);position:relative;transition:background .25s,transform .25s}
.faq summary:hover .pm{transform:scale(1.08)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--paper);transition:transform .3s}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] .pm{background:var(--y)}
.faq details[open] .pm::before,.faq details[open] .pm::after{background:var(--ink)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq details.closing .pm{background:var(--ink)}
.faq details.closing .pm::before,.faq details.closing .pm::after{background:var(--paper)}
.faq details.closing .pm::after{transform:rotate(90deg)}
.faq details.closing .qn{background:transparent;color:var(--mute);transform:none}
.faq .ans{overflow:hidden}
.faq .ans-in{padding:0 60px 32px 0;font-size:18px;color:#4A4842;max-width:calc(68ch + 60px);line-height:1.8}

.faq-ask{align-self:start;position:sticky;top:24px;padding-top:120px}
.fa-card{position:relative;background:var(--ink);color:var(--paper);border-radius:22px;padding:var(--sp-6);box-shadow:0 40px 70px -40px rgba(0,0,0,.65)}
.fa-ph{position:relative;float:left;margin:-152px 2px 6px 20px;width:116px;padding:7px 7px 0;background:#FFFEF8;box-shadow:0 1px 1px rgba(0,0,0,.1),0 18px 26px -14px rgba(0,0,0,.55);rotate:4deg;transform-origin:50% 0;transition:rotate .45s cubic-bezier(.2,.7,.2,1)}
.fa-ph::before{content:"";position:absolute;top:-11px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(255,236,120,.78);box-shadow:0 1px 2px rgba(0,0,0,.1);transform:rotate(-4deg);clip-path:polygon(3% 0,97% 4%,100% 50%,97% 100%,4% 96%,0 50%)}
.fa-ph img{width:100%;height:auto;aspect-ratio:210/270;object-fit:cover}
.fa-ph figcaption{font-family:var(--disp);font-weight:700;font-size:24px;line-height:1;color:var(--ink);text-align:center;padding:6px 0 7px}
.fa-card:hover .fa-ph{rotate:0deg}
.fa-head{display:block}
.fa-head h3{margin:0;font-size:46px;line-height:.92;color:var(--paper);text-wrap:balance}
.fa-head p{margin:var(--sp-4) 0 0;font-size:17px;line-height:1.6;color:var(--mute-d);text-wrap:pretty}
.fa-ctas{clear:both;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.fa-ctas .btn{width:100%}
.fa-ctas bdi{font-weight:600}
.fa-md{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px dashed #3A3936;color:var(--mute-d);font-size:14px;line-height:1.45;transition:color .2s}
.fa-md .n{font-size:48px;line-height:.8;color:var(--y)}
.fa-md img{height:20px;width:auto;opacity:.95}
.fa-md:hover{color:var(--paper)}

@media (max-width:1024px){
  .faqs{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
  .faq-ask{position:static;padding-top:52px}
  .fa-ph{margin-top:-84px}
  .fa-ctas{flex-direction:row;flex-wrap:wrap}
  .fa-ctas .btn{width:auto;flex:1 1 220px}
}
@media (max-width:900px){
  .faq summary{font-size:32px;grid-template-columns:36px minmax(0,1fr) 32px;gap:var(--sp-3);padding:22px 0}
  .faq summary .pm{width:32px;height:32px}
  .faq .ans-in{padding:0 48px 28px 0;font-size:17px}
}
@media (max-width:560px){
  .faqs{gap:var(--sp-7)}
  .faq summary{grid-template-columns:minmax(0,1fr) 32px}
  .faq .qn{display:none}
  .faq .ans-in{padding:0 0 26px}
  .fa-card{padding:var(--sp-5)}
  .faq-ask{padding-top:88px}
  .fa-ph{width:92px;margin:-112px 0 6px 14px;padding:5px 5px 0}
  .fa-ph figcaption{font-size:20px;padding:4px 0 5px}
  .fa-head h3{font-size:38px}
  .fa-head p{font-size:16px}
  .fa-ctas .btn{flex:1 1 100%}
}

/* ===== CONTACT ===== */
.contact{background:var(--ink);color:var(--paper);border-radius:32px;overflow:hidden;position:relative}
.cgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--col-gap);padding:80px 72px}
.contact h2{font-size:clamp(60px,7.4vw,108px);margin:var(--sp-5) 0 0;color:var(--paper);text-wrap:balance}
.bigphone{display:inline-block;margin-top:var(--sp-5);white-space:nowrap;font-family:var(--disp);font-weight:700;line-height:.85;color:var(--y);direction:ltr;font-size:clamp(70px,10vw,150px);transition:letter-spacing .4s ease}
.bigphone:hover{letter-spacing:.012em}
.form{background:var(--ink-2);border:1px solid var(--line-d);border-radius:22px;padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.form .ft{font-family:var(--disp);font-weight:700;font-size:44px;line-height:.9}
.form label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--mute-d);font-weight:500}
.form input,.form textarea{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--paper);background:var(--ink);border:1px solid #3A3936;border-radius:12px;padding:14px 16px;outline:none;transition:border-color .2s}
.form input:focus,.form textarea:focus{border-color:var(--y)}
.form textarea{min-height:100px;resize:vertical}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .fine{font-size:12.5px;color:var(--mute-dd);line-height:1.55;margin:0}

/* ===== FOOTER ===== */
.foot{background:var(--ink);color:var(--mute-d);margin-top:calc(var(--sec-y) / 2);padding:calc(var(--sec-y) * 2 / 3) 0 0;overflow:hidden}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--sp-7)}
.fbrand img{width:84px}
.fbrand .tagl{font-family:var(--disp);font-weight:700;font-size:44px;line-height:.95;color:var(--paper);margin-top:var(--sp-4)}
.fhours{margin-top:var(--sp-5)}
.fhours small{display:block;font-size:13px;color:var(--mute-dd);margin-top:10px}
.fcol h4,.fcol .fh{margin:0 0 var(--sp-4);font-size:13px;font-weight:600;line-height:1.6;color:var(--mute-dd)}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.fcol a{color:var(--paper);transition:color .2s}
.fcol a:hover{color:var(--y)}
.fmid{display:inline-flex;align-items:center;gap:10px;margin-top:var(--sp-2)}
.fmid img{height:30px;width:auto}
.wordmark{font-family:var(--disp);font-weight:700;line-height:.75;font-size:clamp(120px,24vw,360px);color:transparent;-webkit-text-stroke:1.5px #34322D;text-align:center;margin:var(--sp-8) 0 -.08em;white-space:nowrap;user-select:none}
.fbar{border-top:1px solid var(--line-d);padding:var(--sp-5) 0;font-size:14px;position:relative;background:var(--ink)}
.fbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap}
.fbar nav{display:flex;gap:var(--sp-2) var(--sp-5);flex-wrap:wrap}
.fbar a:hover{color:var(--y)}

.fab{position:fixed;right:22px;bottom:22px;z-index:55;display:flex;flex-direction:column;gap:10px;align-items:center}
.fab a{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 28px -10px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.fab a:hover{transform:scale(1.07)}
.fab .fwa{background:#25D366;color:#fff;position:relative}
.fab .fwa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ring 2.8s ease-out infinite}
.fab .fcall{display:none;width:50px;height:50px;background:var(--y);color:var(--ink)}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}

@media (max-width:1220px){
  /* narrower lamp column: the switch moves up beside the lamp so it never covers the badge */
  .wallplate{top:0;bottom:auto;left:0;flex-direction:row}
  .hint{display:none}
}
@media (max-width:1180px){
  .drawers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .navlinks{display:none}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form .row2{grid-template-columns:minmax(0,1fr)}
  .cgrid{padding:var(--sp-8) var(--sp-7)}
}
@media (max-width:900px){
  :root{--gutter:20px;--sec-y:88px;--head-gap:40px;--col-gap:40px;--grid-gap:20px;--card-pad:20px;--hang:110px}
  body{font-size:16px}
  .shead{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-7);padding:0 0 var(--sp-7)}
  .hero h1{font-size:19vw}
  .brand img{width:52px;height:52px}
  .nav .btn span{display:none}
  .nav .btn{width:48px;min-height:48px;padding:0}
  .lamp{clip-path:inset(36px 0 0 0)}
  .stage{padding-bottom:var(--sp-3)}
  .badge{width:min(320px,86%)}
  .wallplate{left:max(0px,calc(50% - 160px))}
  .prices .receipt{max-width:560px;width:100%}
  .drawer h3{font-size:32px}
  .md-top,.about,.prices,.area,.cgrid{grid-template-columns:minmax(0,1fr);gap:var(--col-gap)}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap) var(--sp-5)}
  .fbrand{grid-column:1/-1}
  .step .bg{font-size:56px;margin-bottom:var(--sp-3)}
  .step h3{font-size:42px}
  .about-vis{margin:0 auto}
  .level{left:-6px;right:-6px}
  .fact .n{font-size:44px}
  .cgrid{padding:var(--sp-7) var(--sp-5)}
  .contact{border-radius:24px}
  .track span{font-size:28px}
  .bar{grid-template-columns:96px minmax(0,1fr) 46px;gap:var(--sp-3)}
  .fab{right:14px;bottom:14px}
  .fab .fcall{display:flex}
  .foot{padding-bottom:84px}
  .fcol ul{gap:var(--sp-1)}
  .fcol li{min-height:40px;display:flex;align-items:center}
  .fbar a{display:inline-block;padding:var(--sp-2) 0}
}
@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .wire{display:none}
  .step{padding:0 52px 0 0}
  .step .dot{top:4px}
}
@media (max-width:600px){
  .wall{grid-template-columns:minmax(0,1fr);gap:calc(var(--grid-gap) + 16px)}
}
@media (max-width:560px){
  :root{--sec-y:72px;--head-gap:32px;--grid-gap:16px}
  .drawers{grid-template-columns:minmax(0,1fr)}
  .cabinet{padding:var(--sp-3);border-radius:20px}
  .cab-head{padding:var(--sp-1) var(--sp-6) var(--sp-4)}
  .cab-foot{padding:var(--sp-4) var(--sp-6) var(--sp-2)}
  .ctas .btn{flex:1 1 100%}
  .form{padding:var(--sp-5)}
  .form .row2{grid-template-columns:1fr}
  .score .big{font-size:140px}
  .note.big blockquote{font-size:34px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badge-score{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-3);row-gap:var(--sp-1);align-items:center}
  .badge-score .n{grid-row:1/3}
  .badge-score img{margin:0;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{animation:none}
  *,*::before,*::after{transition:none!important}
  .js .rv{opacity:1;transform:none}
  .tape.hang:hover{animation:none}
}

/* ===================================================================
   WORDPRESS ADDITIONS (inner pages, menu, components). Same tokens.
   =================================================================== */

/* focus: yellow ring (static) + an ink ring so it also shows on paper */
/* focus: ink ring on light backgrounds, yellow ring on dark ones (audit 10/2026) */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:none}
.hero :focus-visible,.contact :focus-visible,.foot :focus-visible,.cabinet :focus-visible,.mnav :focus-visible,.note.dark :focus-visible,.ccard:focus-visible,.fa-card :focus-visible,.fab :focus-visible{outline-color:var(--y)}
#content:focus,#content:focus-visible{outline:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* contact block text (was an inline style in the static page) */
.ctext{font-size:18px;line-height:1.7;color:var(--mute-d);max-width:470px;margin:var(--sp-5) 0 0}
.form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .priv a{color:var(--mute-d);text-decoration:underline;text-underline-offset:2px}
.form .priv a:hover{color:var(--y)}
.form{position:relative}
.contact.short .cgrid{grid-template-columns:minmax(0,1fr)}

/* nav: menu button (hidden on desktop, so the desktop header is identical) */
.nav-end{display:flex;align-items:center;gap:10px;flex:none}
.navlinks a[aria-current]{color:var(--y)}
.navtoggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1.5px solid #4A4842;background:transparent;color:var(--paper);cursor:pointer;padding:0;transition:border-color .2s}
.navtoggle:hover{border-color:var(--paper)}
.mnav{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);padding:var(--sp-5) var(--gutter) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-6);overflow-y:auto}
.mnav[hidden]{display:none}
.mnav-top{display:flex;justify-content:space-between;align-items:center}
.mnav-top img{width:52px;height:52px;transform:rotate(-8deg)}
.mnav .navtoggle{display:inline-flex}
.mnav nav{display:flex;flex-direction:column}
.mnav nav a{font-family:var(--disp);font-weight:700;font-size:56px;line-height:1;padding:10px 0;border-bottom:1px solid var(--line-d);color:var(--paper)}
.mnav nav a[aria-current],.mnav nav a:hover{color:var(--y)}
.mnav .ctas{margin-top:0}
.menu-open body{overflow:hidden}
@media (max-width:1180px){.nav .navtoggle{display:inline-flex}}

/* inner hero */
.hero-in .hero-body{position:relative;z-index:2;padding:var(--sp-6) 0 calc(var(--sec-y) * .6);max-width:920px}
.hero-in h1{margin:var(--sp-5) 0 0;font-size:clamp(64px,7vw,110px);text-wrap:balance}
.hero-in .sub{max-width:620px}
.hero-in::after{content:"";position:absolute;top:-180px;left:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,225,2,.12) 0%,rgba(255,225,2,0) 65%);pointer-events:none}
.crumbs{font-size:13px;color:var(--mute-dd);margin:0 0 var(--sp-5)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-inline-end:6px;color:#5B5850}
.crumbs a{color:var(--mute-d);transition:color .2s}
.crumbs a:hover{color:var(--y)}
.hero-in .bigphone{font-size:clamp(70px,11vw,170px)}
.hero-min .hero-body{padding-bottom:var(--sp-8)}

/* long text */
.prose{max-width:720px;font-size:18px;line-height:1.75;color:#4A4842}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 var(--sp-4)}
.prose h2{font-family:var(--disp);font-weight:700;line-height:.95;font-size:48px;color:var(--ink);margin:var(--sp-7) 0 var(--sp-4);text-wrap:balance}
.prose h3{font-size:22px;font-weight:600;line-height:1.35;color:var(--ink);margin:var(--sp-6) 0 var(--sp-3)}
.prose ul,.prose ol{margin:0 0 var(--sp-4);padding-inline-start:22px}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{background:var(--y)}
.prose img{border-radius:16px;height:auto;margin:var(--sp-5) 0}
.prose blockquote{margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);background:#FFFEF8;box-shadow:0 18px 26px -18px rgba(0,0,0,.45);rotate:-.6deg;font-weight:500;color:var(--ink)}
.legal .prose h2{font-family:var(--body);font-weight:600;font-size:24px;line-height:1.35;margin:var(--sp-6) 0 var(--sp-3)}
.legal .prose{font-size:17px;max-width:760px}
.updated{font-size:14px;color:var(--mute);margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px dashed var(--line);max-width:760px}

/* two columns */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--col-gap);align-items:start}
.side{display:flex;flex-direction:column;gap:var(--sp-6)}
.side h3,.mini-h{font-size:14px;font-weight:600;color:var(--mute);margin:0 0 var(--sp-3)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-inline-start:30px;font-size:17px;line-height:1.5}
.checks li::before{content:"";position:absolute;right:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--ink)}
.checks li::after{content:"";position:absolute;right:6px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--y)}
.boxcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:var(--sp-5)}
.tipbox{background:var(--y);border-radius:16px;padding:var(--sp-5);color:var(--ink)}
.tipbox .t{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:var(--sp-3)}
.tipbox .prose{color:var(--ink);font-size:16px}
.tipbox .prose h3{font-size:18px;margin:var(--sp-4) 0 var(--sp-2)}
.tipbox .prose h3:first-child{margin-top:0}
.cities.sm .city{padding:8px 16px;font-size:15px}
.drawer .pr{margin-top:auto;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;color:var(--y);direction:ltr;align-self:flex-end}

/* jobs (city pages) */
.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.jobcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--sp-3)}
.jobcard .no{font-family:var(--body);font-variant-numeric:tabular-nums;font-size:12px;color:var(--mute)}
.jobcard h3{margin:0;font-size:36px}
.jobcard p{margin:0;color:#4A4842;font-size:16px;line-height:1.65}
.jobcard .tag{align-self:flex-start;margin-top:auto;font-size:14px;font-weight:600;border-bottom:1.5px solid currentColor}
.jobcard .tag:hover{color:var(--mute)}
.jobcard .ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.jobcard .ph img{border-radius:10px;aspect-ratio:1;object-fit:cover;width:100%}

/* city cards (areas hub) */
.ccards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.ccard{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);background:var(--ink-2);color:var(--paper);border-radius:22px;padding:var(--sp-6);border:1px solid var(--line-d);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .25s}
.ccard:hover{transform:translateY(-4px);border-color:var(--y)}
.ccard h3{margin:0;font-size:56px;color:var(--paper)}
.ccard p{margin:0;color:var(--mute-d);font-size:16px;line-height:1.65}
.ccard .meta{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-4);border-top:1px dashed #3A3936;font-size:14px;color:var(--mute-d)}
.ccard .meta b{color:var(--y);font-weight:600}

/* post cards */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.pcard{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--card);border:1px solid var(--line);border-radius:22px;padding:var(--card-pad) var(--card-pad) var(--sp-5);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(0,0,0,.35)}
.pcard .pdate{font-family:var(--body);font-variant-numeric:tabular-nums;font-size:13px;color:var(--mute)}
.pcard h3{margin:0;font-size:38px;text-wrap:balance}
.pcard p{margin:0;font-size:15.5px;line-height:1.65;color:#4A4842}
.pcard .more{margin-top:auto;align-self:flex-start;font-weight:600;font-size:15px;border-bottom:1.5px solid currentColor}

/* single post */
.post-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-5);font-size:14px;color:var(--mute-d)}
.post-meta .num{font-family:var(--body);font-variant-numeric:tabular-nums}
.answer{max-width:720px;margin:0 0 var(--sp-7)}
.answer .verify{margin-top:0;font-size:17px;color:var(--ink)}
.rel{max-width:720px;margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1.5px solid var(--ink)}

/* reviews page */
.wfilter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin:0 0 var(--head-gap)}
.wfilter .lbl{font-size:14px;color:var(--mute);margin-inline-end:var(--sp-2)}
.wfilter button.city{background:transparent;cursor:pointer;font:inherit;font-weight:600;font-size:16px;padding:10px 18px}
.wfilter button.city.main{background:var(--ink);color:var(--y)}
.note[hidden]{display:none}

/* about page: the badge without lamp and switch */
.about-badge{display:flex;justify-content:center;padding-top:60px}
.about-badge .badge{transform:rotate(-2deg)}
.about-badge .badge:hover{transform:rotate(0)}

/* contact page */
.week.lg{gap:10px}
.week.lg span{width:64px;height:64px;border-radius:14px;font-size:26px}
.week.lg span.off{color:#6A675E;border-color:#B9B3A3}
.week.lg span.off::after{background:#8E8A7E;left:10px;right:10px}
.dayline{margin-top:var(--sp-4);font-size:17px;color:#4A4842}

/* 404: under the sofa. The pointer is a flashlight (assets/js/nf.js). */
.nf{min-height:100vh;display:flex;flex-direction:column}
.nf .hero-body{padding-bottom:var(--sp-6)}
.nf .tape.hang{margin-top:var(--sp-5)}
.sofa-scene{--lx:50%;--ly:60%;--r:170px;position:relative;z-index:2;height:540px;border-radius:26px;overflow:hidden;background:#161615;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:none;box-shadow:inset 0 0 0 1px var(--line-d)}
.sofa-scene.touch{touch-action:none}
.sofa{position:absolute;top:0;left:4%;right:4%;height:96px;z-index:4;pointer-events:none;transition:transform .9s cubic-bezier(.3,1.6,.5,1)}
.sofa-skirt{position:absolute;inset:0 0 22px;border-radius:0 0 26px 26px;background:linear-gradient(#5B4A3C,#47392E);box-shadow:0 18px 30px -10px rgba(0,0,0,.9)}
.sofa-skirt::before{content:"";position:absolute;left:18px;right:18px;bottom:12px;border-top:2px dashed rgba(255,255,255,.14)}
.sofa-skirt::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:9px;background:repeating-linear-gradient(90deg,#47392E 0 5px,transparent 5px 9px);border-radius:0 0 6px 6px}
.leg{position:absolute;bottom:0;width:16px;height:30px;background:linear-gradient(90deg,#2C241D,#5A4634);clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)}
.l1{left:5%}.l2{left:34%}.l3{right:34%}.l4{right:5%}
.floor{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#1B1A18 0 120px,#1F1E1B 120px 121px,#1B1A18 121px 240px),#1B1A18}
.dust{position:absolute;width:38px;height:22px;border-radius:50%;background:radial-gradient(circle,#6B6860 0,rgba(107,104,96,.5) 45%,rgba(107,104,96,0) 70%);filter:blur(.5px)}
.d1{top:150px;left:8%}.d2{top:420px;left:40%;transform:scale(1.4)}.d3{top:210px;right:12%}.d4{top:330px;right:46%;transform:scale(.8)}
.junk{position:absolute;inset:0;margin:0;padding:0;list-style:none;z-index:2}
.thing{position:absolute;left:var(--tx);top:var(--ty);transform:translate(-50%,-50%)}
.thing svg{display:block;width:110px;height:auto;filter:drop-shadow(0 8px 6px rgba(0,0,0,.6))}
.t-sock{--tx:12%;--ty:240px}.t-remote{--tx:32%;--ty:360px}.t-bamba{--tx:52%;--ty:235px}.t-lego{--tx:70%;--ty:365px}.t-screw{--tx:88%;--ty:245px}
.k1{--tx:18%;--ty:425px}.k2{--tx:36%;--ty:150px}.k3{--tx:50%;--ty:430px}.k4{--tx:72%;--ty:150px}.k5{--tx:86%;--ty:405px}
.cap{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%,6px);width:max-content;max-width:210px;padding:7px 12px;border-radius:3px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.4;text-align:center;box-shadow:0 10px 20px -8px rgba(0,0,0,.7);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.cap b{display:block;font-size:15px}
.thing.lit .cap{opacity:1;transform:translate(-50%,0)}
.thing[data-thing]::after{content:"";position:absolute;top:-2px;right:6px;width:12px;height:12px;border-radius:50%;background:var(--y);box-shadow:0 0 0 3px #161615;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1);z-index:3}
.thing.found::after{transform:scale(1)}
.sofa-scene .lnk a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:3px;background:var(--y);color:var(--ink);font-weight:600;font-size:15px;transform:rotate(var(--tr,-4deg));box-shadow:0 8px 14px -6px rgba(0,0,0,.7);white-space:nowrap}
.sofa-scene .k2 a{--tr:3deg}.sofa-scene .k3 a{--tr:-2deg}.sofa-scene .k4 a{--tr:5deg}.sofa-scene .k5 a{--tr:-6deg}
.sofa-scene .lnk a:hover{transform:rotate(0) scale(1.06)}
.sofa-scene .dark{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle var(--r) at var(--lx) var(--ly),rgba(255,236,150,.10) 0,rgba(10,10,9,0) 45%,rgba(10,10,9,.55) 72%,rgba(8,8,7,.985) 100%);transition:opacity .5s}
.sofa-scene.on .dark{opacity:0}
.sofa-scene.on .cap{opacity:1;transform:translate(-50%,0)}
.sofa-scene.done .sofa{transform:translateY(-58px) rotate(-1.5deg)}
.sofa-scene.done .dark{--r:900px}
.sofa-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:var(--sp-4);padding:12px 16px;pointer-events:none}
.sofa-bar>*{pointer-events:auto}
.nf-hint,.nf-count{margin:0;font-size:14px;color:var(--mute-d)}
.nf-count{font-weight:600;color:var(--paper)}
.nf-count.win{color:var(--y);font-size:16px}
.nf-hint{transition:opacity .4s}
.sofa-scene.moved .nf-hint{opacity:0;width:0;overflow:hidden}
.lightbtn{margin-inline-start:auto;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #4A4842;background:rgba(18,18,18,.8);color:var(--paper);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.lightbtn:hover{border-color:var(--y);color:var(--y)}
.nf-ctas{position:relative;z-index:2;margin:var(--sp-6) 0 var(--sec-y)}

/* layout helpers added after the visual review */
.drawers.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.jobs.n1{grid-template-columns:minmax(0,1fr);max-width:720px}
.jobs.n2,.jobs.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccards>.ccard:last-child:nth-child(odd){grid-column:1/-1}
.area.top{align-items:start}
.about-badge{align-self:start;position:sticky;top:40px}
.error404 .foot,.page-template-tpl-thanks .foot{margin-top:0}
@media (max-width:1180px){
  .jobs,.pcards,.drawers.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .about-badge{position:static}
}
@media (max-width:560px){
  .drawers.n4{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .hero-in h1{font-size:clamp(52px,14vw,96px)}
  .hero-in .hero-body{padding-bottom:var(--sp-7)}
  .split,.ccards{grid-template-columns:minmax(0,1fr)}
  .prose h2{font-size:40px}
  .ccard h3{font-size:46px}
  .mnav nav a{font-size:46px}
}
@media (max-width:640px){
  .jobs,.jobs.n2,.jobs.n4,.pcards{grid-template-columns:minmax(0,1fr)}
  .week.lg span{width:42px;height:42px;font-size:19px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .sofa,.cap,.sofa-scene .dark{transition:none}
}
#contact.ct-gap{padding-top:var(--sec-y)}

/* headings: no automatic breaks. A "|" typed by the editor becomes a <br>;
   inner pages drop it on phones and let the browser balance the lines. */
body:not(.home) .disp{text-wrap:balance}
@media (max-width:560px){
  .hero-in h1 br{display:none}
}

/* ===================================================================
   DESIGN QA PASS (10/2026): line breaks, rhythm, empty states, mobile.
   =================================================================== */

/* line breaking: short texts balance, running text avoids one-word last lines */
.hero-in .sub,.faq summary,.fbrand .tagl,.fact .l,.ccard h3,.jobcard h3,.goodhour span{text-wrap:balance}
.note blockquote,.ccard p,.jobcard p,.pcard p,.drawer p,.ctext,.verify span,.prose p,.prose li,.faq .ans-in,.checks li,.tipbox .prose,.receipt .tot{text-wrap:pretty}

/* long-form inside a side column: sub-headings must not compete with the section H2 */
.about .prose h2,.area .prose h2,.prices .prose h2{font-size:36px;margin:var(--sp-6) 0 var(--sp-3)}
.about .prose>h2:first-child,.area .prose>h2:first-child,.prices .prose>h2:first-child{margin-top:0}
.tipbox .prose h3{color:var(--ink)}
.side .facts{margin-top:0}

/* reviews wall on inner pages: stacked columns, no holes under short notes */
.wall.stack{display:block;columns:4;column-gap:var(--grid-gap);padding-top:0}
.wall.stack.c3{columns:3}
.wall.stack>.note{display:inline-block;width:100%;vertical-align:top;break-inside:avoid;margin:22px 0 calc(var(--grid-gap) - 4px)} /* top margin travels with the note, so its tape is never cut by a column break */
.wall.stack>.note[hidden]{display:none}
@media (max-width:1180px){.wall.stack,.wall.stack.c3{columns:2}}
@media (max-width:600px){.wall.stack,.wall.stack.c3{columns:1}}

/* post cards: the grid follows the number of cards */
.pcards.n1{grid-template-columns:minmax(0,1fr);max-width:720px}
.pcards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* city jobs: five cards = 3 + 2 wide, never a hole */
.jobs.n5{grid-template-columns:repeat(6,minmax(0,1fr))}
.jobs.n5>*{grid-column:span 2}
.jobs.n5>:nth-child(n+4){grid-column:span 3}
@media (max-width:1180px){
  .jobs.n5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobs.n5>*,.jobs.n5>:nth-child(n+4){grid-column:auto}
  .jobs.n5>:last-child{grid-column:1/-1}
}
@media (max-width:640px){.jobs.n5>:last-child{grid-column:auto}}

/* short contact block (legal pages): two columns instead of one half-empty box */
.contact.short .cgrid>div{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:var(--col-gap);align-items:end}
.contact.short .cgrid>div>*{grid-column:1}
.contact.short .tape{justify-self:start}
.contact.short .cgrid>div>.ctext{grid-column:2;grid-row:2;align-self:end;margin:0}
.contact.short .cgrid>div>.ctas{grid-column:2;grid-row:3;align-self:end}
@media (max-width:900px){
  .contact.short .cgrid>div{display:block}
  .contact.short .ctext{margin-top:var(--sp-5)}
}

/* breadcrumbs: one line, the current page truncates */
.crumbs ol{flex-wrap:nowrap;white-space:nowrap;min-width:0}
.crumbs li{flex:none}
.crumbs li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* tap targets: bigger hit area without moving the visual */
.cab-foot a,.jobcard .tag,.crumbs a,.pcard .more{position:relative}
.cab-foot a::after,.jobcard .tag::after,.crumbs a::after{content:"";position:absolute;inset:-14px -6px}
.cities.sm .city{padding:10px 16px}
@media (max-width:900px){
  .fcol ul{gap:0}
  .fcol li{min-height:0}
  .fcol a{display:inline-flex;align-items:center;min-height:44px}
  .fbar a{padding:12px 0}
}

/* 404 on phones: a taller floor, things in two columns */
@media (max-width:700px){
  .sofa-scene{height:820px;--r:130px;border-radius:20px}
  .sofa{height:70px;left:3%;right:3%}
  .thing svg{width:84px}
  .t-sock{--tx:27%;--ty:200px}.t-remote{--tx:73%;--ty:290px}.t-bamba{--tx:27%;--ty:410px}.t-lego{--tx:73%;--ty:500px}.t-screw{--tx:27%;--ty:610px}
  .k1{--tx:72%;--ty:125px}.k2{--tx:27%;--ty:262px}.k3{--tx:72%;--ty:360px}.k4{--tx:27%;--ty:470px}.k5{--tx:72%;--ty:600px}
  .cap{max-width:170px;font-size:13px}
  .sofa-bar{flex-wrap:wrap;gap:var(--sp-2);padding:14px 16px 16px}
  .nf-count.win{font-size:15px;flex:1 1 100%}
  .d2{top:690px}.d4{top:540px}
  .nf-ctas .btn{flex:1 1 100%}
}
@media (max-width:640px){
  .jobs.n5,.pcards.n2{grid-template-columns:minmax(0,1fr)}
  .jobs.n5>*,.jobs.n5>:nth-child(n+4),.jobs.n5>:last-child{grid-column:auto}
}
.form .priv a{position:relative}
.form .priv a::after{content:"";position:absolute;inset:-14px -4px}
.prose h3{text-wrap:balance}

/* SEO: tape lives inside the H1 (keyword), visually unchanged */
.hero h1 .hero-id{display:flex;font-family:var(--body);font-weight:600;line-height:normal;margin-bottom:var(--sp-5)}
.hero h1:has(.hero-id){margin-top:0}

/* ===================================================================
   FOOTER ON PHONES AND TABLETS (10/2026): one column line, clear groups,
   44px rows, the bar clears the floating buttons. Desktop unchanged.
   =================================================================== */
.fbar-end{display:flex;align-items:center;gap:var(--sp-2) var(--sp-5);flex-wrap:wrap}
@media (max-width:900px){
  .foot{padding:var(--sp-8) 0 calc(148px + env(safe-area-inset-bottom,0px))}
  .fgrid{gap:0 var(--sp-5)}
  .fbrand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-5);padding-bottom:var(--sp-6);margin-bottom:var(--sp-5);border-bottom:1px solid var(--line-d)}
  .fbrand img{width:72px;height:72px}
  .fbrand .tagl{margin:0;font-size:40px}
  .fhours{margin:0}
  .fcol .fh{margin:0 0 var(--sp-1)}
  .fcol li{min-height:44px;display:flex;align-items:center}
  .fmid{margin:0}
  .fbar{padding:var(--sp-2) 0}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
  .fbrand{grid-template-columns:64px minmax(0,1fr);gap:var(--sp-5) var(--sp-4)}
  .fbrand img{width:64px;height:64px}
  .fbrand .tagl{font-size:36px}
  .fhours{grid-column:1/-1}
  .fhours .week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%}
  .fhours .week span{width:auto;height:40px}
  .fcol:last-child{grid-column:1/-1;margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line-d)}
  .fcol:last-child ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4)}
  .wordmark{font-size:calc((100vw - 2 * var(--gutter)) * .43);margin:var(--sp-7) 0 -.08em}
  .fbar .wrap{flex-direction:column;align-items:stretch;gap:0}
  .fbar-end{display:contents}
  .fbar nav{order:1;gap:0 var(--sp-5)}
  .fcopy{order:2;padding-top:var(--sp-2);font-size:13px;color:var(--mute-dd)}
  .fbar .fcredit{order:3;align-self:flex-start;font-size:13px;color:var(--mute-dd)}
}

/* ===================================================================
   FORM CONSENTS: native checkbox, custom box (yellow check on ink).
   =================================================================== */
.form .consents{display:flex;flex-direction:column;margin-top:calc(var(--sp-1) * -1)}
.form label.chk{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:var(--sp-3);align-items:start;min-height:44px;padding:10px 0;font-size:14px;font-weight:400;line-height:1.55;color:var(--mute-d);cursor:pointer;text-wrap:pretty}
.form .chk input{position:absolute;top:10px;right:0;width:24px;height:24px;min-width:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.form .chk .box{grid-column:1;grid-row:1;position:relative;width:24px;height:24px;border-radius:6px;border:1.5px solid #4A4842;background:var(--ink);transition:border-color .2s,box-shadow .2s}
.form .chk .box::after{content:"";position:absolute;left:50%;top:45%;width:6px;height:11px;border:solid var(--y);border-width:0 2.5px 2.5px 0;transform:translate(-50%,-50%) rotate(45deg) scale(.4);opacity:0;transition:opacity .15s,transform .2s cubic-bezier(.2,1.6,.4,1)}
.form .chk .ct{grid-column:2;grid-row:1}
.form .chk:hover .box{border-color:var(--mute-d)}
.form .chk input:checked+.box{border-color:var(--y)}
.form .chk input:checked+.box::after{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.form .chk input:focus-visible+.box{outline:2px solid var(--y);outline-offset:3px}
.form .chk.bad .box{border-color:var(--y);box-shadow:0 0 0 3px rgba(255,225,2,.22)}
.form .chk a{position:relative;color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.form .chk a:hover{color:var(--y)}
.form .ferr{margin:0 0 var(--sp-1);padding-right:36px;font-size:14px;font-weight:600;line-height:1.5;color:var(--y)}
.form .ferr:empty{display:none}
@media (prefers-reduced-motion:reduce){.form .chk .box::after{transition:none}}
/* contact page: the big weekday strip shares the width on narrow phones (was 10px too wide at 360) */
@media (max-width:420px){
  .week.lg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;max-width:330px}
  .week.lg span{width:auto;aspect-ratio:1;height:auto}
}

/* ===================================================================
   AUDIT FIXES (01/10/2026)
   =================================================================== */

/* Numbers people read or type: phone and scores in Plex (Karantina's 7 reads
   like a 1). Sizes are set so each number keeps about the width it had. */
.bigphone,.disp.num,.disp.n{font-family:var(--body);font-weight:700;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.025em;line-height:1}
.bigphone{font-size:clamp(36px,5.6vw,84px);line-height:1.05}
.bigphone:hover{letter-spacing:-.01em}
.hero-in .bigphone{font-size:clamp(40px,6.4vw,96px)}
.badge-score .n{font-size:38px}
.fa-md .n{font-size:30px;line-height:1}
.fact .n{font-size:44px}
.score .big{font-size:clamp(96px,11vw,145px);line-height:.95;letter-spacing:-.04em}
@media (max-width:900px){
  .bigphone,.hero-in .bigphone{font-size:clamp(34px,11vw,84px)}
  .fact .n{font-size:34px}
}
@media (max-width:560px){
  .score .big{font-size:86px}
}

/* form fields: borders visible against the dark card (were 1.4:1) */
.form input,.form textarea{border-color:#6A675E}
.form .chk .box{border-color:#7A776E}
.form input[aria-invalid="true"]{border-color:var(--y);box-shadow:0 0 0 3px rgba(255,225,2,.22)}

/* layout stability: the hero badge and logo never resize when images/fonts arrive */
.brand img,.mnav-top img,.fbrand img{aspect-ratio:1;object-fit:contain}
.badge-photo{aspect-ratio:112/140}
.note figcaption img{aspect-ratio:74/20}

/* cookie note on phones: docked low beside the floating buttons (not above them),
   so the hero's call/WhatsApp buttons stay visible on the first screen */
@media (max-width:680px){
  html body .webey-cc.webey-cc--corner{left:12px;right:86px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-height:none;font-size:13px;line-height:1.4}
  html body .webey-cc--corner .webey-cc__inner{padding:10px 12px 8px;gap:4px}
  html body .webey-cc--corner .webey-cc__text strong.hd-cc-h{font-size:23px;margin:0 0 2px}
  html body .webey-cc--corner .webey-cc__btn{min-height:44px;padding:8px 20px}
}

/* footer weekend line: bigger, white, with a charging drill */
.fhours .wkend{display:flex;align-items:center;gap:12px;margin:14px 0 0;color:var(--paper);font-size:17px;font-weight:600;line-height:1.35}
.fhours .wkend .drill{width:58px;height:45px;flex:none;overflow:visible}
.fhours .wkend .b{opacity:.18;animation:hdcharge 2.4s steps(1) infinite}
.fhours .wkend .b2{animation-delay:.6s}
.fhours .wkend .b3{animation-delay:1.2s}
.fhours .wkend .zap{animation:hdzap 2.4s ease-in-out infinite;transform-origin:64px 12px}
@keyframes hdcharge{0%{opacity:.18}25%,75%{opacity:1}100%{opacity:.18}}
@keyframes hdzap{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.fhours .wkend .b{animation:none;opacity:1}.fhours .wkend .zap{animation:none;opacity:1}}
@media (max-width:560px){.fhours .wkend{font-size:16px}.fhours .wkend .drill{width:50px;height:39px}}

.fhours .wkend .drill{color:#F1EEE6}
/* same joke on the hero ID card */
.badge-wkend{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding-top:12px;border-top:1.5px dashed var(--line);font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.badge-wkend .drill{width:40px;height:31px;flex:none;color:#121212;overflow:visible}
.badge-wkend .b{opacity:.18;animation:hdcharge 2.4s steps(1) infinite}
.badge-wkend .b2{animation-delay:.6s}.badge-wkend .b3{animation-delay:1.2s}
.badge-wkend .zap{animation:hdzap 2.4s ease-in-out infinite;transform-origin:64px 12px}
@media (prefers-reduced-motion:reduce){.badge-wkend .b{animation:none;opacity:1}.badge-wkend .zap{animation:none;opacity:1}}

/* digits: body font (Plex Mono has a dotted zero) */
.rline span:last-child{font-weight:700}