/*
 * First Sheep
 * Page: HOME
 * Route: /
 *
 * 01 01 Hero
 * 02 02 Empathy
 * 03 03 Hope
 * 04 04 Change
 * 05 05 Purpose
 * 06 06 App CTA
 */

/* -------------------------
   Rules retained in their original cascade order
   ------------------------- */
:root {
   --color-brand: #d89a3a;
   --color-deep-amber: #b96a2c;
   --color-action: #91461f;
   --color-action-hover: #743515;
   --color-apricot: #f3c98b;
   --color-pink: #c98f97;
   --color-rose: #e8c9cd;
   --color-ivory: #fff7f0;
   --color-cream: #f9efe6;
   --color-cocoa: #3a2c28;
   --color-taupe: #6b5a53;
   --color-border: #d9c8bc;
   --color-white: #fffdf9;
   --ink: var(--color-cocoa);
   --muted: var(--color-taupe);
   --paper: var(--color-ivory);
   --white: var(--color-white);
   --amber: var(--color-brand);
   --amber-soft: var(--color-apricot);
   --burnt: var(--color-action);
   --yellow: var(--color-brand);
   --rose: var(--color-rose);
   --plum: #76545c;
   --deep: var(--color-cocoa);
   --line: var(--color-border);
   --mist: var(--color-cream);
   --cream: var(--color-cream);
   --blue: #eee8e5;
   --olive: var(--color-brand);
   --olive-dark: var(--color-action);
   --moss: var(--color-cocoa);
   --shadow: 0 28px 80px rgba(82, 47, 32, .12);
   --radius: 30px;
   --max: 1160px;
}

/* HOME Emotional Story — one continuous movement */
:root {
   --warm-white: var(--white);
   --text-sub: var(--muted);
   --text-main: var(--ink);
   --deep-amber: var(--burnt);
   --border-neutral: var(--line);
   --primary-amber: var(--amber);
   --serif: Georgia, "Yu Mincho", serif
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   color: var(--ink);
   background: var(--paper);
   font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
   font-size: 16px;
   line-height: 1.85;
   letter-spacing: .025em
}

img {
   max-width: 100%;
   height: auto
}

a {
   color: inherit;
   text-underline-offset: .22em
}

button {
   font: inherit
}

.skip {
   position: fixed;
   left: 1rem;
   top: -5rem;
   z-index: 999;
   padding: .6rem 1rem;
   background: var(--ink);
   color: #fff
}

.skip:focus {
   top: 1rem
}

:focus-visible {
   outline: 3px solid #9b4515;
   outline-offset: 4px
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(246, 244, 236, .9);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(35, 48, 42, .09)
}

.header-inner {
   max-width: var(--max);
   min-height: 72px;
   margin: auto;
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px
}

.brand {
   display: flex;
   align-items: center;
   gap: 11px;
   text-decoration: none;
   font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
   font-size: 1.25rem;
   font-weight: 700;
   letter-spacing: .08em
}

.brand img {
   border-radius: 12px
}

.site-nav {
   display: flex;
   align-items: center;
   gap: 25px;
   font-size: .86rem
}

.site-nav a {
   text-decoration: none
}

.site-nav a:hover {
   text-decoration: underline
}

.nav-cta {
   padding: 9px 17px;
   border-radius: 999px;
   background: var(--ink);
   color: #fff
}

.menu-button {
   display: none;
   border: 1px solid var(--line);
   background: transparent;
   padding: 7px 13px;
   border-radius: 999px;
   color: var(--ink)
}

.eyebrow {
   display: block;
   color: var(--olive-dark);
   font-size: .72rem;
   letter-spacing: .2em;
   font-weight: 800;
   margin-bottom: 20px
}

.button {
   display: inline-flex;
   min-height: 50px;
   padding: 10px 24px;
   border-radius: 999px;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   font-weight: 700
}

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

.secondary {
   border: 1px solid var(--ink)
}

.text-link {
   display: inline-block;
   margin-top: 18px;
   font-weight: 800;
   color: var(--olive-dark)
}

details {
   border-bottom: 1px solid var(--line)
}

summary {
   cursor: pointer;
   list-style: none;
   padding: 24px 45px 24px 0;
   font-weight: 700;
   position: relative
}

summary:after {
   content: "＋";
   position: absolute;
   right: 8px;
   font-size: 1.35rem;
   font-weight: 400
}

details[open] summary:after {
   content: "−"
}

details p {
   padding: 0 0 24px;
   max-width: 800px;
   color: var(--muted)
}

.store-links {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-shrink: 0
}

.store-links a,
.store-links img {
   display: block
}

.store-links img {
   object-fit: contain
}

.site-footer {
   background: #deded6;
   padding: 70px 24px 30px
}

.footer-inner {
   max-width: var(--max);
   margin: auto
}

.footer-brand {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 50px
}

.footer-brand img {
   border-radius: 14px
}

.footer-brand strong {
   font-family: Georgia, "Yu Mincho", serif;
   display: block;
   font-size: 1.45rem
}

.footer-brand span {
   display: block;
   font-size: .8rem;
   color: var(--muted)
}

.footer-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 36px
}

.footer-grid h2 {
   font-size: .77rem;
   letter-spacing: .12em
}

.footer-grid a {
   display: block;
   margin: 9px 0;
   text-decoration: none;
   font-size: .82rem
}

.footer-grid a:hover {
   text-decoration: underline
}

.footer-bottom {
   border-top: 1px solid rgba(35, 48, 42, .16);
   margin-top: 55px;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   font-size: .72rem;
   color: var(--muted)
}

@media(max-width:900px) {
   .menu-button {
      display: block
   }

   .site-nav {
      display: none;
      position: absolute;
      left: 16px;
      right: 16px;
      top: 66px;
      padding: 20px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      flex-direction: column;
      align-items: stretch;
      gap: 0
   }

   .site-nav.open {
      display: flex
   }

   .site-nav a {
      padding: 12px
   }

   .nav-cta {
      text-align: center;
      margin-top: 8px
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr
   }
}

@media(max-width:680px) {
   body {
      font-size: 16px
   }

   .header-inner {
      padding: 0 16px
   }

   .brand {
      font-size: 1.04rem
   }

   .button {
      width: 100%
   }

   .store-links {
      flex-wrap: wrap
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px 18px
   }

   .footer-bottom {
      flex-direction: column;
      gap: 8px
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }
}

@media(forced-colors:active) {

   .button,
   .nav-cta {
      border: 1px solid ButtonText
   }
}

/* Messaging architecture — protect Brand Core before Product and Trust */
.nav-group {
   position: relative;
   border: 0
}

.nav-group>summary {
   padding: 8px 17px 8px 0;
   font-weight: 500;
   white-space: nowrap
}

.nav-group>summary:after {
   content: "⌄";
   position: static;
   margin-left: 7px;
   font-size: .8rem
}

.nav-group[open]>summary:after {
   content: "⌃"
}

.nav-panel {
   position: absolute;
   top: calc(100% + 18px);
   left: 50%;
   width: 600px;
   padding: 22px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0;
   background: rgba(250, 249, 244, .98);
   border: 1px solid rgba(32, 48, 41, .18);
   box-shadow: 0 24px 60px rgba(28, 43, 36, .16);
   transform: translateX(-50%)
}

.nav-panel:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -20px;
   height: 20px
}

.nav-panel a {
   min-height: 86px;
   padding: 17px !important;
   border-bottom: 1px solid var(--line)
}

.nav-panel a:nth-child(even) {
   border-left: 1px solid var(--line)
}

.nav-panel b,
.nav-panel span {
   display: block
}

.nav-panel b {
   font: 500 1rem Georgia, "Yu Mincho", serif
}

.nav-panel span {
   margin-top: 6px;
   color: var(--muted);
   font-size: .7rem
}

.nav-panel .nav-overview {
   grid-column: 1/-1;
   min-height: 74px;
   background: #eef0de
}

.trust-panel {
   left: 35%;
   width: 650px
}

.trust-panel a:last-child {
   grid-column: 1/-1
}

.corporate-panel {
   left: 0;
   transform: translateX(-55%)
}

@media(max-width:1100px) {
   .site-nav {
      gap: 14px
   }

   .nav-group>summary {
      padding-right: 8px
   }

   .nav-panel {
      width: 520px
   }

   .trust-panel {
      width: 580px
   }
}

@media(max-width:900px) {
   .nav-group {
      width: 100%
   }

   .nav-group>summary {
      padding: 14px 12px;
      border-bottom: 1px solid var(--line)
   }

   .nav-panel,
   .trust-panel,
   .corporate-panel {
      position: static;
      width: auto;
      padding: 0 0 10px 14px;
      display: grid;
      grid-template-columns: 1fr;
      background: transparent;
      border: 0;
      box-shadow: none;
      transform: none
   }

   .nav-panel a,
   .nav-panel .nav-overview,
   .trust-panel a:last-child {
      grid-column: auto;
      min-height: 0;
      padding: 12px !important;
      border: 0 !important
   }

   .nav-panel span {
      display: none
   }

   .site-nav>.nav-cta {
      margin-top: 16px
   }
}

/* 2026-09 Brand refinement: golden light + quiet companionship */
.site-header {
   background: rgba(255, 251, 245, .92)
}

.eyebrow,
.text-link,
.prose a,
.reading-chapter>ul li:before,
.faq-map span,
.dialogue-timeline b {
   color: var(--burnt)
}

.nav-cta,
.button.primary {
   background: var(--burnt);
   color: #fff
}

.nav-cta:hover,
.button.primary:hover {
   background: #8f3f13;
   text-decoration: none
}

.button.secondary {
   border-color: #7f5b3e;
   background: rgba(255, 251, 245, .38)
}

/* Color System v2 — Amber / Dusty Pink / Warm Editorial */
body,
.story-page,
.subpage {
   color: var(--color-cocoa);
   background: var(--color-ivory)
}

.site-header {
   background: rgba(255, 247, 240, .94);
   border-color: rgba(58, 44, 40, .12)
}

.brand img,
.footer-brand img {
   box-shadow: 0 0 0 2px rgba(216, 154, 58, .14)
}

.site-nav a:hover,
.breadcrumbs a:hover,
.footer-grid a:hover {
   color: var(--color-action)
}

.nav-group>summary:focus-visible,
.menu-button:focus-visible {
   outline-color: var(--color-action)
}

.nav-panel {
   background: rgba(255, 247, 240, .98);
   border-color: var(--color-border);
   box-shadow: 0 24px 60px rgba(82, 47, 32, .16)
}

.nav-panel .nav-overview {
   background: var(--color-rose)
}

.nav-cta,
.button.primary {
   background: var(--color-action);
   color: var(--color-white)
}

.nav-cta:hover,
.button.primary:hover {
   background: var(--color-action-hover);
   color: var(--color-white)
}

