/* ============================================================
   市ノ坪WEB制作 - 営業用ポートフォリオサイト
   Design concept: "設計図(blueprint)" -- 現場・建築図面のような
   線と余白で、信頼感と実務性を伝える。
   ============================================================ */

:root {
  --ink: #1E2A38;
  --ink-soft: #4B5A6B;
  --paper: #F7F5F0;
  --paper-alt: #EFEBE2;
  --line: #D3CDBF;
  --accent: #B54A24;
  --accent-soft: #EBDCCF;
  --sage: #53665A;
  --sage-soft: #E8EEE9;
  --accent-deep: #9A3D20;
  --white: #FFFFFF;

  --font-head: "Shippori Mincho", serif;
  --font-body: "Zen Kaku Gothic New", sans-serif;

  --max-width: 1120px;
  --radius: 3px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 112.5%; /* 18px base -- readability for an older, non-technical audience */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;

  /* Prevent unnatural mid-word line breaks. word-break: keep-all keeps
     CJK + Latin runs (e.g. "Web制作", "SEO対策") from splitting mid-word,
     while line-break: strict applies the stricter Japanese kinsoku
     (line-start/line-end punctuation) rule set. overflow-wrap stays
     "normal" here; it is opted into per-element only where a genuinely
     unbreakable long token (a URL, an email address) could overflow. */
  /* Prevent unnatural mid-word line breaks in mixed CJK+Latin runs
     (e.g. "Web制作", "SEO対策") without blocking normal Japanese
     wrapping -- word-break:keep-all disables breaks between CJK
     characters too, which caused long text in narrow cards to overflow
     and get clipped. line-break:strict applies the stricter Japanese
     kinsoku (line-start/line-end punctuation) rule set. */
  /* word-break:normal is what correctly respects Japanese kinsoku
     rules (a line will never start with 。or 、, for example) --
     the browser's default CJK line-breaking already handles this.
     keep-all + overflow-wrap:break-word (tried previously) forced a
     break wherever the container edge fell, even overriding kinsoku
     and landing 。at the start of a line, which is worse. Specific
     Latin+kanji compounds that still need protecting (e.g. "CTA設計")
     are wrapped individually in a .keep span instead of solving this
     at the global level. line-break:strict applies the stricter
     kinsoku (line-start/line-end punctuation) rule set. */
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
}

/* Opt-in utility: apply only to elements that may contain long,
   unbreakable strings (URLs, email addresses, etc.) that would
   otherwise overflow their container. Not applied globally. */
.text-break-anywhere {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Elements that must never wrap, regardless of width */
.brand,
.footer-brand {
  white-space: nowrap;
}

/* Keep a Latin+kanji compound (e.g. "CTA設計") together as one unit,
   so a needed line break lands before it, not inside it */
.keep {
  white-space: nowrap;
}

/* Preserve Japanese punctuation rules even when a phrase exceeds the
   card width. Explicit <wbr> and .keep remain available in the markup. */
.phrase-wrap {
  word-break: normal;
  overflow-wrap: normal;
}
.phrase-unit {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

/* Semantic line control: use when the copy has an intentional reading rhythm.
   We never shrink type to force a fit. On wide screens each .semantic-line is
   kept as one line; on narrower screens the same line may wrap naturally. */
.semantic-lines { max-width: none; }
.semantic-line { display: block; }

@media (min-width: 1100px) {
  .semantic-line { white-space: nowrap; }
}

main[id], section[id] { scroll-margin-top: 88px; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 0.6em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; color: var(--ink-soft); max-width: 62ch; }

a { color: inherit; }

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--ink);
  color: var(--white);
}
.btn-primary:hover { background: var(--accent); }
.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-disabled {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: default;
  font-size: 0.9rem;
  padding: 11px 20px;
}
.btn-wide { width: 100%; padding: 15px; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 240, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  width: 10px; height: 10px;
  border: 1.5px solid var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-nav a {
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-color: var(--accent); }
.nav-cta {
  color: var(--ink) !important;
  font-weight: 500;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  margin: 0 auto;
}

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 88px;
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 36px;
  align-items: center;
}
.hero-eyebrow {
  font-size: 0.92rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 500;
  text-wrap: balance;
}
.hero-desc { color: var(--ink-soft); }
.hero-sub.phrase-wrap { word-break: keep-all; }
.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
  max-width: 700px;
}
.hero-actions .btn {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}
.hero-figure {
  display: flex;
  justify-content: flex-end;
  transform: translateX(12px);
}
.blueprint-svg {
  width: 100%;
  max-width: 480px;
  color: var(--ink-soft);
  opacity: 0.9;
}
.blueprint-svg .accent-mark {
  color: var(--accent);
}
.blueprint-svg .dim-label {
  font-size: 9px;
  fill: var(--ink-soft);
  font-family: var(--font-body);
}

/* ---------- Sections (generic) ---------- */
.section { padding: 76px 0; }
.section-alt { background: var(--paper-alt); }
.section-head {
  max-width: 640px;
  margin-bottom: 40px;
}
.section-head-wide { max-width: none; }
.copy-wide { max-width: none; }


/* ---------- Entry paths ---------- */
.entry-section { border-bottom: 1px solid var(--line); }
.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.entry-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.entry-card p { max-width: 52ch; }
.entry-card .btn { margin-top: auto; }
.entry-label,
.section-kicker,
.service-kicker {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* ---------- Service cards ---------- */
.service-card-grid { gap: 24px; }
.service-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sage);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
}
.service-card > * { position: relative; }
.service-card-data { border-top-color: var(--accent); }
.service-card-publish { border-top-color: var(--ink-soft); }
.service-card .service-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0 0 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.45;
}
.service-card-data .service-kicker {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.service-card-publish .service-kicker {
  background: var(--paper-alt);
  color: var(--ink-soft);
}
.service-card ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.service-card li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.service-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--accent);
}
.service-pricing-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}
.service-pricing-link:hover,
.service-pricing-link:focus-visible { color: var(--accent-deep); }
.service-price {
  font-family: var(--font-head);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.service-price span { font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; }
.section-note {
  margin-top: 24px;
  font-size: 0.9rem;
  max-width: 80ch;
}
.service-maintenance-note {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px 18px;
  align-items: baseline;
}
.service-maintenance-note strong { color: var(--ink); }
.service-maintenance-note > span { color: var(--ink-soft); white-space: nowrap; }
.service-maintenance-note p {
  margin: 0;
  max-width: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---------- Diagnosis ---------- */
.diagnosis-section { border-bottom: 1px solid var(--line); }
.diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  counter-reset: diagnosis;
}
.diagnosis-grid li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 126px;
  padding: 18px;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.93rem;
}
.diagnosis-grid li > span:first-child {
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 0.78rem;
  flex-shrink: 0;
  padding-top: 2px;
}
.diagnosis-grid li > div {
  min-width: 0;
}
.diagnosis-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.55;
}
.diagnosis-grid small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.65;
}
.diagnosis-grid strong,
.diagnosis-grid small {
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
  text-wrap: pretty;
}
.diagnosis-copy { margin-top: 28px; max-width: none; }
.diagnosis-copy p { max-width: none; }
.fine-print { font-size: 0.84rem; }

/* ---------- Pricing additions ---------- */
.price-badge {
  position: absolute;
  right: 18px;
  top: 16px;
  background: var(--accent);
  color: var(--white);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
}
.price-amount span { display: inline-block; }
.card-note { margin-top: 16px; font-size: 0.82rem; }
.pricing-suboffers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.pricing-suboffers p:last-child { grid-column: 1 / -1; }
.pricing-suboffers p {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: baseline;
  max-width: none;
}
.pricing-suboffers span { color: var(--ink-soft); font-size: 0.9rem; text-align: right; }
.section-actions { margin-top: 24px; }

/* ---------- Reasons ---------- */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.reason-grid article {
  border-top: 2px solid var(--accent);
  padding-top: 20px;
}
.reason-num { font-family: var(--font-head); color: var(--accent); font-size: 0.85rem; }
.reason-grid h3 { margin-top: 8px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: none; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  font-weight: 700;
  color: var(--ink);
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 15px;
  color: var(--accent);
  font-size: 1.2rem;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding: 0 34px 18px 0; margin: 0; max-width: none; }

/* ---------- Contact paths ---------- */
.contact-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: none;
  margin-top: 24px;
}
.contact-paths strong,
.contact-paths span { display: block; }
.contact-paths strong { color: var(--white); margin-bottom: 6px; }
.contact-paths span { color: rgba(247,245,240,0.75); font-size: 0.9rem; }
.contact-path {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(247,245,240,0.2);
  border-radius: var(--radius);
}
.contact-path .btn { margin-top: 16px; }
.contact-path .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.contact-path .btn-primary:hover,
.contact-path .btn-primary:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
.btn-on-dark { color: var(--white); border-color: rgba(255,255,255,0.7); }
.btn-on-dark:hover,
.btn-on-dark:focus-visible { background: var(--white); color: var(--ink); }
.contact-email { margin-top: 18px; color: rgba(247,245,240,0.82); }
.contact-email a { color: var(--white); overflow-wrap: anywhere; }
.contact-note { margin-top: 8px; font-size: 0.84rem; color: rgba(247,245,240,0.68); }
.about-contact a { overflow-wrap: anywhere; }


/* ---------- Contact form (V5) ---------- */
.contact-form {
  position: relative;
  margin-top: 28px;
  padding: 28px;
  border: 1px solid rgba(247,245,240,0.22);
  border-radius: var(--radius);
  background: rgba(247,245,240,0.05);
  scroll-margin-top: 88px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.form-field { min-width: 0; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--white);
  font-weight: 600;
  font-size: 0.92rem;
}
.required-label,
.optional-label {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 500;
}
.required-label { color: #ffd7ca; }
.optional-label { color: rgba(247,245,240,0.62); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(247,245,240,0.34);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  padding: 12px 13px;
}
.form-field textarea { resize: vertical; min-height: 150px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.form-verification { margin-top: 20px; min-height: 65px; }
.turnstile-widget { min-height: 65px; }
.form-submit { margin-top: 18px; background: var(--accent); border-color: var(--accent); }
.form-submit:hover,
.form-submit:focus-visible { background: var(--white); color: var(--ink); border-color: var(--white); }
.form-submit:disabled { opacity: 0.6; cursor: wait; }
.form-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: rgba(247,245,240,0.9);
  max-width: none;
}
.form-status.is-error { color: #ffd7ca; }
.form-status.is-success { color: #d9f6df; }
.local-review-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(247,245,240,0.2);
  border-radius: var(--radius);
  color: rgba(247,245,240,0.78);
  font-size: 0.84rem;
  max-width: none;
}
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Sample cards ---------- */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 28px;
}
.sample-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.sample-media {
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  height: 130px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 15px, rgba(30,42,56,0.06) 15px, rgba(30,42,56,0.06) 16px),
    repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(30,42,56,0.06) 15px, rgba(30,42,56,0.06) 16px),
    var(--accent-soft);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
}
.sample-media-link {
  position: relative;
  display: block;
  padding: 0;
  text-decoration: none;
  background: var(--accent-soft);
}
.sample-media.has-image { height: 185px; }
.sample-media.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.25s ease;
}
.sample-media-link:hover img,
.sample-media-link:focus-visible img { transform: scale(1.02); }
.sample-media.has-image .sample-media-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
}
.tag-live {
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}

.sample-media-label {
  font-family: var(--font-head);
  font-size: 0.85rem;
  color: var(--ink);
  background: rgba(247,245,240,0.85);
  padding: 3px 10px;
}
.sample-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.sample-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tag {
  font-size: 0.82rem;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink-soft);
}
.tag-pending {
  border-color: var(--accent);
  color: var(--accent);
}
.sample-body h3 { margin-bottom: 12px; }
.sample-body .variant {
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.sample-purpose, .sample-target {
  font-size: 0.95rem;
  margin-bottom: 8px;
  line-height: 1.6;
}
.field-label {
  font-weight: 700;
  color: var(--ink);
  margin-right: 6px;
  white-space: nowrap;
}
.field-value {
  color: var(--ink-soft);
}
.sample-desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.sample-body .btn { max-width: 100%; margin-top: auto; align-self: flex-start; }

/* ---------- Services ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 40px;
}
/* ---------- Pricing ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px;
}
.price-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.price-card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.price-tier {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}
.price-amount {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.price-amount span {
  font-size: 1rem;
  font-weight: 500;
  margin-left: 2px;
}
.price-pages {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.price-tagline {
  font-size: 0.92rem;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  text-wrap: balance;
}
.price-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-items li {
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.price-items li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border: 1.5px solid var(--accent);
}
.price-note {
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: calc(80ch + 2em);
}

/* ---------- Flow ---------- */
.flow-list {
  display: flex;
  flex-direction: column;
}
.flow-list li {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.flow-list li:first-child { padding-top: 0; }
.flow-list li:last-child { border-bottom: none; }
.flow-num {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 0.95rem;
}
.flow-list h3 { margin-bottom: 4px; }
.flow-list p { margin: 0; font-size: 0.92rem; max-width: none; }

/* ---------- About ---------- */
.about-body { max-width: none; }
.about-body p { max-width: none; }
.about-feature-title {
  margin: 28px 0 12px;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink);
}
.about-lead {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--ink);
}

/* ---------- CTA / Contact ---------- */
.cta {
  padding: 84px 0;
  background: var(--ink);
  color: var(--paper);
}
.cta h2 { color: var(--white); }
.cta > .wrap > p { color: rgba(247,245,240,0.75); max-width: none; }
.cta-inner { display: block; }


