/* ===========================================================================
   Header, navigation, mobile drawer, sticky call bar, footer.

   Both nav DOM shapes are styled throughout. The fallback emits `nav.nav > a`;
   `wp_nav_menu()` emits `nav.nav > ul > li > a`. Styling only the first turns
   a real install's menu into a bulleted vertical list — and provisioning
   assigns a menu, so that is the DEFAULT path, not an edge case.
   =========================================================================== */

.site-header{
  position:sticky;top:0;z-index:90;
  background:transparent;
  border-bottom:var(--hairline) solid transparent;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
body:not(.has-hero) .site-header,
.site-header.is-stuck{
  background:var(--ink);
  border-bottom-color:var(--rule-dark);
}
body.has-hero .site-header{position:absolute;left:0;right:0}
body.has-hero .site-header.is-stuck{position:fixed}

/* -------------------------------------------------------------- topbar */

.topbar{
  border-bottom:var(--hairline) solid var(--rule-dark-soft);
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:var(--tr-meta);
  text-transform:uppercase;
}
body:not(.has-hero) .topbar{background:var(--ink-2)}
.site-header.is-stuck .topbar{display:none}
.topbar-in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:var(--topbar-h);color:var(--on-ink-3);
}
.topbar-area{display:flex;align-items:center;gap:.6rem}
.topbar-area::before{content:"";width:6px;height:6px;background:var(--red);flex:none}
.topbar-links{display:flex;align-items:center;gap:1.75rem}
.topbar a{color:var(--on-ink-3);text-decoration:none;transition:color .18s var(--ease)}
.topbar a:hover{color:var(--on-ink)}
.topbar-tel{color:var(--on-ink) !important}
@media (max-width:900px){.topbar{display:none}}

/* -------------------------------------------------------------- header */

.header-in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:var(--header-h);
}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:46px;width:auto;display:block;transition:height .25s var(--ease)}
.site-header.is-stuck .brand img{height:38px}
.brand-txt{display:none}

.nav{display:flex;align-items:center}
.nav > ul,.nav-list{
  display:flex;align-items:center;gap:0;
  list-style:none;margin:0;padding:0;
}
.nav li{position:relative;list-style:none;margin:0}
.nav > a,.nav li > a{
  display:block;
  padding:.5rem .85rem;
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:var(--tr-meta);
  text-transform:uppercase;
  color:var(--on-ink-2);
  text-decoration:none;
  position:relative;
  transition:color .18s var(--ease);
}
.nav > a:hover,.nav li > a:hover{color:var(--on-ink)}
.nav > a::after,.nav li > a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:-.1rem;
  height:var(--rule-heavy);background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav > a:hover::after,.nav li > a:hover::after{transform:scaleX(1)}
/* With a real menu the active item is li.current-menu-item > a, not a.current. */
.nav > a.current::after,
.nav li.current-menu-item > a::after,
.nav li.current_page_item > a::after,
.nav li.current-menu-ancestor > a::after{transform:scaleX(1)}
.nav > a.current,
.nav li.current-menu-item > a,
.nav li.current_page_item > a{color:var(--on-ink)}
.nav .sub-menu{display:none}

.header-act{display:flex;align-items:center;gap:1.25rem;flex:none}
.header-tel{
  display:none;align-items:center;
  font-family:var(--font-display);font-size:1.35rem;font-weight:800;
  letter-spacing:-.01em;line-height:1;color:var(--on-ink);text-decoration:none;
  transition:color .18s var(--ease);
}
.header-tel:hover{color:var(--red-bright)}
.btn-head{
  display:inline-flex;align-items:center;gap:.9rem;
  padding:.9rem 1.15rem;
  font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:var(--tr-meta);text-transform:uppercase;
  background:var(--red);color:#fff;border:var(--hairline) solid var(--red);
  text-decoration:none;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn-head::after{content:"\2192";font-size:.95rem;line-height:0}
.btn-head:hover{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}

/* burger */
.burger{
  display:none;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:transparent;border:var(--hairline) solid var(--rule-dark);
  cursor:pointer;padding:0;border-radius:0;
}
.burger span{display:block;width:18px;height:var(--rule-heavy);background:var(--on-ink);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:var(--rule-heavy);background:var(--on-ink);
  transition:transform .22s var(--ease),top .22s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (min-width:1200px){.header-tel{display:flex}}
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:flex}
  .btn-head{display:none}
}
@media (max-width:420px){.brand img{height:38px}}

