@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
    --forest: #203328;
    --ink: #273029;
    --white: #fff;
    --beige: #e5ded1;
    --muted: #687067;
    --line: rgba(39, 48, 41, .18);
    --red: #c0392b;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', Arial, sans-serif;
    --mono: 'DM Mono', monospace
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font: 16px/1.55 var(--serif)
}

main {
    display: flex;
    flex-direction: column
}

.wrap {
    width: min(1240px, calc(100% - 80px));
    margin: auto
}

.skip-link {
    position: fixed;
    top: -50px;
    left: 10px;
    z-index: 40;
    background: #fff;
    color: #000;
    padding: 8px
}

.skip-link:focus {
    top: 8px
}

.site-header {
    position: absolute;
    z-index: 20;
    width: 100%;
    height: 88px;
    padding: 0 max(40px, calc((100% - 1240px)/2));
    display: flex;
    align-items: center;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.site-header.scrolled {
    position: fixed;
    background: #fff;
    color: var(--ink);
    border-color: var(--line)
}

.brand {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 31px;
    color: inherit;
    text-decoration: none;
    line-height: 1
}

.brand b {
    position: absolute;
    top: -2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font: italic 14px var(--serif)
}

.brand strong {
    font-size: 20px;
    letter-spacing: .18em
}

.brand span {
    margin: 6px 0 0;
    font: 8px var(--mono);
    letter-spacing: .32em
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 31px;
    margin-left: auto
}

.language-switcher { display: flex; align-items: center; gap: 7px; margin-left: 24px }
.language-switcher button { padding: 3px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font: 9px var(--mono); letter-spacing: .04em; opacity: .52 }
.language-switcher button[aria-pressed="true"] { border-color: currentColor; opacity: 1 }

.main-nav a {
    color: inherit;
    text-decoration: none;
    font: 600 15px/1.2 var(--serif);
    letter-spacing: .005em
}

.main-nav a {
    position: relative;
    padding: 7px 0
}

.main-nav a:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .2s ease
}

.main-nav a:hover:after,
.main-nav a:focus-visible:after {
    transform: scaleX(1);
    transform-origin: left
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a:focus-visible { opacity: 1; text-shadow: 0 0 14px currentColor }


.menu-toggle {
    display: none
}

.header-shop-cta {
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: inherit;
    text-decoration: none;
    font: 600 13px/1.2 var(--serif)
}

.header-search-toggle {
    display: none
}

.header-search {
    display: none;
    position: fixed;
    z-index: 21;
    top: 68px;
    right: 0;
    left: 0;
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.header-search.is-open {
    display: block
}

.header-search__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0
}

.header-search__inner input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 500 16px var(--serif)
}

.header-search__inner input:focus { outline: 0 }

.header-search__inner button {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1
}

.hero {
    position: relative;
    height: min(780px, 100vh);
    min-height: 650px;
    color: #fff;
    overflow: hidden
}

.hero>img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* Home imagery: brighter, cleaner daylight without changing the approved assets. */
body:not(.about-page):not(.family-page) .hero>img,
body:not(.about-page):not(.family-page) .home-hero__media img,
body:not(.about-page):not(.family-page) .home-article-card img,
body:not(.about-page):not(.family-page) .home-ranking img,
body:not(.about-page):not(.family-page) .home-family-media img,
body:not(.about-page):not(.family-page) .home-space-card img,
body:not(.about-page):not(.family-page) .home-select-card img,
body:not(.about-page):not(.family-page) .service-media>img {
    filter: brightness(1.07) saturate(.86) contrast(.97)
}

.hero:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(18, 31, 23, .52), rgba(18, 31, 23, .03) 65%)
}

.hero-copy {
    padding-top: 210px
}

.eyebrow {
    margin: 0 0 17px;
    font: 10px var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase
}

.hero h1,
.home-hero__copy h1,
.service h2,
.philosophy h2 {
    margin: 0;
    font: 500 clamp(44px, 5vw, 70px)/1.06 var(--serif);
    letter-spacing: -.05em
}

.hero em,
.home-hero__copy em,
.service em,
.philosophy em {
    font-style: italic
}

.hero-copy>p:not(.eyebrow) {
    max-width: 395px;
    margin: 25px 0 30px;
    font: 500 16px/1.75 var(--serif)
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    padding: 14px 18px;
    background: var(--forest);
    color: #fff;
    text-decoration: none;
    font-size: 12px
}

.button.light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .75)
}

.customer-stories {
    order: 10;
    overflow: hidden;
    padding: 92px 0 46px;
    background: #f7f4ed;
    color: var(--forest)
}

.stories-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    margin-bottom: 38px
}

.stories-heading h2 {
    margin: 0;
    font: 500 clamp(38px, 3.5vw, 53px)/1.08 var(--serif);
    letter-spacing: -.05em
}

.stories-heading > div:first-child > p:not(.eyebrow) {
    max-width: 640px;
    margin: 16px 0 0;
    color: #596158;
    font: 500 15px/1.7 var(--serif)
}

.stories-controls { display: flex; gap: 8px; padding-bottom: 3px }
.stories-controls button {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(32, 51, 40, .42);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: 22px/1 var(--serif);
    transition: .2s
}
.stories-controls button:focus-visible { background: var(--forest); color: #fff }

@media (hover: hover) {
    .stories-controls button:hover { background: var(--forest); color: #fff }
}

.stories-viewport {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none
}
.stories-viewport::-webkit-scrollbar { display: none }
.story-card {
    position: relative;
    display: flex;
    flex: 0 0 calc((100% - 64px) / 5);
    min-width: 0;
    flex-direction: column;
    scroll-snap-align: start;
    background: #fffdf9
}
.story-category {
    margin: 0 0 10px;
    color: var(--forest);
    font: 500 10px/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .06em
}
.story-content { display: flex; flex: 1; flex-direction: column; padding: 20px 16px; background: transparent }
.story-stars { margin: 0 0 10px; color: #b99352; font-size: 12px; letter-spacing: .12em }
.story-card blockquote { margin: 0; color: #364238; font: 500 15px/1.43 var(--serif) }
.story-card footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center
}
.story-card footer strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #2a3429
}
.story-card footer em {
    display: block;
    color: #6a7468;
    font: 500 10px/1.3 var(--mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-style: normal
}
/* Future purchase CTA — hidden until activated */
.story-purchase-link {
    display: none;
    margin-top: 12px;
    color: #526051;
    font: 500 11px/1 var(--mono);
    text-decoration: none;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(82,96,81,.4);
    padding-bottom: 2px;
    align-self: flex-start
}
.story-purchase-link[href]:not([href=""]) { display: inline-block }
.stories-bottom { position: relative; display: flex; justify-content: center; align-items: center; min-height: 54px }
.stories-bottom > a { position: absolute; right: 0; color: inherit; text-decoration: none; font-size: 12px; border-bottom: 1px solid rgba(32, 51, 40, .45); padding-bottom: 3px }
.stories-bottom > a span { margin-left: 12px }
.stories-pagination { display: flex; gap: 7px }
.stories-pagination button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(32, 51, 40, .24); cursor: pointer; transition: .2s }
.stories-pagination button.is-active { width: 20px; border-radius: 9px; background: var(--forest) }

/* Japanese Brands — logo marks are shown in a muted, editorial grayscale treatment. */
.japanese-brands {
    order: 9;
    overflow: hidden;
    padding: 72px 0 78px;
    background: #fff;
    color: var(--ink)
}
.japanese-brands__intro { text-align: center }
.japanese-brands__intro .eyebrow { margin: 0 0 17px; letter-spacing: .18em }
.japanese-brands__intro h2 { margin: 0; font: 500 29px/1.3 var(--serif); letter-spacing: -.04em }
.japanese-brands__rows { display: grid; gap: 27px; margin-top: 48px }
.brand-row__track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 34px;
    column-gap: 47px;
    padding: 3px 26px
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    flex: 0 0 auto
}
.brand-mark img { display: block; width: auto; max-width: 154px; height: auto; max-height: 100%; filter: grayscale(1) }
.brand-mark--placeholder {
    color: rgba(39,48,41,.58);
    font: 500 14px/1 var(--sans);
    letter-spacing: .06em;
    white-space: nowrap;
    transition: color .2s ease
}
@media (hover:hover) {
    .brand-mark:hover { color: var(--ink) }
    .brand-mark img:hover { filter: grayscale(0) }
}
@media (min-width:821px) {
    .japanese-brands { padding: 106px 0 114px }
    .japanese-brands__intro h2 { font-size: 39px; line-height: 1.23 }
    .japanese-brands__rows { gap: 42px; margin-top: 72px }
    .brand-row__track { row-gap: 40px; column-gap: clamp(60px, 7vw, 132px); padding: 3px 40px }
    .brand-mark { height: 36px }
    .brand-mark--placeholder { font-size: 17px; letter-spacing: .075em }
}

.service {
    display: grid;
    grid-template-columns: 56% 44%;
    min-height: clamp(430px, 36vw, 520px)
}

.service-media {
    position: relative;
    display: flex;
    align-items: end;
    overflow: hidden;
    color: #f8f3e9
}

.service-media>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center
}

.service-media:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 29, 22, .54), rgba(16, 29, 22, .13) 68%), linear-gradient(0deg, rgba(13, 22, 17, .35), transparent 55%)
}

.service-media-content {
    position: relative;
    z-index: 1;
    max-width: 455px;
    margin: 0 9% 48px
}

.service .eyebrow { margin-bottom: 18px }

.service h2 {
    margin: 0;
    font: 500 clamp(42px, 3.8vw, 54px)/1.1 var(--serif);
    letter-spacing: -.045em
}

.service-media-content>p:not(.eyebrow) {
    max-width: 355px;
    margin: 22px 0 28px;
    font: 500 15px/1.6 var(--serif)
}

.service-cta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 12px 15px;
    border: 1px solid rgba(248, 243, 233, .82);
    color: inherit;
    font-size: 12px;
    text-decoration: none;
    transition: background .2s, color .2s
}

.service-cta:focus-visible { background: #f8f3e9; color: var(--forest) }

@media (hover: hover) {
    .service-cta:hover { background: #f8f3e9; color: var(--forest) }
}

.service-philosophy {
    display: flex;
    align-items: center;
    padding: clamp(52px, 6vw, 88px);
    background: #f7f4ed;
    color: var(--forest)
}

.service-philosophy>div { max-width: 465px }

.service-philosophy h2 { font-size: clamp(34px, 3vw, 46px) }

.service-philosophy>div>p:not(.eyebrow) {
    max-width: 390px;
    margin: 25px 0 30px;
    color: #596158;
    font: 500 15px/1.65 var(--serif)
}

.service-philosophy a {
    display: inline-flex;
    gap: 16px;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    color: inherit;
    font-size: 12px;
    text-decoration: none
}

.philosophy {
    padding: clamp(120px, 14vw, 200px) 0;
    text-align: center
}

.philosophy h2 {
    font-size: clamp(31px, 3.5vw, 51px);
    line-height: 1.3
}

.philosophy>div>p:last-child {
    margin-top: 35px;
    font: 10px var(--mono);
    letter-spacing: .14em
}

footer {
    padding: 78px 0 82px;
    background: var(--beige)
}

.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 70px
}

.footer-grid p {
    margin: 0 0 17px;
    font: 10px var(--mono);
    letter-spacing: .13em
}

.footer-brand>p {
    margin-top: 20px;
    font: 14px var(--serif);
    letter-spacing: 0;
    color: #4a554b
}

.footer-grid a {
    display: block;
    margin: 9px 0;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    transition: opacity .18s
}

.footer-grid a:hover,
.footer-grid a:focus-visible { opacity: .58 }

.footer-social {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center
}

.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px
}

