/* ============================================================
   Michalik Law — site stylesheet
   Sections: 1 fonts · 2 tokens · 3 reset · 4 components/layout
   Extracted from the former Claude Design bundle, 2026-09-15.
   ============================================================ */

/* ---------- 1. Webfonts --------------------------------------
   Jost (geometric sans, Futura lineage) carries the wordmark and
   headings; Work Sans carries running text. Both are variable
   fonts served from this domain — nothing is requested from
   Google. Latin and Latin Extended only: Latin Extended covers
   the Polish, German and French diacritics this site needs.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/worksans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/worksans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/worksans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/worksans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/worksans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/worksans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Design tokens --------------------------------- */
:root{
  /* Ink — near-black, never pure #000 in text */
  --ink-900:#0E0E0E; --ink-800:#171717; --ink-700:#2B2B2B; --ink-600:#4A4A4A;
  --ink-500:#6E6E6E; --ink-400:#909090; --ink-300:#B5B5B5;

  /* Paper — white and two warm off-whites */
  --paper-000:#FFFFFF; --paper-050:#FAF9F7; --paper-100:#F4F2ED; --paper-200:#E7E4DD;

  /* Gold — sampled from the Michalik Law mark */
  --gold-700:#867141; --gold-600:#AE9660; --gold-500:#C8B078; --gold-400:#D8C79A; --gold-100:#F1EADA;

  /* Hairlines */
  --line-strong:#0E0E0E; --line-mid:#C9C6BF; --line-soft:#E7E4DD;

  /* Semantic aliases — use these in components */
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-inverse:var(--paper-000);
  --text-accent:var(--gold-700);
  --surface-page:var(--paper-000);
  --surface-alt:var(--paper-050);
  --surface-panel:var(--paper-100);
  --surface-inverse:var(--ink-900);
  --border-default:var(--line-soft);
  --border-emphasis:var(--line-mid);
  --border-ink:var(--line-strong);
  --accent:var(--gold-500);
  --accent-hover:var(--gold-600);
  --focus-ring:var(--gold-600);
}

:root{
  --font-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --font-body:"Work Sans",system-ui,-apple-system,sans-serif;

  --weight-light:300; --weight-regular:400; --weight-medium:500;

  /* Display / editorial headings — Jost, light, tight */
  --type-display-1:clamp(2.75rem,6.2vw,5.25rem);
  --type-display-2:clamp(2.25rem,4.4vw,3.5rem);
  --type-h1:clamp(1.875rem,3vw,2.625rem);
  --type-h2:clamp(1.375rem,2vw,1.75rem);
  --type-h3:1.125rem;

  /* Running text */
  --type-lede:clamp(1.0625rem,1.35vw,1.3125rem);
  --type-body:1rem;
  --type-small:0.875rem;
  --type-caption:0.75rem;

  /* Eyebrows / nav / labels — uppercase, tracked */
  --type-eyebrow:0.6875rem;
  --type-nav:0.8125rem;

  --leading-display:1.04;
  --leading-heading:1.18;
  --leading-lede:1.55;
  --leading-body:1.72;
  --leading-tight:1.35;

  --tracking-display:-0.02em;
  --tracking-heading:-0.01em;
  --tracking-body:0;
  --tracking-eyebrow:0.22em;
  --tracking-nav:0.14em;
  --tracking-wordmark:0.18em;

  --measure-narrow:34ch;
  --measure-text:58ch;
  --measure-wide:72ch;
}

:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --space-10:128px; --space-11:176px; --space-12:240px;

  /* Section rhythm — generous by default; this brand breathes */
  --section-y:var(--space-11);
  --section-y-tight:var(--space-9);
  --stack-gap:var(--space-5);

  /* Page frame */
  --gutter:clamp(24px,6vw,96px); /* @kind spacing */
  --page-max:1440px;
  --header-h:88px;

  /* Editorial 12-col grid */
  --grid-cols:12; /* @kind other */
  --grid-gap:clamp(20px,2.6vw,40px);
}

:root{
  /* Square by default. Nothing in this brand is rounded except the gold dot. */
  --radius-none:0px; --radius-sm:2px; --radius-pill:999px;
  --hairline:1px;
  --rule-ink:1px solid var(--line-strong);
  --rule-soft:1px solid var(--line-soft);
  --rule-mid:1px solid var(--line-mid);
  --rule-gold:1px solid var(--gold-500);

  /* Elevation: this system uses rules and negative space, not shadows.
     One optional shadow exists for overlays only. */
  --shadow-none:none;
  --shadow-overlay:0 24px 64px rgba(14,14,14,0.14);
}

:root{
  --dur-fast:140ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
  --dur-reveal:900ms; /* @kind other */
  --ease-standard:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
  --ease-out-soft:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --transition-line:transform var(--dur-base) var(--ease-standard);
  --transition-color:color var(--dur-fast) linear,background-color var(--dur-fast) linear,border-color var(--dur-fast) linear;
}
@media (prefers-reduced-motion:reduce){:root{
  --dur-fast:1ms; /* @kind other */
  --dur-base:1ms; /* @kind other */
  --dur-slow:1ms; /* @kind other */
  --dur-reveal:1ms; /* @kind other */
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--type-body);font-weight:var(--weight-regular);line-height:var(--leading-body);text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-light);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);margin:0}
p{margin:0}
img{display:block;max-width:100%}
a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--line-mid);transition:var(--transition-color)}
a:hover{color:var(--gold-700);border-bottom-color:var(--gold-500)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--gold-100);color:var(--ink-900)}