.button.secondary,
.safety-links a {
   color: var(--color-cocoa);
   border-color: #8c7569;
   background: rgba(255, 253, 249, .62)
}

.eyebrow,
.text-link,
.prose a,
.reading-chapter>ul li:before,
.faq-map span,
.dialogue-timeline b,
.flow-node span,
.flow-track>i,
.loop-arrow {
   color: var(--color-action)
}

.site-footer {
   background: #ead9d2
}

.footer-bottom {
   border-color: rgba(58, 44, 40, .18)
}

@media(forced-colors:active) {

   .nav-cta,
   .button.primary,
   .on-dark {
      border: 1px solid ButtonText
   }
}

/* Desktop story system — one viewport, one message */
h1,
h2,
h3,
blockquote,
.purpose-lead,
.download-band p {
   line-break: strict;
   word-break: normal;
   overflow-wrap: normal;
   text-wrap: balance
}

/* Responsive Layout System — Wide / Compact / Tablet / Mobile */
html,
body {
   max-width: 100%;
   overflow-x: clip
}

main,
section,
article,
header,
footer,
nav,
div,
figure,
picture {
   min-width: 0
}

img,
svg,
video,
canvas,
picture,
source {
   max-width: 100%
}

img,
video,
canvas {
   height: auto
}

h1,
h2,
h3,
blockquote,
.purpose-lead,
.download-band p {
   line-break: strict;
   word-break: normal;
   overflow-wrap: break-word;
   text-wrap: balance
}

p,
li,
dd,
dt,
summary,
a {
   overflow-wrap: anywhere
}

body {
   font-size: clamp(1rem, .22vw + .96rem, 1.125rem)
}

.button,
summary {
   font-size: clamp(.95rem, .18vw + .92rem, 1.05rem)
}

/* Wide Desktop: presentation is enabled only with enough width and height. */
@media(min-width:1280px) and (min-height:720px) {

   /*.story-page .hero h1{font-size:clamp(3rem,3.5vw,4.2rem)}*/
   .story-page .hero h1 {
      font-size: clamp(3rem, 5vw, 4.2rem)
   }

   .story-page .hero h1,
   .story-page .section-heading h2,
   .story-page .feature-copy h2 {
      overflow-wrap: normal
   }
}

/* Compact Desktop: adaptive presentation, no viewport-height pressure. */
@media(min-width:900px) and (max-width:1279px) {

   html:has(.story-page),
   html:has(.story-subpage) {
      scroll-snap-type: none
   }

   .story-page>.hero,
   .story-page>.section,
   .story-page>.features-experience>.section,
   .story-page>.features-experience>.feature-showcase,
   .story-page>.features-experience>article,
   .story-page>.science-disclosure-screen,
   .story-subpage .subpage-hero,
   .story-subpage .dialogue-experience,
   .story-subpage .reading-chapter,
   .story-subpage>.page-shell>.download-band {
      min-height: 0;
      scroll-snap-align: none
   }

   .section {
      padding-top: clamp(78px, 9vw, 112px);
      padding-bottom: clamp(78px, 9vw, 112px)
   }

   .story-page .hero {
      min-height: 0;
      padding-top: clamp(54px, 7vw, 82px);
      padding-bottom: clamp(70px, 8vw, 104px);
      grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
      gap: clamp(24px, 4vw, 48px)
   }

   .story-page .hero h1 {
      max-width: 12.5ch;
      font-size: clamp(2.75rem, 4.7vw, 3.9rem);
      line-height: 1.12;
      letter-spacing: -.025em
   }

   .hero-copy {
      padding-left: 0;
      margin-top: 0
   }

   .story-time,
   .hero-side-note {
      display: none
   }

   .phone-stage {
      width: 100%;
      min-height: 0;
      height: clamp(470px, 54vw, 590px);
      margin: 0;
      transform: none
   }

   .phone-stage:before {
      width: min(52vw, 540px);
      height: min(52vw, 540px)
   }

   .phone-stage:after {
      width: min(38vw, 390px);
      height: min(38vw, 390px);
      right: 0
   }

   .phone-stage .phone-frame {
      width: clamp(220px, 23vw, 285px)
   }

   .ui-chip,
   .record-fragment,
   .voice-fragment,
   .phone-stage>.navigator-note {
      transform: scale(.88);
      transform-origin: center
   }

   .daily-scenes,
   .permission,
   .companionship,
   .desired-future-intro,
   .purpose-home,
   .sheep-companion,
   .trust-intro,
   .science-home .section-heading {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(28px, 5vw, 58px)
   }

   .daily-scenes {
      padding-top: 96px;
      padding-bottom: 120px
   }

   .daily-scenes .section-heading {
      margin-left: 0
   }

   .daily-scenes .scene-quote {
      position: static;
      grid-column: 2;
      justify-self: end;
      margin-top: 24px
   }

   .permission,
   .companionship,
   .desired-future,
   .purpose-home,
   .sheep-companion,
   .trust-intro,
   .science-home {
      padding-top: clamp(88px, 10vw, 128px);
      padding-bottom: clamp(88px, 10vw, 128px)
   }

   .permission-lines {
      margin: 0
   }

   .permission-lines p {
      grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
      gap: 24px
   }

   .permission-lines b {
      font-size: clamp(1.25rem, 2.1vw, 1.75rem)
   }

   .companion-copy h2,
   .sheep-copy h2,
   .trust-intro h2,
   .science-home .section-heading h2 {
      font-size: clamp(2.6rem, 4.6vw, 4.1rem)
   }

   .companion-mark,
   .sheep-symbol {
      min-height: 330px
   }

   .sheep-symbol:before {
      width: min(34vw, 360px);
      height: min(34vw, 360px)
   }

   .sheep-symbol:after {
      width: min(25vw, 270px);
      height: min(25vw, 270px)
   }

   .purpose-index>b {
      font-size: clamp(3.7rem, 6vw, 5.6rem)
   }

   .purpose-copy {
      padding-top: 0
   }

   .purpose-lead {
      font-size: clamp(1.55rem, 2.35vw, 2.15rem)
   }

   .experience-loop {
      padding-top: 110px;
      padding-bottom: 120px
   }

   .loop-figure {
      padding: 48px 20px;
      min-height: 420px
   }

   .loop-center {
      width: 150px;
      height: 150px
   }

   .loop-node {
      min-height: 105px
   }

   .feature-intro {
      padding-top: 100px;
      padding-bottom: 100px
   }

   .feature-intro h2 {
      font-size: clamp(3.4rem, 6.6vw, 5.7rem)
   }

   .feature-intro p {
      margin-left: auto
   }

   .feature-showcase,
   .feature-showcase:nth-of-type(even),
   .dialogue-show,
   .feature-showcase:nth-of-type(even).dialogue-show,
   .work-show {
      min-height: 0;
      padding-top: clamp(80px, 9vw, 112px);
      padding-bottom: clamp(80px, 9vw, 112px);
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(38px, 6vw, 72px)
   }

   .feature-showcase .feature-media {
      min-height: 460px
   }

   .feature-media .phone-frame {
      width: clamp(220px, 24vw, 285px)
   }

   .feature-copy h2 {
      font-size: clamp(2.45rem, 4.4vw, 3.85rem)
   }

   .feature-number {
      font-size: 26vw
   }

   .record-show .feature-media,
   .dialogue-show .feature-media {
      min-height: 500px
   }

   .web-dialogues p {
      max-width: 15rem
   }

   .question-field span {
      max-width: 42%;
      white-space: normal
   }

   .bridge-grid,
   .proof-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .flow-track {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr)
   }

   .team-layout {
      grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1fr)
   }

   .subpage-hero {
      min-height: 0;
      padding: 64px max(24px, calc((100vw - var(--max))/2)) 88px;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(34px, 5vw, 64px)
   }

   .page-hero h1 {
      max-width: 12ch;
      font-size: clamp(2.9rem, 4.8vw, 4.35rem);
      line-height: 1.12
   }

   .story-subpage .page-visual {
      max-height: none
   }

   .feature-page-visual,
   .work-page-visual {
      height: auto;
      min-height: 520px
   }

   .feature-page-visual .phone-frame {
      width: clamp(210px, 22vw, 260px)
   }

   .about-brand-composition,
   .team-page-visual {
      grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr)
   }

   .about-brand-composition .brand-manifesto,
   .team-page-visual .team-map {
      margin-left: -38px;
      padding: clamp(26px, 3.2vw, 40px)
   }

   .dialogue-experience {
      grid-template-columns: minmax(0, 1.12fr) minmax(230px, .88fr);
      gap: clamp(34px, 5vw, 58px);
      padding: clamp(40px, 5vw, 58px)
   }

   .reading-chapter {
      width: min(76%, 800px)
   }

   .download-band {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 32px
   }
}

/* Narrow compact desktop: switch before two-column compositions become cramped. */
@media(min-width:900px) and (max-width:1099px) {

   .story-page .hero,
   .daily-scenes,
   .permission,
   .companionship,
   .desired-future-intro,
   .purpose-home,
   .sheep-companion,
   .trust-intro,
   .science-home .section-heading,
   .subpage-hero,
   .feature-showcase,
   .feature-showcase:nth-of-type(even),
   .dialogue-show,
   .feature-showcase:nth-of-type(even).dialogue-show,
   .work-show,
   .about-brand-composition,
   .team-page-visual,
   .dialogue-experience {
      grid-template-columns: minmax(0, 1fr)
   }

   .story-page .hero {
      padding-left: clamp(34px, 6vw, 64px);
      padding-right: clamp(34px, 6vw, 64px)
   }

   .hero-copy {
      max-width: 760px
   }

   .story-page .hero h1 {
      max-width: 13ch
   }

   .phone-stage {
      max-width: 660px;
      margin: 0 auto
   }

   .ui-chip,
   .record-fragment,
   .voice-fragment,
   .phone-stage>.navigator-note {
      transform: scale(.94)
   }

   .daily-scenes .section-heading,
   .daily-scenes .dayline,
   .daily-scenes .scene-visual,
   .daily-scenes .scene-labels,
   .daily-scenes .scene-quote {
      grid-column: 1;
      grid-row: auto
   }

   .daily-scenes .scene-labels {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 24px 0 0;
      color: inherit
   }

   .daily-scenes .scene-labels p {
      color: var(--color-taupe)
   }

   .permission-lines {
      margin-top: 48px
   }

   .companion-copy,
   .purpose-copy,
   .sheep-copy,
   .trust-intro>p {
      max-width: 760px
   }

   .companion-mark,
   .sheep-symbol {
      min-height: 280px
   }

   .feature-showcase .feature-media,
   .record-show .feature-media,
   .dialogue-show .feature-media {
      order: 0;
      min-height: 500px
   }

   .feature-showcase .feature-copy,
   .dialogue-show .feature-copy {
      order: 1;
      max-width: 760px
   }

   .work-show .feature-copy,
   .work-show .feature-media {
      grid-column: 1;
      grid-row: auto
   }

   .subpage-hero {
      padding-left: clamp(32px, 6vw, 64px);
      padding-right: clamp(32px, 6vw, 64px)
   }

   .subpage .page-visual {
      width: 100%;
      max-width: 760px
   }

   .about-brand-composition .brand-manifesto,
   .team-page-visual .team-map {
      width: min(90%, 680px);
      margin: -44px 0 0 auto
   }

   .dialogue-experience-ui {
      order: -1
   }

   .reading-chapter {
      width: min(84%, 800px)
   }
}

