:root {
  --bg: #FBF9F7;
  --bg-raised: #FFFFFF;
  --ink: #2C2621;
  --ink-soft: #5B5349;
  --line: #E3DDCF;
  --navy: #1E2A38;
  --navy-tint: #E7EBEF;
  --rose: #C1766B;
  --rose-tint: #FBE7EF;
  --amber: #A88E4C;
  --amber-tint: #F1EBDA;
  --sky-tint: #DCEAF5;
  --sky-gradient: linear-gradient(165deg, #DCEAF5 0%, #EAF3FA 55%, #F4F9FC 100%);
  --cta-orange: #E67E22;
  --cta-orange-hover: #CF6D16;
  --card-shadow: 0 4px 16px rgba(44,38,33,0.09);
  --focus: #A88E4C;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --footer-bg: #141C26;
}
/* Brand colors are intentionally fixed regardless of the visitor's OS/
   browser dark-mode setting — a corporate site reads as off-brand if its
   navy/amber palette flips per device, so this theme does not implement a
   @media (prefers-color-scheme: dark) variant. If dark mode support is
   wanted later, reintroduce it deliberately with its own designed palette
   rather than just inverting these tokens. */

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Stops Mobile Safari/Chrome from silently inflating font sizes of their
     own accord on some text blocks (their built-in "make small text
     readable" heuristic) — a separate mechanism from, and does not affect,
     a visitor's own browser/OS zoom or default-font-size setting, so real
     accessibility text scaling still works normally. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* UX fix (reverted 2026-09-16): the 17px bump below scaled every rem-based
   size in this stylesheet UP by ~6% on phones — the opposite of what
   mobile needed. Combined with each component's own already-tuned mobile
   clamp()/font-size overrides, everything compounded to feel oversized
   site-wide (buttons, nav, body copy, cards, all at once, since they all
   share this one root value). Phones now use the same 16px root as
   desktop; per-component mobile sizes are tuned individually where they
   need to differ, not via a blanket root-level nudge. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Plain paragraph copy (no component class) inherits this computed size,
   not the root rem — so unlike the reverted html-font-size bump above, this
   only shrinks unstyled body text on phones and leaves every rem-sized
   component (buttons, nav, cards, headings) untouched. */
@media (max-width: 700px) {
  body { font-size: 15px; }
}
.mincho {
  font-family: "Zen Maru Gothic", "Yu Gothic Medium", "YuGothic", sans-serif;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6,
.eyebrow,
.lead-quote-plain,
.page-loader-tagline {
  font-family: "Zen Maru Gothic", "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--navy);
}
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
@media (max-width: 700px) { h2 { font-size: clamp(1.3rem, 8vw, 1.6rem); } }
.eyebrow {
  font-weight: 700;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--amber-tint);
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
}
.ingredient-tag {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--rose);
  background: var(--rose-tint);
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 4px;
}
a { color: var(--ink); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
img { max-width: 100%; display: block; }
.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ---------- Header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(20px, 4vw, 40px);
}
.brandmark {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  text-decoration: none;
}
.brandmark .brand-logo {
  display: block;
  height: 34px;
  width: auto;
  aspect-ratio: 279 / 60;
  flex-shrink: 0;
}
nav.primary {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  /* Bug fix: as a flex item with flex-basis:auto (the default), nav's own
     shrink-to-fit width calculation for a wrapping flex container is
     unreliable — it settled a few px short of its own children's combined
     width even with hundreds of spare px in the header row, wrapping the
     last item ("公式オンラインショップ") onto its own second line at every
     desktop width tested, including 2400px. Growing to fill the row's
     actual remaining space (flex:1) makes the fit deterministic instead. */
  flex: 1 1 auto;
  min-width: 0;
}
/* :not(.header-cta) — otherwise this plain-link reset (transparent
   background, 3px radius, muted text color) outranks .header-cta's own
   pill styling by specificity and flattens the "資料ダウンロード"/
   "お問い合わせ" buttons nested in .nav-mobile-ctas back into plain text
   links, out of step with the same buttons' pill look in .header-actions. */
nav.primary a:not(.header-cta) {
  font: inherit;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}
nav.primary a:not(.header-cta):hover { color: var(--navy); }
/* 公式オンラインショップだけ他のナビ項目より目立たせる（href指定なのでメニュー内の並び順が変わっても追従する） */
nav.primary a[href*="kireidelab.com"] { color: var(--amber); font-weight: 700; }
nav.primary a[href*="kireidelab.com"]:hover { color: var(--navy); }
nav.primary a[aria-current="page"] { color: var(--navy); font-weight: 700; }
nav.primary a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 3px;
  background: var(--amber);
  border-radius: 999px;
}
.header-actions { display: flex; align-items: center; gap: 10px; }

/* Social icons (header) */
.social-links { display: flex; align-items: center; gap: 6px; margin-right: 6px; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color .2s ease, background .2s ease;
}
.social-link:hover { color: var(--navy); background: var(--amber-tint); }
/* height only (width:auto) — the four brand marks each ship in their own
   native viewBox (Instagram/TikTok/X are roughly square, YouTube's is a
   wide 254.6x178.3 rounded rect). Forcing both width AND height to the same
   px value squashes every icon into an equal square box, so the wide
   YouTube mark shrinks to fit and reads visibly smaller than the rest.
   Matching on height instead keeps every mark at the same true size and
   lets its own aspect ratio set the width, same as a real brand-asset row. */
