/* Mr Clean theme styles. Tokens first, then layout, then motion. */
@font-face{font-family:"Sora";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/sora-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sora-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sora-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/figtree-latin-800-normal.woff2) format("woff2")}
/* Layout: one column of full width bands; each band has a 1180px inner wrap. Hero splits copy and illustration, everything stacks on phones. */
:root{
  --navy:#0B3B6F; --navy-2:#1A4E86;
  --mint:#2E9E78; --mint-text:#1F7A5C; --mint-soft:#8FDCC0;
  --bg:#FFFFFF; --fg:#1C2733; --muted:#4A5868; --line:#E3EBF2;
  --air:#E8F1F8; --linen:#FAF8F4;
  --head:#0B3B6F;
  --band:#0B3B6F; --band-fg:#FFFFFF; --band-muted:#D5E2EF; --band-card:#1A4E86;
  --btn:#0B3B6F; --btn-fg:#FFFFFF; --btn-2-bg:#FFFFFF;
  --field:#FFFFFF; --field-line:#C5D3E0;
  --tile:#0B3B6F; --tile-mark:#FFFFFF;
  --ill-wall:#DCE9F4; --ill-floor:#C7DAEA; --ill-window:#FFFFFF; --ill-couch:#F3EEE6; --ill-couch-2:#E4DCCF;
  --ill-rug:#0B3B6F; --ill-rug-line:#8FDCC0; --ill-dog:#C98B5A; --ill-dog-2:#9C6440; --ill-ink:#1C2733; --ill-white:#FFFFFF; --ill-leaf:#2E9E78; --ill-pot:#E9C9A6;
  --font-display:"Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --radius:22px;
  --dirt-1:#8C8475; --dirt-2:#7F7769; --dust:#5E574C; --fresh-1:#0B3B6F; --fresh-2:#1A4E86;
  --nav-h:84px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root{color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); color:var(--head); text-wrap:balance; margin:0; letter-spacing:-0.02em}
h1{font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.05}
h2{font-size:clamp(1.8rem, 3.6vw, 2.6rem); line-height:1.1}
h3{font-size:1.2rem; line-height:1.25}
p{margin:0}
a{color:var(--mint-text)}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{outline:3px solid var(--mint); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.lead{font-size:1.12rem; color:var(--muted); max-width:36rem}
.section{padding-block:clamp(56px, 9vw, 96px)}
.section-head{display:flex; flex-direction:column; gap:12px; max-width:44rem; margin-bottom:40px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; font-weight:800; font-size:1rem; text-decoration:none; border:2px solid var(--btn); background:var(--btn); color:var(--btn-fg); cursor:pointer; font-family:var(--font-body); transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--btn-2-bg); color:var(--head); border-color:var(--head)}

/* header */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:10; background:var(--bg)}
.site-head{position:sticky; top:env(safe-area-inset-top, 0px); z-index:9; background:var(--bg); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; flex-wrap:wrap; padding-block:10px}
.logo{display:block; width:190px; height:auto}
.nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap; font-weight:700; font-size:.95rem}
.nav a{color:var(--fg); text-decoration:none}
.nav a:hover{color:var(--mint-text)}
.nav .btn{min-height:44px; padding:0 20px; font-size:.95rem; color:var(--btn-fg)}
@media (max-width:760px){ .nav .hide-sm{display:none} .logo{width:160px} }

/* hero */
.hero{background:var(--air)}
.hero .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(28px, 5vw, 56px); padding-block:clamp(48px, 7vw, 80px)}
.hero-copy{flex:1 1 440px; min-width:0; display:flex; flex-direction:column; gap:22px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.hero-art{flex:1 1 420px; min-width:0; position:relative}
.hero-art svg{width:100%; height:auto; display:block}
.dry-pill{position:absolute; left:6%; bottom:7%; background:var(--bg); color:var(--head); border-radius:999px; padding:10px 18px; font-weight:800; font-size:.95rem; display:flex; align-items:center; gap:10px; box-shadow:0 10px 30px rgba(11,59,111,.18)}
.dry-pill svg{width:18px; height:18px; fill:var(--mint)}
.twinkle{transform-box:fill-box; transform-origin:center; animation:twinkle 3.2s ease-in-out infinite}
.twinkle.d2{animation-delay:1s} .twinkle.d3{animation-delay:2s}
@keyframes twinkle{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(.55); opacity:.6}}
@media (prefers-reduced-motion:reduce){ .twinkle{animation:none} html{scroll-behavior:auto} .btn{transition:none} }