/* Tablet: readable, stacked story. */
@media(min-width:768px) and (max-width:899px) {

   html:has(.story-page),
   html:has(.story-subpage) {
      scroll-snap-type: none
   }

   .story-page>.hero,
   .story-page>.section,
   .story-page>.features-experience>.section,
   .story-page>.features-experience>.feature-showcase,
   .story-page>.science-disclosure-screen,
   .story-subpage .subpage-hero,
   .story-subpage .dialogue-experience,
   .story-subpage .reading-chapter,
   .story-subpage>.page-shell>.download-band {
      min-height: 0;
      scroll-snap-align: none
   }

   .section {
      padding: 88px clamp(28px, 6vw, 54px)
   }

   .story-page .hero,
   .daily-scenes,
   .permission,
   .companionship,
   .desired-future-intro,
   .purpose-home,
   .sheep-companion,
   .trust-intro,
   .science-home .section-heading,
   .subpage-hero,
   .feature-showcase,
   .feature-showcase:nth-of-type(even),
   .dialogue-show,
   .feature-showcase:nth-of-type(even).dialogue-show,
   .work-show,
   .about-brand-composition,
   .team-page-visual,
   .dialogue-experience {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 44px
   }

   .story-page .hero {
      min-height: 0;
      padding: 70px clamp(32px, 6vw, 54px) 92px
   }

   .hero-copy {
      padding-left: 0;
      margin: 0;
      max-width: 700px
   }

   .story-page .hero h1 {
      max-width: 13ch;
      font-size: clamp(3rem, 7vw, 4.25rem);
      line-height: 1.12
   }

   .story-time,
   .hero-side-note {
      display: none
   }

   .phone-stage {
      width: 100%;
      max-width: 620px;
      min-height: 560px;
      height: auto;
      margin: 0 auto;
      transform: none
   }

   .phone-stage:before {
      width: 520px;
      height: 520px
   }

   .phone-stage:after {
      width: 360px;
      height: 360px;
      right: 0
   }

   .phone-stage .phone-frame {
      width: 280px
   }

   .daily-scenes {
      padding: 92px clamp(32px, 6vw, 54px)
   }

   .daily-scenes .section-heading,
   .daily-scenes .dayline,
   .daily-scenes .scene-visual,
   .daily-scenes .scene-labels,
   .daily-scenes .scene-quote {
      grid-column: 1;
      grid-row: auto
   }

   .daily-scenes .section-heading {
      margin: 0
   }

   .daily-scenes .scene-labels {
      position: static;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 24px 0 0;
      color: inherit
   }

   .daily-scenes .scene-labels p {
      color: var(--color-taupe)
   }

   .daily-scenes .scene-quote {
      color: var(--color-cocoa);
      margin-top: 20px
   }

   .permission,
   .companionship,
   .desired-future,
   .purpose-home,
   .sheep-companion,
   .trust-intro,
   .science-home {
      padding: 96px clamp(32px, 6vw, 54px)
   }

   .permission-lines {
      margin: 22px 0 0
   }

   .permission-lines p {
      grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
      gap: 28px
   }

   .companion-mark,
   .sheep-symbol {
      min-height: 280px
   }

   .companion-copy h2,
   .sheep-copy h2,
   .trust-intro h2,
   .science-home .section-heading h2 {
      font-size: clamp(2.8rem, 6.5vw, 4rem)
   }

   .purpose-copy {
      padding-top: 0
   }

   .purpose-index>b {
      font-size: clamp(4rem, 8vw, 5.5rem)
   }

   .experience-loop {
      padding: 100px clamp(32px, 6vw, 54px)
   }

   .loop-figure {
      border-radius: 30px;
      padding: 82px 34px 34px
   }

   .loop-grid {
      grid-template-columns: 1fr
   }

   .loop-arrow {
      transform: rotate(90deg);
      text-align: center
   }

   .loop-center {
      width: 150px;
      height: 150px
   }

   .loop-rail {
      inset: 14px;
      border-radius: 28px
   }

   .feature-intro {
      padding: 96px clamp(32px, 6vw, 54px)
   }

   .feature-intro h2 {
      font-size: clamp(3.7rem, 8vw, 5.6rem)
   }

   .feature-intro p {
      margin-left: 0
   }

   .feature-showcase,
   .feature-showcase:nth-of-type(even),
   .dialogue-show,
   .feature-showcase:nth-of-type(even).dialogue-show,
   .work-show {
      min-height: 0;
      padding: 92px clamp(32px, 6vw, 54px)
   }

   .feature-showcase .feature-media,
   .record-show .feature-media,
   .dialogue-show .feature-media {
      order: 0;
      min-height: 500px
   }

   .feature-showcase .feature-copy,
   .dialogue-show .feature-copy {
      order: 1;
      max-width: 700px
   }

   .work-show .feature-copy,
   .work-show .feature-media {
      grid-column: 1;
      grid-row: auto
   }

   .feature-media .phone-frame {
      width: 280px
   }

   .question-field span {
      max-width: 44%;
      white-space: normal
   }

   .bridge-grid,
   .proof-grid,
   .column-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .flow-track {
      grid-template-columns: 1fr
   }

   .flow-track>i {
      transform: rotate(90deg);
      text-align: center
   }

   .team-layout {
      grid-template-columns: 1fr 1fr
   }

   .team-statement {
      grid-column: 1/-1
   }

   .subpage-hero {
      min-height: 0;
      padding: 58px clamp(32px, 6vw, 54px) 88px
   }

   .page-hero h1 {
      max-width: 13ch;
      font-size: clamp(3rem, 6.8vw, 4.2rem)
   }

   .subpage .page-visual {
      width: 100%;
      max-width: 700px
   }

   .feature-page-visual,
   .work-page-visual {
      height: auto;
      min-height: 540px
   }

   .about-brand-composition .brand-manifesto,
   .team-page-visual .team-map {
      width: min(92%, 650px);
      margin: -50px 0 0 auto
   }

   .dialogue-experience {
      padding: 54px 42px
   }

   .dialogue-experience-ui {
      order: -1
   }

   .reading-chapter,
   .reading-chapter:nth-child(even) {
      width: min(88%, 800px)
   }

   .download-band {
      flex-direction: column;
      align-items: flex-start
   }
}

