/* Cheerful Cleaning — shared chrome, extracted so five pages don't grow five
   copies of the same header, footer and menu. Anything specific to a single
   page's own content (hero, carousel, grid, steps, close) stays inline on
   that page — only what every page reuses lives here. */

/* Direction A — "The Quiet Room".
   Williams Sonoma register: photography carries the warmth, the type is a
   transitional serif, colour appears almost nowhere. Locked to a light ground
   on purpose — a concept whose whole argument is bright white space must not
   invert itself in dark mode. */
:root{
  --ink:#1E1C19; --soft:#544D46; --mute:#847C73;
  --line:#E7E3DC; --paper:#FFFFFF;
  --r:2px;
}
body{background:var(--paper);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;font-size:16.5px;line-height:1.62}
.serif{font-family:'SourceSerif',Georgia,serif}

/* Conventional header. A slim contact strip sits above it — tap-to-call
   matters most on a phone, so it stays visible at every width rather than
   folding into the hamburger menu with everything else. */
:root{
  /* A darker tint of the logo blue #249dd3. The logo value itself only reaches
     3.07:1 against white, so white button text on it would fail WCAG AA; this
     one clears 4.5:1 while staying recognisably the same hue. */
  --brand-blue: #1d7eaa;
  --brand-blue-dk: #16668b;
  --light-orange: #fcbd0b;
  --dark-orange: #ed8b00;
}

.stripes{
  height:16px;
  background:linear-gradient(to bottom,
    #249dd3 0 4px,               /* the logo's own blue — a graphic, not type */
    var(--dark-orange) 4px 10px,
    var(--light-orange) 10px 100%);
}

.hd{
  position:relative; z-index:5;
  background:var(--paper);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,48px); padding:16px 4vw;
}
/* The lockup is the mark with the stacked wordmark beside it (about 2.98:1),
   compact enough to run tall — sized to read large rather than shrunk to fit
   a logo-sized slot. */
.brand img{height:clamp(60px, 6vw, 90px); width:auto; display:block}

