/* =========================================================================
   GREENTOPIA FOREST — style.css
   Plain CSS (no framework/build step). Component-scoped class names
   (BEM-ish) instead of atomic utilities, to keep the HTML readable and
   semantic. Custom properties hold every design token in one place.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  --color-primary: #274b37;
  --color-primary-dark: #16281f;
  --color-primary-light: #2f4f3a;
  --color-secondary: #8c6a47;
  --color-accent: #a8c49b;
  --color-accent-muted: #b9c4a7;
  --color-warm: #f7f5f1;
  --color-surface: #ffffff;
  --color-surface-accent: #d9cbb2;
  --color-surface-accent-light: #e6dccb;
  --color-text-primary: #3a3936;
  --color-text-secondary: #6e6b62;
  --color-divider: #e2ded4;
  --color-border: #8b8881;
  --color-error: #a8493b;

  /* Height of the sticky mobile/tablet header (`.site-header`), used so
     pinned horizontal-scroll sections (see `.hscroll-pin`) don't tuck
     underneath it. Desktop uses the fixed side nav instead, not a sticky
     top bar, so no offset is needed there. */
  --header-height: 64px;

  --font-display: "Zen Old Mincho", serif; /* 見出し・キャッチコピー・セクションタイトル */
  --font-sans: "Zen Kaku Gothic New", sans-serif; /* 本文・ナビゲーション・補足・英字 */

  --content-max: 1120px;
  --sidebar-width: 260px;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--color-warm);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Balanced line-wrapping everywhere (headings + body text) so paragraphs
     don't end in an orphaned character/short last line. Elements that
     explicitly opt out (nowrap) are unaffected. */
  text-wrap: pretty;
}

img,
video {
  max-width: 100%;
  display: block;
}

/* ---------- Loading screen ----------
   The overlay itself lifts away like a curtain rather than simply fading,
   with a firm hold and a swift, slightly-delayed slide off the top of the
   screen (transform, not opacity, is what's animated on exit). */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--color-primary);
  transform: translateY(0);
  transition: transform 500ms cubic-bezier(0.83, 0, 0.17, 1) 175ms;
}

.loading-screen.is-hiding {
  transform: translateY(-100%);
  pointer-events: none;
}

.loading-screen[hidden] {
  display: none !important;
}

.loading-screen__logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  animation:
    loading-logo-in 450ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both,
    loading-pulse 1.6s ease-in-out infinite 550ms;
}

.loading-screen__track {
  height: 1px;
  width: 40px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}

.loading-screen__bar {
  display: block;
  height: 100%;
  width: 33%;
  background: #fff;
  animation: loading-bar 1.2s ease-in-out infinite alternate;
}

/* Graceful entrance for the mark: fades and scales up into place rather
   than appearing instantly. */
@keyframes loading-logo-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Quiet breathing pulse on the mark, and an indeterminate sweep on the thin
   line beneath it — matches the site's restrained, thin-rule visual
   language rather than a generic spinner. */