/* Mobile: natural vertical story and mobile-native line breaks. */
@media(max-width:767px) {

   html:has(.story-page),
   html:has(.story-subpage) {
      scroll-snap-type: none
   }

   .keep-line {
      white-space: normal
   }

   .story-page h1 br,
   .story-page h2 br,
   .story-page blockquote br,
   .story-page .purpose-lead br,
   .subpage h1 br,
   .subpage h2 br,
   .subpage blockquote br {
      display: none
   }

   .section,
   .permission,
   .companionship,
   .desired-future,
   .purpose-home,
   .sheep-companion,
   .trust-intro,
   .science-home,
   .feature-intro {
      padding: 76px 18px
   }

   .story-page .hero,
   .daily-scenes,
   .permission,
   .companionship,
   .desired-future-intro,
   .purpose-home,
   .sheep-companion,
   .trust-intro,
   .science-home .section-heading,
   .subpage-hero,
   .feature-showcase,
   .feature-showcase:nth-of-type(even),
   .dialogue-show,
   .feature-showcase:nth-of-type(even).dialogue-show,
   .work-show,
   .about-brand-composition,
   .team-page-visual,
   .dialogue-experience {
      display: block;
      min-height: 0
   }

   .story-page .hero {
      padding: 52px 18px 74px
   }

   .hero-copy {
      padding-left: 0;
      margin: 0
   }

   .story-page .hero h1 {
      max-width: 12.5ch;
      font-size: clamp(2.65rem, 11.8vw, 3.45rem);
      line-height: 1.15;
      letter-spacing: -.025em
   }

   .hero-kicker,
   .hero-lead {
      max-width: 100%
   }

   .story-time,
   .hero-side-note {
      display: none
   }

   .phone-stage {
      width: 100%;
      max-width: 430px;
      min-height: 520px;
      height: auto;
      margin: 42px auto 0;
      transform: none
   }

   .phone-stage:before {
      width: min(112vw, 420px);
      height: min(112vw, 420px)
   }

   .phone-stage:after {
      width: min(80vw, 310px);
      height: min(80vw, 310px);
      right: 0
   }

   .phone-stage .phone-frame {
      width: min(66vw, 260px)
   }

   .ui-chip {
      max-width: 42vw
   }

   .record-fragment {
      right: 0;
      width: min(42vw, 165px)
   }

   .voice-fragment {
      right: 0;
      width: min(48vw, 190px)
   }

   .phone-stage>.navigator-note {
      max-width: 55vw
   }

   .section-heading,
   .hero-copy,
   .feature-copy,
   .page-hero {
      max-width: 100%
   }

   .section-heading h2,
   .section h2,
   .feature-copy h2 {
      max-width: 15ch;
      font-size: clamp(2rem, 9vw, 2.75rem);
      line-height: 1.25
   }

   .page-hero h1 {
      max-width: 13ch;
      font-size: clamp(2.55rem, 11vw, 3.35rem);
      line-height: 1.17
   }

   .daily-scenes .section-heading,
   .daily-scenes .dayline,
   .daily-scenes .scene-visual,
   .daily-scenes .scene-labels,
   .daily-scenes .scene-quote {
      grid-column: auto;
      grid-row: auto
   }

   .daily-scenes .section-heading {
      margin: 0
   }

   .daily-scenes .scene-labels {
      position: static;
      display: grid;
      grid-template-columns: 1fr;
      padding: 26px 0 0;
      color: inherit
   }

   .daily-scenes .scene-labels p {
      color: var(--color-taupe)
   }

   .daily-scenes .scene-quote {
      color: var(--color-cocoa);
      margin: 34px 0 0
   }

   .permission-lines {
      margin: 46px 0 0
   }

   .permission-lines p {
      grid-template-columns: 1fr;
      gap: 10px
   }

   .permission-lines b {
      font-size: clamp(1.3rem, 6vw, 1.7rem)
   }

   .companion-mark,
   .sheep-symbol {
      min-height: 245px
   }

   .companion-copy,
   .purpose-copy,
   .sheep-copy {
      margin-top: 48px
   }

   .companion-copy h2,
   .sheep-copy h2,
   .trust-intro h2 {
      font-size: clamp(2.25rem, 10vw, 3rem)
   }

   .desired-future .section-heading {
      display: block
   }

   .future-shifts article {
      grid-template-columns: minmax(0, .85fr) 24px minmax(0, 1.15fr);
      gap: 6px
   }

   .future-shifts span,
   .future-shifts strong {
      font-size: clamp(.88rem, 3.8vw, 1rem)
   }

   .purpose-index>b {
      font-size: clamp(3.1rem, 13vw, 4.3rem)
   }

   .purpose-copy {
      padding-top: 0
   }

   .purpose-lead {
      font-size: clamp(1.45rem, 6.5vw, 1.9rem)
   }

   .experience-loop {
      padding: 82px 18px
   }

   .loop-figure {
      padding: 82px 22px 28px
   }

   .loop-grid {
      grid-template-columns: 1fr
   }

   .loop-arrow {
      transform: rotate(90deg);
      text-align: center
   }

   .feature-intro {
      padding-top: 82px;
      padding-bottom: 82px
   }

   .feature-intro h2 {
      font-size: clamp(3rem, 13vw, 4.2rem)
   }

   .feature-intro p {
      margin-left: 0
   }

   .feature-showcase,
   .feature-showcase:nth-of-type(even),
   .dialogue-show,
   .feature-showcase:nth-of-type(even).dialogue-show,
   .work-show {
      margin: 0;
      padding: 76px 18px;
      border-radius: 0;
      grid-template-columns: 1fr
   }

   .feature-showcase .feature-media,
   .record-show .feature-media,
   .dialogue-show .feature-media {
      order: 0;
      min-height: 430px
   }

   .feature-showcase .feature-copy,
   .dialogue-show .feature-copy {
      order: 1;
      margin-top: 38px
   }

   .work-show .feature-copy,
   .work-show .feature-media {
      grid-column: auto;
      grid-row: auto
   }

   .feature-media .phone-frame {
      width: min(68vw, 255px)
   }

   .emotion-cloud span,
   .web-dialogues p {
      font-size: .68rem;
      max-width: 42vw
   }

   .record-stack {
      right: 0;
      width: 42vw
   }

   .question-field span {
      max-width: 45%;
      white-space: normal
   }

   .feature-number {
      font-size: 45vw
   }

   .bridge-grid,
   .safety-diagram,
   .proof-grid,
   .column-grid,
   .team-layout,
   .role-map,
   .flow-track,
   .science-disclosure,
   .footer-grid {
      grid-template-columns: 1fr
   }

   .flow-track>i {
      transform: rotate(90deg);
      text-align: center
   }

   .team-statement {
      grid-column: auto
   }

   .subpage .breadcrumbs {
      padding: 18px
   }

   .subpage-hero {
      padding: 42px 18px 76px
   }

   .page-hero {
      padding: 18px 0 50px
   }

   .subpage .page-visual {
      width: 100%;
      max-width: 100%;
      margin: 36px 0 0
   }

   .feature-page-visual,
   .work-page-visual {
      min-height: 0;
      height: auto;
      padding: 34px 18px
   }

   .feature-page-visual>.app-screen,
   .route-features-record .feature-page-visual>.app-screen,
   .route-features-coach .feature-page-visual>.app-screen {
      position: relative;
      margin: 0;
      transform: none
   }

   .dialogue-page-visual {
      min-height: 0
   }

   .dialogue-device {
      transform: none
   }

   .dialogue-page-visual>.dialogue-map {
      position: relative;
      right: auto;
      bottom: auto;
      width: 100%;
      margin-top: 28px
   }

   .work-page-visual>.work-visual {
      margin: 0;
      transform: none
   }

   .about-brand-composition .brand-manifesto,
   .team-page-visual .team-map,
   .brand-manifesto {
      position: relative;
      right: auto;
      bottom: auto;
      width: 100%;
      margin: 0;
      padding: 28px 20px
   }

   .about-brand-composition .brand-image picture,
   .team-page-visual .brand-image picture {
      aspect-ratio: 4/5
   }

   .dialogue-experience {
      margin: 0;
      padding: 52px 18px
   }

   .dialogue-experience-ui {
      order: -1;
      margin-bottom: 42px
   }

   .reading-prose {
      padding: 76px 18px 96px
   }

   .reading-chapter,
   .reading-chapter:nth-child(even) {
      width: 100%;
      margin: 0;
      padding: 48px 0 62px
   }

   .reading-chapter h2 {
      font-size: clamp(1.9rem, 8vw, 2.45rem)
   }

   .reading-chapter figure,
   .reading-chapter .key-idea {
      width: 100%;
      margin-top: 38px;
      transform: none
   }

   .download-band {
      padding: 32px 22px;
      display: flex;
      flex-direction: column;
      align-items: flex-start
   }

   .download-band h2 {
      font-size: clamp(1.75rem, 7.5vw, 2.2rem)
   }

   .store-links {
      width: 100%;
      flex-wrap: wrap
   }

   .store-links a {
      max-width: calc(50% - 7px)
   }
}

@media(max-width:1060px) {
   .menu-button {
      display: block
   }

   .site-nav {
      display: none;
      position: absolute;
      left: 16px;
      right: 16px;
      top: 66px;
      padding: 20px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      flex-direction: column;
      align-items: stretch;
      gap: 0
   }

   .site-nav.open {
      display: flex
   }

   .site-nav a {
      padding: 12px
   }

   .nav-cta {
      text-align: center;
      margin-top: 8px
   }
}

/* Wide but short laptop windows use normal document flow. */
@media(min-width:1280px) and (max-height:719px) {

   html:has(.story-page),
   html:has(.story-subpage) {
      scroll-snap-type: none
   }

   .story-page>.hero,
   .story-page>.section,
   .story-page>.features-experience>.section,
   .story-page>.features-experience>.feature-showcase,
   .story-page>.science-disclosure-screen,
   .story-subpage .subpage-hero,
   .story-subpage .dialogue-experience,
   .story-subpage .reading-chapter,
   .story-subpage>.page-shell>.download-band {
      min-height: 0;
      scroll-snap-align: none
   }

   .story-page .hero,
   .feature-showcase,
   .permission,
   .companionship,
   .desired-future,
   .purpose-home,
   .sheep-companion,
   .trust-intro,
   .science-home {
      padding-top: 64px;
      padding-bottom: 72px
   }
}

@supports not (overflow:clip) {

   html,
   body {
      overflow-x: hidden
   }
}

/* Wide desktop: each About V3 chapter is a complete 1440 × 900 slide-like surface. */
@media (min-width:1200px) {
   .about-v3 {
      --v3-screen: 827px
   }

   .about-v3>section {
      min-height: var(--v3-screen);
      padding-block: 82px 0;
      display: grid;
      align-items: start
   }

   .about-v3__frame {
      width: min(1180px, 82vw);
      gap: 92px
   }

   .about-v3__hero {
      min-height: var(--v3-screen);
      padding-top: 140px
   }

   .about-v3__hero .about-v3__frame {
      grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
      align-items: center
   }

   .about-v3__hero-image {
      width: 456px;
      transform: translateY(4px)
   }

   .about-v3__shape--hero {
      top: 0;
      width: 47vw;
      height: 392px;
      border-radius: 0 0 53% 0
   }

   .about-v3__future {
      display: flex !important;
      min-height: var(--v3-screen);
      padding: 82px 0 0 !important;
      flex-direction: column;
      justify-content: flex-start
   }

   .about-v3__future .about-v3__frame {
      align-items: center
   }

   .about-v3__future-close {
      width: min(1180px, 82vw);
      margin: 18px auto 0
   }

   .about-v3__shape--future {
      top: 50%;
      width: 34vw;
      height: 226px;
      transform: translateY(-30%)
   }

   .about-v3__why .about-v3__frame,
   .about-v3__sheep .about-v3__frame,
   .about-v3__ending .about-v3__frame {
      align-items: center
   }

   .about-v3__why .about-v3__section-body,
   .about-v3__sheep .about-v3__section-body {
      padding-top: 76px
   }

   .about-v3__why .about-v3__number,
   .about-v3__sheep .about-v3__number {
      top: -14px
   }

   .about-v3__ally .about-v3__frame {
      width: min(1180px, 82vw)
   }

   .about-v3__ally-heading {
      margin-bottom: 44px
   }

   .about-v3__ally-grid {
      gap: 92px
   }

   .about-v3__shape--ally {
      bottom: 53px;
      width: 31vw;
      height: 180px
   }

   .about-v3__not-do {
      background: #ead5d1
   }

   .about-v3__not-do .about-v3__inset {
      width: min(1180px, 82vw);
      padding: 52px 60px 48px;
      border-radius: 5px;
      background: rgba(255, 247, 240, .5)
   }

   .about-v3__not-do-grid {
      gap: 92px
   }

   .about-v3__not-do .about-v3__number {
      top: 39px;
      right: 56px
   }

   .about-v3__ending .about-v3__section-body {
      padding-top: 68px
   }

   .about-v3__ending .about-v3__number {
      top: -10px;
      right: 0
   }

   .about-v3__shape--ending {
      bottom: 0;
      width: 33vw;
      height: 178px
   }

   .about-v3__start .about-v3__frame {
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      align-items: center
   }

   .about-v3__start .store-links {
      display: flex;
      gap: 9px;
      align-items: center;
      margin: 0 0 20px
   }

   .about-v3__start .store-links img {
      display: block;
      height: 35px;
      width: auto
   }

   .about-v3__shape--start {
      bottom: 77px;
      width: 29vw;
      height: 164px
   }
}

/* About target mapping: all desktop coordinates are 630px-source ratios × viewport width. */
@media(min-width:1200px) {
   .route-about .about-target-hero {
      min-height: 61.5vw;
      background: #fff9f5
   }

   .route-about .about-target-hero__field {
      top: 3.97vw;
      width: 64.9vw;
      height: 25.4vw;
      border-radius: 0 0 54% 0
   }

   .route-about .about-target-hero__inner {
      position: relative;
      display: block;
      width: 100%;
      height: 61.5vw;
      margin: 0;
      padding: 0
   }

   .route-about .about-target-hero__crumb {
      position: absolute;
      top: 1.59vw;
      left: 4.92vw;
      margin: 0;
      color: #6b5a53;
      font-size: .76vw;
      line-height: 1.2;
      letter-spacing: .02em
   }

   .route-about .about-target-hero__copy {
      position: absolute;
      top: 6.51vw;
      left: 4.92vw;
      width: 43.8vw;
      padding: 0
   }

   .route-about .about-target-hero__eyebrow {
      margin: 0 0 4.3vw;
      font-size: .87vw;
      line-height: 1.36;
      letter-spacing: .17em
   }

   .route-about .about-target-hero h1 {
      margin: 0 0 1.75vw;
      font-size: 3.48vw;
      line-height: 1.12;
      letter-spacing: .03em
   }

   .route-about .about-target-hero__statement {
      margin: 0;
      color: #3a2c28;
      font-size: 2.05vw;
      font-weight: 700;
      line-height: 1.32;
      letter-spacing: .055em
   }

   .route-about .about-target-hero__lead {
      margin: 3.4vw 0 0;
      color: #4e403a;
      font-size: 1.28vw;
      font-weight: 500;
      line-height: 1.42;
      letter-spacing: .06em
   }

   .route-about .about-target-hero__body {
      margin: 2.05vw 0 0;
      color: #6b5a53;
      font-size: 1.06vw;
      line-height: 1.5;
      letter-spacing: .05em
   }

   .route-about .about-target-hero__link {
      margin-top: 5.6vw;
      font-size: .86vw;
      line-height: 1.2
   }

   .route-about .about-target-hero__visual {
      position: absolute;
      top: 16.35vw;
      left: 50.79vw;
      width: 47.3vw;
      margin: 0
   }

   .route-about .about-target-hero__visual img {
      border-radius: 2.85vw 1.42vw 2.85vw 1.42vw;
      box-shadow: 0 1.1vw 2.2vw rgba(80, 54, 42, .10)
   }

   .route-about .about-target-hero__visual figcaption {
      margin-top: 3.75vw;
      font-size: 1.45vw;
      line-height: 1.38;
      letter-spacing: .07em
   }
}

