/* ===========================================================
   English pages (/en/) — loaded AFTER /style.css
   Only language-specific overrides live here. Layout, colours and
   components come from the shared stylesheet.
   =========================================================== */

:root {
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
}

/* Latin serif for everything the Japanese pages set in Mincho */
.brand, .hero-tag, .hero-title, .section-head h2, .tokushu-item h3,
.service-body h3, .service-num, .price-card h3, .price-hachi-lbl,
.about-name, .reason-num, .reason-body h3, .faq-item summary, .foot-brand,
.hh-title, .hs-num, .hs-head h2, .hp-list dt, .ht tbody th, .hy-notes dt,
.hd-col h3, .hsting h3, .hsting li::before, .hf-n, .hf-step h3, .ho h3,
.ha-detail dt, .hh-vert, .map-labels, .niseko-card h3 {
  font-family: var(--font-serif);
}
.hh-vert { text-orientation: mixed; }

/* English wraps by word; never let a long word push the layout */
body { overflow-wrap: break-word; hyphens: manual; }
.brand-name .brand-sub { letter-spacing: 0.22em; }

/* Header: shorter labels on phones, hide the wordmark only on the narrowest screens */
@media (max-width: 360px) {
  .brand-name { display: none; }
}

/* Language switch (.lang-switch / .nav-lang) is styled in /style.css, shared by both languages */

/* Hero: English headline sizes */
.hero-title { font-size: clamp(26px, 8vw, 32px); letter-spacing: 0.02em; }
.hero-title-tag { font-size: 16px; }
.hero .hero-note a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); }
.hh .hero-note a { color: var(--c-primary); border-bottom: 1px solid rgba(45,74,62,0.4); }
@media (min-width: 768px) {
  .hero-title { font-size: 42px; }
  .hero-note { text-align: left; }
}
@media (min-width: 1100px) {
  .hero-title { font-size: 50px; }
}

/* Email button (secondary CTA next to LINE) */
.btn-mail {
  background: var(--c-card);
  color: var(--c-primary-d);
  border: 1.5px solid var(--c-primary);
  box-shadow: none;
}
.btn-mail:hover { background: #fffdf8; }
.section-cta .btn-mail {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.section-cta .btn-mail:hover { background: rgba(255,255,255,0.08); }
.mail-ico {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  flex-shrink: 0;
}
.section-cta .mail-ico { background: rgba(255,255,255,0.18); }
.mail-ico svg { width: 15px; height: 15px; }
.cta-stack { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cta-stack .btn { width: 100%; }
.cta-plain {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-muted);
  text-align: center;
}
.section-cta .cta-plain { color: #e3e9da; }
.cta-plain a { border-bottom: 1px solid currentColor; }
@media (min-width: 768px) {
  .cta-stack { flex-direction: row; justify-content: center; }
  .cta-stack .btn { width: auto; min-width: 260px; }
  #pricing > .cta-stack { grid-column: 1 / -1; }
}

/* Niseko section: two reading columns on desktop, plain text on phones */
.niseko-wrap {
  background: var(--c-card);
  border-top: 2px solid var(--c-primary-d);
  border-bottom: 1px solid var(--c-line);
  padding: 22px 20px 24px;
}
.niseko-wrap p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.9; }
.niseko-wrap p:last-child { margin-bottom: 0; }
.niseko-grid { display: grid; gap: 18px; margin-top: 18px; }
.niseko-card { min-width: 0; padding-top: 14px; border-top: 1px solid var(--c-line); }
.niseko-card h3 {
  margin: 0 0 6px;
  font-size: 16.5px;
  color: var(--c-primary-d);
  line-height: 1.5;
}
.niseko-card ul { margin: 0; padding: 0; list-style: none; }
.niseko-card li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.75;
  margin: 4px 0;
}
.niseko-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}
@media (min-width: 768px) {
  .niseko-wrap { padding: 32px 36px 34px; }
  .niseko-wrap p { font-size: 15px; }
  .niseko-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* Map labels are longer in English */
.map-labels { font-size: 25px; letter-spacing: 0.02em; }
.map-annot { font-size: 13px; }
/* Region list: English labels wrap on the narrowest phones (WebKit does not shrink nowrap items) */
@media (max-width: 360px) {
  .area-list li { white-space: normal; align-items: flex-start; line-height: 1.45; }
  .area-list .area-dot { margin-top: 3px; }
}

/* Season bar month labels */
.hy-months span { letter-spacing: 0; }

/* Wasp table: English row labels on phones */
.ht td { grid-template-columns: 60px minmax(0, 1fr); }
@media (min-width: 768px) {
  /* give the last column ("Action") room for "Removal, or relocation on request" */
  .ht tbody th { width: 110px; white-space: normal; }
  .ht thead th:nth-child(1) { width: 110px; }
  .ht thead th:nth-child(2) { width: 30%; }
  .ht thead th:nth-child(3) { width: 17%; }
  .ht thead th:nth-child(4) { width: 25%; }
}

/* Footer address in English */
.foot-lbl { min-width: 5.2em; }