/* ===========================================================================
   Wash N' Fold Houston
   ---------------------------------------------------------------------------
   DESIGN NOTES, so the next person to touch this knows what was decided.

   COLOUR. The navy is not a new choice — it is the navy already on the live
   site's banner and hero, carried over so returning customers land somewhere
   familiar. Around it: a pale blue-grey ground that reads as steam and clean
   linen rather than "grey", and a restrained brass accent. The brass was
   originally chosen when the business was called Prestige Laundry — navy and
   brass is what that word looks like — and it was kept through the rename to
   Wash N' Fold Houston because it still earns its place: it is the one warm
   thing against all that blue, and it stops a laundry site reading as cold.
   It appears on rules, the promo strip and small marks only — never as a fill.

   TYPE. Fraunces for display, Karla for text. Fraunces has weight and a little
   warmth at large sizes without tipping into a wedding invitation; Karla is
   plain and friendly in a paragraph and holds up small in a form label. The
   pairing does real work: the headings carry the weight and the character,
   the body copy stays unfussy and quick to read.

   THE FOLD. Laundry is the business of crisp edges, so the recurring device is
   a fold: a two-part rule where the second segment steps down and in from the
   first. It opens sections and tops the cards. It is the one ornament, it
   comes from the subject, and it costs nothing.

   ONE THEME, ON PURPOSE. This commits to a light, bright palette rather than
   following the visitor's dark-mode setting. A laundry service selling "clean"
   in a dark grey window is working against itself. Every colour is painted
   explicitly, so the page never borrows a ground from anywhere.
=========================================================================== */

:root{
  /* Colour */
  --navy:#0c2b55;
  --navy-deep:#071c3a;
  --navy-soft:#e7eef7;
  --brass:#a8823c;
  --brass-soft:#f3ecdd;
  --steam:#eef3f8;
  --white:#fff;
  --ink:#14202f;
  --muted:#55647a;
  --line:#d5dee8;

  /* Type scale */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Karla","Segoe UI",Roboto,-apple-system,Arial,sans-serif;
  --step--1:.875rem;
  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:1.6rem;
  --step-3:2.1rem;
  --step-5:clamp(2.6rem,6vw,4.2rem);

  /* Space */
  --gap:1.25rem;
  --band:clamp(3.5rem,8vw,6rem);
  --radius:4px;
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
img{max-width:100%; display:block}

a{color:var(--navy); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--brass)}

:focus-visible{outline:3px solid var(--brass); outline-offset:3px; border-radius:2px}

.wrap{width:min(1120px,100% - 2.5rem); margin-inline:auto}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--navy); color:var(--white); padding:.75rem 1.25rem;
}
.skip:focus{left:.5rem; top:.5rem; color:var(--white)}

/* ── The fold: the one ornament ─────────────────────────────────────── */
.fold{display:block; width:60px; height:6px; margin-bottom:1.25rem}
.fold::before,.fold::after{content:""; display:block; height:2px; background:var(--brass)}
.fold::before{width:60px}
.fold::after{width:34px; margin-top:2px; margin-left:8px; background:var(--navy); opacity:.35}
.fold--light::after{background:var(--white); opacity:.45}

