/* ==========================================================================
   Creative Purpose Solutions Sdn Bhd — site stylesheet
   Hand-written, no build step. Static CSS, safe for Plesk / IIS shared hosting.
   Sections: 1 tokens · 2 reset · 3 typography · 4 layout · 5 components
             6 header/footer · 7 page blocks · 8 forms · 9 utilities · 10 motion
   ========================================================================== */

/* -- 1. Design tokens ----------------------------------------------------- */
:root {
  --bg:            #ffffff;
  --bg-soft:       #f5f8fc;
  --bg-tint:       #edf2fa;
  --surface:       #ffffff;
  --surface-2:     #fafbfd;

  --dark:          #0f1c33;
  --dark-2:        #17273f;
  --on-dark:       #e6ecf7;
  --on-dark-muted: #9aaccb;

  --ink:           #12203a;
  --body:          #4a5872;
  --muted:         #6e7c94;

  --line:          #dfe6f1;
  --line-strong:   #c8d4e6;

  --primary:       #2e5aa8;
  --primary-dark:  #23477f;
  --primary-soft:  #e7eefa;
  --on-primary:    #ffffff;
  --brand:         #6f82a8;

  --green:         #17916c;
  --green-soft:    #e4f4ee;
  --amber:         #b4791a;
  --amber-soft:    #fbf1de;

  --shadow-sm: 0 1px 2px rgba(15, 28, 51, .06);
  --shadow-md: 0 6px 24px -8px rgba(15, 28, 51, .16), 0 2px 6px rgba(15, 28, 51, .05);
  --shadow-lg: 0 24px 60px -24px rgba(15, 28, 51, .30), 0 6px 16px rgba(15, 28, 51, .06);

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --sect: clamp(4rem, 7.5vw, 6.75rem);
  --r: 6px;
  --r-lg: 12px;

  --sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0c1524;
    --bg-soft:       #101b2d;
    --bg-tint:       #142338;
    --surface:       #121e31;
    --surface-2:     #16243a;

    --dark:          #08111e;
    --dark-2:        #111d30;
    --on-dark:       #dce5f4;
    --on-dark-muted: #8fa3c2;

    --ink:           #eaf0fa;
    --body:          #b3c0d6;
    --muted:         #8b9ab4;

    --line:          #223350;
    --line-strong:   #2e4165;

    --primary:       #7ba3e8;
    --primary-dark:  #a3c0f2;
    --primary-soft:  #17263e;
    --on-primary:    #08131f;
    --brand:         #8695b4;

    --green:         #4cc9a0;
    --green-soft:    #0f2a23;
    --amber:         #d9a441;
    --amber-soft:    #2b2214;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8), 0 6px 16px rgba(0, 0, 0, .4);

    color-scheme: dark;
  }
}

/* -- 2. Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--primary); color: var(--on-primary); }

/* -- 3. Typography -------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.35rem + 3.4vw, 3.85rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.4rem); letter-spacing: -.015em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.075rem, 1rem + .45vw, 1.3rem);
  line-height: 1.65;
  color: var(--body);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--primary);
  flex: none;
}

.num { font-variant-numeric: tabular-nums; }

/* -- 4. Layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }

.section { padding-block: var(--sect); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--bg-tint); }
.section--dark { background: var(--dark); color: var(--on-dark-muted); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lede { color: var(--on-dark-muted); }
.section--dark .eyebrow { color: var(--brand); }
.section--dark .eyebrow::before { background: var(--brand); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-bottom: 0; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left  { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
}

/* -- 5. Components -------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn svg { width: 1em; height: 1em; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-dark); color: var(--on-primary); box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); }

.btn-light { background: #fff; color: #0f1c33; }
.btn-light:hover { background: #edf2fa; color: #0f1c33; }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }

.btn-lg { padding: .95rem 1.75rem; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Text link with arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  color: var(--primary);
}
.arrow-link::after {
  content: "\2192";
  transition: transform .18s ease;
  font-weight: 400;
}
.arrow-link:hover::after { transform: translateX(4px); }

/* Cards */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card h3 { margin-bottom: .5rem; }
/* The whole card is the hit area (see .card--link a::after), so the heading
   link does not need underlining to read as a link. */
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover, .card--link:hover h3 a { color: var(--primary); }
.card p { font-size: .96rem; margin-bottom: 0; }
.card--link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card--link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.card-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 1.1rem;
}
.card-icon svg { width: 22px; height: 22px; }
.card-icon--green { background: var(--green-soft); color: var(--green); }

.card-foot { margin-top: 1.15rem; }