@keyframes loading-pulse {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

@keyframes loading-bar {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* Photo finishing pass: brings photographic imagery in line with the site's
   warm, muted forest palette instead of looking digitally saturated —
   slightly desaturated, slightly flatter contrast, a touch warmer. Applied
   to real photos only, never to illustrations/logos/icons. */
.photo-tone {
  filter: saturate(0.9) contrast(0.96) brightness(1.01) sepia(0.05);
}

/* Soft "resting on paper" shadow for photos — warm-tinted and diffuse
   rather than a hard card-UI shadow. */
.photo-frame {
  box-shadow: 0 6px 24px rgba(40, 34, 22, 0.1);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
dl,
dd,
figure {
  margin: 0;
}

/* Visually-hidden but accessible (skip link target text, etc.) */
.visually-hidden {
  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: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- Layout shell ---------- */
.page-content {
  width: 100%;
}

@media (min-width: 1024px) {
  .page-content {
    padding-left: var(--sidebar-width);
  }
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 80px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 48px;
  }
}

.section {
  width: 100%;
}

.section > .container {
  padding-block: 48px;
}

@media (min-width: 768px) {
  .section > .container {
    padding-block: 96px;
  }
}

.section--tight > .container {
  padding-block: 40px;
}

@media (min-width: 768px) {
  .section--tight > .container {
    padding-block: 64px;
  }
}

.section--bg-primary {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
}

.section--bg-primary .cert-deco {
  pointer-events: none;
  position: absolute;
  right: -12px;
  top: -12px;
  width: 110px;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .section--bg-primary .cert-deco {
    width: 160px;
  }
}

@media (min-width: 1024px) {
  .section--bg-primary .cert-deco {
    width: 190px;
  }
}

.section--bg-primary-dark {
  background: var(--color-primary-dark);
}

.section--bg-white {
  background: var(--color-surface);
}

.section--bg-warm {
  background: var(--color-warm);
}

.brand-cta-section {
  position: relative;
  overflow: hidden;
}

.brand-cta-section__deco {
  pointer-events: none;
  position: absolute;
  bottom: 24px;
  right: 320px;
  display: none;
  width: 420px;
  opacity: 0.9;
}

@media (min-width: 1024px) {
  .brand-cta-section__deco {
    display: block;
  }
}

@media (min-width: 1280px) {
  .brand-cta-section__deco {
    width: 500px;
  }
}

.section--bg-accent {
  background: var(--color-surface-accent);
}

.section--center {
  text-align: center;
}

.contact-cta-section {
  overflow: hidden;
}

.contact-cta-section__deco {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  display: none;
  width: 195px;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .contact-cta-section__deco {
    display: block;
  }
}

@media (min-width: 1024px) {
  .contact-cta-section__deco {
    width: 245px;
  }
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-secondary);
  margin: 0;
}

@media (min-width: 768px) {
  .eyebrow {
    font-size: 14px;
  }
}

.eyebrow--dark {
  color: var(--color-accent);
}

.eyebrow--on-accent {
  color: var(--color-primary);
}

.eyebrow--on-photo {
  color: #fff;
}

/* Avoid orphan characters stranded alone on the last line of a heading
   (e.g. "る。" left dangling by itself). Falls back silently to normal
   wrapping in browsers that don't support `pretty` yet. */
.heading-lg,
.heading-xl,
.split-panels__heading,
.promo-band__heading,
.cta-row__heading,
.chapter__title,
.contact-form-section__heading {
  text-wrap: pretty;
}

.heading-lg {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .heading-lg {
    font-size: 34px;
    line-height: 1.55;
  }
}

.heading-lg--dark {
  color: #fff;
}

.heading-lg--flush {
  margin-top: 0;
}

.heading-xl {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-primary-dark);
}

@media (min-width: 768px) {
  .heading-xl {
    font-size: 46px;
    line-height: 1.4;
  }
}

.heading-xl--dark {
  color: #fff;
}

.lede-text {
  margin-top: 16px;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}

.lede-text--dark {
  color: rgba(255, 255, 255, 0.85);
}

.body-text {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .body-text {
    font-size: 16px;
  }
}

.body-text--on-accent {
  color: var(--color-text-primary);
}

.body-text p {
  margin: 0 0 16px;
}

.body-text p:last-child {
  margin-bottom: 0;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Buttons & links ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding-inline: 32px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button--small {
  height: 44px;
}

.button--full {
  width: 100%;
}

.button--primary {
  background: var(--color-primary);
  color: #fff;
}

.button--primary:hover {
  background: var(--color-primary-light);
}

.button--secondary {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.button--secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

.button--white {
  background: #fff;
  color: var(--color-primary);
}

.button--white:hover {
  background: var(--color-warm);
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.more-link::after {
  content: "";
  display: block;
  height: 1px;
  width: 40px;
  background: currentColor;
  opacity: 0.7;
}

.more-link--dark {
  color: #fff;
}

.more-link--pill {
  background: #fff;
  padding: 14px 24px;
}

/* ---------- Site navigation (single fixed left sidebar) ---------- */
.site-nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 50;
    flex-direction: column;
    width: var(--sidebar-width);
    padding: 40px 32px;
    background: var(--color-surface);
    overflow-y: auto;
  }
}

.site-nav__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-bottom: 40px;
  text-align: center;
}

.site-nav__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-nav__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

.site-nav__brand-name {
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.site-nav__org-name {
  margin: 2px 0 0;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
}

.nav-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
}

.nav-list__link {
  position: relative;
  display: flex;
  width: calc(100% + 64px);
  margin-inline: -32px;
  flex-direction: column;
  gap: 12px;
  padding: 4px 32px;
  transition: color 0.2s ease;
}

/* Current-page indicator: a short, delicate left rule, kept clear of the
   label with a deliberate gap so it reads as a marker beside the text,
   not a mark touching it. */
.nav-list__link::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  height: 20px;
  width: 1px;
  transform: translateY(-50%);
  background: transparent;
  transition: background-color 0.2s ease;
}

.nav-list__link:hover::before {
  background: var(--color-divider);
}

.nav-list__link[aria-current="page"]::before {
  background: var(--color-primary);
}

.nav-list__label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.nav-list__link:hover .nav-list__label {
  color: var(--color-primary);
}