/* trust strip */
.trust{border-bottom:1px solid var(--line)}
.trust .wrap{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:20px; padding-block:28px}
.trust-item{display:flex; gap:14px; align-items:flex-start}
.trust-item svg{flex:none; width:40px; height:40px}
.trust-item strong{display:block; font-family:var(--font-display); color:var(--head); font-size:1.1rem}
.trust-item span{color:var(--muted); font-size:.92rem}
.ic-bg{fill:var(--air)} .ic-fg{fill:var(--navy)} .ic-mint{fill:var(--mint)}
.ic-stroke{fill:none; stroke:var(--navy); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* healthy band */
.band{background:var(--band); color:var(--band-fg)}
.band h2{color:var(--band-fg)}
.band .lead{color:var(--band-muted)}
.band-grid{display:flex; flex-wrap:wrap; gap:40px; align-items:center}
.band-copy{flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:18px}
.band-cards{flex:1 1 440px; min-width:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px}
.band-card{background:var(--band-card); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:6px}
.band-card strong{font-family:var(--font-display); font-size:1.05rem}
.band-card span{color:var(--band-muted); font-size:.95rem}
.band-card svg{width:30px; height:30px; margin-bottom:4px}
.b-st{fill:none; stroke:var(--mint-soft); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round} .b-fill{fill:var(--mint-soft)}

/* services */
.services{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:22px}
.service{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; background:var(--bg)}
.service svg{display:block; width:100%; height:auto; background:var(--air)}
.service-body{padding:22px; display:flex; flex-direction:column; gap:8px}
.service-body p{color:var(--muted); font-size:.97rem}
.tag{align-self:flex-start; font-size:.78rem; font-weight:800; color:var(--mint-text); background:var(--air); padding:4px 10px; border-radius:999px}

/* reviews */
.reviews-bg{background:var(--linen)}
.reviews{display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:22px}
.review{background:var(--bg); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px; border:1px dashed var(--field-line)}
.stars{display:flex; gap:4px} .stars svg{width:18px; height:18px; fill:var(--mint)}
.review p{color:var(--muted)}
.review .who{font-weight:800; color:var(--fg); font-size:.92rem}

/* faq */
.faq{display:flex; flex-direction:column; gap:12px; max-width:52rem}
details{border:1px solid var(--line); border-radius:16px; padding:0 22px; background:var(--bg)}
summary{cursor:pointer; list-style:none; font-weight:800; font-size:1.05rem; padding:18px 0; display:flex; justify-content:space-between; gap:16px; color:var(--head)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--font-display); color:var(--mint-text); font-size:1.4rem; line-height:1}
details[open] summary::after{content:"\2212"}
details p{padding-bottom:20px; color:var(--muted); max-width:44rem}

