/* ──────────────────────────────────────────────────────────────────────────
   Halia brand layer — the asterism (⁂) as a recurring mark, loaded site-wide.
   One place for the logo flourish and the asterisk "design language" so the
   look can be tuned without touching every page.
   ────────────────────────────────────────────────────────────────────────── */

/* The logo asterism (first span in .brand) rotates with the cursor — see
   brand.js. This just makes it transformable and eases the motion. */
header .brand > span:first-child{display:inline-block;transform-origin:50% 54%;transition:transform .28s cubic-bezier(.2,.7,.2,1);will-change:transform}

/* Keep the collapsed (mobile) header uncluttered, matching the homepage: the
   secondary text links hide below 900px, leaving the CTA and the hamburger. */
@media(max-width:900px){
  header .nav .right .si{display:none}
  header .nav .right .btn{padding:10px 16px;font-size:13px;letter-spacing:.01em}
  header .nav .right .btn .arrow{display:none}
}

/* A quiet, recurring brand tell: the asterism before every section eyebrow.
   Inherits the eyebrow's own colour so it matches in both light and dark
   sections. Applied automatically site-wide — no per-page markup. */
.eyebrow::before{content:"\2042";margin-right:.6em;letter-spacing:0;color:inherit}

/* Asterisk bullets — opt-in list styling for brand consistency in "cute
   places". Uses each page's own --gold accent so it sits in the palette. */
.ast-list{list-style:none;padding:0;margin:0}
.ast-list > li{position:relative;padding-left:1.7em;margin:0 0 .55em}
.ast-list > li::before{content:"\2042";position:absolute;left:0;top:0;color:var(--gold,#8a8377);font-size:.92em;line-height:1.5}

/* ── Shared site footer, mirrored on every page ─────────────────────────────
   Self-contained (own width, inputs and button) so it renders correctly even
   on pages with a minimal stylesheet (the legal pages). Colours read theme
   vars with light-theme fallbacks. */
.hfoot{border-top:1px solid var(--line,rgba(20,18,12,.14));padding:72px 0 0;margin-top:56px;overflow:hidden;font-family:var(--sans,'Inter',system-ui,sans-serif)}
.hfoot .hf-inner{max-width:1180px;margin:0 auto;padding:0 40px}
.hfoot .hf-news{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:50px;margin-bottom:50px;border-bottom:1px solid var(--line,rgba(20,18,12,.14))}
.hfoot .hf-news h3{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:300;font-size:clamp(24px,3vw,34px);max-width:28ch;line-height:1.1;margin:0}
.hfoot .hf-news form{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.hfoot .hf-news input{background:var(--bg-2,#efeadd);border:1px solid var(--line,rgba(20,18,12,.14));border-radius:999px;padding:13px 20px;color:var(--ink,#1a1712);font:500 14px var(--sans,'Inter',system-ui,sans-serif);min-width:250px;outline:none}
.hfoot .hf-news input::placeholder{color:var(--faint,#9a9385)}
.hfoot .hf-news button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--ink,#1a1712);background:var(--ink,#1a1712);color:var(--bg,#f5f2ea);border-radius:999px;padding:13px 24px;font:500 14px var(--sans,'Inter',system-ui,sans-serif);transition:.2s}
.hfoot .hf-news button:hover{background:transparent;color:var(--ink,#1a1712)}
.hfoot .hf-news .ok{color:var(--mute,#615b50);font-size:15px}
.hfoot .hf-brand{margin-bottom:48px}
.hfoot .hf-brand .brand{margin-bottom:16px}
.hfoot .hf-bio{color:var(--mute,#615b50);max-width:60ch;font-size:14px;line-height:1.6}
.hfoot .hf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.hfoot .hf-col h4{font:500 11px var(--sans,'Inter',system-ui,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--faint,#9a9385);margin:0 0 14px}
.hfoot .hf-col a{display:block;color:var(--mute,#615b50);font-size:14px;padding:5px 0;text-decoration:none}
.hfoot .hf-col a:hover{color:var(--ink,#1a1712)}
.hfoot .hf-bot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line,rgba(20,18,12,.14));display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--faint,#9a9385);font-size:13px}
/* oversized full-bleed wordmark, sliced by the bottom edge; colour follows each page's theme */
.hfoot .brandmark{overflow:hidden;text-align:center;margin-top:60px}
.hfoot .brandmark span{display:inline-block;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:300;font-size:clamp(96px,44vw,760px);line-height:1;letter-spacing:-.03em;white-space:nowrap;margin-bottom:-.46em;user-select:none;pointer-events:none;color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--ink,#1a1712) 16%,transparent),color-mix(in srgb,var(--ink,#1a1712) 5%,transparent));-webkit-background-clip:text;background-clip:text}
@media(max-width:900px){.hfoot .hf-cols{grid-template-columns:1fr 1fr;gap:28px}.hfoot .hf-news{flex-direction:column;align-items:flex-start}.hfoot .brandmark span{margin-bottom:-.36em}}

/* ── Nav dropdown — the Solutions tab reveals the industry pages on hover. Uses each page's own
   --vars, so it adapts to the light subpages and the dark homepage nav alike. */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(14px);min-width:236px;
  background:var(--bg,#f5f2ea);border:1px solid var(--line,rgba(20,18,12,.14));border-radius:12px;padding:8px;
  box-shadow:0 26px 60px -28px rgba(10,10,11,.5);display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:60}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}  /* hover bridge */
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(8px)}
.nav-menu a{font:500 13.5px var(--sans,'Inter',system-ui,sans-serif);color:var(--mute,#615b50);padding:9px 12px;border-radius:8px;white-space:nowrap}
.nav-menu a:hover{background:var(--bg-2,#efeadd);color:var(--ink,#1a1712)}
.nav-menu a.all{color:var(--gold,#7a7363);border-top:1px solid var(--line-2,rgba(20,18,12,.07));border-radius:0;margin-top:4px;padding-top:11px}

/* ── Statement break — a single full-height line to breathe between dense sections.
   Use: <section class="stmt-sec [dark] [center]"><div class="wrap">
          <div class="eyebrow">…</div>
          <p class="stmt reveal">Big line with <em>emphasis</em><span class="sub">optional</span></p>
        </div></section>   (.wrap + .reveal + --vars come from the page) */
.stmt-sec{min-height:80vh;display:flex;align-items:center;padding:90px 0;border-top:1px solid var(--line-2,rgba(20,18,12,.07))}
.stmt-sec.dark{background:var(--ink,#1a1712);border-top:none}
.stmt-sec.center{text-align:center}.stmt-sec.center .stmt{margin-left:auto;margin-right:auto}
.stmt-sec .eyebrow{margin-bottom:24px}
.stmt{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(34px,6vw,78px);line-height:1.03;max-width:20ch;margin:0;color:var(--ink,#1a1712)}
.stmt em{font-style:italic;color:var(--gold,#7a7363)}
.stmt .sub{display:block;font-family:var(--sans,'Inter',system-ui,sans-serif);font-weight:400;
  font-size:clamp(15px,1.5vw,18px);color:var(--mute,#615b50);max-width:54ch;margin-top:24px;line-height:1.55}
.stmt-sec.center .stmt .sub{margin-left:auto;margin-right:auto}
.stmt-sec.dark .stmt{color:var(--bg,#f5f2ea)}
.stmt-sec.dark .eyebrow{color:var(--bg,#f5f2ea);opacity:.55}
.stmt-sec.dark .stmt .sub{color:rgba(245,242,234,.72)}