/* =========================================================
   ExaWizards 電力業界向け LP — layout styles
   Builds on colors_and_type.css tokens.
   Tone variants via [data-tone="refined"] (default) / "dynamic"
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--fg-1);
  font-family: var(--font-sans-jp);
  font-size: 16px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:root {
  --lp-max: 1160px;
  --lp-pad: 32px;
  --sec-pad: 120px;            /* vertical section rhythm */
  --tone-accent: var(--exa-blue);
}
[data-tone="dynamic"] { --sec-pad: 132px; }

.wrap { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-pad); }

/* generic section */
.section { padding: var(--sec-pad) 0; position: relative; scroll-margin-top: 88px; }
.section--tight { padding: 84px 0; }

/* ---- section heading block ---- */
.sec-head { margin-bottom: 56px; }
.eyebrow {
  font-family: var(--font-sans-en);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 16px;
  color: var(--tone-accent);
  display: inline-block;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--tone-accent);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}
.sec-title {
  font-family: var(--font-sans-jp);
  font-weight: var(--w-bold);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
}
.sec-lead {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border-soft);
}
.hwrap { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 48px; }
.site-header .bar {
  display: flex; align-items: center; gap: 40px;
  height: 88px;
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand-mark { height: 38px; width: auto; }
.brand-word { height: 19px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; flex: 1; }
.nav a {
  font-size: 16px; font-weight: var(--w-bold); color: var(--ink);
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .18s cubic-bezier(.2,0,0,1); white-space: nowrap;
}
.nav a:hover { color: var(--exa-blue); }
.nav a.has-caret svg { width: 16px; height: 16px; stroke-width: 2.2; }
.nav a.nav-accent { color: var(--exa-blue); }
.head-right { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.lang { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: var(--w-bold); }
.lang .lang-on { color: var(--ink); }
.lang .lang-sep { color: var(--border); font-weight: var(--w-regular); }
.lang .lang-off { color: var(--gray-400); }
.lang .lang-off:hover { color: var(--exa-blue); }
.nav-cta { padding: 14px 28px; font-size: 16px; border-radius: var(--radius-pill); }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; background: transparent;
  color: var(--ink); cursor: pointer; flex-shrink: 0; padding: 0;
  transition: color .18s;
}
.nav-toggle svg { width: 34px; height: 34px; stroke-width: 2; }
.nav-toggle:hover { color: var(--exa-blue); background: transparent; }
.mobile-nav { display: none; }
.mobile-nav[hidden] { display: none !important; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans-jp); font-weight: var(--w-bold);
  font-size: 16px; line-height: 1;
  padding: 15px 28px; border-radius: var(--radius-md);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .18s cubic-bezier(.2,0,0,1), color .18s, border-color .18s;
  white-space: nowrap;
}
.btn .ico { width: 17px; height: 17px; }
.btn--primary { background: var(--exa-blue); color: var(--white); }
.btn--primary:hover { background: var(--exa-blue-dark); }
.btn--ghost { background: transparent; color: var(--exa-blue); border-color: var(--exa-blue); }
.btn--ghost:hover { background: var(--exa-blue); color: var(--white); }
.btn--lg { font-size: 17px; padding: 19px 40px; }
.btn--on-blue { background: var(--white); color: var(--exa-blue); }
.btn--on-blue:hover { background: var(--blue-tint); }
.btn--ghost-inv { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--ghost-inv:hover { background: var(--white); color: var(--exa-blue); border-color: var(--white); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* full-bleed background image */
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* legibility scrim over the photo */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(8,5,40,0.82) 0%,
    rgba(8,5,40,0.62) 42%,
    rgba(8,5,40,0.20) 100%
  );
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: 120px; }
.hero-copy { max-width: 640px; }
.hero h1 {
  font-family: var(--font-sans-jp); font-weight: var(--w-bold);
  font-size: clamp(36px, 4.8vw, 62px); line-height: 1.24; letter-spacing: 0.01em;
  margin: 0 0 28px; color: var(--white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.28);
}
.hero h1 .hl { color: var(--white); border-bottom: 4px solid var(--white); padding-bottom: 2px; }
.hero-lead {
  font-size: 16.5px; line-height: 1.95; color: rgba(255,255,255,0.88);
  max-width: 560px; width: 100%; margin: 0 0 38px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.32);
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-actions .btn { min-width: 240px; }
/* hero CTA: white primary on the photo, outlined secondary */
.hero-actions .btn--primary { background: var(--white); color: var(--exa-blue); }
.hero-actions .btn--primary:hover { background: var(--blue-tint); }