.nav-list__link[aria-current="page"] .nav-list__label {
  color: var(--color-primary);
}

.nav-list__sub {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  opacity: 0.8;
  transition: color 0.2s ease;
}

.nav-list__link:hover .nav-list__sub {
  color: var(--color-secondary);
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-links__link {
  display: flex;
  height: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--color-primary);
  background: transparent;
}

.social-links__link img {
  width: 15px;
  height: 15px;
}

/* SNS + CTA, pinned to the bottom of the sidebar. */
/* Nav + SNS/CTA travel together as one centered group in the space below
   the brand block, so the gap splits evenly above and below instead of
   collecting into one large gap before the CTA. */
.site-nav__group {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 80px;
}

.site-nav__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-nav__cta {
  display: inline-flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  padding-inline: 20px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease;
}

.site-nav__cta:hover {
  background: var(--color-primary-light);
}

.site-nav__cta-arrow {
  transition: transform 0.2s ease;
}

.site-nav__cta:hover .site-nav__cta-arrow {
  transform: translateX(2px);
}

/* ---------- Mobile / tablet header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
}

@media (min-width: 1024px) {
  .site-header {
    display: none;
  }

  :root {
    --header-height: 0px;
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header__logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

.site-header__names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.site-header__brand-name {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

.site-header__org-name {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.hamburger {
  position: relative;
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.hamburger__bar {
  position: absolute;
  height: 2px;
  width: 22px;
  background: var(--color-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger__bar:nth-child(1) {
  transform: translateY(-7px);
}

.hamburger__bar:nth-child(3) {
  transform: translateY(7px);
}

.hamburger.is-open .hamburger__bar:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.hamburger.is-open .hamburger__bar:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger__bar:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

.mobile-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  flex-direction: column;
  border-top: 1px solid var(--color-divider);
  background: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav__link {
  border-bottom: 1px solid var(--color-divider);
  padding: 16px 24px;
  font-size: 16px;
  color: var(--color-text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-nav__link:last-of-type {
  border-bottom: 0;
}

.mobile-nav__link:hover {
  background: var(--color-warm);
  color: var(--color-primary);
}

.mobile-nav__link:active {
  background: var(--color-surface-accent-light);
}

.mobile-nav__cta {
  margin: 16px 16px 0;
  display: inline-flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  padding-inline: 32px;
  font-size: 16px;
  font-weight: 500;
}

.mobile-nav__secondary {
  margin: 12px 16px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}

/* ---------- Site footer ---------- */
.site-footer {
  width: 100%;
  background: var(--color-primary);
  padding-top: 56px;
  color: #fff;
}

@media (min-width: 768px) {
  .site-footer {
    padding-top: 64px;
  }
}

.site-footer__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 768px) {
  .site-footer__inner {
    padding-inline: 80px;
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    padding-inline: 48px;
  }
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 32px;
}

@media (min-width: 768px) {
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-footer__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.site-footer__brand-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
}

.site-footer__address {
  font-size: 14px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

@media (min-width: 768px) {
  .site-footer__address {
    font-size: 16px;
  }
}

.site-footer__social-link {
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid #fff;
}

.site-footer__social-link img {
  width: 16px;
  height: 16px;
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-menu__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
}

.footer-menu__link {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.footer-menu__link:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-block: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
  }
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  gap: 20px;
}

.site-footer__legal a:hover {
  color: #fff;
}

/* ---------- Scroll reveal (JS toggles .is-visible) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--rise-sm {
  transform: translateY(12px);
}

.reveal--rise-sm.is-visible {
  transform: translateY(0);
}

/* Per-character reveal: JS wraps each character in a span */
.char-reveal__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.char-reveal__char.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero ---------- */
.hero-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .hero-desktop {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
  }
}

.hero-desktop__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: brightness(0.9) contrast(1.02);
}

.hero-desktop__frame {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Very faint film-grain texture, so the photo's low-resolution softness
   reads as an intentional analog quality rather than digital roughness.
   Kept far too subtle to register as a "pattern" — just a slight tactile
   finish. */
.hero-desktop__grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbikiLz48L3N2Zz4=");
  background-size: 220px 220px;
}

/* Scrim, widened to cover the full copy group (supporting line through
   catchphrase) evenly, so the text stays legible without flattening the
   photo elsewhere. */
.hero-desktop__scrim {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 20, 13, 0.2) 0%, transparent 24%),
    radial-gradient(ellipse 640px 78% at 60% 48%, rgba(15, 20, 13, 0.36) 0%, transparent 75%);
}

/* Fine dot-halftone filter over the whole photo — softens busy detail
   behind the white text a little further without flattening the photo
   into a solid overlay. */
