@charset "UTF-8";
/* ============================================================================
   ZenWeb Japan — site.css
   The single styling source for zenweb.jp. Every page links only this file.
   No page defines its own colours, fonts or spacing.

   Concept: 「静と朱」 — quiet and crimson.
   A composed, white, generously-spaced Japanese corporate layout in which the
   ZenWeb crimson→indigo gradient appears rarely and deliberately.
   ========================================================================= */

@import url("fonts.css");

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Brand — transcribed from zenweb.my */
  --crimson:       #D30939;
  --crimson-deep:  #A80730;
  --indigo:        #2424B2;
  --indigo-deep:   #1B1B8C;
  --violet:        #7D2389;
  --rose:          #CC3366;

  /* The one signature gradient. Indigo on the left, crimson on the right. */
  --grad:      linear-gradient(95deg, #2424B2 0%, #7D2389 54%, #D30939 100%);
  --grad-soft: linear-gradient(95deg, rgba(36,36,178,.10) 0%, rgba(125,35,137,.09) 54%, rgba(211,9,57,.10) 100%);

  /* Ink & surface */
  --ink:       #16162A;
  --ink-2:     #33334A;
  --mut:       #62676C;
  --mut-2:     #8A8F98;
  --line:      #E4E5EE;
  --line-soft: #EFF0F6;
  --bg:        #FFFFFF;
  --tint:      #F7F8FC;
  --tint-2:    #F2F3F9;
  --panel:     #FFFFFF;
  --ink-panel: #12121F;

  /* Type */
  --dfont: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --bfont: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  /* Geometry */
  --r-sm:   8px;
  --r:     14px;
  --r-lg:  22px;
  --r-btn: 10px;          /* matches zenweb.my */
  --r-pill: 999px;

  /* Shadow — light, layered, never heavy */
  --sh-1: 0 1px 2px rgba(22,22,42,.04), 0 4px 16px rgba(22,22,42,.045);
  --sh-2: 0 2px 6px rgba(22,22,42,.05), 0 20px 44px -14px rgba(22,22,42,.16);
  --sh-3: 0 30px 70px -22px rgba(22,22,42,.26);

  /* Rhythm */
  --secpad: clamp(68px, 8vw, 118px);
  --wrap:   1300px;
  --gut:    clamp(20px, 4.4vw, 34px);
  /* Prose measure. `ch` computes narrow for Japanese (the `0` glyph is ~0.55em),
     so this is set in px: ~50 full-width characters per line. */
  --measure: 860px;
}

/* ------------------------------------------------------------------ 2. BASE */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--bfont);
  font-size: 16.5px;
  line-height: 1.95;                    /* Japanese text needs the air */
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;      /* proportional JP metrics */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  padding-top: 74px;                    /* height of the fixed nav */
}
@media (max-width: 1000px) { body { padding-top: 66px; } }   /* matches the nav breakpoint */

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--dfont);
  color: var(--ink);
  line-height: 1.44;
  letter-spacing: .005em;
  font-weight: 700;
  text-wrap: balance;
  word-break: auto-phrase;              /* clean JP phrase-aware line breaks */
  overflow-wrap: normal;                /* never split a word/phrase mid-heading */
  margin: 0;
}

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

::selection { background: rgba(211,9,57,.14); color: var(--ink); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: var(--r-btn); font-weight: 700; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Inline links inside prose.
   Scoped to the design's own containers, NOT to <main> — the Elementor build
   unwraps <main>, and a `main p a` selector silently stops matching there. */
.hp-sec p a, .hp-sec li a, .hp-article p a, .hp-article li a,
.hp-stand a, .hp-src a, .hp-note a, .hp-mini a, .hp-quote a, .hp-lead a,
.hp-splittext p a, .hp-qa .a a, .tldr a, .quick-answer a, .takeaway a {
  color: var(--crimson);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(211,9,57,.35);
  transition: text-decoration-color .16s ease;
}
.hp-sec p a:hover, .hp-article p a:hover, .hp-note a:hover, .hp-lead a:hover,
.hp-stand a:hover, .tldr a:hover, .quick-answer a:hover { text-decoration-color: var(--crimson); }

/* -------------------------------------------------------------- 3. UTILITIES */

.hp-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.hp-sec { padding-block: var(--secpad); position: relative; }
.hp-sec.tint { background: var(--tint); }
.hp-sec.tint + .hp-sec.tint { padding-top: 0; }     /* never stack two tint bands */

.hp-introsec { padding-block: calc(var(--secpad) * .72); }

/* The gradient hairline. Used to open a section — the brand's quietest signal. */
.grad-rule { height: 3px; width: 56px; border-radius: 2px; background: var(--grad); }

/* --------------------------------------------------- 4. HEADER / NAVIGATION */

/* Fixed, not sticky. Elementor wraps every top-level section in its own container,
   so a sticky nav only pins within that one container and scrolls away with it
   (gotcha #8). `fixed` behaves identically in the standalone build. Body padding
   compensates for the nav being out of flow. */
.hp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.hp-nav .nvcenter {
  max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gut);
  height: 74px; display: flex; align-items: center; gap: 26px;
}
.hp-logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.hp-logo img { height: 32px; width: auto; }

.hp-nav-links {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; list-style: none; padding: 0;
}
.hp-navitem { position: relative; }

