/* ============================================================
   CIRCLE SQUARE SHARED CHROME
   The new nav + footer for pages that still load home.css.
   Only the tokens the chrome needs are declared, aliased onto
   home.css's own tokens so there is one palette, not two.
   ============================================================ */
:root{
  --warm:var(--sage); --muted:var(--mid); --card:var(--surface);
  --muted-inv:#c2baad; --line-inv:rgba(244,240,232,.16);
  --f-body:var(--font); --f-disp:var(--disp);
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;
  --d-1:120ms; --d-2:200ms; --d-3:320ms; --d-4:560ms; --d-5:900ms;
  --e-out:cubic-bezier(.22,1,.36,1); --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1); --e-press:cubic-bezier(.2,0,0,1);
  --sh:28 18% 12%;
  --e2:0 1px 1px hsl(var(--sh)/.06),0 2px 2px hsl(var(--sh)/.06),0 4px 8px hsl(var(--sh)/.06),0 8px 16px hsl(var(--sh)/.05);
  --e3:0 1px 1px hsl(var(--sh)/.05),0 2px 4px hsl(var(--sh)/.05),0 6px 12px hsl(var(--sh)/.06),0 12px 24px hsl(var(--sh)/.07),0 24px 48px hsl(var(--sh)/.06);
  --hdr:84px;
}
@media (max-width:980px){:root{--hdr:68px}}
.wrap{max-width:1380px;margin:0 auto;padding-inline:var(--pad)}
.ftr p{margin:0 0 10px}
.ftr__legal span{display:block}
@media(max-width:860px){.ftr__g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ftr__g{grid-template-columns:minmax(0,1fr)}.ftr__legal{flex-direction:column;gap:8px}}

.ftr{background:var(--char);color:var(--muted-inv);margin-top:120px;padding:64px 0 40px;font-size:15px}
.ftr__g{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.ftr b{color:var(--paper);display:block;margin-bottom:10px;font-weight:600}
.ftr a{color:var(--muted-inv);text-decoration:none;display:block;min-height:32px;line-height:32px}
.ftr__legal{border-top:1px solid var(--line-inv);margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;font-size:13.5px}
.ftr a{min-height:44px;display:flex;align-items:center}
.ftr .ph-note{margin-left:8px}
.ftr__g{grid-template-columns:1.3fr repeat(3,minmax(0,1fr))}
.ftr__g>*{min-width:0}
.ftr a{flex-wrap:wrap;overflow-wrap:anywhere;column-gap:6px}
/* =========================================================
   CIRCLE SQUARE NAV — the live site's floating pill, carried
   over unchanged in character. Namespaced `cs*` so it cannot
   collide with the concept's own `.nav` / `.dd` header rules.
   Alex: "i like ours we have now".
   ========================================================= */
.csnav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) var(--pad) 20px;transition:padding var(--d-4) var(--e-out)}
.csnav.is-scrolled{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px}
.csnav__logo{display:inline-flex;align-items:center;min-height:44px}
.csnav__logo img{height:32px;width:auto;transition:filter var(--d-3) var(--e-out)}
.csnav.on-dark .csnav__logo img{filter:invert(1) brightness(1.05)}

.cspill{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;
  padding:6px;width:max-content;max-width:calc(100vw - 40px);white-space:nowrap;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-pill)}
.cspill > a,.cspill__loc{font:500 14px/1 var(--f-body);color:#55504a;padding:9px 13px;border-radius:var(--r-pill);
  text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  transition:color var(--d-2),background-color var(--d-3)}
@media(hover:hover){.cspill > a:hover,.cspill__loc:hover{color:var(--ink)}}
.cspill > a[aria-current="page"]:not(.cspill__refer){background:var(--warm);color:var(--ink)}
.cspill > a.cspill__refer{background:var(--ink);color:var(--paper);font-weight:600;margin-left:4px}
@media(hover:hover){.cspill > a.cspill__refer:hover{color:var(--paper)}}
.cspill__mobile{position:relative}
.csnav-new{position:absolute;top:-9px;right:-4px;background:var(--char);color:var(--paper);
  font:700 9px/1 var(--f-body);letter-spacing:.1em;padding:3px 6px;border-radius:var(--r-pill)}