/* Slide 03 /features/: independent composition, measured from the 630px target. */
.features-v1 {
   width: 100%;
   overflow: hidden;
   background: #fff7f0;
   color: #3a2c28;
   font-family: var(--first-sheep-font)
}

/* /about/ target story: each chapter has a dedicated composition, scoped to this route only. */
.route-about .about-target-story {
   width: 100vw;
   margin-left: calc(50% - 50vw);
   font-family: var(--first-sheep-font);
   color: #3a2c28;
   overflow: hidden
}

/* About target geometry lock — projected from the 630px-wide source image. */
@media(min-width:1200px) {
   .route-about .about-target-story {
      --about-target-h2: 3vw;
      --about-target-body: 1.15vw;
      --about-target-support: 1.65vw;
      --about-target-display: 2.25vw;
      --about-target-number: 5.8vw;
      background: #faeee9;
   }

   .about-target-section h2 {
      font-size: var(--about-target-h2);
      line-height: 1.18
   }

   .about-target-section p {
      font-size: var(--about-target-body);
      line-height: 1.72
   }

   .about-target-emphasis {
      font-size: var(--about-target-support) !important;
      line-height: 1.32 !important
   }

   .about-target-display {
      font-size: var(--about-target-display) !important;
      line-height: 1.28 !important
   }

   .about-target-number {
      top: 1.6vw;
      right: 11.6vw;
      font-size: var(--about-target-number);
      color: rgba(216, 154, 58, .24)
   }

   /* 01 — heading, oval, body and closing line follow the source offsets. */
   .about-target-block--future-left {
      top: .7vw
   }

   .about-target-block--future-left .about-target-emphasis {
      margin-top: 10.5vw
   }

   .about-target-block--future-left .about-target-display {
      margin-top: 2.5vw
   }

   .about-target-block--future-right {
      top: 12.8vw
   }

   .about-target-close {
      bottom: 3.0vw;
      font-size: 1.3vw !important
   }

   /* 02 — a quiet, full-width pink surface with intentionally offset columns. */
   .about-target-section--why {
      background: #f2ddd8
   }

   .about-target-section--why .about-target-number {
      color: rgba(255, 247, 240, .42)
   }

   .about-target-block--why-right {
      top: 20.2vw
   }

   /* 03 — retain the broad horizontal reading order of the target. */
   .about-target-block--ally-heading {
      top: 4.7vw
   }

   .about-target-flow {
      font-size: 1.12vw;
      line-height: 1.55
   }

   /* 04 — its inset panel starts at the same left edge as the target heading. */
   .about-target-panel {
      width: 75vw;
      height: 48vw;
      margin-left: 10vw;
      margin-right: 15vw;
      padding-top: 6.1vw
   }

   .about-target-panel h2 {
      margin-left: 0;
      font-size: var(--about-target-h2)
   }

   .about-target-panel .about-target-number {
      top: 3.1vw;
      right: 4.2vw
   }

   .about-target-block--not-do-left {
      left: 0;
      top: 17vw
   }

   .about-target-block--not-do-left ul {
      font-size: 1.28vw;
      line-height: 1.52
   }

   .about-target-block--not-do-right {
      top: 16.2vw
   }

   /* 05 and END preserve their source-aligned headings, with room for the body. */
   .about-target-block--sheep-right {
      top: 18.2vw
   }

   .about-target-section--ending .about-target-number {
      right: 10.4vw;
      font-size: 6.1vw;
      color: rgba(216, 154, 58, .22)
   }

   /* The source includes a pale separator before the last, open CTA surface. */
   .about-target-section--cta {
      margin-top: 4.8vw
   }

   .about-target-block--cta-left {
      top: 7.35vw
   }

   .about-target-store-links {
      top: 14.7vw
   }
}

/* Global lockup and typography supplied with HOME image specification. */
body,
button,
input,
textarea,
select,
.button,
.site-header,
.site-footer {
   font-family: "筑紫A丸ゴシック", "Tsukushi A Round Gothic", sans-serif
}

.brand-lockup {
   gap: 9px
}

.brand-lockup img:first-child {
   width: 38px;
   height: 38px;
   border-radius: 0
}

.brand-lockup .brand-wordmark {
   display: block;
   width: 126px;
   height: auto;
   border-radius: 0
}

.footer-brand>img {
   display: none
}

.footer-brand>div>strong {
   display: none
}

.footer-brand>div:before {
   content: "";
   display: block;
   width: 170px;
   height: 32px;
   background: url("/assets/home-v3/logo2.png") center/contain no-repeat
}

.footer-brand:before {
   content: "";
   display: block;
   width: 44px;
   height: 44px;
   background: url("/assets/home-v3/logo1.png") center/contain no-repeat
}

.footer-brand {
   display: flex;
   align-items: center;
   gap: 9px
}

.footer-brand>div {
   display: flex;
   flex-direction: column;
   gap: 5px
}

/* HOME V3 — independent six-chapter brand story, source: 20260917 assets. */
.home-v3 {
   --ivory: #fff7f0;
   --cream: #f9efe6;
   --amber: #d89a3a;
   --deep: #b96a2c;
   --apricot: #f3c98b;
   --pink: #c98f97;
   --rose: #e8c9cd;
   --cocoa: #3a2c28;
   --taupe: #6b5a53;
   overflow-x: clip;
   background: var(--ivory);
   color: var(--cocoa)
}

.home-v3 * {
   box-sizing: border-box
}

.home-v3 section {
   position: relative;
   isolation: isolate
}

.home-v3 h1,
.home-v3 h2 {
   font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
   font-weight: 500;
   letter-spacing: -.045em
}

.home-v3 .eyebrow {
   color: var(--deep)
}

.home-v3 figure {
   margin: 0
}

.home-v3 img {
   display: block;
   max-width: 100%
}

.home-v3-hero {
   display: grid;
   grid-template-columns: minmax(420px, .86fr) minmax(650px, 1.14fr);
   gap: clamp(54px, 7vw, 122px);
   align-items: center;
   min-height: 720px;
   padding: 72px max(6vw, calc((100vw - 1260px)/2)) 116px;
   background: linear-gradient(155deg, #fffaf5, #fff7f0 66%, #f9efe6)
}

.home-v3-hero:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: -15vw;
   top: -17vw;
   width: 64vw;
   height: 48vw;
   border-radius: 0 0 58% 42%;
   background: radial-gradient(ellipse at 66% 62%, rgba(243, 201, 139, .5), transparent 68%)
}

.home-v3-hero__copy {
   max-width: 550px
}

.home-v3-hero__copy>p:first-of-type {
   margin: 0 0 18px;
   font: 1.5rem/1.7 Georgia, "Yu Mincho", serif
}

.home-v3-hero h1 {
   margin: 0;
   font-size: clamp(3.8rem, 5vw, 5.35rem);
   line-height: 1.12
}

.home-v3-hero h1 span,
.home-v3-hope h2 span,
.home-v3-purpose h2 span {
   display: block
}

.home-v3-lead {
   margin: 27px 0 0;
   color: var(--taupe);
   line-height: 1.9
}

.home-v3-actions {
   display: flex;
   gap: 12px;
   margin-top: 30px
}

.home-v3-hero small {
   display: block;
   margin-top: 18px;
   color: var(--taupe)
}

.home-v3-hero__image {
   overflow: hidden;
   border-radius: 32px;
   box-shadow: 0 30px 76px rgba(78, 49, 38, .16)
}

.home-v3-hero__image img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover
}