.hero-desktop__dots-filter {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(8, 14, 9, 0.9) 0.5px, transparent 0.9px);
  background-size: 3px 3px;
}

.hero-desktop__copy-group {
  position: absolute;
  inset-inline: 0;
  top: 0;
  bottom: 112px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mission block's top aligns with the catchphrase's top (not the outer
   group's own center), so the rule sits right where "森" begins instead
   of floating mid-height. */
.hero-desktop__copy-inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
}

@media (min-width: 1280px) {
  .hero-desktop__copy-inner {
    gap: 20px;
  }
}

/* Thin vertical rule beside the supporting line, stretched to match its
   height. */
.hero-desktop__mission {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.hero-desktop__rule {
  width: 1px;
  background: rgba(255, 255, 255, 0.4);
}

/* Small supporting line — legible but deliberately quieter than the
   catchphrase beside it. */
.hero-desktop__mission-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  writing-mode: vertical-rl;
}

.hero-desktop__copy-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-desktop__copy {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media (min-width: 1280px) {
  .hero-desktop__copy {
    gap: 20px;
  }
}

.hero-desktop__line {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  writing-mode: vertical-rl;
}

.hero-desktop__line--second {
  margin-top: 148px;
}

/* Certification / award strip — a quiet credibility signal. Inset as a
   compact floating card (not a full-bleed footer band) so it stays a
   supporting detail rather than the first view's main act. */
.hero-desktop__certs {
  position: absolute;
  inset-inline: 32px;
  bottom: 32px;
  z-index: 10;
  display: none;
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero-desktop__certs {
    display: flex;
  }
}

@media (min-width: 1280px) {
  .hero-desktop__certs {
    inset-inline: 40px;
    bottom: 40px;
  }
}

.hero-desktop__certs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 820px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  background: rgba(22, 40, 31, 0.3);
  backdrop-filter: blur(6px);
}

/* Divider inset top/bottom, so it reads as a quiet separator rather than
   a full-height rule. */
.hero-desktop__cert:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
}

@media (min-width: 1280px) {
  .hero-desktop__certs-row {
    max-width: 900px;
  }
}

.hero-desktop__cert {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: left;
}

@media (min-width: 1280px) {
  .hero-desktop__cert {
    padding-inline: 24px;
  }
}

.hero-desktop__cert img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.hero-desktop__cert-text {
  min-width: 0;
}

.hero-desktop__cert-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.hero-desktop__cert-meta {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
}

.hero-mobile {
  display: block;
}

@media (min-width: 1024px) {
  .hero-mobile {
    display: none;
  }
}

.hero-mobile__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hero-mobile__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 24px 40px;
  text-align: center;
}

.hero-mobile__text {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  margin: 0;
}

.hero-mobile__cta-group {
  display: flex;
  width: 100%;
  max-width: 24rem;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-mobile__secondary {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}

/* Slideshow (shared by desktop & mobile frames) */
.hero-slideshow {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  filter: saturate(0.9) contrast(0.96) brightness(1.01) sepia(0.05);
}

.hero-slide.is-active img {
  animation: heroZoomOut 6000ms ease-out forwards;
}

@keyframes heroZoomOut {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}


.hero-dots {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

@media (min-width: 768px) {
  .hero-dots {
    bottom: 24px;
    left: 24px;
  }
}

.hero-dots__dot {
  height: 10px;
  width: 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color 0.3s ease;
}

.hero-dots__dot.is-active {
  background: #fff;
}

/* Desktop hero: dots sit above the certification card, clear of both the
   right edge and the bottom credibility strip. */
@media (min-width: 1024px) {
  .hero-dots--desktop {
    bottom: 128px;
    left: auto;
    right: 40px;
    flex-direction: column;
  }
}

@media (min-width: 1280px) {
  .hero-dots--desktop {
    bottom: 144px;
    right: 48px;
  }
}

/* ---------- Horizontal-scroll-driven-by-vertical-scroll ----------
   Progressive enhancement added by js/main.js's initHScrollPin(): it
   wraps an already-horizontally-scrollable element (anything with
   overflow-x, e.g. `.badge-list`) in these two wrappers so that
   scrolling the page down slides the wrapped content across first,
   then releases back to normal page scroll once fully seen. Without
   JS, or on viewports where there's nothing to scroll, `.hscroll-pin`
   never gets a height and this is a no-op — the wrapped element keeps
   working exactly as before (native horizontal swipe/scroll). */
.hscroll-pin {
  position: relative;
}

.hscroll-pin__sticky {
  position: sticky;
  top: var(--header-height, 0px);
}

/* ---------- Certification badges (horizontal scroll on mobile) ---------- */
.badge-list {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}

@media (min-width: 768px) {
  .badge-list {
    padding-bottom: 0;
    overflow-x: visible;
  }
}

.badge-list__item {
  flex-shrink: 0;
  width: 82vw;
  max-width: 320px;
  scroll-snap-align: start;
}

.badge-list__item:first-child {
  margin-left: 24px;
}

.badge-list__item:last-child {
  margin-right: 24px;
}

@media (min-width: 768px) {
  .badge-list__item:first-child,
  .badge-list__item:last-child {
    margin-inline: 0;
  }
}

@media (min-width: 768px) {
  .badge-list__item {
    width: auto;
    max-width: none;
    flex: 1;
  }
}

.badge-list--on-photo {
  background: #fff;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
  .badge-list--on-photo {
    padding: 32px;
  }
}

.badge-list--on-photo .badge-list__item {
  width: 78vw;
  max-width: 300px;
}

/* Stay in horizontal-scroll mode through tablet widths — three cards
   forced into a row at 768px leaves each description column too narrow
   (~120px), producing awkward multi-line text wraps. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .badge-list--on-photo {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .badge-list--on-photo .badge-list__item {
    flex: none;
  }

  /* Trailing padding on a scroll container isn't rendered as scrollable
     space in most browsers once scrolled to the end, so the last card's
     margin has to carry the visual gap instead of relying on the
     container's own padding-right. */
  .badge-list--on-photo .badge-list__item:last-child {
    margin-right: 32px;
  }
}

@media (min-width: 1280px) {
  .badge-list--on-photo .badge-list__item {
    width: auto;
    max-width: none;
  }
}

.badge-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 20px;
}