/* ---------- 4. Layout and components ------------------------- */
    html { -webkit-text-size-adjust: 100%; }
    body { margin: 0; background: var(--surface-page); -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; }
    img { max-width: 100%; }
    a { color: var(--text-primary); }
    a:hover { color: var(--gold-700); }
    [data-resp~="mobilebar"] { display: none; }

    /* ---- 900 and below: stack the editorial splits, swap to the compact masthead ---- */
    @media (max-width: 900px) {
      [data-resp~="split"] { grid-template-columns: minmax(0,1fr) !important; }
      [data-resp~="nosticky"] { position: static !important; }
      [data-resp~="cols3"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
      [data-resp~="spacer"] { display: none !important; }
      [data-resp~="deskhead"] { display: none !important; }
      [data-resp~="mobilebar"] { display: block !important; }
      [data-resp~="endbtn"] { justify-self: start !important; }
      footer > div:first-child { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
      footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
    }

    /* ---- phones: tighten the top of the spacing scale, one column everywhere ---- */
    @media (max-width: 760px) {
      :root {
        --space-9: 64px; --space-10: 80px; --space-11: 96px; --space-12: 120px;
        --section-y-tight: 64px;
      }
      [data-resp~="cols3"] { grid-template-columns: minmax(0,1fr) !important; }
      [data-resp~="modal"] { padding: var(--space-7) var(--space-6) var(--space-6) !important; }
    }
    @media (max-width: 620px) {
      [data-resp~="split-sm"] { grid-template-columns: minmax(0,1fr) !important; }
      footer > div:first-child { grid-template-columns: minmax(0,1fr) !important; }
      footer > div:last-child { flex-direction: column; }
    }
    @media (max-width: 420px) {
      :root { --type-display-1: 2.5rem; --type-display-2: 1.875rem; }
      [data-resp~="btnrow"] button, [data-resp~="btnrow"] a { padding-left: 26px !important; padding-right: 26px !important; }
    }
    @media (hover: none) {
      a:hover { color: var(--text-primary); }
    }
    /* The HubSpot form renders in a cross-origin iframe; its fields can only be styled in HubSpot. */
    .hs-form-shell { overflow: hidden; }
    .hs-form-shell > .hs-form-frame { margin-bottom: -80px; }
    @media (max-width: 760px) { .hs-form-shell > .hs-form-frame { margin-bottom: -108px; } }
    @media (max-width: 360px) { .hs-form-shell > .hs-form-frame { margin-bottom: -152px; } }
    .hs-form-frame { position: relative; }
    .hs-form-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: var(--paper-000); z-index: 1; }
    @media (max-width: 760px) { .hs-form-frame::after { height: 88px; } }
    @media (max-width: 360px) { .hs-form-frame::after { height: 136px; } }
    .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink-900); color: var(--paper-000);
      font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
      padding: 14px 22px; text-decoration: none; }
    .skip-link:focus { left: var(--gutter); top: 8px; color: var(--paper-000); }

/* ---------- 5. Primary navigation ----------------------------
   The active item was previously encoded in inline styles, which
   forced a different header into every page. It now keys off
   [aria-current="page"], so the header markup is identical
   everywhere and tools/sync-chrome.ps1 can copy it verbatim.
   ------------------------------------------------------------ */
.nav-link {
  font-family: var(--font-display);
  font-size: var(--type-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--ink-500);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: var(--transition-color);
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--ink-900); }
.nav-link[aria-current="page"] {
  color: var(--ink-900);
  border-bottom-color: var(--gold-500);
}

/* ---------- 6. Mobile menu ------------------------------------
   Hidden until site.js opens it. [hidden] is forced because the
   panel carries display:flex inline.
   ------------------------------------------------------------ */
#mobile-menu[hidden] { display: none !important; }

/* ---------- 7. No-JavaScript fallbacks ------------------------
   Controls that only do something once site.js runs are hidden
   when it cannot. Everything they guard has a plain-link or
   plain-text equivalent that stays visible.
   ------------------------------------------------------------ */
.js-only { display: none; }
.js .js-only { display: revert; }
.js .no-js-only { display: none; }

/* ---------- 8. Consent toggles --------------------------------
   State was previously baked into inline styles regenerated by
   the component runtime. It now derives from aria-checked, so
   site.js flips one attribute and the visual follows.
   ------------------------------------------------------------ */
.switch {
  appearance: none;
  width: 56px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--line-mid);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.switch[aria-checked="true"] {
  border-color: var(--ink-900);
  background: var(--ink-900);
  justify-content: flex-end;
}
.switch:disabled { cursor: default; opacity: 0.38; }
.switch-knob {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background: var(--ink-500);
}
.switch[aria-checked="true"] .switch-knob { background: var(--paper-000); }

/* ---------- 9. Dialogs ----------------------------------------
   Overlays ship hidden and are revealed by site.js. The
   attribute is forced because each carries display:flex inline.
   ------------------------------------------------------------ */
[data-overlay][hidden] { display: none !important; }
body.dialog-open { overflow: hidden; }
.hs-form-mount { min-height: 320px; }

/* The enquiry dialog opens on the consent notice and swaps to the form.
   Both carry display inline, so [hidden] has to be forced. */
.hs-form-consent[hidden],
.hs-form-mount[hidden] { display: none !important; }