/* Thornbury Plumbing & Drain, demo build.

   Blue-led and deliberately serious. People pick a plumber on trust, so this
   leans on the things that signal competence: clear hierarchy, a phone number
   you cannot miss, credentials stated plainly, and enough restraint that it
   does not look like a marketing agency built it.

   Archivo for everything. A grotesque with enough weight at the top end to
   carry a headline, and enough plainness at 400 to read as a trade rather
   than a startup. Latin subset, variable, one file, OFL 1.1.

   Every colour pair was measured. Bright blue #2f80ed only clears AA at large
   sizes, so it is used for gradients, icons and rules, never for body text.

   Shares nothing with the Echelon stylesheet or with the med spa demo. */

@font-face{
  font-family:"Archivo";
  src:url("/demos/fonts/archivo-latin.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  /* optional, not swap. The header, the trust chips and the service grid are
     all fluid rows, so any width change after first paint rewraps something
     and registers as layout shift. With optional the browser either has the
     font before it paints, in which case there is no swap, or it renders the
     fallback and never changes its mind. Paired with a preload in the HTML so
     in practice it is there in time. */
  font-display:optional;
}
/* Metric-adjusted fallback, values taken from Archivo's own font tables
   (878/-210 per 1000upm). size-adjust is measured in the browser below. */
@font-face{
  font-family:"Archivo Fallback";
  src:local("Helvetica Neue"),local("Arial"),local("Liberation Sans");
  ascent-override:87.8%;
  descent-override:21%;
  line-gap-override:0%;
  size-adjust:105%;   /* Measured in the browser. Arial runs 4.5% narrow against
                         Archivo, so the fallback is set slightly larger. */
}

:root{
  /* surfaces */
  --page:#ffffff;
  --ice:#f1f7fd;
  --sky:#e3eefb;
  --navy:#0d2b4e;
  --navy-2:#123a68;

  /* text, measured on white, ice and sky */
  --ink:#15202e;        /* 16.43 on white */
  --ink-2:#3f5166;      /* 8.14 on white */
  --muted:#56697f;      /* 5.64 on white, 4.81 on sky */

  /* accents */
  --blue:#14589e;       /* 7.19 on white, and white on it is 7.19 */
  --bright:#2f80ed;     /* decorative only, 3.87 on white */
  --alert:#b8410f;      /* 5.52 on white, white on it is 5.52 */
  --amber:#f0a202;

  --line:#d8e3ef;
  --line-2:#eaf1f8;
  --sans:"Archivo","Archivo Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1140px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --shadow:0 14px 34px -22px rgba(13,43,78,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;position:relative;z-index:1}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;border-radius:4px;
}
.skip{
  position:absolute;left:12px;top:-60px;z-index:60;
  background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none;
}
.skip:focus{top:12px}
main:focus{outline:none}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--page);position:relative;z-index:5}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 26px;max-width:var(--wrap);margin:0 auto;flex-wrap:wrap}
.logo{min-width:0;display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.14rem;letter-spacing:-.022em;color:var(--ink);text-decoration:none}
.logo-mark{
  width:38px;height:38px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--bright),var(--blue) 60%,var(--navy));
  color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.02em;
  box-shadow:0 6px 16px -8px rgba(20,88,158,.9);
}
.logo-sub{font-weight:500;color:var(--muted);display:block;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;margin-top:2px}
.head-call{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.head-phone{font-weight:800;font-size:1.24rem;color:var(--blue);text-decoration:none;white-space:nowrap;letter-spacing:-.02em}
.head-phone small{display:block;font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:1px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue);color:#fff;text-decoration:none;
  font-weight:700;font-size:.95rem;padding:14px 24px;border-radius:8px;border:0;cursor:pointer;
  font-family:inherit;box-shadow:0 10px 22px -14px rgba(20,88,158,.95);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.btn:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:0 14px 26px -14px rgba(13,43,78,.95)}
.btn-alert{background:var(--alert);box-shadow:0 10px 22px -14px rgba(184,65,15,.95)}
.btn-alert:hover{background:#93340c}
.btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--ice);color:var(--navy);transform:none}
.btn[disabled]{background:#94a6bb;box-shadow:none;cursor:not-allowed;transform:none}

/* emergency strip, navy so blue leads and the warm colour is only a highlight */
.strip{background:var(--navy);color:#dce9f7;font-size:.94rem}
.strip .wrap{padding:12px 26px;display:flex;gap:12px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:4px 12px;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}

/* hero */
.hero{
  position:relative;overflow:hidden;padding:74px 0 66px;
  background:linear-gradient(180deg,var(--sky) 0%,var(--ice) 46%,var(--page) 100%);
  border-bottom:1px solid var(--line);
}
/* A single soft light instead of the grid that used to sit here. */
.hero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;pointer-events:none;
  background:radial-gradient(52% 46% at 22% 28%,rgba(47,128,237,.16),transparent 70%);
}
.hero h1{font-size:clamp(2.15rem,4.8vw,3.4rem);line-height:1.1;letter-spacing:-.035em;margin:0 0 18px;max-width:660px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:1.14rem;color:var(--ink-2);margin:0 0 28px;max-width:580px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 0;padding:0;list-style:none}
.trust li{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);
  border:1px solid var(--line);border-radius:8px;padding:9px 14px;
  font-size:.85rem;font-weight:600;color:var(--ink-2);
}
.trust svg{flex:0 0 auto;color:var(--blue)}

