/*
  FrontDeskOwl landing — built with the simple-fantastic method.
  Audience:  UK plumbers, heating engineers and trades firms ("Dave")
  Job:       get a firm to email about the UK pilot
  Domain:    frontdeskowl.co.uk (moved from frontdeskowl.novexallc.org, 12 Oct 2026)
  Object:    the WhatsApp conversation, as it happens, ending on the Confirm card
  Concept:   the call → mono receipts (times, system lines)
             the message → the conversation on the phone, the only thing that moves
             the tap → amber, only where a tap happens (Confirm card, the pilot button)
  System:    FrontDeskOwl palette (forest green, warm paper, amber) refined; no formal design system yet
  CSP:       style-src 'self', script-src 'none'. Everything lives here. No inline styles, no scripts.
*/

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/BricolageGrotesque-normal-400_800.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/InstrumentSans-normal-400_700.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSans-italic-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/JetBrainsMono-normal-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/JetBrainsMono-normal-500.woff2) format("woff2")}

:root{
  --surface:#f5f1e8; --surface-raised:#fffdf8; --surface-sunken:#ebe5d7;
  --ink:#15201c; --ink-muted:#58635e; --ink-faint:#8d968f;
  --brand:#164a3f; --on-brand:#f5f1e8; --brand-tint:#e2ece6; --brand-deep:#0f352d;
  --accent:#e39a2e; --on-accent:#1a1407; --accent-tint:#fbeed6;
  --line:#ddd5c4; --line-strong:#b4aa95;
  --bubble-out:#dcf3e4; --bubble-in:#fffdf8; --phone:#0f1613; --phone-bar:#17241f;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:112px;
  --r-sm:6px; --r-md:12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --surface:#0f1613; --surface-raised:#162019; --surface-sunken:#0a100d;
  --ink:#edf0ea; --ink-muted:#a6b0a9; --ink-faint:#6e7872;
  --brand:#8fcdb8; --on-brand:#0b1a15; --brand-tint:#17302a; --brand-deep:#0b1f1a;
  --accent:#f0b55a; --on-accent:#1a1407; --accent-tint:#3a2c14;
  --line:#26322c; --line-strong:#43524a;
  --bubble-out:#1f4a37; --bubble-in:#1b2621; --phone:#060908; --phone-bar:#0d1612;
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --surface:#0f1613; --surface-raised:#162019; --surface-sunken:#0a100d;
  --ink:#edf0ea; --ink-muted:#a6b0a9; --ink-faint:#6e7872;
  --brand:#8fcdb8; --on-brand:#0b1a15; --brand-tint:#17302a; --brand-deep:#0b1f1a;
  --accent:#f0b55a; --on-accent:#1a1407; --accent-tint:#3a2c14;
  --line:#26322c; --line-strong:#43524a;
  --bubble-out:#1f4a37; --bubble-in:#1b2621; --phone:#060908; --phone-bar:#0d1612;
  color-scheme:dark; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand)}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.025em;line-height:1;text-wrap:balance;font-variation-settings:"opsz" 96}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,3vw,40px)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.small{font-size:12px;color:var(--ink-faint)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* buttons: one accent, one outline, same height */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding-inline:22px;border-radius:999px;font:600 16px var(--body);text-decoration:none;border:1px solid transparent;color:var(--on-accent);background:var(--accent);transition:transform .22s cubic-bezier(.2,.7,.2,1),background .22s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--accent) 88%,var(--ink))}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-raised)}
.btn.small{height:40px;padding-inline:16px;font-size:15px}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn:hover{transform:none} }

/* ===== nav ===== */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:var(--s3);height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.owl{width:32px;height:32px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.05;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.byline{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-top:3px}
.nav nav{display:flex;align-items:center;gap:var(--s3);margin-left:auto;font-size:15px}
.nav nav a:not(.btn){color:var(--ink-muted);text-decoration:none}
.nav nav a:not(.btn):hover{color:var(--ink)}
@media (max-width:700px){ .nav nav a:not(.btn){display:none} }
@media (max-width:420px){ .nav nav .btn{display:none} }

/* ===== hero ===== */
.hero{padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,80px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--s3);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
h1{font-size:clamp(42px,6.2vw,88px);font-weight:700;max-width:12ch}
h1 span{color:var(--brand)}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:var(--ink-muted);max-width:30em;margin-top:var(--s3)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.note{font-family:var(--mono);font-size:12.5px;color:var(--ink-muted);margin-top:var(--s3)}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} h1{max-width:none} }