/* ── Promo strip ────────────────────────────────────────────────────── */
.promo-strip{
  background:var(--navy-deep); color:var(--white);
  font-size:var(--step--1); letter-spacing:.02em;
}
.promo-strip .wrap{
  display:flex; align-items:center; justify-content:center;
  gap:1rem; padding:.6rem 0; flex-wrap:wrap; text-align:center;
}
.promo-strip strong{font-weight:700}
.promo-strip .rule{width:1px; height:1.1em; background:rgba(255,255,255,.28)}
.promo-strip a{
  color:var(--white); font-weight:700; text-decoration:none;
  border-bottom:1.5px solid var(--brass); padding-bottom:1px;
}
.promo-strip a:hover{color:var(--brass-soft)}
@media (max-width:560px){ .promo-strip .rule{display:none} }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header{
  background:var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.header-inner{display:flex; align-items:center; gap:1.5rem; padding:.9rem 0}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-size:var(--step-1); font-weight:600;
  color:var(--navy); text-decoration:none; letter-spacing:-.01em; flex:none;
}
.brand svg{width:30px; height:30px; flex:none}
.site-nav{margin-left:auto}
.site-nav ul{display:flex; gap:1.6rem; list-style:none; margin:0; padding:0}
.site-nav a{
  color:var(--ink); text-decoration:none; font-size:var(--step--1);
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--navy); border-bottom-color:var(--brass)}
.site-nav a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--navy)}
.header-cta{
  flex:none; background:var(--navy); color:var(--white); text-decoration:none;
  font-weight:700; font-size:var(--step--1); padding:.6rem 1.1rem;
  border-radius:var(--radius);
}
.header-cta:hover{background:var(--brass); color:var(--white)}
@media (max-width:860px){
  .site-nav{margin-left:0; width:100%; order:3}
  .site-nav ul{gap:1.1rem; flex-wrap:wrap}
  .header-inner{flex-wrap:wrap; gap:.75rem}
  .header-cta{margin-left:auto}
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{background:var(--steam); border-bottom:1px solid var(--line)}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
.hero h1{font-size:var(--step-5); color:var(--navy)}
.hero .tagline{
  font-family:var(--display); font-size:var(--step-2); color:var(--brass);
  margin-top:.4rem; font-weight:500; letter-spacing:.01em;
}
.hero .lede{
  margin-top:1.25rem; max-width:46ch; color:var(--muted); font-size:var(--step-1);
}
.hero-actions{display:flex; gap:.75rem; margin-top:1.75rem; flex-wrap:wrap}

/* The photo, inset like a folded stack: a brass sliver behind a navy sliver
   behind the picture. */
.hero-figure{position:relative; margin:0}
.hero-figure::before,.hero-figure::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
}
.hero-figure::before{transform:translate(14px,14px); background:var(--brass); opacity:.28}
.hero-figure::after{transform:translate(7px,7px); background:var(--navy); opacity:.18}
.hero-figure img{
  position:relative; border-radius:var(--radius);
  width:100%; height:clamp(320px,44vw,470px); object-fit:cover;
  object-position:center 62%;
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:2rem}
  .hero-figure{order:-1}
  .hero-figure img{height:250px}
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  font-size:var(--step-0); padding:.85rem 1.6rem; border-radius:var(--radius);
  background:var(--navy); color:var(--white); border:2px solid var(--navy);
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--navy-deep); border-color:var(--navy-deep); color:var(--white)}
.btn--ghost{background:transparent; color:var(--navy)}
.btn--ghost:hover{background:var(--navy); color:var(--white)}
.btn--light{background:var(--white); color:var(--navy); border-color:var(--white)}
.btn--light:hover{background:var(--brass-soft); border-color:var(--brass-soft); color:var(--navy)}

/* ── Bands ──────────────────────────────────────────────────────────── */
.band{padding-block:var(--band)}
.band--steam{background:var(--steam)}
.band--navy{background:var(--navy); color:var(--white)}
.band--navy h2,.band--navy h3{color:var(--white)}
.band--navy p{color:#c2d1e4}

.section-head{margin-bottom:2.5rem; max-width:var(--measure)}
.section-head h2{font-size:var(--step-3); color:var(--navy)}
.band--navy .section-head h2{color:var(--white)}
.section-head .lede{margin-top:.75rem; color:var(--muted); font-size:var(--step-1)}
.band--navy .section-head .lede{color:#c2d1e4}
.eyebrow{
  font-size:var(--step--1); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); margin-bottom:.5rem;
}

/* ── Service trio ───────────────────────────────────────────────────── */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
  list-style:none; margin:0; padding:0}
@media (max-width:800px){ .trio{grid-template-columns:1fr} }
.trio li{
  background:var(--white); border:1px solid var(--line); border-top:3px solid var(--navy);
  border-radius:var(--radius); padding:1.75rem 1.5rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.trio .mark{width:40px; height:40px; color:var(--navy)}
.trio h3{font-size:var(--step-1); color:var(--navy)}
.trio p{color:var(--muted); font-size:var(--step--1); line-height:1.6}

/* ── Steps ──────────────────────────────────────────────────────────── */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.steps li{background:var(--white); padding:1.5rem; display:flex; gap:1.25rem; align-items:flex-start}
.steps .n{
  font-family:var(--display); font-size:var(--step-2); font-weight:600;
  color:var(--brass); line-height:1; flex:none; width:2ch;
  font-variant-numeric:tabular-nums;
}
.steps h3{font-size:var(--step-1); color:var(--navy); margin-bottom:.2rem}
.steps p{color:var(--muted); font-size:var(--step--1)}

/* ── Prose ──────────────────────────────────────────────────────────── */
.prose{max-width:var(--measure); display:flex; flex-direction:column; gap:1.1rem}
.prose p{color:var(--ink)}

/* ── Split ──────────────────────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:820px){ .split{grid-template-columns:1fr} }
.split img{border-radius:var(--radius); width:100%; height:clamp(280px,36vw,420px); object-fit:cover}

/* The spam trap: pushed off-screen rather than display:none, because the
   better bots skip anything set to display:none and fill in what is left. */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── Rates ──────────────────────────────────────────────────────────── */
/* Three groups side by side, each a heading and a list of tier/price rows.
   The prices are set in tabular figures so the column of dollar amounts lines
   up down the page — with proportional digits a $23 and a $12 sit at visibly
   different widths and the column looks crooked. */
.rates{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:start}
@media (max-width:860px){ .rates{grid-template-columns:1fr} }

.rate-group{background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--navy); border-radius:var(--radius); overflow:hidden}
.rate-group h3{font-size:var(--step-1); color:var(--navy); padding:1.25rem 1.35rem .35rem}
.rate-group .rate-note{font-size:var(--step--1); color:var(--muted);
  padding:0 1.35rem 1rem; margin:0}