.social-link svg { height: 16px; width: auto; }
/* UX fix: this used to read "hide <=1180px" while a later rule said "show
   <=1280px" — since both are true on any phone, the later one always won
   and silently re-added the social icons at every mobile width, which
   overflowed the header row off-screen (it pushed the contact CTA and the
   hamburger button past the right edge, out of reach — confirmed live in a
   375px viewport check). Icons now hide only on true phone widths, where
   the header no longer has room for them next to the CTA + hamburger. */
@media (max-width: 780px) { .social-links { display: none; } }
/* Bug fix: once nav.primary shows inline it competes with the logo + social
   icons + both header CTAs for the same row, and that combined content
   doesn't actually fit one line until roughly 1900px wide — below that the
   last nav item wrapped onto its own second line, which read as a broken
   header (confirmed at 1440px, 1600px and even 1850px; the nav's own
   hamburger breakpoint below was raised to 1550px for the same reason, so
   this range picks up right where that leaves off). Reclaiming the social
   icons' width here (they're duplicated, larger, in the footer's own SNS
   row) gives the nav enough room to stay on one line. */
@media (min-width: 1551px) and (max-width: 1980px) { .social-links { display: none; } }

/* Larger contained-logo variant for the CSR page's activity cards (vs. the
   small inline icon in .sponsor-card above) — object-fit:contain so a
   logo's own aspect ratio is never cropped like a photo would be. */