/* dynamic tone: tint the scrim toward ExaBlue */
[data-tone="dynamic"] .hero-scrim {
  background: linear-gradient(
    100deg,
    rgba(20,0,200,0.88) 0%,
    rgba(20,0,200,0.58) 46%,
    rgba(20,0,200,0.18) 100%
  );
}
[data-tone="dynamic"] .hero h1 .hl { border-bottom-color: var(--blue-2); }

/* =========================================================
   NEWS
   ========================================================= */
.news { background: var(--white); }
.news-row { display: block; }
.news-list { border-top: 1px solid var(--border-soft); }
.news-item {
  display: grid; grid-template-columns: 130px 110px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 4px; border-bottom: 1px solid var(--border-soft);
  transition: background .18s; 
}
.news-item:hover { background: var(--gray-50); }
.news-date { font-family: var(--font-sans-en); font-size: 16px; color: var(--fg-2); font-weight: var(--w-medium); letter-spacing: .02em; }
.news-cat {
  font-size: 14px; font-weight: var(--w-bold); letter-spacing: .06em;
  color: var(--exa-blue); border: 1px solid var(--exa-blue);
  padding: 4px 12px; text-align: center; justify-self: start;
}
.news-title { font-size: 16px; line-height: 1.6; color: var(--ink); font-weight: var(--w-medium); }
.news-arrow { color: var(--gray-400); width: 18px; height: 18px; transition: transform .18s, color .18s; }
.news-item:hover .news-arrow { color: var(--exa-blue); transform: translateX(3px); }

/* =========================================================
   TRENDS
   ========================================================= */
.trends { background: var(--gray-50); }
.solution { }
.trends-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trend-card {
  background: var(--white); border: 1px solid var(--border-soft);
  border-top: 3px solid var(--exa-blue);
  padding: 40px 34px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; min-height: 280px;
}
.trend-num {
  font-family: var(--font-sans-en); font-weight: var(--w-black);
  font-size: 40px; line-height: 1; color: var(--blue-2); margin-bottom: 26px; text-align: center;
}
.trend-card h3 { font-size: 22px; font-weight: var(--w-bold); line-height: 1.55; margin: 0 0 16px; color: var(--exa-blue); min-height: calc(1.55em * 2); }
.trends-note { margin: 40px 0 0; font-size: 18px; line-height: var(--lh-body); color: var(--fg-2); text-align: center; font-weight: var(--w-bold); }
.trend-card p { font-size: 16px; line-height: 1.85; color: var(--fg-2); margin: 0; }
[data-tone="dynamic"] .trend-card { border-top-width: 0; }
[data-tone="dynamic"] .trend-card:nth-child(1),
[data-tone="dynamic"] .trend-card:nth-child(3) { background: var(--exa-blue); border-color: var(--exa-blue); }
[data-tone="dynamic"] .trend-card:nth-child(1) h3,
[data-tone="dynamic"] .trend-card:nth-child(3) h3 { color: var(--white); }
[data-tone="dynamic"] .trend-card:nth-child(1) p,
[data-tone="dynamic"] .trend-card:nth-child(3) p { color: rgba(255,255,255,.82); }
[data-tone="dynamic"] .trend-card:nth-child(1) .trend-num,
[data-tone="dynamic"] .trend-card:nth-child(3) .trend-num { color: var(--blue-2); }

/* =========================================================
   SOLUTION
   ========================================================= */