.badge-card__num-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-card__num {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-primary);
}

.badge-card--dark .badge-card__num {
  color: var(--color-primary-light);
}

.badge-card__rule {
  height: 1px;
  width: 28px;
  background: var(--color-secondary);
}

.badge-card--dark .badge-card__rule {
  background: var(--color-primary-light);
}

/* Fixed-size, centered frame so all three logos share the same visual
   footprint regardless of their own image proportions. */
.badge-card__img {
  height: 96px;
  width: 96px;
  object-fit: cover;
}

.badge-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-primary);
  text-wrap: balance;
}

.badge-card__meta,
.badge-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-wrap: balance;
}

/* ---------- Promo band (camp CTA) ---------- */
.promo-band {
  position: relative;
  display: flex;
  min-height: 380px;
  width: 100%;
  align-items: center;
  overflow: hidden;
  background: var(--color-primary-dark);
}

@media (min-width: 768px) {
  .promo-band {
    min-height: 480px;
  }
}

.promo-band__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: saturate(0.9) contrast(0.96) brightness(1.01) sepia(0.05);
}

/* Bottom-weighted tint for text legibility, instead of darkening the whole
   photo evenly. */
.promo-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22, 30, 19, 0.1),
    rgba(22, 30, 19, 0.3) 55%,
    rgba(22, 30, 19, 0.62)
  );
}

/* Fine dot-halftone filter, matching the TOP hero — softens busy photo
   detail behind the white text without flattening the photo into a solid
   overlay. */
.promo-band__dots-filter {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(8, 14, 9, 0.9) 0.5px, transparent 0.9px);
  background-size: 3px 3px;
}

.promo-band__content {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 760px;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 48px 24px;
  text-align: center;
}

@media (min-width: 768px) {
  .promo-band__content {
    padding-inline: 80px;
  }
}

@media (min-width: 1024px) {
  .promo-band__content {
    padding-inline: 48px;
  }
}

.promo-band__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.promo-band__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fff;
}

@media (min-width: 768px) {
  .promo-band__heading {
    font-size: 34px;
  }
}

.promo-band__heading-break {
  display: inline;
}

@media (min-width: 768px) {
  .promo-band__heading-break {
    display: none;
  }
}

.promo-band__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
  .promo-band__text {
    font-size: 16px;
  }
}

/* ---------- Page lede (inner-page hero banner) ---------- */
.page-lede {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 48px 24px;
  background: var(--color-surface-accent);
}

@media (min-width: 768px) {
  .page-lede {
    padding: 64px 80px;
  }
}

@media (min-width: 1024px) {
  .page-lede {
    padding-inline: 48px;
  }
}

.page-lede__inner {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  width: 100%;
  max-width: var(--content-max);
}

.page-lede__texture {
  pointer-events: none;
  position: absolute;
  left: -6%;
  top: 50%;
  display: block;
  width: 36%;
  aspect-ratio: 1024 / 683;
  background-image: url("../../images/gf/sanbusugi-texture.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: translateY(-50%) rotate(-10deg);
  opacity: 0.08;
}

.page-lede--dark {
  background: var(--color-primary-dark);
}

.page-lede--dark .page-lede__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: saturate(0.9) contrast(0.96) brightness(1.01) sepia(0.05);
}