/* the phone: the one object, the one thing that moves */
.phone{position:relative;margin:0 auto;width:min(100%,400px);background:var(--phone);border-radius:40px;padding:12px;box-shadow:0 40px 80px -40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06)}
.screen{background:var(--surface);border-radius:30px;overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.wa-top{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;background:var(--brand-deep);color:#fff}
.wa-top .av{width:34px;height:34px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex:none}
.wa-top .av svg{width:20px;height:20px}
.wa-top .who{display:flex;flex-direction:column;line-height:1.15}
.wa-top .who b{font-size:14.5px;font-weight:600}
.wa-top .who span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.chat{display:flex;flex-direction:column;gap:7px;padding:14px 12px 10px;flex:1;background:var(--surface-sunken)}
.bubble{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14.5px;line-height:1.38}
.bubble.out{background:var(--bubble-out);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.bubble.in{background:var(--bubble-in);color:var(--ink);align-self:flex-end;border-bottom-right-radius:4px;border:1px solid var(--line)}
.bubble.sys{align-self:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-muted);background:transparent;padding:2px 0 6px}
.bubble.card{align-self:stretch;max-width:100%;background:var(--accent-tint);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);font-size:14px}
.bubble.card b{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:4px 11px;font-weight:600;margin-top:8px;margin-right:4px}
.bubble.card i{font-style:normal;color:var(--ink-muted);margin-right:4px}
.bubble.card .when{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);display:block;margin-bottom:4px}
.opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.opts b{font-weight:500;font-size:13px;background:var(--surface-raised);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.caption{font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-align:center;padding:8px 10px 10px;background:var(--surface-sunken)}

/* conversation plays through once every 15 s; off under reduced motion */
.chat .bubble{opacity:0;transform:translateY(6px);animation:15s cubic-bezier(.2,.7,.2,1) infinite}
.chat .b1{animation-name:b1}.chat .b2{animation-name:b2}.chat .b3{animation-name:b3}.chat .b4{animation-name:b4}.chat .b5{animation-name:b5}.chat .b6{animation-name:b6}.chat .b7{animation-name:b7}.chat .b8{animation-name:b8}
@keyframes b1{0%,3%{opacity:0;transform:translateY(6px)}6%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b2{0%,10%{opacity:0;transform:translateY(6px)}13%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b3{0%,19%{opacity:0;transform:translateY(6px)}22%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b4{0%,29%{opacity:0;transform:translateY(6px)}32%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b5{0%,38%{opacity:0;transform:translateY(6px)}41%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b6{0%,47%{opacity:0;transform:translateY(6px)}50%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b7{0%,56%{opacity:0;transform:translateY(6px)}59%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b8{0%,67%{opacity:0;transform:translateY(6px)}70%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .chat .bubble{animation:none;opacity:1;transform:none} }

/* ===== facts strip ===== */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);padding-block:var(--s3)}
.fact{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-muted);min-width:0}
.fact b{color:var(--ink);font-weight:600}
.fact .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);padding-top:3px;flex:none;width:52px}
@media (max-width:760px){ .facts .wrap{grid-template-columns:1fr;gap:var(--s2)} }

/* ===== sections ===== */
section.block{padding-block:clamp(56px,8vw,var(--s6))}
.sec-head{display:grid;gap:var(--s2);max-width:62ch;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2{font-size:clamp(34px,4.6vw,64px);font-weight:700}
.sec-head p{color:var(--ink-muted);font-size:18px;max-width:52ch}

/* how it works: a real sequence, so the numbers mean something */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s3);padding-block:var(--s3);border-bottom:1px solid var(--line);align-items:baseline}
.steps .n{font-family:var(--display);font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--brand);letter-spacing:-.03em;line-height:1}
.steps h3{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.steps p{color:var(--ink-muted);max-width:60ch}
@media (max-width:600px){ .steps li{grid-template-columns:1fr;gap:6px} }

/* your rules: the brand's one coloured band */
.band{background:var(--brand-deep);color:var(--on-brand)}
.band .sec-head h2{color:#fff}
.band .sec-head p{color:color-mix(in srgb,var(--on-brand) 72%,transparent)}
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s5)}
.rules li{padding-top:var(--s2);border-top:1px solid rgba(255,255,255,.18);font-size:16px;color:color-mix(in srgb,var(--on-brand) 75%,transparent);line-height:1.5}
.rules b{display:block;color:#fff;font-weight:600;font-size:18px;margin-bottom:4px;font-family:var(--display);letter-spacing:-.01em}
.rules a{color:#fff}
@media (max-width:760px){ .rules{grid-template-columns:1fr;gap:var(--s2)} }

/* pilot */
.pilot .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s5);align-items:end}
.pilot h2{font-size:clamp(40px,6vw,88px);font-weight:700;max-width:10ch}
.pilot p{color:var(--ink-muted);font-size:18px;max-width:40ch}
.pilot .act{display:grid;gap:var(--s2);justify-items:start}
.pilot .act .label{margin-top:var(--s1)}
.pilot .act a.email{font-family:var(--mono);font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
@media (max-width:860px){ .pilot .wrap{grid-template-columns:1fr} }

/* ===== footer ===== */
.foot{border-top:1px solid var(--line);padding-block:var(--s4) var(--s4);font-size:14px;color:var(--ink-muted)}
.foot .cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s4)}
.foot p{margin:0 0 10px}
.foot b{color:var(--ink)}
.foot a{color:var(--ink-muted)}
.foot .small{margin-top:var(--s3)}
@media (max-width:760px){ .foot .cols{grid-template-columns:1fr} }

/* ===== privacy and 404 ===== */
.prose{max-width:760px;padding-top:40px;padding-bottom:64px}
.prose h1{font-size:clamp(34px,4vw,48px);font-weight:700;margin-bottom:8px}
.prose h2{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:36px 0 10px;line-height:1.2}
.prose p{margin:0 0 12px}
.prose li{margin:6px 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}