/* UI kit — pixel-match recreation of keuersolutions.com */
/* =============================================================
   Keuer Solutions — Colors & Typography
   ISO consulting for construction & trade. Brutalist / architectural aesthetic.
   ============================================================= */

/* Webfont imports — closest Google Fonts match to the live site.
   Live site uses a compressed grotesque display face + a humanist sans body.
   Barlow Condensed approximates the display; Work Sans approximates the body.
   TODO: replace with client-licensed fonts when provided. */
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-18d11855.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-02fe737b.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;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-9dd2e410.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-cc8b861a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-53112fc7.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;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-b22a6575.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-f04e5af9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-1132464e.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;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-bf600b3d.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/font-5d39e70f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/font-fcdcb278.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;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/font-d412d5d8.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/font-8ac70ba9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/font-fa1b96dd.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;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/font-a0369224.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;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-6d1ccc03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-dea2d9e1.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;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-bd924bff.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;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-6d1ccc03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-dea2d9e1.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;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-bd924bff.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;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-6d1ccc03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-dea2d9e1.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;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-bd924bff.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;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-6d1ccc03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-dea2d9e1.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;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-bd924bff.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;
}


:root {
  /* ---------- Core brand ---------- */
  --ink:            #000000;   /* absolute black — hero bg, body text on light */
  --paper:          #FFFFFF;   /* absolute white — page bg, text on dark */

  /* ---------- Neutral scale (cool concrete greys) ---------- */
  --concrete-50:    #F5F5F5;   /* light concrete, section bg */
  --concrete-100:   #EAEAEA;   /* dividers, hover on paper */
  --concrete-200:   #D4D4D4;   /* disabled strokes */
  --concrete-300:   #A8A8A8;   /* captions, meta */
  --concrete-400:   #707070;   /* secondary text */
  --concrete-500:   #3A3A3A;   /* tertiary dark surface */
  --concrete-600:   #1F1F1F;   /* card on black */
  --concrete-700:   #141414;   /* near-black surface */

  /* ---------- Accent — warm peach CTA ---------- */
  --peach-50:       #FBEFE8;
  --peach-100:      #F6DDCF;
  --peach-200:      #F3D7C8;   /* primary CTA fill */
  --peach-300:      #E8B79C;
  --peach-400:      #C98B66;

  /* ---------- Semantic fg/bg ---------- */
  --fg-1:           var(--ink);        /* primary body copy on light */
  --fg-2:           var(--concrete-500);
  --fg-3:           var(--concrete-400);
  --fg-muted:       var(--concrete-300);
  --fg-on-dark:     var(--paper);      /* primary body on dark hero */
  --fg-on-dark-2:   #C8C8C8;           /* secondary on dark */

  --bg-page:        var(--paper);
  --bg-alt:         var(--concrete-50);
  --bg-hero:        var(--ink);
  --bg-card:        var(--paper);
  --bg-card-dark:   var(--concrete-600);

  --stroke-hairline: rgba(255,255,255,0.5);  /* the signature triangle line */
  --stroke-divider:  var(--concrete-100);
  --stroke-input:    var(--concrete-300);

  --cta-fill:        var(--peach-200);
  --cta-fill-hover:  var(--peach-300);
  --cta-text:        var(--ink);

  /* ---------- Typography families ---------- */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Work Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (desktop) ---------- */
  --fs-display:   clamp(56px, 7vw, 104px);  /* @kind font */ /* hero H1 */
  --fs-h1:        clamp(44px, 5.5vw, 72px); /* @kind font */ /* page titles (Contact Us, Who We Help) */
  --fs-h2:        clamp(32px, 3.4vw, 44px); /* @kind font */ /* section headings */
  --fs-h3:        28px;                      /* sub-section */
  --fs-h4:        22px;                      /* card title */
  --fs-h5:        18px;
  --fs-lead:      20px;                      /* hero lede copy */
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   12px;

  --lh-tight:     1.02;   /* @kind font */ /* display */
  --lh-snug:      1.15;   /* @kind font */ /* headings */
  --lh-normal:    1.5;    /* @kind font */ /* body */
  --lh-loose:     1.7;    /* @kind font */ /* long-form */

  --tracking-display: -0.01em;
  --tracking-heading: 0em;
  --tracking-caps:    0.08em;
  --tracking-body:    0em;

  /* ---------- Spacing (4pt grid) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* ---------- Radii ---------- */
  --r-none: 0px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-pill: 999px;

  /* ---------- Shadows (restrained) ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.12);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --dur-fast:      160ms;  /* @kind other */
  --dur-med:       260ms;  /* @kind other */
  --dur-slow:      480ms;  /* @kind other */

  /* ---------- Layout ---------- */
  --container:  1200px;
  --gutter:     24px;
}

/* ============ Semantic element defaults ============ */
html { color: var(--fg-1); background: var(--bg-page); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 700; }
h5 { font-size: var(--fs-h5); font-weight: 700; }

p  { margin: 0 0 1em; line-height: var(--lh-normal); color: var(--fg-1); text-wrap: pretty; }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

.lead { font-size: var(--fs-lead); line-height: 1.4; color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.7; }