/* Illustration.

   Hand-drawn SVG, not photography. A fictional plumbing company cannot show
   real jobs, and stock photos of somebody else's bathroom presented as our
   work is exactly the thing this repo refuses to do elsewhere. Blueprint style
   line diagrams read as competence for a trade anyway, and they cost bytes
   rather than requests. */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero-art,.work-art{position:relative}
.hero-art svg,.work-art svg{width:100%;height:auto;display:block}
.hero-art{
  background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:16px;
  padding:14px;box-shadow:var(--shadow);
}

.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.work-card{
  margin:0;background:var(--page);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.work-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b9cfe6}
.work-art{background:linear-gradient(160deg,var(--ice),var(--sky));border-bottom:1px solid var(--line);padding:18px 22px}
.work-card figcaption{padding:22px 24px 24px}
.work-card h3{margin:0 0 7px;font-size:1.06rem;font-weight:750;letter-spacing:-.015em}
.work-card p{margin:0;color:var(--muted);font-size:.94rem}

/* sections */
section{padding:64px 0;position:relative}
.band-ice{background:var(--ice);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:clamp(1.55rem,2.9vw,2.15rem);letter-spacing:-.028em;margin:0 0 10px;font-weight:800}
.lede{color:var(--ink-2);margin:0 0 34px;max-width:62ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 12px;
}
.eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--bright),var(--blue))}

/* services */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc-card{
  background:var(--page);border:1px solid var(--line);border-radius:14px;padding:26px 24px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b9cfe6}
.ico{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(150deg,var(--sky),#cfe2f7);color:var(--blue);
}
.svc-card h3{margin:0 0 7px;font-size:1.06rem;font-weight:750;letter-spacing:-.015em}
.svc-card p{margin:0;color:var(--muted);font-size:.94rem}

/* split panels */
.cols{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.panel{background:var(--page);border:1px solid var(--line);border-radius:14px;padding:26px}
.panel h3{margin:0 0 14px;font-size:1.05rem;font-weight:750}
.area{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px 18px}
.area li{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:.97rem}
.area li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bright);flex:0 0 auto}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.hours li:last-child{border-bottom:0}
.hours span:first-child{color:var(--ink-2)}
.hours span:last-child{font-weight:700}
.hours li.open span:last-child{color:var(--blue)}

/* process */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{background:var(--page);border:1px solid var(--line);border-radius:14px;padding:26px 24px;counter-increment:s;position:relative}
.step::before{
  content:counter(s);display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;margin-bottom:14px;
  background:linear-gradient(150deg,var(--bright),var(--blue));color:#fff;
  font-size:.88rem;font-weight:800;
}
.step h3{margin:0 0 7px;font-size:1.04rem;font-weight:750}
.step p{margin:0;color:var(--muted);font-size:.94rem}

/* form */
.form-card{background:var(--page);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
label{font-weight:700;font-size:.82rem;color:var(--ink-2)}
input,textarea,select{
  font-family:inherit;font-size:1rem;padding:12px 13px;
  border:1px solid #c3d3e4;border-radius:8px;background:var(--page);color:var(--ink);
}
input:focus,textarea:focus,select:focus{border-color:var(--blue)}
textarea{min-height:104px;resize:vertical}
.req{color:var(--alert)}
.form-note{
  grid-column:1 / -1;background:var(--ice);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;font-size:.9rem;color:var(--ink-2);margin:0;
}

/* footer */
.site-foot{background:var(--navy);color:#c6d9ee;padding:44px 0 34px;font-size:.93rem}
.site-foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.site-foot h3{color:#fff;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:7px}
.foot-legal{border-top:1px solid #1e4471;margin-top:30px;padding-top:20px;color:#94b3d4;font-size:.86rem}

@media (max-width:960px){
  .svc,.steps,.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .cols{grid-template-columns:1fr;gap:24px}
  .foot-grid{grid-template-columns:1fr;gap:22px}
  .form-grid{grid-template-columns:1fr}
  .hero{padding:48px 0 44px}
  section{padding:46px 0}
  .form-card{padding:22px}
}
@media (max-width:620px){
  .svc,.steps,.work-grid{grid-template-columns:1fr}
  .area{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .btn:hover,.svc-card:hover,.work-card:hover{transform:none}
}