.social-links a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border: 1px solid rgba(39, 48, 41, .4);
    border-radius: 50%;
    transition: background .18s, color .18s, transform .18s
}

.social-links a:hover,
.social-links a:focus-visible {
    background: var(--forest);
    color: #fff;
    opacity: 1;
    transform: translateY(-2px)
}

.social-links svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55
}

.footer-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    justify-self: end
}

/* About page — mobile-first, deliberately sparse. */
.about-page .site-header {
    position: relative;
    height: 68px;
    padding: 0 20px;
    background: #fff;
    color: var(--ink);
    border-color: var(--line)
}

.about-main { display: block }
.about-intro,
.about-story,
.about-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
    text-align: center
}

.about-intro { padding-top: 78px; padding-bottom: 70px }
.about-logo { margin: 0 }
.about-logo .brand { align-items: flex-start; transform: scale(1.32); transform-origin: center }
.about-logo .brand strong { font-size: 20px }
.about-tagline { margin: 43px 0 0; color: var(--muted); font: 10px var(--mono); letter-spacing: .13em }
.about-story { padding-bottom: 92px }
.about-contact { padding-bottom: 116px }
.about-kicker { margin: 0; font: 500 19px/1 var(--serif); letter-spacing: .08em }
.about-rule { display: block; width: 27px; height: 1px; margin: 18px 0 32px; background: var(--ink) }
.about-copy { width: min(100%, 620px); color: #4c554d; font: 500 17px/1.9 var(--serif); text-align: left }
.about-copy p { margin: 0 0 25px }
.about-copy p:last-child { margin-bottom: 0 }
.about-email { color: var(--ink); font: 500 16px var(--serif); text-decoration: none; border-bottom: 1px solid rgba(39, 48, 41, .42); padding-bottom: 3px }
.about-email:focus-visible { outline: 2px solid var(--forest); outline-offset: 5px }
.about-social { margin-top: 34px }
.about-social a { color: var(--ink) }

/* Kids & Family editorial templates */
.family-page { background:#fff; color:var(--ink) }
.family-page .site-header { position:relative; height:68px; padding:0 20px; background:#fff; color:var(--ink); border-color:var(--line) }
.family-page .wrap { width:min(100% - 40px, 1180px) }
.family-hero { padding-top:58px; padding-bottom:72px; text-align:center }
.family-crumb { margin:0 0 44px; color:var(--muted); font:9px var(--mono); letter-spacing:.05em; text-align:left }
.family-crumb a { color:inherit; text-decoration:none; border-bottom:1px solid transparent }
.family-crumb a:hover,.family-crumb a:focus-visible { color:var(--ink); border-bottom-color:currentColor }
.family-hero h1 { margin:0 0 16px; font:500 42px/1.05 var(--serif) }
.family-hero h2,.family-themes h2,.family-editorial h2,.family-section-head h2,.family-selection h2,.family-knowledge h2 { margin:0; font:500 32px/1.18 var(--serif); letter-spacing:-.04em }
.family-hero h2 em,.family-themes h2 em,.family-editorial h2 em,.family-selection h2 em { font-style:italic }
.family-lead { max-width:510px; margin:20px auto 38px; color:#596158; font-size:16px; line-height:1.8 }
.family-media { width:100%; overflow:hidden; background:#f5f3ee }
.family-media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center }
.family-media--hero,.family-media--editorial { aspect-ratio:3/2 }.family-media--theme,.family-media--article { aspect-ratio:4/3 }.family-media--featured { aspect-ratio:16/9 }.family-media--product { aspect-ratio:1/1 }
.family-themes,.family-articles,.family-selection,.family-knowledge { padding:72px 0 }
.family-themes header { margin-bottom:30px; text-align:center }.family-theme-grid { display:grid; grid-template-columns:1fr; gap:36px }
.family-theme-card { color:inherit; text-decoration:none }.family-theme-card>div { position:relative; padding:16px 2px 0 }.family-theme-card h3 { margin:0; font:500 27px/1.1 var(--serif) }.family-theme-card span { display:block; margin-top:4px; color:var(--muted); font:9px var(--mono); letter-spacing:.1em }.family-theme-card p { max-width:300px; margin:12px 32px 0 0; color:#626b63; font:500 14px/1.65 var(--serif) }.family-theme-card b { position:absolute; right:0; bottom:0; font:23px/1 var(--serif) }
.family-editorial { position:relative; color:#fff }.family-editorial:after { content:''; position:absolute; inset:0; background:rgba(23,35,26,.2) }.family-editorial>div:last-child { position:absolute; z-index:1; right:20px; bottom:38px; left:20px; text-align:center }.family-editorial .eyebrow { margin-bottom:11px }
.family-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:26px }.family-section-head a { color:inherit; font-size:12px; text-decoration:none; border-bottom:1px solid currentColor }.family-article-grid,.family-product-grid { display:grid; grid-template-columns:1fr; gap:30px }.family-article-card { display:block; padding:0 0 12px; color:inherit; text-decoration:none; transition:transform .24s ease,box-shadow .24s ease,background-color .24s ease }.family-article-card p,.family-product-grid article p { margin:12px 0 5px; font:8px var(--mono); letter-spacing:.12em }.family-article-grid h3,.family-product-grid h3,.family-feature>h3 { margin:0 0 8px; font:500 22px/1.25 var(--serif) }.family-article-card span { font-size:11px }.family-article-card:focus-visible { outline:2px solid var(--forest); outline-offset:4px }.family-anchor { display:flex; gap:18px; overflow:auto; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); white-space:nowrap }.family-anchor a { color:inherit; font-size:12px; text-decoration:none }.family-feature { padding:72px 0 42px }.family-feature>h3 { margin-top:18px; font-size:27px }.family-selection { background:#faf9f6; padding-right:20px; padding-left:20px }.family-selection>.eyebrow,.family-selection>h2,.family-selection>.family-product-grid { max-width:1180px; margin-right:auto; margin-left:auto }.family-selection>h2 { margin-bottom:32px }.family-knowledge { text-align:center }.family-knowledge>a { display:inline-flex; gap:22px; margin-top:24px; padding-bottom:5px; border-bottom:1px solid; color:inherit; font-size:15px; text-decoration:none }
@media (hover:hover) { .family-article-card:hover { background:#fff; box-shadow:0 14px 28px rgba(25,40,29,.14); transform:translateY(-7px) } }
@media (min-width:821px) { .family-page .site-header { height:88px; padding:0 max(40px,calc((100% - 1240px)/2)) }.family-page .main-nav{display:flex}.family-page .menu-toggle{display:none}.family-page .language-switcher{margin-left:24px;margin-right:0}.family-hero{padding-top:92px;padding-bottom:110px}.family-hero h1{font-size:61px}.family-hero h2{font-size:48px}.family-lead{font-size:17px}.family-themes,.family-articles,.family-selection,.family-knowledge{padding-top:110px;padding-bottom:110px}.family-theme-grid{grid-template-columns:repeat(4,1fr);gap:18px}.family-theme-card h3{font-size:25px}.family-editorial>div:last-child{right:80px;bottom:85px;left:auto;text-align:right}.family-editorial h2{font-size:48px}.family-article-grid,.family-product-grid{grid-template-columns:repeat(3,1fr);gap:18px}.family-selection{padding-right:40px;padding-left:40px}.family-feature{padding-top:110px}.family-feature>h3{font-size:35px} }

@media (min-width:821px) {
    .about-page .site-header { height: 88px; padding: 0 max(40px, calc((100% - 1240px)/2)) }
    .about-page .main-nav { display: flex }
    .about-page .menu-toggle { display: none }
    .about-page .language-switcher { margin-left: 24px; margin-right: 0 }
    .about-intro { padding-top: 132px; padding-bottom: 112px }
    .about-logo .brand { transform: scale(1.65) }
    .about-tagline { margin-top: 61px }
    .about-story { padding-bottom: 136px }
    .about-contact { padding-bottom: 172px }
    .about-copy { font-size: 18px; line-height: 2 }
}

@media(max-width:820px) {
    .wrap {
        width: min(100% - 40px, 680px)
    }

    .site-header {
        height: 68px;
        padding: 0 20px
    }

    .main-nav {
        display: none
    }

    .header-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        border: 0;
        background: none;
        color: inherit
    }

    .header-search-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7 }

    .menu-toggle {
        display: block;
        margin-left: 18px;
        border: 0;
        background: none;
        color: inherit
    }

    .menu-toggle i {
        display: block;
        width: 23px;
        height: 1px;
        margin: 6px;
        background: currentColor
    }

    .menu-open {
        position: fixed;
        background: #fff;
        color: var(--ink);
        border-color: var(--line)
    }

    .menu-open .main-nav {
        position: absolute;
        top: 67px;
        left: 0;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        padding: 25px 20px;
        background: #fff
    }

    .menu-open .main-nav .language-switcher {
        margin-top: 22px;
        margin-left: 0
    }

    .hero {
        min-height: 640px
    }

    .hero-copy {
        padding-top: 178px
    }

    .button span {
        display: none
    }

    .customer-stories { padding: 70px 0 36px }
    .story-card { flex-basis: calc((100% - 16px) / 2) }

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

    .service-media { min-height: 480px }

    .service-philosophy { min-height: 0 }

    .service-philosophy h2 { font-size: clamp(26px, 5vw, 34px); line-height: 1.2 }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 50px 35px }

    .footer-social { position: static; transform: none; justify-self: center }

    .footer-navigation { grid-column: span 2; justify-self: stretch }
}

@media(max-width:520px) {
    .wrap {
        width: calc(100% - 36px)
    }

    .hero {
        height: 670px;
        min-height: 0
    }

    .hero h1 {
        font-size: 45px
    }

    .customer-stories { padding: 62px 0 28px }
    .stories-heading { align-items: start; margin-bottom: 26px }
    .stories-heading h2 { font-size: 39px }
    .stories-heading h2 br { display: none }
    .stories-heading > div:first-child > p:not(.eyebrow) { font-size: 13px }
    .stories-controls { padding-top: 25px }
    .stories-controls button { width: 38px; height: 38px }
    .stories-controls button:active {
        border-color: var(--forest);
        background: var(--forest);
        color: #fff;
        transform: scale(.94)
    }
    .stories-viewport { margin-right: -18px; gap: 12px; padding-bottom: 6px }
    .story-card { flex-basis: min(82vw, 330px) }
    .story-content { padding: 20px 16px }
    .story-card blockquote { font-size: 17px; line-height: 1.42 }
    .stories-bottom { min-height: 62px; justify-content: flex-start }
    .stories-bottom > a { right: 0; font-size: 10px }

    .service-media { min-height: 430px }

    .service-media-content { margin: 0 28px 38px }

    .service-philosophy { min-height: 0; padding: 52px 28px }

    .service-philosophy h2 { font-size: 24px; line-height: 1.25 }

    .service-philosophy h2 br { display: none }

    .philosophy h2 br {
        display: none
    }

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

    .footer-social { justify-self: start; text-align: left }

    .footer-navigation { grid-column: auto; gap: 28px }
}

/* Simplified 0–1 category landing: compact image/text rows and scrollable articles. */
.family-page .family-editorial { display:none }
.family-page .family-hero { padding-bottom:42px }
.family-page .family-themes { padding-top:42px; padding-bottom:48px }
.family-page .family-articles { padding-top:48px; padding-bottom:64px }
.family-page .family-theme-grid { gap:14px }
.family-page .family-theme-card { display:grid; grid-template-columns:.85fr 1.15fr; grid-template-areas:'copy media'; gap:18px; align-items:start }
.family-page .family-theme-card>div { grid-area:copy; order:initial; padding-top:2px }
.family-page .family-theme-card>.family-media { grid-area:media; order:initial; margin-top:0; aspect-ratio:4/3 }
.family-page .family-theme-card>.family-media img { object-position:28% center }

/* Shared Category Detail template */
.detail-hero { position:relative; min-height:540px; overflow:hidden; background:#faf8f3 }
.detail-hero__copy { position:relative; z-index:2; max-width:1180px; padding-top:92px; padding-bottom:80px }
.detail-hero__copy h1 { margin:0 0 14px; font:500 52px/1 var(--serif) }
.detail-hero__copy h2 { max-width:480px; margin:0; font:500 36px/1.18 var(--serif) }
.detail-hero__copy h2 em { font-style:italic }
.detail-hero__copy>p:last-child { max-width:400px; color:#596158; font:500 16px/1.8 var(--serif) }
.detail-media { overflow:hidden }
.detail-media img { width:100%; height:100%; display:block; object-fit:cover }
.detail-media--hero { position:absolute; inset:0 0 0 42%; height:100%; mask-image:linear-gradient(90deg,transparent 0,#000 22%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%) }
.detail-media--hero img { object-position:28% center }

/* Editorial-first content: articles are the primary column, products are a quiet sidebar */
.detail-content { display:grid; grid-template-columns:minmax(0,3fr) minmax(240px,1fr); align-items:start; gap:56px }
.detail-content--no-products { grid-template-columns:1fr }
.detail-articles { padding:86px 0 100px }
.detail-products { padding:36px 32px; background:#e9e1d3; align-self:start }
.detail-articles header,.detail-products header { margin-bottom:36px }
.detail-articles h2 { margin:0; font:500 34px var(--serif) }
.detail-products h2 { margin:0; font:500 21px var(--serif) }
.detail-products header>p:last-child { margin-top:10px; max-width:100%; color:#596158; font-size:13px; line-height:1.6 }

.detail-articles article { display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); align-items:center; gap:28px; padding:32px 0; border-top:1px solid var(--line) }
.detail-articles article:first-child { border-top:0; padding-top:0 }
.detail-media--article { aspect-ratio:4/3 }
.detail-articles article p { margin:0 0 10px; color:#596158; font:9px var(--mono); letter-spacing:.1em }
.detail-articles article h3 { margin:0 0 12px; font:500 26px/1.3 var(--serif) }
.detail-articles article p.detail-articles__excerpt { margin:0 0 16px; color:#596158; font:500 15px/1.7 var(--serif); letter-spacing:normal }
.detail-articles article a { color:inherit; font-size:12px; text-decoration:none; border-bottom:1px solid currentColor }

.detail-products article { position:relative; display:flex; flex-direction:column; gap:16px; padding:22px 0; border-top:1px solid rgba(39,48,41,.2) }
.detail-products article:first-child { border-top:0; padding-top:0 }
.detail-products article>span { display:block; font:10px var(--mono) }
.detail-product-row { display:flex; align-items:flex-start; gap:14px }
.detail-media--product { width:72px; aspect-ratio:1; flex:0 0 auto }
.detail-product-info { flex:1; min-width:0 }
.detail-product-info p { margin:0 0 6px; color:#596158; font:9px var(--mono); letter-spacing:.1em }
.detail-product-info h3 { margin:0 0 8px; font:500 14px/1.35 var(--serif) }
.detail-products strong { display:block; font-size:12px }
.detail-products article>a { align-self:flex-end; color:inherit; font-size:11px; text-decoration:none; border-bottom:1px solid currentColor }

@media(max-width:820px){
  .detail-hero{min-height:600px}
  .detail-hero__copy{padding:58px 20px 0}
  .detail-hero__copy h1{font-size:43px}
  .detail-hero__copy h2{font-size:31px}
  .detail-media--hero{inset:285px 0 0;mask-image:linear-gradient(180deg,transparent,#000 18%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%)}
  .detail-content{grid-template-columns:1fr}
  .detail-articles,.detail-products{padding:54px 20px}
  .detail-products{margin-top:8px}
  .detail-articles article{grid-template-columns:1fr;gap:16px;padding:28px 0}
  .detail-articles article h3{font-size:20px}
}
@media(min-width:1024px){
  .detail-products{position:sticky;top:32px}
}

/* Shared Article Detail template — editorial article (75%) + quiet commerce sidebar (25%) */
.article-detail-header { padding:54px 0 0 }
.article-detail-header .family-crumb { margin-bottom:28px }
.article-detail-header .eyebrow { margin:0 0 18px }
.article-detail-header h1 { margin:0 0 56px; font:500 38px/1.2 var(--serif); letter-spacing:-.02em }
.article-detail-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(250px,1fr); align-items:start; gap:48px; padding-bottom:100px }
.article-detail-thumbnail { margin-bottom:32px }
.article-detail-thumbnail img { display:block; width:100%; height:auto }
.article-detail-description { margin:0 0 20px; color:var(--ink); font:500 17px/1.85 var(--serif); padding-top:22px; border-top:1px solid var(--line) }
.article-detail-description::first-letter { float:left; font:600 3.6em/0.78 var(--serif); color:var(--forest); margin:0.06em 0.12em 0 0 }
.article-detail-meta { margin:0 0 48px; color:#8a9186; font:9px var(--mono); letter-spacing:.1em }
.article-detail-block { margin-top:48px; padding-top:48px; border-top:1px solid var(--line) }
.article-detail-block:first-of-type { margin-top:0; padding-top:0; border-top:0 }
.article-detail-block h2 { display:block; margin:0 0 22px; padding-left:14px; border-left:3px solid var(--red); font:500 26px/1.3 var(--serif); letter-spacing:-.02em }
.article-detail-block h2 span { display:none }
.article-detail-block p { margin:0; color:#4c554d; font:500 17px/1.9 var(--serif) }
.article-detail-body ul,.article-detail-body ol { margin:14px 0; padding-left:1.4em; color:#4c554d }
.article-detail-body ul { list-style:none; padding-left:0 }
.article-detail-body ul li { position:relative; padding-left:20px }
.article-detail-body ul li::before { content:''; position:absolute; left:0; top:0.7em; width:5px; height:5px; border-radius:50%; background:var(--forest) }
.article-detail-body li { font:500 17px/1.9 var(--serif); margin-bottom:4px }
.article-detail-main strong { font-weight:500; background:linear-gradient(transparent 58%, rgba(192,57,43,.28) 58%); padding-bottom:1px }
.article-detail-block-image { margin:28px 0 0 }
.article-detail-block-image img { display:block; width:100%; height:auto }

/* ── Reading progress bar ── */
.art-progress { position:fixed; top:0; left:0; height:2px; background:var(--forest); z-index:1000; width:0; transition:width .12s linear; pointer-events:none }

/* ── Stat highlight ── */
.art-stat { display:flex; align-items:baseline; gap:10px; margin:24px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.art-stat__num { font:500 38px/1 var(--serif); color:var(--forest); letter-spacing:-.03em; white-space:nowrap }
.art-stat__desc { font:500 15px/1.6 var(--serif); color:#4c554d }

/* ── Callout / highlight box ── */
.art-callout { margin:28px 0; padding:22px 26px; background:var(--beige); border-radius:1px; border-left:3px solid var(--red) }
.art-callout__tag { display:inline-block; margin-bottom:10px; font:9px var(--mono); letter-spacing:.13em; color:var(--muted); text-transform:uppercase }
.art-callout__jp { margin:0 0 6px; font:500 22px/1.3 var(--serif); color:var(--ink); letter-spacing:.03em }
.art-callout__vi { margin:0; font:500 14px/1.65 var(--serif); color:#596158 }

/* ── Numbered steps ── */
.art-steps { margin:24px 0 0; padding:0; list-style:none }
.art-steps li { position:relative; padding:0 0 30px 50px }
.art-steps li:last-child { padding-bottom:0 }
.art-steps__num { position:absolute; left:0; top:2px; width:30px; height:30px; background:var(--forest); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font:500 10px var(--mono); letter-spacing:.04em; flex-shrink:0 }
.art-steps li::after { content:''; position:absolute; left:14px; top:34px; bottom:0; width:2px; background:var(--line) }
.art-steps li:last-child::after { display:none }
.art-steps strong { display:block; margin-bottom:5px; font:500 16px/1.3 var(--serif); color:var(--ink) }
.art-steps p { margin:0; font:500 15px/1.7 var(--serif) !important; color:#4c554d !important }

/* ── Nutrient cards ── */
.art-nutrients { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0 0 }
.art-nutrient { padding:20px 18px; border:1px solid var(--line); background:#faf9f6 }
.art-nutrient__el { display:block; margin-bottom:10px; font:600 30px/1 var(--serif); color:var(--forest); letter-spacing:-.04em }
.art-nutrient h3 { margin:0 0 2px; font:500 16px/1.2 var(--serif) }
.art-nutrient__jp { display:block; margin-bottom:12px; font:9px var(--mono); letter-spacing:.1em; color:var(--muted) }
.art-nutrient p { margin:0; font:500 13px/1.65 var(--serif) !important; color:#596158 !important }

/* ── Philosophy quote ── */
.art-philoquote { margin:36px 0 0; padding:32px 0 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center }
.art-philoquote::before { content:'「'; display:block; font:600 54px/1 var(--serif); color:var(--forest); opacity:.18; margin-bottom:-16px; letter-spacing:-.03em }
.art-philoquote__jp { margin:0 0 10px; font:500 24px/1.4 var(--serif); color:var(--ink); letter-spacing:.05em }
.art-philoquote cite { font:9px var(--mono); letter-spacing:.14em; color:var(--muted); font-style:normal }

/* ── Food texture grid ── */
.art-texture-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0 0 }
.art-texture-item { padding:16px; background:#faf9f6; border-left:2px solid var(--line) }
.art-texture-item strong { display:block; margin-bottom:4px; font:500 14px/1.2 var(--serif); color:var(--ink) }
.art-texture-item span { font:500 13px/1.6 var(--serif); color:#596158 }

@media (max-width:720px) {
  .art-nutrients { grid-template-columns:1fr }
  .art-texture-grid { grid-template-columns:1fr }
  .art-stat__num { font-size:32px }
  .art-callout { padding:18px 20px }
}

.article-related { margin-top:32px; padding-top:28px; border-top:1px solid rgba(39,48,41,.2) }
.article-related:first-child { margin-top:0; padding-top:0; border-top:0 }
.article-related > .eyebrow { margin:0 0 20px }
.article-related-item { display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid rgba(39,48,41,.15); color:inherit; text-decoration:none }
.article-related-item:first-of-type { border-top:0; padding-top:0 }
.detail-media--related { width:64px; aspect-ratio:1; flex:0 0 auto }
.article-related-item h4 { margin:0 0 6px; font:500 13px/1.35 var(--serif) }
.article-related-item p { display:flex; align-items:center; gap:6px; margin:0; color:#8a9186; font:9px var(--mono); letter-spacing:.08em }

@media(min-width:821px){
  .article-detail-header { padding-top:92px }
  .article-detail-header h1 { font-size:54px; margin-bottom:64px }
  .article-detail-description { font-size:18px; line-height:1.85 }
}
@media(min-width:1024px){
  .article-detail-sidebar { position:sticky; top:32px }
}

/* Detail pages: a strict small-screen layout prevents a long Japanese title from widening the page. */
@media (max-width:820px) {
  .family-page { overflow-x:hidden; }
  .family-page .detail-hero__copy.wrap,
  .family-page .detail-content.wrap,
  .family-page .article-detail-header.wrap,
  .family-page .article-detail-grid.wrap { width:100%; max-width:none; margin:0; }
  .detail-hero__copy { min-width:0; padding:54px 20px 0; }
  .detail-hero__copy h1 { font-size:clamp(38px, 11vw, 43px); }
  .detail-hero__copy h2 { max-width:100%; font-size:clamp(26px, 8.2vw, 31px); letter-spacing:-.045em; overflow-wrap:anywhere; }
  .detail-hero__copy h2,
  .detail-hero__copy > p:last-child,
  .detail-articles article h3,
  .detail-product-info h3 { white-space:normal; word-break:break-all; overflow-wrap:anywhere; }
  .detail-hero__copy > p:last-child { max-width:100%; font-size:14px; }
  .detail-media--hero { inset:300px 0 0; }
  .detail-content { min-width:0; }
  .detail-articles,
  .detail-products { min-width:0; padding:54px 20px; }
  .detail-articles article { grid-template-columns:1fr; gap:16px; }
  .detail-articles article h3 { min-width:0; font-size:20px; }
  .detail-product-info h3 { min-width:0; font-size:15px; }
  .detail-articles article p { min-width:0; white-space:normal; word-break:break-all; overflow-wrap:anywhere; letter-spacing:.06em; }
  .detail-articles article p.detail-articles__excerpt { min-width:0; white-space:normal; overflow-wrap:anywhere; }
  .article-detail-header { min-width:0; padding:54px 20px 0 }
  .article-detail-grid { min-width:0; grid-template-columns:1fr; gap:0; padding-bottom:0 }
  .article-detail-main { min-width:0; padding:0 20px }
  .article-detail-header h1,
  .article-detail-block h2 { white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
  .article-detail-sidebar { margin-top:56px }
}
.family-page .family-article-grid { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
.family-page .family-article-grid::-webkit-scrollbar { display:none }
.family-page .family-article-card { flex:0 0 78%; scroll-snap-align:start }
@media (min-width:821px) {
  .family-page .family-hero { padding-top:68px; padding-bottom:64px }
  .family-page .family-themes { padding-top:62px; padding-bottom:70px }
  .family-page .family-articles { padding-top:70px; padding-bottom:82px }
  .family-page .family-theme-grid { grid-template-columns:1fr; gap:20px }
  .family-page .family-theme-card { grid-template-columns:.8fr 1.2fr; gap:42px }
  .family-page .family-theme-card>div { grid-area:copy; order:initial }
  .family-page .family-theme-card>.family-media { grid-area:media; order:initial; margin-top:0 }
  .family-page .family-theme-card .family-media--theme { height:170px; aspect-ratio:auto }
  .family-page .family-theme-card>div { padding-top:22px }
  .family-page .family-theme-card h3 { font-size:34px }
  .family-page .family-theme-card p { font-size:16px }
  .family-page .family-article-grid { display:flex; overflow-x:auto; padding-bottom:8px }
  .family-page .family-article-card { flex:0 0 calc((100% - 28px) / 2.5) }
}

/* Shopping Support (Japan proxy-purchase) service page */
:root { --terracotta:#96633c; --terracotta-dark:#7d4f2f }

.shopping-hero { padding:54px 0 56px; background:#fff }
.shopping-hero__crumb { margin-bottom:28px }
.shopping-hero__crumb .family-crumb { margin:0 }
.shopping-hero__inner { display:grid; grid-template-columns:1fr; gap:36px }
.shopping-hero__copy .eyebrow { margin:0 0 16px }
.shopping-hero__copy h1 { margin:0 0 20px; font:500 30px/1.4 var(--serif); letter-spacing:-.01em }
.shopping-hero__copy p { margin:0 0 14px; max-width:520px; color:#4c554d; font:500 16px/1.75 var(--serif) }
.shopping-cta { display:inline-flex; align-items:center; gap:10px; margin:10px 0 18px; padding:15px 26px; border-radius:999px; background:var(--terracotta); color:#fff; font:500 13px var(--sans); letter-spacing:.02em; text-decoration:none; transition:background .2s ease }
.shopping-cta svg { width:16px; height:16px; flex:0 0 auto }
.shopping-cta:hover, .shopping-cta:focus-visible { background:var(--terracotta-dark) }
.shopping-delivery-note { display:flex; align-items:center; gap:8px; margin:0; color:var(--muted); font:500 13px var(--sans) }
.shopping-delivery-note svg { width:16px; height:16px; flex:0 0 auto; color:var(--terracotta) }
.shopping-hero__media { width:100%; aspect-ratio:4/3.1; overflow:hidden; background:#f5f3ee }
.shopping-hero__media img { width:100%; height:100%; display:block; object-fit:cover; object-position:82% center }

.shopping-process { padding:88px 0 92px }
.shopping-process header { max-width:560px; margin:0 auto 56px; text-align:center }
.shopping-process h2 { margin:0 0 14px; font:500 32px var(--serif) }
.shopping-process header p { margin:0; color:#596158; font-size:16px; line-height:1.7 }
.shopping-process__list { display:flex; flex-direction:column; gap:0 }
.shopping-step { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:24px 0 }
.shopping-step__number { margin-bottom:14px; color:var(--terracotta); font:500 26px var(--serif) }
.shopping-step__media { width:96px; aspect-ratio:1; border-radius:50%; overflow:hidden; margin-bottom:18px; background:#f0ece3 }
.shopping-step__media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center bottom }
.shopping-step h3 { margin:0 0 8px; font:500 17px var(--serif) }
.shopping-step p { margin:0; max-width:220px; color:#596158; font-size:13px; line-height:1.7 }
.shopping-step__arrow { display:none }

.shopping-pricing { padding:88px 0 92px; background:#e9e1d3 }
.shopping-pricing__inner { display:grid; grid-template-columns:1fr; gap:40px }
.shopping-pricing__formula header { margin-bottom:32px }
.shopping-pricing__formula h2 { margin:0 0 14px; font:500 30px var(--serif) }
.shopping-pricing__formula header p { margin:0; max-width:600px; color:#596158; font-size:15px; line-height:1.8 }
.shopping-pricing__items { display:flex; flex-direction:column; gap:24px }
.shopping-pricing__plus { display:none }
.shopping-pricing__item { display:flex; flex-direction:column; padding:24px; background:#fff; border:1px solid rgba(39,48,41,.12) }
.shopping-pricing__item h3 { margin:0 0 10px; font:500 15px/1.4 var(--serif) }
.shopping-pricing__item strong { display:block; margin-bottom:6px; color:var(--terracotta); font:500 26px var(--serif) }
.shopping-pricing__item p { margin:0 0 6px; color:#596158; font-size:13px; line-height:1.65 }
.shopping-pricing__item p:last-child { margin-bottom:0 }
.shopping-pricing__note { color:#8a9186 !important; font-size:11px !important; letter-spacing:.02em }
.shopping-icon { width:40px; height:40px; overflow:hidden; margin-bottom:16px; color:var(--terracotta) }
.shopping-icon img { display:block }
.shopping-icon svg { width:100%; height:100%; display:block }
.shopping-icon--contain img { width:40px; height:auto }
.shopping-icon--top-right img { width:70px; height:65px; margin:-2px 0 0 -22px }
.shopping-icon--top-left-a img { width:60px; height:65px; margin:-2px 0 0 -2px }
.shopping-icon--top-left-b img { width:60px; height:65px; margin:-2px 0 0 -2px }
.shopping-icon--top-left-c img { width:60px; height:65px; margin:-4px 0 0 -2px }

.shopping-quote { padding:28px; background:#fff; border:1px solid rgba(39,48,41,.12) }
.shopping-quote h3 { margin:0 0 8px; font:500 20px var(--serif) }
.shopping-quote__subtitle { margin:0 0 20px; color:#596158; font-size:13px }
.shopping-quote dl { margin:0 0 16px }
.shopping-quote__row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--line); font-size:13px }
.shopping-quote__row:first-child { border-top:0 }
.shopping-quote__row dt { margin:0; color:#4c554d }
.shopping-quote__row dt span { display:block; margin-top:3px; color:#8a9186; font-size:11px }
.shopping-quote__row dd { margin:0; white-space:nowrap; color:var(--ink); font-weight:500 }
.shopping-quote__total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--ink) }
.shopping-quote__total dt { margin:0; font:500 14px var(--serif) }
.shopping-quote__total dd { margin:0; color:var(--terracotta); font:500 20px var(--serif) }
.shopping-quote__total dd span { color:#8a9186; font:500 12px var(--sans) }
.shopping-quote__disclaimer { margin-top:20px }
.shopping-quote__disclaimer p { margin:0 0 6px; color:#8a9186; font-size:12px; line-height:1.6 }
.shopping-quote__disclaimer p:last-child { margin-bottom:0 }

.shopping-trust { display:grid; grid-template-columns:1fr; gap:32px; padding:88px 0 92px; align-items:center }
.shopping-trust__media { width:100%; aspect-ratio:4/3; overflow:hidden; background:#f5f3ee }
.shopping-trust__media img { width:100%; height:100%; display:block; object-fit:cover }
.shopping-trust__content header { margin-bottom:32px }
.shopping-trust__content h2 { margin:0 0 14px; font:500 28px/1.35 var(--serif) }
.shopping-trust__content header p { margin:0; color:#596158; font-size:15px; line-height:1.7 }
.shopping-trust__list { display:flex; flex-direction:column; gap:28px }
.shopping-trust__item h3 { margin:0 0 8px; font:500 16px var(--serif) }
.shopping-trust__item p { margin:0; color:#596158; font-size:13px; line-height:1.7 }

.shopping-final-cta { position:relative; overflow:hidden; padding:64px 0; background:#f6f1e7 }
.shopping-final-cta__inner { position:relative; z-index:2; display:flex; flex-direction:column; gap:24px }
.shopping-final-cta__media { position:absolute; inset:0; z-index:1; opacity:.5; mask-image:linear-gradient(90deg,transparent 0,transparent 55%,#000 92%); -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 55%,#000 92%) }
.shopping-final-cta__media img { width:100%; height:100%; display:block; object-fit:cover }
.shopping-final-cta__copy { position:relative; z-index:2 }
.shopping-final-cta__small { margin:0 0 12px; color:#7d8579; font:500 13px/1.7 var(--sans) }
.shopping-final-cta__main { margin:0; font:500 24px/1.4 var(--serif) }
.shopping-final-cta__action { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:12px }

@media(min-width:821px){
  .shopping-hero { padding:92px 0 100px }
  .shopping-hero__crumb { margin-bottom:44px }
  .shopping-hero__inner { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px; align-items:start }
  .shopping-hero__copy h1 { font-size:34px }
  .shopping-hero__media { aspect-ratio:1/1.02; align-self:start }

  .shopping-step__arrow { display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0 6px; color:#8a9186; font-size:20px; align-self:center; margin-top:70px }
  .shopping-process__list { flex-direction:row; align-items:flex-start; justify-content:space-between; gap:0 }
  .shopping-step { flex:1 1 0; padding:0 }

  .shopping-pricing__inner { grid-template-columns:minmax(0,3fr) minmax(240px,1fr); gap:48px; align-items:start }
  .shopping-pricing__items { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:0 16px; align-items:stretch }
  .shopping-pricing__plus { display:flex; align-items:center; justify-content:center; color:#8a9186; font:500 20px var(--serif) }
  .shopping-quote { position:sticky; top:32px }

  .shopping-trust { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:56px }
  .shopping-trust__list { flex-direction:row; gap:32px }
  .shopping-trust__item { flex:1 }

  .shopping-final-cta__inner { flex-direction:row; align-items:center; justify-content:space-between; gap:40px }
  .shopping-final-cta__action { align-items:flex-end }
}

/* ===================== Home — mobile-first ===================== */
.home-page .site-header { position:relative; height:68px; padding:0 20px; background:#fff; color:var(--ink); border-color:var(--line) }
@media (min-width:821px) {
  .home-page .site-header { height:88px; padding:0 max(40px, calc((100% - 1240px)/2)) }
}

.home-main { display:flex; flex-direction:column; gap:44px; padding-bottom:8px }

.home-hero__card,
.home-article-card,
.home-space-card,
.home-select-card,
.home-family-featured,
.home-family-small a,
.home-ranking a { color:inherit; text-decoration:none }

.home-hero__card:focus-visible,
.home-article-card:focus-visible,
.home-space-card:focus-visible,
.home-select-card:focus-visible,
.home-family-featured:focus-visible,
.home-family-small a:focus-visible,
.home-ranking a:focus-visible { outline:2px solid var(--forest); outline-offset:4px }

.home-hero__card { display:block; margin-top:18px }
.home-hero__media { width:100%; aspect-ratio:4/3; overflow:hidden; background:#f5f3ee }
.home-hero__media img { width:100%; height:100%; display:block; object-fit:cover }
.home-hero__copy { padding-top:20px }
.home-hero__copy .eyebrow { margin-bottom:14px }
.home-hero__copy > p:not(.eyebrow) { max-width:520px; margin:16px 0 20px; color:#596158; font:500 15px/1.75 var(--serif) }
.home-hero__cta { display:inline-flex; align-items:center; gap:10px; color:var(--forest); font:500 13px var(--sans); letter-spacing:.02em; padding-bottom:3px; border-bottom:1px solid currentColor }
.home-hero__cta i { font-style:normal }

.home-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px }
.home-section-head h2 { margin:0; font:500 clamp(24px, 5vw, 30px)/1.2 var(--serif); letter-spacing:-.03em }
.home-section-head > a { padding-bottom:3px; border-bottom:1px solid currentColor; color:inherit; font-size:12px; text-decoration:none; white-space:nowrap }
.home-section-head--spaces { margin-top:8px }

.home-article-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px 14px; margin-bottom:36px }
.home-article-card__media { width:100%; aspect-ratio:16/9; overflow:hidden; background:#f5f3ee }
.home-article-card__media img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s ease }
.home-article-card h3 { margin:10px 0 0; font:500 15px/1.35 var(--serif) }
@media (hover:hover) { .home-article-card:hover img { transform:scale(1.03) } }

.home-spaces-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.home-space-card { display:block; text-align:center }
.home-space-card img { width:100%; aspect-ratio:1/1; display:block; object-fit:cover; background:#f5f3ee }
.home-space-card span { display:block; margin-top:10px; font:500 14px var(--serif) }

.home-ranking { display:none }

.home-age-tabs { display:flex; gap:8px; overflow-x:auto; margin:18px 0 26px; scrollbar-width:none }
.home-age-tabs::-webkit-scrollbar { display:none }
.home-age-tabs button { flex:0 0 auto; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font:500 13px var(--serif); white-space:nowrap; cursor:pointer; transition:.2s }
.home-age-tabs button[aria-selected="true"] { border-color:var(--ink); color:var(--ink); background:#f7f4ed }

.home-family-featured { display:block; margin-bottom:20px }
.home-family-media { width:100%; aspect-ratio:16/9; overflow:hidden; background:#f5f3ee }
.home-family-media img { width:100%; height:100%; display:block; object-fit:cover }
.home-family-featured h3 { margin:14px 0 8px; font:500 20px/1.3 var(--serif) }
.home-family-featured p { margin:0; max-width:480px; color:#596158; font:500 14px/1.7 var(--serif) }
.home-family-small { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.home-family-small h4 { margin:10px 0 0; font:500 14px/1.3 var(--serif) }

.home-select-grid { display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; scrollbar-width:none }
.home-select-grid::-webkit-scrollbar { display:none }
.home-select-card { flex:0 0 62%; scroll-snap-align:start }
.home-select-card__media { width:100%; aspect-ratio:1/1; overflow:hidden; background:#f5f3ee }
.home-select-card__media img { width:100%; height:100%; display:block; object-fit:cover }
.home-select-card p { margin:12px 0 4px; font:8px var(--mono); letter-spacing:.12em }
.home-select-card h3 { margin:0 0 6px; font:500 15px/1.3 var(--serif) }
.home-select-card span { font-size:13px; color:var(--muted) }

@media (min-width:768px) {
  .home-article-grid { grid-template-columns:repeat(2, 1fr) }
  .home-spaces-grid { grid-template-columns:repeat(4, 1fr) }
  .home-hero__media { aspect-ratio:16/9 }
  .home-select-card { flex:0 0 38% }
}

@media (min-width:1024px) {
  .home-main { gap:64px }
  .home-hero__card { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center }
  .home-hero__media { aspect-ratio:4/3 }
  .home-hero__copy { padding-top:0 }

  .home-columns { display:grid; grid-template-columns:minmax(0,3fr) minmax(260px,1fr); gap:56px; align-items:start }
  .home-article-grid { grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:44px }

  .home-ranking { display:block; position:sticky; top:32px; padding:32px; background:#f7f4ed }
  .home-ranking h2 { margin:0 0 22px; font:500 20px var(--serif) }
  .home-ranking ol { list-style:none; margin:0; padding:0 }
  .home-ranking li { border-top:1px solid var(--line) }
  .home-ranking li:first-child { border-top:0 }
  .home-ranking a { display:flex; align-items:center; gap:14px; padding:16px 0 }
  .home-ranking__num { flex:0 0 auto; font:500 20px var(--serif); color:var(--muted) }
  .home-ranking__media { width:56px; aspect-ratio:1; flex:0 0 auto; overflow:hidden; background:#f5f3ee }
  .home-ranking__media img { width:100%; height:100%; display:block; object-fit:cover }
  .home-ranking__copy p { margin:0 0 4px; color:var(--muted); font:9px var(--mono); letter-spacing:.08em }
  .home-ranking__copy h3 { margin:0; font:500 14px/1.35 var(--serif) }

  .home-family-featured { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; margin-bottom:0 }
  .home-family-small { grid-template-columns:repeat(2, 1fr); max-width:520px }

  .home-select-grid { display:grid; grid-template-columns:repeat(3, 1fr); overflow:visible }
  .home-select-card { flex:auto }
}

/* Home editorial refresh */
.home-page { background:#fffdfa }
.home-main { gap:48px; padding-top:18px; overflow:hidden }
.home-hero { margin-top:0 }
.home-hero__layout { display:grid; gap:12px }
.home-hero__card { position:relative; margin:0; min-height:470px; overflow:hidden; color:#fff }
.home-hero__media { position:absolute; inset:0; aspect-ratio:auto; background:#e7dfd4 }
.home-hero__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(35,35,29,.58) 0%,rgba(35,35,29,.22) 54%,rgba(35,35,29,.04) 100%) }
.home-hero__card--birth .home-hero__media::after { background:rgba(35,35,29,.06) }
.home-hero__copy { position:relative; z-index:1; display:flex; min-height:470px; max-width:570px; padding:36px 28px; flex-direction:column; justify-content:flex-end }
.home-hero__copy .eyebrow { color:#f7f0e5; font:10px var(--mono); letter-spacing:.12em }
.home-hero__copy h1 { margin:0; color:#fff; font:500 clamp(31px,7vw,48px)/1.16 var(--serif); letter-spacing:-.04em }
.home-hero__copy > p:not(.eyebrow) { margin:14px 0 18px; color:#fff; font:400 15px/1.6 var(--serif) }
.home-hero__cta { width:max-content; color:#fff; border-color:rgba(255,255,255,.8); font:500 12px var(--sans) }
.home-hero__rail { display:grid; gap:8px }
.home-hero__rail a { display:grid; grid-template-columns:112px 1fr 24px; gap:12px; align-items:center; min-height:108px; padding:6px; color:inherit; border:1px solid #eee8df; text-decoration:none; background:#fff }
.home-hero__rail img { width:112px; height:96px; display:block; object-fit:cover }
.home-hero__rail small { display:block; margin-bottom:5px; color:#9a7657; font:9px var(--mono); letter-spacing:.08em }
.home-hero__rail strong { display:block; font:500 15px/1.35 var(--serif) }
.home-hero__rail i { display:grid; place-items:center; width:23px; height:23px; color:var(--ink); border-radius:50%; background:#f4f1eb; font-style:normal; font-size:12px }
.home-section-head { align-items:flex-end; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line) }
.home-section-head h2 { font-size:clamp(27px,5vw,34px) }
.home-section-head p { margin:5px 0 0; color:#788077; font:11px/1.45 var(--serif) }
.home-section-head > a { font-family:var(--serif); font-size:13px }
.home-article-grid { gap:20px 12px; margin-bottom:48px }
.home-article-card { border:1px solid #eeeae2; background:#fff }
.home-article-card__media { aspect-ratio:4/3 }
.home-article-card h3 { padding:0 12px 14px; margin:10px 0 0; font-size:16px }
.home-space-card { overflow:hidden; border:1px solid #eeeae2; text-align:left; background:#fff }
.home-spaces-grid { gap:12px }
.home-space-card img { aspect-ratio:4/3 }
.home-space-card span { position:relative; min-height:120px; margin:0; padding:16px 38px 16px 16px }
.home-space-card strong { display:block; margin-bottom:7px; font:500 20px var(--serif) }
.home-space-card small { display:block; color:#737a72; font:12px/1.5 var(--serif) }
.home-space-card b { position:absolute; right:16px; bottom:16px; font:400 18px var(--serif) }
.home-ranking { border-top:3px solid #c69753; background:transparent }
.home-ranking h2::before { content:"♛"; margin-right:8px; color:#c69753; font-size:19px }
.home-family { padding-top:10px }
.home-age-tabs { justify-content:flex-end; margin:-8px 0 18px }
.home-age-tabs button { border-radius:4px; font-size:12px }
.home-family-featured { position:relative; overflow:hidden; color:#fff; background:#eee8df }
.home-family-media { aspect-ratio:5/4 }
.home-family-featured__copy { position:absolute; right:12px; bottom:12px; left:12px; max-width:450px; padding:16px; color:var(--ink); background:rgba(255,253,250,.94) }
.home-family-featured .eyebrow { margin:0 0 6px; color:#c07860; font:9px var(--mono); letter-spacing:.08em }
.home-family-featured h3 { margin:0 0 5px; font-size:21px }
.home-family-featured p { font-size:13px; line-height:1.5 }
.home-family-small { grid-template-columns:1fr; gap:10px; margin-top:12px }
.home-family-small a { display:grid; grid-template-columns:108px 1fr; gap:12px; align-items:center; padding:6px; border:1px solid #eeeae2; background:#fff }
.home-family-small .home-family-media { aspect-ratio:1.25/1; height:76px }
.home-family-small h4 { margin:0; font-size:15px }
.home-select { padding:2px 0 14px }
.home-select-grid { gap:12px }
.home-select-card { flex-basis:67%; border:1px solid #eeeae2; background:#fff }
.home-select-card__media { aspect-ratio:1.25/1 }
.home-select-card p,.home-select-card h3,.home-select-card span { margin-left:12px; margin-right:12px }
.home-select-card h3 { min-height:42px }
.home-select-card__actions { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:10px 10px 10px }
.select-action { display:flex; min-height:30px; align-items:center; justify-content:center; padding:4px 3px; color:var(--forest); border:1px solid #d6ddd3; border-radius:999px; font:500 9px/1.1 var(--sans); text-align:center; text-decoration:none; transition:background-color .32s ease, color .32s ease, transform .32s cubic-bezier(.22,.61,.36,1) }
.select-action--amazon { border-color:#f2b233; background:#ffbe3d; color:#352300 }
.select-action--kurashi { border-color:var(--forest); background:var(--forest); color:#fff }
.select-action:focus-visible { outline:2px solid var(--forest); outline-offset:2px }

@media (min-width:768px) {
  .home-hero__copy { padding:50px }
  .home-spaces-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px }
  .home-space-card img { aspect-ratio:3/2 }
  .home-space-card span { min-height:94px; padding:12px 30px 12px 12px }
  .home-space-card strong { margin-bottom:4px; font-size:17px }
  .home-space-card small { font-size:11px; line-height:1.4 }
  .home-space-card b { right:12px; bottom:11px; font-size:16px }
  .home-select-card { flex-basis:30% }
}
@media (min-width:1024px) {
  .home-main { gap:64px; padding-top:20px }
  .home-hero__layout { grid-template-columns:minmax(0,2fr) minmax(310px,1fr); gap:14px }
  .home-hero__card, .home-hero__copy { min-height:408px }
  .home-hero__copy { padding:38px }
  .home-hero__copy h1 { font-size:38px }
  .home-hero__rail a { min-height:128px; grid-template-columns:126px 1fr 24px }
  .home-hero__rail img { width:126px; height:112px }
  .home-columns { grid-template-columns:minmax(0,3.15fr) minmax(260px,1fr); gap:28px }
  .home-article-grid { grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:54px }
  .home-article-card h3 { font-size:16px }
  .home-ranking { position:static; padding:0; border-top:0; background:transparent }
  .home-ranking h2 { padding-bottom:12px; border-bottom:1px solid var(--line) }
  .home-ranking a { gap:10px; padding:11px 0 }
  .home-ranking__num { color:#ba8a4e; font-size:20px }
  .home-ranking__media { width:54px }
  .home-ranking__copy h3 { font-size:13px }
  .home-age-tabs { margin-top:-50px; margin-bottom:20px }
  .home-age-panel { display:grid; grid-template-columns:1.55fr 1fr; gap:12px }
  .home-family-featured { min-height:330px; margin:0 }
  .home-family-media { height:100%; aspect-ratio:auto }
  .home-family-small { margin:0 }
  .home-family-small a { grid-template-columns:122px 1fr; min-height:101px }
  .home-family-small .home-family-media { height:86px }
  .home-select-grid { grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px }
  .home-select-card__media { aspect-ratio:1.2/1 }
  .home-select-card p,.home-select-card h3,.home-select-card span { margin-left:8px; margin-right:8px }
  .home-select-card p { margin-top:9px; font-size:7px }
  .home-select-card h3 { min-height:51px; margin-bottom:5px; font-size:13px }
  .home-select-card__price { font-size:12px }
  .home-select-card__actions { gap:3px; margin:8px }
  .select-action { min-height:28px; padding:3px 2px; border-radius:999px; font-size:8px }
}
@media (max-width:520px) {
  .home-main { gap:38px }
  .home-hero__card,.home-hero__copy { min-height:410px }
  .home-hero__copy h1 { font-size:31px }
  .home-hero__rail a { grid-template-columns:92px 1fr 22px; min-height:92px }
  .home-hero__rail img { width:92px; height:78px }
  .home-hero__rail strong { font-size:14px }
  .home-section-head { align-items:flex-end }
  .home-section-head > a { font-size:11px }
}

/* Calm hover feedback for editorial cards */
.home-hero__card,
.home-hero__rail a,
.home-article-card,
.home-space-card,
.home-select-card,
.home-ranking a { transition:transform .52s cubic-bezier(.22,.61,.36,1), box-shadow .52s cubic-bezier(.22,.61,.36,1), border-color .42s ease }
.home-hero__card img,
.home-hero__rail img,
.home-article-card img,
.home-space-card img,
.home-select-card img,
.home-ranking img { transition:transform .7s cubic-bezier(.22,.61,.36,1) }
.home-hero__rail i { transition:transform .42s cubic-bezier(.22,.61,.36,1), background-color .42s ease }

@media (hover:hover) {
  .home-hero__card:hover,
  .home-hero__rail a:hover,
  .home-article-card:hover,
  .home-space-card:hover,
  .home-select-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(31,45,35,.08); border-color:rgba(39,48,41,.22) }
  .home-ranking a:hover { transform:translateX(2px) }
  .home-hero__card:hover img,
  .home-hero__rail a:hover img,
  .home-article-card:hover img,
  .home-space-card:hover img,
  .home-select-card:hover img,
  .home-ranking a:hover img { transform:scale(1.022) }
  .home-hero__rail a:hover i { transform:translateX(1px); background:#efeae2 }
  .select-action:hover { transform:translateY(-1px) }
  .select-action--amazon:hover { background:#ffc94f }
  .select-action--kurashi:hover { background:#314a3b }
}

@media (prefers-reduced-motion:reduce) {
  .home-hero__card,
  .home-hero__rail a,
  .home-article-card,
  .home-space-card,
  .home-select-card,
  .home-ranking a,
  .home-hero__card img,
  .home-hero__rail img,
  .home-article-card img,
  .home-space-card img,
  .home-select-card img,
  .home-ranking img { transition:none }
}

/* Space-card discovery overlay */
.home-space-card__visual { position:relative; display:block; min-height:0 !important; margin:0 !important; padding:0 !important; aspect-ratio:4/3; overflow:hidden }
.home-space-card__visual::after { content:""; position:absolute; inset:0; background:rgba(18,27,21,.38); opacity:0; transition:opacity .45s ease }
.home-space-card__visual img { width:100%; height:100%; aspect-ratio:auto; display:block; object-fit:cover }
.home-space-card__copy { position:relative; display:block; min-height:120px; margin:0 !important; padding:16px 16px !important }
.home-space-card__cta { position:absolute !important; z-index:1; inset:0; display:grid !important; width:auto; min-height:0 !important; margin:0 !important; padding:0 !important; place-items:center; opacity:0; pointer-events:none; transition:opacity .42s ease }
.home-space-card__cta i { min-height:0 !important; margin:0 !important; padding:9px 17px !important; color:#fff; border:1px solid rgba(255,255,255,.82); border-radius:999px; background:rgba(255,255,255,.08); font:500 11px var(--sans); font-style:normal; letter-spacing:.03em }

@media (min-width:768px) {
  .home-space-card__visual { aspect-ratio:3/2 }
  .home-space-card__copy { min-height:94px; padding:12px !important }
}
.home-space-card:hover { box-shadow:none }
.home-space-card:hover .home-space-card__visual::after,
.home-space-card:focus-visible .home-space-card__visual::after { opacity:1 }
.home-space-card:hover .home-space-card__cta,
.home-space-card:focus-visible .home-space-card__cta { opacity:1 }

/* KURASHI Select — purchase overlay */
.home-select-card__media { position:relative; overflow:hidden }
.home-select-card__media::after { content:""; position:absolute; inset:0; background:rgba(18,27,21,.38); opacity:0; transition:opacity .42s ease }
.home-select-card__cta { position:absolute; z-index:1; inset:0; display:grid; place-items:center; color:#352300; opacity:0; text-decoration:none; transition:opacity .42s ease }
.home-select-card__cta i { padding:9px 14px; border:1px solid #f2b233; border-radius:999px; background:#ffbe3d; font:500 10px var(--sans); font-style:normal; letter-spacing:.01em }
.home-select-card:hover { box-shadow:none }
.home-select-card:hover .home-select-card__media::after,
.home-select-card:focus-within .home-select-card__media::after { opacity:1 }
.home-select-card:hover .home-select-card__cta,
.home-select-card:focus-within .home-select-card__cta { opacity:1 }
.home-select-card__cta:focus-visible { outline:2px solid var(--forest); outline-offset:-4px }
.home-select-card__price { color:#c66d2b !important; font-weight:700 }

/* Keep the page crisp while preserving the warm KURASHI header band. */
.home-page { background:#fff }
.home-page .site-header { background:#fffdfa }
.home-page .service { order:10 }

/* Children & family — editorial three-column layout */
.home-age-tabs { justify-content:flex-start; margin:0 0 16px }
.home-age-tabs button { border-radius:999px; padding:9px 17px; background:#fff; font-family:var(--serif) }
.home-age-tabs button[aria-pressed="true"] { border-color:var(--forest); background:var(--forest); color:#fff }
.home-family .home-age-panel[hidden] { display:none !important }
.home-family .home-age-panel[data-age-panel="0-1"] { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(120px,1fr) minmax(90px,.5fr); gap:8px; min-height:252px }
.home-family-featured { display:flex; flex-direction:column; margin:0; overflow:visible; color:var(--ink); background:transparent }
.home-family-featured .home-family-media { flex:0 0 auto; aspect-ratio:4/3; height:auto }
.home-family-featured__copy { position:static; max-width:none; padding:8px 0 0; color:var(--ink); background:transparent }
.home-family-featured__copy .eyebrow,
.home-family-featured__copy > p:not(.eyebrow) { display:none }
.home-family-featured h3 { margin:0; font-size:clamp(15px,2vw,20px); line-height:1.32 }
.home-family-small { display:grid; grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); gap:6px; min-height:0; margin:0 }
.home-family-small a { display:grid; grid-template-columns:minmax(58px,124px) minmax(0,1fr); gap:9px; min-height:0; padding:4px; align-items:center; border:1px solid #eeeae2; background:#fff; color:inherit; text-decoration:none }
.home-family-small .home-family-media { height:auto; aspect-ratio:4/3 }
.home-family-small h4 { margin:0; font:500 clamp(10px,1.5vw,14px)/1.34 var(--serif) }
.home-family-banner { display:block; min-height:0; overflow:hidden; background:#eee8df }
.home-family-banner img { width:100%; height:100%; display:block; object-fit:contain }

@media (min-width:900px) {
  .home-family.wrap { width:min(1240px, calc(100% - 80px)); margin:0 auto }
  .home-family .home-age-panel[data-age-panel="0-1"] { grid-template-columns:minmax(0,1.5fr) minmax(250px,1.99fr) minmax(180px,1fr); gap:28px; min-height:0 }
  .home-family-small { grid-template-rows:repeat(3,1fr); min-height:0 }
  .home-family-small a { min-height:0 }
  .home-family-small .home-family-media { height:100% }
  .home-family-banner { min-height:0 }
}

/* Gentle feedback for family article links */
.home-family-featured,
.home-family-small a { transition:transform .46s cubic-bezier(.22,.61,.36,1), box-shadow .46s cubic-bezier(.22,.61,.36,1), border-color .36s ease }
.home-family-featured img,
.home-family-small img { transition:transform .66s cubic-bezier(.22,.61,.36,1) }
.home-family-featured:focus-visible,
.home-family-small a:focus-visible { outline:2px solid var(--forest); outline-offset:4px }
@media (hover:hover) {
  .home-family-featured:hover { transform:translateY(-3px) }
  .home-family-featured:hover .home-family-media { box-shadow:0 16px 34px rgba(31,45,35,.10) }
  .home-family-small a:hover { transform:translateY(-2px); border-color:rgba(39,48,41,.24); box-shadow:0 12px 26px rgba(31,45,35,.07) }
  .home-family-featured:hover img,
  .home-family-small a:hover img { transform:scale(1.025) }
}
.home-family-featured:active,
.home-family-small a:active { transform:translateY(0) scale(.992) }
@media (prefers-reduced-motion:reduce) {
  .home-family-featured,
  .home-family-small a,
  .home-family-featured img,
  .home-family-small img { transition:none }
}

/* Let imagery and whitespace define cards instead of visible frames. */
.home-hero__rail a,
.home-article-card,
.home-space-card,
.home-select-card,
.home-family-small a { border:0 }

/* Home — a tighter, more considered editorial rhythm. */
.home-main { gap:32px; padding-top:14px; padding-bottom:0 }
.home-section-head { margin-bottom:12px; padding-bottom:8px }
.home-article-grid { margin-bottom:28px }
.home-family,
.home-select { padding-top:0; padding-bottom:0 }
.home-page .japanese-brands { padding:52px 0 56px; border-top:1px solid rgba(39,48,41,.1) }
.home-page .japanese-brands__intro .eyebrow { margin-bottom:11px }
.home-page .japanese-brands__rows { gap:22px; margin-top:34px }
.home-page .brand-row__track { row-gap:24px }
.home-page .service { min-height:clamp(400px,32vw,470px) }
.home-page .service-media-content { margin-bottom:38px }
.home-page .service-philosophy { padding:clamp(42px,5vw,68px) }

@media (min-width:768px) {
  .home-main { gap:38px }
  .home-article-grid { margin-bottom:32px }
  .home-page .japanese-brands { padding:60px 0 64px }
}

@media (min-width:1024px) {
  .home-main { gap:44px; padding-top:16px }
  .home-article-grid { margin-bottom:36px }
  .home-page .japanese-brands { padding:66px 0 70px }
  .home-page .japanese-brands__rows { gap:28px; margin-top:42px }
  .home-page .brand-row__track { row-gap:28px }
  .home-page .service { min-height:clamp(420px,33vw,480px) }
}

/* Mobile home: readable editorial cards without the desktop family banner. */
.home-ranking-mobile { margin:2px 0 28px; padding-top:16px; border-top:1px solid var(--line) }
.home-ranking-mobile h2 { margin:0 0 8px; font:500 22px/1.25 var(--serif); letter-spacing:-.03em }
.home-ranking-mobile ol { margin:0; padding:0; list-style:none }
.home-ranking-mobile li { border-top:1px solid rgba(39,48,41,.12) }
.home-ranking-mobile a { display:grid; grid-template-columns:28px 92px minmax(0,1fr); gap:10px; align-items:center; padding:10px 0; color:inherit; text-decoration:none }
.home-ranking-mobile .home-ranking__num { color:#ba8a4e; font:500 18px var(--serif) }
.home-ranking-mobile .home-ranking__media { width:92px; aspect-ratio:4/3; overflow:hidden; background:#f5f3ee }
.home-ranking-mobile .home-ranking__media img { width:100%; height:100%; display:block; object-fit:cover }
.home-ranking-mobile h3 { margin:0; font:500 15px/1.32 var(--serif) }

.home-family .home-age-panel[data-age-panel="0-1"] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; min-height:0 }
.home-family .home-family-small { display:contents }
.home-family .home-family-small a { display:block; padding:0; background:transparent }
.home-family .home-family-small .home-family-media { height:auto; aspect-ratio:4/3 }
.home-family .home-family-small h4 { margin:8px 0 0; font-size:14px; line-height:1.32 }
.home-family .home-family-banner { display:none }
.home-family-featured h3 { margin-top:0; font-size:16px }

.home-select-grid { gap:12px }
.home-select-card { flex:0 0 calc((100% - 24px)/2.5) }

@media (min-width:768px) {
  .home-ranking-mobile { display:none }
}

@media (min-width:900px) {
  .home-family .home-age-panel[data-age-panel="0-1"] { grid-template-columns:minmax(0,1.5fr) minmax(250px,1.99fr) minmax(180px,1fr); gap:28px; min-height:0 }
  .home-family .home-family-small { display:grid; grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); gap:6px }
  .home-family .home-family-small a { display:grid; grid-template-columns:minmax(58px,124px) minmax(0,1fr); gap:9px; padding:4px; background:#fff }
  .home-family .home-family-small .home-family-media { height:100%; aspect-ratio:4/3 }
  .home-family .home-family-small h4 { margin:0; font-size:clamp(10px,1.5vw,14px) }
  .home-family .home-family-banner { display:block }
  .home-family-featured h3 { font-size:clamp(15px,2vw,20px) }
}

/* Article detail standard — shared across every editorial page. */
.article-detail-header .family-crumb {
  margin-bottom:18px;
  color:#788077;
  font:400 14px/1.55 var(--serif);
  letter-spacing:0;
}
.article-detail-header .eyebrow { color:#687268; font:10px var(--mono); letter-spacing:.12em }
.article-detail-meta { display:none }
.article-toc { max-width:640px; margin:28px 0 46px; padding:17px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.article-toc__title { margin:0 0 12px; color:#687268; font:10px var(--mono); letter-spacing:.12em; text-transform:uppercase }
.article-toc ol { display:grid; grid-template-columns:1fr; gap:7px; margin:0; padding:0; list-style:none }
.article-toc a { display:flex; gap:10px; align-items:baseline; color:inherit; font:500 14px/1.5 var(--serif); text-decoration:none }
.article-toc a span { flex:0 0 20px; color:#ba8a4e; font:9px var(--mono); letter-spacing:.08em }
.article-toc a:focus-visible { outline:2px solid var(--forest); outline-offset:3px }

.article-detail-sidebar.detail-products { padding:0; background:transparent }
.article-detail-sidebar.detail-products > header { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line) }
.article-detail-sidebar.detail-products > header .eyebrow { margin-bottom:7px }
.article-detail-sidebar.detail-products > header h2 { font-size:20px }
.article-product-card { display:block !important; padding:0 0 20px !important; border:0 !important }
.article-product-card > span { display:none !important }
.article-product-card .detail-product-row { position:relative; display:block; overflow:hidden }
.article-product-card .detail-product-row::after { content:""; position:absolute; inset:0; background:rgba(22,34,26,.38); opacity:0; transition:opacity .42s ease }
.article-product-card .detail-media--product { width:100%; aspect-ratio:4/3; margin:0; overflow:hidden }
.article-product-card .detail-media--product img { transition:transform .65s cubic-bezier(.22,.61,.36,1) }
.article-product-card .detail-product-info { padding:10px 0 0 }
.article-product-card .detail-product-info p { margin-bottom:4px }
.article-product-card .detail-product-info h3 { margin-bottom:5px; font-size:16px }
.article-product-card strong { color:#c66d2b; font-weight:700 }
.article-product-card__cta {
  position:absolute;
  z-index:2;
  top:50%; left:50%;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  min-height:34px;
  padding:8px 15px !important;
  border:1px solid #f2b233 !important;
  border-radius:999px;
  background:#ffbe3d;
  color:#352300 !important;
  font:500 11px var(--sans) !important;
  text-decoration:none !important;
  opacity:0;
  transform:translate(-50%,calc(-50% + 7px));
  transition:opacity .38s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.article-product-card__cta:focus-visible { opacity:1; outline:2px solid var(--forest); outline-offset:3px }
@media (hover:hover) {
  .article-product-card:hover .detail-product-row::after { opacity:1 }
  .article-product-card:hover .detail-media--product img { transform:scale(1.035) }
  .article-product-card:hover .article-product-card__cta { opacity:1; transform:translate(-50%,-50%) }
}

@media (min-width:821px) {
  .article-detail-header .family-crumb { font-size:15px }
  .article-toc { margin-top:32px; margin-bottom:52px; padding:20px 0 }
}

/* Refined article-detail hierarchy. */
.article-detail-header .eyebrow { display:none }
.article-toc ol { grid-template-columns:1fr }
.article-toc a { gap:12px }
.article-toc a span { flex-basis:28px; font-size:12px; font-weight:700 }

.article-product-card { padding-bottom:14px !important }
.article-product-card .detail-product-row { display:grid; grid-template-columns:108px minmax(0,1fr); gap:12px; align-items:center; overflow:visible }
.article-product-card .detail-product-row::after { display:none }
.article-product-card .detail-media--product { position:relative; width:108px; aspect-ratio:4/3; overflow:hidden }
.article-product-card .detail-media--product::after { content:""; position:absolute; inset:0; background:rgba(22,34,26,.38); opacity:0; transition:opacity .42s ease }
.article-product-card .detail-product-info { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label label" "title price"; gap:0 8px; padding:0; align-items:end }
.article-product-card .detail-product-info p { grid-area:label; margin:0 0 5px }
.article-product-card .detail-product-info h3 { grid-area:title; margin:0; font-size:14px; line-height:1.3 }
.article-product-card .detail-product-info strong { grid-area:price; margin:0; font-size:12px; white-space:nowrap }
.article-product-card__cta { top:50%; left:54px; min-height:28px; padding:6px 9px !important; font-size:9px !important }
@media (hover:hover) {
  .article-product-card:hover .detail-media--product::after { opacity:1 }
}

/* Breadcrumb and table-of-contents refinement. */
.article-detail-header .family-crumb { display:flex; align-items:center; gap:7px; max-width:100%; overflow:hidden; color:#788077; white-space:nowrap }
.article-detail-header .family-crumb a { flex:0 0 auto; border-bottom-color:transparent }
.article-detail-header .family-crumb__divider { flex:0 0 auto; color:#b0b5ad; font-size:11px }
.article-detail-header .family-crumb__current { min-width:0; overflow:hidden; color:#667067; text-overflow:ellipsis }
.article-toc { padding:20px 22px; border:0; background:#f7f4ed }
.article-toc__title { color:#5f695f }

.article-product-card .detail-product-info { grid-template-areas:"title price" }
.article-product-card .detail-product-info p { display:none }

/* Keep the table of contents as legible as the article itself. */
.article-toc a { font-size:17px; line-height:1.6 }
.article-toc a span { font-size:13px }

/* Compact selection card: product title starts at the top, price remains at the far edge. */
.article-product-card .detail-product-row { align-items:stretch }
.article-product-card .detail-product-info { grid-template-areas:"title ." ". price"; grid-template-rows:auto 1fr; align-items:start; height:100% }
.article-product-card .detail-product-info h3 { align-self:start }
.article-product-card .detail-product-info strong { justify-self:end; align-self:end }

/* A measured opening: retain editorial presence without leaving a blank band below the header. */
@media (min-width:821px) {
  .article-detail-header { padding-top:56px }
  .article-detail-header h1 { margin-bottom:48px }
}

/* Shared editorial listing pages — image first, title second, no card chrome. */
.listing-page { background:#fff }
.listing-main { display:block; padding:44px 0 72px }
.listing-intro { padding:0 0 28px; border-bottom:1px solid var(--line) }
.listing-crumb { display:flex; align-items:center; gap:7px; margin:0 0 22px; color:#788077; font:400 14px/1.5 var(--serif) }
.listing-crumb a { color:inherit; text-decoration:none; border-bottom:1px solid transparent }
.listing-crumb a:hover,.listing-crumb a:focus-visible { color:var(--ink); border-bottom-color:currentColor }
.listing-crumb span[aria-hidden] { color:#b0b5ad; font-size:11px }
.listing-kicker { margin:0 0 8px; color:#697269; font:10px var(--mono); letter-spacing:.12em }
.listing-intro h1 { margin:0; font:500 clamp(36px,8vw,52px)/1.08 var(--serif); letter-spacing:-.04em }
.listing-description { max-width:520px; margin:11px 0 0; color:#687067; font:400 17px/1.65 var(--serif) }
.listing-content { padding-top:30px }
.listing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 12px }
.listing-card { display:block; min-width:0; color:inherit; text-decoration:none; transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1) }
.listing-card__media { display:block; overflow:hidden; aspect-ratio:4/3; background:#f5f3ee }
.listing-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1) }
.listing-card h2 { margin:11px 0 0; font:500 16px/1.35 var(--serif); letter-spacing:-.015em }
.listing-card:focus-visible { outline:2px solid var(--forest); outline-offset:5px }
@media (hover:hover) {
  .listing-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(31,45,35,.08) }
  .listing-card:hover img { transform:scale(1.025) }
}
@media (min-width:640px) {
  .listing-main { padding-top:52px }
  .listing-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 16px }
  .listing-card h2 { font-size:17px }
}
@media (min-width:1024px) {
  .listing-main { padding-top:56px; padding-bottom:96px }
  .listing-intro { padding-bottom:32px }
  .listing-intro h1 { font-size:52px }
  .listing-content { padding-top:36px }
  .listing-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:38px 14px }
  .listing-card h2 { margin-top:12px; font-size:16px }
}
@media (prefers-reduced-motion:reduce) {
.listing-card,.listing-card img { transition:none }
}

/* Long-form editorial infographics remain entirely inside the article column. */
.article-infographic { width:100%; max-width:840px; margin:36px 0 0; }
.article-infographic img { display:block; width:100%; height:auto; }
.article-mobile-guide { display:none; }

@media (max-width:820px) {
  .article-infographic { display:none; }
  .article-mobile-guide { display:block; margin:30px 0 0; color:var(--ink); }
  .article-mobile-guide__header { margin:0 0 18px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .article-mobile-guide__header p { margin:0 0 7px; color:#697269; font:10px var(--mono); letter-spacing:.12em; }
  .article-mobile-guide__header h2 { margin:0; font:500 30px/1.15 var(--serif); letter-spacing:-.04em; }
  .article-mobile-guide__media { margin:0 0 34px; overflow:hidden; background:#f3eee5; }
  .article-mobile-guide__media img { display:block; width:100%; height:auto; }
  .article-mobile-guide__section { margin:0 0 38px; }
  .article-mobile-guide__section > header { display:grid; grid-template-columns:41px minmax(0,1fr); gap:11px; align-items:start; margin:0 0 17px; }
  .article-mobile-guide__section > header > span { color:#a96f52; font:500 28px/1 var(--serif); font-style:italic; }
  .article-mobile-guide__section h3 { margin:0; font:500 24px/1.18 var(--serif); letter-spacing:-.035em; }
  .article-mobile-guide__section > header p { margin:6px 0 0; color:#667067; font:400 14px/1.55 var(--serif); }
  .article-mobile-guide__items { display:grid; gap:0; }
  .article-mobile-guide__items article { position:relative; padding:0 0 17px; background:transparent; border:0; }
  .article-mobile-guide__items article > p { margin:0 0 4px; color:#a4573e; font:700 10px/1.3 var(--sans); letter-spacing:.05em; }
  .article-mobile-guide__items h4 { margin:0; font:600 17px/1.32 var(--serif); }
  .article-mobile-guide__items ul { display:grid; gap:4px; margin:7px 0 0; padding:0 0 0 16px; color:#525b52; font:400 14px/1.55 var(--serif); }
  .article-mobile-guide__items li::marker { color:#bf7651; }

  .article-mobile-guide__section--01 .article-mobile-guide__items { margin-left:5px; }
  .article-mobile-guide__section--01 .article-mobile-guide__items article { padding:0 0 20px 20px; border-left:1px solid #d8c8ba; }
  .article-mobile-guide__section--01 .article-mobile-guide__items article::before { content:""; position:absolute; top:4px; left:-4px; width:7px; height:7px; border-radius:50%; background:#b96f4b; }
  .article-mobile-guide__section--01 .article-mobile-guide__items article:last-child { padding-bottom:0; }

  .article-mobile-guide__section--02 .article-mobile-guide__items { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid #e7dfd3; background:#e7dfd3; }
  .article-mobile-guide__section--02 .article-mobile-guide__items article { min-height:132px; padding:13px 12px; background:#fffdfa; }
  .article-mobile-guide__section--02 .article-mobile-guide__items h4 { font-size:15px; line-height:1.28; }
  .article-mobile-guide__section--02 .article-mobile-guide__items ul { margin-top:7px; padding-left:13px; font-size:12px; line-height:1.48; }

  .article-mobile-guide__section--03 .article-mobile-guide__items article { display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:13px; padding:15px 0; border-top:1px solid #e2ddd4; }
  .article-mobile-guide__section--03 .article-mobile-guide__items article > p { grid-column:1; grid-row:1 / span 2; margin:1px 0 0; color:#a4573e; font:700 12px/1.35 var(--sans); }
  .article-mobile-guide__section--03 .article-mobile-guide__items h4 { grid-column:2; }
  .article-mobile-guide__section--03 .article-mobile-guide__items ul { grid-column:2; }

  .article-mobile-guide__section--04 .article-mobile-guide__items { border-top:1px solid #e2ddd4; }
  .article-mobile-guide__section--04 .article-mobile-guide__items article { padding:14px 0 15px 18px; border-bottom:1px solid #e2ddd4; }
  .article-mobile-guide__section--04 .article-mobile-guide__items article::before { content:"→"; position:absolute; top:13px; left:0; color:#a96f52; font-size:13px; }
  .article-mobile-guide__section--04 .article-mobile-guide__items h4 { font-size:16px; }

  .article-mobile-guide__section--05 .article-mobile-guide__items { gap:0; }
  .article-mobile-guide__section--05 .article-mobile-guide__items article { padding:0 0 15px; border-bottom:1px solid #e2ddd4; }
  .article-mobile-guide__section--05 .article-mobile-guide__items article + article { padding-top:15px; }
  .article-mobile-guide__section--05 .article-mobile-guide__items li { position:relative; padding-left:6px; list-style:none; }
  .article-mobile-guide__section--05 .article-mobile-guide__items li::before { content:""; position:absolute; top:.32em; left:-14px; width:8px; height:8px; border:1px solid #9ba89a; }
  .article-mobile-guide__section--05 .article-mobile-guide__items li::marker { content:""; }
}