.sponsor-thumb {
  height: 110px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.sponsor-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Header CTA pills (resource download + contact) — white buttons with leading icons */
.header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; white-space: nowrap; text-decoration: none;
  background: var(--bg-raised);
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.header-cta:hover { transform: translateY(-1px); }
.header-cta-svg { flex-shrink: 0; stroke: currentColor; }
.header-cta-doc {
  background: #E8630E;
  border-color: #E8630E;
  color: #fff;
  font-size: 0.86rem;
  box-shadow: 0 4px 0 #B94D08;
}
.header-cta-doc:hover {
  background: #F07A2C;
  border-color: #F07A2C;
  color: #fff;
  transform: translateY(1px);
  box-shadow: 0 3px 0 #B94D08;
}
.header-cta-arrow { font-weight: 900; }
.header-cta-contact {
  background: #2FA34E;
  border-color: #2FA34E;
  color: #fff;
  font-size: 0.84rem;
  box-shadow: 0 4px 0 #1F7A38;
}
.header-cta-contact:hover {
  background: #3CB65C;
  border-color: #3CB65C;
  color: #fff;
  transform: translateY(1px);
  box-shadow: 0 3px 0 #1F7A38;
}
/* UX fix: the secondary "資料ダウンロード" CTA is dropped early to declutter medium
   widths, but the primary "お問い合わせ" CTA must never fully disappear without a
   replacement — previously it was hidden for every width <=1280px (a dead zone
   with no visible CTA at all on tablet/mobile). It now stays visible down to
   620px; below that, the header row has room for only one, so it's swapped for
   the lighter-weight Instagram/X icons instead (.header-mobile-social) — the
   same "お問い合わせ" action is still one tap away in the hamburger menu's
   .nav-mobile-ctas. */
/* Scoped to .header-actions only — .nav-mobile-ctas reuses this same
   header-cta-doc class/markup inside the hamburger panel, and that copy
   must stay visible there (unscoped, this rule was also hiding the
   hamburger panel's own "資料ダウンロード" button). */
@media (max-width: 1180px) { .header-actions .header-cta-doc { display: none; } }
/* Same nav-vs-header-actions space crunch as .social-links above — dropped
   in this same range so the inline nav has room to stay on one line. */
@media (min-width: 1551px) and (max-width: 1980px) { .header-actions .header-cta-doc { display: none; } }
.header-mobile-social { display: none; align-items: center; gap: 6px; }
@media (max-width: 620px) {
  /* Scoped to .header-actions only — .nav-mobile-ctas reuses this same
     header-cta-contact class/markup inside the hamburger panel (so its
     styling matches the desktop CTA), and that copy must stay visible;
     it's the only remaining way to reach contact once phones swap this
     header-row one for the Instagram/X icons below. */
  .header-actions .header-cta-contact { display: none; }
  .header-mobile-social { display: flex; }
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  width: 34px; height: 34px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle:hover { color: var(--navy); border-color: var(--navy); }
.nav-toggle-icon rect { transition: transform .2s ease, opacity .2s ease; }
/* Bug fix: the full inline nav + logo + header-actions genuinely doesn't
   fit one line below ~1500px even with .social-links/.header-cta-doc
   dropped (see those rules above) — confirmed wrapping at 1440px, a very
   common laptop width. Raised from 1280px so the hamburger takes over
   before that wrap can happen, with a small safety margin. */
@media (max-width: 1550px) {
  nav.primary { display: none; }
  nav.primary.open {
    display: flex;
    flex-direction: column;
    /* Bug fix: nav.primary's base (desktop) rule sets flex-wrap:wrap for its
       horizontal layout. Left in place here, a column-direction flex
       container with a max-height treats "wrap" as "start a new column"
       once content exceeds that height — so the menu split into a second,
       partially off-screen column with its own horizontal scrollbar instead
       of just scrolling vertically. nowrap forces the single stacked list
       overflow-y above is actually meant to scroll. */
    flex-wrap: nowrap;
    gap: 0;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line);
    /* UX fix: a plain 1px border and no shadow read as barely-there against
       whatever page content sits directly beneath it, and nothing capped its
       height — on a short phone (iPhone SE etc.) the full list of top-level
       items plus an expanded dropdown's children could run taller than the
       viewport with no way to scroll to the bottom items, since this panel
       is pinned to the sticky header rather than the scrolling page. It now
       reads as a clearly elevated sheet and scrolls internally instead. */
    box-shadow: 0 20px 40px rgba(20,16,10,0.16);
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px clamp(20px,4vw,40px) 12px;
  }
  /* UX fix: top-level rows and dropdown-toggle labels get their sub-items
     with 4px padding, hair-thin spacing between them and no divider — the
     open menu read as one dense, undifferentiated block of text. Top-level
     rows now get a bigger tap area, a bolder label, and a hairline divider
     so each item reads as its own row; dropdown children are visually
     demoted (smaller, muted, indented with a rule) so the hierarchy between
     "事業一覧" and its six children is obvious at a glance. */
  /* :not(.header-cta) here isn't about header-cta at all — it matches the
     base desktop reset's own specificity (nav.primary a:not(.header-cta),
     which uses `font: inherit` to zero out font-weight) so this mobile bold
     styling actually wins the cascade instead of losing on class-count and
     silently falling back to that rule's inherited (non-bold) weight. */
  nav.primary > a:not(.header-cta),
  nav.primary > .nav-item-dropdown > .dropdown-toggle {
    display: block;
    text-align: left;
    padding: 15px 2px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
  }
  nav.primary > a[aria-current="page"]::after,
  nav.primary > .nav-item-dropdown > .dropdown-toggle[aria-current="page"]::after {
    left: 2px; right: auto; bottom: 6px; width: 22px;
  }
  /* Divider sits after each top-level row — for a dropdown, that means
     after the whole group (toggle + its children), not between the parent
     label and its own children. */
  nav.primary > a,
  nav.primary > .nav-item-dropdown {
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle { display: flex; }
}
/* UX fix: hamburger + social icons sat a little under the ~44px recommended touch
   target on touch-sized viewports; bump them up without changing desktop sizing. */
@media (max-width: 780px) {
  .nav-toggle { width: 44px; height: 44px; }
  .header-actions .social-link { width: 40px; height: 40px; }
  .header-actions .social-link svg { height: 18px; width: auto; }
}

/* Dropdown: 事業一覧 */
.nav-item-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-item-dropdown .dropdown-toggle { display: inline-flex; align-items: center; }
.nav-item-dropdown .dropdown-toggle::after { content: "▾"; margin-left: 4px; font-size: 0.7em; opacity: 0.7; }
/* Bug fix: .dropdown-expand (the mobile-only accordion button rendered by
   nav-walker.php) had no rule outside its own mobile media query, so it fell
   back to the browser's default <button> chrome — a small bordered grey box
   with its own dropdown arrow — sitting right next to "会社概要"/"事業一覧"
   in the desktop nav bar. Hidden by default; the mobile media query below
   switches it back on. */
.dropdown-expand { display: none; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 240px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.14);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 50;
}
.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
nav.primary .dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.86rem;
  white-space: nowrap;
}
nav.primary .dropdown-menu a:hover { background: var(--amber-tint); color: var(--ink); }
@media (max-width: 1550px) {
  /* Bug fix: this container's base rule sets align-items:center for the
     desktop hover-dropdown layout. Reused as-is here with flex-direction
     switched to column, that centered the "事業一覧" label and its child
     list while every plain sibling link stayed left-aligned (they stretch
     full-width via nav.primary's own default align-items) — the one item
     with children visibly drifted to the middle of the menu on its own. */
  .nav-item-dropdown { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-item-dropdown > .dropdown-toggle { flex: 1 1 auto; }
  /* The decorative ▾ on the label itself is redundant with .dropdown-expand
     below, which is the actual open/close control on mobile. */
  .nav-item-dropdown > .dropdown-toggle::after { display: none; }
  .dropdown-expand {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
    color: var(--ink);
  }
  .dropdown-expand .chev { display: inline-block; font-size: 0.85rem; transition: transform .2s ease; }
  .nav-item-dropdown.is-open .dropdown-expand .chev { transform: rotate(180deg); }
  /* Closed by default — .is-open (toggled by .dropdown-expand's click
     handler in main.js) is what actually reveals the child list. */
  .dropdown-menu {
    flex-basis: 100%;
    display: none;
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0;
    background: transparent;
    /* Left rule ties the children visually to their parent's row above,
       reinforcing the indent as "belongs to 事業一覧" rather than a second,
       unrelated list of top-level links. */
    border-left: 2px solid var(--line);
    margin-left: 4px;
  }
  .nav-item-dropdown.is-open .dropdown-menu {
    display: block;
    padding: 2px 0 10px;
  }
  /* UX fix: children shared the parent's own font-size/weight/color, so a
     6-item dropdown looked like 6 more top-level nav entries stacked under
     an unrelated one, not a group. Smaller, muted, and no longer forced to
     one line — a longer label now wraps instead of risking overflow.
     :not([aria-current]) keeps this from out-cascading the site-wide
     current-page rule above (same specificity, but this block comes later
     in the file, which would otherwise mute the active child too). */
  nav.primary .dropdown-menu a {
    padding: 9px 4px 9px 16px;
    white-space: normal;
  }
  nav.primary .dropdown-menu a:not([aria-current="page"]) {
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--ink-soft);
  }
}