.nav{display:flex; align-items:center; gap:clamp(14px,2vw,32px)}
.nav a{
  font-family:'SourceSerif',Georgia,serif; font-size:clamp(14px,1.05vw,15.5px);
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.nav a:hover{text-decoration:underline; text-underline-offset:3px}
/* The page you're on is underlined in the brand orange — oriented, not loud. */
.nav a[aria-current="page"],.menu-panel a[aria-current="page"]{
  text-decoration:underline;text-decoration-color:var(--dark-orange);
  text-decoration-thickness:2px;text-underline-offset:5px;
}
.nav .cta{
  font-family:'Archivo',sans-serif;font-size:clamp(10.5px,.82vw,12.5px);
  letter-spacing:.085em;text-transform:uppercase;font-weight:600;text-decoration:none;
  background:var(--brand-blue);color:#fff;border:0;padding:13px 24px;
  /* 7px: softened toward the logo's rounded drawing without becoming a pill.
     A pill is what made the first design draft read as a children's site. */
  border-radius:7px;
  margin-left:clamp(4px,.8vw,12px);
  transition:background 140ms cubic-bezier(.22,1,.36,1);
}
.nav .cta:hover{background:var(--brand-blue-dk);color:#fff}

/* --- hamburger: desktop hides it, mobile and tablet get it instead of .nav --- */
.menu-toggle{
  display:none;
  align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  padding:8px 4px; color:var(--ink); font-family:'Archivo',sans-serif;
  font-size:11px; letter-spacing:.055em; text-transform:uppercase; font-weight:600;
}
.menu-toggle .bars{position:relative;width:19px;height:2px;background:currentColor;border-radius:2px;display:block}
.menu-toggle .bars::before,.menu-toggle .bars::after{
  content:'';position:absolute;left:0;width:19px;height:2px;background:currentColor;border-radius:2px;
  transition:transform 160ms cubic-bezier(.22,1,.36,1), opacity 120ms linear;
}
.menu-toggle .bars::before{top:-6px}
.menu-toggle .bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* The panel drops over the hero rather than pushing it down. The header is
   position:relative, so top:100% anchors to its bottom edge. */
.menu-panel{
  position:absolute; top:100%; left:0; right:0; z-index:9;
  background:var(--paper); border-bottom:1px solid var(--line);
  box-shadow:0 14px 34px rgba(30,28,25,.10);
  display:flex; flex-direction:column; padding:6px 5vw 20px;
}
.menu-panel[hidden]{display:none}
.menu-panel a{
  font-family:'SourceSerif',Georgia,serif; font-size:19px; color:var(--ink);
  text-decoration:none; padding:15px 2px; border-bottom:1px solid var(--line);
}
.menu-panel a:last-of-type{border-bottom:0}
.menu-panel .menu-cta{
  font-family:'Archivo',sans-serif; font-size:12.5px; letter-spacing:.085em;
  text-transform:uppercase; font-weight:600; text-align:center;
  background:var(--brand-blue); color:#fff; border-radius:7px;
  padding:15px 24px; margin-top:16px;
}

/* The segment name, small and plain, so the headline can stay a headline.
   #ad6500 is the AA-safe tint of the brand orange for text on white. */
.kicker{
  font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:#ad6500;margin:0 0 12px;
}

.btn-call{
  font-family:'Archivo',sans-serif; font-size:12.5px; letter-spacing:.085em;
  text-transform:uppercase; font-weight:600; text-decoration:none;
  background:var(--brand-blue); color:#fff; border-radius:7px;
  padding:16px 30px;
  transition:background 140ms cubic-bezier(.22,1,.36,1);
}
.btn-call:hover{background:var(--brand-blue-dk)}

/* The dash: one small stroke of the brand orange above each heading — the
   same accent everywhere, so it reads as a system rather than decoration.
   Selector list kept as-is even though .grid3/.steps/.close are homepage-only
   today — every page that reuses those classes reuses this dash with them. */
.grid3 h3::before,.steps h2::before,.close h2::before{content:'';display:block;width:32px;height:3px;background:var(--dark-orange);margin-bottom:14px}
.close h2::before{margin-left:auto;margin-right:auto;margin-bottom:16px}

/* --- Footer ------------------------------------------------------------ */
/* The one place the brand blue gets to be a field instead of a button. The
   light-orange rule on top answers the ribbon at the top of the page, so the
   brand colours bookend every page. Four zones in reading order: who we are,
   where to go, how to reach us, and the door for existing clients — then a
   base strip for the legal line and the standing disclaimer. */
.foot{
  --foot-ink:#ffffff; --foot-soft:#C9E2F0; --foot-line:rgba(255,255,255,.16);
  background:#205D87;        /* the logo's own dark blue */
  color:var(--foot-ink);
  border-top:6px solid var(--light-orange);
  padding:clamp(48px,6vw,72px) 5vw 0;
}
.foot-main{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.3fr 1.3fr;
  gap:clamp(28px,4vw,64px);
  max-width:1280px;margin:0 auto;
  padding-bottom:clamp(40px,5vw,60px);
}
.foot-id img{display:block}
.foot-name{
  font-family:'SourceSerif',Georgia,serif;font-size:clamp(22px,2vw,27px);
  font-weight:600;letter-spacing:-.01em;margin-top:14px;
}
.foot-tag{font-family:'SourceSerif',Georgia,serif;font-style:italic;font-size:15px;color:var(--foot-soft);margin-top:8px}
.foot-head{
  font-family:'Archivo',sans-serif;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--light-orange);
  margin-bottom:14px;
}
.foot-nav{display:flex;flex-direction:column}
.foot-nav a{
  font-family:'SourceSerif',Georgia,serif;font-size:16.5px;color:var(--foot-ink);
  text-decoration:none;padding:5px 0;width:fit-content;
}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-nav a[aria-current="page"]{
  text-decoration:underline;text-decoration-color:var(--light-orange);
  text-decoration-thickness:2px;text-underline-offset:5px;
}
.foot-phone{
  display:block;font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(22px,2vw,27px);letter-spacing:.01em;
  color:var(--foot-ink);text-decoration:none;width:fit-content;
}
.foot-phone:hover{text-decoration:underline;text-underline-offset:4px}
.foot-mail{
  display:block;font-size:15px;color:var(--foot-ink);text-decoration:none;
  margin-top:14px;width:fit-content;
}
.foot-mail:hover{text-decoration:underline;text-underline-offset:3px}
.foot-sub{font-size:13px;color:var(--foot-soft);margin-top:5px;line-height:1.55}
.portal-btn{
  display:inline-block;font-family:'Archivo',sans-serif;font-size:12px;
  letter-spacing:.085em;text-transform:uppercase;font-weight:600;
  text-decoration:none;color:var(--light-orange);
  border:1.5px solid var(--light-orange);border-radius:7px;
  padding:13px 24px;white-space:nowrap;
  transition:background 140ms cubic-bezier(.22,1,.36,1), color 140ms cubic-bezier(.22,1,.36,1);
}
.portal-btn:hover{background:var(--light-orange);color:#1E1C19}
.foot-client .foot-sub{margin-top:12px;max-width:26ch}
.foot-base{
  border-top:1px solid var(--foot-line);
  display:flex;justify-content:space-between;gap:10px 28px;flex-wrap:wrap;
  max-width:1280px;margin:0 auto;
  padding:20px 0 26px;
}
.foot-base p{font-size:12px;letter-spacing:.04em;color:var(--foot-soft);line-height:1.7}

@media (max-width:1024px){
  .foot-main{grid-template-columns:1fr 1fr}
}

/* Off by default — this is a mobile pattern only. The (max-width:820px)
   block below turns it into the fixed bottom bar. */
.call-bar{display:none}

@media (max-width:1024px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .brand img{height:clamp(50px, 7.5vw, 66px)}
  .hd{padding:12px 4vw}
}
@media (min-width:1025px){
  .menu-toggle{display:none}
  .menu-panel{display:none}
}
@media (max-width:820px){
  .foot-main{grid-template-columns:1fr;gap:34px}
  .foot-base{flex-direction:column;gap:6px}
  body{padding-bottom:64px}
  /* The bar keeps the call in thumb reach the whole way down the page — on a
     phone it IS the site's conversion path. env(safe-area-inset-bottom) keeps
     it clear of the iPhone home indicator instead of sitting under it. */
  .call-bar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:var(--brand-blue); color:#fff; text-align:center; text-decoration:none;
    font-family:'Archivo',sans-serif; font-size:13.5px; letter-spacing:.085em;
    text-transform:uppercase; font-weight:600;
    padding:16px 20px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(30,28,25,.18);
  }
  .call-bar:active{background:var(--brand-blue-dk)}
}

/* --- Sticky header (desktop only) ------------------------------------- */
/* On desktop the header follows the scroll, so the call button never leaves
   the screen — the same job the fixed bottom bar does on a phone. Mobile
   deliberately does NOT get a sticky header: the call bar already owns the
   bottom edge, and pinning ~70px of brand to the top of a small screen would
   cost more attention than it earns. The .stuck class (set in site.js) slims
   the header once the page moves, so the pinned version reads as a toolbar
   rather than a masthead. */
@media (min-width:1025px){
  .hd{position:sticky;top:0;z-index:30;transition:padding 160ms cubic-bezier(.22,1,.36,1)}
  .hd .brand img{transition:height 160ms cubic-bezier(.22,1,.36,1)}
  .hd.stuck{padding:10px 4vw;border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(30,28,25,.07)}
  .hd.stuck .brand img{height:52px}
}

/* Secondary action next to the filled call button: outlined, quieter. The
   visitor who won't phone a stranger still needs a door — this is it. */
.btn-quote{
  font-family:'Archivo',sans-serif; font-size:12.5px; letter-spacing:.085em;
  text-transform:uppercase; font-weight:600; text-decoration:none;
  color:var(--brand-blue); border:1.5px solid var(--brand-blue); border-radius:7px;
  padding:14.5px 26px; background:rgba(255,255,255,.6);
  transition:background 140ms cubic-bezier(.22,1,.36,1), color 140ms cubic-bezier(.22,1,.36,1);
}
.btn-quote:hover{background:var(--brand-blue);color:#fff}

/* Close section: the call button and the quote link travel as a pair. The
   row owns the 30px top gap; the page-level `.close .btn-call{margin-top}`
   must not fire inside it or the flex row grows lopsided (one button pushed
   down, the other stretched to match) — hence the override and the
   align-items:center. */
.close-actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:30px}
.close .close-actions .btn-call{margin-top:0}