.home-v3-empathy {
   display: grid;
   grid-template-columns: minmax(0, 1.13fr) minmax(390px, .87fr);
   gap: clamp(54px, 8vw, 138px);
   align-items: center;
   padding: 130px max(6vw, calc((100vw - 1260px)/2)) 146px;
   background: linear-gradient(160deg, #f9efe6, #fffaf5 60%, #fff7f0)
}

.home-v3-empathy:before {
   content: "";
   position: absolute;
   z-index: -1;
   inset: 9% 44% -13% -8%;
   border-radius: 0 54% 48% 0;
   background: linear-gradient(145deg, rgba(232, 201, 205, .54), rgba(243, 201, 139, .18));
   transform: rotate(-2deg)
}

.home-v3-empathy__mosaic {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   padding: 20px;
   border-radius: 34px;
   background: rgba(255, 251, 245, .75);
   box-shadow: 0 27px 64px rgba(92, 57, 41, .1)
}

.home-v3-empathy__mosaic:before {
   content: "";
   position: absolute;
   z-index: -1;
   inset: -5% 7% 8% -5%;
   border-radius: 44% 50% 42% 48%;
   background: rgba(243, 201, 139, .24)
}

.home-v3-empathy__mosaic figure:nth-child(2) {
   transform: translateY(10px)
}

.home-v3-empathy__mosaic figure:nth-child(5) {
   transform: translateY(8px)
}

.home-v3-empathy__mosaic img {
   width: 100%;
   height: auto;
   border-radius: 13px;
   box-shadow: 0 9px 22px rgba(79, 52, 43, .1)
}

.home-v3-empathy__copy {
   max-width: 490px
}

.home-v3-empathy h2 {
   margin: 0 0 28px;
   font-size: clamp(3rem, 4vw, 4.25rem);
   line-height: 1.2
}

.home-v3-empathy__copy>div {
   border-top: 1px solid rgba(107, 90, 83, .26)
}

.home-v3-empathy__copy>div p {
   margin: 0;
   padding: 12px 0;
   border-bottom: 1px solid rgba(107, 90, 83, .26)
}

.home-v3-quiet {
   margin: 25px 0 0;
   color: var(--taupe);
   font: 1.28rem/1.75 Georgia, "Yu Mincho", serif
}

.home-v3-quiet strong {
   color: var(--deep)
}

.home-v3-hope {
   display: grid;
   grid-template-columns: minmax(360px, .7fr) minmax(0, 1.3fr);
   gap: clamp(80px, 10vw, 168px);
   align-items: start;
   padding: 154px max(7vw, calc((100vw - 1180px)/2));
   background: linear-gradient(140deg, #fff7f0, #fffaf5 48%, #f8eee8)
}

.home-v3-hope:after {
   content: "";
   position: absolute;
   z-index: -1;
   right: -14vw;
   top: 9%;
   width: 67vw;
   height: 82%;
   border-radius: 50% 0 0 50%;
   background: linear-gradient(145deg, rgba(243, 201, 139, .18), rgba(232, 201, 205, .48))
}

.home-v3-hope__question {
   padding-top: 36px
}

.home-v3-hope h2 {
   margin: 0 0 34px;
   font-size: clamp(3.2rem, 4.5vw, 4.8rem);
   line-height: 1.16
}

.home-v3-hope__question>p {
   margin: 0;
   padding: 13px 0;
   border-bottom: 1px solid rgba(58, 44, 40, .24)
}

.home-v3-hope__future {
   display: grid;
   grid-template-columns: 190px 1fr;
   gap: 38px;
   align-items: center
}

.home-v3-hope__future figure img {
   width: 100%;
   border-radius: 50%;
   box-shadow: 0 20px 50px rgba(89, 56, 39, .12)
}

.home-v3-hope__future>div {
   border-block: 1px solid rgba(185, 106, 44, .45);
   padding: 17px 0
}

.home-v3-hope__future p {
   margin: 0;
   padding: 10px 0;
   color: var(--taupe)
}

.home-v3-hope__future strong {
   display: block;
   color: var(--cocoa);
   font: 3rem/1.5 Georgia, "Yu Mincho", serif
}

.home-v3-hope blockquote {
   margin: 24px 0 2px;
   color: var(--deep);
   font: 1.5rem/1.55 Georgia, "Yu Mincho", serif
}

.home-v3-change {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(410px, .78fr);
   gap: clamp(84px, 11vw, 180px);
   align-items: center;
   padding: 154px max(7vw, calc((100vw - 1180px)/2)) 166px;
   background: linear-gradient(160deg, #f8eee8, #fff7f0)
}

.home-v3-change:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: -10vw;
   top: -13vw;
   width: 63vw;
   height: 62vw;
   border-radius: 0 58% 54% 0;
   background: linear-gradient(145deg, rgba(232, 201, 205, .73), rgba(243, 201, 139, .16));
   transform: rotate(2deg)
}

.home-v3-change h2 {
   margin: 0 0 32px;
   font-size: clamp(3rem, 4.2vw, 4.4rem);
   line-height: 1.17
}

.home-v3-change dl {
   margin: 0;
   border-top: 1px solid rgba(58, 44, 40, .3)
}

.home-v3-change dl div {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   padding: 16px 0;
   border-bottom: 1px solid rgba(58, 44, 40, .3)
}

.home-v3-change dt,
.home-v3-change dd {
   margin: 0
}

.home-v3-change dd:before {
   content: "→";
   margin-right: 14px;
   color: var(--deep)
}

.home-v3-change dd {
   font: 1.2rem/1.5 Georgia, "Yu Mincho", serif
}

.home-v3-change aside {
   padding: 50px 44px;
   border-radius: 38px 18px 42px 22px;
   background: rgba(255, 251, 245, .78);
   box-shadow: 0 25px 58px rgba(92, 57, 41, .1)
}

.home-v3-change aside p:first-child {
   margin: 0 0 24px;
   font: 1.65rem/1.62 Georgia, "Yu Mincho", serif
}

.home-v3-change aside p:nth-child(2) {
   color: var(--taupe)
}

.home-v3-change aside div {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 25px
}

.home-v3-change aside span {
   padding: 8px 12px;
   border: 1px solid rgba(58, 44, 40, .3);
   border-radius: 999px;
   font-size: .9rem
}

.home-v3-purpose {
   display: grid;
   grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
   gap: clamp(70px, 9vw, 146px);
   align-items: center;
   padding: 154px max(7vw, calc((100vw - 1180px)/2));
   background: linear-gradient(145deg, #fff7f0, #fffaf5 64%, #f9efe6)
}

.home-v3-purpose:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: -12vw;
   top: 6%;
   width: 65vw;
   height: 88%;
   border-radius: 0 48% 52% 0;
   background: linear-gradient(155deg, rgba(243, 201, 139, .38), transparent)
}

.home-v3-purpose figure {
   overflow: hidden;
   border-radius: 30px 112px 30px 88px;
   box-shadow: 0 28px 68px rgba(87, 48, 34, .15)
}

.home-v3-purpose figure img {
   width: 100%;
   aspect-ratio: 16/10;
   object-fit: cover
}

.home-v3-purpose>div {
   max-width: 490px
}

.home-v3-purpose h2 {
   margin: 0 0 24px;
   font-size: clamp(3.7rem, 5.5vw, 5.8rem);
   line-height: 1.04
}

.home-v3-purpose__line {
   margin: 0 0 20px;
   font: 1.85rem/1.52 Georgia, "Yu Mincho", serif
}

.home-v3-purpose>div>p:not(.home-v3-purpose__line) {
   color: var(--taupe)
}

.home-v3-purpose aside {
   margin-top: 28px;
   padding-top: 22px;
   border-top: 1px solid rgba(58, 44, 40, .2)
}

.home-v3-purpose aside .text-link {
   color: var(--deep)
}

.home-v3-ending {
   display: grid;
   grid-template-columns: minmax(0, 1.08fr) 360px;
   gap: clamp(70px, 10vw, 168px);
   align-items: center;
   padding: 140px max(7vw, calc((100vw - 1180px)/2)) 148px;
   background: linear-gradient(150deg, #f8ebe7, #f6e5df 56%, #fff5e6)
}

.home-v3-ending:before {
   content: "";
   position: absolute;
   z-index: -1;
   right: -12vw;
   top: -14%;
   width: 60vw;
   height: 92%;
   border-radius: 52% 0 0 48%;
   background: rgba(255, 247, 240, .65)
}

.home-v3-ending h2 {
   margin: 0 0 23px;
   font-size: clamp(3rem, 4.2vw, 4.35rem);
   line-height: 1.2
}

.home-v3-ending>div>p {
   font: 1.35rem/1.7 Georgia, "Yu Mincho", serif
}

.home-v3-ending nav {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 18px;
   margin-top: 26px
}

.home-v3-ending nav a {
   padding-bottom: 4px;
   border-bottom: 1px solid var(--amber);
   font-weight: 700
}

.home-v3-ending aside {
   padding: 26px 30px 38px;
   text-align: center;
   border: 1px solid rgba(185, 106, 44, .17);
   border-radius: 38px 18px 42px 22px;
   background: linear-gradient(145deg, rgba(255, 247, 240, .96), rgba(243, 201, 139, .5));
   box-shadow: 0 24px 58px rgba(92, 57, 41, .1)
}

.home-v3-ending aside figure {
   overflow: hidden;
   border-radius: 22px
}

.home-v3-ending aside figure img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover
}

.home-v3-ending aside p {
   margin: 16px 0 0;
   color: var(--taupe)
}

.home-v3-ending aside h2 {
   margin: 10px 0 24px;
   font-size: 2rem
}

.home-v3-ending .store-links {
   justify-content: center
}

.home-v3-ending small {
   display: block;
   margin-top: 18px;
   color: var(--taupe)
}

@media(max-width:1100px) {

   .home-v3-hero,
   .home-v3-empathy,
   .home-v3-hope,
   .home-v3-change,
   .home-v3-purpose,
   .home-v3-ending {
      grid-template-columns: 1fr;
      min-height: 0
   }

   .home-v3-hero__image,
   .home-v3-empathy__mosaic,
   .home-v3-hope__future,
   .home-v3-change aside,
   .home-v3-purpose figure,
   .home-v3-ending aside {
      max-width: 760px
   }

   .home-v3-hero__image,
   .home-v3-empathy__mosaic,
   .home-v3-purpose figure {
      justify-self: end
   }

   .home-v3-hope__question {
      padding-top: 0
   }

   .home-v3-hope__future {
      grid-template-columns: 170px 1fr
   }

   .home-v3-change {
      gap: 56px
   }

   .home-v3-purpose {
      gap: 58px
   }

   .home-v3-ending {
      gap: 56px
   }
}

@media(max-width:767px) {

   .home-v3-hero,
   .home-v3-empathy,
   .home-v3-hope,
   .home-v3-change,
   .home-v3-purpose,
   .home-v3-ending {
      display: block;
      padding: 76px 22px
   }

   .home-v3-hero h1 {
      font-size: clamp(2.8rem, 12vw, 3.6rem)
   }

   .home-v3-hero__image {
      margin-top: 44px
   }

   .home-v3-empathy__mosaic {
      padding: 10px;
      gap: 8px
   }

   .home-v3-empathy__copy {
      margin-top: 42px
   }

   .home-v3-hope h2 {
      font-size: clamp(2.6rem, 11vw, 3.4rem)
   }

   .home-v3-hope__future {
      display: block;
      margin-top: 44px
   }

   .home-v3-hope__future figure {
      width: 52%;
      margin: 0 auto 22px
   }

   .home-v3-change aside {
      margin-top: 45px;
      padding: 32px 24px
   }

   .home-v3-change dl div {
      grid-template-columns: 1fr;
      gap: 8px
   }

   .home-v3-purpose figure {
      margin-bottom: 48px
   }

   .home-v3-purpose h2 {
      font-size: clamp(3.3rem, 15vw, 4.5rem)
   }

   .home-v3-ending aside {
      margin-top: 48px
   }

   .home-v3-actions {
      flex-wrap: wrap
   }
}

/* HOME V3 local alignment: PPT typography, lockups, and meaningful desktop line breaks. */
:root {
   --first-sheep-font: "筑紫A丸ゴシック", "Tsukushi A Round Gothic", sans-serif
}

body,
button,
input,
textarea,
select,
.button,
.site-header,
.site-footer,
.site-header *,
.site-footer *,
.home-v3,
.home-v3 * {
   font-family: var(--first-sheep-font) !important
}

.brand-lockup,
.footer-lockup {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 0 !important;
   background: transparent !important;
   border: 0 !important;
   outline: 0 !important;
   box-shadow: none !important;
   border-radius: 0 !important
}

.brand-lockup img,
.footer-lockup img {
   display: block;
   padding: 0 !important;
   background: transparent !important;
   border: 0 !important;
   outline: 0 !important;
   box-shadow: none !important;
   border-radius: 0 !important
}

.brand-lockup img:first-child,
.footer-lockup img:first-child {
   width: 38px;
   height: 38px
}

.brand-lockup .brand-wordmark,
.footer-lockup .brand-wordmark {
   width: 126px;
   height: auto
}

.footer-brand {
   display: flex;
   align-items: flex-start;
   gap: 14px
}

.footer-brand:before,
.footer-brand>div:before {
   content: none !important;
   display: none !important
}

.footer-brand>img {
   display: none !important
}

.footer-brand>div>strong {
   display: none !important
}

.footer-brand>div {
   display: block !important
}

.footer-brand>span {
   display: block;
   color: var(--muted);
   font-size: .875rem;
   line-height: 1.55
}

.home-v3 h1,
.home-v3 h2,
.home-v3-hero__copy>p:first-of-type,
.home-v3-quiet,
.home-v3-hope__future strong,
.home-v3-hope blockquote,
.home-v3-change dd,
.home-v3-change aside p:first-child,
.home-v3-purpose__line,
.home-v3-ending>div>p {
   font-family: var(--first-sheep-font) !important
}

.home-v3-hero {
   grid-template-columns: minmax(440px, .94fr) minmax(620px, 1.06fr);
   gap: clamp(48px, 6vw, 104px)
}

.home-v3-hero__copy {
   max-width: 590px
}

.home-v3-hero h1 {
   font-size: clamp(3.55rem, 4.65vw, 4.96rem);
   line-height: 1.14
}

.home-v3-empathy h2 {
   font-size: clamp(2.8rem, 3.72vw, 3.98rem);
   line-height: 1.23
}

.home-v3-hope {
   grid-template-columns: minmax(475px, .94fr) minmax(0, 1.06fr);
   gap: clamp(58px, 7vw, 104px)
}

.home-v3-hope__question {
   max-width: 560px
}

.home-v3-hope h2 {
   font-size: clamp(3rem, 4.18vw, 4.46rem);
   line-height: 1.18
}

.home-v3-hope__question>p {
   max-width: 32rem;
   line-height: 1.72
}

.home-v3-hope__future {
   grid-template-columns: 180px minmax(0, 1fr);
   gap: 32px
}

.home-v3-change {
   grid-template-columns: minmax(0, 1fr) minmax(470px, .94fr);
   gap: clamp(58px, 7vw, 116px)
}

.home-v3-change h2 {
   font-size: clamp(2.85rem, 3.94vw, 4.12rem);
   line-height: 1.18
}

.home-v3-change h2 span {
   display: block
}

.home-v3-change aside {
   width: 100%;
   padding: 48px 46px
}

.home-v3-change aside p:first-child {
   font-size: 1.56rem;
   line-height: 1.66
}

.home-v3-change aside p:nth-child(2) {
   max-width: 28rem;
   line-height: 1.82
}

.home-v3-change__affirmations {
   display: block !important;
   margin-top: 28px !important
}

.home-v3-change__affirmations img {
   display: block;
   width: min(100%, 390px);
   height: auto;
   border: 0 !important;
   border-radius: 0 !important;
   padding: 0 !important;
   background: transparent !important;
   box-shadow: none !important
}

.home-v3-purpose {
   grid-template-columns: minmax(0, 1fr) minmax(510px, 1fr);
   gap: clamp(56px, 7vw, 106px)
}

.home-v3-purpose>div {
   max-width: 590px
}

.home-v3-purpose h2 {
   font-size: clamp(3.45rem, 5.1vw, 5.4rem);
   line-height: 1.08
}

.home-v3-purpose aside {
   max-width: 36rem
}

.home-v3-purpose aside p {
   font-size: 1rem;
   line-height: 1.9
}

.home-v3-ending {
   grid-template-columns: minmax(0, 1.1fr) 380px;
   gap: clamp(56px, 8vw, 126px)
}

.home-v3-ending h2 {
   font-size: clamp(2.8rem, 3.9vw, 4.08rem);
   line-height: 1.22
}

@media(max-width:1100px) {

   .home-v3-hope,
   .home-v3-change,
   .home-v3-purpose {
      grid-template-columns: 1fr
   }

   .home-v3-hope__question,
   .home-v3-purpose>div {
      max-width: 680px
   }

   .home-v3-change aside {
      max-width: 760px
   }

   .home-v3-hero h1 {
      font-size: clamp(3.3rem, 6vw, 4.45rem)
   }
}

@media(max-width:767px) {

   .brand-lockup img:first-child,
   .footer-lockup img:first-child {
      width: 32px;
      height: 32px
   }

   .brand-lockup .brand-wordmark,
   .footer-lockup .brand-wordmark {
      width: 110px
   }

   .home-v3 h1 span,
   .home-v3-hope h2 span,
   .home-v3-purpose h2 span,
   .home-v3-change h2 span {
      display: inline
   }

   .home-v3-hero h1 {
      font-size: clamp(2.65rem, 11vw, 3.35rem)
   }

   .home-v3-hope h2 {
      font-size: clamp(2.5rem, 10vw, 3.15rem)
   }

   .home-v3-purpose h2 {
      font-size: clamp(3rem, 13vw, 4rem)
   }

   .home-v3-ending h2 {
      font-size: clamp(2.55rem, 10vw, 3.2rem)
   }

   .home-v3-hope__question>p br,
   .home-v3-change aside p br,
   .home-v3-purpose aside p br {
      display: none
   }

   .home-v3-change__affirmations img {
      width: 100%
   }

   .footer-brand {
      flex-direction: column;
      gap: 10px
   }
}

/* HOME V3 micro-adjustments: uniform empathy tiles and brand signature. */
.home-v3-empathy__mosaic {
   width: 100%;
   max-width: 610px;
   justify-self: start;
   gap: 12px;
   padding: 16px
}

.home-v3-empathy__mosaic figure,
.home-v3-empathy__mosaic figure:nth-child(2),
.home-v3-empathy__mosaic figure:nth-child(5) {
   aspect-ratio: 1.16/1;
   margin: 0;
   overflow: hidden;
   transform: none;
   border-radius: 16px
}

.home-v3-empathy__mosaic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: inherit
}

.home-v3-quiet {
   margin-top: 42px
}

.home-v3-hope__statement {
   max-width: none !important;
   white-space: nowrap;
   font-size: .98rem
}

.home-v3-hope blockquote {
   line-height: 1.6
}

.home-v3-hero small {
   max-width: none;
   white-space: nowrap;
   font-size: .78rem;
   letter-spacing: -.015em
}

.home-v3-ending__mark {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 94px;
   height: 94px;
   margin: 0 auto 8px !important;
   overflow: visible !important;
   border-radius: 0 !important
}

.home-v3-ending aside .home-v3-ending__mark img {
   width: 82px;
   height: 82px;
   aspect-ratio: 1 !important;
   object-fit: contain;
   border-radius: 0 !important;
   box-shadow: none !important
}

.footer-brand {
   display: block
}

.footer-brand__signature {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 11px
}

.footer-brand__signature>span {
   display: block;
   max-width: 28rem;
   color: var(--muted);
   font-size: .875rem;
   line-height: 1.55
}

.footer-lockup img:first-child {
   border-radius: 10px !important;
   object-fit: cover
}

@media(max-width:767px) {
   .home-v3-empathy__mosaic {
      max-width: none;
      gap: 9px;
      padding: 11px
   }

   .home-v3-empathy__mosaic figure,
   .home-v3-empathy__mosaic figure:nth-child(2),
   .home-v3-empathy__mosaic figure:nth-child(5) {
      border-radius: 12px
   }

   .home-v3-quiet {
      margin-top: 34px
   }

   .home-v3-hope__statement,
   .home-v3-hero small {
      white-space: normal
   }

   .home-v3-hero small {
      font-size: .73rem
   }

   .footer-brand__signature>span {
      max-width: 100%
   }
}

/* HOME V3 local refinements: clearer Hope layer and more legible brand marks. */
.brand-lockup img:first-child,
.footer-lockup img:first-child {
   width: 44px;
   height: 44px
}

.brand-lockup .brand-wordmark,
.footer-lockup .brand-wordmark {
   width: 146px
}

.home-v3-hope:after {
   z-index: 0;
   pointer-events: none
}

.home-v3-hope__question,
.home-v3-hope__future {
   position: relative;
   z-index: 1
}

.home-v3-hope__statement {
   position: relative;
   z-index: 2
}

.home-v3-ending__mark {
   overflow: hidden !important;
   border-radius: 16px !important
}

.home-v3-ending aside .home-v3-ending__mark img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit !important
}