/* ---------- Footer ---------- */
.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.footer-brand { font-family: var(--font-head); margin: 0; }
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a { text-decoration: none; font-size: 0.95rem; color: var(--ink-soft); }
.footer-nav a:hover { color: var(--ink); }
.footer-copy { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* Hero gets a little more horizontal room so the approved three-line copy
   and two CTAs fit at the standard desktop width without reducing type size. */
@media (min-width: 1100px) {
  .hero > .wrap { max-width: 1240px; }
}

@media (min-width: 861px) and (max-width: 1099px) {
  .hero-actions { grid-template-columns: 1fr; max-width: 360px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { order: -1; width: 100%; max-width: 300px; margin: 0 auto; transform: none; }
}

@media (max-width: 800px) {
  .site-nav {
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    gap: 16px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .nav-toggle { display: flex; }
  .section { padding: 56px 0; }
  .hero { padding: 48px 0 60px; }
  .contact-form { padding: 24px; }
}


@media (max-width: 900px) {
  .entry-grid,
  .pricing-suboffers { grid-template-columns: minmax(0, 1fr); }
  .service-maintenance-note { grid-template-columns: 1fr; gap: 4px; }
  .diagnosis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reason-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 0.82rem; }
}

@media (max-width: 720px) {
  .hero-actions { grid-template-columns: 1fr; max-width: none; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field-wide { grid-column: auto; }
  .hero-text,
  .entry-card { min-width: 0; }
  .btn { max-width: 100%; }
  .diagnosis-grid,
  .contact-paths { grid-template-columns: 1fr; }
  .entry-card,
  .service-card,
  .price-card { padding: 24px 20px; }
  .price-amount { font-size: 1.75rem; }
  .pricing-suboffers p { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pricing-suboffers span { text-align: left; }
}

@media (max-width: 480px) {
  .contact-form { padding: 22px 18px; }
  .sample-media.has-image { height: 160px; }
  .price-badge { position: static; align-self: flex-start; margin: 0 0 8px; }
  .price-amount { font-size: 1.45rem; white-space: nowrap; }
  .price-amount span { font-size: 0.82rem; }
}

/* V5.1: wrapping-only adjustments from user display review. */
.natural-wrap {
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* Keep each meaningful price unit intact, while still allowing the tax note
   to move as one unit on genuinely narrow screens. */
.service-price .price-value,
.service-price .price-tax,
.price-amount .price-value,
.price-amount .price-tax {
  white-space: nowrap;
}

.service-price .price-value,
.price-amount .price-value {
  font-family: var(--font-head);
  font-size: inherit;
  font-weight: inherit;
}

.service-price .price-tax {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
}

.price-amount .price-tax {
  font-size: 1rem;
  font-weight: 500;
  margin-left: 4px;
}

.sample-body h3,
.sample-purpose,
.sample-target,
.sample-desc,
.entry-card h3,
.service-card h3,
.price-card h3,
.price-card .price-tier,
.price-card .price-pages {
  line-break: strict;
  text-wrap: pretty;
}

.sample-purpose,
.sample-target,
.sample-desc {
  word-break: normal;
  overflow-wrap: normal;
  word-break: auto-phrase;
}

.entry-section .section-head h2,
.entry-section .section-head p,
.entry-card h3,
.service-card h3,
.price-card h3 {
  word-break: auto-phrase;
}

.sample-title-main,
.sample-body .variant,
.phrase-lock {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .price-amount {
    white-space: normal;
  }
  .price-amount .price-value,
  .price-amount .price-tax,
  .service-price .price-value,
  .service-price .price-tax {
    display: inline-block;
  }
}

@media (min-width: 901px) {
  .price-amount {
    font-size: 1.8rem;
    white-space: nowrap;
  }
  .price-amount .price-tax {
    font-size: 0.86rem;
  }
}

/* V5.2: mobile-only wrapping refinements from user review.
   Keep PC wrapping unchanged; relax phrase blocks only where narrow cards
   benefit from natural Japanese line breaking. */
@media (max-width: 480px) {
  .hero-title,
  .entry-section .section-head h2,
  .entry-section .section-head p,
  .entry-card .entry-label,
  .entry-card h3,
  .entry-card p,
  .sample-body h3,
  .sample-purpose,
  .sample-target,
  .sample-desc,
  .sample-body .field-value,
  .service-card h3,
  .service-card p:not(.service-price),
  .service-card li,
  .diagnosis-grid li,
  .diagnosis-label,
  .price-card .price-tier,
  .price-card .price-pages,
  .price-card .price-tagline,
  .price-card .price-items li,
  .reason-grid h3,
  .flow-list h3,
  .flow-list p,
  .about-body p,
  .contact-path strong,
  .contact-path span,
  .cta-inner > h2,
  .cta-inner > p {
    line-break: strict;
    word-break: auto-phrase;
    overflow-wrap: normal;
    text-wrap: pretty;
  }

  /* These sections used desktop-oriented phrase blocks. On narrow screens,
     allow the browser to wrap the same text naturally instead of moving an
     entire phrase to the next line. */
  .reason-grid .phrase-unit,
  .diagnosis-copy .phrase-unit,
  .price-note .phrase-unit,
  .card-note .phrase-unit,
  .cta-inner > p .phrase-unit {
    display: inline;
    max-width: none;
    white-space: normal;
  }

  /* Preserve price/unit groupings as atomic reading units. */
  .service-price .price-value,
  .service-price .price-tax,
  .price-amount .price-value,
  .price-amount .price-tax,
  .pricing-suboffers strong,
  .pricing-suboffers span {
    white-space: nowrap;
  }
}


/* ===== 制作サンプル：A/B/C社 x 各案A/B/C =====
   公開判定とリンク先は js/sample-catalog.js のみで管理。
   制作途中のものは通常閲覧では出さず、レビュー時のみ表示する。 */
.sample-catalog { display: grid; gap: 44px; }
.sample-company { min-width: 0; }
.sample-company-title { font-size: 1.25rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sample-company-title span { font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; color: var(--ink-soft); margin-left: 12px; }
.sample-card-title { font-family: var(--font-head); font-size: 1.1rem; line-height: 1.5; margin: 0 0 14px; }
.sample-card .sample-desc { margin-top: 0; padding-top: 0; border: 0; font-style: normal; }
.sample-disclaimer { font-size: 0.83rem; margin-top: 12px; color: var(--ink-soft); }
.sample-media.sample-media-unready { height: 185px; background: var(--paper-alt); align-items: center; justify-content: center; }
.sample-media-unready .sample-media-label { background: var(--paper); }
.sample-card.is-unready { border-style: dashed; }
.sample-card.is-unready .sample-body { justify-content: space-between; }
.sample-card.is-unready .sample-desc { flex: 1; }
.sample-card .sample-unready-note { font-size: 0.82rem; color: var(--ink-soft); }
/* ===== 既存資料を活用して準備負担を減らす（生成画像なし） ===== */
.materials-section { border-top: 1px solid var(--line); }
.materials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.materials-item { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.materials-num { display: block; font-size: 0.78rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.materials-item h3 { font-size: 1.04rem; margin-bottom: 12px; }
.materials-item p { margin: 0; font-size: 0.93rem; }
.materials-note { max-width: none; font-size: 0.8rem; margin: 20px 0 0; }
@media (max-width: 720px) {
  .materials-grid { grid-template-columns: minmax(0, 1fr); }
  .materials-item { padding: 22px 20px; }
  .sample-company-title span { display: block; margin: 2px 0 0; }
}

/* Staging v7: approved line-break behavior. Keep font sizes unchanged; on
   compact screens each semantic line can wrap inside its own block rather
   than causing horizontal overflow. */
@media (max-width: 1099px) {
  .semantic-line { white-space: normal; }
}

/* ===== 2026-10-07 mobile readability / trust refinements ===== */
.sample-disclaimer {
  margin: 14px 0 0;
  max-width: none;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.mobile-details {
  margin: 0;
}
.mobile-details > summary {
  display: none;
}
.mobile-details-content {
  min-width: 0;
}
.pricing-details {
  margin-top: 20px;
}
.pricing-details .price-note {
  margin-top: 0;
}

.diagnosis-two-line > span {
  display: block;
}

.direct-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 18px;
}
.direct-contact p {
  margin: 0;
  max-width: none;
}
.contact-phone a,
.contact-email a {
  color: var(--white);
}
.about-contact .contact-separator {
  color: var(--ink-soft);
}

.mobile-fixed-cta {
  display: none;
}

@media (max-width: 720px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .mobile-details {
    margin-top: 20px;
  }
  .mobile-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .mobile-details > summary::-webkit-details-marker {
    display: none;
  }
  .mobile-details > summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 1.2rem;
    line-height: 1;
  }
  .mobile-details[open] > summary::after {
    content: "−";
  }
  .mobile-details[open] > .mobile-details-content {
    margin-top: 18px;
  }
  .pricing-details .price-note {
    font-size: 0.82rem;
  }

  .diagnosis-grid li {
    padding-left: 16px;
    padding-right: 16px;
  }
  .diagnosis-two-line > span {
    white-space: nowrap;
  }

  .about-contact {
    display: grid;
    gap: 4px;
  }
  .about-contact .contact-separator {
    display: none;
  }

  .mobile-fixed-cta {
    position: fixed;
    z-index: 1100;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(36, 30, 24, 0.22);
  }
  .mobile-fixed-cta:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
  }
}

@media (max-width: 360px) {
  .diagnosis-two-line > span {
    font-size: 0.74rem;
  }
}


/* ============================================================
   V13 Hero refresh
   - Proposal C base: price clarity + sample mockups
   - Proposal B strength: use existing client materials
   - Keep the existing portfolio's restrained orange / sage palette
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 104px;
  border-bottom: 0;
  background: #FBFAF7;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -170px;
  right: -140px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: var(--sage-soft);
  opacity: 0.92;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  right: -10%;
  bottom: -88px;
  height: 150px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--paper-alt);
}
.hero > .wrap {
  max-width: 1240px;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: center;
}
.hero-text {
  min-width: 0;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--sage);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.hero-eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--accent);
}
.hero-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(2.4rem, 4.2vw, 3.45rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.045em;
  text-wrap: initial;
}
.hero-title span {
  display: block;
  white-space: nowrap;
}
.hero-desc {
  margin: 26px 0 0;
  max-width: 36ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.8;
  font-weight: 500;
}
.hero-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}
.hero-price-card {
  position: relative;
  min-width: 0;
  padding: 17px 12px 15px;
  border: 1px solid rgba(30, 42, 56, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  box-shadow: 0 10px 28px rgba(30, 42, 56, 0.045);
}
.hero-price-card::before {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}
.hero-price-improve::before { background: var(--sage); }
.hero-price-data::before { background: var(--accent); }
.hero-price-publish::before { background: var(--ink); }
.hero-price-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.hero-price-card strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.hero-price-card small {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 0.68rem;
}
.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
  margin-top: 18px;
}
.hero-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 13px 18px;
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 700;
}
.hero-actions .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.hero-actions .btn-primary:hover,
.hero-actions .btn-primary:focus-visible {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.hero-actions .btn-outline {
  background: rgba(255,255,255,0.74);
}

.hero-visual {
  position: relative;
  min-width: 0;
  padding: 44px 8px 12px 0;
}
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 330px;
  height: 330px;
  left: 8%;
  bottom: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: 0.42;
}
.hero-device-stage {
  position: relative;
  width: min(100%, 570px);
  margin: 0 auto;
  padding: 10px 42px 54px 0;
}
.hero-laptop {
  position: relative;
  width: 100%;
  padding: 10px 10px 0;
  border-radius: 15px 15px 4px 4px;
  background: #20262B;
  box-shadow: 0 24px 50px rgba(30, 42, 56, 0.16);
}
.hero-laptop-screen {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 6px 6px 2px 2px;
  background: var(--white);
}
.hero-laptop-screen img,
.hero-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-laptop-screen img {
  object-position: top center;
}
.hero-laptop-base {
  position: absolute;
  left: -17px;
  right: -17px;
  bottom: -12px;
  height: 13px;
  border-radius: 0 0 46% 46% / 0 0 100% 100%;
  background: #C9CDD0;
  box-shadow: 0 6px 8px rgba(30, 42, 56, 0.09);
}
.hero-phone {
  position: absolute;
  z-index: 2;
  width: 28%;
  min-width: 112px;
  right: 1px;
  bottom: 0;
  padding: 6px;
  border-radius: 24px;
  background: #1D2227;
  box-shadow: 0 20px 38px rgba(30, 42, 56, 0.23);
}
.hero-phone-notch {
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 50%;
  width: 42%;
  height: 11px;
  border-radius: 0 0 9px 9px;
  background: #1D2227;
  transform: translateX(-50%);
}
.hero-phone-screen {
  overflow: hidden;
  aspect-ratio: 9 / 18.8;
  border-radius: 19px;
  background: var(--white);
}
.hero-phone-screen img {
  object-position: 13% top;
}
.hero-sample-note {
  margin: 10px 0 0;
  max-width: none;
  color: var(--ink-soft);
  font-size: 0.74rem;
  text-align: right;
}

/* The first content block inherits the hero's landing color so the new
   visual language fades into the existing site instead of looking pasted on. */
.entry-section {
  position: relative;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
}
.entry-section .section-head {
  margin-bottom: 34px;
}
.entry-card {
  border-color: rgba(30, 42, 56, 0.12);
  box-shadow: 0 8px 24px rgba(30, 42, 56, 0.035);
}

@media (max-width: 1050px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 38px;
  }
  .hero-title {
    font-size: clamp(2.15rem, 4.2vw, 2.8rem);
  }
  .hero-price-card {
    padding-left: 8px;
    padding-right: 8px;
  }
  .hero-price-label { font-size: 0.72rem; }
  .hero-price-card strong { font-size: 1.02rem; }
}

@media (max-width: 860px) {
  .hero {
    padding: 58px 0 94px;
  }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .hero-text {
    max-width: 680px;
  }
  .hero-title {
    font-size: clamp(2.1rem, 6.2vw, 3rem);
  }
  .hero-desc {
    max-width: 44ch;
  }
  .hero-visual {
    width: min(100%, 650px);
    margin: 0 auto;
    padding-top: 18px;
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 42px 0 82px;
  }
  .hero::before {
    top: -130px;
    right: -190px;
    width: 360px;
    height: 360px;
  }
  .hero::after {
    bottom: -70px;
    height: 112px;
  }
  .hero-eyebrow {
    margin-bottom: 15px;
    font-size: 0.78rem;
  }
  .hero-title {
    font-size: clamp(1.72rem, 8vw, 2.35rem);
    line-height: 1.17;
    letter-spacing: -0.04em;
  }
  .hero-desc {
    margin-top: 20px;
    font-size: 0.98rem;
    line-height: 1.75;
  }
  .hero-desc-break {
    display: none;
  }
  .hero-price-grid {
    gap: 6px;
    margin-top: 22px;
  }
  .hero-price-card {
    padding: 14px 5px 12px;
    border-radius: 6px;
  }
  .hero-price-card::before {
    left: 28%;
    right: 28%;
  }
  .hero-price-label {
    font-size: 0.67rem;
  }
  .hero-price-card strong {
    font-size: clamp(0.92rem, 4.4vw, 1.1rem);
  }
  .hero-price-card small {
    font-size: 0.6rem;
  }
  .hero-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
  }
  .hero-actions .btn {
    min-height: 50px;
  }
  .hero-visual {
    padding: 4px 0 0;
  }
  .hero-device-stage {
    width: 96%;
    padding: 8px 34px 48px 0;
  }
  .hero-phone {
    width: 30%;
    min-width: 94px;
    border-radius: 20px;
    padding: 5px;
  }
  .hero-phone-screen {
    border-radius: 16px;
  }
  .hero-sample-note {
    margin-top: 6px;
    font-size: 0.68rem;
    text-align: center;
  }
  .entry-section {
    padding-top: 66px;
  }
}

@media (max-width: 390px) {
  .hero-title {
    font-size: clamp(1.65rem, 8vw, 1.95rem);
  }
  .hero-price-label { font-size: 0.62rem; }
  .hero-price-card strong { font-size: 0.86rem; }
  .hero-price-card small { font-size: 0.56rem; }
}

/* =========================================================
   V16 compact LP / mobile-first redesign (2026-10-08)
   ========================================================= */
:root{
  --v16-bg:#f7f5ef;
  --v16-soft:#f1ede3;
  --v16-card:#fff;
  --v16-ink:#17202b;
  --v16-muted:#5f6872;
  --v16-navy:#15263a;
  --v16-navy-2:#20344a;
  --v16-accent:#c85a24;
  --v16-accent-dark:#a9491d;
  --v16-line:#d9d4ca;
  --v16-radius:14px;
  --v16-shadow:0 12px 36px rgba(20,38,58,.10);
}
html{scroll-behavior:smooth}
body.v16-site{margin:0;background:var(--v16-bg);color:var(--v16-ink);font-family:"Zen Kaku Gothic New",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.7;font-size:16px}
.v16-site *{box-sizing:border-box}
.v16-site img{display:block;max-width:100%;height:auto}
.v16-site a{color:inherit}
.v16-wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.v16-header{position:sticky;top:0;z-index:1000;background:rgba(247,245,239,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(23,32,43,.08)}
.v16-header-inner{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.v16-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;letter-spacing:.02em;font-size:15px;white-space:nowrap}
.v16-brand-dot{width:11px;height:11px;border-radius:50%;background:var(--v16-accent);box-shadow:0 0 0 5px rgba(200,90,36,.12)}
.v16-nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:700}
.v16-nav a{text-decoration:none}
.v16-nav a:not(.v16-nav-cta):hover{text-decoration:underline;text-underline-offset:4px}
.v16-nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:999px;background:var(--v16-accent);color:#fff!important}
.v16-nav-cta:hover{background:var(--v16-accent-dark)}
.v16-nav-toggle{display:none;width:42px;height:42px;border:0;background:transparent;padding:10px;cursor:pointer}
.v16-nav-toggle span:not(.visually-hidden){display:block;width:22px;height:2px;background:var(--v16-ink);margin:4px auto;border-radius:2px}
.v16-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;border-radius:10px;text-decoration:none;font-weight:700;border:1px solid transparent;cursor:pointer;font:inherit;transition:.2s ease}
.v16-btn-primary{background:var(--v16-accent);color:#fff;border-color:var(--v16-accent)}
.v16-btn-primary:hover{background:var(--v16-accent-dark);border-color:var(--v16-accent-dark);transform:translateY(-1px)}
.v16-hero{padding:56px 0 62px;background:linear-gradient(135deg,#fbfaf6 0%,#f4f1e8 72%,#e7eee9 100%);overflow:hidden}
.v16-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:44px;align-items:center}
.v16-eyebrow,.v16-kicker{margin:0 0 12px;color:var(--v16-accent);font-weight:700;font-size:13px;letter-spacing:.08em}
.v16-hero h1,.v16-subhero h1,.v16-section h2,.v16-contact h2{font-family:"Shippori Mincho",serif;letter-spacing:.01em}
.v16-hero h1{margin:0;font-size:clamp(38px,5vw,64px);line-height:1.14;font-weight:600}
.v16-hero h1 strong{font-weight:700}
.v16-hero-lead{margin:24px 0 26px;font-size:18px;line-height:1.8;color:#33404d}
.v16-hero-copy .v16-btn{min-width:230px}
.v16-hero-free{margin:10px 0 0;font-size:14px;color:var(--v16-muted)}
.v16-hero-visual{min-width:0}
.v16-device-combo{position:relative;max-width:650px;margin-inline:auto;padding:10px 38px 34px 0}
.v16-browser{position:relative;border:8px solid #263442;border-top-width:27px;border-radius:14px 14px 8px 8px;overflow:hidden;background:#fff;box-shadow:var(--v16-shadow)}
.v16-browser-dots{position:absolute;top:-18px;left:10px;width:34px;height:6px;border-radius:999px;background:radial-gradient(circle at 3px 3px,#f8f8f8 0 2px,transparent 2.5px),radial-gradient(circle at 15px 3px,#f8f8f8 0 2px,transparent 2.5px),radial-gradient(circle at 27px 3px,#f8f8f8 0 2px,transparent 2.5px)}
.v16-browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.v16-phone{position:absolute;right:0;bottom:0;width:25%;min-width:88px;border:6px solid #17202b;border-radius:20px;background:#17202b;box-shadow:0 14px 32px rgba(20,38,58,.2);overflow:hidden}
.v16-phone-notch{position:absolute;z-index:2;top:4px;left:50%;width:38%;height:7px;transform:translateX(-50%);background:#17202b;border-radius:0 0 8px 8px}
.v16-phone img{width:100%;aspect-ratio:9/18;object-fit:cover;object-position:top;background:#fff}
.v16-section{padding:64px 0}
.v16-section-soft{background:var(--v16-soft)}
.v16-section-head{max-width:760px;margin-bottom:28px}
.v16-section-head h2{margin:0 0 14px;font-size:clamp(28px,4vw,42px);line-height:1.32}
.v16-section-head p:not(.v16-kicker){margin:0;color:#424c56;font-size:16px}
.v16-sample-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0 18px;max-width:660px}
.v16-sample-tabs button{min-height:46px;border:1px solid #cfc9bd;background:#fff;border-radius:9px;padding:8px 10px;font:inherit;font-size:14px;font-weight:700;color:#49535e;cursor:pointer}
.v16-sample-tabs button[aria-selected="true"]{background:var(--v16-navy);color:#fff;border-color:var(--v16-navy)}
.v16-sample-panel{background:#fff;border:1px solid rgba(23,32,43,.08);border-radius:var(--v16-radius);padding:26px;box-shadow:0 8px 24px rgba(20,38,58,.06)}
.v16-before-after{display:grid;grid-template-columns:minmax(180px,.62fr) 90px minmax(0,1.38fr);gap:22px;align-items:center}
.v16-source-wrap,.v16-after-wrap{min-width:0}
.v16-ba-label{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--v16-muted)}
.v16-source-sheet{aspect-ratio:210/297;background:#fff;border:1px solid #d7d2c8;box-shadow:0 9px 24px rgba(24,34,44,.08);padding:22px 18px;color:#27313c;overflow:hidden}
.v16-source-sheet .doc-brand{font-weight:700;font-size:13px}
.v16-source-sheet .doc-rule{height:3px;width:38%;background:#7893a8;margin:8px 0 18px}
.v16-source-sheet h3{font-size:18px;line-height:1.4;margin:0 0 12px}
.v16-source-sheet h4{font-size:12px;margin:14px 0 4px}
.v16-source-sheet p,.v16-source-sheet li{font-size:10px;line-height:1.7;margin:0}
.v16-source-sheet ul{padding-left:16px;margin:4px 0}
.v16-source-sheet .doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:20px}
.v16-source-sheet .doc-grid span{border:1px solid #cad4dc;background:#f4f7f8;padding:7px 4px;text-align:center;font-size:9px}
.v16-source-sheet .doc-footer{margin-top:22px;padding-top:10px;border-top:1px solid #ddd;font-size:8px;color:#6f7780}
.source-text{padding-top:18px}
.source-text .doc-rule{background:#6f7e88;width:100%;height:1px;margin:8px 0 12px}
.source-text h3{font-size:14px;margin-bottom:6px}.source-text h4{margin-top:10px}
.source-flyer{padding:0;background:#fcfaf5}
.source-flyer .flyer-band{background:#202c35;color:#fff;padding:12px 14px;font-size:10px;font-weight:700}
.source-flyer h3{padding:18px 14px 0;margin:0;font-size:20px;color:#202c35}
.source-flyer .flyer-lead{padding:8px 14px 14px;font-size:10px}
.source-flyer .flyer-points{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 12px}
.source-flyer .flyer-points span{background:#efeee9;border:1px solid #dedbd4;padding:8px 3px;font-size:8px;text-align:center}
.source-flyer .flyer-call{margin:24px 12px 0;background:#c85a24;color:#fff;padding:11px;text-align:center;font-size:10px;font-weight:700}
.v16-transform-arrow{text-align:center;color:var(--v16-accent);font-weight:700;font-size:26px;line-height:1}
.v16-transform-arrow span{display:block;color:var(--v16-muted);font-size:11px;line-height:1.4;margin-bottom:4px}
.v16-sample-screen{overflow:hidden;border:7px solid #22303e;border-radius:10px;background:#fff;box-shadow:var(--v16-shadow)}
.v16-sample-screen img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.v16-sample-title{margin:12px 0 2px;font-weight:700;font-size:16px}
.v16-text-link{display:inline-block;margin-top:6px;color:var(--v16-navy);font-weight:700;text-underline-offset:4px}
.v16-no-materials,.v16-period,.v16-subscription-note{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:18px;padding:16px 18px;border-radius:10px;background:#fff;border:1px solid rgba(23,32,43,.09)}
.v16-no-materials strong,.v16-period strong,.v16-subscription-note strong{font-size:15px}
.v16-no-materials span,.v16-period span,.v16-subscription-note span{font-size:14px;color:var(--v16-muted)}
.v16-section-links{text-align:right;margin-top:18px}
.v16-disclaimer{margin:12px 0 0;font-size:12px;color:#6d747c}
.v16-flow-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.v16-flow-list li{position:relative;background:#fff;border:1px solid rgba(23,32,43,.08);border-radius:12px;padding:18px 16px;min-height:164px}
.v16-flow-num{display:inline-block;margin-bottom:14px;color:var(--v16-accent);font-weight:700;font-size:13px;letter-spacing:.08em}
.v16-flow-list h3{font-size:18px;margin:0 0 7px}
.v16-flow-list p{font-size:14px;line-height:1.65;margin:0;color:#4f5963}
.v16-period{background:#fbf7ed;border-color:#e2d8c7;margin-top:18px}
.v16-price-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.v16-price-list article{background:#fff;border:1px solid rgba(23,32,43,.08);border-radius:12px;padding:22px 18px}
.v16-price-list p{margin:0 0 12px;font-weight:700;font-size:15px}
.v16-price-list strong{display:block;font-size:30px;line-height:1.1;color:var(--v16-navy)}
.v16-price-list small{font-size:12px;color:var(--v16-muted)}
.v16-subscription-note{background:#fff7ef;border-color:#e6c7b4}
.v16-contact{padding:68px 0;background:var(--v16-navy);color:#fff}
.v16-contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:46px;align-items:start}
.v16-kicker-light{color:#ffbb96}
.v16-contact h2{margin:0 0 20px;font-size:clamp(29px,4vw,44px);line-height:1.35;color:#fff}
.v16-contact-copy>p:not(.v16-kicker){color:#d8e0e7;margin:0 0 16px}
.v16-contact-copy strong{color:#fff}
.v16-contact-person{margin-top:26px!important;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);font-weight:700}
.v16-contact-person span{font-weight:400;font-size:14px;color:#d8e0e7}
.v16-contact-form{background:#20344a;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:24px;box-shadow:0 18px 40px rgba(0,0,0,.16)}
.v16-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v16-field{margin-bottom:14px}
.v16-field label{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:#fff}
.v16-field label span{color:#ffb98f;font-size:12px;margin-left:4px}
.v16-field label em{color:#bec9d4;font-size:12px;font-style:normal;margin-left:4px;font-weight:400}
.v16-field input,.v16-field select,.v16-field textarea{width:100%;min-height:50px;border:1px solid #7e8b98;border-radius:8px;background:#fff;color:#17202b;padding:11px 12px;font:inherit;font-size:16px}
.v16-field textarea{min-height:132px;resize:vertical}
.v16-field input:focus,.v16-field select:focus,.v16-field textarea:focus{outline:3px solid rgba(255,185,143,.34);border-color:#ffb98f}
.v16-submit{width:100%;margin-top:10px}
.v16-contact .form-status{color:#fff;margin:10px 0 0;font-size:14px}.v16-contact .form-status.is-error{color:#ffd0bf}.v16-contact .form-status.is-success{color:#bcebc9}
.v16-contact .local-review-note{font-size:13px;color:#d8e0e7}
.v16-footer{background:#101b29;color:#d4dce4;padding:30px 0}
.v16-footer-inner{display:grid;grid-template-columns:1fr auto;gap:16px 30px;align-items:start}
.v16-footer p{margin:0}.v16-footer span{font-size:13px;color:#95a3b0}
.v16-footer nav{display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:flex-end;font-size:13px}.v16-footer nav a{text-decoration:none}.v16-footer nav a:hover{text-decoration:underline}
.v16-footer small{grid-column:1/-1;color:#7f8b96}

/* sub pages */
.v16-subhero{padding:62px 0 52px;background:linear-gradient(135deg,#fbfaf6,#f0ede5)}
.v16-subhero h1{margin:0 0 18px;font-size:clamp(34px,5vw,56px);line-height:1.25}
.v16-subhero p:not(.v16-kicker){max-width:760px;margin:0;color:#46515c;font-size:17px}
.v16-works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.v16-work-card{background:#fff;border:1px solid rgba(23,32,43,.08);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(20,38,58,.06)}
.v16-work-card>a{display:block;background:#eef0f1}.v16-work-card img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.v16-work-card>div{padding:18px}.v16-work-card h2{font-family:inherit;font-size:19px;margin:0 0 6px}.v16-work-card p{margin:0;color:#58616b;font-size:14px}
.v16-page-cta{margin-top:42px;padding:30px;background:var(--v16-navy);color:#fff;border-radius:14px;text-align:center}.v16-page-cta h2{font-size:26px;margin:0 0 18px;color:#fff}
.v16-detail-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.v16-detail-service-grid.two{grid-template-columns:repeat(2,1fr)}
.v16-detail-service-grid article{background:#fff;border:1px solid rgba(23,32,43,.08);border-radius:14px;padding:24px}.v16-detail-service-grid h2{font-family:inherit;font-size:20px;margin:0 0 8px}.v16-detail-service-grid p{font-size:14px;color:#56606a}.v16-detail-service-grid ul{padding-left:20px;color:#56606a;font-size:14px}
.v16-detail-price{font-size:30px!important;font-weight:700;color:var(--v16-navy)!important;margin:0 0 12px!important}.v16-detail-price small{font-size:12px;color:#68727c}
.v16-subscription-wide{margin-top:24px}
.v16-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.v16-plan-grid article{background:#fff;border:1px solid rgba(23,32,43,.1);border-radius:14px;padding:24px}.v16-plan-grid article.is-featured{border:2px solid var(--v16-accent)}.v16-plan-grid h3{margin:0 0 12px}.v16-plan-grid strong{display:block;font-size:28px;color:var(--v16-navy)}.v16-plan-grid p{font-weight:700;margin:6px 0}.v16-plan-grid span{display:block;font-size:14px;color:#5f6872}
.v16-faq{border-top:1px solid var(--v16-line)}.v16-faq details{border-bottom:1px solid var(--v16-line);padding:0}.v16-faq summary{cursor:pointer;padding:18px 2px;font-weight:700}.v16-faq p{margin:0;padding:0 2px 18px;color:#56606a}
.v16-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.v16-values-grid article{background:#fff;border:1px solid rgba(23,32,43,.08);border-radius:14px;padding:24px}.v16-values-grid span{color:var(--v16-accent);font-size:13px;font-weight:700}.v16-values-grid h2{font-family:inherit;font-size:21px;margin:10px 0 8px}.v16-values-grid p{margin:0;color:#59636d;font-size:14px}
.v16-about-person{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:start}.v16-about-person h2{margin:0 0 10px}.v16-about-person p{max-width:700px;color:#4e5964}.v16-about-note{background:#fff;border:1px solid rgba(23,32,43,.09);border-radius:14px;padding:22px;display:grid;gap:8px}.v16-about-note span{font-size:14px;color:#5f6872}
.v16-copy-block{max-width:760px}.v16-copy-block p{color:#4f5963}

@media (max-width: 820px){
  .v16-wrap{width:min(100% - 40px,720px)}
  .v16-header-inner{min-height:56px}
  .v16-nav-toggle{display:block;margin-left:auto}
  .v16-nav{position:absolute;top:56px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:#fbfaf6;border-bottom:1px solid var(--v16-line);padding:8px 20px 16px;box-shadow:0 12px 28px rgba(20,38,58,.08)}
  .v16-nav.is-open{display:flex}.v16-nav a{padding:12px 4px}.v16-nav-cta{margin-top:6px;padding:0 16px!important;min-height:46px}
  .v16-hero{padding:36px 0 48px}.v16-hero-grid{grid-template-columns:1fr;gap:30px}.v16-hero h1{font-size:32px}.v16-hero-lead{font-size:16px;margin:18px 0 22px}.v16-hero-copy .v16-btn{width:100%;min-width:0}.v16-device-combo{max-width:560px;padding-right:30px}
  .v16-section{padding:56px 0}.v16-section-head h2{font-size:29px}.v16-before-after{grid-template-columns:minmax(88px,.48fr) 30px minmax(0,1fr);gap:10px;align-items:center}.v16-sample-panel{padding:16px}.v16-source-sheet{width:100%;max-width:126px;margin-inline:auto;padding:10px 8px}.v16-source-sheet .doc-brand{font-size:8px}.v16-source-sheet h3{font-size:11px;margin-bottom:6px}.v16-source-sheet h4{font-size:8px;margin:7px 0 2px}.v16-source-sheet p,.v16-source-sheet li{font-size:6px;line-height:1.45}.v16-source-sheet .doc-grid{gap:3px;margin-top:8px}.v16-source-sheet .doc-grid span{font-size:5px;padding:3px 1px}.v16-source-sheet .doc-footer{font-size:5px;margin-top:8px;padding-top:4px}.source-flyer h3{font-size:12px;padding:9px 7px 0}.source-flyer .flyer-band{font-size:6px;padding:6px 7px}.source-flyer .flyer-lead{font-size:6px;padding:4px 7px 6px}.source-flyer .flyer-points{gap:2px;padding:0 5px}.source-flyer .flyer-points span{font-size:5px;padding:4px 1px}.source-flyer .flyer-call{font-size:6px;margin:8px 5px 0;padding:5px}.v16-transform-arrow{font-size:18px}.v16-transform-arrow span{font-size:8px}.v16-after-wrap{width:100%}.v16-sample-screen{border-width:4px}.v16-ba-label{font-size:10px;margin-bottom:5px}.v16-sample-title{font-size:12px;margin-top:7px}.v16-after-wrap .v16-text-link{font-size:11px;margin-top:2px}
  .v16-flow-list{grid-template-columns:1fr;gap:0;margin-top:20px;border-left:2px solid #d9d3c8;margin-left:16px}.v16-flow-list li{min-height:0;border:0;border-radius:0;background:transparent;padding:0 0 22px 26px}.v16-flow-list li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--v16-accent);box-shadow:0 0 0 4px var(--v16-bg)}.v16-flow-num{margin-bottom:2px}.v16-flow-list h3{font-size:17px;margin-bottom:2px}.v16-flow-list p{font-size:14px}
  .v16-price-list{grid-template-columns:1fr;gap:0;border-top:1px solid var(--v16-line)}.v16-price-list article{border:0;border-bottom:1px solid var(--v16-line);border-radius:0;background:transparent;padding:18px 2px}.v16-price-list p{margin-bottom:6px}.v16-price-list strong{font-size:28px}
  .v16-contact{padding:56px 0}.v16-contact-grid{grid-template-columns:1fr;gap:28px}.v16-contact h2{font-size:29px}.v16-contact-form{padding:18px}.v16-form-row{grid-template-columns:1fr;gap:0}
  .v16-footer-inner{grid-template-columns:1fr}.v16-footer nav{justify-content:flex-start;gap:10px 18px}.v16-footer small{grid-column:1}
  .v16-works-grid,.v16-detail-service-grid,.v16-detail-service-grid.two,.v16-plan-grid,.v16-values-grid,.v16-about-person{grid-template-columns:1fr}
  .v16-subhero{padding:46px 0 40px}.v16-subhero h1{font-size:34px}.v16-subhero p:not(.v16-kicker){font-size:16px}
}
@media (max-width: 420px){
  .v16-wrap{width:calc(100% - 40px)}
  .v16-brand{font-size:14px}.v16-hero h1{font-size:31px}.v16-sample-tabs{gap:6px}.v16-sample-tabs button{font-size:13px;padding:7px 5px}.v16-source-sheet{width:155px}.v16-no-materials,.v16-period,.v16-subscription-note{padding:14px 15px}.v16-contact-form{padding:16px}.v16-page-cta{padding:24px 18px}
}

/* ============================================================
   V17 LP refinement
   - Keep the original portfolio's restrained blueprint / paper tone
   - Mobile-first readability and semantic line breaks
   - Short LP structure without reducing visual quality
   ============================================================ */

.v17-site {
  background: var(--paper);
}

.v17-site .v17-phrase {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  line-break: strict;
}

.v17-site .v17-heading-line,
.v17-site .v17-title-line,
.v17-site .v17-copy-line {
  display: block;
}

/* Header: preserve the original brand treatment, add a persistent mobile CTA */
.v17-header-mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.v17-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.v17-header-cta:hover,
.v17-header-cta:focus-visible {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Hero: keep V13's original visual language but simplify the sales message */
.v17-hero .hero-inner {
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
}
.v17-hero-title {
  font-family: var(--font-body);
  font-size: clamp(2.15rem, 3.9vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.055em;
  text-wrap: initial;
}
.v17-hero-title .v17-title-accent {
  color: var(--ink);
  margin-top: 0.06em;
}
.v17-hero-desc {
  max-width: 39ch;
  margin-top: 24px;
  font-size: 1.04rem;
  line-height: 1.85;
}
.v17-hero-desc strong {
  color: var(--ink);
  font-weight: 700;
}
.v17-hero-actions {
  margin-top: 24px;
  max-width: 360px;
}
.v17-primary-cta {
  width: 100%;
  min-height: 54px;
  font-weight: 700;
}
.v17-free-note {
  margin: 10px 0 0;
  max-width: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
}
.v17-hero .hero-sample-note {
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* Shared section headings */
.v17-section-head {
  max-width: 760px;
  margin-bottom: 30px;
}
.v17-heading {
  margin-bottom: 14px;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  line-height: 1.42;
  text-wrap: initial;
}
.v17-section-copy {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
}
.v17-section-copy strong { color: var(--ink); }

/* Sample tabs: not pill-like; use the site's straight, technical line language */
.v17-sample-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 720px;
  margin: 0 0 18px;
}
.v17-sample-tabs button {
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}
.v17-sample-tabs button:hover { color: var(--ink); border-top-color: var(--sage); }
.v17-sample-tabs button[aria-selected="true"] {
  background: var(--white);
  color: var(--ink);
  border-top-color: var(--accent);
  box-shadow: 0 8px 20px rgba(30,42,56,.05);
}

.v17-sample-panel {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(30,42,56,.04);
}
.v17-before-after {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) 110px minmax(0, 1.35fr);
  gap: 30px;
  align-items: center;
}
.v17-source-wrap,
.v17-after-wrap { min-width: 0; }
.v17-ba-label {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Source documents are intentionally ordinary, but should still look complete */
.v17-source-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 210 / 297;
  min-height: 430px;
  padding: 28px 24px;
  overflow: hidden;
  border: 1px solid #cbc5b8;
  background: #fff;
  color: #293441;
  box-shadow: 0 12px 28px rgba(30,42,56,.08);
}
.v17-doc-brand {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.v17-doc-rule {
  width: 40%;
  height: 3px;
  margin: 9px 0 20px;
  background: #8094a3;
}
.v17-source-sheet h3 {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.45;
}
.v17-source-sheet h4 {
  margin: 0 0 5px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
}
.v17-source-sheet p,
.v17-source-sheet li,
.v17-source-sheet dt,
.v17-source-sheet dd {
  font-size: 0.74rem;
  line-height: 1.65;
}
.v17-doc-lead { margin: 0 0 16px; }
.v17-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.v17-doc-grid span {
  padding: 8px 4px;
  border: 1px solid #cbd4da;
  background: #f4f7f8;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
}
.v17-doc-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #ddd7cc;
}
.v17-doc-section p,
.v17-doc-section ul { margin: 0; }
.v17-doc-section ul { padding-left: 1.15em; list-style: disc; }
.v17-doc-section dl { margin: 0; }
.v17-doc-section dl > div {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted #ddd7cc;
}
.v17-doc-section dt { font-weight: 700; }
.v17-doc-section dd { margin: 0; }
.v17-doc-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #d8d3ca;
  color: #65717c;
  font-size: 0.7rem;
}
.source-flyer {
  background: #fffdf8;
}
.v17-flyer-band {
  margin: -28px -24px 18px;
  padding: 11px 18px;
  background: #1f2a32;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.source-flyer > h3 {
  color: #20262b;
  font-size: 1.25rem;
}
.v17-flyer-lead { margin-bottom: 18px; }
.v17-flyer-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.v17-flyer-points span {
  padding: 8px 3px;
  background: #f1e7dd;
  color: #5c3a2b;
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
}
.v17-flyer-call {
  margin-top: auto;
  padding: 12px 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.v17-transform {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent);
  text-align: center;
}
.v17-transform span {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 700;
}
.v17-transform b {
  font-size: 2rem;
  line-height: 1;
  font-family: var(--font-body);
}
.v17-after-device-combo {
  position: relative;
  padding: 8px 42px 34px 0;
}
.v17-after-browser,
.v17-after-browser-single {
  overflow: hidden;
  border: 8px solid #29333d;
  border-top-width: 24px;
  border-radius: 8px 8px 4px 4px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(30,42,56,.14);
}
.v17-after-browser img,
.v17-after-browser-single img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
}
.v17-after-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26%;
  min-width: 86px;
  padding: 5px;
  border-radius: 18px;
  background: #1d2227;
  box-shadow: 0 14px 28px rgba(30,42,56,.22);
}
.v17-after-phone img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 18.8;
  object-fit: cover;
  object-position: top center;
  border-radius: 13px;
  background: #fff;
}
.v17-sample-title {
  margin: 14px 0 2px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}
.v17-text-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 4px;
}
.v17-text-link:hover { color: var(--accent-deep); }
.v17-no-materials,
.v17-subscription-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  align-items: baseline;
  margin-top: 20px;
  padding: 17px 20px;
  border-left: 3px solid var(--sage);
  background: rgba(255,255,255,.62);
}
.v17-no-materials strong,
.v17-subscription-note strong {
  color: var(--ink);
  font-size: 0.94rem;
}
.v17-no-materials span,
.v17-subscription-note span {
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.v17-section-links {
  margin-top: 20px;
  text-align: right;
}
.v17-disclaimer {
  margin: 12px 0 0;
  max-width: none;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

/* Flow: line-based, not generic cards */
.v17-flow-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.v17-flow-list li {
  position: relative;
  min-width: 0;
}
.v17-flow-list li::before {
  content: "";
  position: absolute;
  top: -31px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.v17-flow-num {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
}
.v17-flow-list h3 {
  margin: 0 0 7px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
}
.v17-flow-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.72;
}
.v17-period {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 24px;
  align-items: center;
  margin-top: 38px;
  padding: 24px 28px;
  border-left: 4px solid var(--accent);
  background: var(--paper-alt);
}
.v17-period p { margin: 0; max-width: none; }
.v17-period-main {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}
.v17-period-main span { display: inline; }
.v17-period-main strong {
  display: inline-block;
  margin: 0 .18em;
  color: var(--accent-deep);
  font-family: var(--font-head);
  font-size: 1.55rem;
  line-height: 1.2;
}
.v17-period > p:last-child {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* Pricing: restore the restrained original-card aesthetic */
.v17-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.v17-price-card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--sage);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(30,42,56,.035);
}
.v17-price-data { border-top-color: var(--accent); }
.v17-price-publish { border-top-color: var(--ink); }
.v17-price-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 0.78rem;
  font-weight: 700;
}
.v17-price-data .v17-price-tag { background: var(--accent-soft); color: var(--accent-deep); }
.v17-price-publish .v17-price-tag { background: var(--paper-alt); color: var(--ink-soft); }
.v17-price-card h3 {
  min-height: 3.3em;
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}
.v17-price-card strong {
  display: inline-block;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1.72rem;
  line-height: 1.2;
}
.v17-price-card small {
  margin-left: 5px;
  color: var(--ink-soft);
  font-size: 0.76rem;
}
.v17-subscription-note {
  border-left-color: var(--accent);
  background: #fbf4ed;
}

/* Contact: keep the original dark, credible finish but make the form lighter */
.v17-contact {
  padding: 78px 0;
}
.v17-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: start;
}
.v17-contact-kicker {
  margin: 0 0 14px;
  color: #efad8e !important;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.v17-contact-heading {
  margin: 0 0 24px;
  color: var(--white);
  font-size: clamp(1.72rem, 3.2vw, 2.35rem);
  line-height: 1.48;
  text-wrap: initial;
}
.v17-contact-copy > p:not(.v17-contact-kicker) {
  color: rgba(247,245,240,.8);
  font-size: 0.96rem;
  line-height: 1.82;
}
.v17-contact-copy strong { color: var(--white); }
.v17-contact-person {
  display: grid;
  gap: 2px;
  margin-top: 24px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(247,245,240,.18);
}
.v17-contact-person span {
  color: rgba(247,245,240,.74);
  font-size: 0.9rem;
}
.v17-contact-form {
  margin-top: 0;
  padding: 24px;
  background: rgba(247,245,240,.045);
}
.v17-form-grid {
  gap: 14px 18px;
}
.v17-contact-form .form-field label {
  font-size: 0.9rem;
}
.v17-contact-form .form-field input,
.v17-contact-form .form-field select,
.v17-contact-form .form-field textarea {
  min-height: 50px;
  font-size: 1rem;
}
.v17-contact-form .form-field textarea {
  min-height: 132px;
}
.v17-form-verification {
  margin-top: 12px;
  min-height: 0;
}
.v17-submit {
  margin-top: 12px;
  min-height: 54px;
  font-weight: 700;
}
.v17-contact-form .local-review-note,
.v17-contact-form .form-status {
  font-size: 0.86rem;
}

@media (max-width: 1050px) {
  .v17-hero .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  }
  .v17-hero-title { font-size: clamp(2rem, 3.8vw, 2.55rem); }
  .v17-before-after {
    grid-template-columns: minmax(230px, .75fr) 88px minmax(0, 1.25fr);
    gap: 22px;
  }
  .v17-source-sheet { min-height: 400px; padding: 24px 20px; }
}

@media (max-width: 860px) {
  .v17-hero .hero-inner { grid-template-columns: 1fr; }
  .v17-hero .hero-text { max-width: 680px; }
  .v17-hero .hero-visual { width: min(100%, 650px); }
  .v17-flow-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .v17-price-grid { grid-template-columns: 1fr; }
  .v17-price-card h3 { min-height: 0; }
  .v17-contact-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 800px) {
  .v17-header-mobile-actions { display: flex; }
  .v17-header .nav-toggle { display: flex; }
  .v17-header .site-nav { top: 72px; }
  .v17-header .site-nav .nav-cta { display: none; }
}

@media (max-width: 720px) {
  .v17-site { padding-bottom: 0; }
  .v17-site .wrap { padding-left: 20px; padding-right: 20px; }
  .v17-site .section { padding: 58px 0; }

  .v17-header .header-inner { height: 64px; }
  .v17-header .site-nav { top: 64px; }
  .v17-header .brand { font-size: 0.94rem; }
  .v17-header-mobile-actions { gap: 6px; }
  .v17-header-cta { min-height: 40px; padding-inline: 13px; font-size: 0.8rem; }
  .v17-header .nav-toggle { width: 40px; height: 40px; }

  .v17-hero {
    padding: 42px 0 80px;
  }
  .v17-hero-title {
    font-size: 1.82rem;
    line-height: 1.2;
    letter-spacing: -0.045em;
  }
  .v17-hero-desc {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.8;
  }
  .v17-hero-desc .v17-copy-line {
    display: block;
  }
  .v17-hero-actions { max-width: none; margin-top: 20px; }
  .v17-free-note { font-size: 0.9rem; }
  .v17-hero .hero-device-stage { width: 100%; padding-right: 32px; }
  .v17-hero .hero-sample-note { font-size: 0.84rem; }

  .v17-section-head { margin-bottom: 24px; }
  .v17-heading {
    font-size: 1.58rem;
    line-height: 1.42;
  }
  .v17-section-copy { font-size: 1rem; }

  .v17-sample-tabs {
    gap: 5px;
    margin-bottom: 14px;
  }
  .v17-sample-tabs button {
    min-height: 52px;
    padding: 8px 6px;
    font-size: 0.82rem;
  }
  .v17-sample-panel { padding: 20px; }
  .v17-before-after {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .v17-ba-label {
    margin-bottom: 9px;
    font-size: 0.9rem;
  }
  .v17-source-sheet {
    width: 100%;
    max-width: 430px;
    min-height: 0;
    margin-inline: auto;
    padding: 24px 22px;
  }
  .v17-doc-brand { font-size: 0.9rem; }
  .v17-source-sheet h3 { font-size: 1rem; }
  .v17-source-sheet h4 { font-size: 0.8rem; }
  .v17-source-sheet p,
  .v17-source-sheet li,
  .v17-source-sheet dt,
  .v17-source-sheet dd { font-size: 0.76rem; }
  .v17-doc-grid span { font-size: 0.72rem; }
  .v17-doc-footer { font-size: 0.72rem; }
  .v17-flyer-band {
    margin: -24px -22px 18px;
    padding: 11px 18px;
    font-size: 0.78rem;
  }
  .v17-transform {
    gap: 3px;
    margin: -2px 0;
  }
  .v17-transform span { font-size: 0.9rem; }
  .v17-transform b { font-size: 1.7rem; }
  .v17-after-device-combo {
    padding: 6px 35px 30px 0;
  }
  .v17-after-browser,
  .v17-after-browser-single {
    border-width: 6px;
    border-top-width: 20px;
  }
  .v17-after-phone { width: 27%; min-width: 78px; }
  .v17-sample-title { font-size: 1rem; }
  .v17-text-link { font-size: 0.94rem; }
  .v17-no-materials,
  .v17-subscription-note {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 16px 16px;
  }
  .v17-no-materials strong,
  .v17-no-materials span,
  .v17-subscription-note strong,
  .v17-subscription-note span { font-size: 0.9rem; }
  .v17-disclaimer { font-size: 0.82rem; line-height: 1.7; }

  .v17-flow-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 24px 0 0 14px;
    padding: 0 0 0 26px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .v17-flow-list li {
    padding: 0 0 25px;
  }
  .v17-flow-list li:last-child { padding-bottom: 0; }
  .v17-flow-list li::before {
    top: 5px;
    left: -32px;
    border-color: var(--paper);
  }
  .v17-flow-num { font-size: 1rem; margin-bottom: 4px; }
  .v17-flow-list h3 { font-size: 1rem; margin-bottom: 4px; }
  .v17-flow-list p { font-size: 1rem; line-height: 1.7; }
  .v17-period {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 30px;
    padding: 20px 18px;
  }
  .v17-period-main { font-size: 1rem; }
  .v17-period-main strong { font-size: 1.5rem; }
  .v17-period > p:last-child { font-size: 0.9rem; line-height: 1.7; }

  .v17-price-grid { gap: 12px; }
  .v17-price-card { padding: 22px 20px; }
  .v17-price-card h3 { font-size: 1rem; }
  .v17-price-card strong { font-size: 1.62rem; }
  .v17-price-tag { font-size: 0.82rem; }

  .v17-contact { padding: 60px 0; }
  .v17-contact-heading {
    font-size: 1.62rem;
    line-height: 1.5;
  }
  .v17-contact-copy > p:not(.v17-contact-kicker) {
    font-size: 1rem;
    line-height: 1.8;
  }
  .v17-contact-person span { font-size: 0.9rem; }
  .v17-contact-form { padding: 20px 18px; }
  .v17-form-grid { grid-template-columns: 1fr; gap: 13px; }
  .v17-contact-form .form-field label { font-size: 0.9rem; }
  .v17-contact-form .required-label,
  .v17-contact-form .optional-label { font-size: 0.78rem; }
  .v17-form-verification { margin-top: 10px; }
  .v17-submit { margin-top: 10px; }
}

@media (max-width: 390px) {
  .v17-header .brand { font-size: 0.88rem; }
  .v17-header-cta { padding-inline: 11px; }
  .v17-hero-title { font-size: 1.72rem; }
  .v17-heading { font-size: 1.5rem; }
  .v17-sample-tabs button { font-size: 0.78rem; }
}

/* ============================================================
   V22 B-direction review
   - V17 is the design baseline.
   - Refresh only the LP hero + samples with a cleaner coastal blue/teal layer.
   - Keep real photos and existing portfolio sample imagery; no generated imagery.
   ============================================================ */
.v22-site {
  --v22-ink: #173047;
  --v22-teal: #0b8fa6;
  --v22-teal-deep: #08778d;
  --v22-sky: #eaf7fb;
  --v22-sky-strong: #d8f0f6;
  --v22-line: #c9e2e9;
  --v22-orange: #d85c2a;
  --v22-orange-deep: #bc4820;
}

/* LP header: V17 typography, clearer CTA and cleaner white surface. */
.v22-site .v17-header {
  background: rgba(255,255,255,.96);
  border-bottom-color: rgba(23,48,71,.10);
  backdrop-filter: saturate(140%) blur(10px);
}
.v22-site .v17-header .brand-mark {
  border-color: var(--v22-teal);
}
.v22-site .v17-header .site-nav a:not(.nav-cta) {
  color: #3f5365;
}
.v22-site .v17-header .site-nav a:not(.nav-cta):hover,
.v22-site .v17-header .site-nav a:not(.nav-cta):focus-visible {
  color: var(--v22-ink);
  border-color: var(--v22-teal);
}
.v22-site .v17-header .site-nav .nav-cta,
.v22-site .v17-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 20px;
  border: 1px solid var(--v22-orange);
  border-radius: 5px;
  background: var(--v22-orange);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 7px 18px rgba(216,92,42,.16);
}
.v22-site .v17-header .site-nav .nav-cta:hover,
.v22-site .v17-header .site-nav .nav-cta:focus-visible,
.v22-site .v17-header-cta:hover,
.v22-site .v17-header-cta:focus-visible {
  background: var(--v22-orange-deep);
  border-color: var(--v22-orange-deep);
}

/* Hero: actual Musashi-Kosugi photo + restrained white wash. */
.v22-hero {
  position: relative;
  padding: 66px 0 82px;
  background-image: url('../assets/hero/musashikosugi-towers.webp');
  background-size: cover;
  background-position: center 54%;
  border-bottom: 0;
  isolation: isolate;
}
.v22-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  border-radius: 0;
  opacity: 1;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.94) 31%,
      rgba(245,251,253,.82) 53%,
      rgba(232,247,251,.48) 100%);
}
.v22-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: 92px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(234,247,251,0) 0%, rgba(234,247,251,.92) 100%);
}
.v22-hero > .wrap {
  max-width: 1220px;
}
.v22-hero .hero-inner {
  grid-template-columns: minmax(0, .98fr) minmax(430px, 1.02fr);
  gap: clamp(42px, 5vw, 72px);
}
.v22-hero .hero-eyebrow {
  color: var(--v22-ink);
  font-size: .88rem;
  letter-spacing: .035em;
}
.v22-hero .hero-eyebrow::before {
  background: var(--v22-teal);
}
.v22-hero .v17-hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.35rem, 4vw, 3.35rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--v22-ink);
}
.v22-hero .v17-hero-title .v17-title-accent {
  color: var(--v22-teal-deep);
}
.v22-audience {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin: 23px 0 0;
  max-width: none;
  color: var(--v22-ink);
  font-size: .91rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.v22-audience span[aria-hidden="true"] {
  color: #91aab6;
  font-weight: 400;
}
.v22-hero .v17-hero-desc {
  max-width: 40ch;
  margin-top: 17px;
  color: #334c60;
  font-size: 1rem;
  line-height: 1.8;
}
.v22-hero .v17-hero-desc strong {
  color: var(--v22-ink);
}
.v22-hero .v17-hero-actions {
  max-width: 330px;
  margin-top: 22px;
}
.v22-hero .v17-primary-cta {
  border-color: var(--v22-orange);
  background: var(--v22-orange);
  box-shadow: 0 11px 24px rgba(216,92,42,.18);
}
.v22-hero .v17-primary-cta:hover,
.v22-hero .v17-primary-cta:focus-visible {
  border-color: var(--v22-orange-deep);
  background: var(--v22-orange-deep);
}
.v22-hero .v17-free-note {
  color: #3f5668;
  font-size: .9rem;
}
.v22-hero .hero-visual {
  padding-top: 30px;
}
.v22-hero .hero-visual::before {
  display: none;
}
.v22-hero .hero-device-stage {
  width: min(100%, 585px);
  padding-right: 46px;
}
.v22-hero .hero-laptop {
  box-shadow: 0 25px 54px rgba(21,52,73,.22);
}
.v22-hero .hero-phone {
  box-shadow: 0 20px 40px rgba(21,52,73,.24);
}

/* Samples: continue hero freshness, but return quickly to white for clarity. */
.v22-samples {
  position: relative;
  padding-top: 68px;
  background: linear-gradient(180deg, var(--v22-sky) 0%, #f7fcfd 26%, #fff 100%);
  border-bottom: 1px solid rgba(23,48,71,.09);
}
.v22-samples .wrap {
  max-width: 1160px;
}
.v22-samples .v17-section-head {
  max-width: 940px;
  margin-bottom: 24px;
}
.v22-samples .section-kicker {
  color: var(--v22-teal-deep);
}
.v22-samples .v17-heading {
  color: var(--v22-ink);
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 3vw, 2.45rem);
  font-weight: 600;
  line-height: 1.35;
}
.v22-samples .v17-section-copy {
  max-width: none;
  color: #3d5364;
  font-size: 1rem;
}
.v22-samples .v17-section-copy strong {
  color: var(--v22-ink);
}
@media (min-width: 900px) {
  .v22-samples .v17-section-copy {
    white-space: nowrap;
  }
}

.v22-samples .v17-sample-tabs {
  max-width: none;
  margin-bottom: 14px;
  gap: 10px;
}
.v22-samples .v17-sample-tabs button {
  min-height: 48px;
  border: 1px solid var(--v22-line);
  border-top-width: 1px;
  border-radius: 7px;
  background: rgba(255,255,255,.9);
  color: #3b5264;
  box-shadow: none;
}
.v22-samples .v17-sample-tabs button:hover {
  border-color: #8fcbd8;
  color: var(--v22-teal-deep);
}
.v22-samples .v17-sample-tabs button[aria-selected="true"] {
  border-color: var(--v22-teal);
  background: var(--v22-teal);
  color: #fff;
  box-shadow: 0 8px 20px rgba(11,143,166,.14);
}
.v22-samples .v17-sample-panel {
  padding: 32px;
  border-color: rgba(126,175,190,.34);
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 38px rgba(33,74,94,.07);
}
.v22-samples .v17-before-after {
  grid-template-columns: minmax(250px,.76fr) 84px minmax(0,1.42fr);
  gap: 26px;
}
.v22-samples .v17-ba-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e6f6fa;
  color: var(--v22-teal-deep);
  font-size: .82rem;
  font-weight: 700;
}
.v22-samples .v17-transform {
  color: var(--v22-teal-deep);
}
.v22-samples .v17-transform span {
  color: #4b6676;
  font-size: .82rem;
}
.v22-samples .v17-transform b {
  color: var(--v22-teal);
  font-size: 0;
}
.v22-samples .v17-transform b::before {
  content: "→";
  font-size: 2rem;
  line-height: 1;
}
.v22-samples .v17-after-browser,
.v22-samples .v17-after-browser-single {
  border-color: #203644;
  box-shadow: 0 16px 34px rgba(28,64,82,.13);
}
.v22-samples .v17-after-phone {
  box-shadow: 0 14px 28px rgba(28,64,82,.19);
}
.v22-samples .v17-sample-title {
  color: var(--v22-ink);
}
.v22-samples .v17-text-link {
  color: var(--v22-teal-deep);
  text-decoration-color: rgba(8,119,141,.38);
}
.v22-samples .v17-no-materials {
  border-color: var(--v22-line);
  background: rgba(234,247,251,.56);
}

/* Company-profile source sheet: styled to feel like the same company as sample B. */
.v22-company-profile {
  gap: 0;
  padding: 0;
  border-color: #c9dce3;
  background: #fff;
}
.v22-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 15px;
  border-top: 5px solid #0d5a84;
}
.v22-profile-head .v17-doc-brand {
  color: #0d4268;
}
.v22-profile-head > div > span {
  display: block;
  margin-top: 2px;
  color: #7b9aab;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.v22-profile-year {
  color: #8aa6b4;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.v22-profile-hero {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  min-height: 155px;
  background: #edf7fa;
}
.v22-profile-copy {
  padding: 21px 10px 18px 22px;
}
.v22-profile-copy h3 {
  margin: 0 0 9px;
  color: #0d4268;
  font-family: var(--font-head);
  font-size: .97rem;
  line-height: 1.48;
}
.v22-profile-copy p {
  margin: 0;
  color: #415e6f;
  font-size: .66rem;
  line-height: 1.6;
}
.v22-profile-hero img {
  width: 100%;
  height: 100%;
  min-height: 155px;
  object-fit: cover;
}
.v22-profile-services {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1px;
  margin: 16px 18px;
  background: #d9e9ef;
  border: 1px solid #d9e9ef;
}
.v22-profile-services > div {
  padding: 9px 10px;
  background: #f8fbfc;
}
.v22-profile-services strong,
.v22-profile-services span {
  display: block;
}
.v22-profile-services strong {
  color: #174b69;
  font-size: .68rem;
}
.v22-profile-services span {
  margin-top: 2px;
  color: #607785;
  font-size: .56rem;
}
.v22-profile-foot {
  display: grid;
  grid-template-columns: 1fr 82px;
  align-items: stretch;
  gap: 0;
  margin-top: auto;
  border-top: 1px solid #d9e9ef;
}
.v22-profile-foot > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 18px;
}
.v22-profile-foot b,
.v22-profile-foot span { display: block; }
.v22-profile-foot b { color:#174b69; font-size:.65rem; }
.v22-profile-foot span { color:#607785; font-size:.56rem; margin-top:2px; }
.v22-profile-foot img {
  width: 82px;
  height: 74px;
  object-fit: cover;
}

@media (max-width: 1050px) {
  .v22-hero .hero-inner {
    grid-template-columns: minmax(0,1fr) minmax(390px,.92fr);
    gap: 34px;
  }
  .v22-hero .v17-hero-title {
    font-size: clamp(2.15rem,3.8vw,2.85rem);
  }
  .v22-samples .v17-before-after {
    grid-template-columns: minmax(230px,.74fr) 72px minmax(0,1.3fr);
    gap: 20px;
  }
}

@media (max-width: 860px) {
  .v22-hero {
    background-position: 62% center;
  }
  .v22-hero::before {
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 46%, rgba(239,249,252,.75) 100%);
  }
  .v22-hero .hero-inner {
    grid-template-columns: 1fr;
  }
  .v22-hero .hero-text {
    max-width: 650px;
  }
  .v22-hero .hero-visual {
    width: min(100%,620px);
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  .v22-hero {
    padding: 38px 0 60px;
    background-position: 69% center;
  }
  .v22-hero::before {
    background: linear-gradient(180deg, rgba(255,255,255,.965) 0%, rgba(255,255,255,.93) 50%, rgba(236,248,251,.83) 100%);
  }
  .v22-hero::after { height: 62px; }
  .v22-hero .hero-eyebrow {
    margin-bottom: 15px;
    font-size: .82rem;
  }
  .v22-hero .v17-hero-title {
    font-size: 2rem;
    line-height: 1.22;
    letter-spacing: -.025em;
  }
  .v22-audience {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 18px;
    font-size: .88rem;
  }
  .v22-audience span[aria-hidden="true"] { display:none; }
  .v22-hero .v17-hero-desc {
    margin-top: 14px;
    max-width: none;
    font-size: .96rem;
  }
  .v22-hero .v17-hero-actions {
    max-width: none;
    margin-top: 18px;
  }
  .v22-hero .hero-visual { padding-top: 22px; }
  .v22-hero .hero-device-stage { padding-right: 30px; }

  .v22-samples {
    padding-top: 54px;
  }
  .v22-samples .v17-section-head {
    margin-bottom: 20px;
  }
  .v22-samples .v17-heading {
    font-size: 1.65rem;
  }
  .v22-samples .v17-sample-tabs {
    gap: 5px;
  }
  .v22-samples .v17-sample-tabs button {
    min-height: 50px;
    padding-inline: 5px;
    font-size: .8rem;
  }
  .v22-samples .v17-sample-panel {
    padding: 18px;
  }
  .v22-samples .v17-before-after {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .v22-samples .v17-transform {
    margin: -1px 0;
  }
  .v22-samples .v17-transform b::before {
    content: "↓";
    font-size: 1.7rem;
  }
  .v22-samples .v17-transform span {
    font-size: .88rem;
  }
  .v22-company-profile {
    max-width: 430px;
    margin-inline: auto;
  }
  .v22-profile-head { padding: 20px 20px 14px; }
  .v22-profile-hero { min-height: 170px; }
  .v22-profile-hero img { min-height: 170px; }
  .v22-profile-copy { padding: 22px 9px 18px 20px; }
  .v22-profile-copy h3 { font-size: 1rem; }
  .v22-profile-copy p { font-size: .68rem; }
  .v22-profile-services { margin: 16px; }
  .v22-profile-services strong { font-size: .7rem; }
  .v22-profile-services span { font-size: .58rem; }
}

@media (max-width: 430px) {
  .v22-site .v17-header .brand { font-size: .92rem; }
  .v22-site .v17-header-cta { padding-inline: 11px; font-size: .78rem; }
  .v22-hero .v17-hero-title { font-size: 1.88rem; }
  .v22-hero .v17-phrase { white-space: normal; }
  .v22-hero .v17-title-line .v17-phrase { white-space: nowrap; }
  .v22-samples .v17-heading .v17-phrase { white-space: nowrap; }
  .v22-samples .v17-section-copy { font-size: .96rem; }
  .v22-profile-hero { grid-template-columns: 1fr .92fr; }
  .v22-profile-copy { padding-left: 17px; }
  .v22-profile-copy h3 { font-size: .9rem; }
}

/* ============================================================
   V23 focused refinement
   - V22 layout baseline with clearer reassurance and sample documents
   - Hero audience reduced to two compact icon labels
   - Source documents communicate "type / tone / photos" rather than readable copy
   - Flow/pricing/contact keep V17 color language
   ============================================================ */
.v23-site {
  --v23-teal: #0b8fa6;
  --v23-teal-deep: #08778d;
  --v23-teal-soft: #e8f7fa;
  --v23-navy: #173047;
  --v23-line: #c9e2e9;
}

.v23-site .v23-highlight {
  color: var(--v23-teal-deep);
  font-weight: 700;
}

/* Hero: compact intent icons, no extra pill UI. */
.v23-site .v23-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 22px;
}
.v23-site .v23-audience-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--v23-navy);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.v23-site .v23-audience-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(11,143,166,.25);
  border-radius: 50%;
  background: rgba(232,247,250,.9);
  color: var(--v23-teal-deep);
}
.v23-site .v23-audience-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v23-site .v22-hero .v17-hero-desc strong {
  color: var(--v23-navy);
}
.v23-site .v22-hero .v17-free-note {
  color: #3b5365;
  font-weight: 600;
}

/* Keep the full device body visible, including the laptop base. */
.v23-site .v22-hero .hero-visual {
  overflow: visible;
  padding-top: 24px;
  padding-bottom: 22px;
}
.v23-site .v22-hero .hero-device-stage {
  padding: 10px 48px 72px 0;
  overflow: visible;
}
.v23-site .v22-hero .hero-laptop-base {
  bottom: -14px;
  height: 15px;
}

/* Sample intro: highlighted phrase should read as a promise, not a footnote. */
.v23-site .v22-samples .v17-section-copy strong {
  color: var(--v23-teal-deep);
}
.v23-site .v22-samples .v17-transform {
  min-width: 84px;
  overflow: visible;
}
.v23-site .v22-samples .v17-transform span {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.4;
}

/* Source documents: visual density matters more than legible copy at this scale. */
.v23-site .v23-source-doc {
  position: relative;
  aspect-ratio: 210 / 297;
  min-height: 430px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #cbd7dc;
  box-shadow: 0 12px 28px rgba(30,42,56,.08);
}
.v23-site .v23-source-doc img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.v23-site .v23-doc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-top: 4px solid #0d6d90;
}
.v23-site .v23-doc-company,
.v23-site .v23-doc-sub { display: block; }
.v23-site .v23-doc-company {
  color: #17445f;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.v23-site .v23-doc-sub {
  margin-top: 2px;
  color: #80a0b0;
  font-size: .46rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.v23-site .v23-doc-chip {
  padding: 4px 7px;
  background: #e8f4f8;
  color: #0d6d90;
  font-size: .48rem;
  font-weight: 700;
  white-space: nowrap;
}
.v23-site .v23-doc-main-photo {
  height: 118px;
  overflow: hidden;
}
.v23-site .v23-doc-main-photo img { height: 100%; }
.v23-site .v23-doc-intro { padding: 14px 18px 10px; }
.v23-site .v23-doc-title-lines { display: grid; gap: 5px; margin-bottom: 9px; }
.v23-site .v23-doc-title-lines span {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: #17445f;
}
.v23-site .v23-doc-title-lines span:first-child { width: 78%; }
.v23-site .v23-doc-title-lines span:last-child { width: 58%; background: #0d6d90; }
.v23-site .v23-doc-text-lines { display: grid; gap: 4px; }
.v23-site .v23-doc-text-lines i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #cbd6db;
}
.v23-site .v23-doc-text-lines i:nth-child(2) { width: 92%; }
.v23-site .v23-doc-text-lines i:nth-child(3) { width: 86%; }
.v23-site .v23-doc-text-lines i:nth-child(4) { width: 68%; }
.v23-site .v23-doc-text-lines i:nth-child(5) { width: 78%; }
.v23-site .v23-doc-photo-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 4px;
  padding: 0 18px 12px;
}
.v23-site .v23-doc-photo-row img { height: 58px; }
.v23-site .v23-doc-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 18px 13px;
}
.v23-site .v23-doc-columns > div { min-width: 0; }
.v23-site .v23-doc-columns b {
  display: block;
  margin-bottom: 5px;
  color: #17445f;
  font-size: .52rem;
}
.v23-site .v23-doc-columns span,
.v23-site .v23-doc-footer-lines span {
  display: block;
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: #d5dde1;
}
.v23-site .v23-doc-columns span:nth-of-type(2) { width: 88%; }
.v23-site .v23-doc-columns span:nth-of-type(3) { width: 72%; }
.v23-site .v23-doc-footer-lines {
  margin-top: auto;
  padding: 10px 18px 15px;
  border-top: 1px solid #dce5e9;
}
.v23-site .v23-doc-footer-lines span:last-child { width: 62%; }

/* Word / Excel style source: intentionally practical, not polished brochure design. */
.v23-site .v23-word-doc { padding: 16px 18px 14px; }
.v23-site .v23-word-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #3d6f96;
  color: #294d69;
  font-size: .56rem;
  font-weight: 800;
}
.v23-site .v23-word-toolbar small { color: #758b9b; font-size: .46rem; }
.v23-site .v23-word-title {
  display: grid;
  gap: 6px;
  margin: 14px 0 11px;
}
.v23-site .v23-word-title span {
  display:block;
  width: 70%;
  height: 8px;
  border-radius: 2px;
  background:#2f5775;
}
.v23-site .v23-word-title span:last-child { width: 44%; background:#7899ad; }
.v23-site .v23-word-lead {
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 12px;
  align-items: start;
}
.v23-site .v23-word-lead img { height: 78px; }
.v23-site .v23-word-table {
  margin-top: 14px;
  border: 1px solid #b8c8d2;
}
.v23-site .v23-word-table > div {
  display:grid;
  grid-template-columns: 62px 1fr 1fr;
  min-height: 30px;
  border-bottom: 1px solid #cdd8de;
}
.v23-site .v23-word-table > div:last-child { border-bottom: 0; }
.v23-site .v23-word-table b {
  display:flex;
  align-items:center;
  padding: 6px;
  background:#edf3f7;
  color:#34576d;
  font-size:.46rem;
}
.v23-site .v23-word-table span {
  margin: 9px 7px;
  height: 3px;
  border-radius:2px;
  background:#cfd9de;
}
.v23-site .v23-word-gallery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:12px;
}
.v23-site .v23-word-gallery img { height:70px; }

/* Flyer style source: photo-first, with the same charcoal / orange mood as the web sample. */
.v23-site .v23-flyer-doc { background:#faf9f6; }
.v23-site .v23-flyer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:11px 14px;
  background:#25282d;
  color:#fff;
  font-size:.49rem;
  font-weight:800;
}
.v23-site .v23-flyer-top b {
  padding:3px 6px;
  background:#e0631a;
  font-size:.44rem;
}
.v23-site .v23-flyer-hero {
  position:relative;
  height:150px;
  overflow:hidden;
}
.v23-site .v23-flyer-hero img { height:100%; }
.v23-site .v23-flyer-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(22,24,28,.73) 100%);
}
.v23-site .v23-flyer-title {
  position:absolute;
  z-index:1;
  left:14px;
  right:14px;
  bottom:14px;
  display:grid;
  gap:5px;
}
.v23-site .v23-flyer-title span {
  display:block;
  width:78%;
  height:7px;
  border-radius:2px;
  background:#fff;
}
.v23-site .v23-flyer-title span:last-child { width:54%; background:#f59b65; }
.v23-site .v23-flyer-copy { display:grid; gap:4px; padding:14px 14px 10px; }
.v23-site .v23-flyer-copy span {
  height:3px;
  border-radius:2px;
  background:#bfc3c7;
}
.v23-site .v23-flyer-copy span:nth-child(2) { width:92%; }
.v23-site .v23-flyer-copy span:nth-child(3) { width:70%; }
.v23-site .v23-flyer-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:0 14px 10px;
}
.v23-site .v23-flyer-cards > div { background:#fff; border:1px solid #ddd8ce; }
.v23-site .v23-flyer-cards img { height:61px; }
.v23-site .v23-flyer-cards span {
  display:block;
  width:68%;
  height:4px;
  margin:7px 8px 9px;
  background:#7c8085;
}
.v23-site .v23-flyer-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding:10px 14px 13px;
  border-top:1px solid #ddd8ce;
  color:#3d4146;
  font-size:.48rem;
}
.v23-site .v23-flyer-footer span {
  width:45%;
  height:3px;
  background:#bfc3c7;
}
.v23-site .v23-flyer-footer b { font-size:.58rem; }

/* Reassurance, not a caution note. */
.v23-site .v23-reassurance {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  align-items:start;
  margin-top:24px;
  padding:20px 22px;
  border:1px solid #bfe2ea;
  border-left:4px solid var(--v23-teal);
  border-radius:9px;
  background:#f3fbfd;
}
.v23-site .v23-reassurance-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#dff4f8;
  color:var(--v23-teal-deep);
  font-size:1.15rem;
  font-weight:800;
}
.v23-site .v23-reassurance strong {
  display:block;
  margin-bottom:4px;
  color:var(--v23-navy);
  font-size:1rem;
}
.v23-site .v23-reassurance p {
  margin:0;
  color:#415b6b;
  font-size:.92rem;
  line-height:1.75;
}

/* Flow note: preserve meaningful phrase units, avoid single-character orphan wraps. */
.v23-site .v17-period {
  grid-template-columns:minmax(0,.85fr) minmax(430px,1.15fr);
}
.v23-site .v23-period-note {
  display:flex;
  flex-wrap:wrap;
  gap:2px .4em;
  align-items:baseline;
}
.v23-site .v23-period-note span {
  display:inline-block;
  white-space:nowrap;
}

@media (max-width: 1050px) {
  .v23-site .v17-period { grid-template-columns:1fr; gap:8px; }
}

@media (max-width: 720px) {
  .v23-site .v23-audience { gap:10px 20px; margin-top:17px; }
  .v23-site .v23-audience-item { font-size:.9rem; }
  .v23-site .v23-audience-icon { width:32px; height:32px; flex-basis:32px; }
  .v23-site .v22-hero .hero-device-stage { padding:8px 34px 66px 0; }

  .v23-site .v23-source-doc { min-height:0; width:min(100%,430px); margin-inline:auto; }
  .v23-site .v23-doc-main-photo { height:160px; }
  .v23-site .v23-doc-photo-row img { height:78px; }
  .v23-site .v23-word-lead { grid-template-columns:120px 1fr; }
  .v23-site .v23-word-lead img { height:100px; }
  .v23-site .v23-word-gallery img { height:92px; }
  .v23-site .v23-flyer-hero { height:190px; }
  .v23-site .v23-flyer-cards img { height:82px; }
  .v23-site .v23-reassurance { grid-template-columns:38px 1fr; padding:18px; }
  .v23-site .v23-reassurance p { font-size:.9rem; }
  .v23-site .v17-period { grid-template-columns:1fr; }
  .v23-site .v23-period-note { display:grid; gap:2px; }
  .v23-site .v23-period-note span { white-space:normal; }
}

@media (max-width: 430px) {
  .v23-site .v23-audience { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
  .v23-site .v23-audience-item { font-size:.84rem; }
  .v23-site .v23-audience-icon { width:30px; height:30px; flex-basis:30px; }
  .v23-site .v23-audience-icon svg { width:18px; height:18px; }
  .v23-site .v22-samples .v17-sample-tabs button { font-size:.74rem; }
}

@media (min-width: 721px) {
  .v23-site .v22-samples .v17-before-after {
    grid-template-columns: minmax(250px,.76fr) 118px minmax(0,1.42fr);
    gap: 24px;
  }
}
@media (min-width: 721px) and (max-width: 1050px) {
  .v23-site .v22-samples .v17-before-after {
    grid-template-columns: minmax(220px,.72fr) 108px minmax(0,1.28fr);
    gap: 18px;
  }
}
.v23-site .v22-hero .hero-laptop {
  padding: 10px;
}
.v23-site .v22-hero .hero-laptop-base {
  display:block;
  z-index:1;
  left:-20px;
  right:-20px;
  bottom:-17px;
  height:17px;
  background:linear-gradient(180deg,#d9dde0 0%,#aeb5ba 100%);
  border-top:1px solid rgba(32,38,43,.16);
  box-shadow:0 7px 10px rgba(30,42,56,.16);
}


/* ===== V24: concept 3 direction ===== */
.v24-site {
  --v24-teal:#0da8c7;
  --v24-teal-deep:#0b92b0;
  --v24-navy:#142544;
  --v24-orange:#f57d21;
  --v24-bg:#f6fbfd;
}
.v24-site .brand {
  font-family:'Shippori Mincho', serif;
  font-size:2rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--v24-navy);
  gap:12px;
}
.v24-site .brand-mark {
  width:14px;height:14px;flex:0 0 14px;display:inline-block;
  border:3px solid #1498c8; border-radius:1px; transform:rotate(45deg);
  background:transparent; margin-top:-2px;
  box-shadow:none;
}
.v24-site .site-header {
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(20,37,68,.08);
}
.v24-site .header-inner { min-height:84px; }
.v24-site .site-nav a { color:var(--v24-navy); font-weight:700; }
.v24-site .site-nav .nav-cta, .v24-site .v17-header-cta {
  background:var(--v24-orange); color:#fff; border-radius:14px; padding:14px 26px; box-shadow:none;
}
.v24-site .hero {
  position:relative; overflow:hidden; padding:56px 0 22px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 34%, rgba(255,255,255,.38) 57%, rgba(255,255,255,.08) 75%),
    url('../assets/hero/musashikosugi-towers.webp') center center/cover no-repeat;
}
.v24-site .hero::before { content:none; }
.v24-site .hero::after {
  content:""; position:absolute; left:-2%; right:-2%; bottom:-1px; height:110px;
  background:#f7fbfd; border-top-left-radius:55% 100%; border-top-right-radius:45% 100%;
}
.v24-site .hero-inner {
  position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 530px) 1fr; gap:32px; align-items:start;
  min-height:520px;
}
.v24-site .hero-text { padding-top:18px; }
.v24-site .hero-eyebrow { color:var(--v24-navy); font-weight:700; }
.v24-site .hero-title {
  margin-top:18px; font-family:'Shippori Mincho', serif; color:var(--v24-navy); line-height:1.02;
  font-size:clamp(3rem, 7vw, 5.2rem); letter-spacing:-0.03em;
}
.v24-site .hero-title .v17-title-accent { color:var(--v24-teal); }
.v24-site .v23-audience {
  display:flex; gap:30px; margin-top:26px; flex-wrap:wrap; align-items:flex-start;
}
.v24-site .v23-audience-item {
  display:flex; align-items:flex-start; gap:10px; color:var(--v24-navy); font-weight:800; font-size:1.06rem;
}
.v24-site .v23-audience-item::after { content:''; }
.v24-site .v23-audience-icon {
  width:28px; height:28px; flex:0 0 28px; color:var(--v24-teal); border:none; background:none; padding-top:2px;
}
.v24-site .v23-audience-icon svg { width:26px; height:26px; }
.v24-site .hero-desc {
  margin-top:24px; max-width:560px; font-size:1.42rem; line-height:1.65; color:var(--v24-navy);
}
.v24-site .hero-desc strong { font-weight:700; }
.v24-site .v23-highlight { color:var(--v24-teal-deep); }
.v24-site .v17-hero-actions { margin-top:24px; display:block; }
.v24-site .btn.v17-primary-cta {
  display:inline-flex; align-items:center; justify-content:center; min-width:360px; padding:22px 34px;
  border-radius:16px; background:var(--v24-orange); color:#fff; font-size:1.15rem; font-weight:800; box-shadow:0 14px 28px rgba(245,125,33,.24);
}
.v24-site .v17-free-note { margin-top:14px; color:var(--v24-navy); font-weight:500; font-size:1rem; }
.v24-site .hero-visual { display:none; }
.v24-site .section.section-alt {
  position:relative; margin-top:-1px; padding-top:34px; background:linear-gradient(180deg,#f7fbfd 0%, #eef8fb 100%);
  overflow:hidden;
}
.v24-site .section.section-alt::before,
.v24-site .section.section-alt::after {
  content:''; position:absolute; width:220px; aspect-ratio:1; border-radius:50%; background:rgba(64,197,233,.12); z-index:0;
}
.v24-site .section.section-alt::before { left:-90px; top:170px; }
.v24-site .section.section-alt::after { right:-80px; top:36px; }
.v24-site .section.section-alt > .wrap { position:relative; z-index:1; }
.v24-site .v17-section-head { max-width:100%; }
.v24-site .v17-heading { font-size:clamp(2.5rem,5vw,4.6rem); line-height:1.12; color:var(--v24-navy); }
.v24-site .v17-section-copy {
  color:var(--v24-navy); font-size:1.36rem; line-height:1.5; max-width:none; white-space:nowrap;
}
.v24-site .v17-sample-tabs { margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.v24-site .v17-sample-tabs button {
  min-height:66px; border:1px solid #cfe3ea; border-radius:0; background:#fff; color:var(--v24-navy); font-weight:700; font-size:1.05rem;
}
.v24-site .v17-sample-tabs button[aria-selected='true'] { background:var(--v24-teal); color:#fff; border-color:var(--v24-teal); }
.v24-site .v17-sample-panel {
  margin-top:12px; background:#fff; border:1px solid #dceaf0; border-radius:22px; padding:30px 34px 34px; box-shadow:0 18px 40px rgba(20,37,68,.07);
}
.v24-site .v17-before-after { grid-template-columns:minmax(0,.78fr) 120px minmax(0,1fr); gap:26px; align-items:center; }
.v24-site .v17-ba-label {
  display:inline-flex; padding:10px 18px; border-radius:999px; background:#e8f7fc; color:var(--v24-teal-deep); font-weight:700; margin-bottom:18px;
}
.v24-site .v17-source-sheet { border:1px solid #d9e6ec; border-radius:4px; box-shadow:none; }
.v24-site .v17-transform { align-self:center; justify-self:center; color:var(--v24-teal-deep); text-align:center; }
.v24-site .v17-transform span { display:block; font-size:1.05rem; font-weight:700; margin-bottom:10px; white-space:nowrap; }
.v24-site .v17-transform b { display:block; font-size:4rem; line-height:1; font-weight:400; }
.v24-site .v17-after-device-combo { max-width:580px; margin-left:auto; }
.v24-site .v17-after-browser { width:min(100%, 510px); margin-left:auto; }
.v24-site .v17-after-phone { right:-18px; bottom:-8px; width:124px; }
.v24-site .v17-sample-title { margin-top:18px; color:var(--v24-navy); font-size:1.65rem; font-weight:700; }
.v24-site .v17-text-link { color:var(--v24-teal-deep); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.v24-site .v23-reassurance {
  margin-top:18px; border:none; border-radius:999px; background:#e8f7fc; padding:18px 26px; grid-template-columns:36px 1fr; align-items:center;
}
.v24-site .v23-reassurance-icon { background:transparent; width:28px; height:28px; color:var(--v24-teal-deep); font-size:1.3rem; }
.v24-site .v23-reassurance strong { display:inline; margin-right:.6em; }
.v24-site .v23-reassurance p { display:inline; font-size:1rem; }
.v24-site .v17-disclaimer { margin-top:10px; }

/* mobile */
@media (max-width: 980px){
  .v24-site .hero { padding-top:34px; }
  .v24-site .hero-inner { grid-template-columns:1fr; min-height:auto; }
  .v24-site .hero::after { height:72px; }
}
@media (max-width: 720px){
  .v24-site .header-inner { min-height:74px; }
  .v24-site .brand { font-size:1.55rem; }
  .v24-site .hero {
    background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.80) 35%, rgba(255,255,255,.70) 100%), url('../assets/hero/musashikosugi-towers.webp') center center/cover no-repeat;
    padding:26px 0 18px;
  }
  .v24-site .hero-inner { gap:0; }
  .v24-site .hero-text { padding-top:8px; }
  .v24-site .hero-title { font-size:2.7rem; }
  .v24-site .v23-audience { gap:12px 22px; margin-top:18px; }
  .v24-site .v23-audience-item { font-size:1rem; }
  .v24-site .hero-desc { font-size:1.28rem; max-width:18em; }
  .v24-site .btn.v17-primary-cta { min-width:0; width:100%; max-width:360px; padding:19px 28px; }
  .v24-site .section.section-alt::before, .v24-site .section.section-alt::after { width:150px; }
  .v24-site .v17-heading { font-size:2.5rem; }
  .v24-site .v17-section-copy { white-space:normal; font-size:1.08rem; }
  .v24-site .v17-sample-tabs { grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .v24-site .v17-sample-tabs button { min-height:54px; font-size:.84rem; }
  .v24-site .v17-sample-panel { padding:18px 16px 22px; border-radius:18px; }
  .v24-site .v17-before-after { grid-template-columns:1fr; gap:18px; }
  .v24-site .v17-transform b { font-size:2.8rem; }
  .v24-site .v17-transform span { margin-bottom:4px; }
  .v24-site .v17-after-device-combo { max-width:none; }
  .v24-site .v17-after-browser { width:100%; }
  .v24-site .v17-after-phone { width:96px; right:-8px; }
  .v24-site .v23-reassurance { border-radius:18px; align-items:start; }
  .v24-site .v23-reassurance strong, .v24-site .v23-reassurance p { display:block; }
}


/* ===== V25: refine concept 3 after visual self-review ===== */
.v25-site {
  --v25-yellow:#f4d35e;
  --v25-navy:#142544;
  --v25-teal:#0da8c7;
  --v25-orange:#f57d21;
}
/* Marker-style emphasis: keep readable navy type, use yellow only as emphasis. */
.v25-site .v23-highlight {
  color:var(--v25-navy) !important;
  font-weight:800;
  padding:0 .04em .03em;
  background:linear-gradient(transparent 66%, rgba(244,211,94,.92) 66%, rgba(244,211,94,.92) 91%, transparent 91%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.v25-site .hero {
  padding-top:60px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 32%, rgba(255,255,255,.48) 54%, rgba(255,255,255,.12) 73%),
    url('../assets/hero/musashikosugi-towers.webp') center 47%/cover no-repeat;
}
.v25-site .hero::after { height:72px; }
.v25-site .hero-inner {
  grid-template-columns:minmax(0, 590px) 1fr;
  gap:46px;
  min-height:500px;
}
.v25-site .hero-title {
  max-width:590px;
  font-size:clamp(3rem, 5.2vw, 4.55rem);
  line-height:1.06;
  letter-spacing:-.025em;
}
.v25-site .v23-audience { margin-top:30px; gap:34px; }
.v25-site .v23-audience-icon { width:32px; height:32px; flex-basis:32px; }
.v25-site .v23-audience-icon svg { width:29px; height:29px; }
.v25-site .v23-audience-item { font-size:1.08rem; gap:11px; }
.v25-site .hero-desc {
  margin-top:30px;
  max-width:600px;
  font-size:1.32rem;
  line-height:1.72;
}
.v25-site .v17-hero-actions { margin-top:28px; }
.v25-site .btn.v17-primary-cta {
  min-width:350px;
  padding:18px 32px;
  border-radius:10px;
  font-size:1.12rem;
}
.v25-site .btn.v17-primary-cta::after { content:' →'; margin-left:.35em; }
.v25-site .v17-free-note {
  margin-top:15px;
  max-width:none;
  white-space:nowrap;
  line-height:1.5;
}
/* Shallower transition into samples. */
.v25-site .section.section-alt { padding-top:52px; }
.v25-site .section.section-alt::before,
.v25-site .section.section-alt::after {
  opacity:.42;
  width:270px;
  background:rgba(64,197,233,.10);
}
.v25-site .v17-section-head { margin-bottom:0; }
.v25-site .v25-samples-heading {
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:.22em;
  max-width:none;
  margin-top:10px;
  font-size:clamp(2.4rem, 4.1vw, 3.7rem);
  line-height:1.15;
  white-space:nowrap;
}
.v25-site .v25-samples-heading .v17-phrase { display:inline-block; }
.v25-site .v17-section-copy {
  margin-top:12px;
  font-size:1.23rem;
  white-space:nowrap;
}
.v25-site .v17-sample-tabs { margin-top:32px; gap:9px; }
.v25-site .v17-sample-tabs button {
  min-height:58px;
  border-radius:6px;
  font-size:1rem;
  white-space:nowrap;
}
.v25-site .v17-sample-tabs button[aria-selected='true'] {
  background:#11a9c3;
  border-color:#11a9c3;
}
.v25-site .v17-sample-panel { margin-top:12px; padding:32px 36px 36px; }
.v25-site .v17-before-after {
  grid-template-columns:minmax(260px,.78fr) 126px minmax(0,1.05fr);
  gap:28px;
}
.v25-site .v17-transform { min-width:126px; }
.v25-site .v17-transform span { font-size:1rem; line-height:1.45; }
.v25-site .v17-transform b { font-size:0 !important; }
.v25-site .v17-transform b::before {
  content:'→';
  display:block;
  color:var(--v25-teal);
  font-size:3.5rem;
  line-height:1;
  font-weight:400;
}
.v25-site .v17-after-device-combo { margin-top:0; }
.v25-site .v23-reassurance { margin-top:24px; }

@media (max-width: 980px) {
  .v25-site .hero-inner { grid-template-columns:1fr; min-height:0; }
}
@media (max-width: 720px) {
  .v25-site .hero {
    padding:30px 0 28px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.87) 32%, rgba(255,255,255,.72) 100%),
      url('../assets/hero/musashikosugi-towers.webp') 48% center/cover no-repeat;
  }
  .v25-site .hero::after { height:45px; }
  .v25-site .hero-title {
    max-width:100%;
    font-size:2.08rem;
    line-height:1.14;
    letter-spacing:-.035em;
    word-break:keep-all;
  }
  .v25-site .v17-title-line { width:100%; }
  .v25-site .v23-audience { margin-top:22px; gap:14px 24px; }
  .v25-site .v23-audience-item { font-size:.95rem; }
  .v25-site .v23-audience-icon { width:29px; height:29px; flex-basis:29px; }
  .v25-site .v23-audience-icon svg { width:26px; height:26px; }
  .v25-site .hero-desc {
    margin-top:25px;
    max-width:100%;
    font-size:1.08rem;
    line-height:1.72;
  }
  .v25-site .hero-desc .v17-copy-line { display:block; }
  .v25-site .v17-hero-actions { margin-top:24px; }
  .v25-site .btn.v17-primary-cta { width:100%; max-width:none; padding:17px 22px; }
  .v25-site .v17-free-note {
    white-space:normal;
    font-size:.91rem;
    max-width:100%;
    word-break:keep-all;
  }
  .v25-site .section.section-alt { padding-top:42px; }
  .v25-site .v25-samples-heading {
    display:block;
    margin-top:9px;
    font-size:2.02rem;
    line-height:1.22;
    white-space:normal;
    word-break:keep-all;
  }
  .v25-site .v25-samples-heading .v17-phrase { display:block; white-space:nowrap; }
  .v25-site .v17-section-copy { font-size:1rem; line-height:1.65; white-space:normal; }
  .v25-site .v17-sample-tabs { margin-top:24px; gap:5px; }
  .v25-site .v17-sample-tabs button {
    min-height:50px;
    padding:8px 4px;
    font-size:.69rem;
    letter-spacing:-.02em;
    white-space:nowrap;
  }
  .v25-site .v17-sample-panel { padding:18px 15px 22px; }
  .v25-site .v17-before-after { grid-template-columns:1fr; gap:20px; }
  .v25-site .v17-transform { min-width:0; }
  .v25-site .v17-transform b::before { content:'↓'; font-size:2.8rem; }
  .v25-site .v17-transform span { margin-bottom:6px; }
}


/* ============================================================
   V26 responsive polish
   - Keep V25 visual direction.
   - Fix header/tabs/mobile hero balance.
   - Make AFTER the visual priority.
   - Reassurance block is calm, not highlighted like a CTA.
   - Force all five flow steps, including 04, to remain visible.
   ============================================================ */
.v26-site .v17-header .header-inner {
  max-width: 1320px;
  min-height: 78px;
}
.v26-site .brand {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 1.34rem;
}
.v26-site .v17-header .site-nav {
  flex-wrap: nowrap;
  gap: 24px;
  margin-left: auto;
}
.v26-site .v17-header .site-nav a {
  white-space: nowrap;
  line-height: 1.2;
}
.v26-site .v17-header .site-nav .nav-cta {
  min-width: 132px;
  padding-inline: 22px;
}

/* More breathing room through the hero hierarchy. */
.v26-site .hero-title { margin-bottom: 0; }
.v26-site .v23-audience { margin-top: 34px; }
.v26-site .hero-desc { margin-top: 30px; }
.v26-site .v17-hero-actions { margin-top: 30px; }
.v26-site .v17-free-note { white-space: nowrap; max-width: none; }

/* AFTER is the hero of the sample comparison. */
@media (min-width: 721px) {
  .v26-site .v17-before-after {
    grid-template-columns: minmax(220px,.62fr) 132px minmax(520px,1.48fr);
    gap: 28px;
  }
  .v26-site .v17-source-wrap { max-width: 360px; justify-self: center; }
  .v26-site .v17-after-wrap { min-width: 0; }
  .v26-site .v17-after-device-combo { max-width: 650px; }
  .v26-site .v17-after-browser { width: min(100%, 570px); }
  .v26-site .v17-after-phone { width: 132px; }
}

/* Reassurance = confidence, not another highlighted sales phrase. */
.v26-site .v23-reassurance {
  background: #eef9fc;
  border: 1px solid #c9e7ef;
  border-radius: 14px;
  padding: 20px 24px;
}
.v26-site .v23-reassurance strong {
  color: var(--v25-navy);
  font-size: 1.08rem;
}
.v26-site .v23-reassurance p { color:#425d6e; }
.v26-site .v23-reassurance .v23-highlight {
  color: inherit !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.v26-site .v23-reassurance-icon {
  background:#fff;
  border:1px solid #b9dfe8;
}

/* Make flow robust: 01-05 must always render. */
.v26-site .v17-flow-list {
  grid-template-columns: repeat(5, minmax(0,1fr));
  grid-auto-flow: row;
  gap: 22px;
}
.v26-site .v17-flow-list > li {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-width:0;
}
.v26-site .v17-flow-list > li:nth-child(4) {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

@media (max-width: 1120px) and (min-width: 801px) {
  .v26-site .v17-header .header-inner { padding-inline: 18px; }
  .v26-site .brand { font-size: 1.16rem; }
  .v26-site .v17-header .site-nav { gap: 15px; }
  .v26-site .v17-header .site-nav a { font-size: .8rem; }
  .v26-site .v17-header .site-nav .nav-cta { min-width: 112px; padding-inline: 16px; }
}

@media (max-width: 860px) and (min-width: 721px) {
  .v26-site .v17-flow-list { grid-template-columns: repeat(5, minmax(0,1fr)); gap:14px; }
  .v26-site .v17-flow-list p { font-size:.84rem; }
}

@media (max-width: 800px) {
  .v26-site .v17-header .header-inner { min-height: 64px; }
  .v26-site .brand { font-size: .98rem; }
}

@media (max-width: 720px) {
  /* Let the real Musashi-Kosugi photo read on mobile while protecting text. */
  .v26-site .hero {
    padding: 36px 0 46px;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.80) 48%, rgba(244,250,252,.69) 100%),
      url('../assets/hero/musashikosugi-towers.webp');
    background-position: 58% center;
    background-size: cover;
  }
  .v26-site .hero-title { margin-top: 16px; }
  .v26-site .v23-audience { margin-top: 28px; }
  .v26-site .hero-desc { margin-top: 27px; }
  .v26-site .v17-hero-actions { margin-top: 28px; }
  .v26-site .v17-free-note {
    white-space: normal;
    max-width: 100%;
    line-height: 1.65;
  }

  /* Three tabs must fit on a 390px viewport. */
  .v26-site .v17-sample-tabs {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 4px;
  }
  .v26-site .v17-sample-tabs button {
    min-width: 0;
    min-height: 52px;
    padding: 8px 2px;
    font-size: .72rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  /* BEFORE is contextual; AFTER gets more space. */
  .v26-site .v17-source-wrap { width: 82%; max-width: 300px; justify-self:center; }
  .v26-site .v17-after-wrap { width:100%; }
  .v26-site .v17-after-device-combo { width:100%; max-width:360px; margin-inline:auto; }
  .v26-site .v17-after-phone { width:104px; }

  .v26-site .v23-reassurance {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 18px 16px;
    border-radius: 14px;
  }
  .v26-site .v23-reassurance strong { font-size:1rem; }
  .v26-site .v23-reassurance p { font-size:.92rem; line-height:1.7; }

  /* Vertical flow on phones; force all five items. */
  .v26-site .v17-flow-list {
    grid-template-columns:1fr;
    gap:0;
  }
}


/* V27: final mobile heading containment + minor mobile rhythm */
@media (max-width:720px){
  .v27-site .v25-samples-heading{
    font-size:1.76rem;
    line-height:1.27;
    max-width:100%;
    overflow:visible;
  }
  .v27-site .v25-samples-heading .v17-phrase{
    white-space:nowrap;
    max-width:100%;
  }
  .v27-site .v17-section-copy{font-size:.98rem;}
  .v27-site .v17-sample-tabs button{font-size:.70rem;}
}

/* ============================================================
   V28 typography / comparison / flow polish
   - Keep V27 direction, reduce visual inconsistency.
   - Typography roles: Mincho for brand + H1/H2, Zen Kaku for all UI/body.
   - Stable audience icons, aligned before/after visual heights.
   - Lighter, plausible service flyer.
   - Flow heading explicitly communicates listening to client intent.
   ============================================================ */
.v28-site {
  --v28-navy:#173047;
  --v28-teal:#0b8fa6;
  --v28-yellow:#f5d75d;
  --v28-body:'Zen Kaku Gothic New', sans-serif;
  --v28-display:'Shippori Mincho', serif;
}

/* Typography system */
.v28-site,
.v28-site button,
.v28-site input,
.v28-site select,
.v28-site textarea {
  font-family:var(--v28-body);
}
.v28-site .brand,
.v28-site .hero-title,
.v28-site .v17-heading,
.v28-site .v17-contact-heading {
  font-family:var(--v28-display);
  color:var(--v28-navy);
}
.v28-site .hero-title,
.v28-site .v17-heading { font-weight:600; letter-spacing:-.025em; }
.v28-site .hero-title {
  font-size:clamp(3.55rem,5.2vw,4.55rem);
  line-height:1.08;
}
.v28-site .hero-eyebrow {
  font-family:var(--v28-body);
  font-size:1.125rem;
  line-height:1.45;
  font-weight:700;
}
.v28-site .section-kicker,
.v28-site .v17-contact-kicker {
  font-family:var(--v28-body);
  font-size:1.05rem;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.04em;
}
.v28-site .v17-heading {
  font-size:clamp(2.7rem,3.8vw,3.25rem);
  line-height:1.24;
}
.v28-site .hero-desc,
.v28-site .v17-section-copy {
  font-family:var(--v28-body);
  font-size:1.16rem;
  line-height:1.78;
  font-weight:400;
  color:#314c60;
}
.v28-site .hero-desc strong,
.v28-site .v17-section-copy strong { font-family:var(--v28-body); font-weight:700; }

/* Stable, simple line icons: file+ and wrench. */
.v28-site .v23-audience {
  gap:34px;
  align-items:center;
}
.v28-site .v23-audience-item {
  align-items:center;
  gap:10px;
  font-family:var(--v28-body);
  font-size:1.02rem;
  line-height:1.35;
  font-weight:700;
}
.v28-site .v23-audience-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--v28-teal);
  overflow:visible;
}
.v28-site .v23-audience-icon svg {
  display:block;
  width:30px;
  height:30px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
}

/* Comparison: labels and both visual areas share the same visual height. */
@media (min-width:721px) {
  .v28-site .v17-before-after {
    grid-template-columns:minmax(250px,.68fr) 126px minmax(560px,1.48fr);
    gap:28px;
    align-items:start;
  }
  .v28-site .v17-source-wrap,
  .v28-site .v17-after-wrap {
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  .v28-site .v17-source-sheet {
    width:100%;
    height:420px;
    min-height:420px;
    aspect-ratio:auto;
  }
  .v28-site .v17-after-device-combo {
    width:100%;
    height:420px;
    max-width:none;
    margin:0;
    padding:26px 56px 30px 0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .v28-site .v17-after-browser {
    width:min(100%,610px);
    margin:0 auto;
  }
  .v28-site .v17-after-phone {
    width:130px;
    right:2px;
    bottom:20px;
  }
  .v28-site .v17-ba-label {
    min-height:31px;
    display:flex;
    align-items:center;
    margin-bottom:12px;
  }
}

/* One concise transform label. */
.v28-site .v17-transform span {
  font-family:var(--v28-body);
  font-size:.98rem;
  font-weight:700;
  color:#486276;
  white-space:nowrap;
}

/* Source document text is texture, not reading content. */
.v28-site .v23-source-doc { font-family:var(--v28-body); }
.v28-site .v23-doc-company,
.v28-site .v23-doc-columns b,
.v28-site .v23-word-toolbar,
.v28-site .v23-flyer-top,
.v28-site .v23-flyer-footer { font-family:var(--v28-body); }

/* Lighter, credible service flyer — no dark poster treatment. */
.v28-site .v23-flyer-doc {
  background:#fff;
  border-color:#cedce3;
}
.v28-site .v23-flyer-top {
  padding:12px 14px;
  background:#edf5f7;
  color:#23465b;
  border-top:4px solid #168aa2;
  font-weight:700;
}
.v28-site .v23-flyer-top b {
  background:#f28a43;
  color:#fff;
  border-radius:2px;
}
.v28-site .v23-flyer-hero::after {
  background:linear-gradient(180deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.92) 100%);
}
.v28-site .v23-flyer-title span { background:#244c65; }
.v28-site .v23-flyer-title span:last-child { background:#f28a43; }
.v28-site .v23-flyer-copy span { background:#c8d5dc; }
.v28-site .v23-flyer-cards > div { border-color:#d5e0e5; background:#fdfefe; }
.v28-site .v23-flyer-cards span { background:#6f8b9b; }
.v28-site .v23-flyer-footer { border-top-color:#d5e0e5; color:#355368; }
.v28-site .v23-flyer-footer span { background:#c8d5dc; }

/* Reassurance: Zen Kaku only, centered check, no extra marker emphasis. */
.v28-site .v23-reassurance {
  font-family:var(--v28-body);
  align-items:center;
}
.v28-site .v23-reassurance-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  line-height:1;
}
.v28-site .v23-reassurance-icon svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:var(--v28-teal);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.v28-site .v23-reassurance strong {
  font-family:var(--v28-body);
  font-size:1.08rem;
  line-height:1.5;
  font-weight:700;
}
.v28-site .v23-reassurance p {
  font-family:var(--v28-body);
  font-size:.96rem;
  line-height:1.75;
}

/* Exact two-line flow headline, with client intent made explicit. */
.v28-site .v28-flow-heading .v17-heading-line { display:block; }
.v28-site .v28-flow-heading .v17-phrase { display:inline-block; white-space:nowrap; }
.v28-site .v17-flow-list > li:nth-child(4) {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

@media (max-width:720px) {
  .v28-site .hero-eyebrow { font-size:.96rem; }
  .v28-site .hero-title {
    font-size:2.22rem;
    line-height:1.16;
    letter-spacing:-.035em;
  }
  .v28-site .section-kicker,
  .v28-site .v17-contact-kicker { font-size:.95rem; }
  .v28-site .v17-heading {
    font-size:1.85rem;
    line-height:1.3;
  }
  .v28-site .hero-desc,
  .v28-site .v17-section-copy {
    font-size:1rem;
    line-height:1.75;
  }
  .v28-site .v23-audience { gap:12px 22px; }
  .v28-site .v23-audience-item { font-size:.92rem; gap:8px; }
  .v28-site .v23-audience-icon { width:28px; height:28px; flex-basis:28px; }
  .v28-site .v23-audience-icon svg { width:26px; height:26px; }

  .v28-site .v17-source-sheet {
    width:min(76vw,280px);
    height:340px;
    min-height:340px;
    aspect-ratio:auto;
    margin-inline:auto;
  }
  .v28-site .v17-after-device-combo {
    min-height:330px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px 34px 28px 0;
  }
  .v28-site .v17-after-browser { width:100%; }
  .v28-site .v17-after-phone { width:96px; right:-2px; bottom:18px; }
  .v28-site .v17-transform span { font-size:.9rem; }
  .v28-site .v23-reassurance { align-items:start; }
  .v28-site .v28-flow-heading { font-size:1.68rem; line-height:1.34; }
  .v28-site .v28-flow-heading .v17-phrase { white-space:nowrap; }
}

/* V28 mobile containment / alignment pass after review */
@media (max-width:720px) {
  .v28-site .v17-header .header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:64px;
    padding-left:16px;
    padding-right:16px;
  }
  .v28-site .brand {
    flex:0 0 auto;
    min-width:0;
    font-size:.95rem;
    line-height:1;
    gap:8px;
    white-space:nowrap;
  }
  .v28-site .brand-mark { width:11px; height:11px; flex-basis:11px; border-width:2px; }
  .v28-site .v17-header-mobile-actions {
    flex:0 0 auto;
    margin-left:auto;
    gap:6px;
  }
  .v28-site .v17-header-cta {
    width:auto;
    min-width:94px;
    min-height:40px;
    padding:9px 12px;
    border-radius:8px;
    font-size:.78rem;
    line-height:1;
    white-space:nowrap;
  }
  .v28-site .v17-header .nav-toggle { width:40px; height:40px; flex:0 0 40px; }

  .v28-site .v17-sample-tabs {
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }
  .v28-site .v17-sample-tabs button {
    min-width:0;
    width:100%;
    padding:7px 2px;
    font-size:.66rem;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
  }
  .v28-site .v17-transform {
    width:100%;
    justify-self:center;
    align-items:center;
    text-align:center;
  }
  .v28-site .v17-transform span { text-align:center; }
}
/* Flyer source should read as a normal light handout, not a dark poster. */
.v28-site .v23-flyer-hero { background:#f2f4f4; }
.v28-site .v23-flyer-hero img {
  filter:brightness(1.45) saturate(.75);
  opacity:.34;
}
.v28-site .v23-flyer-hero::after {
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.96) 100%);
}


/* ===== V29: LP final contact fixes ===== */
.v28-site .v17-contact-heading {
  color:#ffffff;
}
.v28-site .v17-contact-person {
  margin-top:20px !important;
  padding-top:0;
  border-top:0;
}
.v28-site .v17-contact-person span {
  color:rgba(247,245,240,.78);
}

/* ===== V30 subpages: index-derived design system ===== */
.v30-subpage {
  --v30-navy:#142544;
  --v30-teal:#0da8c7;
  --v30-teal-deep:#0b92b0;
  --v30-blue:#eef8fb;
  --v30-orange:#f57d21;
  --v30-yellow:#f6d65a;
  --v30-paper:#f7f5f0;
  --v30-line:#d8e5ea;
  --v30-soft:#5a6877;
  background:var(--v30-paper);
}
.v30-subpage .site-header { background:rgba(255,255,255,.96); border-bottom:1px solid rgba(20,37,68,.08); }
.v30-subpage .header-inner { min-height:82px; }
.v30-subpage .brand { color:var(--v30-navy); font-family:var(--font-head); font-size:1.72rem; font-weight:700; gap:12px; }
.v30-subpage .brand-mark { width:14px; height:14px; flex:0 0 14px; display:inline-block; border:3px solid #1498c8; border-radius:1px; transform:rotate(45deg); background:transparent; box-shadow:none; }
.v30-subpage .site-nav { gap:24px; }
.v30-subpage .site-nav a { color:var(--v30-navy); font-weight:700; font-size:.88rem; }
.v30-subpage .site-nav a[aria-current="page"] { color:var(--v30-teal-deep); border-bottom-color:var(--v30-teal-deep); }
.v30-subpage .site-nav .nav-cta,
.v30-subpage .v17-header-cta { background:var(--v30-orange); color:#fff; border-radius:12px; border:0; padding:12px 20px; box-shadow:none; }

.v30-subpage .v30-subhero {
  position:relative; overflow:hidden; padding:88px 0 92px;
  background:linear-gradient(135deg,#f7fcfe 0%,#edf8fb 64%,#e7f5f9 100%);
  border-bottom:1px solid #dcecf1;
}
.v30-subpage .v30-subhero::before,
.v30-subpage .v30-subhero::after { content:""; position:absolute; border-radius:50%; background:rgba(44,187,218,.11); pointer-events:none; }
.v30-subpage .v30-subhero::before { width:330px; height:330px; right:-110px; top:-120px; }
.v30-subpage .v30-subhero::after { width:210px; height:210px; right:170px; bottom:-120px; }
.v30-subpage .v30-subhero-inner { position:relative; z-index:1; }
.v30-subpage .section-kicker { color:var(--v30-teal-deep); font-size:1rem; font-weight:700; letter-spacing:.04em; margin-bottom:18px; }
.v30-subpage .v30-subhero h1 { max-width:820px; margin:0 0 22px; color:var(--v30-navy); font-size:clamp(2.8rem,5.7vw,4.8rem); line-height:1.18; letter-spacing:-.025em; }
.v30-subpage .v30-marker { position:relative; display:inline; z-index:0; }
.v30-subpage .v30-marker::after { content:""; position:absolute; z-index:-1; left:-.02em; right:-.04em; bottom:.08em; height:.23em; background:var(--v30-yellow); border-radius:2px; opacity:.92; }
.v30-subpage .v30-subhero p:not(.section-kicker) { max-width:720px; color:var(--v30-navy); font-size:1.1rem; line-height:1.85; }
.v30-subpage .v30-inline-cta { display:inline-flex; align-items:center; gap:14px; margin-top:16px; padding:15px 25px; background:var(--v30-orange); color:#fff; text-decoration:none; font-weight:700; border-radius:12px; }
.v30-subpage .v30-inline-cta span { font-size:1.18em; }

.v30-subpage .v30-section { padding:86px 0; }
.v30-subpage .v30-section-white { background:#fff; }
.v30-subpage .v30-section-blue { background:linear-gradient(180deg,#eef8fb 0%,#f5fbfd 100%); }
.v30-subpage .v30-section-paper { background:var(--v30-paper); }
.v30-subpage .v30-section-head { max-width:860px; margin-bottom:38px; }
.v30-subpage .v30-section-head h2 { color:var(--v30-navy); font-size:clamp(2rem,4vw,3.3rem); line-height:1.35; letter-spacing:-.02em; margin-bottom:14px; }
.v30-subpage .v30-section-head > p:last-child { color:var(--v30-soft); font-size:1.04rem; max-width:64ch; }

.v30-subpage .v30-entry-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.v30-subpage .v30-entry-card { position:relative; padding:28px 26px 26px; background:#fff; border:1px solid var(--v30-line); border-radius:14px; box-shadow:0 14px 36px rgba(20,37,68,.05); }
.v30-subpage .v30-entry-card-primary { border-top:4px solid var(--v30-orange); padding-top:25px; }
.v30-subpage .v30-card-label { color:var(--v30-teal-deep); font-size:.86rem; font-weight:700; margin-bottom:8px; }
.v30-subpage .v30-entry-card h3 { color:var(--v30-navy); font-family:var(--font-body); font-weight:700; line-height:1.45; font-size:1.16rem; min-height:3.1em; }
.v30-subpage .v30-price { display:flex; align-items:baseline; gap:8px; margin:18px 0 16px; }
.v30-subpage .v30-price strong { color:var(--v30-navy); font-size:1.85rem; line-height:1.1; }
.v30-subpage .v30-price small { color:var(--v30-soft); font-size:.72rem; }
.v30-subpage .v30-entry-card > p:not(.v30-card-label):not(.v30-price), .v30-subpage .v30-entry-card li { color:#536271; font-size:.92rem; }
.v30-subpage .v30-entry-card ul { display:grid; gap:7px; margin-top:16px; }
.v30-subpage .v30-entry-card li::before { content:"✓"; color:var(--v30-teal-deep); font-weight:800; margin-right:.5em; }
.v30-subpage .v30-card-note { margin-top:12px; padding-top:12px; border-top:1px solid #edf1f3; font-size:.82rem!important; }
.v30-subpage .v30-monthly-note { margin-top:22px; padding:20px 24px; border-radius:14px; background:#fff8df; border:1px solid #f2dfa0; }
.v30-subpage .v30-monthly-note strong { color:var(--v30-navy); font-size:1.02rem; }
.v30-subpage .v30-monthly-note p { margin:4px 0 0; max-width:none; color:#5c5c50; font-size:.92rem; }

.v30-subpage .v30-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.v30-subpage .v30-plan-grid article { position:relative; padding:30px 26px; background:#fff; border:1px solid #d5e9ef; border-radius:14px; text-align:left; }
.v30-subpage .v30-plan-grid article.is-featured { border-color:var(--v30-teal); box-shadow:0 16px 36px rgba(13,168,199,.12); }
.v30-subpage .v30-recommend { position:absolute; right:18px; top:18px; padding:5px 10px; border-radius:999px; background:#e5f8fc; color:var(--v30-teal-deep); font-size:.72rem; font-weight:700; }
.v30-subpage .v30-plan-name { color:var(--v30-navy); font-weight:700; margin-bottom:16px; }
.v30-subpage .v30-plan-grid strong { display:block; color:var(--v30-navy); font-size:1.7rem; }
.v30-subpage .v30-plan-grid span { display:inline-block; margin:8px 0 14px; color:var(--v30-teal-deep); font-weight:700; }
.v30-subpage .v30-plan-grid article > p:last-child { color:var(--v30-soft); font-size:.92rem; margin-bottom:0; }

.v30-subpage .v30-support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.v30-subpage .v30-support-grid article { display:grid; grid-template-columns:48px 1fr; gap:18px; padding:28px; background:#fff; border:1px solid #e1ddd4; border-radius:14px; }
.v30-subpage .v30-support-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#e5f7fb; color:var(--v30-teal-deep); font-size:1.25rem; font-weight:800; }
.v30-subpage .v30-support-grid h3 { color:var(--v30-navy); font-family:var(--font-body); font-size:1.14rem; font-weight:700; }
.v30-subpage .v30-support-grid p:last-child { color:var(--v30-soft); font-size:.92rem; }

.v30-subpage .v30-narrow { max-width:930px; }
.v30-subpage .v30-faq { border-top:1px solid #dfe6e8; }
.v30-subpage .v30-faq details { border-bottom:1px solid #dfe6e8; }
.v30-subpage .v30-faq summary { position:relative; cursor:pointer; list-style:none; padding:22px 46px 22px 0; color:var(--v30-navy); font-weight:700; }
.v30-subpage .v30-faq summary::-webkit-details-marker { display:none; }
.v30-subpage .v30-faq summary::after { content:"＋"; position:absolute; right:8px; top:20px; color:var(--v30-teal-deep); font-size:1.2rem; }
.v30-subpage .v30-faq details[open] summary::after { content:"−"; }
.v30-subpage .v30-faq details p { padding:0 42px 20px 0; color:var(--v30-soft); }

.v30-subpage .v30-bottom-cta { display:flex; align-items:center; justify-content:space-between; gap:34px; margin-top:54px; padding:34px 38px; background:var(--v30-navy); border-radius:16px; }
.v30-subpage .v30-bottom-cta .section-kicker { color:#6ed7e9; margin-bottom:8px; }
.v30-subpage .v30-bottom-cta h2 { margin:0; color:#fff; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.35; }
.v30-subpage .v30-bottom-cta a { flex:0 0 auto; padding:15px 24px; border-radius:12px; background:var(--v30-orange); color:#fff; text-decoration:none; font-weight:700; }

.v30-subpage .v30-value-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.v30-subpage .v30-value-grid article { padding:30px 28px; border:1px solid var(--v30-line); border-radius:14px; background:#fff; }
.v30-subpage .v30-value-grid article > span { color:var(--v30-teal-deep); font-size:.82rem; font-weight:800; letter-spacing:.08em; }
.v30-subpage .v30-value-grid h3 { margin:13px 0 10px; color:var(--v30-navy); font-family:var(--font-head); font-size:1.42rem; }
.v30-subpage .v30-value-grid p { color:var(--v30-soft); font-size:.94rem; }
.v30-subpage .v30-about-intro { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:54px; align-items:center; }
.v30-subpage .v30-about-copy h2 { color:var(--v30-navy); font-size:clamp(2rem,4vw,3.2rem); line-height:1.38; }
.v30-subpage .v30-about-copy > p:last-child { max-width:58ch; color:var(--v30-soft); }
.v30-subpage .v30-about-card { padding:28px 30px; border:1px solid #cee6ed; border-radius:14px; background:#fff; box-shadow:0 14px 34px rgba(20,37,68,.05); }
.v30-subpage .v30-about-card p { margin:0 0 3px; color:var(--v30-teal-deep); font-size:.78rem; font-weight:700; }
.v30-subpage .v30-about-card strong { display:block; margin-bottom:20px; color:var(--v30-navy); font-size:1.02rem; }
.v30-subpage .v30-about-card strong:last-child { margin-bottom:0; }
.v30-subpage .v30-copy-panel { padding:30px 32px; background:#fff; border-left:4px solid var(--v30-teal); border-radius:0 12px 12px 0; }
.v30-subpage .v30-copy-panel p { max-width:none; color:var(--v30-soft); }
.v30-subpage .v30-copy-panel p:last-child { margin-bottom:0; }

.v30-subpage .site-footer { background:#fff; border-top:1px solid #dfe7e9; }
.v30-subpage .footer-brand { font-family:var(--font-head); color:var(--v30-navy); }

@media (max-width: 980px) {
  .v30-subpage .site-nav { gap:14px; }
  .v30-subpage .site-nav a { font-size:.8rem; }
  .v30-subpage .v30-entry-grid,
  .v30-subpage .v30-plan-grid,
  .v30-subpage .v30-value-grid { grid-template-columns:1fr; }
  .v30-subpage .v30-entry-card h3 { min-height:0; }
  .v30-subpage .v30-support-grid { grid-template-columns:1fr; }
  .v30-subpage .v30-about-intro { grid-template-columns:1fr; gap:28px; }
}

@media (max-width: 720px) {
  .v30-subpage .header-inner { min-height:64px; }
  .v30-subpage .brand { font-size:1.3rem; }
  .v30-subpage .brand-mark { width:11px; height:11px; flex-basis:11px; border-width:2px; }
  .v30-subpage .v30-subhero { padding:54px 0 58px; }
  .v30-subpage .v30-subhero::before { width:200px; height:200px; right:-90px; top:-80px; }
  .v30-subpage .v30-subhero::after { width:140px; height:140px; right:60px; bottom:-90px; }
  .v30-subpage .v30-subhero h1 { font-size:2.45rem; line-height:1.28; }
  .v30-subpage .v30-subhero p:not(.section-kicker) { font-size:1rem; }
  .v30-subpage .v30-pc-only { display:none; }
  .v30-subpage .v30-section { padding:62px 0; }
  .v30-subpage .v30-section-head { margin-bottom:28px; }
  .v30-subpage .v30-section-head h2 { font-size:2rem; }
  .v30-subpage .v30-entry-card,
  .v30-subpage .v30-plan-grid article,
  .v30-subpage .v30-support-grid article,
  .v30-subpage .v30-value-grid article { padding:24px 20px; }
  .v30-subpage .v30-price strong { font-size:1.65rem; }
  .v30-subpage .v30-monthly-note { padding:18px; }
  .v30-subpage .v30-bottom-cta { display:block; padding:26px 22px; border-radius:14px; }
  .v30-subpage .v30-bottom-cta a { display:flex; justify-content:center; margin-top:22px; width:100%; }
  .v30-subpage .v30-about-card, .v30-subpage .v30-copy-panel { padding:24px 20px; }
}

.v30-subpage .v30-hero-line { display:block; }
.v30-subpage .v30-about-finish { display:inline-block; margin-left:.08em; }
@media (max-width:720px){
  .v30-subpage .v30-subhero-about h1 { font-size:2.25rem; }
  .v30-subpage .v30-subhero-about .v30-about-finish { margin-left:0; }
}
.v30-subpage .v30-subhero-about .v30-marker,
.v30-subpage .v30-subhero-about .v30-about-finish { display:inline-block; }
@media (min-width:721px){
  .v30-subpage .v30-subhero-about .v30-hero-line:nth-child(2){ white-space:nowrap; }
}

/* ===== V31 subpages: richer, purpose-specific layouts ===== */
.v31-subpage {
  --v31-navy:#142544;
  --v31-teal:#0b92b0;
  --v31-teal-bright:#0da8c7;
  --v31-orange:#f57d21;
  --v31-yellow:#f6d65a;
  --v31-blue:#eef8fb;
  --v31-paper:#f7f5f0;
  --v31-line:#d9e5e9;
  --v31-soft:#586675;
  background:#fff;
}
.v31-subpage .site-header{background:rgba(255,255,255,.97);border-bottom:1px solid rgba(20,37,68,.08)}
.v31-subpage .header-inner{min-height:82px}
.v31-subpage .brand{font-family:var(--font-head);font-size:1.72rem;font-weight:700;color:var(--v31-navy);gap:12px}
.v31-subpage .brand-mark{width:14px;height:14px;flex:0 0 14px;border:3px solid #1498c8;border-radius:1px;transform:rotate(45deg);background:transparent;box-shadow:none}
.v31-subpage .site-nav{gap:24px}
.v31-subpage .site-nav a{color:var(--v31-navy);font-weight:700;font-size:.88rem}
.v31-subpage .site-nav a[aria-current="page"]{color:var(--v31-teal);border-bottom-color:var(--v31-teal)}
.v31-subpage .site-nav .nav-cta,.v31-subpage .v17-header-cta{background:var(--v31-orange);color:#fff;border-radius:12px;border:0;padding:12px 20px;box-shadow:none}

.v31-page-intro{background:#fff;padding:72px 0 34px;border-bottom:1px solid #edf1f3}
.v31-page-intro-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,.75fr);gap:70px;align-items:end}
.v31-page-intro h1,.v31-about-hero h1,.v31-subpage h2{font-family:var(--font-head);color:var(--v31-navy);letter-spacing:-.025em}
.v31-page-intro h1{font-size:clamp(3.1rem,6vw,5.3rem);line-height:1.14;margin:0}
.v31-intro-copy{padding-bottom:10px}
.v31-intro-copy p{font-size:1.02rem;line-height:1.9;color:var(--v31-soft);margin:0 0 10px}
.v31-anchor-nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:42px;padding:18px 0 0;border-top:1px solid #e6ecef}
.v31-anchor-nav a{font-size:.86rem;font-weight:700;color:var(--v31-navy);text-decoration:none}
.v31-anchor-nav a::after{content:"↓";margin-left:.35em;color:var(--v31-teal)}

.v31-section{padding:88px 0}
.v31-white{background:#fff}
.v31-blue{background:linear-gradient(180deg,#eef8fb 0%,#f7fcfd 100%)}
.v31-paper{background:var(--v31-paper)}
.v31-section-title{max-width:850px;margin-bottom:42px}
.v31-section-title h2,.v31-improve-layout h2,.v31-two-services h2,.v31-maintenance h2,.v31-about-close h2,.v31-editorial-split h2,.v31-use-grid h2,.v31-local-grid h2{font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.35;margin:0 0 16px}
.v31-section-title>p:last-child,.v31-improve-layout>div>p:not(.section-kicker):not(.v31-big-price),.v31-use-grid p,.v31-local-grid p,.v31-about-close p{color:var(--v31-soft);font-size:1rem;line-height:1.9;max-width:66ch}
.v31-subpage .section-kicker{font-size:1rem;color:var(--v31-teal);font-weight:700;letter-spacing:.04em;margin-bottom:16px}

.v31-service-list{border-top:1px solid var(--v31-line)}
.v31-service-list article{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.32fr);gap:38px;padding:30px 6px;border-bottom:1px solid var(--v31-line);align-items:center}
.v31-service-list article>div:first-child{display:grid;grid-template-columns:52px 1fr;column-gap:18px}
.v31-service-list .v31-no{grid-row:1/3;grid-column:1;color:var(--v31-teal);font-family:var(--font-head);font-size:1.6rem;font-weight:700;padding-top:2px}
.v31-service-list h3{grid-column:2;font-family:var(--font-body);font-size:1.22rem;color:var(--v31-navy);margin:0 0 8px}
.v31-service-list article>div:first-child p{grid-column:2;color:var(--v31-soft);font-size:.92rem;line-height:1.75;margin:0;max-width:65ch}
.v31-service-price{text-align:right}
.v31-service-price strong{display:block;color:var(--v31-navy);font-size:1.8rem;line-height:1.2}
.v31-service-price span{display:block;color:var(--v31-soft);font-size:.78rem;margin-top:6px}

.v31-plan-compare{background:#fff;border:1px solid #d7e8ed;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(20,37,68,.05)}
.v31-plan-head,.v31-plan-row{display:grid;grid-template-columns:180px repeat(3,minmax(0,1fr))}
.v31-plan-head>div,.v31-plan-row>*{padding:20px 22px;border-right:1px solid #e3ecef}
.v31-plan-head>div:last-child,.v31-plan-row>*:last-child{border-right:0}
.v31-plan-head{border-bottom:1px solid #dce8ec;background:#fff}
.v31-plan-head>div:not(:first-child){display:flex;flex-direction:column;gap:8px;min-height:122px;justify-content:center}
.v31-plan-head span{font-weight:700;color:var(--v31-navy)}
.v31-plan-head strong{font-size:1.55rem;color:var(--v31-navy)}
.v31-plan-head .is-main{background:#f0fbfd;position:relative}
.v31-plan-head em{position:absolute;right:16px;top:14px;font-style:normal;font-size:.68rem;font-weight:700;color:var(--v31-teal);background:#dff5fa;padding:4px 8px;border-radius:99px}
.v31-plan-row{border-bottom:1px solid #e4ecef}
.v31-plan-row:last-child{border-bottom:0}
.v31-plan-row b{color:var(--v31-navy);font-size:.88rem;background:#fbfcfc}
.v31-plan-row span{color:var(--v31-soft);font-size:.87rem;line-height:1.65}

.v31-split-heading{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:70px;align-items:start}
.v31-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:1px solid #d9dedf}
.v31-check-grid span{position:relative;padding:16px 4px 16px 28px;border-bottom:1px solid #d9dedf;color:var(--v31-navy);font-size:.92rem}
.v31-check-grid span::before{content:"✓";position:absolute;left:3px;top:16px;color:var(--v31-teal);font-weight:800}
.v31-small-note{font-size:.82rem!important;line-height:1.7!important;color:#68737e!important;margin-top:18px}

.v31-improve-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:70px;align-items:start}
.v31-big-price{color:var(--v31-navy)!important;font-size:2rem!important;font-weight:700;line-height:1.25!important;margin-top:28px}
.v31-big-price small{font-size:.72rem;font-weight:500;color:var(--v31-soft)}
.v31-improve-items{border-top:1px solid var(--v31-line)}
.v31-improve-items>div{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:22px 2px;border-bottom:1px solid var(--v31-line)}
.v31-improve-items strong{color:var(--v31-navy);font-size:.98rem}
.v31-improve-items p{color:var(--v31-soft);font-size:.9rem;line-height:1.75;margin:0}

.v31-two-services{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.v31-two-services article{background:#fff;border:1px solid #d6e9ee;padding:34px 34px 30px;border-radius:14px}
.v31-two-services h2{font-size:clamp(2rem,3.3vw,3rem)}
.v31-two-services article>p:not(.section-kicker):not(.v31-big-price):not(.v31-small-note){color:var(--v31-soft);line-height:1.8}

.v31-maintenance{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
.v31-maintenance h3{font-family:var(--font-body);font-size:1.05rem;color:var(--v31-navy);margin-bottom:12px}
.v31-check-list{border-top:1px solid #d9dedf}
.v31-check-list li{position:relative;padding:14px 4px 14px 28px;border-bottom:1px solid #d9dedf;color:var(--v31-navy);font-size:.92rem}
.v31-check-list li::before{content:"✓";position:absolute;left:3px;color:var(--v31-teal);font-weight:800}

.v31-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;margin-bottom:34px;padding:26px 28px;background:#f8fafb;border:1px solid #e3eaec;border-radius:12px}
.v31-notes p{position:relative;margin:0;padding-left:18px;color:var(--v31-soft);font-size:.88rem;line-height:1.75}
.v31-notes p::before{content:"・";position:absolute;left:0;color:var(--v31-teal)}
.v31-faq{margin-top:12px}
.v31-slim-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:44px;padding:24px 28px;border-top:1px solid var(--v31-line);border-bottom:1px solid var(--v31-line)}
.v31-slim-cta strong{display:block;color:var(--v31-navy);font-size:1.1rem;margin-bottom:2px}
.v31-slim-cta p{margin:0;color:var(--v31-soft);font-size:.88rem}
.v31-slim-cta a,.v31-text-cta{display:inline-flex;align-items:center;color:var(--v31-orange);font-weight:700;text-decoration:none;white-space:nowrap}

/* About: editorial rather than LP-like */
.v31-about-hero{padding:72px 0 76px;background:#fff}
.v31-about-hero-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1.05fr);gap:62px;align-items:center}
.v31-about-hero h1{font-size:clamp(3rem,5.5vw,5rem);line-height:1.18;margin:0 0 24px}
.v31-about-hero-copy>p:not(.section-kicker){max-width:650px;color:var(--v31-soft);font-size:1rem;line-height:1.9;margin:0 0 10px}
.v31-about-hero-photo{margin:0;position:relative}
.v31-about-hero-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 58%;display:block;border-radius:4px}
.v31-about-hero-photo figcaption{margin-top:9px;color:#78838d;font-size:.74rem;text-align:right}
.v31-about-opening{padding-top:100px}
.v31-editorial-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:86px;align-items:start}
.v31-long-copy p{font-size:1rem;line-height:2;color:var(--v31-soft);margin:0 0 18px}
.v31-about-process{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:15px;align-items:center;margin-top:54px;padding:24px 28px;background:#f5fbfd;border-top:1px solid #d9edf2;border-bottom:1px solid #d9edf2}
.v31-about-process span{display:flex;gap:10px;align-items:center;color:var(--v31-navy);font-weight:700;font-size:.9rem}
.v31-about-process b{color:var(--v31-teal);font-family:var(--font-head);font-size:1.25rem}
.v31-about-process i{font-style:normal;color:#83cddb}

.v31-principles{border-top:1px solid #dadfe0}
.v31-principles article{display:grid;grid-template-columns:86px 1fr;gap:30px;padding:32px 0;border-bottom:1px solid #dadfe0}
.v31-principles article>span{font-family:var(--font-head);font-size:2rem;color:var(--v31-teal)}
.v31-principles h3{font-family:var(--font-head);font-size:1.45rem;color:var(--v31-navy);margin:0 0 8px}
.v31-principles p{margin:0;color:var(--v31-soft);font-size:.95rem;line-height:1.8;max-width:70ch}

.v31-use-grid{display:grid;grid-template-columns:minmax(420px,1fr) minmax(0,.9fr);gap:70px;align-items:center}
.v31-use-visual{position:relative;min-height:430px}
.v31-paper-back{position:absolute;left:0;top:20px;width:50%;height:360px;background:#fff;border:1px solid #d6e4e8;box-shadow:0 18px 34px rgba(20,37,68,.07);transform:rotate(-3deg);padding:42px 30px}
.v31-paper-back::before{content:"会社案内";display:block;font-family:var(--font-head);font-size:1.55rem;color:var(--v31-navy);margin-bottom:34px}
.v31-paper-back span{display:block;height:7px;background:#d9e2e6;margin:12px 0;border-radius:3px}
.v31-paper-back span:nth-child(2){width:82%}.v31-paper-back span:nth-child(3){width:68%}.v31-paper-back span:nth-child(4){width:90%}
.v31-screen-card{position:absolute;right:0;bottom:0;width:69%;background:#fff;padding:10px;border-radius:8px;box-shadow:0 22px 46px rgba(20,37,68,.18)}
.v31-screen-card img{width:100%;display:block;border-radius:4px}

.v31-local-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.6fr);gap:80px;align-items:start}
.v31-local-facts{border-top:2px solid var(--v31-navy)}
.v31-local-facts>div{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--v31-line)}
.v31-local-facts span{font-size:.78rem;color:var(--v31-teal);font-weight:700}
.v31-local-facts strong{font-size:.94rem;color:var(--v31-navy);font-weight:700}
.v31-about-close{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:76px;align-items:start}
.v31-text-cta{margin-top:18px}

@media(max-width:980px){
  .v31-page-intro-grid,.v31-about-hero-grid,.v31-editorial-split,.v31-split-heading,.v31-improve-layout,.v31-maintenance,.v31-use-grid,.v31-local-grid,.v31-about-close{grid-template-columns:1fr;gap:38px}
  .v31-about-hero-photo{max-width:760px}
  .v31-service-list article{grid-template-columns:1fr 210px}
  .v31-plan-head,.v31-plan-row{grid-template-columns:150px repeat(3,minmax(0,1fr))}
  .v31-plan-head>div,.v31-plan-row>*{padding:16px 14px}
  .v31-use-visual{max-width:700px;width:100%;margin:0 auto}
  .v31-local-facts{max-width:680px}
}

@media(max-width:720px){
  .v31-subpage .header-inner{min-height:72px}
  .v31-page-intro{padding:44px 0 18px}
  .v31-page-intro h1{font-size:2.9rem}
  .v31-intro-copy p{font-size:.94rem;line-height:1.8}
  .v31-anchor-nav{gap:10px 18px;margin-top:24px;padding-top:14px}
  .v31-anchor-nav a{font-size:.78rem}
  .v31-section{padding:64px 0}
  .v31-section-title{margin-bottom:28px}
  .v31-section-title h2,.v31-improve-layout h2,.v31-two-services h2,.v31-maintenance h2,.v31-about-close h2,.v31-editorial-split h2,.v31-use-grid h2,.v31-local-grid h2{font-size:2.35rem;line-height:1.35}
  .v31-service-list article{grid-template-columns:1fr;gap:18px;padding:24px 0}
  .v31-service-list article>div:first-child{grid-template-columns:42px 1fr;column-gap:10px}
  .v31-service-list .v31-no{font-size:1.3rem}
  .v31-service-list h3{font-size:1.08rem}
  .v31-service-price{text-align:left;padding-left:52px}
  .v31-service-price strong{font-size:1.55rem}
  .v31-plan-compare{display:grid;gap:14px;background:transparent;border:0;box-shadow:none;overflow:visible}
  .v31-plan-head,.v31-plan-row{display:contents}
  .v31-plan-head>div:first-child,.v31-plan-row>b{display:none}
  .v31-plan-head>div:not(:first-child){min-height:0;background:#fff;border:1px solid #d9e7eb;border-radius:12px;padding:20px;position:relative}
  .v31-plan-head .is-main{background:#f1fbfd;border-color:#a8dfe8}
  .v31-plan-row span{display:none}
  .v31-plan-head>div:nth-child(2)::after{content:"1ページ / フォームは追加対応 / 修正2回 / 公開支援込み";display:block;margin-top:12px;color:var(--v31-soft);font-size:.78rem;line-height:1.7}
  .v31-plan-head>div:nth-child(3)::after{content:"3〜4ページ / フォーム標準1つ / 修正2回 / 公開支援込み";display:block;margin-top:12px;color:var(--v31-soft);font-size:.78rem;line-height:1.7}
  .v31-plan-head>div:nth-child(4)::after{content:"6〜8ページ / フォーム標準1つ / 修正2回 / 公開支援込み";display:block;margin-top:12px;color:var(--v31-soft);font-size:.78rem;line-height:1.7}
  .v31-check-grid{grid-template-columns:1fr}
  .v31-improve-items>div{grid-template-columns:1fr;gap:5px;padding:18px 0}
  .v31-two-services{grid-template-columns:1fr;gap:14px}
  .v31-two-services article{padding:26px 22px}
  .v31-notes{grid-template-columns:1fr;padding:20px;gap:11px}
  .v31-slim-cta{display:grid;gap:18px;padding:22px 0}
  .v31-about-hero{padding:46px 0 54px}
  .v31-about-hero h1{font-size:2.75rem}
  .v31-about-hero-grid{gap:30px}
  .v31-about-hero-photo img{aspect-ratio:16/10}
  .v31-about-opening{padding-top:70px}
  .v31-about-process{grid-template-columns:1fr;gap:8px;padding:18px 20px}
  .v31-about-process i{transform:rotate(90deg);justify-self:start;margin-left:20px;height:12px}
  .v31-principles article{grid-template-columns:52px 1fr;gap:14px;padding:25px 0}
  .v31-principles article>span{font-size:1.55rem}
  .v31-principles h3{font-size:1.2rem}
  .v31-use-visual{min-height:300px}
  .v31-paper-back{width:57%;height:250px;padding:28px 20px}
  .v31-paper-back::before{font-size:1.15rem;margin-bottom:24px}
  .v31-screen-card{width:70%}
  .v31-local-facts>div{grid-template-columns:70px 1fr;gap:12px}
}

/* V31 typography tune: subpages should not feel like a duplicate LP hero */
.v31-subpage .v31-page-intro h1{font-size:clamp(3rem,4.6vw,4.15rem);line-height:1.18}
.v31-about-page .v31-about-hero h1{font-size:clamp(3rem,4.7vw,4.25rem);line-height:1.2}
@media(max-width:720px){
  .v31-subpage .v31-page-intro h1{font-size:2.45rem;line-height:1.22}
  .v31-about-page .v31-about-hero h1{font-size:2.45rem;line-height:1.25}
}

/* ===== V32 subpages: approved visual direction ===== */
.v32-subpage {
  --v32-navy:#142544;
  --v32-teal:#0ca7c5;
  --v32-teal-deep:#078eaa;
  --v32-orange:#f3761e;
  --v32-yellow:#f5d85b;
  --v32-blue:#eaf8fc;
  --v32-blue-2:#f3fbfd;
  --v32-paper:#f8f6f1;
  --v32-line:#d7e8ee;
  --v32-soft:#596978;
  background:#fff;
  color:var(--v32-navy);
}
.v32-subpage .site-header{background:rgba(255,255,255,.97);border-bottom:1px solid rgba(20,37,68,.08)}
.v32-subpage .header-inner{min-height:78px}
.v32-subpage .brand{font-family:var(--font-head);font-size:1.62rem;color:var(--v32-navy);font-weight:700}
.v32-subpage .brand-mark{width:13px;height:13px;flex:0 0 13px;border:3px solid #159ec4;background:transparent;transform:rotate(45deg);box-shadow:none}
.v32-subpage .site-nav{gap:24px}
.v32-subpage .site-nav a{font-size:.86rem;color:var(--v32-navy);font-weight:700;white-space:nowrap}
.v32-subpage .site-nav a[aria-current="page"]{color:var(--v32-teal-deep);border-bottom-color:var(--v32-teal-deep)}
.v32-subpage .site-nav .nav-cta,.v32-subpage .v17-header-cta{background:var(--v32-orange);color:#fff;border-radius:9px;padding:12px 22px;border:0;box-shadow:none}
.v32-subpage h1,.v32-subpage h2{font-family:var(--font-head);color:var(--v32-navy);letter-spacing:-.025em}
.v32-subpage p{color:var(--v32-soft)}
.v32-kicker,.v32-side-kicker{display:flex;align-items:center;gap:12px;color:var(--v32-navy);font-weight:700;font-size:.92rem;margin:0 0 16px}
.v32-kicker::before,.v32-side-kicker::before{content:"";width:28px;height:3px;background:var(--v32-teal);border-radius:2px}
.v32-marker{position:relative;display:inline;z-index:0;color:inherit;font-weight:700}
.v32-marker::after{content:"";position:absolute;z-index:-1;left:-.02em;right:-.03em;bottom:.04em;height:.3em;background:var(--v32-yellow);border-radius:1px}
.v32-primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:270px;padding:16px 24px;border-radius:7px;background:var(--v32-orange);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 24px rgba(243,118,30,.18)}
.v32-primary-btn span{font-size:1.06em}
.v32-section{padding:82px 0}
.v32-section-head{max-width:930px;margin:0 auto 34px}
.v32-section-head h2,.v32-about-strength-head h2{font-size:clamp(2.2rem,3.6vw,3.25rem);line-height:1.25;margin:0 0 10px}
.v32-section-head p:last-child,.v32-about-strength-head p:last-child{font-size:.95rem;line-height:1.75}
.v32-center{text-align:center}
.v32-pill{display:inline-flex!important;align-items:center;justify-content:center;padding:7px 18px;border-radius:999px;background:#dff5fb;color:var(--v32-teal-deep)!important;font-size:.82rem!important;font-weight:700;margin:0 0 16px!important}

/* Service hero */
.v32-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f7fcfe 0%,#eaf8fc 100%)}
.v32-service-hero{padding:0;border-bottom:1px solid #deedf1}
.v32-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);min-height:520px;align-items:stretch}
.v32-hero-copy{padding:58px 28px 42px 0;align-self:center;position:relative;z-index:2}
.v32-hero-copy h1{font-size:clamp(3rem,4.6vw,4.65rem);line-height:1.17;margin:0 0 20px}
.v32-hero-copy>p:not(.v32-kicker):not(.v32-hero-note){max-width:660px;font-size:1rem;line-height:1.9;margin:0 0 22px;color:#506170}
.v32-hero-note{font-size:.78rem;margin:9px 0 0;color:#74808a}
.v32-service-hero-visual{position:relative;min-height:520px;overflow:hidden}
.v32-service-hero-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eaf8fc 0%,rgba(234,248,252,.18) 25%,rgba(234,248,252,0) 58%);z-index:1}
.v32-service-hero-bg{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(1.06)}
.v32-browser-mock{position:absolute;z-index:2;right:4%;bottom:8%;width:72%;padding:8px;background:#101820;border-radius:11px;box-shadow:0 24px 42px rgba(20,37,68,.25)}
.v32-browser-bar{display:flex;gap:5px;padding:2px 3px 8px}.v32-browser-bar i{display:block;width:6px;height:6px;border-radius:50%;background:#dce4e7}.v32-browser-bar i:nth-child(2){opacity:.75}.v32-browser-bar i:nth-child(3){opacity:.5}
.v32-browser-mock img{display:block;width:100%;border-radius:4px;background:#fff}

/* Service overview */
.v32-services-overview{background:linear-gradient(180deg,#eef9fc 0%,#e7f6fa 100%)}
.v32-service-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.v32-service-cards article{min-height:190px;padding:24px 19px 20px;background:#fff;border:1px solid #d7eaf0;border-radius:8px;text-align:center;box-shadow:0 7px 20px rgba(20,37,68,.035)}
.v32-icon{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 10px;color:var(--v32-teal);font-size:1.8rem;font-weight:700;line-height:1}
.v32-service-cards h3{font-family:var(--font-body);font-size:1rem;color:var(--v32-navy);margin:0 0 8px;font-weight:700}
.v32-service-cards p{font-size:.8rem;line-height:1.65;margin:0;color:#5f6e7c}

/* Pricing */
.v32-pricing-section{background:var(--v32-paper)}
.v32-pricing-head{display:grid;grid-template-columns:135px 1fr;gap:28px;align-items:start;max-width:none;margin-bottom:32px}
.v32-pricing-head .v32-side-kicker{margin-top:9px;color:var(--v32-teal-deep)}
.v32-pricing-head h2{font-size:clamp(1.9rem,3.1vw,2.7rem);margin:0 0 9px;line-height:1.34}
.v32-pricing-head p{margin:0;font-size:.9rem;line-height:1.7}
.v32-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.v32-plan-card{position:relative;padding:22px 22px 24px;background:#fff;border:1px solid #cfe3ea;border-radius:7px}
.v32-plan-card.is-featured{border:2px solid var(--v32-orange);padding:21px 21px 23px;background:#fffdfa}
.v32-recommend{position:absolute;left:50%;top:-13px;transform:translateX(-50%);padding:4px 16px;border-radius:999px;background:var(--v32-orange);color:#fff;font-size:.72rem;font-weight:700;white-space:nowrap}
.v32-plan-name{text-align:center;color:var(--v32-teal-deep)!important;font-weight:700;margin:0 0 4px!important;font-size:1.02rem}
.v32-plan-card.is-featured .v32-plan-name{color:var(--v32-orange)!important}
.v32-plan-desc{text-align:center;font-size:.78rem;line-height:1.5;margin:0 0 17px!important;color:#61717e!important}
.v32-plan-price{text-align:center;margin:0 0 18px!important;color:var(--v32-navy)!important}.v32-plan-price strong{font-size:2rem;line-height:1}.v32-plan-price small{font-size:.65rem;color:#6d7a85}
.v32-plan-card ul{display:grid;gap:7px;margin:0}.v32-plan-card li{position:relative;padding-left:20px;font-size:.78rem;color:#4d5e6c;line-height:1.45}.v32-plan-card li::before{content:"✓";position:absolute;left:0;color:var(--v32-teal);font-weight:800}
.v32-entry-options{display:grid;grid-template-columns:1fr 1.2fr .8fr 1fr;gap:8px;margin-top:12px}
.v32-entry-options article{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:13px 15px;background:#fff;border:1px solid #dbe7ea;border-radius:7px}
.v32-mini-icon{font-size:1.25rem;color:var(--v32-teal)}
.v32-entry-options strong{display:block;color:var(--v32-navy);font-size:.78rem;line-height:1.35}.v32-entry-options p{font-size:.66rem;line-height:1.4;margin:2px 0 0}.v32-entry-options b{color:var(--v32-teal-deep);font-size:.85rem;white-space:nowrap}
.v32-price-note{margin:12px 0 0!important;font-size:.7rem!important;color:#7c858c!important}

/* Included */
.v32-included-section{background:#fff}
.v32-included-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:70px;align-items:start}
.v32-included-grid h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.35;margin:0 0 16px}.v32-included-grid>div:first-child>p:last-child{line-height:1.8;font-size:.94rem}
.v32-check-list-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--v32-line);border-left:1px solid var(--v32-line)}
.v32-check-list-grid span{position:relative;padding:16px 16px 16px 42px;border-right:1px solid var(--v32-line);border-bottom:1px solid var(--v32-line);font-size:.84rem;color:var(--v32-navy)}
.v32-check-list-grid span::before{content:"✓";position:absolute;left:17px;color:var(--v32-teal);font-weight:800}
.v32-service-bottom,.v32-about-bottom{background:linear-gradient(180deg,#eff9fc,#f7fcfd)}
.v32-bottom-card{display:flex;align-items:center;justify-content:space-between;gap:44px;padding:34px 38px;background:#fff;border:1px solid var(--v32-line);border-radius:10px}
.v32-bottom-card h2{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.35;margin:0 0 8px}.v32-bottom-card p:last-child{margin:0;font-size:.9rem}

/* About hero */
.v32-about-hero{position:relative;min-height:510px;overflow:hidden;background:#f4fbfd;border-bottom:1px solid #dcebf0}
.v32-about-hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 35%,rgba(255,255,255,.42) 56%,rgba(255,255,255,.06) 80%),url('../assets/hero/musashikosugi-towers.webp') center/cover no-repeat}
.v32-about-hero-inner{position:relative;z-index:1;min-height:510px;display:flex;align-items:center}
.v32-about-hero-copy{max-width:680px;padding:40px 0}
.v32-about-hero-copy h1{font-size:clamp(3rem,4.8vw,4.8rem);line-height:1.16;margin:0 0 20px}
.v32-about-hero-copy>p:not(.v32-kicker){font-size:1rem;line-height:1.9;max-width:650px;margin:0}

/* About thought */
.v32-about-thought{background:#fff}
.v32-about-thought-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);gap:54px;align-items:center}
.v32-about-copy-block h2{font-size:clamp(2.6rem,4vw,3.8rem);line-height:1.28;margin:0 0 18px}
.v32-about-copy-block>p:not(.v32-side-kicker){font-size:.94rem;line-height:1.9;margin:0 0 14px}
.v32-about-screen-visual{position:relative;min-height:380px;overflow:hidden;border-radius:6px;background:#f3f7f8}
.v32-screen-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(245,250,251,.5),rgba(219,240,246,.8)),url('../demos/c-b/assets/images/office-building.webp') center/cover no-repeat;filter:saturate(.8)}
.v32-about-browser{right:4%;bottom:7%;width:78%}

/* About strengths */
.v32-about-strengths{background:var(--v32-paper)}
.v32-about-strength-head{display:grid;grid-template-columns:160px 1fr;gap:30px;align-items:start;margin-bottom:24px}
.v32-about-strength-head .v32-side-kicker{color:var(--v32-teal-deep);margin-top:11px}
.v32-strength-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v32-strength-grid article{position:relative;background:#fff;border:1px solid #e0e6e8;padding-bottom:20px;overflow:hidden}
.v32-strength-grid img{display:block;width:100%;height:150px;object-fit:cover}
.v32-strength-grid article:nth-child(1) img{object-position:center 62%}
.v32-strength-no{position:absolute;z-index:2;top:126px;left:14px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--v32-teal);font-family:var(--font-head);font-size:1.15rem;font-weight:700;border:1px solid #d9e5e9}
.v32-strength-grid h3{font-family:var(--font-body);font-size:1.03rem;color:var(--v32-navy);margin:24px 16px 8px;font-weight:700;white-space:nowrap}
.v32-strength-grid p{font-size:.78rem;line-height:1.7;margin:0 16px;color:#61707c}

/* About stance */
.v32-about-stance{background:#fff}
.v32-about-stance-grid{display:grid;grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr);gap:62px;align-items:center}
.v32-about-stance-grid h2{font-size:clamp(2.3rem,3.6vw,3.3rem);line-height:1.33;margin:0 0 16px}
.v32-about-stance-grid>div:last-child>p:not(.v32-side-kicker){font-size:.94rem;line-height:1.9;margin:0 0 12px}
.v32-stance-art{position:relative;min-height:315px;background:linear-gradient(135deg,#f4fafb,#e7f5f8);border-radius:8px;overflow:hidden}
.v32-note-sheet{position:absolute;left:9%;top:12%;width:54%;height:72%;padding:38px 26px;background:#fff;border:1px solid #dce8eb;box-shadow:0 18px 32px rgba(20,37,68,.08);transform:rotate(-3deg)}
.v32-note-sheet::before{content:"WEB PLAN";display:block;font-family:var(--font-head);font-size:1.35rem;color:var(--v32-navy);margin-bottom:28px}.v32-note-sheet span{display:block;height:5px;background:#dce5e8;border-radius:2px;margin:12px 0}.v32-note-sheet span:nth-child(2){width:84%}.v32-note-sheet span:nth-child(3){width:67%}.v32-note-sheet span:nth-child(4){width:91%}
.v32-mini-screen{position:absolute;right:7%;bottom:9%;width:55%;padding:7px;background:#15202a;border-radius:8px;box-shadow:0 19px 32px rgba(20,37,68,.2)}.v32-mini-screen img{display:block;width:100%;border-radius:3px}

/* About values */
.v32-about-values{background:linear-gradient(180deg,#edf9fc,#f5fbfd)}
.v32-value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.v32-value-grid article{padding:24px 20px;background:#fff;border:1px solid #d9eaf0;border-radius:8px}
.v32-value-grid strong{font-family:var(--font-head);font-size:1.3rem;color:var(--v32-teal)}
.v32-value-grid h3{font-family:var(--font-body);font-size:1rem;color:var(--v32-navy);margin:12px 0 8px}.v32-value-grid p{font-size:.8rem;line-height:1.7;margin:0}

@media(max-width:1050px){
  .v32-hero-grid{grid-template-columns:1fr 1fr}.v32-service-hero-visual{min-height:470px}.v32-hero-grid{min-height:470px}
  .v32-service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v32-entry-options{grid-template-columns:1fr 1fr}
  .v32-about-thought-grid,.v32-about-stance-grid,.v32-included-grid{grid-template-columns:1fr;gap:38px}
  .v32-about-screen-visual{max-width:760px;width:100%}.v32-stance-art{max-width:650px;width:100%}
  .v32-about-strength-head{grid-template-columns:1fr;gap:6px}.v32-about-strength-head .v32-side-kicker{margin-top:0}
}

@media(max-width:720px){
  .v32-subpage .header-inner{min-height:70px}.v32-subpage .brand{font-size:1.42rem}.v32-subpage .v17-header-cta{padding:9px 12px;font-size:.74rem}
  .v32-section{padding:60px 0}.v32-pc-only{display:none}
  .v32-hero-grid{grid-template-columns:1fr;min-height:0}.v32-hero-copy{padding:40px 0 28px}.v32-hero-copy h1{font-size:2.55rem;line-height:1.2}.v32-hero-copy>p:not(.v32-kicker):not(.v32-hero-note){font-size:.94rem}.v32-primary-btn{width:100%;min-width:0;max-width:340px}
  .v32-service-hero-visual{min-height:300px}.v32-browser-mock{width:74%;right:5%;bottom:8%}
  .v32-section-head h2,.v32-about-strength-head h2{font-size:2.25rem}.v32-section-head{margin-bottom:26px}
  .v32-service-cards{grid-template-columns:1fr 1fr;gap:8px}.v32-service-cards article{min-height:168px;padding:18px 12px}.v32-icon{width:38px;height:38px;font-size:1.5rem}.v32-service-cards h3{font-size:.88rem}.v32-service-cards p{font-size:.7rem}
  .v32-pricing-head{grid-template-columns:1fr;gap:3px}.v32-pricing-head h2{font-size:2rem}.v32-plan-grid{grid-template-columns:1fr;gap:14px}.v32-plan-card{padding:24px 22px}.v32-plan-card.is-featured{padding:23px 21px}.v32-entry-options{grid-template-columns:1fr}.v32-entry-options article{grid-template-columns:34px 1fr auto}.v32-plan-price strong{font-size:1.8rem}
  .v32-check-list-grid{grid-template-columns:1fr}.v32-bottom-card{display:grid;gap:24px;padding:28px 22px}.v32-bottom-card h2{font-size:1.9rem}
  .v32-about-hero{min-height:500px}.v32-about-hero-bg{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.9) 42%,rgba(255,255,255,.63) 72%,rgba(255,255,255,.38) 100%),url('../assets/hero/musashikosugi-towers.webp') 58% center/cover no-repeat}.v32-about-hero-inner{min-height:500px;align-items:flex-start}.v32-about-hero-copy{padding:38px 0}.v32-about-hero-copy h1{font-size:2.55rem;line-height:1.2}.v32-about-hero-copy>p:not(.v32-kicker){font-size:.92rem;line-height:1.8;max-width:22em}
  .v32-about-copy-block h2{font-size:2.35rem}.v32-about-screen-visual{min-height:280px}.v32-about-browser{width:82%}
  .v32-strength-grid{grid-template-columns:1fr}.v32-strength-grid img{height:180px}.v32-strength-no{top:155px}.v32-strength-grid h3{font-size:1rem;white-space:normal}.v32-strength-grid p{font-size:.82rem}
  .v32-about-stance-grid h2{font-size:2.2rem}.v32-stance-art{min-height:260px}.v32-value-grid{grid-template-columns:1fr 1fr}.v32-value-grid article{padding:20px 15px}.v32-value-grid h3{font-size:.88rem}.v32-value-grid p{font-size:.74rem}
}

@media(max-width:390px){
  .v32-hero-copy h1,.v32-about-hero-copy h1{font-size:2.32rem}.v32-service-cards{grid-template-columns:1fr}.v32-service-cards article{min-height:0}.v32-value-grid{grid-template-columns:1fr}
}

/* V32 typography/icon refinements */
.v32-title-line{display:block;white-space:nowrap}
.v32-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v32-about-strength-head h2{font-size:clamp(2rem,3vw,2.8rem);line-height:1.28}
.v32-about-copy-block h2{font-size:clamp(2.3rem,3.5vw,3.25rem)}
@media(max-width:720px){.v32-title-line{white-space:normal}}
@media(min-width:721px){
  .v32-service-hero .v32-hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr)}
  .v32-service-hero .v32-hero-copy h1{font-size:clamp(3rem,3.9vw,3.55rem)}
}
@media(min-width:721px){
  .v32-service-hero .v32-hero-copy h1{font-size:clamp(3rem,3.5vw,3.2rem)}
}
@media(min-width:721px){
  .v32-service-hero>.wrap{max-width:1240px}
  .v32-service-hero .v32-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr)}
  .v32-service-hero .v32-hero-copy h1{font-size:3rem}
}


/* ===== V33: match approved two-page reference more closely ===== */
.v33-subpage .site-header{background:#fff}
.v33-subpage .header-inner{min-height:64px}
.v33-subpage .brand{font-size:1.38rem;gap:9px}
.v33-subpage .brand-mark{width:11px;height:11px;flex-basis:11px;border-width:2px}
.v33-subpage .site-nav{gap:18px}
.v33-subpage .site-nav a{font-size:.78rem}
.v33-subpage .site-nav .nav-cta,.v33-subpage .v17-header-cta{padding:10px 18px;border-radius:6px}

/* Service page: compact hero + dense 8-card overview so pricing enters the first screen, as in the reference. */
.v33-subpage.v32-services-page .v32-service-hero{background:linear-gradient(135deg,#f9fdfe 0%,#edf9fc 100%)}
.v33-subpage.v32-services-page .v32-service-hero>.wrap{max-width:1180px}
.v33-subpage.v32-services-page .v32-hero-grid{grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);min-height:350px}
.v33-subpage.v32-services-page .v32-hero-copy{padding:34px 28px 30px 0}
.v33-subpage.v32-services-page .v32-hero-copy h1{font-size:clamp(2.7rem,3.5vw,3.15rem);line-height:1.18;margin-bottom:14px}
.v33-subpage.v32-services-page .v32-hero-copy>p:not(.v32-kicker):not(.v32-hero-note){font-size:.9rem;line-height:1.75;margin-bottom:16px;max-width:575px}
.v33-subpage.v32-services-page .v32-kicker{font-size:.82rem;margin-bottom:12px}
.v33-subpage.v32-services-page .v32-primary-btn{min-width:205px;padding:13px 20px;border-radius:5px;font-size:.88rem}
.v33-subpage.v32-services-page .v32-hero-note{font-size:.72rem;margin-top:7px}
.v33-subpage.v32-services-page .v32-service-hero-visual{min-height:350px;background:linear-gradient(135deg,#f5fbfd 0%,#e6f4f7 100%)}
.v33-subpage.v32-services-page .v32-service-hero-visual::before{background:linear-gradient(90deg,#eef9fc 0%,rgba(238,249,252,.15) 18%,rgba(238,249,252,0) 48%)}
.v33-subpage.v32-services-page .v32-service-hero-bg{filter:saturate(.72) brightness(1.16);opacity:.86;object-position:center 42%}
.v33-subpage.v32-services-page .v32-browser-mock{width:60%;right:5%;bottom:10%;padding:6px;border-radius:7px;box-shadow:0 18px 30px rgba(20,37,68,.20)}
.v33-subpage.v32-services-page .v32-browser-bar{padding-bottom:5px}
.v33-subpage.v32-services-page .v32-browser-bar i{width:5px;height:5px}

.v33-subpage .v32-section{padding:52px 0}
.v33-subpage.v32-services-page .v32-services-overview{position:relative;padding-top:44px;background:linear-gradient(180deg,#eef9fc 0%,#e7f6fa 100%)}
.v33-subpage.v32-services-page .v32-services-overview::before{content:"";position:absolute;left:0;right:0;top:-22px;height:45px;background:#eef9fc;border-radius:50% 50% 0 0/100% 100% 0 0}
.v33-subpage.v32-services-page .v32-section-head{margin-bottom:20px}
.v33-subpage.v32-services-page .v32-pill{padding:5px 14px;font-size:.72rem!important;margin-bottom:10px!important}
.v33-subpage.v32-services-page .v32-section-head h2{font-size:2.1rem;line-height:1.25;margin-bottom:5px}
.v33-subpage.v32-services-page .v32-section-head p:last-child{font-size:.82rem;line-height:1.55}
.v33-subpage.v32-services-page .v32-service-cards{gap:8px}
.v33-subpage.v32-services-page .v32-service-cards article{min-height:132px;padding:15px 12px 13px;border-radius:6px}
.v33-subpage.v32-services-page .v32-icon{width:34px;height:34px;margin-bottom:5px}
.v33-subpage.v32-services-page .v32-icon svg{width:27px;height:27px}
.v33-subpage.v32-services-page .v32-service-cards h3{font-size:.82rem;margin-bottom:4px}
.v33-subpage.v32-services-page .v32-service-cards p{font-size:.67rem;line-height:1.5}

.v33-subpage.v32-services-page .v32-pricing-section{padding-top:42px}
.v33-subpage.v32-services-page .v32-pricing-head{grid-template-columns:110px 1fr;gap:18px;margin-bottom:22px}
.v33-subpage.v32-services-page .v32-pricing-head h2{font-size:2rem;line-height:1.28}
.v33-subpage.v32-services-page .v32-pricing-head p{font-size:.78rem}
.v33-subpage.v32-services-page .v32-plan-card{padding:18px 18px 20px}
.v33-subpage.v32-services-page .v32-plan-card.is-featured{padding:17px 17px 19px}
.v33-subpage.v32-services-page .v32-plan-name{font-size:.88rem}
.v33-subpage.v32-services-page .v32-plan-desc{font-size:.7rem;margin-bottom:12px!important}
.v33-subpage.v32-services-page .v32-plan-price{margin-bottom:12px!important}
.v33-subpage.v32-services-page .v32-plan-price strong{font-size:1.75rem}
.v33-subpage.v32-services-page .v32-plan-card li{font-size:.69rem;gap:4px}
.v33-subpage.v32-services-page .v32-entry-options{grid-template-columns:1fr 1.25fr .8fr 1fr;margin-top:10px}
.v33-subpage.v32-services-page .v32-entry-options article{padding:10px 12px;grid-template-columns:28px 1fr auto}
.v33-subpage.v32-services-page .v32-mini-icon{font-size:1rem}
.v33-subpage.v32-services-page .v32-entry-options strong{font-size:.7rem}.v33-subpage.v32-services-page .v32-entry-options p{font-size:.58rem}.v33-subpage.v32-services-page .v32-entry-options b{font-size:.74rem}

/* About: use a true split hero instead of a full-bleed LP hero. */
.v33-subpage.v32-about-page .v32-about-hero{min-height:350px;background:#f8fdfe;border-bottom:0}
.v33-subpage.v32-about-page .v32-about-hero-bg{left:50%;right:0;background:linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,.03)),url('../assets/hero/musashikosugi-towers.webp') center 56%/cover no-repeat}
.v33-subpage.v32-about-page .v32-about-hero-inner{min-height:350px;align-items:center}
.v33-subpage.v32-about-page .v32-about-hero-copy{width:48%;max-width:none;padding:30px 34px 28px 0;background:linear-gradient(90deg,#fff 0%,#fff 86%,rgba(255,255,255,.84) 100%)}
.v33-subpage.v32-about-page .v32-about-hero-copy h1{font-size:clamp(2.65rem,3.6vw,3.35rem);line-height:1.18;margin-bottom:14px}
.v33-subpage.v32-about-page .v32-about-hero-copy>p:not(.v32-kicker){font-size:.82rem;line-height:1.75;max-width:500px}
.v33-subpage.v32-about-page .v32-kicker{font-size:.8rem;margin-bottom:12px}

/* About opening: flatter two-column editorial composition, like the approved mock. */
.v33-subpage.v32-about-page .v32-about-thought{padding:34px 0;background:#fff}
.v33-subpage.v32-about-page .v32-about-thought-grid{grid-template-columns:minmax(0,.84fr) minmax(430px,1.16fr);gap:30px;align-items:stretch}
.v33-subpage.v32-about-page .v32-about-copy-block{padding:12px 0 8px}
.v33-subpage.v32-about-page .v32-about-copy-block h2{font-size:2.55rem;line-height:1.25;margin-bottom:10px}
.v33-subpage.v32-about-page .v32-about-copy-block>p:not(.v32-side-kicker){font-size:.8rem;line-height:1.75;margin-bottom:8px}
.v33-subpage.v32-about-page .v32-about-screen-visual{min-height:255px;border-radius:0;background:linear-gradient(135deg,#f8fcfd,#e9f6f9)}
.v33-subpage.v32-about-page .v32-screen-bg{background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(231,245,249,.88)),url('../demos/c-b/assets/images/office-building.webp') center/cover no-repeat;filter:saturate(.72) brightness(1.08)}
.v33-subpage.v32-about-page .v32-about-browser{width:67%;right:5%;bottom:7%;padding:6px;border-radius:6px;box-shadow:0 16px 28px rgba(20,37,68,.18)}

.v33-subpage.v32-about-page .v32-about-strengths{padding:40px 0;background:var(--v32-paper)}
.v33-subpage.v32-about-page .v32-about-strength-head{grid-template-columns:130px 1fr;gap:18px;margin-bottom:16px}
.v33-subpage.v32-about-page .v32-about-strength-head h2{font-size:2rem;line-height:1.24}
.v33-subpage.v32-about-page .v32-strength-grid{gap:8px}
.v33-subpage.v32-about-page .v32-strength-grid article{padding-bottom:15px}
.v33-subpage.v32-about-page .v32-strength-grid img{height:118px}
.v33-subpage.v32-about-page .v32-strength-no{top:96px;width:36px;height:36px;font-size:.95rem}
.v33-subpage.v32-about-page .v32-strength-grid h3{margin:19px 12px 5px;font-size:.86rem}
.v33-subpage.v32-about-page .v32-strength-grid p{margin:0 12px;font-size:.68rem;line-height:1.55}

/* Lower editorial block: no face/representative photo; use a simple office/building visual instead of synthetic collage. */
.v33-subpage.v32-about-page .v32-about-stance{padding:38px 0;background:#fff}
.v33-subpage.v32-about-page .v32-about-stance-grid{grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);gap:34px}
.v33-subpage.v32-about-page .v32-stance-art{min-height:245px;border-radius:0;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.08)),url('../demos/c-b/assets/images/office-building.webp') center/cover no-repeat}
.v33-subpage.v32-about-page .v32-note-sheet,.v33-subpage.v32-about-page .v32-mini-screen{display:none}
.v33-subpage.v32-about-page .v32-about-stance-grid h2{font-size:2.2rem;line-height:1.28;margin-bottom:10px}
.v33-subpage.v32-about-page .v32-about-stance-grid>div:last-child>p:not(.v32-side-kicker){font-size:.79rem;line-height:1.7;margin-bottom:8px}
.v33-subpage.v32-about-page .v32-about-values{padding:42px 0}

@media(max-width:1050px){
  .v33-subpage.v32-services-page .v32-hero-grid{grid-template-columns:1fr 1fr}
  .v33-subpage.v32-about-page .v32-about-thought-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  .v33-subpage .header-inner{min-height:66px}.v33-subpage .brand{font-size:1.3rem}
  .v33-subpage.v32-services-page .v32-hero-grid{grid-template-columns:1fr;min-height:0}
  .v33-subpage.v32-services-page .v32-hero-copy{padding:30px 0 22px}.v33-subpage.v32-services-page .v32-hero-copy h1{font-size:2.35rem}
  .v33-subpage.v32-services-page .v32-service-hero-visual{min-height:245px}.v33-subpage.v32-services-page .v32-browser-mock{width:65%}
  .v33-subpage.v32-services-page .v32-services-overview{padding-top:38px}.v33-subpage.v32-services-page .v32-section-head h2{font-size:1.9rem}
  .v33-subpage.v32-services-page .v32-service-cards{grid-template-columns:1fr 1fr}.v33-subpage.v32-services-page .v32-service-cards article{min-height:132px;padding:14px 10px}
  .v33-subpage.v32-services-page .v32-entry-options{grid-template-columns:1fr}
  .v33-subpage.v32-about-page .v32-about-hero{min-height:430px;background:#fff}
  .v33-subpage.v32-about-page .v32-about-hero-bg{left:0;top:215px;height:215px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04)),url('../assets/hero/musashikosugi-towers.webp') 58% center/cover no-repeat}
  .v33-subpage.v32-about-page .v32-about-hero-inner{min-height:430px;align-items:flex-start}
  .v33-subpage.v32-about-page .v32-about-hero-copy{width:100%;padding:28px 0 18px;background:#fff}.v33-subpage.v32-about-page .v32-about-hero-copy h1{font-size:2.35rem}.v33-subpage.v32-about-page .v32-about-hero-copy>p:not(.v32-kicker){font-size:.82rem;max-width:none}
  .v33-subpage.v32-about-page .v32-about-thought{padding:34px 0}.v33-subpage.v32-about-page .v32-about-thought-grid{grid-template-columns:1fr;gap:18px}.v33-subpage.v32-about-page .v32-about-copy-block h2{font-size:2.15rem}.v33-subpage.v32-about-page .v32-about-screen-visual{min-height:225px}
  .v33-subpage.v32-about-page .v32-about-strength-head{grid-template-columns:1fr;gap:4px}.v33-subpage.v32-about-page .v32-strength-grid{grid-template-columns:1fr}.v33-subpage.v32-about-page .v32-strength-grid img{height:170px}.v33-subpage.v32-about-page .v32-strength-no{top:148px}
  .v33-subpage.v32-about-page .v32-about-stance-grid{grid-template-columns:1fr;gap:18px}.v33-subpage.v32-about-page .v32-stance-art{min-height:210px}.v33-subpage.v32-about-page .v32-about-stance-grid h2{font-size:2rem}
}

/* V33 second pass: spacing/proportion match after reference comparison */
.v33-subpage .header-inner{min-height:60px}
.v33-subpage .brand{font-size:1.28rem}
.v33-subpage .site-nav a{font-size:.74rem}
.v33-subpage .site-nav .nav-cta,.v33-subpage .v17-header-cta{padding:9px 17px}

.v33-subpage.v32-services-page .v32-hero-grid{min-height:310px;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr)}
.v33-subpage.v32-services-page .v32-hero-copy{padding:26px 26px 24px 0}
.v33-subpage.v32-services-page .v32-hero-copy h1{font-size:2.7rem;line-height:1.18;margin-bottom:11px}
.v33-subpage.v32-services-page .v32-hero-copy>p:not(.v32-kicker):not(.v32-hero-note){font-size:.84rem;line-height:1.68;margin-bottom:13px;max-width:560px}
.v33-subpage.v32-services-page .v32-service-hero-visual{min-height:310px}
.v33-subpage.v32-services-page .v32-browser-mock{width:58%;bottom:9%}
.v33-subpage.v32-services-page .v32-services-overview{padding:30px 0 32px}
.v33-subpage.v32-services-page .v32-services-overview::before{top:-17px;height:35px}
.v33-subpage.v32-services-page .v32-section-head{margin-bottom:14px}
.v33-subpage.v32-services-page .v32-pill{margin-bottom:7px!important}
.v33-subpage.v32-services-page .v32-section-head h2{font-size:1.85rem;margin-bottom:3px}
.v33-subpage.v32-services-page .v32-section-head p:last-child{font-size:.74rem}
.v33-subpage.v32-services-page .v32-service-cards{gap:7px}
.v33-subpage.v32-services-page .v32-service-cards article{min-height:108px;padding:10px 9px 9px}
.v33-subpage.v32-services-page .v32-icon{width:29px;height:29px;margin-bottom:3px}
.v33-subpage.v32-services-page .v32-icon svg{width:23px;height:23px}
.v33-subpage.v32-services-page .v32-service-cards h3{font-size:.73rem;margin-bottom:2px}
.v33-subpage.v32-services-page .v32-service-cards p{font-size:.59rem;line-height:1.42}
.v33-subpage.v32-services-page .v32-pricing-section{padding:34px 0 46px}

.v33-subpage.v32-about-page .v32-about-hero{min-height:305px}
.v33-subpage.v32-about-page .v32-about-hero-inner{min-height:305px}
.v33-subpage.v32-about-page .v32-about-hero-copy{padding:24px 32px 22px 0}
.v33-subpage.v32-about-page .v32-about-hero-copy h1{font-size:2.85rem;line-height:1.18;margin-bottom:10px}
.v33-subpage.v32-about-page .v32-about-hero-copy>p:not(.v32-kicker){font-size:.75rem;line-height:1.68}
.v33-subpage.v32-about-page .v32-about-thought{padding:24px 0}
.v33-subpage.v32-about-page .v32-about-thought-grid{grid-template-columns:minmax(0,.84fr) minmax(430px,1.16fr);gap:24px}
.v33-subpage.v32-about-page .v32-about-copy-block{padding:5px 0}
.v33-subpage.v32-about-page .v32-about-copy-block h2{font-size:2.2rem;line-height:1.23;margin-bottom:7px}
.v33-subpage.v32-about-page .v32-about-copy-block>p:not(.v32-side-kicker){font-size:.72rem;line-height:1.62;margin-bottom:6px}
.v33-subpage.v32-about-page .v32-about-screen-visual{min-height:205px}
.v33-subpage.v32-about-page .v32-about-browser{width:63%;right:5%;bottom:6%}
.v33-subpage.v32-about-page .v32-about-strengths{padding:30px 0 34px}
.v33-subpage.v32-about-page .v32-about-strength-head{grid-template-columns:150px 1fr;gap:12px;margin-bottom:12px;align-items:center}
.v33-subpage.v32-about-page .v32-about-strength-head .v32-side-kicker{white-space:nowrap;margin:0}
.v33-subpage.v32-about-page .v32-about-strength-head h2{font-size:1.72rem;line-height:1.2;margin:0}
.v33-subpage.v32-about-page .v32-strength-grid img{height:106px}
.v33-subpage.v32-about-page .v32-strength-no{top:85px;width:34px;height:34px;font-size:.9rem}
.v33-subpage.v32-about-page .v32-strength-grid h3{margin:18px 11px 4px;font-size:.78rem}
.v33-subpage.v32-about-page .v32-strength-grid p{font-size:.62rem;line-height:1.48;margin:0 11px}
.v33-subpage.v32-about-page .v32-about-stance{padding:30px 0}
.v33-subpage.v32-about-page .v32-stance-art{min-height:210px}
.v33-subpage.v32-about-page .v32-about-stance-grid h2{font-size:1.9rem}
.v33-subpage.v32-about-page .v32-about-stance-grid>div:last-child>p:not(.v32-side-kicker){font-size:.72rem;line-height:1.6}

@media(max-width:720px){
  .v33-subpage .header-inner{min-height:64px}.v33-subpage .brand{font-size:1.28rem}
  .v33-subpage.v32-services-page .v32-hero-copy{padding:26px 0 20px}.v33-subpage.v32-services-page .v32-hero-copy h1{font-size:2.2rem}.v33-subpage.v32-services-page .v32-service-hero-visual{min-height:230px}
  .v33-subpage.v32-services-page .v32-services-overview{padding:34px 0}.v33-subpage.v32-services-page .v32-section-head h2{font-size:1.8rem}.v33-subpage.v32-services-page .v32-service-cards article{min-height:125px;padding:13px 10px}.v33-subpage.v32-services-page .v32-service-cards h3{font-size:.82rem}.v33-subpage.v32-services-page .v32-service-cards p{font-size:.66rem}
  .v33-subpage.v32-about-page .v32-about-hero{min-height:410px}.v33-subpage.v32-about-page .v32-about-hero-bg{top:205px;height:205px}.v33-subpage.v32-about-page .v32-about-hero-inner{min-height:410px}.v33-subpage.v32-about-page .v32-about-hero-copy{padding:24px 0 14px}.v33-subpage.v32-about-page .v32-about-hero-copy h1{font-size:2.25rem}.v33-subpage.v32-about-page .v32-about-hero-copy>p:not(.v32-kicker){font-size:.8rem}
  .v33-subpage.v32-about-page .v32-about-thought{padding:30px 0}.v33-subpage.v32-about-page .v32-about-copy-block h2{font-size:2rem}.v33-subpage.v32-about-page .v32-about-copy-block>p:not(.v32-side-kicker){font-size:.78rem}.v33-subpage.v32-about-page .v32-about-screen-visual{min-height:210px}
  .v33-subpage.v32-about-page .v32-about-strengths{padding:34px 0}.v33-subpage.v32-about-page .v32-about-strength-head{grid-template-columns:1fr;gap:5px}.v33-subpage.v32-about-page .v32-about-strength-head h2{font-size:1.9rem}.v33-subpage.v32-about-page .v32-strength-grid img{height:165px}.v33-subpage.v32-about-page .v32-strength-no{top:143px}
}

/* V33 mobile guard: later desktop overrides must not reintroduce fixed second columns. */
@media(max-width:720px){
  .v33-subpage.v32-services-page .v32-hero-grid{grid-template-columns:minmax(0,1fr)!important;width:100%}
  .v33-subpage.v32-services-page .v32-hero-copy{width:100%;min-width:0}
  .v33-subpage.v32-services-page .v32-service-hero-visual{width:100%;min-width:0}
  .v33-subpage.v32-about-page .v32-about-thought-grid,
  .v33-subpage.v32-about-page .v32-about-stance-grid{grid-template-columns:minmax(0,1fr)!important;width:100%}
  .v33-subpage.v32-about-page .v32-about-screen-visual,
  .v33-subpage.v32-about-page .v32-stance-art{width:100%;min-width:0;max-width:100%}
  .v33-subpage.v32-about-page .v32-about-hero-copy{min-width:0}
}
.v33-mobile-only{display:none}
@media(max-width:720px){
  .v33-mobile-only{display:inline}
  .v33-subpage.v32-services-page .v33-service-title-line:first-child{white-space:nowrap;font-size:.94em}
  .v33-subpage.v32-services-page .v33-service-title-line{word-break:keep-all;overflow-wrap:normal}
  .v33-subpage.v32-about-page .v33-about-title-line{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
  .v33-subpage.v32-about-page .v32-about-hero-copy h1{font-size:1.95rem}
}
/* V33 quality pass below the reference viewport. */
.v33-subpage.v32-services-page .v32-included-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:54px}
.v33-subpage.v32-services-page .v32-included-grid h2{font-size:2.35rem;line-height:1.3;max-width:12em}
@media(max-width:720px){
  .v33-subpage.v32-services-page .v32-included-grid{grid-template-columns:1fr;gap:30px}
  .v33-subpage.v32-services-page .v32-included-grid h2{font-size:2rem;max-width:none}
}

/* ===== V34 subpages: reference-faithful layout + wrapping fix ===== */
.v34-subpage{
  --v34-navy:#172743;
  --v34-teal:#08a7c7;
  --v34-teal-soft:#eaf9fd;
  --v34-orange:#ff7418;
  --v34-cream:#fbf8f2;
  --v34-line:#d8e8ee;
  --v34-yellow:#f3d84f;
  color:var(--v34-navy);
}
.v34-subpage main{overflow:hidden}
.v34-subpage .wrap{max-width:1180px}
.v34-subpage h1,.v34-subpage h2,.v34-subpage h3{color:var(--v34-navy)}
.v34-subpage p{line-break:strict;word-break:normal;overflow-wrap:break-word}
.v34-subpage .v34-title-line{display:block;white-space:nowrap}
.v34-subpage .v34-title-part{display:inline}
.v34-subpage .v32-marker{
  color:inherit;
  font-weight:700;
  background:linear-gradient(transparent 64%,var(--v34-yellow) 64%,var(--v34-yellow) 91%,transparent 91%);
  padding:0 .03em;
}

/* Header: keep TOP brand system, avoid nav wrapping. */
.v34-subpage .header-inner{min-height:72px;gap:24px}
.v34-subpage .brand{font-size:1.55rem;white-space:nowrap}
.v34-subpage .site-nav{gap:28px;align-items:center}
.v34-subpage .site-nav a{font-size:.9rem;white-space:nowrap}
.v34-subpage .site-nav .nav-cta,.v34-subpage .v17-header-cta{padding:12px 24px;border-radius:10px;background:var(--v34-orange);color:#fff}

/* Services hero */
.v34-subpage.v32-services-page .v32-service-hero{background:linear-gradient(135deg,#f8fdff 0%,#eaf8fd 100%);border-bottom:0}
.v34-subpage.v32-services-page .v32-service-hero>.wrap{max-width:1180px}
.v34-subpage.v32-services-page .v32-hero-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(420px,.82fr);
  min-height:420px;
  align-items:stretch;
}
.v34-subpage.v32-services-page .v32-hero-copy{
  padding:54px 48px 44px 0;
  align-self:center;
  min-width:0;
}
.v34-subpage.v32-services-page .v32-kicker,
.v34-subpage.v32-about-page .v32-kicker,
.v34-subpage .v32-side-kicker{
  font-size:.95rem;
  line-height:1.35;
  font-weight:700;
  color:var(--v34-navy);
  letter-spacing:.02em;
}
.v34-subpage.v32-services-page .v32-kicker::before,
.v34-subpage.v32-about-page .v32-kicker::before,
.v34-subpage .v32-side-kicker::before{background:var(--v34-teal)}
.v34-subpage.v32-services-page .v32-hero-copy h1{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(2.7rem,3.5vw,3.2rem);
  line-height:1.27;
  letter-spacing:-.03em;
  margin:16px 0 16px;
}
.v34-subpage.v32-services-page .v32-hero-copy>p:not(.v32-kicker):not(.v32-hero-note){
  max-width:610px;
  font-size:1rem;
  line-height:1.8;
  margin:0 0 20px;
  color:#506070;
}
.v34-subpage.v32-services-page .v32-primary-btn{
  min-width:270px;
  width:auto;
  padding:17px 26px;
  border-radius:8px;
  background:var(--v34-orange);
  font-size:1rem;
}
.v34-subpage.v32-services-page .v32-hero-note{font-size:.84rem;margin-top:10px;color:#697783}
.v34-subpage.v32-services-page .v34-service-hero-visual{
  min-height:420px;
  overflow:hidden;
  position:relative;
  background:#eef8fb;
}
.v34-subpage.v32-services-page .v34-service-hero-image{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center center;
  transform:scale(1.03);
}

/* Services overview: readable 4 x 2 grid. */
.v34-subpage.v32-services-page .v32-services-overview{
  padding:54px 0 58px;
  background:linear-gradient(180deg,#effaff 0%,#e8f7fc 100%);
}
.v34-subpage.v32-services-page .v32-services-overview::before{display:none}
.v34-subpage.v32-services-page .v32-section-head{margin:0 auto 26px;max-width:900px}
.v34-subpage.v32-services-page .v32-pill{font-size:.84rem;margin-bottom:12px!important;padding:7px 16px}
.v34-subpage.v32-services-page .v32-section-head h2{
  font-family:'Shippori Mincho',serif;
  font-size:2.35rem;
  line-height:1.3;
  margin:0 0 8px;
  letter-spacing:-.02em;
}
.v34-subpage.v32-services-page .v32-section-head p:last-child{font-size:.95rem;line-height:1.7}
.v34-subpage.v32-services-page .v32-service-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v34-subpage.v32-services-page .v32-service-cards article{
  min-height:158px;
  padding:20px 16px 18px;
  border:1px solid rgba(23,39,67,.08);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  background:#fff;
}
.v34-subpage.v32-services-page .v32-icon{width:38px;height:38px;margin:0 0 10px;color:var(--v34-teal)}
.v34-subpage.v32-services-page .v32-icon svg{width:31px;height:31px}
.v34-subpage.v32-services-page .v32-service-cards h3{font-size:1rem;line-height:1.45;margin:0 0 7px;white-space:nowrap}
.v34-subpage.v32-services-page .v32-service-cards p{font-size:.82rem;line-height:1.58;margin:0;color:#5d6a76;max-width:20em}

/* Pricing */
.v34-subpage.v32-services-page .v32-pricing-section{padding:54px 0 62px;background:var(--v34-cream)}
.v34-subpage.v32-services-page .v32-pricing-head{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:24px;
  align-items:start;
  max-width:none;
  margin:0 0 28px;
}
.v34-subpage.v32-services-page .v32-pricing-head .v32-side-kicker{white-space:nowrap;margin:8px 0 0}
.v34-subpage.v32-services-page .v32-pricing-head h2{
  font-family:'Shippori Mincho',serif;
  font-size:2.15rem;
  line-height:1.35;
  letter-spacing:-.02em;
  margin:0 0 6px;
}
.v34-subpage.v32-services-page .v32-pricing-head p{font-size:.9rem;line-height:1.65;margin:0}
.v34-subpage.v32-services-page .v32-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.v34-subpage.v32-services-page .v32-plan-card{
  min-height:390px;
  padding:24px 24px 22px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #d5e8ef;
}
.v34-subpage.v32-services-page .v32-plan-card.is-featured{border:2px solid var(--v34-orange);padding:23px}
.v34-subpage.v32-services-page .v32-recommend{font-size:.75rem;padding:5px 16px}
.v34-subpage.v32-services-page .v32-plan-name{font-size:1.15rem;line-height:1.4;margin-bottom:5px;color:var(--v34-teal);font-weight:700}
.v34-subpage.v32-services-page .v32-plan-card.is-featured .v32-plan-name{color:var(--v34-orange)}
.v34-subpage.v32-services-page .v32-plan-desc{font-size:.86rem;line-height:1.55;min-height:48px;margin-bottom:12px;color:#5b6975}
.v34-subpage.v32-services-page .v32-plan-price{margin:0 0 14px;white-space:nowrap}
.v34-subpage.v32-services-page .v32-plan-price strong{font-size:2rem;line-height:1.2}
.v34-subpage.v32-services-page .v32-plan-price small{font-size:.72rem;margin-left:5px}
.v34-subpage.v32-services-page .v32-plan-card ul{margin-top:auto}
.v34-subpage.v32-services-page .v32-plan-card li{font-size:.86rem;line-height:1.55;margin-top:5px;padding-left:1.45em}
.v34-subpage.v32-services-page .v32-entry-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.v34-subpage.v32-services-page .v32-entry-options article{min-height:76px;padding:13px 16px;align-items:center}
.v34-subpage.v32-services-page .v32-entry-options strong{font-size:.92rem}
.v34-subpage.v32-services-page .v32-entry-options p{font-size:.75rem;line-height:1.5;margin:2px 0 0}
.v34-subpage.v32-services-page .v32-entry-options b{font-size:1rem;white-space:nowrap}
.v34-subpage.v32-services-page .v32-price-note{font-size:.78rem;line-height:1.6;margin:12px 0 0}

/* Services lower sections */
.v34-subpage.v32-services-page .v32-included-section{padding:62px 0;background:#fff}
.v34-subpage.v32-services-page .v32-included-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.v34-subpage.v32-services-page .v32-included-grid h2{font-family:'Shippori Mincho',serif;font-size:2.3rem;line-height:1.35;margin:10px 0 14px;max-width:none}
.v34-subpage.v32-services-page .v32-included-grid p{font-size:.95rem;line-height:1.8}
.v34-subpage.v32-services-page .v32-check-list-grid span{font-size:.9rem;line-height:1.5}
.v34-subpage.v32-services-page .v32-service-bottom{padding:50px 0;background:#eff8fb}

/* About hero */
.v34-subpage.v32-about-page .v32-about-hero{
  min-height:430px;
  background:#f8fdff;
  border-bottom:0;
}
.v34-subpage.v32-about-page .v32-about-hero-bg{
  left:52%;right:0;top:0;bottom:0;height:auto;
  background-image:url('../assets/subpages/about-hero-city-generated.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.v34-subpage.v32-about-page .v32-about-hero-bg::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,0) 36%);
}
.v34-subpage.v32-about-page .v32-about-hero-inner{min-height:430px;align-items:center}
.v34-subpage.v32-about-page .v32-about-hero-copy{
  width:52%;max-width:none;padding:48px 44px 44px 0;background:linear-gradient(90deg,#fff 0%,#fff 88%,rgba(255,255,255,.75) 100%);
}
.v34-subpage.v32-about-page .v32-about-hero-copy h1{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(2.75rem,3.5vw,3.2rem);
  line-height:1.28;
  letter-spacing:-.03em;
  margin:16px 0 16px;
}
.v34-subpage.v32-about-page .v32-about-hero-copy>p:not(.v32-kicker){font-size:.96rem;line-height:1.8;max-width:600px;margin:0;color:#506070}

/* About thought */
.v34-subpage.v32-about-page .v32-about-thought{padding:56px 0;background:#fff}
.v34-subpage.v32-about-page .v32-about-thought-grid{grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);gap:52px;align-items:center}
.v34-subpage.v32-about-page .v32-about-copy-block{padding:0;min-width:0}
.v34-subpage.v32-about-page .v32-about-copy-block h2{
  font-family:'Shippori Mincho',serif;
  font-size:2.65rem;
  line-height:1.34;
  letter-spacing:-.025em;
  margin:14px 0 16px;
}
.v34-subpage.v32-about-page .v32-about-copy-block>p:not(.v32-side-kicker){font-size:.95rem;line-height:1.8;margin:0 0 9px;max-width:37em}
.v34-subpage.v32-about-page .v34-about-thought-visual{min-height:320px;border-radius:0;overflow:hidden;background:#eef7fa}
.v34-subpage.v32-about-page .v34-about-thought-visual img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}

/* About strengths */
.v34-subpage.v32-about-page .v32-about-strengths{padding:54px 0 60px;background:var(--v34-cream)}
.v34-subpage.v32-about-page .v32-about-strength-head{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center;margin-bottom:24px}
.v34-subpage.v32-about-page .v32-about-strength-head .v32-side-kicker{margin:0;white-space:nowrap}
.v34-subpage.v32-about-page .v32-about-strength-head h2{font-family:'Shippori Mincho',serif;font-size:2rem;line-height:1.4;margin:0;white-space:nowrap}
.v34-subpage.v32-about-page .v32-strength-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v34-subpage.v32-about-page .v32-strength-grid article{background:#fff;border:1px solid #e5e1d8;position:relative;padding-bottom:18px}
.v34-subpage.v32-about-page .v32-strength-grid img{width:100%;height:170px;object-fit:cover;display:block}
.v34-subpage.v32-about-page .v32-strength-no{top:148px;left:16px;width:42px;height:42px;font-size:1rem;background:#fff;border:1px solid #d5e7ec;color:var(--v34-teal)}
.v34-subpage.v32-about-page .v32-strength-grid h3{font-size:1rem;line-height:1.5;margin:26px 18px 7px;white-space:nowrap}
.v34-subpage.v32-about-page .v32-strength-grid p{font-size:.84rem;line-height:1.7;margin:0 18px;color:#5c6874}

/* About stance */
.v34-subpage.v32-about-page .v32-about-stance{padding:58px 0;background:#fff}
.v34-subpage.v32-about-page .v32-about-stance-grid{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:50px;align-items:center}
.v34-subpage.v32-about-page .v34-stance-art{min-height:260px;overflow:hidden;background:#f4fafc}
.v34-subpage.v32-about-page .v34-stance-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.v34-subpage.v32-about-page .v32-about-stance-grid h2{font-family:'Shippori Mincho',serif;font-size:2.2rem;line-height:1.45;margin:12px 0 16px}
.v34-subpage.v32-about-page .v32-about-stance-grid>div:last-child>p:not(.v32-side-kicker){font-size:.93rem;line-height:1.8;margin:0 0 8px;max-width:44em}
.v34-subpage.v32-about-page .v32-about-values{padding:58px 0;background:#f3fbfd}
.v34-subpage.v32-about-page .v32-value-grid article{min-height:150px}
.v34-subpage.v32-about-page .v32-about-bottom{padding:50px 0;background:#fff}

/* Tablet */
@media(max-width:1050px){
  .v34-subpage .site-nav{gap:18px}
  .v34-subpage.v32-services-page .v32-hero-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.8fr)}
  .v34-subpage.v32-services-page .v32-hero-copy h1{font-size:2.6rem}
  .v34-subpage.v32-services-page .v32-service-cards h3{white-space:normal}
  .v34-subpage.v32-about-page .v32-about-hero-copy h1{font-size:2.6rem}
  .v34-subpage.v32-about-page .v32-about-thought-grid{grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:34px}
  .v34-subpage.v32-about-page .v32-about-strength-head h2{white-space:normal}
}

/* Mobile: no fixed desktop line widths, deliberate phrase wrapping. */
@media(max-width:720px){
  .v34-subpage .wrap{padding-left:20px;padding-right:20px}
  .v34-subpage .header-inner{min-height:66px}
  .v34-subpage .brand{font-size:1.35rem}
  .v34-subpage .v34-title-line{white-space:normal}
  .v34-subpage .v34-title-part{display:block}

  .v34-subpage.v32-services-page .v32-hero-grid{grid-template-columns:1fr!important;min-height:0}
  .v34-subpage.v32-services-page .v32-hero-copy{padding:30px 0 24px}
  .v34-subpage.v32-services-page .v32-hero-copy h1{font-size:2rem;line-height:1.34;margin:14px 0}
  .v34-subpage.v32-services-page .v32-hero-copy>p:not(.v32-kicker):not(.v32-hero-note){font-size:.94rem;line-height:1.75;margin-bottom:18px}
  .v34-subpage.v32-services-page .v32-primary-btn{width:100%;max-width:none;min-width:0}
  .v34-subpage.v32-services-page .v34-service-hero-visual{min-height:285px;width:100%}
  .v34-subpage.v32-services-page .v34-service-hero-image{object-position:center center;transform:none}
  .v34-subpage.v32-services-page .v32-services-overview{padding:40px 0 44px}
  .v34-subpage.v32-services-page .v32-section-head{margin-bottom:20px}
  .v34-subpage.v32-services-page .v32-section-head h2{font-size:1.85rem;line-height:1.4}
  .v34-subpage.v32-services-page .v32-service-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .v34-subpage.v32-services-page .v32-service-cards article{min-height:158px;padding:16px 10px 14px}
  .v34-subpage.v32-services-page .v32-service-cards h3{font-size:.88rem;white-space:normal}
  .v34-subpage.v32-services-page .v32-service-cards p{font-size:.75rem;line-height:1.55}
  .v34-subpage.v32-services-page .v32-pricing-section{padding:42px 0 50px}
  .v34-subpage.v32-services-page .v32-pricing-head{grid-template-columns:1fr;gap:8px;margin-bottom:22px}
  .v34-subpage.v32-services-page .v32-pricing-head .v32-side-kicker{margin:0;white-space:nowrap}
  .v34-subpage.v32-services-page .v32-pricing-head h2{font-size:1.8rem;line-height:1.45}
  .v34-subpage.v32-services-page .v32-plan-grid{grid-template-columns:1fr;gap:14px}
  .v34-subpage.v32-services-page .v32-plan-card,.v34-subpage.v32-services-page .v32-plan-card.is-featured{min-height:0;padding:24px 22px}
  .v34-subpage.v32-services-page .v32-plan-desc{min-height:0}
  .v34-subpage.v32-services-page .v32-entry-options{grid-template-columns:1fr}
  .v34-subpage.v32-services-page .v32-included-section{padding:46px 0}
  .v34-subpage.v32-services-page .v32-included-grid{grid-template-columns:1fr;gap:26px}
  .v34-subpage.v32-services-page .v32-included-grid h2{font-size:1.9rem}

  .v34-subpage.v32-about-page .v32-about-hero{min-height:0;background:#fff;padding-bottom:0}
  .v34-subpage.v32-about-page .v32-about-hero-bg{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:245px;display:block;background-image:url('../assets/subpages/about-hero-city-generated.png');background-size:cover;background-position:center}
  .v34-subpage.v32-about-page .v32-about-hero-bg::after{display:none}
  .v34-subpage.v32-about-page .v32-about-hero-inner{min-height:0;display:block}
  .v34-subpage.v32-about-page .v32-about-hero-copy{width:100%;padding:30px 0 24px;background:#fff}
  .v34-subpage.v32-about-page .v32-about-hero-copy h1{font-size:2rem;line-height:1.34;margin:14px 0}
  .v34-subpage.v32-about-page .v32-about-hero-copy>p:not(.v32-kicker){font-size:.94rem;line-height:1.75;max-width:none}
  .v34-subpage.v32-about-page .v32-about-thought{padding:42px 0}
  .v34-subpage.v32-about-page .v32-about-thought-grid{grid-template-columns:1fr!important;gap:24px}
  .v34-subpage.v32-about-page .v32-about-copy-block h2{font-size:2rem;line-height:1.42;margin:12px 0 14px}
  .v34-subpage.v32-about-page .v32-about-copy-block>p:not(.v32-side-kicker){font-size:.93rem;line-height:1.75}
  .v34-subpage.v32-about-page .v34-about-thought-visual{min-height:245px}
  .v34-subpage.v32-about-page .v32-about-strengths{padding:42px 0 48px}
  .v34-subpage.v32-about-page .v32-about-strength-head{grid-template-columns:1fr;gap:7px;margin-bottom:20px}
  .v34-subpage.v32-about-page .v32-about-strength-head h2{font-size:1.8rem;line-height:1.45;white-space:normal}
  .v34-subpage.v32-about-page .v32-strength-grid{grid-template-columns:1fr;gap:14px}
  .v34-subpage.v32-about-page .v32-strength-grid img{height:185px}
  .v34-subpage.v32-about-page .v32-strength-no{top:163px}
  .v34-subpage.v32-about-page .v32-strength-grid h3{font-size:1rem;white-space:normal}
  .v34-subpage.v32-about-page .v32-strength-grid p{font-size:.86rem}
  .v34-subpage.v32-about-page .v32-about-stance{padding:44px 0}
  .v34-subpage.v32-about-page .v32-about-stance-grid{grid-template-columns:1fr!important;gap:24px}
  .v34-subpage.v32-about-page .v34-stance-art{min-height:230px}
  .v34-subpage.v32-about-page .v32-about-stance-grid h2{font-size:1.85rem;line-height:1.5}
  .v34-subpage.v32-about-page .v32-about-stance-grid>div:last-child>p:not(.v32-side-kicker){font-size:.93rem}
  .v34-subpage.v32-about-page .v32-about-values{padding:44px 0}
}

@media(max-width:390px){
  .v34-subpage.v32-services-page .v32-hero-copy h1,
  .v34-subpage.v32-about-page .v32-about-hero-copy h1{font-size:1.88rem}
  .v34-subpage.v32-services-page .v32-service-cards{grid-template-columns:1fr 1fr}
  .v34-subpage.v32-services-page .v32-service-cards article{min-height:166px}
  .v34-subpage.v32-about-page .v32-about-copy-block h2{font-size:1.9rem}
}

/* V34 final responsive polish after screenshot review */
.v34-subpage.v32-services-page .v32-section-head p:last-child{max-width:none}
.v34-subpage.v32-services-page .v32-service-cards p{font-size:.78rem;max-width:none}

@media(max-width:720px){
  .v34-subpage .v34-title-line{white-space:nowrap}
  .v34-subpage.v32-services-page .v32-hero-copy h1,
  .v34-subpage.v32-about-page .v32-about-hero-copy h1{font-size:1.7rem;line-height:1.4}
  .v34-subpage.v32-about-page .v32-about-hero{display:flex;flex-direction:column}
  .v34-subpage.v32-about-page .v32-about-hero-inner{order:1;width:100%}
  .v34-subpage.v32-about-page .v32-about-hero-bg{order:2;width:100%}
}

/* ===== V35 subpages: typography scale + information architecture refinement ===== */
.v35-subpage{
  --v35-fs-note:.82rem;
  --v35-fs-body:1rem;
  --v35-fs-lead:1.1rem;
  --v35-fs-h3:1.22rem;
  --v35-fs-h2:clamp(2rem,3vw,2.65rem);
  --v35-fs-h1:clamp(2.8rem,3.65vw,3.45rem);
  --v35-navy:#172743;
  --v35-teal:#08a7c7;
  --v35-orange:#ff7418;
  --v35-cream:#fbf8f2;
  --v35-line:#d8e8ee;
}
.v35-subpage .v35-mobile-home{display:none}
.v35-subpage p{font-size:var(--v35-fs-body)}
.v35-subpage .v32-kicker,.v35-subpage .v32-side-kicker{font-size:.96rem}
.v35-subpage .v32-hero-copy h1,.v35-subpage .v32-about-hero-copy h1{font-size:var(--v35-fs-h1)}
.v35-subpage .v32-hero-copy>p:not(.v32-kicker):not(.v32-hero-note),
.v35-subpage .v32-about-hero-copy>p:not(.v32-kicker){font-size:var(--v35-fs-body);line-height:1.85}

/* Services hero reassurance */
.v35-subpage.v32-services-page .v35-hero-reassurance{
  display:flex;gap:10px;align-items:flex-start;max-width:610px!important;margin:-4px 0 18px!important;
  padding:12px 14px;border:1px solid #cfe8ef;border-radius:8px;background:#f3fbfd;color:#334b5f!important;
  font-size:.94rem!important;line-height:1.65!important;
}
.v35-subpage.v32-services-page .v35-hero-reassurance span{flex:0 0 auto;color:var(--v35-teal);font-weight:800}

/* Shared subpage section heading */
.v35-section-heading{display:grid;grid-template-columns:180px minmax(0,1fr);gap:30px;align-items:start;margin:0 0 28px}
.v35-section-heading .v32-side-kicker{margin:8px 0 0;white-space:normal}
.v35-section-heading h2{font-family:'Shippori Mincho',serif;font-size:var(--v35-fs-h2);line-height:1.35;letter-spacing:-.02em;margin:0 0 8px}
.v35-section-heading>div>p{margin:0;color:#5b6975;line-height:1.75;font-size:var(--v35-fs-body)}
.v35-section-heading-centered{grid-template-columns:1fr;text-align:center;max-width:880px;margin:0 auto 30px}
.v35-section-heading-centered .v32-side-kicker{justify-content:center;margin:0 auto 6px}
.v35-section-heading-centered .v32-side-kicker::before{display:none}

/* Services: support content uses the same visual grammar as plan cards. */
.v35-subpage.v32-services-page .v35-support-section{padding:58px 0 64px;background:linear-gradient(180deg,#eef9fc 0%,#e8f7fb 100%)}
.v35-support-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v35-support-card{
  min-height:210px;padding:24px 20px 22px;background:#fff;border:1px solid #d5e8ef;border-radius:8px;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}
.v35-support-card .v32-icon{width:40px;height:40px;margin:0 0 16px;color:var(--v35-teal)}
.v35-support-card .v32-icon svg{width:32px;height:32px}
.v35-support-card h3{font-family:'Zen Kaku Gothic New',sans-serif;font-size:1.12rem;line-height:1.45;margin:0 0 10px;font-weight:700;color:var(--v35-navy)}
.v35-support-card p{font-size:1rem;line-height:1.72;margin:0;color:#596975}

/* Services: pricing alignment and readable secondary options. */
.v35-subpage.v32-services-page .v32-plan-card{min-height:435px}
.v35-subpage.v32-services-page .v35-plan-head{min-height:76px;display:flex;flex-direction:column;justify-content:flex-start}
.v35-subpage.v32-services-page .v32-plan-desc{font-size:.9rem;line-height:1.6;min-height:0;margin-bottom:14px}
.v35-subpage.v32-services-page .v32-plan-card ul{margin-top:0}
.v35-subpage.v32-services-page .v32-plan-card li{font-size:.92rem;line-height:1.55}
.v35-entry-title{font-family:'Shippori Mincho',serif;font-size:1.45rem;line-height:1.4;margin:30px 0 12px;color:var(--v35-navy)}
.v35-subpage.v32-services-page .v32-entry-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:0}
.v35-subpage.v32-services-page .v32-entry-options article{min-height:98px;padding:18px 18px;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;background:#fff}
.v35-subpage.v32-services-page .v32-entry-options strong{font-size:1rem;line-height:1.45}
.v35-subpage.v32-services-page .v32-entry-options p{font-size:1rem;line-height:1.55;margin:4px 0 0;color:#64717c}
.v35-subpage.v32-services-page .v32-entry-options b{font-size:1.08rem}
.v35-subpage.v32-services-page .v32-price-note{font-size:.82rem}

/* Services: rebuild "included" around the question: what is included in the price? */
.v35-included-section{padding:66px 0 70px;background:#fff}
.v35-included-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.v35-included-grid article{position:relative;padding:28px 26px 26px;border:1px solid var(--v35-line);border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(23,39,67,.035)}
.v35-included-no{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#e9f8fc;color:var(--v35-teal);font-weight:800;font-size:.9rem;margin-bottom:14px}
.v35-included-grid h3{font-family:'Shippori Mincho',serif;font-size:1.55rem;line-height:1.35;margin:0 0 15px}
.v35-included-grid ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.v35-included-grid li{position:relative;padding-left:1.5em;font-size:1rem;line-height:1.65;color:#4e5f6e}
.v35-included-grid li::before{content:'✓';position:absolute;left:0;top:0;color:var(--v35-teal);font-weight:800}
.v35-extra-note{margin:18px 0 0;padding:14px 18px;border-radius:8px;background:#f7fafb;color:#596975;font-size:.9rem!important;line-height:1.65}

/* Shared prominent CTA */
.v35-contact-cta{padding:64px 0;background:#172743;color:#fff}
.v35-contact-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:54px;align-items:center}
.v35-contact-kicker{margin:0 0 12px!important;color:#8bd8e7!important;font-size:.9rem!important;font-weight:700;letter-spacing:.05em}
.v35-contact-inner h2{font-family:'Shippori Mincho',serif;font-size:clamp(2.1rem,3.15vw,3rem);line-height:1.38;margin:0 0 12px;color:#fff;letter-spacing:-.02em}
.v35-contact-inner p:last-child{max-width:660px;margin:0;color:#d7e0e7;font-size:1rem;line-height:1.75}
.v35-contact-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:220px;padding:18px 28px;border-radius:9px;background:var(--v35-orange);color:#fff;text-decoration:none;font-size:1.05rem;font-weight:700;box-shadow:0 12px 28px rgba(255,116,24,.18)}

/* About: use the real Musashi-Kosugi photo and put the "marunage" promise in the hero. */
.v35-subpage.v32-about-page .v32-about-hero-bg{
  background-image:url('../assets/hero/musashikosugi-towers.webp');background-position:center center;background-size:cover;
}
.v35-subpage.v32-about-page .v32-about-hero-copy>p:not(.v32-kicker){margin-bottom:12px}
.v35-subpage.v32-about-page .v35-about-hero-emphasis{margin-top:6px!important;max-width:640px!important}

/* About: merge thought / stance / values into one concise system. */
.v35-about-principles{padding:66px 0 70px;background:var(--v35-cream)}
.v35-principle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v35-principle-grid article{padding:30px 26px 28px;background:#fff;border:1px solid #e3e2dc;border-radius:9px}
.v35-principle-grid article>span{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:#e9f8fc;color:var(--v35-teal);font-weight:800;margin-bottom:16px}
.v35-principle-grid h3{font-family:'Shippori Mincho',serif;font-size:1.45rem;line-height:1.48;margin:0 0 12px}
.v35-principle-grid p{font-size:1rem;line-height:1.75;margin:0;color:#586875}
.v35-local-note{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:center;margin-top:18px;padding:20px 24px;background:#edf9fc;border-radius:9px}
.v35-local-note strong{font-family:'Shippori Mincho',serif;font-size:1.25rem;line-height:1.45;color:var(--v35-navy)}
.v35-local-note p{margin:0;font-size:1rem;line-height:1.7;color:#566775}

@media(max-width:1050px){
  .v35-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v35-section-heading{grid-template-columns:150px minmax(0,1fr);gap:22px}
  .v35-principle-grid{grid-template-columns:1fr}
  .v35-local-note{grid-template-columns:1fr;gap:7px}
}

@media(max-width:720px){
  .v35-subpage .v35-mobile-home{display:block}
  .v35-subpage{--v35-fs-body:1rem;--v35-fs-h3:1.12rem;--v35-fs-h2:1.9rem;--v35-fs-h1:1.9rem}
  .v35-subpage .site-nav .v35-mobile-home{order:-10}
  .v35-section-heading{grid-template-columns:1fr;gap:7px;margin-bottom:22px}
  .v35-section-heading .v32-side-kicker{margin:0}
  .v35-section-heading h2{font-size:1.9rem;line-height:1.42}
  .v35-section-heading-centered{margin-bottom:24px}
  .v35-subpage.v32-services-page .v35-hero-reassurance{font-size:.9rem!important;margin-bottom:16px!important}
  .v35-subpage.v32-services-page .v35-support-section{padding:44px 0 48px}
  .v35-support-grid{grid-template-columns:1fr;gap:10px}
  .v35-support-card{min-height:0;padding:20px 18px;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;align-items:start}
  .v35-support-card .v32-icon{grid-row:1/3;margin:0;width:38px;height:38px}
  .v35-support-card h3{font-size:1.08rem;margin:0 0 4px}
  .v35-support-card p{font-size:1rem;line-height:1.6}
  .v35-subpage.v32-services-page .v32-plan-card,.v35-subpage.v32-services-page .v32-plan-card.is-featured{min-height:0}
  .v35-subpage.v32-services-page .v35-plan-head{min-height:0}
  .v35-subpage.v32-services-page .v32-plan-card li{font-size:1rem}
  .v35-entry-title{font-size:1.3rem;margin-top:26px}
  .v35-subpage.v32-services-page .v32-entry-options{grid-template-columns:1fr}
  .v35-subpage.v32-services-page .v32-entry-options article{grid-template-columns:36px minmax(0,1fr);min-height:0;padding:17px 16px}
  .v35-subpage.v32-services-page .v32-entry-options b{grid-column:2;margin-top:4px;font-size:1.05rem}
  .v35-included-section{padding:48px 0 52px}
  .v35-included-grid{grid-template-columns:1fr;gap:12px}
  .v35-included-grid article{padding:24px 20px}
  .v35-included-grid h3{font-size:1.4rem}
  .v35-contact-cta{padding:50px 0}
  .v35-contact-inner{grid-template-columns:1fr;gap:26px}
  .v35-contact-inner h2{font-size:2rem;line-height:1.42}
  .v35-contact-btn{width:100%;min-width:0}
  .v35-subpage.v32-about-page .v32-about-hero-bg{background-image:url('../assets/hero/musashikosugi-towers.webp');background-position:center}
  .v35-about-principles{padding:48px 0 52px}
  .v35-principle-grid{grid-template-columns:1fr;gap:12px}
  .v35-principle-grid article{padding:24px 20px}
  .v35-principle-grid h3{font-size:1.35rem}
  .v35-local-note{grid-template-columns:1fr;margin-top:14px;padding:18px}
}
.v35-subpage.v32-about-page .v35-about-principles .v35-section-heading{grid-template-columns:240px minmax(0,1fr)}
.v35-subpage.v32-about-page .v35-about-principles .v32-side-kicker{white-space:nowrap}
@media(max-width:720px){
  .v35-subpage.v32-about-page .v35-about-principles .v35-section-heading{grid-template-columns:1fr}
  .v35-subpage.v32-about-page .v35-about-principles .v32-side-kicker{white-space:normal}
}
.v35-subpage.v32-about-page .v35-about-principles .v35-section-heading{grid-template-columns:180px minmax(0,1fr)}


/* V40 fine fix: keep the flyer website preview at its native 16:9 ratio so the design is not cropped. */
#sample-panel-flyer .v17-after-browser img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  background: #fff;
}
@media (max-width:720px) {
  #sample-panel-flyer .v17-after-device-combo {
    min-height: 260px;
  }
}