.hp-navtop {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; border-radius: var(--r-sm);
  font-family: var(--bfont); font-size: .9rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.hp-navtop:hover { color: var(--crimson); background: rgba(211,9,57,.05); }
.hp-navtop[aria-current="page"],
.has-menu.open-parent > .hp-navtop { color: var(--crimson); }

.hp-caret { width: 14px; height: 14px; transition: transform .2s ease; }
.has-menu.open > .hp-navtop .hp-caret { transform: rotate(180deg); }
.has-menu.open > .hp-navtop { color: var(--crimson); background: rgba(211,9,57,.05); }

/* Dropdown panel — the zenweb.my mega-menu idea, at a Japanese corporate volume. */
.hp-mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(680px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-2); padding: 10px; z-index: 120;
}
.hp-mega[hidden] { display: none; }
.hp-mega::before {                       /* the brand's quiet signal, once */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--r) var(--r) 0 0; background: var(--grad);
}
.hp-mega::after {                        /* invisible hover bridge over the 10px gap so the panel stays open while the pointer moves down to the items */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.hp-megain { display: grid; gap: 8px; }

.hp-megaall {
  display: grid; gap: 2px; text-decoration: none;
  background: var(--tint); border-radius: var(--r-sm); padding: 14px 16px;
  transition: background .16s ease;
}
.hp-megaall:hover { background: rgba(211,9,57,.06); }
.hp-megaall .t { font-family: var(--dfont); font-weight: 700; font-size: .95rem; color: var(--ink); }
.hp-megaall .d { font-size: .82rem; color: var(--mut); line-height: 1.6; }

.hp-megagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hp-megaitem {
  display: grid; gap: 2px; text-decoration: none;
  padding: 12px 14px; border-radius: var(--r-sm);
  transition: background .16s ease;
}
.hp-megaitem:hover { background: var(--tint); }
.hp-megaitem .t { font-family: var(--dfont); font-weight: 700; font-size: .9rem; color: var(--ink); }
.hp-megaitem:hover .t, .hp-megaitem[aria-current="page"] .t { color: var(--crimson); }
.hp-megaitem .d { font-size: .78rem; color: var(--mut); line-height: 1.55; }

.hp-navcta {
  flex: 0 0 auto; margin-left: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .85rem; letter-spacing: .02em;
  padding: 11px 20px; border-radius: var(--r-btn);
  transition: transform .16s ease, box-shadow .16s ease, background .2s ease;
}
.hp-navcta:hover { background: var(--crimson); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(211,9,57,.6); }

.hp-burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.hp-burger span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .18s ease; }
.hp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The list CTA is the mobile-drawer version only; desktop uses .hp-navcta. */
.hp-nav-links .m-cta { display: none; }

@media (max-width: 1000px) {
  .hp-nav .nvcenter { height: 66px; }
  .hp-burger { display: flex; }
  .hp-navcta { display: none; }
  .hp-nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2); padding: 8px var(--gut) 20px;
    max-height: calc(100vh - 66px); overflow-y: auto;
    display: none;
  }
  .hp-nav-links.open { display: flex; }
  .hp-navitem { border-bottom: 1px solid var(--line-soft); }
  .hp-navtop { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: .95rem; border-radius: 0; }

  /* In the drawer the dropdown becomes an inline accordion, not a floating panel. */
  .hp-mega {
    position: static; transform: none; width: auto;
    border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 14px; background: transparent;
  }
  .hp-mega::before { display: none; }
  .hp-mega::after { display: none; }
  .hp-megagrid { grid-template-columns: 1fr; }
  .hp-megaall, .hp-megaitem { padding: 12px 14px; }
  .hp-megaall { background: var(--tint); }

  .hp-nav-links .m-cta { display: block; border-bottom: 0; margin-top: 14px; }
  .hp-nav-links .m-cta .hp-navtop {
    background: var(--ink); color: #fff; justify-content: center;
    border-radius: var(--r-btn); padding: 15px;
  }
}

/* ------------------------------------------------------------------ 5. HERO */

.hp-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) 0;
  background: var(--bg);
}
/* The zenweb.my colour wash — present, but at a whisper. */
.hp-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 780px;
  background:
    radial-gradient(58% 52% at 78% 10%, rgba(211,9,57,.17), transparent 68%),
    radial-gradient(54% 50% at 16% 2%,  rgba(36,36,178,.16), transparent 68%),
    radial-gradient(44% 44% at 48% 0%,  rgba(125,35,137,.10), transparent 72%);
  pointer-events: none;
}
.hp-hero > * { position: relative; }

.hcopy { max-width: 900px; }
.hp-hero.hcenter .hcopy { margin-inline: auto; text-align: center; }

.hp-hmeta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .715rem; font-weight: 700; letter-spacing: .1em;
  color: var(--indigo); background: rgba(255,255,255,.72);
  border: 1px solid rgba(36,36,178,.22); border-radius: var(--r-pill);
  padding: 7px 17px; margin: 0 0 26px;
}
.hp-hmeta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); }

