/* iClean Xpress — concept 1, "Kerbside". Brand flagship direction.
   Its OWN design system. Nothing here is shared with concepts 2 or 3 except the
   dock and chat STRUCTURE, which live in /iclean-xpress-media/ and are skinned
   from the --dk-* and --scq-* tokens set at the bottom of this file.

   The palette is a PROPOSAL, not extracted brand. iClean Xpress has no logo and
   no brand colours: their live site runs the stock GoDaddy black and white
   theme, so there was nothing to sample. Deep water blue was chosen because the
   business washes cars, and it is presented on the picker as a decision to make
   rather than as their colours. See data/research/iclean-xpress.md.

   Type: Archivo Black loud, Public Sans quiet. Deliberately not Inter, Geist or
   Space Grotesk, per the SDT anti pattern reference of 19 Aug. */
:root{
  --ink:#0A1622; --deep:#060E17; --panel:#0F1E2C;
  --water:#37A8E0; --water-lo:#1B7FB4; --mist:#EAF2F8;
  --muted:#93A2B2; --quiet:#6F8093;
  --line:rgba(234,242,248,.13); --line-s:rgba(234,242,248,.07);
  --f-loud:'Archivo Black',system-ui,sans-serif;
  --f-quiet:'Public Sans',system-ui,-apple-system,sans-serif;
  --rad:6px; --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--mist);
  font-family:var(--f-quiet);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-loud);font-weight:400;line-height:1.02;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--water);margin:0 0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------- scroll progress */
.prog{position:fixed;left:0;top:0;height:2px;width:0;z-index:90;background:var(--water);
  box-shadow:0 0 12px rgba(55,168,224,.6);transition:width .1s linear}

/* ------------------------------------------------------------------ header */
.hd{position:fixed;left:0;right:0;top:0;z-index:80;display:flex;align-items:center;gap:18px;
  padding:14px 0;transition:background .3s ease,border-color .3s ease,padding .3s ease;
  border-bottom:1px solid transparent}
.hd.stuck{background:rgba(6,14,23,.9);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line-s);padding:9px 0}
.hd-in{display:flex;align-items:center;gap:18px;width:min(100% - 40px,var(--wrap));margin-inline:auto}
.hd-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-height:46px;flex:0 0 auto}
.hd-mark{display:flex;align-items:center;justify-content:center;/* flex, NOT grid: the mark is a text node plus an <i>, and a grid container
     makes those two separate grid items that stack vertically, so iX rendered
     as i above X. Flex lays them in a row. */
  width:38px;height:38px;border-radius:5px;flex:0 0 auto;
  background:linear-gradient(150deg,#12293B,#0A1622);border:1px solid var(--line);
  font-family:var(--f-loud);font-size:17px;letter-spacing:-.04em;color:var(--mist);white-space:nowrap;line-height:1}
.hd-mark i{font-style:normal;color:var(--water)}
.hd-name{display:grid;line-height:1.1}
.hd-name b{font-family:var(--f-loud);font-size:16px;letter-spacing:-.01em}
.hd-name span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hd-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.hd-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;text-decoration:none;
  font-size:15px;font-weight:600;color:var(--muted);border-radius:var(--rad);transition:color .2s ease}
.hd-nav a:hover{color:var(--mist)}
.hd-call{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 20px;flex:0 0 auto;
  background:var(--water);color:#06121D;text-decoration:none;border-radius:var(--rad);
  font-size:15px;font-weight:700;letter-spacing:.01em;transition:filter .2s ease,transform .2s ease}
.hd-call:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hd-call svg{width:17px;height:17px}
.hd-burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;margin-left:auto;
  background:transparent;border:1px solid var(--line);border-radius:var(--rad);color:var(--mist);cursor:pointer}
.hd-burger svg{width:21px;height:21px}

/* mobile drawer, carries the full nav set the dock cannot hold */
.drw{position:fixed;inset:0;z-index:95;display:none;background:rgba(6,14,23,.97)}
.drw[data-on]{display:block}
.drw-in{display:flex;flex-direction:column;gap:6px;padding:88px 20px 32px;height:100%;overflow-y:auto}
.drw a{display:flex;align-items:center;min-height:56px;padding:0 16px;text-decoration:none;
  font-family:var(--f-loud);font-size:22px;color:var(--mist);border-bottom:1px solid var(--line-s)}