.sol-grid-title { font-size: 22px; font-weight: var(--w-bold); color: var(--exa-blue); margin: 0 0 24px; }
.sol-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sol-sol-card { background: var(--white); border: 1px solid var(--border-soft); padding: 40px 34px; box-shadow: var(--shadow-1); }
.sol-sol-num { font-family: var(--font-sans-en); font-weight: var(--w-black); font-size: 40px; line-height: 1; color: var(--blue-2); margin-bottom: 26px; text-align: center; }
.sol-sol-card h4 { font-size: 22px; font-weight: var(--w-bold); line-height: 1.55; margin: 0 0 16px; color: var(--exa-blue); min-height: calc(1.55em * 2); }
.sol-sol-card p { font-size: 16px; line-height: 1.85; color: var(--fg-2); margin: 0; }
.sol-note { margin: 60px 0 0; font-size: 20px; line-height: var(--lh-body); color: var(--fg-2); text-align: center; font-weight: var(--w-bold); }
.sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); }
.sol-cell {
  background: var(--white); padding: 44px 28px; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  transition: background .18s;
}
.sol-cell:hover { }
.sol-ico {
  width: 64px; height: 64px; color: var(--exa-blue);
  display: flex; align-items: center; justify-content: center;
}
.sol-ico svg { width: 56px; height: 56px; stroke-width: 1.5; }
.sol-cell .label-en { font-family: var(--font-sans-en); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); font-weight: var(--w-semibold); }
.sol-cell h4 { font-size: 18px; font-weight: var(--w-bold); margin: 0; color: var(--ink); }

/* =========================================================
   CASES
   ========================================================= */
.cases { background: var(--gray-50); }
.case-block { margin-top: 64px; }
.case-block:first-of-type { margin-top: 0; }
.case-block-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 30px; }
.case-block-num {
  font-family: var(--font-sans-en); font-weight: var(--w-black); font-size: 20px;
  color: var(--exa-blue);
}
.case-block-title { font-size: 22px; font-weight: var(--w-bold); margin: 0; color: var(--exa-blue); }
.case-block-title::after { content: ""; display:block; width: 100%; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-grid--2 { grid-template-columns: repeat(2, 1fr); }
.case-card {
  background: var(--white); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-1); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.case-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
/* 画像は幅100%で表示（左右は必ず全て見せる）。1200:630以外は上下が見切れ／余る */
.case-media {
  width: 100%; aspect-ratio: 1200 / 630;
  overflow: hidden; background: var(--white);
  display: flex; align-items: center;
}
.case-media img { display: block; width: 100%; height: auto; }
.case-body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.case-company { font-size: 16px; font-weight: var(--w-bold); letter-spacing: .04em; color: var(--exa-blue); margin-bottom: 12px; }
.case-card h4 { font-size: 17px; font-weight: var(--w-bold); line-height: 1.55; margin: 0 0 20px; color: var(--ink); }
.case-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: var(--w-bold); color: var(--exa-blue); }
.case-link svg { width: 15px; height: 15px; transition: transform .18s; }
.case-card:hover .case-link svg { transform: translateX(3px); }

/* =========================================================
   STRENGTHS
   ========================================================= */