/* お問い合わせ／資料ダウンロード inside the mobile hamburger panel — on
   desktop these same actions already live in .header-actions, so this stays
   hidden there and only appears once the nav collapses into the hamburger. */
.nav-mobile-ctas { display: none; }
@media (max-width: 1550px) {
  .nav-mobile-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .nav-mobile-ctas .header-cta { width: 100%; }
}

/* ---------- Sections ---------- */
/* UX fix: most page templates set their own inline clamp(64px,9vw,120px) on
   every plain content section (about/business/company/message/page/single —
   15+ instances), but a section left WITHOUT that inline override silently
   fell back to a different, smaller scale here (52-96 vs. 64-120). On the
   homepage that meant the OEM, raw-materials and news sections had visibly
   tighter top/bottom breathing room than every other page's sections for no
   intentional reason. This default now matches the de facto site standard. */
section { padding: clamp(64px, 9vw, 120px) 0; }
section.tight { padding: clamp(36px,5vw,56px) 0; }
.section-head { margin-bottom: 40px; }
.section-head h2 { margin: 10px 0 0; text-wrap: balance; }
.section-head p { color: var(--ink-soft); margin-top: 12px; }
hr.rule { border: none; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Cards / grid ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* Bug fix ("grid blowout"): a 1fr track defaults to minmax(auto,1fr), and
   "auto" for a grid item falls back to its content's min-content size. A
   fixed-height <img> (the --th custom property used all over this theme)
   combined with a wide source photo can have a min-content width far past
   what 1fr would otherwise give it — e.g. page-message.php's 600x400
   photos at height:380px want ~570px, blowing the single mobile column
   (and the whole page) out past the viewport even though the image itself
   renders at width:100%. min-width:0 on every grid item removes that
   implicit floor so 1fr can actually shrink the item down to the track's
   real size, on every breakpoint this class collapses to. */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
/* Bug fix ("unify point-style heading sizes"): this shared text/photo zigzag
   pattern (small .meta label, then a heading, then body copy) repeats as
   .message-point on page-about.php (2x) and page-message.php (4x), and as
   .business-point on page-business.php (6x) — but each page had hand-typed
   its own inline clamp() for that heading, drifting to three different
   sizes/weights (about: clamp(1.4rem,2.4vw,1.9rem) bold; message: smaller
   clamp(1.2rem,2.1vw,1.6rem) bold; business: about's size but font-weight
   400 via its "mincho" class). Standardized on the smaller of the two sizes
   (not the larger) so unifying doesn't make anything read bigger than it
   already did, and made bold explicit so it wins over .business-point h2's
   "mincho" class regardless of markup order (0,1,1 specificity beats
   .mincho's 0,1,0). Templates now rely on this instead of an inline
   font-size on every one of the 12 headings. */
.message-point h2, .business-point h2 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-weight: 700; }
/* .message-point (page-message.php's 4 "Point 0X" sections, plus the two
   text/photo grid-2 sections on page-about.php) alternates text/photo order
   on desktop for a zigzag layout, but that leaves the stacked mobile order
   inconsistent from section to section. Force text first, photo second on
   mobile regardless of DOM order. */
@media (max-width: 620px) {
  .message-point > img { order: 2; height: auto; }
  .message-point > div { order: 1; }
}
/* Product listings (homepage showcase + /products/ category grids, both
   grid-N.showcase-grid): stay 2 columns on phones instead of collapsing to
   1 — a tall, scannable 2-up grid reads better for a product catalog than
   a single long vertical stack. */