/* Corner-bracket accent — a registration mark, echoing precision/audit work */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 2px solid var(--brand);
  opacity: .55;
}
.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bracket::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Statutory chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chip {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .34rem .66rem;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink);
  background: var(--surface);
  white-space: nowrap;
}
.chip--dark { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); color: #e6ecf7; }

/* Feature / check lists */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checks li {
  position: relative;
  padding-left: 1.9rem;
  font-size: .98rem;
  line-height: 1.6;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .44em;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: var(--green-soft);
}
.checks li::after {
  content: "";
  position: absolute;
  left: .3rem; top: .68em;
  width: .46rem; height: .24rem;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.checks--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem clamp(1rem, 3vw, 2.5rem); }
.checks--dark li { color: var(--on-dark-muted); }

/* Ruled list — used for report inventories */
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled li {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .72rem 0;
  border-top: 1px solid var(--line);
  font-size: .96rem;
}
.ruled li:first-child { border-top: 0; }
.ruled li b { font-weight: 600; color: var(--ink); }
.ruled .rn {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
  flex: none;
  padding-top: .15em;
}

/* Numbered steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; }
.steps > li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-soft);
  width: 2.35rem; height: 2.35rem;
  border-radius: 50%;
  display: grid; place-items: center;
}
.steps h3 { margin-bottom: .3rem; font-size: 1.08rem; }
.steps p { font-size: .96rem; margin-bottom: 0; }

/* Stats */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.stat .stat-n {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat .stat-l {
  display: block;
  margin-top: .45rem;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.45;
}
.section--dark .stat .stat-n { color: #fff; }
.section--dark .stat .stat-l { color: var(--on-dark-muted); }

/* Illustrative product panels ---------------------------------------------
   These stand in for product screenshots. Nothing here is real customer or
   employee data: every figure is invented and each panel carries a visible
   "Illustration" tag. Built from markup rather than bitmaps so they stay
   sharp at any size, follow the light/dark theme, and cost no extra request. */
.viz {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.viz-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.viz-head b {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.viz-head > div > span { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.viz-tag {
  flex: none;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: .26rem .5rem;
  white-space: nowrap;
}
.viz-body { padding: 1.25rem; }
.viz-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.viz-foot div { padding: .8rem 1rem; border-left: 1px solid var(--line); }
.viz-foot div:first-child { border-left: 0; }
.viz-foot b {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.viz-foot span { display: block; font-size: .71rem; color: var(--muted); margin-top: .05rem; line-height: 1.35; }

/* Bar chart (inline SVG, coloured from the theme tokens) */
.chart { display: block; width: 100%; height: auto; }
.chart .grid  { stroke: var(--line); stroke-width: 1; }
.chart .bar   { fill: var(--brand); opacity: .5; }
.chart .bar--now { fill: var(--primary); opacity: 1; }
.chart .lbl   { fill: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; }
.chart .axis  { fill: var(--muted); font-family: var(--mono); font-size: 8.5px; }

/* Leave calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal > span {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: .2rem;
}
.cal > i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.cal > i.is-off { opacity: .45; }

/* Leave-type swatches. Both the calendar cell and its legend key use these, so
   the two can never drift apart. Unpaid is hatched rather than tinted: a fourth
   flat pastel would not be reliably distinguishable from annual leave. */
.cal > i.is-annual,  .legend i.is-annual  { background: var(--primary-soft); border-color: var(--primary); }
.cal > i.is-medical, .legend i.is-medical { background: var(--amber-soft);   border-color: var(--amber); }
.cal > i.is-working, .legend i.is-working { background: var(--bg-soft);      border-color: var(--line); }
.cal > i.is-unpaid,  .legend i.is-unpaid  {
  border-color: var(--line-strong);
  background: repeating-linear-gradient(45deg,
              var(--bg-tint) 0 3px, var(--line-strong) 3px 5px);
}

.legend { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; margin-top: 1.1rem; font-size: .78rem; color: var(--muted); }
.legend b { display: inline-flex; align-items: center; gap: .42rem; font-weight: 500; }
.legend i { width: .72rem; height: .72rem; border-radius: 3px; border: 1px solid; flex: none; }

/* Stacked cost bar + breakdown, for the pay-run panel */
.stack { display: flex; height: 32px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.stack i { display: block; height: 100%; }

/* Shared swatch colours: the stacked bar and the list beneath it must agree,
   so the colour lives in one place and both reference it. */
.sw-net { background: var(--primary); }
.sw-epf { background: var(--brand); }
.sw-tax { background: var(--amber); }
.sw-soc { background: var(--green); }

.breakdown { list-style: none; margin: 1.05rem 0 0; padding: 0; display: grid; gap: .5rem; }
.breakdown li { display: flex; align-items: center; gap: .6rem; font-size: .86rem; }
.breakdown i { width: .68rem; height: .68rem; border-radius: 2px; flex: none; }
.breakdown b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.breakdown .total { border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .6rem; color: var(--ink); font-weight: 700; }

/* Variance list — period-on-period movement, as the variance report shows it */
.variance { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.variance li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .75rem;
  font-size: .86rem;
}
.variance b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.variance .total {
  border-top: 1px solid var(--line);
  margin-top: .3rem;
  padding-top: .65rem;
  color: var(--ink);
  font-weight: 700;
}
.delta {
  font-family: var(--mono);
  font-size: .7rem;
  padding: .16rem .4rem;
  border-radius: 3px;
  min-width: 3.9rem;
  text-align: center;
}
.delta--up   { color: var(--green); background: var(--green-soft); }
.delta--down { color: var(--amber); background: var(--amber-soft); }
.delta--flat { color: var(--muted); background: var(--bg-soft); }

/* Leave balances — entitlement consumed against entitlement granted */
.balances { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.bal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .42rem;
  font-size: .86rem;
}
.bal-head b { color: var(--ink); font-weight: 600; }
.bal-head span { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.meter {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  overflow: hidden;
}
.meter i { display: block; height: 100%; background: var(--primary); }
.meter i.is-warn { background: var(--amber); }

.caption { margin-top: .85rem; font-size: .85rem; color: var(--muted); }

/* Accordion */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .4rem; top: 1.55rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq .faq-body { padding: 0 1.5rem 1.4rem 0; font-size: .98rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* Callout */
.callout {
  border-left: 3px solid var(--primary);
  background: var(--bg-soft);
  padding: 1.15rem 1.4rem;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .97rem;
}
.callout strong { color: var(--ink); }

/* -- 6. Header & footer --------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: var(--on-primary);
  padding: .7rem 1.1rem;
  z-index: 200;
  border-radius: 0 0 var(--r) 0;
  font-weight: 700;
}
.skip:focus { left: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(2px)) {
  .site-header {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand img { width: 34px; height: auto; }
.brand-text { display: grid; line-height: 1.1; }
.brand-name {
  font-size: .97rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.015em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.nav > a:not(.btn), .nav-drop > button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .72rem;
  border-radius: var(--r);
  font-size: .92rem;
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.nav > a:not(.btn):hover, .nav-drop > button:hover { color: var(--ink); background: var(--bg-soft); }
.nav > a:not(.btn)[aria-current="page"],
.nav-drop > button[data-active="true"] { color: var(--primary); }
.nav-drop { position: relative; }
.nav-drop > button::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.nav-drop[data-open="true"] > button::after { transform: translateY(1px) rotate(-135deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: -.5rem;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: .5rem;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-drop[data-open="true"] .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu a {
  display: grid;
  gap: .1rem;
  padding: .6rem .75rem;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
}
.nav-menu a:hover { background: var(--bg-soft); }
.nav-menu strong { font-size: .92rem; font-weight: 700; }
.nav-menu span { font-size: .8rem; color: var(--muted); line-height: 1.45; }

.nav-sep { width: 1px; height: 22px; background: var(--line); margin-inline: .45rem; flex: none; }
.nav-cta { margin-left: .3rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  place-items: center;
}
.nav-toggle i, .nav-toggle i::before, .nav-toggle i::after {
  display: block;
  width: 17px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle i { position: relative; }
.nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; }
.nav-toggle i::before { top: -5.5px; }
.nav-toggle i::after  { top: 5.5px; }
.nav-toggle[aria-expanded="true"] i { background: transparent; }
.nav-toggle[aria-expanded="true"] i::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1010px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: 72px 0 auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: .75rem var(--gutter) 1.5rem;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    box-shadow: var(--shadow-lg);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav > a:not(.btn), .nav-drop > button { padding: .8rem .25rem; font-size: 1rem; width: 100%; justify-content: space-between; }
  .nav-drop > button::after { margin-left: auto; }
  .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    padding: 0 0 .5rem .75rem;
    margin: 0 0 .5rem .25rem;
    min-width: 0;
    display: none;
  }
  .nav-drop[data-open="true"] .nav-menu { display: grid; }
  .nav-sep { display: none; }
  .nav-cta { margin: .75rem 0 0; }
  .btn.nav-cta { width: 100%; }
}

/* Footer */
.site-footer { background: var(--dark); color: var(--on-dark-muted); font-size: .93rem; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-top {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 760px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.footer-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.footer-brand img { width: 36px; }
.footer-brand .brand-name { color: #fff; font-size: 1rem; }
.footer-brand .brand-sub { color: var(--brand); }
.footer-top h4 {
  color: #fff;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1.05rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.footer-contact li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.footer-contact svg { width: 16px; height: 16px; margin-top: .28em; color: var(--brand); flex: none; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* -- 7. Page blocks ------------------------------------------------------- */

/* Hero — blueprint grid evokes the ledger the product replaces */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding-block: clamp(3.25rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 80% at 78% 22%, #000 0%, transparent 68%);
          mask-image: radial-gradient(120% 80% at 78% 22%, #000 0%, transparent 68%);
  opacity: .75;
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.12fr .88fr; } }
.hero h1 { margin-bottom: .5em; }
.hero .lede { margin-bottom: 2rem; }

.hero-note {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--muted);
}
.hero-note strong { color: var(--ink); font-weight: 700; }

/* Trust bar */
.trustbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  padding-block: 1.35rem;
}
.trustbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem clamp(1rem, 3vw, 2.25rem);
  justify-content: center;
}
.trustbar p {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Inner-page header */
.page-head {
  position: relative;
  background: var(--dark);
  color: var(--on-dark-muted);
  padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(110% 90% at 85% 10%, #000 0%, transparent 70%);
          mask-image: radial-gradient(110% 90% at 85% 10%, #000 0%, transparent 70%);
}
.page-head > * { position: relative; }
.page-head h1 { color: #fff; max-width: 22ch; }
.page-head .lede { color: var(--on-dark-muted); max-width: 62ch; }
.page-head .eyebrow { color: var(--brand); }
.page-head .eyebrow::before { background: var(--brand); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: .82rem;
  color: var(--on-dark-muted);
}
.crumbs a { color: var(--on-dark-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .45; }
.crumbs [aria-current] { color: #fff; }

/* CTA band */
.cta-band {
  background: var(--dark);
  color: var(--on-dark-muted);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  right: -140px; top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 130, 168, .28), transparent 66%);
}
.cta-band > * { position: relative; }
.cta-inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1.35fr auto; } }
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { margin-bottom: 0; max-width: 52ch; }

/* Module masthead facts (product pages) */
.module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding: 1.35rem 0 0;
  margin: 1.75rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.module-meta div { min-width: 8rem; }
.module-meta dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .3rem;
}
.module-meta dd { margin: 0; color: #fff; font-weight: 600; font-size: .95rem; }

/* -- 8. Forms ------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 700; color: var(--ink); }
.field .req { color: var(--primary); }
.field .hint { font-size: .8rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .72rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: .96rem;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select { cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .8; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .87rem; }
.consent input { width: 1.05rem; height: 1.05rem; margin-top: .3em; accent-color: var(--primary); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .82rem; color: var(--muted); }

.alert {
  padding: .95rem 1.15rem;
  border-radius: var(--r);
  font-size: .93rem;
  border: 1px solid var(--line-strong);
  margin-bottom: 1.5rem;
}
.alert-ok   { background: var(--green-soft); border-color: var(--green); color: var(--ink); }
.alert-warn { background: var(--bg-tint); border-color: var(--amber); color: var(--ink); }
.alert strong { color: var(--ink); }

/* Contact detail tiles */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contact-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.contact-list .ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--primary-soft);
  color: var(--primary);
  flex: none;
}
.contact-list .ico svg { width: 19px; height: 19px; }
.contact-list h3 { font-size: .95rem; margin-bottom: .15rem; }
.contact-list p { margin: 0; font-size: .95rem; }
.contact-list a { font-weight: 600; }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 16 / 10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -- 9. Utilities --------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.small { font-size: .88rem; }
.muted { color: var(--muted); }

.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: .4rem; }
.prose > :first-child { margin-top: 0; }

/* -- 10. Motion ----------------------------------------------------------- */
/* Reveal-on-scroll is opt-IN: the .js-reveal class is added by main.js only
   once an IntersectionObserver has actually been created. If the script fails
   to load, errors, is blocked, or the browser lacks IntersectionObserver, the
   class is never added and every section renders normally. Content is never
   hidden behind a script that might not run. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* -- 11. Dark-theme band separation ---------------------------------------
   In light mode a navy band is obviously distinct from a white page. In dark
   mode the same band sits within a few percent of the page background, so the
   section edges need a hairline to stay readable as separate bands. */
@media (prefers-color-scheme: dark) {
  .page-head,
  .section--dark,
  .cta-band { border-block: 1px solid var(--line); }
  .site-footer { border-top: 1px solid var(--line); }
  .hero { border-bottom-color: var(--line); }
}

/* -- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .cta-band, .btn, .map-frame { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}