.page-lede--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
}

.page-lede__intro {
  margin-top: 16px;
  font-size: 16px;
  color: var(--color-text-primary);
}

/* ---------- Mission / Vision split (About) ---------- */
.split-panels {
  display: flex;
  width: 100%;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .split-panels {
    flex-direction: row;
  }
}

.split-panels__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 24px;
}

@media (min-width: 768px) {
  .split-panels__panel {
    padding: 64px 80px;
  }
}

@media (min-width: 1024px) {
  .split-panels__panel {
    flex: 1;
    padding: 96px 64px;
  }
}

.split-panels__panel--primary {
  background: var(--color-primary);
  color: #fff;
}

.split-panels__panel--white {
  position: relative;
  overflow-x: hidden;
  background: #fff;
}

.split-panels__heading-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .split-panels__heading-wrap {
    width: fit-content;
  }
}

.split-panels__deco {
  pointer-events: none;
  position: absolute;
  top: 100%;
  right: 8px;
  margin-top: 16px;
  width: 195px;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .split-panels__deco {
    width: 255px;
  }
}

.split-panels__heading {
  margin-top: 4px;
  max-width: 640px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .split-panels__heading {
    font-size: 34px;
    line-height: 1.55;
  }
}

.split-panels__panel--primary .split-panels__heading {
  color: #fff;
}

.split-panels__panel--white .split-panels__heading {
  color: var(--color-primary);
}

.split-panels__text {
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

@media (min-width: 768px) {
  .split-panels__text {
    font-size: 16px;
  }
}

/* ---------- GREENTOPIA FOREST WAY list ---------- */
.way-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}

.way-list__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--color-divider);
  padding-block: 20px;
}