@media (max-width: 620px) {
  .grid-3.showcase-grid, .grid-4.showcase-grid { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
}
@media (max-width: 360px) {
  .grid-4.showcase-grid .showcase-caption { font-size: 0.82rem; }
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
/* Image-main cards: the visual leads, bled to the card's edges */
/* aspect-ratio (not a fixed px height) so the box's own proportions stay
   photo-like at every width — a fixed height paired with object-fit:contain
   let a tall/portrait photo (e.g. a certificate) shrink down to a sliver
   with big empty bars either side; a 4:3 box keeps most photos close to a
   full-bleed fit while still never cropping the content. */
.card > .thumb-warm:first-child,
.note-card > .thumb-warm:first-child {
  aspect-ratio: 4 / 3;
  height: auto;
  margin: -26px -26px 20px -26px;
  border-radius: 0;
  box-shadow: none;
}
.note-card > .thumb-warm:first-child { aspect-ratio: 4 / 3; margin: -22px -22px 18px -22px; }
/* Bug fix: a plain gradient <div> naturally stretches to fill this bled
   area (block-level "auto" width expands to absorb negative margins), but
   a real <img> does not — width:100% only covers the card's un-bled
   content box, so every real photo dropped into this slot rendered ~52px
   (44px in a .note-card) short on the right edge, leaving a gap of card
   background showing (confirmed by measuring the rendered boxes: image
   right edge landed 52px inside the card's own right edge on all three
   affected cards, not just the one where it was visually obvious). */
.card > img.thumb-warm:first-child { width: calc(100% + 52px); max-width: calc(100% + 52px); }
.note-card > img.thumb-warm:first-child { width: calc(100% + 44px); max-width: calc(100% + 44px); }
.card:hover {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  box-shadow: 0 10px 24px rgba(84,71,38,0.12);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }
.card h3, .card h4 { margin-top: 0; }
/* .product-name — product card titles (page-products.php's catalogue grid).
   h4 otherwise inherits the site-wide heading rule's Zen Maru Gothic (the
   rounded, headline-style face used for section titles) at the browser's
   default h4 size (~1em/16px, same as body copy) — too heavy/large for a
   dense grid of catalogue titles read at a glance. Switched to the same
   Gothic (Noto Sans JP) stack as plain body copy and sized down a step. */
.product-name {
  font-family: "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
}
/* Bug fix ("meta label reads as full-size body text"): this rule used to be
   scoped .card .meta, but page-about/business/csr/message/single.php also use
   class="meta" for the same small eyebrow-style label (Point 01, Business 01 —
   Commerce, MISSION/VISION/VALUE, article dates) OUTSIDE any .card — those
   instances had no font-size rule at all and silently rendered at full body
   size (16px) instead of the intended small label size. Unscoped so every
   .meta reads the same size everywhere regardless of its container. */
.meta { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.03em; }

.showcase-grid { margin: 0; }
.showcase-card { display: block; text-decoration: none; color: inherit; }
.showcase-thumb {
  height: 150px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  margin-bottom: 10px;
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.showcase-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.showcase-card:hover .showcase-thumb { box-shadow: 0 10px 22px rgba(30,42,56,0.12); transform: translateY(-2px); }
.showcase-caption { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.7; }
.showcase-caption b { color: var(--navy); }

/* ---------- Buttons ----------
   button003 pattern: flat grey pill, chevron drawn via ::after (not typed
   into the label — labels no longer carry a manual "→"), hover inverts to
   a solid dark fill. .btn.ghost (secondary, jump-nav / filter chips) uses
   the pattern as-is; .btn.teal (primary conversion actions) keeps the
   site's amber identity but as a pale tint rather than a solid fill — the
   old solid-amber-on-dark-text combination read as too heavy/loud next to
   plain grey buttons and its dark-ink-on-amber text had weaker contrast
   than the tint version. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  border: none;
  background: var(--line);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 999px;
  transition: background .3s ease, color .3s ease, transform .15s ease;
}
.btn:hover { background: var(--ink); color: var(--bg-raised); transform: translateY(-1px); }
/* UX fix: on top of the root rem bump above, CTA buttons get an extra step
   up on mobile — a tap target you're about to press benefits from being
   easy to read at a glance more than most other UI text does. */
@media (max-width: 700px) { .btn { font-size: 0.98rem; padding: 14px 26px; } }
.btn::after {
  content: '';
  width: 6px; height: 6px;
  flex-shrink: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg) translateY(-1px);
  transition: border-color .3s ease;
}

/* .btn.ghost — SECONDARY: quiet, for jump-nav / filter chips and grouped
   options where several sit side by side and none should shout. Same
   button003 grey as the base .btn, kept as its own class so markup stays
   explicit about intent. */
.btn.ghost { background: var(--line); color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg-raised); }

/* .jump-nav — a row of pill jump-links to in-page anchors (page-business.php's
   6-button category nav, page-products.php's 3-button category nav). Was
   named .business-jump-nav and only ever used on page-business.php, so
   page-products.php's identical component (same markup, same .btn.ghost
   pills, same job) had no class at all and quietly missed this mobile
   treatment — on phones, flex-wrap just lets each button wrap wherever it
   naturally fits, so a real 3-per-row grid guarantees the layout instead of
   hoping for it, with smaller text/padding than the site's default .btn so
   the row reads as a compact nav rather than a stack of full-size buttons.
   Renamed to a shared, page-agnostic class so any such jump-nav gets the
   same sizing without re-deriving it per page. */
@media (max-width: 700px) {
  .jump-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px !important;
  }
  /* Bug fix ("横ブレ" on /products/): nowrap here was fine for
     page-business.php's short labels (4-6 chars), but page-products.php's
     "スキンケア・ヘアケア" (10 chars) doesn't fit a 1/3 column at this
     font-size — nowrap then forced that column (and the whole grid, and the
     page) wider than the viewport instead of letting it wrap. min-width:0
     is the same grid-blowout guard used elsewhere in this file; Japanese
     text wraps between characters by default (no explicit word-break needed)
     once nowrap stops preventing it. */
  .jump-nav .btn {
    padding: 10px 8px;
    font-size: 0.78rem;
    white-space: normal;
    min-width: 0;
    text-align: center;
  }
  .jump-nav .btn::after { width: 5px; height: 5px; }
}

