/* Top Hat Transportation — Easton Automations
   Dark ground, gold from the client's own logo, cool blue from his own vehicle. */

:root{
  --nav-h: 116px;
  --ground:#14171a;
  --ground-2:#191d21;
  --gold:#e3b04a;
  --gold-soft:rgba(227,176,74,.5);
  --bay:#8fb3c9;                 /* his Bronco's blue */
  --cream:#f3f1ed;
  --cream-dim:#b9bfc4;
  --cream-faint:#8b9298;
  --edge:rgba(227,176,74,.22);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--cream);
  font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is load-bearing — without it a width-constrained img keeps the
   intrinsic height from its HTML height attribute and renders squashed. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* film grain over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;
  background:rgba(20,23,26,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(227,176,74,.16);
}
/* The bar is full bleed but its CONTENTS share the page's 1180px column, so the logo lines
   up with the hero text and the CTA with the right edge of the content. Without this the
   logo sat 329px left of the hero on a 1920px screen, and worse on anything wider. */
.navin{
  max-width:1180px;height:100%;margin:0 auto;padding:0 34px;
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;flex:0 0 auto}
.brand img{height:46px;width:auto}
.brand .wm{font-family:var(--serif);font-size:31px;line-height:1.05;letter-spacing:.4px}
.brand .wm b{display:block;font-size:12px;font-family:var(--sans);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:2px}
.nav .links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav .links a{font-size:18px;text-decoration:none;color:var(--cream-dim);white-space:nowrap}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--gold);
  text-shadow:0 0 18px rgba(227,176,74,.5)}
.navphone{font-size:18.5px;font-weight:700;text-decoration:none;color:var(--cream);white-space:nowrap}

/* Round-the-clock is his actual edge against an incumbent who does not answer. */
.hours247{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:26px;
  padding:14px 20px;border-radius:8px;border:1px solid var(--edge);
  background:linear-gradient(120deg,rgba(227,176,74,.12),rgba(255,255,255,.02));
  backdrop-filter:blur(6px)}
.hours247 b{font-size:16.5px;color:var(--gold);text-shadow:0 0 18px rgba(227,176,74,.4)}
.hours247 span{font-size:16px;color:var(--cream-dim)}
.hours247::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(227,176,74,.6);animation:pulse247 2.4s ease-out infinite;flex:0 0 auto}
@keyframes pulse247{0%{box-shadow:0 0 0 0 rgba(227,176,74,.55)}
  70%{box-shadow:0 0 0 11px rgba(227,176,74,0)}100%{box-shadow:0 0 0 0 rgba(227,176,74,0)}}
@media(prefers-reduced-motion:reduce){.hours247::before{animation:none}}
.navcta{
  font-size:15.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:16px 32px;border-radius:6px;text-decoration:none;white-space:nowrap;
  background:var(--gold);color:#20180a;
  box-shadow:0 6px 26px rgba(227,176,74,.3);
}
.navcta:hover{box-shadow:0 8px 34px rgba(227,176,74,.5)}
.burger{display:none;width:52px;height:52px;margin-left:auto;background:none;border:0;
  color:var(--cream);cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:27px;height:27px}
.drawer{display:none}

/* ---------- shared band mechanics ---------- */
.band{position:relative;padding:96px 0;overflow:hidden}
.band>.in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 34px}
.band::before,.band::after{
  content:"";position:absolute;width:760px;height:760px;border-radius:50%;
  filter:blur(58px);opacity:.4;pointer-events:none;z-index:0;
}
.band::before{background:radial-gradient(circle,rgba(227,176,74,.34),transparent 66%);
  top:-320px;left:-240px}
.band::after{background:radial-gradient(circle,rgba(143,179,201,.26),transparent 66%);
  bottom:-360px;right:-260px}
.band.flip::before{left:auto;right:-240px}
.band.flip::after{right:auto;left:-260px}
.band.alt{background:var(--ground-2)}

.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);text-shadow:0 0 20px rgba(227,176,74,.45);margin-bottom:16px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.2px;line-height:1.14}
h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:16px}
h3{font-size:1.5rem;margin-bottom:9px}
.lede{font-size:19px;color:var(--cream-dim);max-width:62ch;line-height:1.6}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{
  display:inline-block;font-size:16.5px;font-weight:700;letter-spacing:.04em;
  padding:19px 36px;border-radius:6px;text-decoration:none;text-align:center;
  background:var(--gold);color:#20180a;box-shadow:0 8px 32px rgba(227,176,74,.28);
  transition:box-shadow .2s,transform .2s;
}
.btn:hover{box-shadow:0 12px 44px rgba(227,176,74,.5);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--edge);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold-soft);box-shadow:0 0 30px rgba(227,176,74,.2)}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;
  padding:calc(var(--nav-h) + 60px) 0 90px;position:relative;overflow:hidden;
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0}
.hero::before{width:920px;height:920px;top:-300px;right:-220px;
  background:radial-gradient(circle,rgba(227,176,74,.3),transparent 65%)}
