/* ============================================================
   At Your Service Digital — styles.css
   Sections: tokens, base, layout, type, buttons, header/nav,
   hero, cards/tiles, bands, faq, forms, footer, utilities,
   motion, responsive
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:#FAF8F4;
  --paper-2:#F2EEE7;
  --white:#FFFFFF;
  --ink:#14213D;
  --ink-soft:#4A5568;
  --line:#E2DCD2;
  /* --line is a decorative card edge at 1.36:1. Interactive boundaries need 3:1
     per WCAG 1.4.11, so form controls and filter buttons use this instead. */
  --line-strong:#8A8073;
  /* #B87A1F measured 3.11-3.59:1 on the four light surfaces below, failing WCAG AA
     for normal text in 105 places. #8C5C18 is the least darkening that clears 4.5:1
     against all of them: paper 5.41, paper-2 4.96, white 5.74, tint 5.12, and
     white-on-accent 5.74. */
  --accent:#8C5C18;
  --accent-hover:#744C13;
  --accent-tint:#FBF1DF;
  --accent-bright:#E8A93D; /* dark backgrounds only: 7.74:1 on --deep */
  --deep:var(--ink); /* was a second literal #14213D; aliased so the brand navy has one source */
  /* Text ramp for dark surfaces (.dark, .site-footer, .call-block). These were
     hard-coded literals in styles.css and in all 15 HTML files. */
  --ink-invert:#C9CEDB;
  --ink-invert-faint:#8A93A8;
  --success:#1F7A3D;
  --error:#B3261E;
  /* Channel triplets so rgba() overlays derive from the tokens above rather than
     re-encoding the same hexes by hand. */
  --ink-rgb:20 33 61;
  --paper-rgb:250 248 244;
  --shadow:0 2px 8px rgb(var(--ink-rgb) / .06);
  --radius-s:4px;
  --radius-m:8px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Barlow,system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media(min-width:1200px){body{font-size:18px}}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);
  color:var(--white);padding:12px 20px;border-radius:0 0 var(--radius-s) 0;text-decoration:none;
}
.skip-link:focus{left:0;color:var(--white)}

/* ---------- layout ---------- */
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
.section{padding:96px 0}
.section-top{padding:72px 0 0}
@media(max-width:900px){.section{padding:64px 0}.section-top{padding:48px 0 0}}
@media(max-width:640px){.section{padding:48px 0}.section-top{padding:40px 0 0}}
.grid{display:grid;gap:24px}
/* min(Npx,100%) rather than a bare Npx track minimum: below ~330px the fixed minimum
   forced a column wider than the container and every page scrolled sideways. Desktop
   is unaffected — .grid-3 still computes to 348px columns at >=1140px. */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.split{display:grid;gap:48px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:center}
.stack{display:flex;flex-direction:column;gap:20px}