.rate-group ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.rate-group li{display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; padding:.8rem 1.35rem; font-size:var(--step-0)}
.rate-group li + li{border-top:1px solid var(--line)}
.rate-group .amt{font-family:var(--display); font-weight:600; color:var(--navy);
  font-variant-numeric:tabular-nums; white-space:nowrap}
/* A free tier is good news, so it is coloured as good news rather than left to
   read as a missing number. */
.rate-group .amt.free{color:var(--brass)}
.rate-group li.best{background:var(--navy-soft)}
.rate-group .tag{display:inline-block; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-left:.5rem;
  vertical-align:.1em}

.rate-footnote{display:flex; gap:.8rem; align-items:flex-start; margin-top:var(--gap);
  background:var(--brass-soft); border:1.5px solid #e3d5b6; border-radius:var(--radius);
  padding:1rem 1.25rem}
.rate-footnote strong{color:var(--navy)}
.rate-footnote svg{width:20px; height:20px; flex:none; color:var(--brass); margin-top:.15rem}

/* ── Checklist ──────────────────────────────────────────────────────── */
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem}
.ticks li{display:flex; gap:.7rem; align-items:flex-start}
.ticks li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:.28em; border-radius:50%;
  background:var(--brass-soft) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23a8823c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.band--navy .ticks li::before{
  background-color:rgba(255,255,255,.14);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── CTA band ───────────────────────────────────────────────────────── */
.cta-band{text-align:center}
.cta-band h2{font-size:var(--step-3)}
.cta-band .fold{margin-inline:auto}
.cta-band p{margin:1rem auto 0; max-width:52ch}
.cta-band .hero-actions{justify-content:center}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer{background:var(--navy-deep); color:#b8c8dd; padding-block:3.5rem 2rem;
  font-size:var(--step--1)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:2rem} }
.site-footer h2{font-family:var(--display); font-size:var(--step-1); color:var(--white);
  margin-bottom:.7rem}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.site-footer a{color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25)}
.site-footer a:hover{color:var(--brass-soft); border-bottom-color:var(--brass)}
.fine{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  color:#8fa3bd; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ── Mobile call bar ────────────────────────────────────────────────── */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  background:var(--navy); border-top:2px solid var(--brass);
}
.callbar a{
  flex:1; text-align:center; padding:.85rem 0; color:var(--white);
  text-decoration:none; font-weight:700; font-size:var(--step--1);
}
.callbar a + a{border-left:1px solid rgba(255,255,255,.18)}
@media (max-width:700px){
  .callbar{display:flex}
  body{padding-bottom:56px}
}

/* ── Booking form ───────────────────────────────────────────────────── */
.book-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(2rem,4vw,3.5rem); align-items:start}
@media (max-width:900px){ .book-grid{grid-template-columns:1fr} }

.form-card{background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--navy); border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.5rem)}

fieldset{border:0; margin:0 0 2.25rem; padding:0}
fieldset:last-of-type{margin-bottom:1.25rem}
legend{padding:0; margin-bottom:1.1rem; font-size:var(--step--1); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brass)}

.row{display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin-bottom:1rem}
.row.one{grid-template-columns:1fr}
@media (max-width:600px){ .row{grid-template-columns:1fr} }