.strengths { background: var(--white); }
.str-note { margin: 40px 0 0; font-size: 22px; line-height: var(--lh-body); color: var(--exa-blue); text-align: center; font-weight: var(--w-bold); }
.str-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.str-card {
  border: 1px solid var(--border-soft); background: var(--gray-50);
  padding: 40px; display: flex; flex-direction: column; gap: 18px;
}
.str-ico { width: 56px; height: 56px; color: var(--exa-blue); flex-shrink: 0; }
.str-ico svg { width: 44px; height: 44px; stroke-width: 1.4; }
.str-head { display: flex; align-items: center; gap: 20px; }
.str-head h3 { margin: 0; }
.str-card h3 { font-size: 22px; font-weight: var(--w-bold); margin: 0; line-height: 1.45; color: var(--exa-blue); }
.str-card p { font-size: 16px; line-height: 1.9; color: var(--fg-2); margin: 0; }
.str-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.str-metric { padding: 0; text-align: center; }
.str-metric .v { font-family: var(--font-sans-en); font-weight: var(--w-black); font-size: 44px; color: var(--exa-blue); line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.str-metric .v .unit { font-size: 20px; }
.str-metric .k { font-size: 16px; color: var(--fg-2); margin-top: 12px; line-height: 1.6; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band {
  background: var(--exa-blue); color: var(--white);
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: url('../images/top/bg-network-blue.webp') center/cover; opacity: .5; z-index: 0;
}
.cta-inner { position: relative; z-index: 1; text-align: center; padding: 96px var(--lp-pad); }
.cta-inner h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: var(--w-bold); line-height: 1.4; margin: 0 0 18px; }
.cta-inner p { font-size: 16px; color: rgba(255,255,255,.85); margin: 0 0 40px; }
.cta-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.cta-actions .btn { min-width: 264px; }

/* =========================================================
   MEMBERS / RECRUIT
   ========================================================= */
.members { background: var(--white); }
.members-intro { text-align: left; margin: 0 0 60px; }
.members-intro h2 { font-size: clamp(24px, 3vw, 34px); font-weight: var(--w-bold); line-height: 1.45; margin: 0 0 18px; color: var(--ink); }
.members-intro p { font-size: 16px; color: var(--fg-2); margin: 0; line-height: var(--lh-body); }
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.member-card {
  border: 1px solid var(--border-soft); background: var(--white);
  box-shadow: var(--shadow-1); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.member-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.member-card img { display: block; width: 100%; aspect-ratio: 1280 / 670; object-fit: cover; }
.member-body { padding: 24px 26px 26px; display: flex; flex-direction: column; }
.member-role { font-size: 16px; font-weight: var(--w-bold); letter-spacing: .04em; color: var(--exa-blue); margin-bottom: 10px; }
.member-name { font-size: 18px; font-weight: var(--w-bold); color: var(--ink); margin: 0 0 12px; }
.member-name .en { font-family: var(--font-sans-en); font-size: 16px; color: var(--fg-3); font-weight: var(--w-medium); margin-left: 8px; }
.member-quote { font-size: 16px; line-height: 1.7; color: var(--ink); font-weight: var(--w-bold); margin: 0 0 18px; }
.member-people { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.member-org { font-size: 14px; color: var(--exa-blue); }
.member-person { font-size: 16px; font-weight: var(--w-bold); color: var(--ink); }
.member-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: var(--w-bold); color: var(--exa-blue); }
.member-link svg { width: 14px; height: 14px; }

.recruit-band {
  margin-top: 72px;
  background: var(--exa-blue); color: var(--white);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 56px 56px; flex-wrap: wrap;
}
.recruit-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('../images/top/bg-network-blue.webp') center/cover; opacity: .42;
}
.recruit-band .rb-text { position: relative; z-index: 1; }
.rb-eyebrow {
  display: inline-block; font-family: var(--font-sans-en); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px;
  color: var(--white); margin-bottom: 14px;
}
.rb-eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px;
  background: var(--white); vertical-align: middle; margin-right: 12px; transform: translateY(-3px);
}
.recruit-band .rb-text h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: var(--w-bold); margin: 0 0 12px; color: var(--white); line-height: 1.5; }
.recruit-band .rb-text p { font-size: 16px; color: rgba(255,255,255,.86); margin: 0; line-height: 1.7; }
.rb-btn { position: relative; z-index: 1; flex-shrink: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {}
/* .site-footer { background: var(--exa-blue); color: var(--white); position: relative; }
.site-footer { background: var(--white); color: var(--fg-1); } */
.fwrap { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 48px; }

/* nav row */
.footer-nav-row { border-bottom: 1px solid var(--border-soft); }
.footer-nav-inner { display: flex; align-items: center; gap: 40px; min-height: 108px; padding-top: 24px; padding-bottom: 24px; }
.footer-nav-inner .brand { flex-shrink: 0; }
.footer-nav { display: flex; align-items: center; gap: 30px; flex: 1; flex-wrap: wrap; }
.footer-nav a {
  font-size: 16px; font-weight: var(--w-bold); color: var(--ink);
  font-family: var(--font-sans-en); letter-spacing: .02em; white-space: nowrap;
  transition: color .18s;
}
.footer-nav a:hover { color: var(--exa-blue); }
.to-top {
  width: 52px; height: 52px; border-radius: var(--radius-pill); flex-shrink: 0;
  border: 1.5px solid var(--border); color: var(--exa-blue);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s, border-color .18s;
}
.to-top svg { width: 22px; height: 22px; stroke-width: 2; }
.to-top:hover { background: var(--exa-blue); color: var(--white); border-color: var(--exa-blue); }

/* legal row */
.footer-legal { background: var(--white); color: var(--fg-2); }
.legal-inner {
  max-width: 1640px; margin: 0 auto; padding: 48px 48px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.legal-left { display: flex; flex-direction: column; gap: 14px; }
.cert-badges { display: flex; gap: 10px; }
.cert {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 112px; height: 56px; border: 1px solid var(--border); color: var(--fg-2);
  font-family: var(--font-sans-en); font-weight: var(--w-bold); font-size: 16px; gap: 2px; white-space: nowrap;
}
.cert small { font-size: 16px; font-weight: var(--w-regular); color: var(--fg-3); white-space: nowrap; }
.legal-links { display: flex; gap: 28px; flex-wrap: wrap; }
.legal-links a { font-size: 16px; color: var(--fg-1); transition: color .18s; }
.legal-links a:hover { color: var(--exa-blue); }
.cert-note { font-size: 16px; color: var(--fg-3); margin: 0; }
.legal-logo { height: 80px; width: auto; display: block; margin: 24px auto 16px; }
.footer-copy { text-align: center; font-size: 16px; color: var(--fg-2); padding: 0 0 28px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1240px) {
  :root { --sec-pad: 80px; }
  .hwrap { padding: 0 24px; }
  .nav { display: none; }
  .head-right { margin-left: auto; }
  .head-right .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-cta { margin-top: 20px; text-align: center; justify-content: center; }
  .mobile-cta:hover { color: var(--white); }
  .mobile-nav {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--border-soft);
    background: var(--white);
    padding: 8px 24px 20px;
  }
  .mobile-nav[hidden] { display: none !important; }
  .mobile-nav a {
    font-size: 16px; font-weight: var(--w-bold); color: var(--ink);
    padding: 16px 4px; border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-sans-en); letter-spacing: .02em;
  }
  .mobile-nav a:last-child { border-bottom: none; }
  .mobile-nav a:hover { color: var(--exa-blue); }
  .head-right .lang { display: none; }
  .footer-nav-inner { flex-wrap: wrap; row-gap: 24px; column-gap: 24px; min-height: 0; align-items: center; }
  .footer-nav-inner .brand { order: 1; }
  .footer-nav-inner .to-top { order: 2; margin-left: auto; }
  .footer-nav { order: 3; flex: 1 0 100%; width: 100%; gap: 16px 28px; margin-bottom: 40px; }
  .fwrap { padding: 0 24px; }
  .legal-inner { padding: 32px 24px 20px; }
  .hero { min-height: 520px; }
  .hero-inner { padding-top: 72px; padding-bottom: 72px; }
  .trends-grid { grid-template-columns: 1fr; }
  .sol-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-solutions { grid-template-columns: 1fr; }
  .case-grid, .case-grid--2 { grid-template-columns: 1fr; }
  .str-grid { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --lp-pad: 16px; }
  .hero-actions .btn { min-width: 0; width: 100%; }
  .mobile-nav a.mobile-cta { border-bottom: none; padding: 15px 28px; color: #FFFFFF; }
  .cert-badges { flex-wrap: wrap; }
  .news-item { grid-template-columns: 1fr auto; row-gap: 8px; }
  .news-cat { grid-row: 1; }
  .news-date { grid-row: 1; }
  .news-title { grid-column: 1 / -1; }
  .sol-grid { grid-template-columns: repeat(2, 1fr); }
  .str-card { padding-left: 22px; padding-right: 22px; }
  .str-metric .v { font-size: 32px; }
  .str-metrics { gap: 28px; }
  .recruit-band { flex-direction: column; align-items: flex-start; }
  .legal-inner { flex-direction: column; align-items: flex-start; }
}

/* reduce-motion safety handled by static design */