.home-v3-ending aside small {
   white-space: nowrap;
   font-size: .72rem;
   letter-spacing: -.03em
}

@media(max-width:767px) {

   .brand-lockup img:first-child,
   .footer-lockup img:first-child {
      width: 36px;
      height: 36px
   }

   .brand-lockup .brand-wordmark,
   .footer-lockup .brand-wordmark {
      width: 120px
   }

   .home-v3-ending aside small {
      font-size: .69rem
   }
}

/* Hope: decoration and all content intentionally live in separate layers. */
.home-v3-hope {
   display: block;
   position: relative;
   isolation: isolate
}

.home-v3-hope::after {
   z-index: 0;
   transform: none;
   filter: none;
   opacity: 1
}

.home-v3-hope__content {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: minmax(475px, .94fr) minmax(0, 1.06fr);
   gap: clamp(58px, 7vw, 104px);
   align-items: start;
   transform: none;
   filter: none;
   opacity: 1;
   isolation: auto
}

.home-v3-hope__question,
.home-v3-hope__future {
   z-index: auto
}

@media(max-width:1100px) {
   .home-v3-hope__content {
      grid-template-columns: 1fr
   }

   .home-v3-hope__question {
      max-width: 680px
   }
}

@media(max-width:767px) {
   .home-v3-hope__content {
      display: block
   }
}

/* Hope → Change boundary: sibling sections have an explicit paint order. */
.home-v3-hope {
   z-index: 2
}

.home-v3-hope__content {
   z-index: 3
}

.home-v3-change {
   position: relative;
   z-index: 1;
   isolation: isolate
}

.home-v3-change::before {
   z-index: 0;
   top: -7vw;
   pointer-events: none
}

.home-v3-change>.home-v3-change__beforeafter,
.home-v3-change>aside {
   position: relative;
   z-index: 2
}