.hero::after{width:820px;height:820px;bottom:-380px;left:-240px;
  background:radial-gradient(circle,rgba(143,179,201,.24),transparent 65%)}
.hero .in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 34px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.1rem);line-height:1.08}
.hero h1 em{font-style:normal;color:var(--gold);text-shadow:0 0 44px rgba(227,176,74,.4)}
.hero .lede{margin-top:22px;font-size:20px}
.hero .mark{justify-self:center}
.hero .mark img{width:min(330px,74vw);filter:drop-shadow(0 22px 60px rgba(0,0,0,.6))
  drop-shadow(0 0 44px rgba(227,176,74,.22))}
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;
  font-size:15.5px;color:var(--cream-faint)}
.trust span{display:flex;align-items:center;gap:8px}
.trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px var(--gold)}

/* ---------- glass cards ---------- */
/* Explicit columns, not auto-fit. With exactly 4 cards, auto-fit lands on 3+1 at
   common widths and orphans the last one. */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
@media(max-width:1180px){.cards{grid-template-columns:1fr 1fr}}
/* and one column on phones. Without this the 2-col rule holds all the way down to
   320px and the cards bleed past the edge — invisible to a scrollWidth audit because
   body{overflow-x:hidden} clamps it. Caught by _probe2.html. */
@media(max-width:640px){.cards{grid-template-columns:1fr}}
/* forced two-up, but never below 640px — a hard 1fr 1fr at 320px bleeds past the edge */
.cards.two{grid-template-columns:1fr 1fr}
@media(max-width:640px){.cards.two{grid-template-columns:1fr}}
.card{
  background:linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--edge);border-radius:11px;padding:32px 28px;
  backdrop-filter:blur(6px);box-shadow:0 22px 54px rgba(0,0,0,.42);
  transition:border-color .22s,box-shadow .22s;
}
.card:hover{border-color:rgba(227,176,74,.42);box-shadow:0 22px 60px rgba(0,0,0,.5),
  0 0 40px rgba(227,176,74,.16)}
.card p{color:var(--cream-dim);font-size:16.5px}
.card .ic{width:34px;height:3px;border-radius:2px;margin-bottom:18px;
  background:linear-gradient(90deg,var(--gold),rgba(227,176,74,.15));
  box-shadow:0 0 14px rgba(227,176,74,.45)}

/* ---------- rate table (larger scale, this page decides bookings) ---------- */
.rates{margin-top:40px;border:1px solid var(--edge);border-radius:11px;overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(6px)}
.rates .grp{padding:22px 30px 8px;border-top:1px solid rgba(227,176,74,.14)}
.rates .grp:first-child{border-top:0}
.rates .grp h3{font-size:clamp(1.85rem,3.4vw,2.5rem);margin-bottom:4px}
.rates .grp .note{font-size:17px;color:var(--cream-faint)}
.rate{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:28px 30px;border-top:1px solid rgba(255,255,255,.07)}
.rate .l{flex:1 1 auto}
.rate .n{font-size:1.6rem;font-family:var(--serif);line-height:1.2}
.rate .d{font-size:16.5px;color:var(--cream-dim);margin-top:5px}
.rate .p{font-size:1.6rem;font-family:var(--serif);color:var(--gold);white-space:nowrap;
  text-shadow:0 0 26px rgba(227,176,74,.35)}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--edge);
  padding:4px 9px;border-radius:20px;margin-left:9px;vertical-align:2px}

/* ---------- photo slot (honest placeholder) ---------- */
.slot{
  border:1.5px dashed rgba(227,176,74,.4);border-radius:11px;
  background:linear-gradient(158deg,rgba(227,176,74,.06),rgba(255,255,255,.015));
  padding:44px 28px;text-align:center;color:var(--cream-faint);
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px;
}
.slot b{display:block;color:var(--gold);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:11px}
.slot span{font-size:16.5px;max-width:34ch;line-height:1.55}