@media (min-width: 768px) {
  .way-list__row {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

.way-list__num {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-secondary);
  margin: 0;
}

@media (min-width: 768px) {
  .way-list__num {
    width: 72px;
  }
}

.way-list__title {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .way-list__title {
    width: 200px;
  }
}

.way-list__desc {
  flex: 1;
  font-size: 15px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Profile definition list (About) ---------- */
.profile-list {
  margin-top: 32px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.profile-list__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  font-size: 15px;
  border-bottom: 1px solid var(--color-divider);
}

.profile-list__row:last-child {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .profile-list__row {
    flex-direction: row;
    gap: 32px;
    padding: 20px 32px;
    font-size: 16px;
  }
}

.profile-list__row dt {
  flex-shrink: 0;
  font-weight: 500;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .profile-list__row dt {
    width: 160px;
  }
}

.profile-list__row dd {
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Interview (About) ---------- */
.interview-quote {
  margin: 24px 0 0;
  border-left: 2px solid var(--color-accent);
  padding-left: 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.interview-video {
  margin-top: 24px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #252f21;
  object-fit: cover;
}

/* ---------- Brand story CTA (About) ---------- */
.cta-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .cta-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cta-row__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .cta-row__copy {
    max-width: 640px;
  }
}

.cta-row__heading {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.cta-row__heading-break {
  display: inline;
}

@media (min-width: 768px) {
  .cta-row__heading-break {
    display: none;
  }
}

@media (min-width: 768px) {
  .cta-row__heading {
    font-size: 34px;
  }
}

@media (min-width: 1280px) {
  .cta-row__heading {
    white-space: nowrap;
  }
}

.cta-row__text {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (min-width: 768px) {
  .cta-row__text {
    font-size: 16px;
  }
}

/* ---------- TOP page: ABOUT (natural / warm background) ---------- */
.about-section {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  overflow: hidden;
  background: var(--color-surface-accent);
}

.about-section__content {
  position: relative;
  z-index: 2;
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 1120px;
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 24px;
}

@media (min-width: 768px) {
  .about-section__content {
    padding: 64px 80px;
  }
}

@media (min-width: 1280px) {
  .about-section__content {
    padding-block: 96px;
  }
}

.about-section__copy {
  display: flex;
  width: 100%;
  max-width: 560px;
  flex-direction: column;
  gap: 24px;
}

.about-section__text {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .about-section__text {
    font-size: 16px;
  }
}

.about-section__map-bg {
  pointer-events: none;
  position: absolute;
  right: -10%;
  top: 50%;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: url("../../images/gf/chiba-map.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: translateY(-50%);
  opacity: 0.5;
}

@media (min-width: 768px) {
  .about-section__map-bg {
    width: 65%;
  }
}

@media (min-width: 1280px) {
  .about-section__map-bg {
    width: 60%;
  }
}

/* ---------- TOP page: Brand story teaser (image collage) ---------- */
.story-teaser {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-warm);
}

.story-teaser__texture {
  pointer-events: none;
  position: absolute;
  left: -6%;
  top: 110px;
  display: block;
  width: 75%;
  aspect-ratio: 1024 / 683;
  background-image: url("../../images/gf/sanbusugi-texture.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: translateY(-50%) rotate(-10deg);
  opacity: 0.15;
}

@media (min-width: 768px) {
  .story-teaser__texture {
    top: 50%;
    width: 46%;
  }
}

.story-teaser__inner {
  position: relative;
  z-index: 1;
  padding-block: 48px;
  padding-inline: 24px;
}

@media (min-width: 768px) {
  .story-teaser__inner {
    padding-block: 96px;
    padding-inline: 80px;
  }
}

@media (min-width: 1024px) {
  .story-teaser__inner {
    padding-inline: 48px;
  }
}

.story-teaser__row {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 1024px) {
  .story-teaser__row {
    flex-direction: row;
    gap: 64px;
  }
}

.story-teaser__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.story-teaser__copy .heading-lg {
  margin-top: 4px;
}

.story-teaser__copy .body-text {
  margin-top: 4px;
}

@media (min-width: 1024px) {
  .story-teaser__copy {
    width: 460px;
    flex-shrink: 0;
  }
}

.story-teaser__figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  box-shadow: 0 6px 24px rgba(40, 34, 22, 0.1);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .story-teaser__figure {
    width: auto;
    aspect-ratio: 4 / 5;
    flex: 1;
    max-width: 440px;
  }
}

.story-teaser__figure img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.story-teaser__row--secondary {
  display: none;
  margin-top: 40px;
  align-items: stretch;
}

@media (min-width: 768px) {
  .story-teaser__row--secondary {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .story-teaser__row--secondary {
    align-items: flex-start;
  }
}

.story-teaser__figure--wide {
  aspect-ratio: 3 / 2;
}

@media (min-width: 1024px) {
  .story-teaser__figure--wide {
    width: 420px;
    flex: none;
    max-width: none;
  }
}

.story-teaser__figure--tall {
  aspect-ratio: 4 / 5;
}

@media (min-width: 1024px) {
  .story-teaser__figure--tall {
    width: 300px;
    flex: none;
    max-width: none;
    margin-top: 64px;
  }
}

/* ---------- TOP page: News preview grid ---------- */
.news-preview-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 768px) {
  .news-preview-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.news-preview-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .news-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-preview-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news-preview-card__thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background: var(--color-accent-muted);
}

.news-preview-card__date {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.news-preview-card__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

/* ---------- News page: article list + sidebar ---------- */
.news-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

@media (min-width: 1024px) {
  .news-layout {
    flex-direction: row;
    gap: 48px;
  }
}

.news-article-list {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 24px;
}

.news-article {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
  .news-article {
    padding: 24px;
  }
}

.news-article__thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--color-accent-muted);
}

.news-article__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .news-article__title {
    font-size: 24px;
  }
}

.news-article__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-article__date {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.news-article__tag {
  display: inline-flex;
  background: var(--color-accent);
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

.news-article__lead {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.news-article__body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.news-article__caption {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.news-article-divider {
  margin-top: 24px;
  height: 1px;
  width: 100%;
  background: #e5e1d8;
}

.news-sidebar {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .news-sidebar {
    width: 320px;
    flex-shrink: 0;
  }
}

.news-sidebar__box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.news-sidebar__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.news-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-sidebar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}

.news-sidebar__row a {
  font-weight: 500;
  color: var(--color-text-primary);
}

.news-sidebar__count {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ---------- Thoughts page: TOC + chapters ---------- */
.thoughts-toc__deco {
  pointer-events: none;
  position: absolute;
  left: -360px;
  top: -40px;
  display: none;
  width: 550px;
  max-width: none;
  opacity: 0.3;
}

@media (min-width: 1280px) {
  .thoughts-toc__deco {
    display: block;
  }
}

.thoughts-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

@media (min-width: 1280px) {
  .thoughts-layout {
    flex-direction: row;
    gap: 64px;
  }
}

.thoughts-toc-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 1280px) {
  .thoughts-toc-wrap {
    position: sticky;
    top: 100px;
    width: 240px;
  }
}

.thoughts-toc {
  position: relative;
  background: #fff;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.thoughts-toc__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
}

.thoughts-toc__row {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--color-divider);
  padding-block: 10px;
  font-size: 15px;
}

.thoughts-toc__row:last-child {
  border-bottom: 0;
}

.thoughts-toc__num {
  width: 20px;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-secondary);
}

.thoughts-toc__row a {
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.thoughts-toc__row a:hover {
  color: var(--color-primary);
}

.thoughts-chapters {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 56px;
  background: #fff;
  padding: 20px;
}

@media (min-width: 768px) {
  .thoughts-chapters {
    gap: 96px;
    padding: 48px;
  }
}

.chapter {
  display: flex;
  scroll-margin-top: 100px;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .chapter {
    flex-direction: row;
    gap: 32px;
  }
}

.chapter__num {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-secondary);
  margin: 0;
}

@media (min-width: 768px) {
  .chapter__num {
    width: 100px;
    font-size: 28px;
  }
}

.chapter__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 16px;
}

.chapter__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .chapter__title {
    font-size: 28px;
  }
}

.chapter__lead {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-secondary);
  text-wrap: balance;
}

/* Generic utility: keep an inline phrase (e.g. a quoted clause) from being
   split awkwardly mid-word when a balanced/rebalanced line wraps. */
.nowrap {
  white-space: nowrap;
}

.chapter__image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.chapter__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chapter__text {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .chapter__text {
    font-size: 16px;
  }
}

.chapter__text p {
  margin: 0 0 16px;
}

.chapter__text p:last-child {
  margin-bottom: 0;
}

/* ---------- Contact page ---------- */
.contact-form-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.contact-form-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.contact-form-section__heading {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .contact-form-section__heading {
    font-size: 34px;
  }
}

.contact-form-wrap {
  width: 100%;
  max-width: 640px;
}

.contact-form {
  display: flex;
  width: 100%;
  max-width: 640px;
  flex-direction: column;
  gap: 24px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
  .contact-form {
    padding: 40px;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-text-primary);
}

.contact-form__required {
  border: 1px solid var(--color-error);
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-error);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-warm);
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-text-primary);
  outline: none;
}