/* 01 / a lighter editorial opening, joined to the following chapter by a soft field */
.lp-story-home .lp-hero {
   grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
   gap: clamp(44px, 6vw, 88px);
   min-height: auto;
   padding-top: clamp(54px, 6.2vw, 88px);
   padding-bottom: clamp(82px, 8vw, 126px);
   background: linear-gradient(180deg, #fffaf4 0%, #fff7f0 78%, #f9efe6 100%);
}

/* 03 / quiet, ordered hope with a clear question-and-future relationship */
.lp-story-home .lp-hope {
   grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
   gap: clamp(54px, 8vw, 122px);
   min-height: auto;
   padding-top: clamp(84px, 9vw, 132px);
   padding-bottom: clamp(84px, 9vw, 132px);
   background: #fff8ef;
}

/* 04 / acceptance lives on overlapping rose and cream shapes, not a solid colour band */
.lp-story-home .lp-acceptance {
   grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
   gap: clamp(54px, 8vw, 128px);
   min-height: auto;
   padding-top: clamp(86px, 9vw, 138px);
   padding-bottom: clamp(88px, 9vw, 142px);
   background: #f8eee8;
}

/* Full-width editorial surfaces, with a readable inner column. */
.subpage .reading-prose {
   max-width: none;
   margin: 0;
   padding: 0;
   counter-reset: none
}

/* Family rhythm: same language, different page jobs. */
.family-brand .subpage-hero {
   grid-template-columns: minmax(320px, .7fr) minmax(560px, 1.3fr);
   background: linear-gradient(135deg, #fff9f2, #f4e2d9 58%, var(--color-rose))
}

/* Emotional HOME height refinement */
@media(min-width:1280px) and (min-height:720px) {
   .story-purpose {
      padding-block: 68px
   }

   .story-purpose h2 {
      font-size: clamp(4rem, 7vw, 7rem);
      margin-bottom: 20px
   }

   .brand-promise {
      font-size: clamp(2rem, 3.5vw, 3.6rem)
   }

   .purpose-companion {
      margin-top: 22px
   }

   .approach-teaser {
      margin-top: 28px;
      padding-top: 22px
   }
}

/* -------------------------
   Route-specific styles moved from inline markup: /
   ------------------------- */

.home-v3 {
   --home-h1: clamp(3.55rem, 4.65vw, 4.96rem);
   --home-h2: clamp(2.8rem, 3.72vw, 3.98rem);
   --home-body: clamp(1rem, 1.18vw, 1.12rem);
   font-family: var(--first-sheep-font)
}

.home-v3 h1,
.home-v3 h2 {
   font-family: var(--first-sheep-font)
}

.home-v3-hero {
   min-height: clamp(720px, 59.4vw, 855px)
}

.home-v3-empathy {
   min-height: clamp(700px, 58.1vw, 837px);
   grid-template-columns: 34.7% 58.4%;
   gap: 6.9%;
   padding-left: 1.4vw;
   padding-right: 5vw
}

.home-v3-empathy__mosaic {
   max-width: none;
   padding: 0;
   background: transparent;
   box-shadow: none
}

.home-v3-empathy__copy {
   max-width: none
}

.home-v3-empathy__copy>div {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: clamp(28px, 5vw, 72px)
}

.home-v3-empathy__copy>div p {
   min-height: 4.5em;
   padding: 12px 0
}

.home-v3-empathy__copy>div p {
   width: max-content;
   max-width: 100%;
   border: 0 !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.3 C38 2.2 72 7.1 111 4.4 S184 2.2 238 4.8' fill='none' stroke='%23a96f62' stroke-width='1.6' stroke-linecap='round' opacity='.72'/%3E%3Cpath d='M4 6.6 C52 5.2 91 7.2 146 5.9 S210 4.9 236 6' fill='none' stroke='%23c58e83' stroke-width='.8' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: left calc(100% - 5px);
   background-size: 100% 7px
}

.home-v3-hope {
   min-height: clamp(680px, 55.6vw, 800px);
   padding: clamp(112px, 9vw, 138px) max(7vw, calc((100vw - 1180px)/2))
}

.home-v3-hope__content {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 42% 42%;
   justify-content: space-between;
   gap: 0;
   align-items: start
}

.home-v3-hope__question {
   padding-top: 0
}

.home-v3-hope__question>p {
   padding: 11px 0 13px
}

.home-v3-hope__future {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0;
   padding-top: clamp(34px, 3vw, 48px)
}

.home-v3-hope__future figure {
   position: absolute;
   top: 0;
   left: -48%;
   width: clamp(128px, 12vw, 174px)
}

.home-v3-hope__future>div {
   padding: 0;
   border: 0
}

.home-v3-hope__future p {
   padding: 8px 0
}

.home-v3-hope blockquote {
   margin: clamp(26px, 3vw, 42px) 0 0;
   text-align: left
}

.home-v3-hope__future p strong {
   display: inline-block;
   padding-bottom: 5px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.3 C38 2.2 72 7.1 111 4.4 S184 2.2 238 4.8' fill='none' stroke='%23a96f62' stroke-width='1.6' stroke-linecap='round' opacity='.72'/%3E%3Cpath d='M4 6.6 C52 5.2 91 7.2 146 5.9 S210 4.9 236 6' fill='none' stroke='%23c58e83' stroke-width='.8' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: left bottom;
   background-size: 100% 7px
}

.home-v3-change {
   min-height: clamp(680px, 55.6vw, 800px)
}

.home-v3-change aside {
   padding: 0;
   background: transparent;
   border-radius: 0;
   box-shadow: none
}

.home-v3-change__affirmations {
   display: block !important;
   width: min(100%, 420px);
   margin-top: clamp(24px, 2.6vw, 38px) !important
}

.home-v3-change__affirmations img {
   display: block;
   width: 100%;
   height: auto
}

.home-v3-purpose {
   min-height: clamp(710px, 58.7vw, 845px)
}

.home-v3-purpose h2 span {
   display: inline
}

.home-v3-ending {
   min-height: clamp(680px, 55vw, 792px)
}

.home-v3-ending .home-v3-ending__trust {
   margin-top: clamp(44px, 4.2vw, 64px);
   font-size: clamp(.84rem, .92vw, .95rem);
   line-height: 1.85;
   font-weight: 400
}

@media(max-width:1100px) {
   .home-v3-empathy {
      grid-template-columns: 1fr;
      padding-left: max(6vw, calc((100vw - 1260px)/2));
      padding-right: max(6vw, calc((100vw - 1260px)/2))
   }

   .home-v3-empathy__copy>div {
      grid-template-columns: 1fr 1fr
   }

   .home-v3-hope__content {
      grid-template-columns: 1fr
   }

   .home-v3-hope__future {
      margin-top: 54px;
      padding-top: 0
   }

   .home-v3-hope__future figure {
      position: static;
      width: 170px;
      margin: 0 0 28px
   }
}

@media(max-width:767px) {
   .home-v3-empathy__copy>div {
      display: block
   }

   .home-v3-empathy__copy>div p {
      min-height: 0
   }

   .home-v3-hope {
      padding: 76px 22px
   }

   .home-v3-hope__content {
      display: block
   }

   .home-v3-hope__future figure {
      width: 52%;
      margin: 0 auto 24px
   }

   .home-v3-purpose h2 span {
      display: inline
   }
}

/* ========================================
HOME FINAL TYPOGRAPHY

HOMEの文字サイズと行間は、このセクションを最終調整箇所とします。
既存の表示値を明示しているため、追加時点では見た目を変更しません。
======================================== */

/* Hero */
.page-home .home-v3-hero__copy>p:first-of-type {
   font-size: 18px;
   line-height: 1.72
}

.page-home .home-v3-hero h1 {
   font-size: 52px;
   line-height: 1.22
}

.page-home .home-v3-lead {
   font-size: 17px;
   line-height: 1.72
}

.page-home .home-v3-hero small {
   font-size: 12.48px;
   line-height: 1.85
}

/* Empathy */
.page-home .home-v3-empathy h2 {
   font-size: 36px;
   line-height: 1.32
}

.page-home .home-v3-empathy__copy>div p {
   font-size: 17px;
   line-height: 1.72
}

.page-home .home-v3-quiet {
   font-size: 20.48px;
   line-height: 1.75
}

/* Hope */
.page-home .home-v3-hope h2 {
   font-size: 36px;
   line-height: 1.32
}

.page-home .home-v3-hope__question>p,
.page-home .home-v3-hope__future p,
.page-home .home-v3-hope__future strong {
   font-size: 17px;
   line-height: 1.72
}

.page-home .home-v3-hope blockquote {
   font-size: 24px;
   line-height: 1.6
}

/* Change */
.page-home .home-v3-change h2 {
   font-size: 36px;
   line-height: 1.32
}

.page-home .home-v3-change dt {
   font-size: clamp(16px, calc(.22vw + 15.36px), 18px);
   line-height: 1.85
}

.page-home .home-v3-change dd {
   font-size: 19.2px;
   line-height: 1.5
}

.page-home .home-v3-change aside p:first-child {
   font-size: 24.96px;
   line-height: 1.66
}

.page-home .home-v3-change aside p:nth-child(2) {
   font-size: 15px;
   line-height: 1.72
}

/* Purpose */
.page-home .home-v3-purpose h2 {
   font-size: 36px;
   line-height: 1.32
}

.page-home .home-v3-purpose__line,
.page-home .home-v3-purpose>div>p {
   font-size: 18px;
   line-height: 1.72
}

.page-home .home-v3-purpose aside p {
   font-size: 15px;
   line-height: 1.72
}

/* Ending */
.page-home .home-v3-ending h2 {
   font-size: 36px;
   line-height: 1.32
}

.page-home .home-v3-ending>div>p,
.page-home .home-v3-ending aside p {
   font-size: 17px;
   line-height: 1.72
}

.page-home .home-v3-ending small {
   font-size: 11.52px;
   line-height: 1.85
}

/* Compact Desktop: 900px–1279px
   現在はWide Desktopと同じ値を使用します。 */
@media (min-width:900px) and (max-width:1279px) {
   .page-home .home-v3-change dt {
      font-size: clamp(17.34px, calc(.22vw + 15.36px), 18px)
   }
}

/* Tablet: 768px–899px */
@media (min-width:768px) and (max-width:899px) {
   .page-home .home-v3-change dt {
      font-size: clamp(17.0496px, calc(.22vw + 15.36px), 17.3378px)
   }
}

/* Mobile: 767px以下 */
@media (max-width:767px) {
   .page-home .home-v3-hero small {
      font-size: 11.68px
   }

   .page-home .home-v3-change dt {
      font-size: clamp(16px, calc(.22vw + 15.36px), 17.0474px)
   }

   .page-home .home-v3-ending small {
      font-size: 11.04px
   }
}

/* CHANGE — a real arrow element makes its position measurable and independent. */
.page-home .home-v3-change dd::before {content:none}
.page-home .home-v3-change dd {
   display:grid;
   grid-template-columns:26px minmax(0,1fr);
   column-gap:8px;
   align-items:baseline;
   width:calc(100% + 64px);
   transform:translateX(-82px)
}
.page-home .home-v3-change__arrow {
   display:inline-block;
   color:var(--deep);
   transform:translateX(-19px)
}
.page-home .home-v3-change__after {
   color:inherit;
   font:inherit;
   letter-spacing:inherit;
}
@media (max-width:767px) {
   .page-home .home-v3-change dd{width:auto;transform:none}
   .page-home .home-v3-change__arrow{transform:translateX(-10px)}
}