/* .btn-download — swaps the default chevron for a download icon (svg passed
   in the markup, placed before the label). */
.btn-download::after { content: none; }
.btn-download svg { width: 16px; height: 16px; flex-shrink: 0; }

/* .btn.teal — PRIMARY: the site's actual conversion actions (相談する /
   お問い合わせ / フォーム送信). White fill with a navy outline at rest for
   strong contrast against the grey secondary buttons, inverting to a
   solid navy fill on hover. */
.btn.teal {
  background: var(--bg-raised);
  color: var(--navy);
  padding: 11px 24px;
  border: 2px solid var(--navy);
}
.btn.teal:hover {
  background: var(--navy);
  color: var(--bg-raised);
  transform: translateY(-1px);
}

/* .btn.cta — the small set of CTAs important enough to earn a solid, vivid
   fill instead of .btn.teal's pale tint (e.g. the products page's official
   shop link). White text on saturated orange, plus a soft drop shadow so
   it reads as the one "press this" moment on the page. No left-hand icon —
   the shared ::after chevron is enough. */
.btn.cta {
  background: var(--cta-orange);
  color: #fff;
  box-shadow: 0 6px 16px rgba(198,90,20,0.3);
}
.btn.cta:hover {
  background: var(--cta-orange-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(198,90,20,0.36);
}

/* .floating-shop-cta — page-scoped floating CTA (opted into per-page, see
   page-products.php). Bottom-left so it never collides with the site-wide
   note badge, which is anchored bottom-right. */
.floating-shop-cta {
  position: fixed;
  left: clamp(14px, 4vw, 28px);
  bottom: clamp(14px, 4vw, 28px);
  z-index: 30;
}
/* Bug fix: at phone widths this button's full label ("公式オンラインショップ
   で見る", 14 characters) rendered wide enough on one line to reach into
   .note-float-badge's own space on the right — the two "never collide by
   being on opposite sides" only held at desktop widths, not on a narrow
   phone. max-width forces it to wrap onto two shorter lines at a smaller
   size instead of growing wide (a hard px/vw cap, not just a smaller
   font-size, so it can't grow back into the badge's space no matter how
   long a future label gets); the note badge itself is untouched. */
@media (max-width: 620px) {
  .floating-shop-cta {
    max-width: 42vw;
    padding: 10px 16px;
    font-size: 0.76rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn.teal:hover, .btn.cta:hover { transform: none; } }

/* ---------- Warm placeholders (stand-in for photography) ---------- */
.thumb-warm {
  height: var(--th, 88px);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--t1), var(--t2));
  box-shadow: inset 0 -10px 18px rgba(60,30,20,0.12);
  margin-bottom: 4px;
}
img.thumb-warm { width: 100%; display: block; background: none; object-fit: cover; }
.section-photo {
  height: auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 600 / 445;
}
.section-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bug fix ("horizontal shift" on phones, e.g. /business/): page-business.php
   used to set a fixed height:340px inline on 6 of these, overriding the
   class's aspect-ratio-driven auto height with a fixed one. With width
   left auto and height pinned, the browser solves the *width* from
   height × aspect-ratio instead — 340px × (600/445) ≈ 458px — ignoring the
   mobile grid's actual (much narrower) column width entirely and forcing
   the whole page wider than the viewport. Moved into this class so the
   fixed height only applies once the layout has room for it. */
.section-photo-tall { height: 340px; border-radius: var(--radius-lg); }
@media (max-width: 620px) { .section-photo-tall { height: auto; } }

/* ---------- Carousel (実績一覧 etc.) ---------- */
.oem-subtitle { font-size: 1.1rem; margin: 48px 0 18px; }
.carousel { position: relative; }
.achievement-scroll {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
  scrollbar-width: none;
}
.achievement-scroll::-webkit-scrollbar { display: none; }
.achievement-card { flex: 1 1 0; min-width: 260px; scroll-snap-align: start; }
.achievement-card .thumb-warm { margin-bottom: 10px; }
.achievement-photo {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
}
.achievement-name { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.6; }
.achievement-desc { margin: 2px 0 0; font-size: 0.86rem; color: var(--ink-soft); text-align: center; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--navy);
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: background .2s ease, color .2s ease;
}
.carousel-btn:hover { background: var(--navy); color: var(--amber); }
.carousel-btn.prev { left: -16px; }
.carousel-btn.next { right: -16px; }
@media (max-width: 640px) {
  .carousel-btn { display: none; }
}
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.carousel-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.carousel-dot.active { background: var(--amber); transform: scale(1.3); }