.hp-h1 {
  font-size: clamp(1.95rem, 4.4vw, 3.15rem);
  font-weight: 900; line-height: 1.36; letter-spacing: -.005em;
  margin: 0 0 .62em; color: var(--ink);
}
/* The one gradient headline phrase. Never more than one per page. */
.hp-h1 .g, .grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hp-hsa {
  font-size: clamp(1rem, 1.35vw, 1.075rem); color: var(--mut);
  line-height: 1.95; max-width: 880px; margin: 0 auto 2.2em;
}
.hp-hero:not(.hcenter) .hp-hsa { margin-inline: 0; }
.hp-hsa strong { color: var(--ink); font-weight: 700; }

.hp-cta { display: flex; flex-wrap: wrap; gap: 13px; }
.hp-hero.hcenter .hp-cta { justify-content: center; }

.hph-wide { margin-top: clamp(46px, 6vw, 76px); }
.hph-wide .hp-ph { border-radius: var(--r-lg); box-shadow: var(--sh-3); aspect-ratio: 21/9; }

@media (max-width: 700px) {
  .hph-wide .hp-ph { aspect-ratio: 16/10; border-radius: var(--r); }
}

/* --------------------------------------------------------------- 6. BUTTONS */

.hp-btn, .hp-btn2, .hp-btn-inv {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--bfont); font-weight: 700; font-size: .945rem;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
  padding: 15px 30px; border-radius: var(--r-btn); border: 1.5px solid transparent;
  transition: transform .16s ease, box-shadow .18s ease, background .2s ease, color .18s ease, border-color .18s ease;
}
.hp-btn { background: var(--crimson); color: #fff; box-shadow: 0 10px 24px -12px rgba(211,9,57,.85); }
.hp-btn:hover { background: var(--crimson-deep); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(211,9,57,.7); }

.hp-btn2 { background: #fff; color: var(--ink); border-color: var(--line); }
.hp-btn2:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-1); }

.hp-btn-inv { background: #fff; color: var(--ink); }
.hp-btn-inv:hover { background: rgba(255,255,255,.9); transform: translateY(-2px); }

.hp-btn::after, .hp-btn-inv::after { content: "→"; font-size: 1em; line-height: 1; transition: transform .18s ease; }
.hp-btn:hover::after, .hp-btn-inv:hover::after { transform: translateX(3px); }

/* On narrow screens equal-width, full-bleed buttons beat ragged auto widths. */
@media (max-width: 560px) {
  .hp-cta { flex-direction: column; align-items: stretch; }
  .hp-cta .hp-btn, .hp-cta .hp-btn2, .hp-cta .hp-btn-inv { width: 100%; }
}

/* --------------------------------------------------------- 7. SECTION HEADS */

.hp-sechead {
  max-width: 1040px; margin: 0 auto clamp(38px, 4.6vw, 62px);
  text-align: center;
}
.hp-kicker {
  font-size: .7rem; letter-spacing: .16em; font-weight: 700;
  color: var(--crimson); margin: 0 0 1.05em; text-transform: uppercase;
}
.hp-kicker:empty { display: none; }

.hp-h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700;
  line-height: 1.42; margin: 0 0 .6em;
}
/* Section number chip, emitted by the build as <span class="hp-num">03</span> */
.hp-num {
  display: block; width: fit-content; margin: 0 auto .95em;
  font-family: var(--dfont); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; color: var(--crimson);
  padding-bottom: .5em; border-bottom: 2px solid;
  border-image: var(--grad) 1;
}
.hp-sechead.left { text-align: left; margin-inline: 0; }
.hp-sechead.left .hp-num { margin-inline: 0; }

/* Long Japanese standfirsts read badly when centred — constrain and left-align. */
.hp-stand {
  color: var(--mut); font-size: 1.0rem; line-height: 1.92;
  max-width: 880px; margin: 0 auto; text-align: left;
}
.hp-stand strong { color: var(--ink); font-weight: 700; }

.hp-lead {
  max-width: var(--measure); margin-inline: auto; margin-bottom: 1.35em;
  color: var(--ink-2);
}
.hp-lead:last-child { margin-bottom: 0; }

.hp-sub {
  font-family: var(--dfont); font-weight: 700;
  font-size: clamp(1.12rem, 2vw, 1.35rem); line-height: 1.5;
  margin: 2.6rem auto 1.15rem; max-width: var(--measure);
  padding-left: .85rem; border-left: 4px solid var(--crimson); color: var(--ink);
}

.hp-intro { max-width: 900px; margin-inline: auto; text-align: center; color: var(--mut); }
.hp-intro p { margin-bottom: 1.15em; }

.hp-mini {
  font-size: .9rem; color: var(--mut); line-height: 1.85;
  max-width: var(--measure); margin: 1.5em auto 0;
  border-top: 1px solid var(--line); padding-top: 1.15em;
}
.hp-src {
  font-size: .795rem; color: var(--mut-2); text-align: center;
  margin: 1.7rem auto 0; max-width: 880px; line-height: 1.75;
}

/* ---------------------------------------------------------- 8. MEDIA BLOCKS */

.hp-ph {
  position: relative; overflow: hidden; margin: 0;
  border-radius: var(--r); background: var(--tint-2);
  aspect-ratio: 4/3;
}
.hp-ph::after {                                  /* brand tint over every photo */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(36,36,178,.13), rgba(211,9,57,.10));
  mix-blend-mode: multiply; pointer-events: none;
}
.hp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hp-figcap {
  text-align: center; font-family: var(--dfont); font-weight: 700;
  font-size: 1.02rem; color: var(--ink); line-height: 1.55;
  margin: clamp(30px, 3.4vw, 48px) 0 1.4rem;   /* was 0 — it sat flush against the
                                                  paragraph above and read as messy */
}
.hp-sechead + .hp-figcap,
.hp-figcap:first-child { margin-top: 0; }
.hp-photodiv { margin: clamp(38px, 5vw, 62px) auto 0; max-width: 1120px; }