/* quote */
.quote-grid{display:flex; flex-wrap:wrap; gap:40px}
.quote-side{flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:20px}
.contact-card{background:var(--air); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:8px}
.phone-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.phone{font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--head); user-select:all; font-variant-numeric:tabular-nums}
.copy-btn{min-height:40px; padding:0 16px; border-radius:999px; border:1.5px solid var(--head); background:transparent; color:var(--head); font-weight:800; cursor:pointer; font-family:var(--font-body)}
.areas{display:flex; flex-wrap:wrap; gap:8px}
.areas span{border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:6px 14px; font-weight:700; font-size:.9rem}
.quote-form{flex:1 1 480px; min-width:0; border:1px solid var(--line); border-radius:24px; padding:clamp(20px, 4vw, 32px); display:flex; flex-direction:column; gap:18px; background:var(--bg)}
.row{display:flex; flex-wrap:wrap; gap:16px}
.field{flex:1 1 200px; display:flex; flex-direction:column; gap:6px; min-width:0}
.quote-form > .field{flex:none}
label, legend{font-weight:800; font-size:.92rem}
input[type=text], input[type=tel], input[type=email], select, textarea{width:100%; min-height:50px; border:1px solid var(--field-line); border-radius:12px; padding:10px 14px; font:inherit; background:var(--field); color:var(--fg)}
textarea{min-height:110px; resize:vertical}
fieldset{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.checks{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px}
.check{display:flex; align-items:center; gap:10px; border:1px solid var(--field-line); border-radius:12px; padding:12px 14px; cursor:pointer; font-weight:600; font-size:.95rem; min-height:48px}
.check input{width:20px; height:20px; accent-color:var(--mint)}
.check:has(input:checked){border-color:var(--mint); background:var(--air)}
.form-note{font-size:.85rem; color:var(--muted)}
.error{color:#B42318; font-weight:700; font-size:.9rem}
.thanks{border:2px solid var(--mint); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:10px; background:var(--air)}
.thanks h3{display:flex; gap:10px; align-items:center}
.thanks svg{width:22px; height:22px; fill:var(--mint)}

/* footer */
.foot{background:var(--band); color:var(--band-muted)}
.foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding-block:36px; font-size:.92rem}
.foot strong{color:var(--band-fg)}
/* motion: hero word reveal, footprints, clean pass scene, scroll reveals */
.h-word{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em}
.h-word>span{display:inline-block; animation:wordUp .75s var(--ease) both; animation-delay:calc(var(--i) * 55ms)}
@keyframes wordUp{from{transform:translateY(110%)}}
.walk{transform-box:fill-box; transform-origin:center; animation:stepIn .45s var(--ease) both; animation-delay:calc(1s + var(--i) * .35s)}
@keyframes stepIn{from{opacity:0; transform:scale(.5)}}
.dry-pill{animation:pillIn .5s var(--ease) both; animation-delay:2.1s}
@keyframes pillIn{from{opacity:0; transform:translateY(12px)}}

.clean-pass{background:var(--bg)}
.stage{padding-block:clamp(56px, 9vw, 96px)}
.pass-grid{display:flex; flex-wrap:wrap; gap:clamp(28px, 5vw, 56px); align-items:center}
.pass-copy{flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:18px}
.pass-art{flex:1.3 1 460px; min-width:0; display:flex; flex-direction:column; gap:14px}
.pass-art svg{width:100%; height:auto; display:block}
.pass-bar{display:none}
.captions{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.cap h3{margin:4px 0 6px}
.cap p:last-child{color:var(--muted)}
.step-n{font-family:var(--font-body); font-weight:800; color:var(--mint-text); font-size:.95rem; text-transform:none; letter-spacing:0}
.readout{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.read{border:1px solid var(--line); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; background:var(--bg); min-width:0}
.read span{font-size:.85rem; color:var(--muted); font-weight:700}
.read strong{font-family:var(--font-display); font-size:1.05rem; color:var(--muted)}
.read.ours{border-color:var(--mint)} .read.ours strong{color:var(--head)}
.read.wet strong::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--navy-2); margin-right:8px; vertical-align:middle; animation:drip 1.6s ease-in-out infinite}
@keyframes drip{50%{opacity:.25}}
.pp{transition:opacity .3s ease}

html.pin .clean-pass{height:320vh; position:relative}
html.pin .stage{position:sticky; top:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); height:calc(100svh - var(--nav-h) - env(safe-area-inset-top, 0px)); display:flex; align-items:center; padding-block:16px; overflow:hidden}
html.pin .stage > .wrap{width:100%}
html.pin .pass-bar{display:flex; gap:6px}
.pass-bar span{flex:1; height:6px; border-radius:999px; background:var(--air); overflow:hidden}
.pass-bar i{display:block; height:100%; background:var(--mint); transform-origin:left; transform:scaleX(0)}
html.pin .captions{position:relative; min-height:9.5rem; display:block}
html.pin .cap{position:absolute; inset:0 0 auto 0; opacity:0; transform:translateY(14px); transition:opacity .35s var(--ease), transform .35s var(--ease)}
html.pin .cap.on{opacity:1; transform:none}
@media (max-width:760px){
  html.pin .pass-art{order:-1}
  html.pin .pass-lead{display:none}
  html.pin .pass-grid{gap:20px}
  html.pin .pass-copy{gap:12px}
  html.pin .captions{min-height:8.5rem}
  .readout{gap:8px} .read{padding:10px 12px} .read strong{font-size:.95rem}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 70%}
    .band-card:nth-child(2){animation-range:entry 8% entry 78%}
    .band-card:nth-child(3){animation-range:entry 14% entry 84%}
    .band-card:nth-child(4){animation-range:entry 20% entry 90%}
    .service svg{animation:settle linear both; animation-timeline:view(); animation-range:entry 0% cover 45%}
  }
}
@keyframes rise{from{opacity:.2; transform:translateY(32px)}}
@keyframes settle{from{transform:scale(1.1)}}
@media (prefers-reduced-motion: reduce){
  .h-word>span, .walk, .dry-pill, .read.wet strong::before{animation:none}
}
/* WhatsApp enquiry */
:root{ --wa:#25D366; --wa-ink:#06331A }
.btn-wa{background:var(--wa); border-color:var(--wa); color:var(--wa-ink)}
.btn-wa svg{width:20px; height:20px; fill:currentColor}
.wa-preview{margin:0; white-space:pre-wrap; word-break:break-word; font-family:var(--font-body); font-size:.95rem; line-height:1.5; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 16px; color:var(--fg)}
.thanks-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.form-actions{display:flex; flex-wrap:wrap; gap:12px}
.wa-float{position:fixed; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:8; width:56px; height:56px; border-radius:50%; background:var(--wa); display:none; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.45)}
.wa-float svg{width:30px; height:30px; fill:#FFFFFF}
@media (max-width:760px){ .wa-float{display:flex} .foot .wrap{padding-bottom:96px} }

/* theme additions */
body{margin:0}
.btn-light{--btn:#FFFFFF; --btn-fg:#0B3B6F}
.admin-bar .site-head{top:calc(32px + env(safe-area-inset-top, 0px))}
@media screen and (max-width:782px){ .admin-bar .site-head{top:calc(46px + env(safe-area-inset-top, 0px))} }
@media screen and (max-width:600px){ .admin-bar .site-head{top:env(safe-area-inset-top, 0px)} }
.skip-link{position:absolute; left:-9999px; top:8px; z-index:20; background:var(--bg); color:var(--head); padding:10px 16px; border-radius:999px; font-weight:800}
.skip-link:focus{left:16px}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.btn[disabled]{opacity:.6; cursor:wait}
.foot a{color:var(--band-fg)}
.foot-links{display:flex; flex-wrap:wrap; gap:16px}
/* plain pages and 404 */
.page-body{padding-block:clamp(48px, 8vw, 88px)}
.page-body .wrap{max-width:780px}
.entry{display:flex; flex-direction:column; gap:16px}
.entry h1{margin-bottom:8px}
.entry p, .entry li{color:var(--fg); max-width:65ch}
.entry h2{font-size:1.5rem; margin-top:16px}
.lost{display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.lost svg{width:min(420px, 100%); height:auto}
/* consent bar */
.consent{position:fixed; left:0; right:0; bottom:0; z-index:12; background:var(--bg); color:var(--fg); border-top:1px solid var(--line); padding-block:14px calc(14px + env(safe-area-inset-bottom, 0px))}
.consent .wrap{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between}
.consent p{max-width:60ch; font-size:.92rem}
.consent a{color:var(--head)}
.consent-actions{display:flex; gap:10px}
.consent .btn{min-height:44px; padding:0 18px}

.page-body{min-height:calc(100vh - 320px)}

/* light sections: navy stays in the top menu only */
body::before{background:var(--band)}
.site-head{background:var(--band); border-bottom-color:transparent}
.site-head .nav a{color:var(--band-fg)} .site-head .nav a:hover{color:var(--mint-soft)}
.site-head .nav .btn{--btn:#FFFFFF; --btn-fg:#0B3B6F; color:#0B3B6F}
.site-head a:focus-visible{outline-color:var(--mint-soft)}
.band{background:var(--air); color:var(--fg)}
.band h2{color:var(--head)} .band .lead{color:var(--muted)}
.band-card{background:var(--bg); border:1px solid var(--line)}
.band-card strong{color:var(--head)} .band-card span{color:var(--muted)}
.b-st{stroke:var(--mint)} .b-fill{fill:var(--mint)}
.foot{background:var(--air); color:var(--muted); border-top:1px solid var(--line)}
.foot strong{color:var(--head)} .foot a{color:var(--head)}
/* SEBO proof */
.proof{display:flex; gap:18px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:16px 20px}
.proof-n{font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--mint-text); line-height:1; white-space:nowrap}
.proof-n span{font-size:1rem; color:var(--muted)}
.proof p:last-child{color:var(--muted); font-size:.95rem}
.creds{font-size:.88rem; color:var(--muted); font-weight:700}
/* Master Guard */
.guard-grid{display:flex; flex-wrap:wrap; gap:clamp(28px, 5vw, 56px); align-items:center}
.guard-art{flex:1 1 400px; min-width:0}
.guard-art svg{width:100%; height:auto; display:block}
.guard-copy{flex:1 1 420px; min-width:0; display:flex; flex-direction:column; gap:18px}
.guarantee{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.g-n{font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:var(--head); line-height:1}
.guarantee p:last-child{font-weight:700}
.guard-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.guard-list li{border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-weight:700; font-size:.9rem}
.bead{transform-box:fill-box; transform-origin:center bottom}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .bead{animation:beadIn linear both; animation-timeline:view(); animation-range:entry 10% cover 45%} } }
@keyframes beadIn{from{transform:translateY(-46px) scale(.6); opacity:.3}}
@media (max-width:480px){ .proof{flex-direction:column; align-items:flex-start} }

/* quote form item details */
.items{display:flex; flex-direction:column; gap:10px}
.detail{background:var(--air); border-radius:12px; padding:12px 14px; margin-top:8px; display:flex; flex-direction:column; gap:10px}
.drows{display:flex; flex-direction:column; gap:8px}
.drow{display:grid; grid-template-columns:62px minmax(56px, 90px) auto minmax(56px, 90px) auto minmax(0, 1fr) 44px; align-items:center; gap:8px}
.drow.q{grid-template-columns:minmax(56px, 76px) auto minmax(0, 1fr) 44px}
.dlabel{font-weight:800; font-size:.9rem}
.drow input[type=number]{width:100%; min-width:0; min-height:44px; border:1px solid var(--field-line); border-radius:10px; padding:8px 10px; font:inherit; background:var(--field); color:var(--fg)}
.drow select{width:100%; min-width:0; min-height:44px; border:1px solid var(--field-line); border-radius:10px; padding:8px 10px; font:inherit; background:var(--field); color:var(--fg)}
.drow .x, .drow .unit{color:var(--muted); font-weight:700}
.drow .area{font-weight:800; color:var(--mint-text); font-variant-numeric:tabular-nums; white-space:nowrap}
.drow .rm{width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:1.4rem; line-height:1; cursor:pointer}
.drow .rm[hidden]{display:block !important; visibility:hidden}
.drow .rm:hover{background:var(--bg); color:var(--head)}
.dadd{align-self:flex-start}
.dtotal{font-weight:800; color:var(--head); font-size:.95rem}
.dtotal:empty{display:none}
@media (max-width:520px){
  .drow{grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) auto auto 44px; row-gap:4px}
  .dlabel{grid-column:1 / -1}
}


/* three line logo */
.logo{width:230px}
@media (max-width:760px){ .logo{width:184px} }

/* opt out of browser auto dark (Chrome forced dark, Samsung Internet) so the logo and colours never get repainted */
:root{color-scheme:only light}
.site-head, .site-head *{forced-color-adjust:none}
.logo{width:250px; height:auto; display:block; flex:none}
@media (max-width:760px){ .logo{width:200px} }