.drw .drw-call{margin-top:18px;background:var(--water);color:#06121D;border-radius:var(--rad);border:0;justify-content:center}
.drw-x{position:absolute;right:20px;top:20px;width:46px;height:46px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--rad);color:var(--mist);cursor:pointer}
.drw-x svg{width:22px;height:22px}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:100svh;padding:132px 0 76px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(6,14,23,.94) 0%,rgba(6,14,23,.86) 38%,rgba(6,14,23,.5) 68%,rgba(6,14,23,.72) 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:56px;align-items:center}
.hero-copy{max-width:620px}
.hero h1{font-size:clamp(42px,6.4vw,86px);letter-spacing:-.035em}
.hero h1 .w{display:inline-block;will-change:transform,opacity}
.hero h1 em{font-style:normal;color:var(--water)}
.hero-sub{margin:26px 0 0;font-size:clamp(17px,1.9vw,20px);line-height:1.6;color:#C6D5E1;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;
  border:0;border-radius:var(--rad);cursor:pointer;text-decoration:none;
  font-family:var(--f-quiet);font-size:16px;font-weight:700;letter-spacing:.01em;
  transition:transform .2s ease,filter .2s ease,background .2s ease}
.btn-p{background:var(--water);color:#06121D}
.btn-p:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-g{background:rgba(234,242,248,.06);color:var(--mist);border:1px solid var(--line)}
.btn-g:hover{background:rgba(234,242,248,.11);transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
/* the hero quiz mounts here. It needs a REAL min-height at EVERY viewport or
   hero-quiz.js's findRightVisual() skips it (anything under 150px tall) and
   hijacks the next large content block instead. Never display:none it. */
.hero-fig{min-height:470px;border-radius:var(--rad)}
.hero-fig.is-empty{min-height:0;display:none}
.hero-meta{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:46px}
.hero-meta b{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:100px;
  background:rgba(234,242,248,.05);border:1px solid var(--line-s);
  font-size:13.5px;font-weight:600;color:#BACADA;letter-spacing:.01em}
.hero-meta b i{width:6px;height:6px;border-radius:50%;background:var(--water);flex:0 0 auto}

/* ---------------------------------------------------------------- sections */
.sec{padding:104px 0;position:relative}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head h2{font-size:clamp(32px,4.4vw,54px)}
.sec-head p{margin:20px 0 0;font-size:18px;color:var(--muted);max-width:60ch}
.rule{height:1px;background:var(--line-s);border:0;margin:0}

/* what we do. An editorial numbered list, deliberately NOT three cards in a
   row, which the SDT anti pattern reference names as a vibecoded tell. */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:start}
.svc-list{display:grid;gap:0;counter-reset:s}
.svc-i{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 22px;padding:30px 0;
  border-top:1px solid var(--line-s);align-items:start}
.svc-i:last-child{border-bottom:1px solid var(--line-s)}
.svc-i::before{counter-increment:s;content:counter(s,decimal-leading-zero);grid-row:1 / span 2;
  font-family:var(--f-loud);font-size:15px;color:var(--water);letter-spacing:.04em;padding-top:5px}
.svc-i h3{grid-column:2;font-size:23px;letter-spacing:-.01em}
.svc-i p{grid-column:2;margin:9px 0 0;color:var(--muted);font-size:16.5px}
.svc-fig{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line-s)}
.svc-fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

/* the draft pill: anything on this page that is a placeholder rather than a
   researched fact carries one, so nothing reads as a claim */
.draft{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:100px;
  background:rgba(240,180,60,.11);border:1px solid rgba(240,180,60,.32);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#F0B43C}
.draft i{width:6px;height:6px;border-radius:50%;background:#F0B43C;flex:0 0 auto}

/* area */
.area{background:var(--deep)}
.area-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.area-fig{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line-s)}
.area-fig img{width:100%;aspect-ratio:16/11;object-fit:cover}
.subs{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.subs li{padding:8px 14px;border-radius:100px;background:rgba(234,242,248,.05);
  border:1px solid var(--line-s);font-size:14.5px;font-weight:500;color:#BACADA}
.subs li.pri{background:rgba(55,168,224,.14);border-color:rgba(55,168,224,.36);color:#9FD6F2;font-weight:700}

/* how it works, a vertical timeline rather than a card row */
.step{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);gap:0 26px;
  padding:0 0 44px;align-items:start}
.step:last-child{padding-bottom:0}
.step::after{content:"";position:absolute;left:23px;top:52px;bottom:6px;width:1px;background:var(--line)}
.step:last-child::after{display:none}
.step-n{grid-row:1 / span 2;display:grid;place-items:center;width:47px;height:47px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);font-family:var(--f-loud);font-size:16px;color:var(--water);position:relative;z-index:2}
.step h3{grid-column:2;font-size:22px;padding-top:9px}
.step p{grid-column:2;margin:9px 0 0;color:var(--muted);font-size:16.5px;max-width:56ch}

/* the honesty panel. This is the strongest thing on the page and it is real. */
.honest{background:linear-gradient(168deg,#0D2031,var(--deep));border:1px solid var(--line);
  border-radius:var(--rad);padding:clamp(28px,4vw,54px)}
.honest h2{font-size:clamp(27px,3.4vw,40px)}
.honest-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:38px;margin-top:38px}
.honest-cols h3{font-size:14px;letter-spacing:.13em;text-transform:uppercase;font-family:var(--f-quiet);font-weight:800}
.honest-cols ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.honest-cols li{position:relative;padding-left:26px;font-size:16px;color:#C6D5E1;line-height:1.55}
.honest-cols li::before{position:absolute;left:0;top:.05em;font-size:15px;font-weight:800}
.is-real li::before{content:"\2713";color:var(--water)}
.is-blank li::before{content:"\2022";color:#F0B43C;font-size:20px;top:-.15em}

/* contact */
.ct{background:var(--deep)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.ct-call{display:inline-flex;align-items:center;gap:14px;margin-top:8px;padding:18px 24px;text-decoration:none;
  background:rgba(55,168,224,.1);border:1px solid rgba(55,168,224,.34);border-radius:var(--rad);min-height:56px}
.ct-call span{display:grid;line-height:1.25}
.ct-call small{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--water);font-weight:700}
.ct-call b{font-family:var(--f-loud);font-size:26px;letter-spacing:-.01em}
.ct-call svg{width:24px;height:24px;color:var(--water);flex:0 0 auto}

/* the enquiry form, liquid glass, with the SDT floating label pattern and a
   56px minimum field height (Revolut reference, 15 Aug) */
.frm{position:relative;background:linear-gradient(165deg,rgba(234,242,248,.1),rgba(234,242,248,.03));
  backdrop-filter:blur(30px) saturate(165%);-webkit-backdrop-filter:blur(30px) saturate(165%);
  border:1px solid var(--line);border-radius:var(--rad);padding:clamp(22px,3vw,34px);overflow:hidden}
.frm::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.frm::after{content:"";position:absolute;left:-20%;top:-40%;width:80%;height:90%;pointer-events:none;
  background:radial-gradient(60% 60% at 40% 40%,rgba(255,255,255,.13),transparent 70%)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .frm{background:#122536}
}
.frm-brand{position:relative;z-index:2;display:flex;align-items:center;gap:12px;justify-content:center;
  padding:0 0 20px;margin-bottom:22px;border-bottom:1px solid var(--line-s)}
.frm-brand .hd-mark{width:52px;height:52px;font-size:23px}
.frm-brand b{font-family:var(--f-loud);font-size:20px}
.frm h3{position:relative;z-index:2;font-size:24px;margin-bottom:6px}
.frm .lead{position:relative;z-index:2;color:var(--muted);font-size:15.5px;margin-bottom:22px}
.fld{position:relative;z-index:2;margin-bottom:13px}
.fld input,.fld select,.fld textarea{width:100%;min-height:56px;padding:22px 15px 8px;
  background:rgba(6,14,23,.5);border:1px solid var(--line);border-radius:var(--rad);
  color:var(--mist);font-family:var(--f-quiet);font-size:16px;font-weight:500;
  transition:border-color .2s ease,background .2s ease}
.fld textarea{min-height:104px;padding-top:26px;resize:vertical;line-height:1.5}
.fld select{padding-top:21px;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A2B2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:19px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--water);background:rgba(6,14,23,.75)}
.fld label{position:absolute;left:16px;top:18px;pointer-events:none;color:var(--quiet);
  font-size:16px;font-weight:500;transition:transform .18s ease,color .18s ease,font-size .18s ease;transform-origin:left top}
.fld input:focus + label,.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,.fld textarea:not(:placeholder-shown) + label,
.fld select:focus + label,.fld select.has + label{transform:translateY(-11px);font-size:12.5px;color:var(--water);font-weight:700;letter-spacing:.04em}
.frm .btn{width:100%;margin-top:7px}
.frm-note{position:relative;z-index:2;margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--quiet)}
.ok{display:none;position:relative;z-index:2;gap:13px;align-items:flex-start;padding:17px;margin-top:15px;
  background:rgba(55,168,224,.11);border:1px solid rgba(55,168,224,.35);border-radius:var(--rad);font-size:15px}
/* [hidden] wins over a class rule, so the success panel is toggled by data-on
   and hidden is removed with it, never left on */
.ok[data-on]{display:flex}
.ok svg{width:21px;height:21px;color:var(--water);flex:0 0 auto;margin-top:2px}

/* ------------------------------------------------------------------ footer */
.ft{background:var(--deep);border-top:1px solid var(--line-s);padding:64px 0 30px}
.ft-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:40px;padding-bottom:38px}
.ft p{color:var(--muted);font-size:15.5px;max-width:44ch}
.ft h4{font-family:var(--f-quiet);font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mist);margin:0 0 15px}
.ft ul{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.ft ul a,.ft ul span{display:inline-flex;align-items:center;min-height:34px;color:var(--muted);
  text-decoration:none;font-size:15.5px}
.ft ul a:hover{color:var(--mist)}
.ft-mock{padding:20px 0 26px;border-top:1px solid var(--line-s);color:var(--quiet);font-size:13.5px;line-height:1.62;max-width:96ch}
.ft-bot{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  padding-top:22px;border-top:1px solid var(--line-s);color:var(--quiet);font-size:13.5px}
.ft-by{position:relative;display:inline-flex;align-items:center;min-height:34px;color:var(--quiet);text-decoration:none}
.ft-by b{color:var(--water);font-weight:700;margin-left:.32em}
.ft-by::after{content:"";position:absolute;inset:-6px -8px}

/* ------------------------------------------------------------------ motion */
.rv{opacity:0;transform:translateY(22px);filter:blur(7px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1),filter .8s ease}
.rv.in{opacity:1;transform:none;filter:none}
html.noanim .rv{opacity:1;transform:none;filter:none;transition:none}
html.noanim .hero h1 .w{opacity:1;transform:none}

/* ------------------------------------------- shared dock + chat, tokens only */
:root{
  --dk-sheet:rgba(10,22,34,.9); --dk-line:var(--line); --dk-ink:#93A2B2; --dk-ink-on:var(--mist);
  --dk-accent:var(--water); --dk-accent-ink:#06121D; --dk-pill:rgba(234,242,248,.09);
  --dk-radius:var(--rad); --dk-font:var(--f-quiet);
  --scq-sheet:#0C1926; --scq-ink:var(--mist); --scq-muted:var(--muted); --scq-line:var(--line);
  --scq-bot:rgba(234,242,248,.06); --scq-you:var(--water); --scq-you-ink:#06121D;
  --scq-accent:var(--water); --scq-accent-ink:#06121D; --scq-radius:var(--rad);
  --scq-font-display:var(--f-loud); --scq-font-body:var(--f-quiet);
}

/* ================================================== 1024 and under */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-fig{min-height:430px}
  .svc,.area-grid,.ct-grid{grid-template-columns:1fr;gap:40px}
  .ft-top{grid-template-columns:1fr 1fr}
  .hd-nav{display:none}
  .hd-burger{display:inline-flex}
  .hd-call{display:none}
}
/* ======================================================= phone, 640 and under */
@media(max-width:640px){
  body{font-size:16.5px}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:36px}
  .hero{min-height:auto;padding:112px 0 56px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(6,14,23,.9) 0%,rgba(6,14,23,.8) 45%,rgba(6,14,23,.95) 100%)}
  .hero-sub{font-size:16.5px;margin-top:20px}
  .hero-cta{margin-top:26px}
  .hero-cta .btn{width:100%}
  .hero-meta{margin-top:32px;gap:8px}
  .hero-fig{min-height:400px}
  .svc-i{grid-template-columns:44px minmax(0,1fr);gap:0 14px;padding:24px 0}
  .step{grid-template-columns:56px minmax(0,1fr);gap:0 16px}
  .step::after{left:23px}
  .honest-cols{gap:28px}
  .ft-top{grid-template-columns:1fr;gap:30px}
  .ft-bot{gap:10px}
  .subs li{font-size:14px}
}
/* one column below 420 so two boxed items never force their text wider than
   the box, which is the third of the three sideways scroll causes */
@media(max-width:420px){
  .honest{padding:22px}
  .ct-call b{font-size:23px}
}