.hp-videowrap { max-width: 980px; margin: 0 auto; }
.hp-video {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: var(--r); background: var(--ink); box-shadow: var(--sh-2);
}
.hp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------- 9. SPLIT ROW */

.hp-split {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 66px); align-items: center;
  margin-inline: auto;
}
.hp-split.flip .hp-splittext { order: 2; }
.hp-splittext p { margin-bottom: 1.15em; }
.hp-splittext p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .hp-split { grid-template-columns: 1fr; gap: 30px; }
  .hp-split.flip .hp-splittext { order: 0; }
}

/* ----------------------------------------------------------- 10. CHECKLISTS */

.hp-checklist {
  list-style: none; padding: 0;
  margin: 1.6em auto; max-width: var(--measure);
  display: grid; gap: 13px;
}
.hp-checklist li {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px;
  align-items: start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 15px 18px;
  line-height: 1.85; font-size: .96rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hp-sec.tint .hp-checklist li { background: #fff; }
.hp-checklist li:hover { border-color: rgba(211,9,57,.3); box-shadow: var(--sh-1); }
.hp-checklist li strong { color: var(--ink); font-weight: 700; }

.hp-ck { width: 22px; height: 22px; color: var(--crimson); margin-top: .3em; flex: none; }

/* ------------------------------------------------------------- 11. STAT GRID
   The signature component: a gradient numeral on a white card whose top edge
   carries the brand gradient. Used once per page at most. */

/* auto-fit, so three stats fill the row instead of leaving a fourth cell empty */
.hp-statgrid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.hp-stat {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 24px 26px;
  display: flex; flex-direction: column; gap: .45em;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
}
.hp-stat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.hp-stat .v {
  font-family: var(--dfont); font-weight: 900;
  font-size: clamp(1.6rem, 2.9vw, 2.15rem); line-height: 1.15;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hp-stat .l { font-weight: 700; font-size: .935rem; color: var(--ink); line-height: 1.6; }
.hp-stat .s { font-size: .825rem; color: var(--mut); line-height: 1.75; }

/* Balance the last row instead of leaving one card stranded: 6 -> 3+3, 9 -> 3+3+3,
   8 -> 4+4. Scoped to desktop so the tablet/mobile rules below still win. */
@media (min-width: 901px) {
  .hp-statgrid:has(> .hp-stat:nth-child(6):last-child),
  .hp-statgrid:has(> .hp-stat:nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); }
  .hp-statgrid:has(> .hp-stat:nth-child(7):last-child),
  .hp-statgrid:has(> .hp-stat:nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) { .hp-statgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px) { .hp-statgrid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- 12. TABLE */

.hp-tablewrap {
  overflow-x: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
}
.hp-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .93rem; }
.hp-table th, .hp-table td {
  padding: 15px 20px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft); line-height: 1.75;
}
.hp-table thead th {
  font-family: var(--dfont); font-size: .765rem; font-weight: 700;
  letter-spacing: .08em; color: var(--mut); text-transform: uppercase;
  background: var(--tint); white-space: nowrap;
}
.hp-sec.tint .hp-tablewrap { background: #fff; }
.hp-sec.tint .hp-table thead th { background: var(--tint-2); }
.hp-table tbody th { font-weight: 700; color: var(--ink); font-family: var(--dfont); }
.hp-table tbody tr:last-child th, .hp-table tbody tr:last-child td { border-bottom: 0; }
.hp-table tbody tr { transition: background .15s ease; }
.hp-table tbody tr:hover { background: rgba(211,9,57,.022); }

/* ------------------------------------------------------------- 13. BAR CHART */

.hp-bars { max-width: 940px; margin: 0 auto; display: grid; gap: 16px; }
.hp-brow { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 16px; align-items: center; }
.bn { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.bwrap, .btrack { position: relative; height: 12px; background: var(--tint-2); border-radius: var(--r-pill); overflow: hidden; }
.bw { position: absolute; inset: 0 auto 0 0; background: var(--grad); border-radius: var(--r-pill); }
.bv { font-family: var(--dfont); font-weight: 700; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.hp-brow.big .bv { font-size: 1.05rem; color: var(--crimson); }
.hp-blegend { font-size: .8rem; color: var(--mut-2); text-align: center; margin-top: 1.3rem; }

@media (max-width: 620px) {
  .hp-brow { grid-template-columns: 1fr auto; }
  .hp-brow .bwrap, .hp-brow .btrack { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- 14. NOTES & QUOTES */

.hp-note {
  max-width: var(--measure); margin: 2.2rem auto 0;
  font-size: .955rem; color: var(--ink-2); line-height: 1.9;
  background: var(--tint); border-radius: var(--r-sm);
  border-left: 3px solid var(--crimson);
  padding: 17px 22px;
}
.hp-sec.tint .hp-note { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--crimson); }
.hp-note strong { color: var(--ink); font-weight: 700; }

.hp-quote {
  max-width: 900px; margin: 2.8rem auto 0; position: relative;
  font-family: var(--dfont); font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  line-height: 1.78; color: var(--ink); padding-left: 1.5em;
}
.hp-quote::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 3px;
  border-radius: 2px; background: var(--grad);
}
.hp-quote strong { color: var(--crimson); font-weight: 700; }

/* ------------------------------------------------------------ 15. SVC CARDS */

.hp-svcgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
/* Archive: one wrapper per category so the gap between groups is uniform,
   instead of depending on whatever markup the source put between them. */
.hp-svcgroup + .hp-svcgroup { margin-top: clamp(30px, 3.6vw, 52px); }
.hp-svcgroup { margin-top: clamp(22px, 2.6vw, 34px); }
.hp-svc {
  position: relative; display: flex; flex-direction: column; gap: .6em;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 26px 26px;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.hp-svc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.hp-svc:hover::before { transform: scaleX(1); }
.hp-svc .n {
  font-family: var(--dfont); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; color: var(--mut-2);
}
.hp-svc .t {
  font-family: var(--dfont); font-size: 1.13rem; font-weight: 700;
  color: var(--ink); line-height: 1.5;
}
.hp-svc .d { font-size: .925rem; color: var(--mut); line-height: 1.85; margin: 0; }
.hp-svcdate {
  font-size: .74rem; color: var(--mut-2); letter-spacing: .01em;
  margin-top: .5em; padding-top: .7em; border-top: 1px solid var(--line-soft);
}
.hp-svc .d + .hp-svcdate { margin-top: auto; }   /* pin the date to the card foot */

.hp-svc .hp-arr {
  margin-top: auto; width: 22px; height: 22px; color: var(--crimson);
  padding-top: 0; transition: transform .2s ease;
}
.hp-svc > .hp-arr { margin-top: auto; margin-bottom: 0; }
.hp-svc:hover .hp-arr { transform: translateX(5px); }
.hp-svc .d + .hp-arr { margin-top: 1.2em; }
.hp-svc .hp-svcdate + .hp-arr { margin-top: .9em; }

/* Archive pagination. `is-hidden` only hides — the card stays in the DOM so every
   article link is still crawlable. */
.hp-svc.is-hidden { display: none; }

.hp-pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin-top: clamp(24px, 3vw, 38px);
}
.hp-pagebtn {
  font-family: var(--bfont); font-size: .85rem; font-weight: 700;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 9px 18px; cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.hp-pagebtn:hover:not(:disabled) { color: var(--crimson); border-color: var(--crimson); }
.hp-pagebtn:disabled { opacity: .38; cursor: default; }
.hp-pagebtn { min-width: 40px; padding: 9px 12px; font-variant-numeric: tabular-nums; }
.hp-pagebtn.hp-pagenav { padding: 9px 18px; }
.hp-pagebtn.is-current {
  color: #fff; background: var(--crimson); border-color: var(--crimson);
}
.hp-pagebtn.is-current:hover { color: #fff; }
.hp-pagegap { color: var(--mut-2); padding: 0 2px; font-size: .85rem; }

@media (max-width: 560px) {
  .hp-pagebtn { min-width: 36px; padding: 8px 9px; font-size: .8rem; }
  .hp-pagebtn.hp-pagenav { padding: 8px 12px; }
}

@media (max-width: 940px) { .hp-svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hp-svcgrid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- 16. FAQ */

/* .hp-acc is the wrapper; each <details class="hp-qa"> is one item; .a is its panel. */
.hp-acc { max-width: 980px; margin-inline: auto; }

.hp-qa {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); margin-bottom: 12px; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hp-qa:last-child { margin-bottom: 0; }
.hp-sec.tint .hp-qa { background: #fff; }
.hp-qa[open] { border-color: rgba(211,9,57,.28); box-shadow: var(--sh-1); }

.hp-qa > summary {
  cursor: pointer; list-style: none; display: block;
  padding: 19px 58px 19px 22px; position: relative;
  transition: color .16s ease;
}
.hp-qa > summary::-webkit-details-marker { display: none; }
.hp-qa > summary::marker { content: ""; }
.hp-qa > summary h3 {
  font-family: var(--dfont); font-weight: 700; font-size: 1.0rem;
  color: inherit; line-height: 1.62; margin: 0;
}
.hp-qa > summary:hover { color: var(--crimson); }

.hp-plus {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--crimson); pointer-events: none;
}
.hp-plus::before, .hp-plus::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform .24s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.hp-plus::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.hp-plus::after  { left: 9px; top: 2px; width: 2px; height: 16px; }
.hp-qa[open] .hp-plus::after { transform: rotate(90deg); opacity: 0; }

.hp-qa > .a {
  padding: 17px 22px 21px; font-size: .955rem; color: var(--ink-2); line-height: 1.9;
  border-top: 1px solid var(--line-soft);
}
.hp-qa > .a p:last-child { margin-bottom: 0; }
.hp-qa > .a ul { margin: .9em 0 0; padding-left: 1.3em; }
.hp-qa > .a li { margin-bottom: .5em; }

/* -------------------------------------------------------------- 17. CTA BAND */

.hp-ctaband {
  position: relative; overflow: hidden;
  background: var(--ink-panel); color: #fff;
  padding-block: clamp(60px, 7vw, 96px);
}
.hp-ctaband::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 88% 8%,  rgba(211,9,57,.42), transparent 66%),
    radial-gradient(58% 78% at 8% 96%,  rgba(36,36,178,.44), transparent 66%),
    radial-gradient(40% 60% at 50% 50%, rgba(125,35,137,.20), transparent 70%);
}
.hp-ctaband::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad);
}
.hp-ctain {
  position: relative; max-width: 880px; margin-inline: auto;
  padding-inline: var(--gut); text-align: center;
}
.hp-ctain :is(h2, h3) {
  color: #fff; font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 900; line-height: 1.4; margin: 0 0 .65em;
}
.hp-ctain p { color: rgba(255,255,255,.78); font-size: 1.0rem; margin: 0 0 2.1em; line-height: 1.9; }
.hp-ctain p:last-child { margin-bottom: 0; }
.hp-ctain a:not(.hp-btn):not(.hp-btn2):not(.hp-btn-inv) {
  color: #fff; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.5); font-weight: 700;
}
.hp-ctain a:not(.hp-btn):not(.hp-btn2):not(.hp-btn-inv):hover { text-decoration-color: #fff; }
.hp-ctain .hp-cta { justify-content: center; }
.hp-ctain .hp-btn2 { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.hp-ctain .hp-btn2:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Promo strip — a cross-link, not a conversion moment. Light, compact, quiet.
   Reserving the dark band for the one real CTA keeps it meaningful. */
.hp-ctaband.promo {
  background: var(--tint); color: var(--ink-2);
  padding-block: clamp(30px, 3.4vw, 44px);
  border-block: 1px solid var(--line);
}
.hp-ctaband.promo::before { display: none; }
.hp-ctaband.promo::after { height: 2px; background: var(--grad); }
.hp-ctaband.promo .hp-ctain { max-width: 1000px; text-align: center; }
.hp-ctaband.promo .hp-ctain :is(h2, h3) {
  color: var(--ink); font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 700; margin: 0 0 .5em;
}
.hp-ctaband.promo .hp-ctain p { color: var(--mut); font-size: .96rem; margin: 0; }
.hp-ctaband.promo .hp-ctain a:not(.hp-btn):not(.hp-btn2):not(.hp-btn-inv) {
  color: var(--crimson); text-decoration-color: rgba(211,9,57,.35);
}
.hp-ctaband.promo .hp-ctain a:not(.hp-btn):not(.hp-btn2):not(.hp-btn-inv):hover {
  text-decoration-color: var(--crimson);
}

/* ---------------------------------------------------------------- 18. FOOTER */

.hp-foot {
  background: var(--ink-panel); color: rgba(255,255,255,.66);
  padding-block: clamp(52px, 6vw, 76px) 34px;
  font-size: .9rem; line-height: 1.9;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hp-footgrid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(30px, 5vw, 64px);
  padding-bottom: 42px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.hp-flogo img { height: 30px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: .95; }
.hp-ftag { color: rgba(255,255,255,.6); font-size: .89rem; max-width: 40ch; margin: 0 0 1.4em; line-height: 1.9; }
.hp-foot h3 {
  color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 1.35em;
}
.hp-flinks { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.hp-flinks a {
  color: rgba(255,255,255,.66); text-decoration: none; font-size: .89rem;
  transition: color .16s ease;
}
.hp-flinks a:hover { color: #fff; }
.hp-fnote {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  padding-top: 26px; font-size: .8rem; color: rgba(255,255,255,.42);
}
/* Footer copyright line */
.hp-copy { font-size: .8rem; color: rgba(255,255,255,.42); margin: 0; }

@media (max-width: 820px) {
  .hp-footgrid { grid-template-columns: 1fr 1fr; }
  .hp-flogo { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .hp-footgrid { grid-template-columns: 1fr; gap: 32px; }
}

/* ------------------------------------------------------- 19. ARTICLE / BLOG */

.hp-article { max-width: 880px; margin-inline: auto; }
.hp-article h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin: 2.5em 0 .85em;
  padding-top: 1.1em; border-top: 1px solid var(--line); line-height: 1.5;
}
.hp-article h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.6em; }
.hp-article h2 .hp-num {
  display: block; margin: 0 0 .7em; font-size: .72rem; padding-bottom: .4em;
}
.hp-article > *:first-child { margin-top: 0; }
.hp-article > .tldr:first-child { margin-top: 0; }
.hp-article h3 { font-size: clamp(1.1rem, 2vw, 1.28rem); margin: 2.1em 0 .7em; line-height: 1.55; }
.hp-article p { margin-bottom: 1.5em; }
.hp-article ul, .hp-article ol { margin: 1.3em 0 1.6em; padding-left: 1.4em; }
.hp-article li { margin-bottom: .7em; line-height: 1.9; }
.hp-article li strong { color: var(--ink); }
.hp-article hr { border: 0; border-top: 1px solid var(--line); margin: 2.8em 0; }
.hp-article hr:has(+ h2) { display: none; }   /* the h2 already draws its own rule */
.hp-article img { border-radius: var(--r); margin: 1.8em 0; }
.hp-article .hp-tablewrap, .hp-article .hp-videowrap { margin-block: 2em; }
.hp-article .hp-table { min-width: 520px; }

/* Article callouts — the source copy's TLDR / quick-answer / takeaway boxes */
.tldr {
  position: relative; overflow: hidden;
  background: var(--tint); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 20px 24px 20px 28px; margin: 2em 0 2.4em;
  font-size: .97rem; line-height: 1.9;
}
.tldr::before {                       /* vertical gradient bar, no border-image artefacts */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad);
}
.tldr strong { color: var(--ink); font-weight: 700; }
.quick-answer {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--indigo);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px; margin: 1.5em 0 1.8em; font-size: .93rem; line-height: 1.88;
  color: var(--ink-2);
}
.quick-answer strong { color: var(--indigo); font-weight: 700; }
.takeaway {
  background: rgba(211,9,57,.035); border-left: 3px solid var(--crimson);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px; margin: 1.6em 0 2.2em; font-size: .93rem; line-height: 1.88;
}
.takeaway strong { color: var(--crimson); font-weight: 700; }

/* Article hero */
.hp-arthero { padding-block: clamp(44px, 5.5vw, 74px) 0; position: relative; overflow: hidden; }
.hp-arthero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 520px;
  background: radial-gradient(50% 60% at 78% 6%, rgba(211,9,57,.075), transparent 70%),
              radial-gradient(46% 56% at 16% 0%, rgba(36,36,178,.075), transparent 70%);
  pointer-events: none;
}
.hp-arthero > * { position: relative; }
.hp-crumb {
  font-size: .8rem; color: var(--mut-2); margin: 0 0 1.5em;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.hp-crumb a { color: var(--mut); text-decoration: none; }
.hp-crumb a:hover { color: var(--crimson); text-decoration: underline; }
.hp-crumb span[aria-hidden] { color: var(--line); }
.hp-artmeta {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  font-size: .8rem; color: var(--mut-2); margin-top: 1.6em;
  padding-top: 1.4em; border-top: 1px solid var(--line);
}
/* The hero already supplies the breathing room above the article body. */
.hp-arthero + main > .hp-sec:first-child { padding-top: clamp(26px, 3vw, 42px); }
.hp-cat {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  color: var(--crimson); background: rgba(211,9,57,.07);
  border: 1px solid rgba(211,9,57,.18);
  padding: 5px 13px; border-radius: var(--r-pill);
}
.hp-arth1 {
  font-family: var(--dfont); font-size: clamp(1.65rem, 3.6vw, 2.5rem);
  font-weight: 900; line-height: 1.42; color: var(--ink); margin: .55em 0 0;
}

/* Blog index cards */
.hp-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-post {
  display: flex; flex-direction: column; gap: .7em;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 24px;
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-post .t {
  font-family: var(--dfont); font-weight: 700; font-size: 1.03rem;
  line-height: 1.6; color: var(--ink);
}
.hp-post .d { font-size: .885rem; color: var(--mut); line-height: 1.82; margin: 0; }
a.hp-post:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
a.hp-post:hover .t { color: var(--crimson); }
.hp-post.soon { background: var(--tint); border-style: dashed; }
.hp-post.soon .t { color: var(--mut); }
.hp-soontag {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--mut-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 11px; width: fit-content;
}
.hp-catrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(34px, 4vw, 52px); }
.hp-catrow a {
  font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 20px; background: #fff; transition: all .16s ease;
}
.hp-catrow a:hover { border-color: var(--crimson); color: var(--crimson); }

@media (max-width: 940px) { .hp-postgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hp-postgrid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- 20. FORM */

/* Contact form status banners + the honeypot field (must be invisible to humans
   but NOT display:none — some bots fill anything that is display:none). */
.hp-formmsg {
  max-width: 880px; margin: 0 auto clamp(20px, 2.4vw, 30px);
  background: var(--tint); border: 1px solid var(--line);
  border-left: 4px solid var(--indigo); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px; font-size: .95rem; line-height: 1.9; color: var(--ink-2);
}
.hp-formmsg strong { color: var(--ink); }
.hp-formmsg.err { border-left-color: var(--crimson); background: rgba(211,9,57,.04); }
.hp-formmsg[hidden] { display: none; }

.hp-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.hp-form { max-width: 880px; margin-inline: auto; display: grid; gap: 22px; }
.hp-field { display: grid; gap: 9px; }
.hp-field.two { grid-template-columns: 1fr 1fr; gap: 22px; }
.hp-field label { font-family: var(--dfont); font-weight: 700; font-size: .89rem; color: var(--ink); }
.hp-req { color: var(--crimson); font-size: .78rem; margin-left: .5em; font-weight: 700; }
.hp-field input, .hp-field select, .hp-field textarea {
  font-family: var(--bfont); font-size: .96rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; width: 100%; line-height: 1.7;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.hp-field textarea { min-height: 168px; resize: vertical; }
.hp-field input:focus, .hp-field select:focus, .hp-field textarea:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(36,36,178,.12);
}
.hp-field .hint { font-size: .82rem; color: var(--mut-2); line-height: 1.7; }
.hp-form .hp-btn { width: fit-content; justify-self: start; padding: 17px 40px; }
.hp-consent { display: flex; gap: 12px; align-items: start; font-size: .89rem; color: var(--mut); line-height: 1.8; }
.hp-consent input { width: 18px; height: 18px; margin-top: .35em; flex: none; accent-color: var(--crimson); }

@media (max-width: 620px) { .hp-field.two { grid-template-columns: 1fr; gap: 22px; } }

/* ------------------------------------- 20b. ELEMENTOR FORM, styled as .hp-form
   The contact form is an Elementor Pro form widget so submissions land in WP and the
   client can edit fields without touching code. Elementor ships its own markup, so
   every one of its classes is mapped onto the design's own form styling — the
   rendered result must be indistinguishable from the hand-built .hp-form block. */

/* Neutralise Elementor's container chrome the same way build.php's hpe-fixes does,
   so the form band is full-bleed and the widget alone controls the measure. */
.zw-formband, .zw-formband > .e-con-inner {
  max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
}
.zw-formband .elementor-widget.elementor-widget-form {
  /* +gutter so the CONTENT measure is 880px, matching .hp-form inside .hp-wrap */
  max-width: calc(880px + var(--gut) * 2) !important; width: 100%;
  margin-left: auto !important; margin-right: auto !important;
  padding-inline: var(--gut);
}

.zw-formband .elementor-form-fields-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0;
}
/* The CSS grid above owns the columns, so Elementor's own `elementor-col-50`
   width (50% of the grid cell) has to be neutralised or every field renders
   at a quarter of its intended width. */
.zw-formband .elementor-form-fields-wrapper > .elementor-field-group.elementor-column {
  padding: 0 !important; margin: 0; display: grid; gap: 9px; align-content: start;
  width: 100% !important; max-width: 100% !important; flex: none !important;
}
.zw-formband .elementor-field-group.elementor-col-100 { grid-column: 1 / -1; }
.zw-formband .elementor-field-group.elementor-col-50  { grid-column: auto; }

.zw-formband .elementor-widget-form .elementor-field-group > label.elementor-field-label {
  font-family: var(--dfont); font-weight: 700; font-size: .89rem;
  color: var(--ink); padding: 0; margin: 0; line-height: 1.6;
}
/* Elementor puts `elementor-mark-required` on the field GROUP and draws a bare `*`
   through the label's ::after. Replace that asterisk with the design's 必須 badge. */
.zw-formband .elementor-mark-required .elementor-field-label::after {
  content: "必須" !important;
  color: var(--crimson); font-size: .78rem; font-weight: 700;
  margin-left: .5em; letter-spacing: .02em; vertical-align: baseline;
}

.zw-formband .elementor-field-textual,
.zw-formband select.elementor-field,
.zw-formband textarea.elementor-field {
  font-family: var(--bfont); font-size: .96rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; width: 100%; line-height: 1.7; height: auto;
  box-shadow: none; transition: border-color .16s ease, box-shadow .16s ease;
}
.zw-formband textarea.elementor-field { min-height: 168px; resize: vertical; }
.zw-formband .elementor-field-textual:focus,
.zw-formband select.elementor-field:focus,
.zw-formband textarea.elementor-field:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(36,36,178,.12);
}
.zw-formband .elementor-field-textual::placeholder { color: var(--mut-2); }

/* consent checkbox row */
.zw-formband .elementor-field-type-acceptance .elementor-field-subgroup {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .89rem; color: var(--mut); line-height: 1.8;
}
.zw-formband .elementor-field-type-acceptance input[type="checkbox"] {
  width: 18px; height: 18px; margin: .35em 0 0; flex: none; accent-color: var(--crimson);
}

/* submit button — the design's .hp-btn, arrow included */
.zw-formband .e-form__buttons { justify-content: flex-start; }
.zw-formband .elementor-button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--bfont); font-weight: 700; font-size: .945rem; letter-spacing: .02em;
  background: var(--crimson); color: #fff; border: 1.5px solid transparent;
  border-radius: var(--r-btn); padding: 17px 40px; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(211,9,57,.85);
  transition: transform .16s ease, box-shadow .18s ease, background .2s ease;
}
.zw-formband .elementor-button[type="submit"]:hover {
  background: var(--crimson-deep); transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(211,9,57,.7);
}
.zw-formband .elementor-button[type="submit"] .elementor-button-text::after {
  content: " →";
}

/* status messages — same look as the .hp-formmsg banners */
.zw-formband .elementor-message {
  margin-top: 18px; padding: 16px 20px; font-size: .95rem; line-height: 1.9;
  background: var(--tint); border: 1px solid var(--line);
  border-left: 4px solid var(--indigo); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
}
.zw-formband .elementor-message.elementor-message-danger { border-left-color: var(--crimson); background: rgba(211,9,57,.04); }
.zw-formband .elementor-message::before { display: none; }
.zw-formband .elementor-field-group .elementor-error .elementor-field { border-color: var(--crimson); }
.zw-formband .elementor-message-danger.elementor-help-inline { font-size: .82rem; padding: 0; margin-top: .4em; background: none; border: 0; color: var(--crimson); }

@media (max-width: 620px) {
  .zw-formband .elementor-form-fields-wrapper { grid-template-columns: 1fr; }
  .zw-formband .elementor-button[type="submit"] { width: 100%; }
}

/* --------------------------------------------------------- 21. MISC HELPERS */

.hp-brow .a, .fb, .fc, .in, .sm { }   /* engine-legacy hooks — intentionally inert */
.hp-arr { font-weight: 700; color: var(--crimson); }

/* Print */
@media print {
  .hp-nav, .hp-ctaband, .hp-foot, .hp-cta { display: none !important; }
  body { font-size: 11pt; line-height: 1.7; }
  .hp-sec { padding-block: 12pt; }
}