.field{display:flex; flex-direction:column; min-width:0}
.field label{font-weight:600; font-size:var(--step--1); margin-bottom:.4rem; color:var(--ink)}
.field .opt{font-weight:400; color:var(--muted)}
input,select,textarea{
  font:inherit; font-size:var(--step-0); color:var(--ink); background:var(--white);
  border:1.5px solid var(--line); border-radius:var(--radius);
  padding:.7rem .8rem; width:100%; transition:border-color .15s,box-shadow .15s;
}
textarea{resize:vertical; min-height:110px}
select{appearance:none; padding-right:2.2rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2355647a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center}
input:hover,select:hover,textarea:hover{border-color:#aebccd}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(12,43,85,.16)}
.hint{font-size:var(--step--1); color:var(--muted); margin-top:.4rem}
.err{font-size:var(--step--1); color:#b3261e; margin-top:.4rem; display:none; font-weight:600}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#b3261e}
.field.bad .err{display:block}

.chips{display:flex; flex-wrap:wrap; gap:.6rem}
/* THE VISIBLE PILL IS A <label for>, NOT A <span>, and that is the whole
   difference between these working and not. The radio itself is hidden (it is
   a 1px transparent box), so the pill is the only thing anyone can click — and
   a span has no connection to the input, so clicking it did nothing at all.
   Only the option that started checked ever looked selected. A label with a
   matching "for" is what ties the two together. */
.chip{position:relative}
.chip input{position:absolute; opacity:0; width:1px; height:1px}
.chip label{display:block; cursor:pointer; user-select:none; border:1.5px solid var(--line);
  border-radius:999px; padding:.55rem 1rem; font-size:var(--step--1); font-weight:600;
  background:var(--white); margin:0; color:var(--ink);
  transition:border-color .15s,background .15s,color .15s}
.chip label:hover{border-color:#aebccd}
.chip input:checked + label{border-color:var(--navy); background:var(--navy-soft); color:var(--navy)}
/* The focus ring has to land on the LABEL, because the input it belongs to is
   invisible — without this a keyboard user tabbing through the options sees
   nothing move. */
.chip input:focus-visible + label{box-shadow:0 0 0 3px rgba(168,130,60,.55); border-color:var(--navy)}

.promo-check{display:flex; gap:.8rem; align-items:flex-start; background:var(--brass-soft);
  border:1.5px solid #e3d5b6; border-radius:var(--radius); padding:.9rem 1.1rem}
.promo-check input{width:18px; height:18px; margin:.2rem 0 0; flex:none; accent-color:var(--navy)}
.promo-check label{margin:0; font-weight:600; font-size:var(--step-0)}
.promo-check .hint{margin-top:.15rem}

.form-actions{border-top:1px solid var(--line); padding-top:1.5rem}
.form-actions button{font:inherit; font-weight:700; cursor:pointer; border:2px solid var(--navy);
  border-radius:var(--radius); padding:.9rem 1.6rem; width:100%; font-size:var(--step-0);
  background:var(--navy); color:var(--white); transition:background .15s}
.form-actions button:hover{background:var(--navy-deep)}
.form-actions button[disabled]{opacity:.65; cursor:progress}
.form-note{font-size:var(--step--1); color:var(--muted); text-align:center; margin-top:.9rem}

.status{display:none; margin-top:1rem; border-radius:var(--radius); padding:.85rem 1rem;
  font-size:var(--step--1); border:1.5px solid}
.status.show{display:block}
.status.warn{background:#fff8e8; border-color:#e8d093; color:#6b4c00}
.status a{color:inherit; font-weight:700}

.done{display:none; text-align:center; padding:2.5rem 1.5rem}
.done.show{display:block}
.done .tick{width:56px; height:56px; border-radius:50%; margin:0 auto 1.1rem;
  background:#e6f4ec; color:#0f7b3f; display:flex; align-items:center;
  justify-content:center; font-size:1.8rem}
.done h2{font-size:var(--step-2); color:var(--navy); margin-bottom:.6rem}
.done p{color:var(--muted); max-width:44ch; margin-inline:auto}
.recap{text-align:left; background:var(--steam); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.1rem 1.25rem; margin:1.5rem auto 0; max-width:420px}
.recap dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem;
  font-size:var(--step--1)}
.recap dt{color:var(--muted)}
.recap dd{margin:0; font-weight:600; text-align:right}

/* Aside */
.book-aside{display:flex; flex-direction:column; gap:1.25rem; position:sticky; top:5.5rem}
@media (max-width:900px){ .book-aside{position:static} }
.aside-card{background:var(--steam); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem}
.aside-card h2{font-family:var(--display); font-size:var(--step-1); color:var(--navy);
  margin-bottom:.75rem}
.aside-card p,.aside-card li{font-size:var(--step--1); color:var(--muted)}
.aside-card .ticks{gap:.55rem}
.aside-card .ticks li{color:var(--ink)}