.contact-form__input {
  height: 48px;
}

.contact-form__textarea {
  height: 128px;
  padding-block: 12px;
  resize: vertical;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-primary);
}

.contact-form__submit {
  display: inline-flex;
  height: 52px;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  padding-inline: 32px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.contact-form__submit:hover {
  background: var(--color-primary-light);
}

.contact-form__success {
  display: flex;
  width: 100%;
  max-width: 640px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 40px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.contact-form__success[hidden] {
  display: none;
}

.contact-form__success-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary);
}

.contact-form__success-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.contact-phone-card {
  display: flex;
  width: 100%;
  max-width: 640px;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
  .contact-phone-card {
    padding: 32px 40px;
  }
}

.contact-phone-card__label {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-secondary);
}

.contact-phone-card__number {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .contact-phone-card__number {
    font-size: 24px;
  }
}

/* ---------- Scroll-to-top button ---------- */
.scroll-top-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
  display: flex;
  height: 48px;
  width: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 768px) {
  .scroll-top-button {
    bottom: 32px;
    right: 32px;
  }
}

.scroll-top-button.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-button:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Small responsive utilities used sparingly in markup ---------- */
.brand-photo-break {
  display: none;
}

@media (min-width: 768px) {
  .brand-photo-break {
    display: block;
  }
}

.section-head--mobile-gap {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .section-head--mobile-gap {
    margin-top: 0;
  }
}

.cert-intro {
  margin-top: 20px;
  max-width: 680px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
  .cert-intro {
    margin-top: 24px;
    font-size: 18px;
  }
}

@media (min-width: 1280px) {
  .cert-intro__line {
    white-space: nowrap;
  }
}

.section-subtitle {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.profile-intro {
  margin-top: 32px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.interview-text {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.cert-photo-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cert-photo-section__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: saturate(0.9) contrast(0.96) brightness(1.01) sepia(0.05);
}

/* Fine dot-halftone filter, matching the TOP hero — softens busy photo
   detail behind the white text without flattening the photo into a solid
   overlay. */
.cert-photo-section__dots-filter {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(8, 14, 9, 0.9) 0.5px, transparent 0.9px);
  background-size: 3px 3px;
}

.cert-photo-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(39, 75, 55, 0.35), rgba(255, 255, 255, 0.35));
}

.cert-photo-section__inner {
  position: relative;
  z-index: 1;
  padding-block: 48px;
}

@media (min-width: 768px) {
  .cert-photo-section__inner {
    padding-block: 96px;
  }
}

.contact-cta {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.contact-cta__text {
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .contact-cta__text {
    font-size: 16px;
  }
}

/* Global utility: color-mix WCAG-safe divider color already covered by tokens */