/* -------------------------------------------------------------- drawer */

.nav-drawer{
  position:fixed;inset:0;z-index:120;
  background-color:var(--ink);
  background-image:var(--drafting);
  background-size:var(--drafting-size);
  display:flex;flex-direction:column;
  padding:1rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y:auto;
  opacity:0;transform:translateY(-6px);visibility:hidden;
  /* visibility is stepped, never interpolated: it flips to hidden only AFTER
     the fade out, and back to visible instantly on open. In the transition
     proper it computes `hidden` at progress 0, and a hidden element silently
     refuses focus() — so the drawer would open with the keyboard user still
     stranded on the burger. */
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
}
.nav-drawer.open{
  opacity:1;transform:none;visibility:visible;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear 0s;
}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;min-height:56px;
  padding-bottom:1rem;border-bottom:var(--hairline) solid var(--rule-dark);
}
.drawer-top img{height:40px;width:auto}
.drawer-close{
  width:44px;height:44px;background:transparent;
  border:var(--hairline) solid var(--rule-dark);
  color:var(--on-ink);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:0;
}
.drawer-nav{margin-top:1.25rem;counter-reset:dnav}
.drawer-nav > ul,.drawer-nav .nav-list{list-style:none;margin:0;padding:0;display:block}
.drawer-nav li{list-style:none;counter-increment:dnav}
.drawer-nav > a,.drawer-nav li > a{
  display:flex;align-items:baseline;gap:1rem;
  padding:.95rem 0;
  border-bottom:var(--hairline) solid var(--rule-dark-soft);
  font-family:var(--font-display);
  font-size:clamp(1.65rem,1.3rem + 2vw,2.3rem);
  font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  color:var(--on-ink);text-decoration:none;
}
.drawer-nav li > a::before{
  content:counter(dnav,decimal-leading-zero);
  font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:500;
  letter-spacing:var(--tr-meta);color:var(--red-bright);flex:none;
}
.drawer-nav > a.current,.drawer-nav li.current-menu-item > a{color:var(--red-bright)}
.drawer-foot{
  margin-top:auto;padding-top:1.75rem;display:grid;gap:.5rem;
  border-top:var(--hairline) solid var(--rule-dark);
}
.drawer-tel{
  font-family:var(--font-display);font-size:2.1rem;font-weight:800;
  letter-spacing:-.02em;line-height:.95;color:var(--on-ink);text-decoration:none;
}
.drawer-mail{color:var(--on-ink-2);font-size:.9rem;word-break:break-word;text-decoration:none}
.drawer-area{
  color:var(--on-ink-3);margin:.35rem 0 0;
  font-family:var(--font-mono);font-size:var(--fs-meta);
  letter-spacing:var(--tr-meta);text-transform:uppercase;line-height:1.6;
}

/* Stagger: with a real menu the anchors are grandchildren, so a
   `nav a:nth-child(n)` selector would match nothing. */
.nav-drawer.open .drawer-nav > a,
.nav-drawer.open .drawer-nav li{animation:drawerIn .35s var(--ease) both}
.nav-drawer.open .drawer-nav > a:nth-child(1),.nav-drawer.open .drawer-nav li:nth-child(1){animation-delay:.03s}
.nav-drawer.open .drawer-nav > a:nth-child(2),.nav-drawer.open .drawer-nav li:nth-child(2){animation-delay:.06s}
.nav-drawer.open .drawer-nav > a:nth-child(3),.nav-drawer.open .drawer-nav li:nth-child(3){animation-delay:.09s}
.nav-drawer.open .drawer-nav > a:nth-child(4),.nav-drawer.open .drawer-nav li:nth-child(4){animation-delay:.12s}
.nav-drawer.open .drawer-nav > a:nth-child(5),.nav-drawer.open .drawer-nav li:nth-child(5){animation-delay:.15s}
.nav-drawer.open .drawer-nav > a:nth-child(6),.nav-drawer.open .drawer-nav li:nth-child(6){animation-delay:.18s}
.nav-drawer.open .drawer-nav > a:nth-child(7),.nav-drawer.open .drawer-nav li:nth-child(7){animation-delay:.21s}
@keyframes drawerIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
body.drawer-open{overflow:hidden}