/* Locations menu, in the pill's own language */
.csloc{position:relative;display:flex}
.cspill__loc[aria-expanded="true"]{background:var(--warm);color:var(--ink)}
.cspill__loc svg{width:10px;height:7px;transition:transform var(--d-3) var(--e-out)}
.cspill__loc[aria-expanded="true"] svg{transform:rotate(180deg)}
.csloc__panel{position:absolute;top:calc(100% + 12px);left:50%;width:336px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e3);
  opacity:0;transform:translateX(-50%) translateY(-6px);pointer-events:none;
  transition:opacity var(--d-2) linear,transform var(--d-3) var(--e-out)}
.csloc__panel.is-open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.csloc__row{display:flex;gap:12px;align-items:center;padding:9px;border-radius:var(--r-md);
  text-decoration:none;transition:background-color var(--d-2)}
@media(hover:hover){.csloc__row:hover{background:var(--warm)}}
.csloc__row img{width:60px;height:44px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.csloc__row b{display:block;font:600 16px/1.2 var(--f-disp);letter-spacing:-.015em;color:var(--ink)}
.csloc__row span span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.4}
.csloc__all{display:block;margin-top:4px;padding:11px 9px 7px;font:600 13px/1 var(--f-body);
  color:var(--ink);text-decoration:none}

/* burger + sheet */
.csnav__burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.csnav__burger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform var(--d-3) var(--e-out)}
.csnav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.csnav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.cssheet{position:fixed;inset:0;z-index:99;background:var(--paper);padding:calc(92px + env(safe-area-inset-top,0px)) var(--pad) calc(28px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.cssheet a{font:600 20px/1 var(--f-disp);letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.cssheet__group{padding:14px 0 4px}
.cssheet__group p{font:600 11.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.cssheet__sub{font-size:17px!important;font-weight:500!important}
.cssheet__sub em{font-style:normal;color:var(--muted);font-size:13px;font-family:var(--f-body)}
.cssheet__tel{border-bottom:0!important;color:var(--muted)!important;font-family:var(--f-body)!important;font-size:15px!important}
.cssheet__cta{border-bottom:0!important;justify-content:center;background:var(--ink);color:var(--paper)!important;
  border-radius:var(--r-pill);padding:16px!important;margin-top:10px}

@media(max-width:1340px){.cspill{display:none}.csnav__burger{display:flex}}
@media(min-width:1341px){.cssheet{display:none!important}}
/* Pages that are not the full-bleed home need clearance under the floating nav.
   Padding the <main> drew a strip of page background above the first section, so
   the nav sat on a different colour to the band beneath it. Alex rejected that.
   The first section now supplies its own top padding, so its background runs
   continuously under the nav and there is no band. */
body.has-topbar main > *:first-child{padding-top:calc(var(--hdr) + clamp(8px,1.5vh,20px))}

/* The hero met the next section on a hard dark/paper edge. Alex rejected that.
   The last strip of the hero now melts into the page colour, and the fact bar
   is lifted clear of the fade so nothing loses contrast over it. */
.hfb{--hfb-fade:clamp(64px,9vh,120px);padding-bottom:var(--hfb-fade)}
.hfb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hfb-fade);
  background:linear-gradient(to bottom,rgba(28,26,22,0),var(--paper));pointer-events:none;z-index:2}
.hfb__bar{bottom:var(--hfb-fade);z-index:4}
.hfb__box,.hfb__cap,.ibtn{z-index:4}
/* lift the pause control clear of the hero fade, same as the fact bar */
.hfb > .stage__pause{bottom:calc(var(--hfb-fade) + 28px)}


/* Clearance under the floating nav. Applied to the first content element so
   the element's own background runs under the nav: padding on <body> drew a
   strip of a different colour above it, which Alex rejected. */
body.has-topbar [data-cs-first]{padding-top:calc(var(--hdr) + clamp(8px,1.5vh,20px))}
@media(min-width:1600px){.wrap{max-width:min(1680px, 94vw)}}
.cssheet[hidden]{display:none}
/* same card response on the pages that still load home.css */
.band,.stat,.svc-list li,.team-card,.rev-card,.studio{
  transition:transform var(--d-4) var(--e-out),box-shadow var(--d-4) var(--e-out)}
@media(hover:hover) and (pointer:fine){
  .team-card:hover,.rev-card:hover{transform:translateY(-6px)}
  .svc-list li:hover,.stat:hover{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .band,.stat,.svc-list li,.team-card,.rev-card,.studio{transform:none!important}
}