code, pre { font-family: var(--font-mono); font-size: 0.95em; }


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--fg-1); }
body { font-family: var(--font-body); }
img { display: block; max-width: 100%; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
.nav {
  background: #000; color: #fff;
  padding: 20px 32px; display: flex; align-items: center; gap: 40px;
  position: sticky; top: 0; z-index: 50;
}
.nav .logo { font-family: var(--font-display); font-weight: 900; font-size: 56px; letter-spacing: 0.02em; cursor: pointer; }
.nav-links { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.nav-link { font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; cursor: pointer; transition: opacity 160ms; }
.nav-link:hover { opacity: 0.7; }
.nav-link.active { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: #FFD400; }
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: -16px; margin-top: 14px;
  background: #000; padding: 14px 0; min-width: 220px;
  border: 1px solid #222; display: none;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-item { display: block; padding: 10px 22px; color: #fff; text-decoration: none; font-size: 14px; }
.nav-dropdown-item:hover { background: #141414; }

/* Mobile hamburger button (hidden on desktop) */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  margin: 5px auto;
  transition: transform 200ms ease, opacity 160ms ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-down sheet */
.nav-sheet {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 1000;
}
.nav-sheet.is-open { opacity: 1; pointer-events: auto; }
.nav-sheet-inner {
  position: absolute; top: 0; left: 0; right: 0;
  background: #000;
  padding: 80px 24px 32px;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  border-bottom: 1px solid #222;
  max-height: 100vh; overflow-y: auto;
}
.nav-sheet.is-open .nav-sheet-inner { transform: translateY(0); }
.nav-sheet-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.nav-sheet-link.active { color: var(--peach, #f5d3b8); }
.nav-sheet-toggle .nav-sheet-caret { transition: transform 200ms ease; font-size: 14px; opacity: 0.7; }
.nav-sheet-toggle.is-open .nav-sheet-caret { transform: rotate(180deg); }
.nav-sheet-sub {
  display: flex; flex-direction: column;
  padding: 4px 0 8px 16px;
  border-bottom: 1px solid #1a1a1a;
}
.nav-sheet-sub a {
  display: block;
  padding: 12px 4px;
  color: #c8c8c8;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.nav-sheet-sub a:hover { color: #fff; }
.nav-sheet-cta {
  display: inline-block;
  margin-top: 24px;
  padding: 16px 22px;
  background: var(--peach, #f5d3b8);
  color: #000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: 15px; padding: 14px 32px; border-radius: 999px;
  border: none; cursor: pointer; text-decoration: none; text-align: center;
  transition: background 160ms, transform 80ms;
}
.btn-primary { background: #F3D7C8; color: #000; }
.btn-primary:hover { background: #E8B79C; }
.btn-primary:active { transform: scale(0.98); }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid #fff; }
.btn-outline-light:hover { background: #fff; color: #000; }

/* ---------- Hero ---------- */
.hero {
  background: #000; color: #fff; padding: 0; overflow: hidden;
  min-height: 520px; display: grid; grid-template-columns: 1fr 1fr;
}
.hero-image {
  background-size: cover; background-position: center;
  min-height: 520px;
}
.hero-content { padding: 90px 72px; display: flex; flex-direction: column; justify-content: center; }
.hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(48px, 5.5vw, 80px); line-height: 1.02;
  letter-spacing: -0.01em; margin: 0 0 24px;
}
.hero p {
  font-size: 17px; line-height: 1.55; color: #E0E0E0;
  margin: 0 0 32px; max-width: 520px;
}
.hero .btn-row { display: flex; gap: 14px; }
.hero-cta-caption {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #A8A8A8;
  letter-spacing: 0.01em;
  max-width: 480px;
}
.hero-cta-caption strong { color: #fff; font-weight: 600; }

/* ---------- Section ---------- */
.section { padding: 96px 0; }
.section.alt { background: var(--concrete-50); }
.section.dark { background: #000; color: #fff; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 48px); line-height: 1.1; margin: 0 0 14px;
}
.section-head p { font-size: 17px; color: #3A3A3A; max-width: 680px; margin: 0 auto; }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #707070; margin-bottom: 10px;
  display: inline-block;
  /* Underline that follows each wrapped line cleanly */
  text-decoration: underline;
  text-decoration-color: #FFD400;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
  /* Eyebrows are short — keep on one line on desktop so accent stays tidy.
     On narrow viewports the per-line underline above kicks in cleanly. */
  white-space: nowrap;
}
@media (max-width: 480px) {
  .eyebrow { white-space: normal; }
}

/* ---------- Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ---------- Industry tile ---------- */
.tile {
  background: #F5F5F5; border: 1px solid #EAEAEA; padding: 32px 22px;
  text-align: center; cursor: pointer; transition: background 200ms, border-color 200ms;
  position: relative;
}
.tile::before {
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:#FFD400; transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tile:hover { background: #EAEAEA; }
.tile:hover::before { width: 100%; }
.tile img { width: 56px; height: 56px; margin: 0 auto 18px; }
.tile .tile-icon { width: 56px; height: 56px; margin: 0 auto 18px; display: block; color: #000; }
.tile h4 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.tile p { font-size: 14px; color: #3A3A3A; line-height: 1.5; margin: 0; }

/* ---------- Service card ---------- */
.service {
  display: flex; gap: 22px; padding: 26px; background: #fff;
  border: 1px solid #EAEAEA; transition: border 160ms;
}
.service:hover { border-color: #000; }
.service img {
  width: 52px; height: 52px; flex: none;
  /* Source icons are white-on-transparent (intended for dark cards).
     Convert to black so they read on the white service card. */
  filter: brightness(0);
}
.service .service-icon { width: 52px; height: 52px; flex: none; color: #000; }
.service h4 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; }
.service p { font-size: 14px; color: #3A3A3A; line-height: 1.5; margin: 0; }

/* Variant — used in grid-3 ISO tile rows; icon centered above and text centered */
.grid-3 > .service {
  flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; gap: 16px;
}
.grid-3 > .service > div { width: 100%; }

/* ---------- Step ---------- */
.step { display: flex; gap: 32px; padding: 32px 0; border-bottom: 1px solid #EAEAEA; }
.step:last-child { border-bottom: none; }
.step-num-col { width: 120px; flex: none; }
.step-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #707070; margin-bottom: 6px; }
.step-num { font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 0.9; position: relative; display: inline-block; padding-bottom: 6px; }
.step-num::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 32px; background: #FFD400; }
.step-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; margin: 8px 0 8px; }
.step-body p { font-size: 15px; color: #3A3A3A; margin: 0; max-width: 640px; }

/* ---------- Form ---------- */
.form-row { display: flex; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.field label { font-size: 13px; font-weight: 500; }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 15px; padding: 12px 14px;
  border: 1px solid #A8A8A8; border-radius: 4px; background: #fff; color: #000;
  outline: none; transition: border-color 160ms;
}
.field input:focus, .field textarea:focus { border-color: #000; }
.field textarea { min-height: 100px; resize: vertical; }

/* ---------- CTA band ---------- */
.cta-band {
  background: #000; color: #fff; padding: 80px 0; text-align: center;
}
.cta-band h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 4.5vw, 56px); margin: 0 0 14px; }
.cta-band .sub { font-size: 17px; color: #C8C8C8; margin: 0 0 32px; }

/* ---------- Footer ---------- */
.footer { background: #000; color: #fff; padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.footer-logo { font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: 0.02em; margin-bottom: 18px; }
.footer a { color: #fff; text-decoration: none; display: block; font-size: 14px; padding: 4px 0; }
.footer a:hover { opacity: 0.7; }
.footer h5 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #A8A8A8; margin: 0 0 14px; }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid #222; font-size: 12px; color: #A8A8A8; display: flex; justify-content: space-between; }

/* ---------- Page title hero (secondary pages) ---------- */
.page-hero {
  background: #000; color: #fff;
  min-height: 360px; display: grid; grid-template-columns: 50% 1fr;
}
.page-hero-image { background-size: cover; background-position: center; }
.page-hero-visual {
  background: #0A0A0A;
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 360px;
}
.quant-globe-svg {
  width: 100%; height: 100%;
  display: block;
  position: absolute; inset: 0;
}
/* Meridians spin slowly around the vertical axis to suggest rotation. */
.qg-meridians {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: qg-spin 26s linear infinite;
}
@keyframes qg-spin {
  from { transform: scaleX(1); }
  25%  { transform: scaleX(0.05); }
  50%  { transform: scaleX(-1); }
  75%  { transform: scaleX(-0.05); }
  to   { transform: scaleX(1); }
}
/* Lead lines fade in on load */
.qg-leader { opacity: 0; animation: qg-leader-in 600ms ease-out forwards; }
@keyframes qg-leader-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .qg-meridians { animation: none; }
  .qg-leader { opacity: 1; animation: none; }
}
.page-hero-content { padding: 80px 72px; display: flex; flex-direction: column; justify-content: center; }
.page-hero h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 6vw, 88px); line-height: 1.02; margin: 0; }

/* ---------- CRO additions ---------- */
.proof-bar { background:#0A0A0A; color:#fff; padding:48px 0; border-top:1px solid #1F1F1F; border-bottom:1px solid #1F1F1F; }
.proof-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; text-align:center; }
.proof-stat { display:flex; flex-direction:column; align-items:center; gap:14px; }
.proof-num { font-family:var(--font-display); font-weight:900; font-size:44px; line-height:1; color:#fff; position:relative; display:inline-block; padding-bottom:10px; letter-spacing:-0.005em; white-space:nowrap; }
.proof-num-unit { font-size:0.42em; font-weight:700; margin-left:4px; letter-spacing:0.02em; vertical-align: 0.45em; color:#C8C8C8; }
.proof-num::after { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:3px; width:32px; background:#FFD400; }
.proof-label { font-size:12.5px; letter-spacing:0.04em; line-height:1.45; color:#A8A8A8; max-width:200px; }

.promise-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; }
.promise { padding:32px 28px; border-left:1px solid #1F1F1F; }
.promise:first-child { border-left:none; padding-left:0; }
.promise:last-child { padding-right:0; }
.promise-title { font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.15; color:#fff; margin-bottom:8px; letter-spacing:0.01em; }
.promise-body { font-size:13.5px; line-height:1.5; color:#A8A8A8; }

.founder { display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:center; background:#F5F5F5; padding:40px; border-left:4px solid #000; }
.founder-photo { aspect-ratio:1/1; background:#1F1F1F; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:120px; font-weight:900; color:#fff; letter-spacing:-0.02em; }
.founder h3 { font-family:var(--font-display); font-size:32px; font-weight:800; margin:0 0 6px; }
.founder .role { font-size:13px; color:#707070; letter-spacing:0.04em; text-transform:uppercase; font-weight:600; margin-bottom:16px; }
.founder .creds { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.founder .cred { background:#fff; border:1px solid #D4D4D4; padding:6px 12px; font-size:12px; font-weight:500; }

.lead-magnet {
  background: var(--peach-100, #F6DDCF);
  color: #000;
  border: 1px solid var(--peach-200, #F3D7C8);
  padding: 32px 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.lead-magnet h3 { font-family:var(--font-display); font-size:28px; font-weight:800; margin:0 0 4px; }
.lead-magnet p { margin:0; font-size:14px; font-weight:500; color: #1F1F1F; }
.lead-magnet .mag-form { display:flex; gap:8px; }
.lead-magnet .mag-form input { padding:12px 14px; border:1px solid #1F1F1F; background:#fff; font-size:14px; min-width:220px; font-family:var(--font-body); }
.lead-magnet .mag-form button { background:#000; color:#fff; border:none; padding:12px 22px; font-weight:600; font-family:var(--font-body); cursor:pointer; font-size:14px; }
.lead-magnet .mag-form button:hover { background:#1F1F1F; }

.risk-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.risk-list li { display:flex; gap:12px; align-items:flex-start; font-size:15px; }
.risk-list li::before { content:"✓"; color:#000; font-weight:900; font-size:16px; flex:none; margin-top:1px; background:#FFD400; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }

.sticky-cta { position:fixed; bottom:0; left:0; right:0; background:#000; color:#fff; padding:14px 20px; display:none; align-items:center; justify-content:space-between; z-index:100; border-top:1px solid #1F1F1F; }
.sticky-cta .txt { font-size:13px; font-weight:600; }
.sticky-cta .btn { padding:10px 18px; font-size:13px; }
@media (max-width: 900px) {
  .sticky-cta { display:flex; }
  .proof-grid { grid-template-columns:repeat(2, 1fr); gap:24px; }
  .promise-grid { grid-template-columns:1fr 1fr; }
  .promise { border-left:none; border-top:1px solid #1F1F1F; padding:24px; }
  .promise:first-child, .promise:nth-child(2) { border-top:none; }
  .promise:nth-child(odd) { padding-left:0; }
  .promise:nth-child(even) { padding-right:0; }
  .founder { grid-template-columns:1fr; padding:28px; }
  .founder-photo { max-width:200px; }
  .lead-magnet { grid-template-columns:1fr; }
  .lead-magnet .mag-form { flex-direction:column; }
  .lead-magnet .mag-form input { min-width:0; width:100%; }
}

/* ---------- Tweaks panel ---------- */
.tweaks-panel { position:fixed; bottom:20px; right:20px; background:#000; color:#fff; border:1px solid #333; padding:18px 20px; z-index:200; font-family:var(--font-body); width:280px; display:none; }
.tweaks-panel.open { display:block; }
.tweaks-panel h4 { font-family:var(--font-display); font-size:16px; margin:0 0 14px; letter-spacing:0.04em; text-transform:uppercase; font-weight:800; }
.tweak-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #1F1F1F; font-size:13px; }
.tweak-row:last-child { border-bottom:none; }
.tweak-row input[type="checkbox"] { accent-color:#FFD400; width:18px; height:18px; }

.integrations { padding:48px 40px; background:#0A0A0A; color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }

/* ---------- HSEQ Standards page ---------- */
.standard-section { padding:96px 0; border-top:1px solid #EAEAEA; }
.standard-section.alt { background:#F5F5F5; }
.standard-head { display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px; }
.standard-code { font-family:var(--font-display); font-weight:900; font-size:clamp(64px, 8vw, 120px); line-height:1; color:#000; flex:none; letter-spacing:-0.02em; }
.standard-list ul { list-style:none; padding:0; margin:0; }
.standard-list li { font-size:15.5px; line-height:1.5; padding:12px 0 12px 24px; border-bottom:1px solid #E0E0E0; position:relative; color:#000; }
.standard-list li:last-child { border-bottom:none; }
.standard-list li::before { content:"—"; position:absolute; left:0; top:12px; color:#707070; font-weight:700; }

.ims-benefit { background:#fff; border:1px solid #EAEAEA; padding:28px; display:flex; flex-direction:column; }
.ims-benefit-num { font-family:var(--font-display); font-weight:900; font-size:34px; line-height:1; color:#A8A8A8; margin-bottom:12px; }
.ims-benefit h4 { font-family:var(--font-display); font-size:22px; font-weight:800; margin:0 0 10px; line-height:1.15; }
.ims-benefit p { font-size:14.5px; color:#3A3A3A; line-height:1.55; margin:0; }

/* ---------- Why Certified page ---------- */
.reason-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.reason { background:#fff; border:1px solid #EAEAEA; padding:28px; display:flex; flex-direction:column; }
.reason-num { font-family:var(--font-display); font-weight:900; font-size:30px; line-height:1; color:#A8A8A8; margin-bottom:14px; }
.reason h4 { font-family:var(--font-display); font-size:21px; font-weight:800; margin:0 0 10px; line-height:1.15; }
.reason p { font-size:14.5px; color:#3A3A3A; line-height:1.55; margin:0; }
.reason-cta { background:#000; color:#fff; border-color:#000; }
.reason-cta h4 { color:#fff; }
.reason-cta p { color:#C8C8C8; margin-bottom:18px; }

/* Founder factual statement (replaces FounderBlock) */
.founder-quote-section { background:#F5F5F5; }
.founder-quote { max-width:1100px; margin:0 auto; padding:24px 0; text-align:center; }
.fq-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#707070; margin-bottom:24px; }
.fq-fact { font-family:var(--font-display); font-weight:700; font-size:clamp(28px, 3.6vw, 46px); line-height:1.18; letter-spacing:-0.005em; color:#000; margin:0 auto 32px; max-width:920px; text-wrap:balance; }
.fq-rule { display:block; width:64px; height:2px; background:#000; margin:0 auto; }

/* ---------- Inline schedule picker on contact form ---------- */
.sched { margin-top:12px; padding:24px; border:1px solid #1F1F1F; background:#FAFAFA; }
.sched-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:16px; }
.sched-eyebrow { font-family:var(--font-display); font-weight:800; font-size:18px; color:#000; letter-spacing:-0.005em; }
.sched-sub { font-size:12px; color:#707070; margin-top:4px; letter-spacing:0.02em; }
.sched-clear { background:none; border:none; color:#707070; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; padding:4px 0; }
.sched-clear:hover { color:#000; }

.sched-body { display:grid; grid-template-columns:1fr 220px; gap:24px; align-items:start; }

.sched-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sched-cal-month { font-family:var(--font-display); font-weight:700; font-size:16px; }
.sched-nav-btn { width:32px; height:32px; background:#fff; border:1px solid #D8D8D8; cursor:pointer; font-size:18px; line-height:1; color:#000; font-weight:600; }
.sched-nav-btn:hover:not(:disabled) { background:#000; color:#fff; border-color:#000; }
.sched-nav-btn:disabled { opacity:0.3; cursor:not-allowed; }

.sched-cal-dow { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; margin-bottom:4px; }
.sched-cal-dow > div { font-size:10px; font-weight:700; text-align:center; color:#707070; padding:6px 0; letter-spacing:0.08em; text-transform:uppercase; }

.sched-cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.sched-day {
  aspect-ratio:1/1; background:#fff; border:1px solid #EAEAEA; cursor:pointer;
  font-size:13px; font-weight:500; color:#000; font-family:var(--font-body);
  transition:background 100ms, border-color 100ms, color 100ms;
}
.sched-day:hover:not(:disabled) { background:#000; color:#fff; border-color:#000; }
.sched-day.out { color:#C8C8C8; background:#FAFAFA; }
.sched-day.dis { color:#D8D8D8; background:#FAFAFA; cursor:not-allowed; }
.sched-day.today { font-weight:800; box-shadow:inset 0 -2px 0 #000; }
.sched-day.sel { background:#000; color:#fff; border-color:#000; }
.sched-day.sel.today { box-shadow:inset 0 -2px 0 #FFD400; }

.sched-times-head { font-size:13px; color:#000; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #EAEAEA; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sched-times-head strong { font-family:var(--font-display); font-weight:700; font-size:14px; }
.sched-times-tz { font-size:10px; color:#707070; letter-spacing:0.08em; }
.sched-times-empty { color:#707070; font-size:13px; }

.sched-times-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-height:264px; overflow-y:auto; padding-right:4px; }
.sched-slot {
  padding:10px 8px; background:#fff; border:1px solid #D8D8D8; cursor:pointer;
  font-size:13px; font-weight:600; color:#000; font-family:var(--font-body);
  transition:background 100ms, border-color 100ms, color 100ms;
}
.sched-slot:hover:not(:disabled) { background:#000; color:#fff; border-color:#000; }
.sched-slot.sel { background:#000; color:#fff; border-color:#000; }
.sched-slot:disabled { opacity:0.4; cursor:not-allowed; }

.sched-summary {
  margin-top:20px; padding:14px 18px; background:#000; color:#fff;
  display:flex; align-items:center; gap:12px; font-size:14px;
}
.sched-dot { width:8px; height:8px; background:#FFD400; border-radius:50%; flex:none; }
.sched-summary strong { font-weight:700; }

@media (max-width:780px) {
  .sched-body { grid-template-columns:1fr; }
  .sched-times-grid { max-height:none; grid-template-columns:repeat(3, 1fr); }
}
.fq-body { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin:40px auto 0; max-width:920px; text-align:left; }
.fq-body p { font-size:16px; line-height:1.55; color:#1F1F1F; margin:0; }
.fq-meta { display:grid; grid-template-columns:repeat(3, max-content); gap:64px; margin:48px auto 0; padding-top:32px; border-top:1px solid #D8D8D8; max-width:920px; justify-content:center; text-align:left; }
.fq-meta-item { display:flex; flex-direction:column; gap:6px; }
.fq-meta-num { font-family:var(--font-display); font-weight:800; font-size:40px; line-height:1; color:#000; letter-spacing:-0.01em; }
.fq-meta-label { font-size:12px; line-height:1.4; color:#707070; letter-spacing:0.02em; }

@media (max-width:780px) {
  .fq-body { grid-template-columns:1fr; gap:18px; }
  .fq-meta { gap:32px; }
  .fq-meta-num { font-size:32px; }
}

.cost-list { display:flex; flex-direction:column; gap:2px; }
.cost-row { display:grid; grid-template-columns:160px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid #1F1F1F; align-items:start; }
.cost-row:last-child { border-bottom:none; }
.cost-amt { font-family:var(--font-display); font-weight:800; font-size:18px; color:#F3D7C8; letter-spacing:0.02em; }
.cost-txt { font-size:15px; color:#C8C8C8; line-height:1.5; }

.faq { margin-top:20px; }
.faq-item { border-bottom:1px solid #EAEAEA; padding:18px 0; }
.faq-item summary { font-family:var(--font-display); font-weight:700; font-size:19px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:26px; font-weight:400; color:#707070; line-height:1; }
.faq-item[open] summary::after { content:"–"; }
.faq-item p { font-size:15px; color:#3A3A3A; line-height:1.6; margin:14px 0 0; max-width:760px; }

@media (max-width: 900px) {
  .reason-grid { grid-template-columns:1fr; }
  .cost-row { grid-template-columns:1fr; gap:4px; }
}
.integrations h2 { font-family:var(--font-display); font-weight:900; font-size:42px; line-height:1.05; margin:0 0 16px; }
.integrations p { color:#C8C8C8; font-size:16px; line-height:1.6; margin:0 0 20px; }
.integrations .app-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.integrations .app-grid-2 { grid-template-columns:repeat(2, 1fr); }
.integrations .app { background:#1F1F1F; border:1px solid #2A2A2A; padding:18px 14px; text-align:center; font-size:13px; font-weight:600; color:#fff; transition: border-color 160ms, background 160ms; }
.integrations .app:hover { border-color:#FFD400; background:#141414; }
.integrations .app small { display:block; color:#707070; font-weight:400; font-size:11px; margin-top:2px; letter-spacing:0.04em; }
.integrations .app-label { font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#A8A8A8; margin:0 0 10px; }
.integrations .app-grid-sm { grid-template-columns:repeat(4, 1fr); }
.integrations .app.app-sm { padding:12px 10px; font-size:12.5px; color:#C8C8C8; }

/* ---------- Image placeholder slot ----------
   Subtly-striped neutral surface + mono caption marking where a real photo goes.
   Stays in-palette (concrete + peach + ink) and reads as "intentionally blank". */
.img-placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}
.img-placeholder--dark { background: #0A0A0A; color: #C8C8C8; }
.img-placeholder--light { background: var(--concrete-50, #F5F5F5); color: #3A3A3A; }
.img-placeholder-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 18px,
    rgba(255,255,255,0.025) 18px,
    rgba(255,255,255,0.025) 19px
  );
  pointer-events: none;
}
.img-placeholder--light .img-placeholder-stripes {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 18px,
    rgba(0,0,0,0.04) 18px,
    rgba(0,0,0,0.04) 19px
  );
}
.img-placeholder::before {
  /* Hairline corner crop — keeps the signature triangle motif without the photo */
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.img-placeholder--light::before { border-color: rgba(0, 0, 0, 0.14); }
.img-placeholder-caption {
  position: relative;
  z-index: 1;
  margin: 0 32px 28px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 320px;
}
.img-placeholder-marker { color: var(--peach-200, #F3D7C8); flex: none; }
.img-placeholder--light .img-placeholder-marker { color: var(--peach-400, #C98B66); }
.img-placeholder-hint { opacity: 0.85; }
/* When the placeholder fills the hero-image slot it inherits its height */
.hero-image.img-placeholder,
.page-hero-image.img-placeholder { min-height: inherit; }

.hero-anim-f {
  background: #000;
  min-height: 520px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Vertical hairline guide on the left */
.haf-guide {
  position: absolute;
  top: 0; bottom: 0; left: 12px;
  width: 1px;
  background: rgba(255,255,255,0.2);
}

/* Scrolling word column — sits centered-left, huge compressed type */
.haf-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.haf-scroll-inner {
  display: flex;
  flex-direction: column;
  animation: haf-scroll 28s linear infinite;
  will-change: transform;
}
@keyframes haf-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.haf-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255,255,255,0.55);
  padding: 6px 0;
  white-space: nowrap;
  text-align: center;
}
.haf-word:nth-child(3n) { color: rgba(255,255,255,0.13); -webkit-text-stroke: 0; }
.haf-word:nth-child(5n) { color: #F3D7C8; -webkit-text-stroke: 0; }

/* Foreground triangle — fades in, slowly breathes */
.haf-triangle {
  position: absolute;
  right: -40px; bottom: -40px;
  width: 82%;
  height: 82%;
  opacity: 0;
  animation: haf-tri-in 2.4s ease-out 0.3s forwards, haf-tri-breathe 9s ease-in-out 2.7s infinite;
}
@keyframes haf-tri-in {
  0%   { opacity: 0; transform: translate(20px, 20px) scale(0.96); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes haf-tri-breathe {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-4px, -4px) scale(1.012); }
}

/* Peach accent dot — pulses near the triangle apex */
.haf-accent {
  position: absolute;
  top: 22%;
  right: 22%;
  width: 14px;
  height: 14px;
  background: #F3D7C8;
  border-radius: 50%;
  animation: haf-pulse 3.2s ease-in-out infinite;
}
@keyframes haf-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(243,215,200,0.55); }
  50%      { transform: scale(1.25); box-shadow: 0 0 0 14px rgba(243,215,200,0); }
}

/* Small corner tag */
.haf-tag {
  position: absolute;
  bottom: 22px; left: 36px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .haf-scroll-inner { animation: none; }
  .haf-triangle { opacity: 1; animation: none; }
  .haf-accent { animation: none; }
}

@media (max-width: 900px) {
  .hero-anim-f { min-height: 320px; }
  .haf-word { font-size: clamp(48px, 14vw, 72px); }
  .haf-triangle { width: 90%; height: 90%; right: -20px; bottom: -20px; }
}
@media (max-width: 900px) { .integrations { grid-template-columns:1fr; padding:32px 24px; } .integrations .app-grid { grid-template-columns:repeat(2, 1fr); } }

/* ---------- Utility ---------- */
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.text-lg { font-size: 18px; line-height: 1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero, .page-hero { grid-template-columns: 1fr; }
  .hero-image, .page-hero-image { min-height: 260px; }
  .hero-content, .page-hero-content { padding: 48px 28px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .step { flex-direction: column; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Templates page ---------- */
.tpl-samples { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.tpl-sample { background:#fff; border:1px solid #EAEAEA; padding:24px; display:flex; flex-direction:column; gap:8px; }
.tpl-sample-tag { font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:0.12em; color:#707070; }
.tpl-sample h4 { font-family:var(--font-display); font-size:18px; font-weight:800; margin:0; line-height:1.2; }
.tpl-sample-fmt { font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#707070; margin:0; font-weight:600; }
.tpl-sample-blurb { font-size:13.5px; color:#3A3A3A; line-height:1.5; margin:6px 0 14px; flex:1; }
.tpl-sample-form { display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.tpl-sample-form input { padding:10px 12px; border:1px solid #A8A8A8; font-size:13px; font-family:var(--font-body); }
.tpl-sample-form input:focus { outline:none; border-color:#000; }
.tpl-sample-form button { background:#000; color:#fff; border:none; padding:10px 12px; font-weight:600; font-family:var(--font-body); cursor:pointer; font-size:13px; letter-spacing:0.02em; }
.tpl-sample-form button:hover { background:#1F1F1F; }
.tpl-sample-sent { background:#000; color:#fff; padding:10px 12px; font-size:13px; font-weight:500; text-align:center; }

.tpl-bundle { display:grid; grid-template-columns:1.4fr 1fr; gap:0; border:1px solid #000; }
.tpl-bundle-main { padding:48px; background:#fff; }
.tpl-bundle-tag { font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:0.16em; color:#000; margin-bottom:18px; }
.tpl-bundle-main h3 { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3vw,38px); line-height:1.12; margin:0 0 18px; }
.tpl-bundle-desc { font-size:16px; color:#3A3A3A; line-height:1.55; margin:0 0 24px; }
.tpl-bundle-includes { list-style:none; padding:0; margin:0; }
.tpl-bundle-includes li { font-size:14.5px; line-height:1.5; padding:10px 0 10px 26px; border-bottom:1px solid #EAEAEA; position:relative; color:#1F1F1F; }
.tpl-bundle-includes li:last-child { border-bottom:none; }
.tpl-bundle-includes li::before { content:"✓"; position:absolute; left:0; top:10px; font-weight:800; color:#000; }
.tpl-bundle-buy { background:#000; color:#fff; padding:48px; display:flex; flex-direction:column; gap:18px; }
.tpl-bundle-price-amt { font-family:var(--font-display); font-weight:900; font-size:64px; line-height:1; letter-spacing:-0.01em; }
.tpl-bundle-price-sub { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#A8A8A8; margin-top:6px; }
.tpl-bundle-buy .btn { width:100%; padding:16px 20px; font-size:15px; }
.tpl-bundle-meta { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:8px; }
.tpl-bundle-meta li { font-size:13px; color:#C8C8C8; padding-left:18px; position:relative; line-height:1.4; }
.tpl-bundle-meta li::before { content:"›"; position:absolute; left:0; color:#FFD400; font-weight:800; }
.tpl-bundle-foot { font-size:13px; color:#A8A8A8; margin:8px 0 0; padding-top:18px; border-top:1px solid #1F1F1F; line-height:1.5; }
.tpl-bundle-foot a { color:#FFD400; text-decoration:underline; }

.tpl-accordion { border-top:1px solid #D8D8D8; }
.tpl-cat { border-bottom:1px solid #D8D8D8; }
.tpl-cat-head {
  display:grid; grid-template-columns:90px 1fr 60px 32px; gap:20px; align-items:center;
  padding:22px 8px; width:100%; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-body); transition:background 120ms;
}
.tpl-cat-head:hover { background:#EFEFEF; }
.tpl-cat.is-open .tpl-cat-head { background:#000; color:#fff; }
.tpl-cat-code { font-family:var(--font-display); font-weight:900; font-size:14px; letter-spacing:0.06em; color:inherit; }
.tpl-cat.is-open .tpl-cat-code { color:#FFD400; }
.tpl-cat-label { font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.2; margin-bottom:4px; }
.tpl-cat-blurb { font-size:13.5px; color:#3A3A3A; line-height:1.45; }
.tpl-cat.is-open .tpl-cat-blurb { color:#C8C8C8; }
.tpl-cat-count { font-family:var(--font-display); font-weight:900; font-size:28px; text-align:right; }
.tpl-cat-toggle { font-family:var(--font-display); font-size:24px; text-align:center; line-height:1; }
.tpl-cat-list {
  list-style:none; padding:18px 8px 28px 110px; margin:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 32px; background:#fff; border-top:1px solid #1F1F1F;
}
.tpl-cat-list li { font-size:13.5px; color:#1F1F1F; padding:6px 0; border-bottom:1px dashed #E0E0E0; }
.tpl-cat-list li:last-child, .tpl-cat-list li:nth-last-child(2) { /* keep last row clean if even */ }

.tpl-fit { display:flex; flex-direction:column; gap:24px; }
.tpl-fit-block { background:#0A0A0A; border:1px solid #1F1F1F; padding:24px; }
.tpl-fit-head { font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; }
.tpl-fit-block ul { list-style:none; padding:0; margin:0; }
.tpl-fit-block li { font-size:14px; color:#C8C8C8; line-height:1.55; padding:8px 0 8px 22px; position:relative; border-bottom:1px solid #1F1F1F; }
.tpl-fit-block li:last-child { border-bottom:none; }
.tpl-fit-block li::before { content:"›"; position:absolute; left:0; top:8px; color:#707070; font-weight:800; }

.tpl-compare { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tpl-compare-col { background:#fff; border:1px solid #EAEAEA; padding:36px; display:flex; flex-direction:column; cursor:pointer; transition: background 180ms, color 180ms, border-color 180ms; }
.tpl-compare-eyebrow { font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:0.14em; color:#707070; margin-bottom:8px; }
.tpl-compare-col h3 { font-family:var(--font-display); font-size:30px; font-weight:800; margin:0 0 16px; line-height:1.1; }
.tpl-compare-price { font-family:var(--font-display); font-weight:900; font-size:42px; line-height:1; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid #EAEAEA; }
.tpl-compare-price span { display:block; font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:#707070; margin-top:8px; }
.tpl-compare-col ul { list-style:none; padding:0; margin:0 0 24px; flex:1; }
.tpl-compare-col li { font-size:14.5px; line-height:1.5; padding:10px 0 10px 22px; position:relative; border-bottom:1px solid #EAEAEA; }
.tpl-compare-col li::before { content:"✓"; position:absolute; left:0; top:10px; font-weight:800; color:#000; }

/* Active card — defaults to Built & Certified, then follows whichever card you hover
   and stays there until you hover the other. Driven by JS (.is-active). */
.tpl-compare-col.is-active { background:#000; color:#fff; border-color:#FFD400; }
.tpl-compare-col.is-active .tpl-compare-eyebrow { color:#FFD400; }
.tpl-compare-col.is-active .tpl-compare-price { border-bottom-color:#1F1F1F; }
.tpl-compare-col.is-active .tpl-compare-price span { color:#A8A8A8; }
.tpl-compare-col.is-active li { border-bottom-color:#1F1F1F; color:#C8C8C8; }
.tpl-compare-col.is-active li strong { color:#fff; }
.tpl-compare-col.is-active li::before { color:#FFD400; }

@media (max-width: 1000px) {
  .tpl-samples { grid-template-columns:repeat(2, 1fr); }
  .tpl-bundle { grid-template-columns:1fr; }
  .tpl-compare { grid-template-columns:1fr; }
  .tpl-cat-head { grid-template-columns:60px 1fr 40px 24px; gap:12px; }
  .tpl-cat-list { padding-left:60px; grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .tpl-samples { grid-template-columns:1fr; }
  .tpl-bundle-main, .tpl-bundle-buy { padding:28px; }
}

/* ---------- Packages grid (Templates page, May 2026 refresh) ---------- */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: stretch;
  border: 1px solid #000;
}
.pkg-card {
  background: #fff;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-right: 1px solid #EAEAEA;
}
.pkg-card:last-child { border-right: none; }
.pkg-card-feat {
  background: #000;
  color: #fff;
  border-right-color: #000;
  margin: -16px 0;
  z-index: 1;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.pkg-card-feat + .pkg-card { border-left: 1px solid #000; }
.pkg-card-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--peach-200);
  color: #000;
  padding: 6px 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pkg-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #EAEAEA;
}
.pkg-card-feat .pkg-card-head { border-bottom-color: #1F1F1F; }
.pkg-card-code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #707070;
}
.pkg-card-feat .pkg-card-code { color: #FFD400; }
.pkg-card-icon { width: 40px; height: 40px; }
.pkg-card-feat .pkg-card-icon { filter: invert(1); }
.pkg-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 12px;
}
.pkg-card-summary {
  font-size: 14.5px;
  line-height: 1.55;
  color: #3A3A3A;
  margin: 0 0 24px;
}
.pkg-card-feat .pkg-card-summary { color: #C8C8C8; }
.pkg-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 0;
  border-top: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
}
.pkg-card-feat .pkg-card-stats { border-color: #1F1F1F; }
.pkg-card-stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: #000;
}
.pkg-card-feat .pkg-card-stat-num { color: #fff; }
.pkg-card-stat-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #707070;
  margin-top: 6px;
  font-weight: 600;
}
.pkg-card-feat .pkg-card-stat-label { color: #A8A8A8; }
.pkg-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}
.pkg-card-bullets li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1F1F1F;
  border-bottom: 1px solid #EAEAEA;
}
.pkg-card-bullets li:last-child { border-bottom: none; }
.pkg-card-bullets li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 8px;
  color: #000;
  font-weight: 800;
}
.pkg-card-feat .pkg-card-bullets li {
  color: #C8C8C8;
  border-bottom-color: #1F1F1F;
}
.pkg-card-feat .pkg-card-bullets li::before { color: #FFD400; }
.pkg-card-feat .pkg-card-bullets li strong { color: #fff; }
.pkg-card-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
}
.pkg-card-price {
  border-top: 1px solid #EAEAEA;
  padding-top: 16px;
}
.pkg-card-feat .pkg-card-price { border-top-color: #1F1F1F; }
.pkg-card-price-amt {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.pkg-card-price-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #707070;
  margin-top: 6px;
  font-weight: 600;
}
.pkg-card-feat .pkg-card-price-sub { color: #A8A8A8; }
.pkg-card-foot .btn { width: 100%; padding: 14px 20px; }

.pkg-disclaimer {
  margin-top: 32px;
  padding: 18px 24px;
  background: #F5F5F5;
  border-left: 3px solid #000;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3A3A3A;
}
.pkg-disclaimer strong { color: #000; }

/* ---------- Coming Soon grid ---------- */
.pkg-soon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pkg-soon {
  background: #fff;
  border: 1px solid #EAEAEA;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: border-color 160ms, background 160ms, transform 160ms;
}
.pkg-soon::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 40px; height: 40px;
  background: repeating-linear-gradient(
    -45deg,
    #EAEAEA 0 4px,
    transparent 4px 8px
  );
  pointer-events: none;
}
.pkg-soon:hover {
  border-color: #000;
  background: #FAFAFA;
}
.pkg-soon-icon {
  width: 36px;
  height: 36px;
  opacity: 0.55;
  margin-bottom: 6px;
}
.pkg-soon-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #707070;
}
.pkg-soon-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: #000;
  flex: 1;
  margin-bottom: 6px;
}
.pkg-soon-btn {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  align-self: flex-start;
  transition: opacity 160ms;
}
.pkg-soon-btn:hover { opacity: 0.6; }

/* ---------- Coming Soon modal ---------- */
.pkg-soon-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: pkgFadeIn 200ms ease-out;
}
@keyframes pkgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pkg-soon-modal-inner {
  background: #fff;
  max-width: 480px;
  width: 100%;
  padding: 40px 36px 32px;
  position: relative;
  border: 1px solid #000;
}
.pkg-soon-modal-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #707070;
  margin-bottom: 10px;
}
.pkg-soon-modal-inner h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 12px;
}
.pkg-soon-modal-inner p {
  font-size: 14px;
  line-height: 1.55;
  color: #3A3A3A;
  margin: 0 0 22px;
}
.pkg-soon-modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkg-soon-modal-form input {
  padding: 14px 16px;
  border: 1px solid #A8A8A8;
  font-size: 14px;
  font-family: var(--font-body);
}
.pkg-soon-modal-form input:focus { outline: none; border-color: #000; }
.pkg-soon-modal-form button {
  background: #000;
  color: #fff;
  border: none;
  padding: 14px 16px;
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.pkg-soon-modal-form button:hover { background: #1F1F1F; }
.pkg-soon-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #707070;
  cursor: pointer;
}
.pkg-soon-modal-close:hover { color: #000; }

@media (max-width: 1000px) {
  .pkg-grid {
    grid-template-columns: 1fr;
    border: none;
  }
  .pkg-card {
    border: 1px solid #EAEAEA;
    margin: 0 0 16px;
  }
  .pkg-card-feat {
    margin: 0 0 16px;
    border-color: #000;
    box-shadow: none;
  }
  .pkg-card-feat + .pkg-card { border-left: 1px solid #EAEAEA; }
  .pkg-soon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pkg-soon-grid { grid-template-columns: 1fr; }
  .pkg-card { padding: 28px; }
}

/* ---------- Package comparison matrix ---------- */
.pkg-matrix-wrap {
  margin-top: 64px;
  border: 1px solid #000;
  background: #fff;
}
.pkg-matrix-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: #000;
  padding: 14px 24px;
}
.pkg-matrix {
  padding: 0;
}
.pkg-matrix-head,
.pkg-matrix-row {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1fr 1fr;
  align-items: center;
}
.pkg-matrix-head {
  border-bottom: 2px solid #000;
  background: #FAFAFA;
}
.pkg-matrix-head-col {
  padding: 16px 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.pkg-matrix-head-label {
  text-align: left;
  padding-left: 24px;
  color: #707070;
}
.pkg-matrix-head-feat {
  background: #000;
  color: #FFD400;
}
.pkg-matrix-row {
  border-bottom: 1px solid #EAEAEA;
  transition: background 120ms;
}
.pkg-matrix-row:hover { background: #FAFAFA; }
.pkg-matrix-row:last-child { border-bottom: none; }
.pkg-matrix-label {
  padding: 14px 12px 14px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #1F1F1F;
}
.pkg-matrix-cell {
  padding: 14px 12px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: #000;
  line-height: 1;
}
.pkg-matrix-cell.is-empty {
  color: #C8C8C8;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
}
.pkg-matrix-cell-feat {
  background: #000;
  color: #fff;
  position: relative;
}
.pkg-matrix-cell-feat.is-empty {
  background: #1F1F1F;
  color: #707070;
}
.pkg-matrix-row-total {
  background: #F5F5F5;
  border-top: 2px solid #000;
  border-bottom: none;
}
.pkg-matrix-row-total:hover { background: #F5F5F5; }
.pkg-matrix-row-total .pkg-matrix-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  padding-top: 18px;
  padding-bottom: 18px;
}
.pkg-matrix-row-total .pkg-matrix-cell {
  font-size: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.pkg-matrix-row-total .pkg-matrix-cell-feat {
  background: #000;
  color: #FFD400;
}

@media (max-width: 900px) {
  .pkg-matrix-head,
  .pkg-matrix-row {
    grid-template-columns: 1.8fr 1.1fr 1fr 1fr;
  }
  .pkg-matrix-head-col,
  .pkg-matrix-label { padding-left: 16px; }
  .pkg-matrix-label { font-size: 13px; padding-right: 8px; }
  .pkg-matrix-cell { font-size: 17px; padding: 12px 6px; }
  .pkg-matrix-row-total .pkg-matrix-cell { font-size: 22px; }
}
@media (max-width: 600px) {
  .pkg-matrix-wrap { overflow-x: auto; }
  .pkg-matrix {
    min-width: 540px;
  }
}

/* ---------- Package tile catalog (May 2026 v3 — compact 4-col grid) ---------- */
.pkg-t-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pkg-t {
  background: #fff;
  border: 1px solid #EAEAEA;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
  min-height: 320px;
}
.pkg-t:focus-visible {
  outline: 3px solid #FFD400;
  outline-offset: 2px;
}

/* Live tiles — black fill across the board */
.pkg-t:not(.pkg-t-coming) {
  background: #000;
  color: #fff;
  border-color: #000;
}
.pkg-t:not(.pkg-t-coming):hover {
  border-color: #FFD400;
  box-shadow: 0 0 0 3px #FFD400, 0 12px 32px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.pkg-t:not(.pkg-t-coming) .pkg-t-code { color: #FFD400; }
.pkg-t:not(.pkg-t-coming) .pkg-t-status { color: #FFD400; }
.pkg-t:not(.pkg-t-coming) .pkg-t-icon { filter: invert(1); }
.pkg-t:not(.pkg-t-coming) .pkg-t-summary { color: #C8C8C8; }
.pkg-t:not(.pkg-t-coming) .pkg-t-stats {
  color: #fff;
  border-color: #1F1F1F;
}
.pkg-t:not(.pkg-t-coming) .pkg-t-price-sub { color: #A8A8A8; }
.pkg-t:not(.pkg-t-coming) .pkg-t-view { color: #fff; }

/* Coming-soon tile — locked, faded */
.pkg-t-coming {
  background: #F5F5F5;
  border-color: #E0E0E0;
}
.pkg-t-coming:hover {
  background: #FAFAFA;
  border-color: #707070;
}
.pkg-t-lock {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.02) 0 8px,
    transparent 8px 16px
  );
  pointer-events: none;
}

.pkg-t-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--peach-200);
  color: #000;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.pkg-t-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.pkg-t-code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #707070;
}
.pkg-t-feat .pkg-t-code { color: #FFD400; }
.pkg-t-coming .pkg-t-code { color: #A8A8A8; }
.pkg-t-status,
.pkg-t-eta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
}
.pkg-t-status { color: #000; }
.pkg-t-feat .pkg-t-status { color: #FFD400; }
.pkg-t-eta { color: #707070; }

.pkg-t-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.pkg-t-feat .pkg-t-icon { filter: invert(1); }
.pkg-t-coming .pkg-t-icon { opacity: 0.45; }

.pkg-t-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}
.pkg-t-coming .pkg-t-name { color: #1F1F1F; }
.pkg-t-summary {
  font-size: 13px;
  line-height: 1.5;
  color: #3A3A3A;
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}
.pkg-t-feat .pkg-t-summary { color: #C8C8C8; }
.pkg-t-summary-muted { color: #707070; font-style: normal; }
.pkg-t-stats {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #1F1F1F;
  padding: 10px 0;
  border-top: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.pkg-t-feat .pkg-t-stats {
  color: #fff;
  border-color: #1F1F1F;
}

.pkg-t-foot {
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.pkg-t-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.pkg-t-price-amt {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.pkg-t-price-sub {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #707070;
  font-weight: 600;
}
.pkg-t-feat .pkg-t-price-sub { color: #A8A8A8; }
.pkg-t-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkg-t-view {
  font-size: 12px;
  font-weight: 600;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.pkg-t-feat .pkg-t-view { color: #fff; }
.pkg-t-coming .pkg-t-view { color: #1F1F1F; }
.pkg-t-actions .btn {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
}
.pkg-t-coming-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #707070;
  padding: 8px 0;
  border-top: 1px solid #D8D8D8;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .pkg-t-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .pkg-t-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pkg-t-grid { grid-template-columns: 1fr; }
  .pkg-t { min-height: 0; }
}

/* ---------- Package detail drawer ---------- */
.pkg-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  animation: pkgDrawerFade 200ms ease-out;
}
@keyframes pkgDrawerFade { from { opacity: 0; } to { opacity: 1; } }
.pkg-drawer {
  width: min(760px, 100%);
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: pkgDrawerSlide 260ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -20px 0 60px rgba(0,0,0,0.25);
}
@keyframes pkgDrawerSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.pkg-drawer-head {
  background: #000;
  color: #fff;
  padding: 36px 36px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
}
.pkg-drawer-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #FFD400;
  margin-bottom: 10px;
}
.pkg-drawer-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #fff;
}
.pkg-drawer-summary {
  font-size: 14.5px;
  line-height: 1.55;
  color: #C8C8C8;
  margin: 0;
  max-width: 480px;
}
.pkg-drawer-close {
  background: none;
  border: 1px solid #1F1F1F;
  color: #fff;
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms, border-color 160ms;
}
.pkg-drawer-close:hover {
  background: #1F1F1F;
  border-color: #fff;
}

.pkg-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 36px;
  background: #F5F5F5;
  border-bottom: 1px solid #EAEAEA;
  flex-shrink: 0;
}
.pkg-drawer-price-amt {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #000;
}
.pkg-drawer-price-sub {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #707070;
  margin-top: 6px;
  font-weight: 600;
}
.pkg-drawer-cta .btn { white-space: nowrap; }

.pkg-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 36px;
}
.pkg-drawer-meta {
  font-size: 13px;
  color: #3A3A3A;
  line-height: 1.55;
  padding: 12px 16px;
  background: #FAFAFA;
  border-left: 3px solid #000;
  margin-bottom: 28px;
}
.pkg-drawer-cat {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #EAEAEA;
}
.pkg-drawer-cat:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pkg-drawer-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 12px;
}
.pkg-drawer-cat-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
.pkg-drawer-cat-count {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  color: #FFD400;
  background: #000;
  padding: 3px 10px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.pkg-drawer-cat-sub {
  font-size: 13px;
  color: #707070;
  margin: 0 0 14px;
  line-height: 1.45;
}
.pkg-drawer-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pkg-drawer-cat-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.45;
  border-bottom: 1px dashed #EAEAEA;
}
.pkg-drawer-cat-list li:last-child { border-bottom: none; }
.pkg-drawer-doc-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #707070;
  padding-top: 2px;
}
.pkg-drawer-doc-name { color: #1F1F1F; }

.pkg-drawer-foot {
  padding: 24px 36px 32px;
  background: #FAFAFA;
  border-top: 1px solid #EAEAEA;
  flex-shrink: 0;
}
.pkg-drawer-foot .btn {
  width: 100%;
  padding: 16px 20px;
}
.pkg-drawer-foot-note {
  font-size: 11px;
  line-height: 1.55;
  color: #707070;
  margin: 14px 0 0;
}

@media (max-width: 700px) {
  .pkg-drawer-head { padding: 28px 24px 24px; }
  .pkg-drawer-cta { padding: 20px 24px; flex-wrap: wrap; }
  .pkg-drawer-body { padding: 28px 24px; }
  .pkg-drawer-foot { padding: 20px 24px 28px; }
  .pkg-drawer-cat-list li { grid-template-columns: 88px 1fr; gap: 10px; }
  .pkg-drawer-title { font-size: 24px; }
}

/* ---------- Audit Cycle (What is ISO page) ---------- */
.audit-cycle-section { background:#fff; padding-top:80px; padding-bottom:96px; }
.audit-cycle-section .section-head { text-align:left; margin-bottom:64px; max-width:780px; margin-left:0; }

.audit-cycle {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-top:24px;
}
.audit-track {
  position:absolute;
  top:46px;
  left:0; right:0;
  height:2px;
  background:#E0E0E0;
  z-index:0;
}
.audit-track-fill {
  position:absolute;
  top:0; left:0;
  height:100%;
  background:#FFD400;
  width:0;
  transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.audit-year { position:relative; z-index:1; }
.audit-year-label {
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#707070;
  background:#fff;
  padding:0 0 14px;
  margin:0;
  display:inline-block;
  border:none;
  cursor:pointer;
  text-align:left;
  transition: color 200ms;
}
.audit-year-label:hover { color:#000; }
.audit-year.is-active .audit-year-label { color:#000; }
.audit-year-label::before {
  content:"";
  display:block;
  width:14px; height:14px;
  background:#fff;
  border:3px solid #000;
  box-shadow:0 0 0 0 rgba(255,212,0,0);
  border-radius:50%;
  margin:0 0 18px;
  transition: background 200ms, transform 200ms, box-shadow 200ms, width 200ms, height 200ms, margin 200ms;
}
.audit-year-label:hover::before { background:#FFD400; }
.audit-year.is-active .audit-year-label::before {
  background:#FFD400;
  width:18px; height:18px;
  margin:-2px 0 16px;
  box-shadow:0 0 0 4px rgba(255,212,0,0.25);
}

.audit-stages { display:grid; gap:16px; }
.audit-stage {
  background:#F5F5F5;
  border:1px solid #EAEAEA;
  border-top:3px solid #000;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition: opacity 280ms, border-color 200ms, background 200ms, transform 200ms;
  opacity:0.55;
}
.audit-year.is-active .audit-stage { opacity:1; }
.audit-year.is-active .audit-stage { border-top-color:#FFD400; }
.audit-year.is-active .audit-stage.stage-cert { border-top-color:#FFD400; }
.audit-year.is-active .audit-stage.stage-recert { border-top-color:#FFD400; }
.audit-stage:hover { background:#fff; border-color:#000; }
.audit-stage.stage-cert { background:#000; color:#fff; border-color:#000; border-top-color:#F3D7C8; }
.audit-stage.stage-cert:hover { background:#0A0A0A; }
.audit-stage.stage-cert h4 { color:#fff; }
.audit-stage.stage-cert p { color:#C8C8C8; }
.audit-stage.stage-cert .audit-stage-eyebrow { color:#F3D7C8; }
.audit-stage.stage-cert .audit-stage-meta { color:#A8A8A8; border-top-color:#1F1F1F; }
.audit-stage.stage-cert .audit-stage-marker { background:#F3D7C8; color:#000; }

.audit-stage.stage-recert { border-top-color:#F3D7C8; }

.audit-stage-marker {
  width:36px; height:36px;
  background:#000; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  letter-spacing:0.02em;
  margin-bottom:6px;
}
.audit-stage-eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#707070;
}
.audit-stage h4 {
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  line-height:1.2;
  margin:2px 0 4px;
  color:#000;
}
.audit-stage p {
  font-size:14px;
  line-height:1.55;
  color:#3A3A3A;
  margin:0;
  flex:1;
}
.audit-stage-meta {
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.04em;
  color:#707070;
  text-transform:uppercase;
  border-top:1px solid #D8D8D8;
  padding-top:12px;
  margin-top:8px;
}

.audit-cycle-note {
  margin-top:48px;
  padding:32px 36px;
  background:#F5F5F5;
  border-left:4px solid #000;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.audit-note-eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#707070;
  margin-bottom:6px;
}
.audit-cycle-note p {
  font-size:15.5px;
  line-height:1.6;
  color:#1F1F1F;
  margin:0;
  max-width:880px;
}

@media (max-width: 980px) {
  .audit-cycle { grid-template-columns:1fr 1fr; gap:32px 20px; }
  .audit-track { display:none; }
  .audit-year-label::before { display:none; }
  .audit-year-label { padding-bottom:10px; }
}
@media (max-width: 600px) {
  .audit-cycle { grid-template-columns:1fr; }
  .audit-cycle-section .section-head { margin-bottom:40px; }
}

/* ---------- Legal pages (Terms / Template T&Cs / Privacy) ---------- */
.legal-section {
  padding: 80px 0 120px;
  background: #fff;
}
.legal-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  border-top: 1px solid #000;
  padding-top: 20px;
}
.legal-toc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #707070;
  margin-bottom: 14px;
}
.legal-toc-list {
  display: flex;
  flex-direction: column;
}
.legal-toc-list a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #1F1F1F;
  text-decoration: none;
  border-bottom: 1px solid #EAEAEA;
  transition: opacity 160ms;
}
.legal-toc-list a:hover { opacity: 0.6; }
.legal-toc-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #EAEAEA;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-toc-footer a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  padding: 4px 0;
}
.legal-toc-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

.legal-body {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: #1F1F1F;
}
.legal-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #707070;
  margin-bottom: 24px;
}
.legal-intro {
  font-size: 18px;
  line-height: 1.6;
  color: #000;
  margin: 0 0 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #EAEAEA;
}

.legal-section-block {
  margin-bottom: 56px;
  scroll-margin-top: 100px;
}
.legal-section-block h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 20px;
  color: #000;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.legal-section-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #A8A8A8;
  flex: 0 0 auto;
  min-width: 32px;
}
.legal-section-block h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 28px 0 12px;
  color: #000;
}
.legal-section-block p {
  margin: 0 0 16px;
}
.legal-section-block ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.legal-section-block li {
  margin-bottom: 8px;
}
.legal-section-block a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-section-block strong { font-weight: 600; }

.legal-foot {
  margin-top: 64px;
  padding: 28px 32px;
  background: #F5F5F5;
  border-left: 4px solid #000;
}
.legal-foot h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 6px;
  color: #000;
}
.legal-foot p {
  margin: 0;
  font-size: 14px;
  color: #3A3A3A;
}
.legal-foot a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 980px) {
  .legal-container { grid-template-columns: 1fr; gap: 40px; }
  .legal-toc { position: static; }
  .legal-toc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
}
@media (max-width: 600px) {
  .legal-section { padding: 56px 0 96px; }
  .legal-toc-list { grid-template-columns: 1fr; }
  .legal-section-block h2 { font-size: 24px; gap: 12px; }
  .legal-intro { font-size: 16px; margin-bottom: 36px; }
}