/* --------------------------------------------------- sticky call bar */

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:none;
  background:var(--ink);
  border-top:var(--rule-heavy) solid var(--red);
  padding:.55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform .3s var(--ease);
}
.callbar.show{transform:none}
.callbar-in{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:34rem;margin-inline:auto}
.callbar .btn{padding:.9rem 1rem;font-size:.7rem;width:100%;gap:.6rem}
@media (max-width:1100px){
  .callbar{display:block}
  body.callbar-on{padding-bottom:5.5rem}
}

/* -------------------------------------------------------------- footer */

.site-footer{
  position:relative;
  background-color:var(--ink);
  background-image:var(--drafting),var(--grain);
  background-size:var(--drafting-size),160px 160px;
  color:var(--on-ink-2);
  border-top:var(--rule-bold) solid var(--red);
}
.footer-in{position:relative;z-index:1}

.footer-main{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.3fr;
  gap:clamp(1.75rem,1rem + 3vw,3.5rem);
  padding-block:clamp(3rem,2rem + 3.4vw,4.75rem);
}
.footer-brand{min-width:0}
.footer-brand img{height:60px;width:auto;margin-bottom:1.25rem}
.footer-blurb{font-size:.9rem;line-height:1.7;margin:0 0 1.5rem;max-width:36ch;color:var(--on-ink-2)}
.footer-social{display:flex;gap:.5rem}
.footer-social a{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:var(--hairline) solid var(--rule-dark);color:var(--on-ink);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.footer-social a:hover{background:var(--red);border-color:var(--red);color:#fff}
.footer-social svg{width:17px;height:17px;fill:currentColor}

.footer-col{min-width:0}
/* A decorative column label, deliberately a `div` — making it an <h5> after
   the page's <h2> puts a bogus level into the document outline. */
.footer-head{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);font-weight:600;
  letter-spacing:var(--tr-meta);text-transform:uppercase;
  color:var(--on-ink);margin:0 0 .25rem;padding-bottom:.85rem;
  border-bottom:var(--rule-heavy) solid var(--red);
}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{border-bottom:var(--hairline) solid var(--rule-dark-soft)}
.footer-links a{
  display:block;padding:.68rem 0;
  color:var(--on-ink-2);font-size:.9rem;text-decoration:none;
  transition:color .18s var(--ease),padding-left .18s var(--ease);
}
.footer-links a:hover{color:var(--on-ink);padding-left:.4rem}

.footer-contact{display:block}
.fc-row{
  display:grid;gap:.15rem;padding:.68rem 0;
  border-bottom:var(--hairline) solid var(--rule-dark-soft);
}
.fc-k{
  font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:500;
  letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--on-ink-3);
}
.fc-v{color:var(--on-ink);font-size:.93rem;text-decoration:none;word-break:break-word;line-height:1.5}
a.fc-v:hover{color:var(--red-bright)}
.fc-tel{
  font-family:var(--font-display);font-size:1.85rem;font-weight:800;
  letter-spacing:-.02em;line-height:1;
}

.footer-areas{
  border-top:var(--hairline) solid var(--rule-dark);
  padding-block:1.4rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.6rem;
  font-family:var(--font-mono);font-size:var(--fs-meta);
  letter-spacing:var(--tr-meta);text-transform:uppercase;
}
.footer-areas-k{color:var(--red-bright);margin-right:.25rem}
.footer-areas span:not(.footer-areas-k){color:var(--on-ink-3)}

.footer-bottom{
  border-top:var(--hairline) solid var(--rule-dark);
  padding-block:1.3rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.7rem 1.5rem;
  font-family:var(--font-mono);font-size:var(--fs-meta);
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-3);
}
.footer-bottom p{margin:0}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.footer-legal a{color:var(--on-ink-3);text-decoration:none}
.footer-legal a:hover{color:var(--on-ink)}
.ssq-credit{
  color:var(--on-ink-3);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;
  transition:color .18s var(--ease);
}
.ssq-credit:hover{color:var(--on-ink)}

@media (max-width:1024px){
  .footer-main{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:620px){
  .footer-main{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}