/* ---------- Column (コラム) carousel ---------- */
/* .text-link — a plain-text "read more" link (誕生秘話とは？/代表メッセージ全文を読む
   など). No manual arrow character in the label — a straight underline
   (::before) runs the full text width and feeds into a small chevron tip
   (::after) at the end. The chevron reuses .btn::after's rotated-corner
   technique (not skewed) so its point stays crisp — skewing a two-border box
   distorts the corner join into a blunt blob instead of a sharp tip. */
.text-link {
  position: relative;
  display: inline-block;
  padding-right: 16px;
  padding-bottom: 10px;
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: color .3s ease;
}
.text-link::before {
  content: '';
  position: absolute;
  left: 0; right: 13px; bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: border-color .3s ease;
}
.text-link::after {
  content: '';
  position: absolute;
  right: 0; bottom: 1px;
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  transition: border-color .3s ease;
}
.text-link:hover { color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .text-link, .text-link::before, .text-link::after { transition: none; } }
/* ---------- Media cards ---------- */
.note-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.note-card:hover {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  box-shadow: 0 10px 24px rgba(84,71,38,0.12);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .note-card { transition: none; } .note-card:hover { transform: none; } }
.note-card .cat { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--rose); }
.note-card h4 { margin: 0; font-size: 0.8rem; line-height: 1rem; font-weight: normal; }
.note-card p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

.journal-thumb { position: relative; }
.source-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--navy);
}
.source-badge.source-yuragi { background: var(--rose); }

/* ---------- Forms ---------- */
.wpcf7-form p { margin: 0 0 18px; }

/* Bug fix: the CF7 templates for this page lay fields out with hand-written
   .field-row/.field wrapper divs (no <p> tags), but nothing styled those
   wrappers or the CF7-generated <input>/<select>/<textarea> themselves —
   every field rendered as a bare, unstyled native control. */
.field-row { display: flex; gap: 20px; margin-bottom: 18px; }
.field-row .field { margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 8px; flex: 1; margin-bottom: 18px; }
.field label { font-weight: 700; font-size: 0.88rem; color: var(--navy); }
.field .wpcf7-form-control-wrap { display: block; }
/* Scoped to .field (not the bare .wpcf7-form-control class) — the submit
   button carries that same class too, and this must not touch it. */
.field .wpcf7-form-control {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent);
}
.field textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
.field select.wpcf7-form-control {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5349' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.field ::placeholder { color: var(--ink-soft); opacity: .7; }
@media (max-width: 620px) { .field-row { flex-direction: column; gap: 18px; } }
.wpcf7-not-valid-tip { color: var(--rose); font-size: 0.8rem; margin-top: 4px; }
.wpcf7-response-output { border-radius: var(--radius-sm); margin: 18px 0 0 !important; padding: 12px 16px !important; font-size: 0.86rem; }
form.sent .wpcf7-response-output { border-color: #2FA34E !important; color: #1F7A38; }
form.failed .wpcf7-response-output,
form.aborted .wpcf7-response-output { border-color: var(--rose) !important; color: var(--rose); }

/* ---------- Footer ---------- */
footer.site {
  position: relative;
  padding: 56px 0 32px;
  background: var(--footer-bg);
  color: #F5F0E6;
}
footer.site a { color: #F5F0E6; opacity: 0.85; text-decoration: none; }
footer.site a:hover { opacity: 1; color: var(--amber); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
footer.site h6 { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--amber); opacity: 0.9; margin: 0 0 14px; font-weight: 700; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.88rem; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(245,240,230,0.16);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.76rem; opacity: 0.7;
}

/* ---------- Page-to-page flow ---------- */
.page-next { border-top: 1px solid var(--line); padding: 30px 0 60px; }
.page-next .flow-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
.page-next .label { font-size: 0.76rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.page-next .links { display: flex; gap: 12px; flex-wrap: wrap; }
.next-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.next-link:hover { border-color: var(--amber); background: var(--amber-tint); color: var(--ink); }
.next-link .arrow { color: var(--amber); font-family: inherit; font-weight: 700; }
@media (max-width: 700px) { .next-link { font-size: 0.98rem; } }

/* ---------- Official mascot (yuranya) — restrained, brand-secondary use ---------- */

/* Site-wide floating badge (note promo), fixed, fades in with scroll.
   UX fix: on mobile this used to jump to `top:78px` (right under the sticky
   header) which could sit on top of in-page headings/CTAs while scrolling.
   It now stays anchored bottom-right at every width, and gets a small
   dismiss control so it never traps attention indefinitely. */
.note-float-badge {
  position: fixed;
  right: clamp(10px, 4vw, 32px);
  bottom: clamp(20px, 6vw, 48px);
  width: clamp(110px, 10vw, 160px);
  display: block;
  z-index: 35;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.note-float-badge.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.note-float-badge img {
  width: 100%;
  display: block;
  animation: noteFloatBob 3.6s ease-in-out infinite;
}
.note-float-badge .badge-dismiss {
  position: absolute; top: -8px; right: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-raised); border: 1px solid var(--line);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; cursor: pointer;
  box-shadow: var(--card-shadow);
}
.note-float-badge .badge-dismiss:hover { color: var(--navy); }
@keyframes noteFloatBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (max-width: 620px) {
  .note-float-badge { width: clamp(90px, 22vw, 120px); }
}
@media (prefers-reduced-motion: reduce) {
  .note-float-badge { animation: none; transition: opacity .2s linear; }
}

/* ---------- Intro loader: brand mark reveals in sequence (once per browser session) ---------- */
.page-loader { display: none; }
html.wl-intro body { overflow: hidden; }
html.wl-intro .page-loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .6s ease;
  cursor: pointer;
}
.page-loader.is-leaving { opacity: 0; }
.page-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-loader-tagline,
.page-loader-smile,
.page-loader-mark {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
}
.page-loader-tagline {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--amber);
  font-weight: 700;
}
.page-loader-smile path { stroke: var(--amber); }
.page-loader-mark {
  display: flex;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 10vw, 88px);
  line-height: 1;
}
.page-loader-mark .w { color: var(--navy); }
.page-loader-mark .l { color: var(--amber); }
.page-loader.tagline-in .page-loader-tagline,
.page-loader.smile-in .page-loader-smile,
.page-loader.mark-in .page-loader-mark { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .page-loader,
  .page-loader-tagline, .page-loader-smile, .page-loader-mark { transition: opacity .2s linear; transform: none; }
}

/* ---------- OEM page: highlight trio ---------- */
.highlight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; }
@media (max-width: 820px) { .highlight-grid { grid-template-columns: 1fr; gap: 28px; } }
.highlight-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--amber-tint);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.highlight-icon svg { width: 22px; height: 22px; }
.highlight-icon.highlight-photo {
  width: 72px; height: 72px;
  background: none;
  overflow: hidden;
}
.highlight-icon.highlight-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.highlight-item h4 { margin: 0 0 6px; font-size: 1.02rem; }
.highlight-item p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.8; }
/* Card variant: photo bleeds to the card's top edge instead of sitting as a small circular icon */
.card.highlight-item { display: block; }
.card > .highlight-icon.highlight-photo:first-child {
  width: auto; height: 200px;
  margin: -26px -26px 20px -26px;
  border-radius: 0;
}