/* ---------- form ---------- */
.formwrap{max-width:620px;margin-top:36px}
.field{margin-bottom:20px}
.field label{display:block;font-size:14px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.field input,.field textarea{
  width:100%;font:17px var(--sans);color:var(--cream);
  background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:7px;
  padding:17px 18px;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-soft);
  box-shadow:0 0 0 3px rgba(227,176,74,.15)}
.field textarea{min-height:120px;resize:vertical}
.formnote{font-size:15.5px;color:var(--cream-faint);margin-top:16px}
.thanks{border:1px solid var(--gold-soft);border-radius:11px;padding:34px 30px;
  background:linear-gradient(158deg,rgba(227,176,74,.12),rgba(255,255,255,.02))}
.thanks h3{color:var(--gold)}

/* ---------- footer ---------- */
.ft{background:#0f1214;border-top:1px solid rgba(227,176,74,.16);padding:56px 34px 40px}
.ft .in{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.3fr 1fr 1fr;gap:38px}
.ft h4{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:15px;font-weight:700}
.ft a{display:block;color:var(--cream-dim);text-decoration:none;font-size:16.5px;margin-bottom:9px}
.ft a:hover{color:var(--gold)}
.ft p{color:var(--cream-faint);font-size:16px;margin-bottom:9px}
.ft .bot{max-width:1180px;margin:38px auto 0;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.08);font-size:15px;color:var(--cream-faint);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
.ft .bot a{display:inline;color:var(--cream-faint)}

/* ---------- inner page banner ---------- */
.banner{margin-top:var(--nav-h);padding:72px 0 8px;position:relative;overflow:hidden}
.banner::before{content:"";position:absolute;width:820px;height:820px;border-radius:50%;
  filter:blur(60px);top:-380px;right:-200px;
  background:radial-gradient(circle,rgba(227,176,74,.26),transparent 65%);pointer-events:none}
.banner .in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 34px}
.banner h1{font-size:clamp(2.3rem,4.6vw,3.4rem)}
.banner .lede{margin-top:16px}

/* prose for the long-form landing page */
.prose{max-width:74ch}
.prose p{color:var(--cream-dim);font-size:17.5px;margin-bottom:18px}
.prose h3{margin-top:36px;color:var(--cream)}
.prose ul{list-style:none;margin:6px 0 20px}
.prose li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--cream-dim);font-size:17.5px}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(227,176,74,.7)}
.prose strong{color:var(--cream)}

/* ---------- responsive ---------- */
@media(max-width:1400px){
  .nav .links{display:none}
  .burger{display:flex}
  .nav .navphone,.nav .navcta{display:none}
  .drawer{
    display:block;position:fixed;inset:var(--nav-h) 0 auto 0;z-index:49;
    background:rgba(16,19,22,.98);backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(227,176,74,.2);
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;padding:26px 34px 34px;
    transform:translateY(-14px);opacity:0;visibility:hidden;transition:.2s}
  .drawer[data-open]{transform:none;opacity:1;visibility:visible}
  .drawer .navin{display:block;max-width:1180px;margin:0 auto;padding:0;height:auto}
  .drawer a{display:block;font-size:24px;padding:15px 0;text-decoration:none;
    color:var(--cream);border-bottom:1px solid rgba(255,255,255,.07)}
  .drawer .navcta{display:inline-block;margin-top:24px;font-size:15px;padding:16px 30px}
}
@media(max-width:900px){
  .hero .in{grid-template-columns:1fr;gap:38px;text-align:center}
  .hero .mark{order:-1}
  .hero .mark img{width:min(220px,52vw)}
  .hero .lede{margin-left:auto;margin-right:auto}
  .btns,.trust{justify-content:center}
  .ft .in{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  :root{--nav-h:94px}
  .nav{padding:0 18px;gap:12px}
  .brand img{height:34px}
  .brand .wm{font-size:24px}
  .brand .wm b{font-size:10.5px;letter-spacing:.18em}
  .band{padding:70px 0}
  .band>.in,.hero .in,.banner .in,.ft .in,.ft .bot{padding-left:18px;padding-right:18px}
  .ft{padding:44px 0 34px}
  .ft .in{grid-template-columns:1fr;gap:28px}
  .rate{flex-direction:column;align-items:flex-start;gap:6px;padding:24px 20px}
  .rates .grp{padding:20px 20px 6px}
  .drawer{padding:22px 18px 30px}
}
@media(max-width:400px){
  .brand .wm{font-size:19px}
  .brand img{height:27px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}