/* ---------- type ---------- */
h1,h2,h3,.display{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin:0;
  text-wrap:pretty;
}
h1{font-size:clamp(2.6rem,5vw,4rem);max-width:18ch}
h2{font-size:clamp(2rem,3.5vw,2.9rem)}
h3{font-size:1.4rem}
p{margin:0;max-width:68ch}
.lede{color:var(--ink-soft);font-size:1.12rem}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}
.fine{font-size:.85rem;color:var(--ink-soft)}
.eyebrow{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;font-size:.82rem;color:var(--accent);margin:0;
}
.breadcrumb{font-size:.9rem;color:var(--ink-soft)}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--accent-hover)}
.breadcrumb [aria-current]{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:14px 28px;border-radius:var(--radius-s);
  font-weight:600;font-size:1.05rem;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;font-family:Barlow,sans-serif;min-height:44px;
}
.btn-primary{background:var(--accent);color:var(--white)}
.btn-primary:hover{background:var(--accent-hover);color:var(--white)}
.btn-secondary{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-secondary:hover{background:var(--ink);color:var(--paper)}
.btn-text{color:var(--accent);font-weight:600;text-decoration:none}
.btn-text:hover{text-decoration:underline;color:var(--accent-hover)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:transparent;
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s;
}
.site-header.scrolled,.site-header.solid{background:var(--paper);border-bottom-color:var(--line)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
/* flex-shrink:0 + nowrap on the 23-char wordmark manufactured a 232px un-shrinkable
   block, flooring the header at 383px so every page scrolled sideways on 375px and
   360px phones. Let it shrink, and drop the wordmark below 400px (the logo mark and
   the link aria-label still carry the brand). */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand img{width:53px;height:25px}
.brand span{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.05em;color:var(--ink);text-transform:uppercase;
}
.nav-desktop{display:flex;align-items:center;gap:20px}
.nav-desktop>a{
  text-decoration:none;font-weight:500;font-size:1rem;color:var(--ink);padding:10px 0;
}
.nav-desktop>a:hover{color:var(--accent-hover)}
.nav-desktop>a[aria-current="page"]{color:var(--accent)}
/* .nav-desktop>a out-specifies .btn-primary, so the header CTA rendered ink-on-accent
   (4.44:1) instead of the intended white. */
.nav-desktop>a.btn-primary{color:var(--white)}
/* Header CTA + hamburger cluster. Was an identical inline style on all 15 pages. */
.header-actions{display:flex;align-items:center;gap:8px}
.nav-cta{white-space:nowrap;padding:11px 20px;font-size:1rem;margin-left:8px;line-height:1.3}
.dropdown{position:relative}
.dropdown>button{
  font-family:Barlow,sans-serif;font-weight:500;font-size:1rem;color:var(--ink);
  background:none;border:none;cursor:pointer;padding:10px 0;min-height:44px;
}
.dropdown>button:hover,.dropdown>button.active{color:var(--accent)}
.dropdown-menu{
  position:absolute;top:100%;left:-16px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-m);box-shadow:var(--shadow);padding:8px 0;min-width:240px;
  display:none;flex-direction:column;
}
/* Visibility is driven solely by .open, which main.js keeps in sync with
   aria-expanded. :hover and :focus-within used to force the menu open while
   aria-expanded still reported false, and made Escape ineffective because main.js
   returns focus to the trigger, which re-satisfied :focus-within. */
.dropdown.open .dropdown-menu{display:flex}
.dropdown-menu a{padding:10px 18px;text-decoration:none;color:var(--ink);font-weight:500}
.dropdown-menu a:hover{background:var(--accent-tint);color:var(--accent-hover)}
.hamburger{
  display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;
}
.hamburger span{
  display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s,opacity .25s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-cta{display:none;padding:10px 16px;font-size:.95rem}
.menu-overlay{
  position:fixed;inset:0;background:rgb(var(--ink-rgb) / .45);z-index:110;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.menu-panel{
  position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100vw;background:var(--paper);
  z-index:120;display:flex;flex-direction:column;padding:20px 24px 24px;
  box-shadow:-8px 0 24px rgb(var(--ink-rgb) / .15);overflow-y:auto;
  transform:translateX(100%);transition:transform .3s ease-out;visibility:hidden;
}
@media(max-width:480px){.menu-panel{width:100vw}}
/* Below 400px the wordmark cannot fit beside the CTA and hamburger; the logo mark
   plus the link aria-label still identify the site. */
@media(max-width:400px){.brand span{display:none}}
body.menu-open .menu-overlay{opacity:1;pointer-events:auto}
body.menu-open .menu-panel{transform:none;visibility:visible}
.menu-close{
  align-self:flex-end;width:44px;height:44px;background:none;border:none;cursor:pointer;
  font-size:1.5rem;color:var(--ink);line-height:1;
}
.menu-nav{display:flex;flex-direction:column;margin-top:8px}
.menu-nav>a,.menu-services-toggle{
  padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;
  font-size:1.2rem;font-weight:600;color:var(--ink);background:none;border-top:none;
  border-left:none;border-right:none;text-align:left;cursor:pointer;font-family:Barlow,sans-serif;
  display:flex;justify-content:space-between;align-items:center;min-height:44px;
}
.menu-nav>a[aria-current="page"]{color:var(--accent)}
.menu-services{display:none;flex-direction:column;padding:6px 0 10px 14px;border-bottom:1px solid var(--line)}
.menu-services.open{display:flex}
.menu-services a{padding:12px 0;text-decoration:none;color:var(--ink-soft);font-size:1.05rem;min-height:44px;display:flex;align-items:center}
.menu-call{margin-top:auto;text-align:center;font-size:1.1rem;padding:16px}

/* ---------- hero ---------- */
.hero{padding:88px 0 72px}
@media(max-width:900px){.hero{padding:56px 0 48px}}
.hero h1{font-size:clamp(2.8rem,5.5vw,4.4rem)}

/* ---------- media / thumbnails ---------- */
.frame{border-radius:var(--radius-m);border:1px solid var(--line);overflow:hidden;background:var(--paper-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.r43{aspect-ratio:4/3}.r169{aspect-ratio:16/9}.r34{aspect-ratio:3/4}.r219{aspect-ratio:21/9}
.thumb-zoom img{transition:transform .5s ease-out}
.thumb-zoom:hover img{transform:scale(1.04)}

/* ---------- cards, stats, bands ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
}
.card-body{padding:26px;display:flex;flex-direction:column;gap:14px;flex:1}
.card-body ul{margin:0;padding-left:18px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
.card-body .btn-text{margin-top:auto}
.pad-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:28px}
.tint-card{background:var(--accent-tint);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:28px}
.stat b{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:3rem;
  line-height:1;display:block;
}
.stat p{margin-top:8px;color:var(--ink-soft)}
.band{background:var(--paper-2)}
.band-white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark{background:var(--deep);color:var(--paper)}
.dark p{color:var(--ink-invert)}
.rule-top{border-top:3px solid var(--accent);padding-top:18px}
.step-num{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:1.1rem;
  color:var(--accent);margin:0 0 6px;
}
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr)}
.trust-strip p{display:flex;align-items:center;padding:18px;font-size:.95rem;color:var(--ink-soft);max-width:none}
.trust-strip p+p{border-left:1px solid var(--line)}
@media(max-width:960px){
  .trust-strip{grid-template-columns:1fr 1fr}
  .trust-strip p+p{border-left:none}
  .trust-strip p:nth-child(even){border-left:1px solid var(--line)}
  .trust-strip p:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .trust-strip{grid-template-columns:1fr}
  .trust-strip p{padding:14px 0}
  .trust-strip p:nth-child(even){border-left:none}
  .trust-strip p:nth-child(n+2){border-top:1px solid var(--line)}
}

/* ---------- work grid / filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filters button{
  background:var(--white);color:var(--ink);border:1.5px solid var(--line-strong);
  border-radius:var(--radius-s);padding:10px 20px;font-family:Barlow,sans-serif;
  font-weight:500;font-size:.95rem;cursor:pointer;min-height:44px;
}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
.tile{display:flex;flex-direction:column;gap:10px}
.tile.hidden{display:none}
.tile-media{position:relative;display:block;text-decoration:none}
a.tile-media:hover .frame{border-color:var(--accent)}
.tile-badge{
  position:absolute;top:12px;left:12px;background:var(--accent);color:var(--white);
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.72rem;padding:4px 10px;border-radius:var(--radius-s);
}
.tile-meta b{font-weight:600}
.tile-meta .tag{color:var(--accent);font-weight:500}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:4px 0}
summary{
  font-weight:600;font-size:1.08rem;padding:16px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;min-height:44px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";color:var(--accent);font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
}
details[open] summary::after{content:"×"}
details p{margin:0 0 18px;color:var(--ink-soft)}

/* ---------- forms ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:32px;display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{
  border:1px solid var(--line-strong);border-radius:var(--radius-s);padding:12px 14px;
  font-family:Barlow,sans-serif;font-size:1rem;background:var(--white);color:var(--ink);min-height:44px;
}
.field textarea{resize:vertical;min-height:100px}
.field .err{display:none;color:var(--error);font-size:.88rem}
.err[data-form-error]{display:block;color:var(--error);font-size:.95rem;font-weight:600}
.err[data-form-error][hidden]{display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--error)}
.field.invalid .err{display:block}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.big-tel{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:clamp(2.6rem,6vw,4.2rem);color:var(--accent);text-decoration:none;line-height:1.05;display:inline-block;
}
.big-tel:hover{color:var(--accent-hover)}

/* ---------- closing call block ---------- */
.call-block{text-align:center}
.call-block .stack{align-items:center}
.call-block .tel{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:clamp(2.4rem,6vw,4rem);color:var(--accent-bright);text-decoration:none;line-height:1.05;
}
.call-block .tel:hover{color:var(--accent-tint)}
.call-block .alt-link{color:var(--accent-bright);font-weight:500}
.call-block .alt-link:hover{color:var(--accent-tint)}

/* ---------- footer ---------- */
.site-footer{background:var(--deep);color:var(--ink-invert);border-top:1px solid rgb(var(--paper-rgb) / .12);padding:64px 0 96px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.footer-grid h2{
  font-size:.82rem;letter-spacing:.18em;font-weight:600;color:var(--accent-bright);margin:0 0 6px;
}
.footer-grid nav{display:flex;flex-direction:column;gap:10px}
.footer-grid a{color:var(--ink-invert);text-decoration:none;font-size:.95rem}
.footer-grid a:hover{color:var(--paper)}
.footer-grid .tel{color:var(--accent-bright);font-weight:600}
.footer-logo{background:var(--paper);border-radius:var(--radius-s);padding:8px 10px;width:64px;height:auto}
.footer-bottom{
  border-top:1px solid rgb(var(--paper-rgb) / .12);margin-top:48px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.85rem;color:var(--ink-invert-faint);
}

/* ---------- sticky call button ---------- */
.sticky-call{
  display:none;position:fixed;right:16px;bottom:16px;z-index:90;width:56px;height:56px;
  border-radius:50%;background:var(--accent);color:var(--white);text-decoration:none;
  align-items:center;justify-content:center;font-family:"Barlow Condensed",Barlow,sans-serif;
  font-weight:700;font-size:.85rem;letter-spacing:.06em;box-shadow:0 4px 12px rgb(var(--ink-rgb) / .25);
}
.sticky-call:hover{background:var(--accent-hover);color:var(--white)}

/* ---------- motion ---------- */
/* Reveal is opt-in: main.js sets .js on <html> before anything paints, so if the
   script fails to parse or is blocked, content ships visible instead of stranded at
   opacity:0 (which previously hid 76% of the home page). */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .4s ease-out,transform .4s ease-out}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive nav switch ---------- */
@media(max-width:1023px){
  .nav-desktop{display:none}
  .hamburger{display:flex}
  .mobile-cta{display:inline-block}
  .sticky-call{display:flex}
  body{padding-bottom:88px}
}
@media(min-width:1024px){
  .menu-overlay,.menu-panel{display:none}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .thumb-zoom:hover img{transform:none}
  .menu-panel,.menu-overlay,.hamburger span,.site-header{transition:none}
}

/* ---------- print ---------- */
@media print{
  .site-header,.sticky-call,.menu-panel,.menu-overlay{display:none}
}

/* ---------- chrome utilities ----------
   These four rules replace 60 inline style attributes that were duplicated verbatim
   once per page across the shared header and footer. */
.footer-col{gap:14px}
.footer-blurb{font-size:.95rem;max-width:26ch}
.footer-hours{font-size:.85rem;color:var(--ink-invert-faint)}
.legal-h2{font-size:1.4rem;margin-top:12px}