/* ---------- OEM page: FAQ accordion ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; scroll-margin-top: 90px; }
.faq-item summary {
  cursor: pointer; font-weight: 700; list-style: none;
  position: relative; padding-right: 32px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: -2px;
  font-size: 1.3rem; color: var(--amber); font-weight: 700;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 14px 0 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.85; }

/* ---------- Page header banner: full-bleed FV with overlaid title ----------
   Backed by either a gradient <div> (no featured image set) or a real
   <img> (editor set a featured image) — object-fit keeps a photo covering
   the band the same way the gradient always did. */
.message-fv { position: relative; height: clamp(200px, 22vw, 340px); overflow: hidden; }
.message-fv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.message-fv::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,16,0.2); }
.message-fv-overlay {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}
.message-fv-overlay h1 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; color: #fff; margin: 0; letter-spacing: 0.02em; }
.message-fv-overlay p { margin: 12px 0 0; font-size: 0.95rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.9); }

/* .page-lead-title — OEM/Materials show their page title inline beside a
   photo instead of the shared full-bleed banner every other page uses
   (wellnesslab_page_hero(), .message-fv-overlay h1 above). With no size
   override that h2 fell through to the generic large section-heading
   default (h2 { clamp(2rem,4.2vw,3rem) }, the site's biggest heading scale),
   making these two pages' titles visibly larger than every other page's.
   Matched to the shared page-title scale so it reads the same everywhere. */
.page-lead-title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }

/* ---------- Scroll reveal: each page section settles in once as you scroll to
   it. One quiet fade+rise per section (not per element) so it reads as calm
   rather than busy; page-hero banners (.message-fv, .no-inview) are excluded
   since they're already on-screen at load. Hidden state only applies once
   .wl-inview lands on <html> (see header.php inline script), so content never
   flashes hidden for no-JS visitors. ---------- */
.wl-inview main > section:not(.message-fv):not(.no-inview):not(.is-inview) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.wl-inview main > section.is-inview {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .wl-inview main > section:not(.message-fv):not(.no-inview):not(.is-inview) { opacity: 1; transform: none; transition: none; }
}

/* ---------- Typography line reveal: wrap text in <span class="reveal-line">
   inside a .reveal-lines parent to have it cascade in line by line. Piggybacks
   on the section-level .is-inview above (no extra observer) so it fires the
   moment the enclosing section reveals itself. ---------- */
.wl-inview .reveal-lines .reveal-line {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.wl-inview main > section.is-inview .reveal-lines .reveal-line {
  opacity: 1;
  transform: translateY(0);
}
.reveal-lines .reveal-line:nth-child(2) { transition-delay: .35s; }
.reveal-lines .reveal-line:nth-child(3) { transition-delay: .7s; }
.reveal-lines .reveal-line:nth-child(4) { transition-delay: 1.05s; }
.reveal-lines .reveal-line:nth-child(5) { transition-delay: 1.4s; }
.reveal-lines .reveal-line:nth-child(6) { transition-delay: 1.75s; }
@media (prefers-reduced-motion: reduce) {
  .wl-inview .reveal-lines .reveal-line { opacity: 1; transform: none; transition: none; }
}