/*
Theme Name: 買取王国アシスト
Description: 最新デザインカンプに基づく買取王国アシストのオリジナルテーマ。
Version: 1.2.0
Text Domain: kaitori-assist
*/
:root {
 --gold: #e6bd48;
 --gold-light: #ffeb9c;
 --line: #aa8325;
 --serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
 --texture: url("assets/images/latest/gold-background.webp");
}
* { box-sizing: border-box; }
html { background: #080705; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; color: #fff; font-family: "Yu Gothic", Meiryo, sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font: inherit; }
h1, h2, h3, p, blockquote { margin: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #ffde70; outline-offset: 3px; }
a:hover { filter: brightness(1.13); }
.container { width: min(1200px, 100%); margin-inline: auto; }
.icon { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.mobile-only { display: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 100000; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 12px 16px; clip-path: none; background: #fff; color: #111; }

/* Header and common contact controls. */
.site-header { background: #020202; border-bottom: 1px solid var(--gold); }
.header-inner { display: flex; align-items: center; gap: 16px; padding: 10px 16px; }
.brand { display: block; flex-shrink: 0; width: 31%; max-width: 350px; }
.brand img { width: 100%; }
.header-phone { white-space: nowrap; margin-left: auto; }
.header-phone > a { display: flex; align-items: center; justify-content: center; gap: 7px; font: 30px/1.15 Arial, sans-serif; }
.header-phone .icon { color: var(--gold-light); width: 28px; height: 28px; }
.header-phone small { display: block; font-size: 12px; margin-top: 5px; text-align: center; }
.cta-buttons { display: flex; gap: 10px; }
.button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 66px; padding: 12px 18px; border: 1px solid #fc3422; border-radius: 5px; font-size: 19px; font-weight: 700; line-height: 1.3; text-align: center; box-shadow: inset 0 1px 1px #ffffff45, 0 2px 6px #0006; transition: filter .2s; }
.button--red { background: linear-gradient(120deg,#ff1606,#c00000); }
.button--green { background: linear-gradient(120deg,#00d61b,#00940d); border-color: #00c423; }
.button > .icon { width: 38px; height: 38px; stroke-width: 1.4; }
.button-arrow { margin-left: auto; font: 27px/1 Arial, sans-serif; }
.line-mark { background: #fff; color: #00a221; width: 39px; height: 39px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font: bold 11px Arial,sans-serif; position: relative; }
.line-mark:after { content: ""; position: absolute; bottom: -3px; left: 9px; border-top: 8px solid white; border-right: 7px solid transparent; }
.header-inner .cta-buttons { flex: 1; gap: 9px; }
.header-inner .button { flex: 1; font-size: 13px; padding: 8px; min-height: 64px; gap: 7px; }
.header-inner .button--green { order: -1; white-space: nowrap; }
.header-inner .button--red > span:not(.button-arrow) { max-width: 90px; }
.header-inner .button-arrow { display: none; }
.header-inner .button > .icon { width: 30px; height: 30px; }
.header-inner .line-mark { width: 30px; height: 30px; font-size: 9px; }
.main-nav { border-top: 1px solid var(--line); }
.main-nav > .container { display: flex; justify-content: space-evenly; padding: 6px 10px; }
.main-nav a { font-size: 14px; font-weight: 700; padding: 5px 8px; }
.main-nav a:hover { color: var(--gold-light); }
.menu-toggle { display: none; }

/* Hero: HTML copy over the extracted product cluster. */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 25px 18px 20px; min-height: 600px; background: linear-gradient(100deg,#0003,#0007),var(--texture); background-size: auto,620px 330px; }
.hero:after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 25% 50%,#000b,transparent 65%); }
.hero-art { position: absolute; right: 0; top: 0; width: 57%; height: 100%; object-fit: contain; object-position: right bottom; z-index: -1; }
.hero-content { width: 47%; }
.hero-eyebrow { display: flex; align-items: center; gap: 16px; font: bold 55px/1.15 var(--serif); color: var(--gold-light); }
.hero-eyebrow .crown { width: 69px; height: 64px; }
.hero h1 { position: relative; font: bold 137px/1.35 var(--serif); white-space: nowrap; letter-spacing: -.06em; background: linear-gradient(#fff2b7 10%,#f5cb48 48%,#c08a13 66%,#ffe68e); background-clip: text; color: transparent; filter: drop-shadow(1px 3px 1px #513000); }
.hero-catch { font: bold 28px/1.5 var(--serif); white-space: nowrap; text-shadow: 0 2px 5px #000; }
.hero-description { font: 17px/1.55 var(--serif); text-align: center; margin: 12px 0 15px; text-shadow: 0 2px 4px #000; }
.hero-message { position: absolute; right: 20px; top: 22px; font: 25px/1.45 var(--serif); text-shadow: 0 2px 4px #000; }
.hero > .cta-buttons { width: 59%; position: relative; margin-top: 20px; }
.hero > .cta-buttons .button { flex: 1; padding-inline: 12px; font-size: 18px; }
.benefits { display: flex; gap: 8px; }
.benefit { flex: 1; aspect-ratio: 1; border-radius: 50%; border: 3px solid #e9b743; background: linear-gradient(125deg,#eee9d9,#fff 35%,#fff 65%,#d7d2c6); box-shadow: 0 0 0 1px #765119,inset 0 0 0 2px #fff9; color: #050505; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px; min-width: 0; text-align: center; }
.benefit .icon { width: 39px; height: 39px; stroke-width: 2.2; }
.benefit strong { margin-top: 6px; font-size: 12px; line-height: 1.2; }

/* Section headings and cards. */
.section { padding: 10px 16px 14px; border-top: 1px solid var(--gold); position: relative; background: linear-gradient(90deg,#0009,#000e 65%,#000a),var(--texture); background-size: auto,620px 330px; }
.section:before { content: ""; position: absolute; top: -2px; left: 8%; width: 55%; height: 3px; background: linear-gradient(90deg,transparent,#fff0b0,transparent); pointer-events: none; }
.section-heading { display: flex; gap: 15px; align-items: center; padding-bottom: 10px; flex-wrap: wrap; }
.section-heading h2 { display: flex; align-items: center; gap: 8px; color: var(--gold-light); font: bold 36px/1.25 var(--serif); white-space: nowrap; }
.crown { display: inline-block; width: 44px; height: 41px; object-fit: contain; mix-blend-mode: screen; flex-shrink: 0; }
.section-english { font: 12px/1.2 Arial,sans-serif; color: #f8da52; white-space: nowrap; }
.section-heading > p { font: 17px/1.5 var(--serif); }
.more-link { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; background: linear-gradient(#171717,#020202); font-size: 12px; font-weight: 700; white-space: nowrap; margin-left: auto; }
.more-link span { font: 22px/1 Arial,sans-serif; }
#voices .section-heading, #faq .section-heading { gap: 12px; }
#voices .section-heading > p, #faq .section-heading > p { font-size: 14px; flex: 1; }
.campaign-section { padding: 9px 12px; }
.campaign-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.campaign-card { position: relative; overflow: hidden; isolation: isolate; min-height: 238px; background: #030303; border: 1px solid var(--line); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; }
.campaign-card img { position: absolute; z-index: -2; right: 0; bottom: 25px; width: 83%; height: 80%; object-fit: cover; }
.campaign-card:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#0001 20%,transparent 60%,#000 94%),linear-gradient(90deg,#0008,transparent 65%); }
.campaign-card h2 { font: bold 29px/1.25 var(--serif); color: var(--gold-light); text-shadow: 0 2px 5px #000,1px 1px 2px #000; }
.campaign-card p { font: 16px/1.4 var(--serif); margin-top: auto; padding-top: 66px; text-shadow: 0 1px 4px #000; }
.condition-section { display: flex; gap: 14px; align-items: center; padding-block: 12px; background: radial-gradient(ellipse at 48% 20%,#fff5d7 5%,#ead39b 37%,#bb7a1788 68%,transparent),var(--texture); }
.condition-main { flex: 1; min-width: 0; color: #050505; text-align: center; }
.condition-main h2 { font-size: 30px; font-weight: 900; line-height: 1.25; }
.condition-main > p { font-size: 14px; margin: 5px 0 10px; font-weight: 700; }
.condition-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.condition-card { background: #fff; border-radius: 4px; border: 1px solid #d9c49d; padding: 5px 3px 9px; overflow: hidden; }
.condition-card img { width: 100%; aspect-ratio: 1.5; object-fit: contain; }
.condition-card strong { display: block; font-size: 14px; margin-top: 4px; white-space: nowrap; }
.condition-note { flex: 0 0 215px; background: #050402; border: 1px solid var(--line); border-radius: 4px; padding: 9px 8px; text-align: center; }
.condition-note h3 { font: 30px/1.3 var(--serif); color: var(--gold-light); white-space: nowrap; }
.condition-note small { display: block; font-size: 15px; margin-top: 5px; }
.condition-note p { border-top: 1px solid #6d5519; margin-top: 8px; padding-top: 8px; font: 18px/1.45 var(--serif); }
.results-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; }
.result-card { background: #fff; color: #0a0a0a; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.result-card > img { width: 100%; aspect-ratio: 1.48; object-fit: cover; }
.result-body { padding: 5px; display: flex; flex-direction: column; flex: 1; }
.result-card h3 { text-align: center; font-size: 13px; line-height: 1.25; }
.price { display: flex; align-items: center; justify-content: center; gap: 3px; color: #ed0800; margin-top: auto; padding-top: 5px; white-space: nowrap; }
.price small { font-size: 10px; line-height: 1.1; font-weight: 700; }
.price strong { font: 700 24px/1.1 "Arial Narrow",Arial,sans-serif; letter-spacing: -1.3px; }
.price strong span { font-size: 13px; letter-spacing: 0; }
.items-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.item-card { background: #020202; border: 1px solid var(--line); border-radius: 4px; padding: 5px 4px 9px; text-align: center; }
.item-card img { width: 100%; aspect-ratio: 1.28; object-fit: cover; }
.item-card h3 { color: var(--gold-light); font-size: 17px; line-height: 1.35; margin: 4px 0; }
.item-card p { font-size: 11px; }
.methods-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.method-card { border: 2px solid var(--line); border-radius: 6px; background: linear-gradient(125deg,#fff,#fff 70%,#fff0cd); color: #080808; overflow: hidden; }
.method-card h3 { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 28px; padding: 10px 5px; }
.method-card h3 .icon { width: 36px; height: 36px; stroke-width: 2.5; }
.method-card > img { width: calc(100% - 16px); height: auto; aspect-ratio: 2.9; object-fit: cover; border-radius: 3px; margin: 0 8px; }
.method-body { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.method-body > p { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; font-weight: 500; }
.method-badge { flex-shrink: 0; width: 100px; height: 100px; border: 3px solid #dda224; border-radius: 50%; outline: 1px solid #ffedb1; background: linear-gradient(125deg,#fff4bc,#ffd65b 75%,#ce8e15); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #db1000; font-size: 22px; font-weight: 900; line-height: 1.2; margin-top: -42px; }
.method-badge strong { font: 700 49px/1 Arial,sans-serif; }
.method-badge strong span { font-size: 21px; }
.method-badge .estimate { font: 900 20px/1.3 sans-serif; white-space: nowrap; margin-top: 4px; }
.flow-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; padding: 0; margin: 0; list-style: none; }
.flow-card { display: flex; position: relative; padding: 8px; border: 1px solid var(--gold); border-radius: 4px; background: #070603; }
.flow-card:not(:last-child):after { content: ""; position: absolute; right: -13px; top: 42%; border-left: 11px solid var(--gold-light); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.step-number { flex: 0 0 60px; padding-right: 6px; text-align: center; color: var(--gold-light); font: 20px/1.3 var(--serif); display: flex; flex-direction: column; }
.step-number strong { font-size: 50px; line-height: 1.1; }
.step-number img { width: 51px; height: 47px; object-fit: cover; margin-top: auto; border-radius: 4px; }
.step-content { flex: 1; min-width: 0; color: #080808; background: #fff; padding: 9px 6px; border-radius: 10px 3px 3px 3px; text-align: center; }
.step-icon { display: flex; justify-content: center; gap: 8px; }
.step-icon .icon { width: 39px; height: 39px; }
.step-content h3 { font-size: 18px; margin: 7px 0; }
.step-content p { font-size: 14px; line-height: 1.5; }
.voices-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.voice-card { background: #fff; color: #0a0a0a; border: 1px solid var(--line); border-radius: 6px; padding: 17px 12px; display: flex; align-items: center; gap: 12px; }
.voice-card > img { width: 28%; border-radius: 50%; aspect-ratio: .85; object-fit: cover; }
.voice-card > div { min-width: 0; flex: 1; }
.voice-card blockquote { font-size: 16px; line-height: 1.5; font-weight: 600; }
.stars { color: #eca900; font: 26px/1.4 Arial,sans-serif; letter-spacing: 1px; margin: 4px 0; }
.voice-meta { font-size: 13px; }

/* Answers are initially visible, matching the updated desktop comp. */
.faq-list { background: #fff; color: #0a0a0a; border-radius: 5px; overflow: hidden; }
.faq-list details { position: relative; }
.faq-list details + details { border-top: 1px solid #bcbcbc; }
.faq-list details:nth-child(even) { background: #f0f0f0; }
.faq-list summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; min-height: 54px; padding: 10px 61% 10px 14px; font-size: 14px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.q-mark { font: 27px/1.15 var(--serif); color: var(--gold-light); background: #050505; border-radius: 3px; padding: 0 8px; flex-shrink: 0; }
.faq-chevron { position: absolute; right: 18px; top: 21px; width: 10px; height: 10px; border-right: 3px solid #101010; border-bottom: 3px solid #101010; transform: rotate(-135deg); }
.faq-list details[open] .faq-chevron { transform: rotate(45deg); }
.faq-answer { position: absolute; left: 41%; right: 42px; top: 0; min-height: 54px; padding: 10px 0; display: flex; align-items: center; gap: 14px; font-size: 14px; pointer-events: none; }
.faq-answer strong { font-size: 18px; }

/* Final CTA: gold chain imagery, five benefits and the original seal. */
.contact-section { isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr 32%; grid-template-rows: auto auto; gap: 14px 20px; min-height: 355px; padding: 22px 22px 26px 27%; background: linear-gradient(90deg,transparent,#000c 35%,#000b 65%,transparent),var(--texture); }
.contact-art { position: absolute; inset: 0 auto 0 0; height: 100%; width: 28%; object-fit: cover; z-index: -1; mask-image: linear-gradient(90deg,#000 65%,transparent); }
.contact-art-right { position: absolute; right: 0; top: 0; width: 29%; height: 100%; object-fit: cover; z-index: -1; mask-image: linear-gradient(90deg,transparent,#000 60%); }
.contact-copy { grid-column: 1; grid-row: 1; position: relative; }
.contact-copy h2 { font: bold 37px/1.3 var(--serif); color: var(--gold-light); white-space: nowrap; }
.contact-copy p { margin-top: 10px; font: 17px/1.5 var(--serif); }
.contact-benefits { grid-column: 1; grid-row: 2; margin-left: -23%; align-self: end; }
.contact-benefits .benefit { max-width: 103px; }
.contact-actions { grid-column: 2; grid-row: 1 / 3; position: relative; display: flex; flex-direction: column; justify-content: end; align-items: end; }
.area-seal { width: 175px; margin: -16px -5px -3px 0; }
.contact-actions .cta-buttons { flex-direction: column; width: 100%; gap: 9px; }
.contact-actions .button { min-height: 65px; font-size: 18px; padding-inline: 12px; }
.contact-actions .button-arrow { font-size: 23px; }
.site-footer { background: #020202; border-top: 1px solid var(--gold); }
.footer-inner { display: flex; align-items: center; gap: 18px; padding: 16px; }
.footer-inner .brand { width: 29%; max-width: 315px; }
.footer-inner nav { flex: 1; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 11px; }
.footer-inner .header-phone > a { font-size: 29px; }
.footer-bottom { padding: 24px 20px 32px; background: linear-gradient(110deg,#121212,#090909); border-top: 1px solid #373125; display: flex; justify-content: flex-end; align-items: center; gap: 90px; }
.footer-bottom nav { display: flex; gap: 16px; font-size: 11px; }
.copyright { color: #c3bfaf; font-size: 10px; }
.mobile-contact { display: none; }

/* Built-in detail destinations; existing WordPress pages remain usable. */
.page-content, .detail-page { min-height: 65vh; padding: 32px 22px 55px; background: linear-gradient(#0009,#000d),var(--texture); }
.breadcrumb { font-size: 13px; margin-bottom: 25px; color: #cec5a9; }
.detail-page h1 { display: flex; align-items: center; gap: 12px; font: bold 38px/1.4 var(--serif); color: var(--gold-light); margin-bottom: 16px; }
.detail-intro { margin: 0 0 24px; }
.detail-panel { padding: 24px; background: #fff; color: #111; border: 1px solid var(--gold); border-radius: 5px; margin-block: 20px; }
.detail-panel h2 { margin-bottom: 12px; }
.detail-panel p { margin-block: 12px; }
.detail-panel .button { width: fit-content; color: #fff; }
.contact-phone { display: inline-flex; align-items: center; gap: 10px; font: 32px/1.5 Arial,sans-serif; }
.company-info { display: grid; grid-template-columns: 170px 1fr; margin: 0; }
.company-info dt, .company-info dd { padding: 14px 8px; margin: 0; border-bottom: 1px solid #ddd; }
.company-info dt { font-weight: 700; }
.sitemap-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); list-style: none; padding: 0; gap: 12px; }
.sitemap-list a { display: block; padding: 15px; border: 1px solid var(--line); }
.back-link { margin-top: 28px; }
.page-content h1 { color: var(--gold-light); margin-bottom: 20px; }
.page-content p { margin-block: 1em; }

@media (max-width: 1100px) {
 .header-inner { gap: 12px; }
 .header-phone > a { font-size: 26px; }
 .header-phone small { font-size: 10px; }
 .header-inner .button { font-size: 12px; min-height: 58px; }
 .header-inner .button > .icon { width: 26px; height: 26px; }
 .hero { min-height: 525px; }
 .hero-eyebrow { font-size: 47px; }
 .hero-eyebrow .crown { width: 58px; height: 56px; }
 .hero h1 { font-size: 114px; }
 .hero-catch { font-size: 24px; }
 .hero-description { font-size: 15px; }
 .hero-message { font-size: 22px; }
 .hero > .cta-buttons .button { font-size: 16px; }
 .benefit strong { font-size: 10px; }
 .benefit .icon { width: 33px; height: 33px; }
 .campaign-card { min-height: 210px; }
 .campaign-card h2 { font-size: 25px; }
 .campaign-card p { font-size: 14px; padding-top: 58px; }
 .condition-main h2 { font-size: 27px; }
 .condition-main > p { font-size: 12px; }
 .condition-card strong { font-size: 12px; }
 .condition-note { flex-basis: 190px; }
 .condition-note h3 { font-size: 26px; }
 .condition-note small { font-size: 13px; }
 .condition-note p { font-size: 16px; }
 .section-heading { gap: 12px; }
 .section-heading h2 { font-size: 32px; }
 .section-heading > p { font-size: 15px; }
 .section-english { font-size: 10px; }
 .more-link { font-size: 10px; padding: 7px 10px; gap: 10px; }
 #voices .section-heading > p, #faq .section-heading > p { font-size: 12px; }
 .price strong { font-size: 20px; }
 .result-card h3 { font-size: 12px; }
 .item-card h3 { font-size: 14px; }
 .item-card p { font-size: 10px; }
 .method-card h3 { font-size: 24px; }
 .method-badge { width: 84px; height: 84px; font-size: 18px; }
 .method-badge strong { font-size: 40px; }
 .method-badge .estimate { font-size: 17px; }
 .method-body > p { font-size: 13px; }
 .step-number { flex-basis: 48px; font-size: 17px; }
 .step-number strong { font-size: 43px; }
 .step-number img { width: 40px; height: 37px; }
 .step-content h3 { font-size: 15px; }
 .step-content p { font-size: 12px; }
 .voice-card { padding: 14px 10px; gap: 10px; }
 .voice-card blockquote { font-size: 14px; }
 .voice-meta { font-size: 11px; }
 .faq-list summary, .faq-answer { font-size: 12px; }
 .contact-section { min-height: 315px; padding-left: 27%; padding-right: 16px; grid-template-columns: 1fr 33%; }
 .contact-copy h2 { font-size: 32px; }
 .contact-copy p { font-size: 15px; }
 .contact-actions .button { font-size: 15px; min-height: 59px; gap: 7px; padding-inline: 8px; }
 .contact-actions .button > .icon { width: 30px; height: 30px; }
 .area-seal { width: 152px; }
 .footer-inner .header-phone > a { font-size: 25px; }
 .footer-inner nav { gap: 7px; font-size: 10px; }
}
@media (max-width: 900px) {
 .header-inner .brand { width: 35%; }
 .header-inner .cta-buttons { display: none; }
 .hero { min-height: 465px; }
 .hero-eyebrow { font-size: 39px; gap: 10px; }
 .hero h1 { font-size: 94px; }
 .hero-catch { font-size: 20px; }
 .hero-description { font-size: 12px; }
 .hero-message { font-size: 18px; }
 .benefits { gap: 6px; }
 .benefit strong { font-size: 9px; }
 .benefit .icon { width: 28px; height: 28px; }
 .hero > .cta-buttons .button { font-size: 14px; padding-inline: 8px; }
 .campaign-card h2 { font-size: 21px; }
 .campaign-card { min-height: 195px; padding: 9px; }
 .campaign-card p { font-size: 12px; }
 .condition-section { display: block; }
 .condition-note { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 20px; }
 .condition-note p { margin: 0; padding: 0; border: 0; }
 .condition-note p br { display: none; }
 .results-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .price strong { font-size: 26px; }
 .items-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .flow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .flow-card:nth-child(2):after { display: none; }
 .method-card h3 { font-size: 20px; gap: 5px; }
 .method-card h3 .icon { width: 28px; height: 28px; }
 .method-badge { width: 72px; height: 72px; font-size: 16px; }
 .method-badge .estimate { font-size: 14px; }
 .method-badge strong { font-size: 35px; }
 .method-body { padding: 9px 7px; gap: 5px; }
 .method-body > p { font-size: 12px; }
 .section-heading h2 { font-size: 29px; }
 #voices .section-heading > p, #faq .section-heading > p { flex: 1 1 32%; }
 .contact-section { padding-left: 24%; grid-template-columns: 1fr 36%; }
 .contact-copy h2 { font-size: 27px; }
 .contact-copy p { font-size: 13px; }
 .contact-benefits { margin-left: -38%; }
 .contact-actions .button { font-size: 13px; }
 .contact-actions .line-mark { width: 29px; height: 29px; font-size: 9px; }
 .footer-inner { flex-wrap: wrap; }
 .footer-inner nav { order: 3; flex-basis: 100%; font-size: 12px; gap: 16px; }
 .footer-bottom { justify-content: space-between; gap: 20px; }
 .faq-list summary { padding-right: 45px; font-size: 14px; }
 .faq-answer { position: static; min-height: 0; padding: 0 18px 12px 23px; font-size: 14px; align-items: start; }
}
@media (max-width: 760px) {
 body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
 .header-inner { padding: 12px 14px; }
 .header-inner .brand { width: 240px; max-width: 72%; }
 .header-inner .header-phone { display: none; }
 .js .menu-toggle { display: block; margin-left: auto; color: var(--gold-light); background: #080705; border: 1px solid var(--line); border-radius: 4px; padding: 8px; font-size: 11px; }
 .main-nav > .container { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px 14px; }
 .main-nav a { padding: 12px 8px; border-bottom: 1px solid #4b3817; font-size: 13px; }
 .js .main-nav { display: none; }
 .js .main-nav.is-open { display: block; }
 .hero { min-height: 0; padding: 22px 14px 18px; }
 .hero-content { width: 100%; }
 .hero-art { width: 77%; height: 355px; top: 0; opacity: .76; object-position: right bottom; }
 .hero-eyebrow { font-size: 37px; gap: 10px; }
 .hero-eyebrow .crown { width: 48px; height: 46px; }
 .hero h1 { font-size: clamp(76px,18vw,110px); line-height: 1.3; margin: 8px 0; }
 .hero-catch { font-size: 23px; position: relative; text-shadow: 0 2px 4px #000,0 0 14px #000; }
 .hero-message { font-size: 15px; top: 15px; right: 13px; }
 .hero-description { text-align: left; max-width: 450px; font-size: 14px; margin: 15px 0 25px; text-shadow: 0 1px 5px #000,0 0 10px #000; }
 .hero .benefits { max-width: 550px; margin-top: 32px; }
 .benefit { border-width: 2px; }
 .benefit .icon { width: 34px; height: 34px; }
 .benefit strong { font-size: 11px; }
 .hero > .cta-buttons { width: 100%; margin-top: 18px; }
 .hero > .cta-buttons .button { font-size: 16px; min-height: 58px; }
 .button > .icon { width: 28px; height: 28px; }
 .line-mark { width: 30px; height: 30px; font-size: 9px; }
 .button-arrow { font-size: 22px; }
 .section { padding: 15px 12px; }
 .campaign-section { padding: 10px; }
 .campaign-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 .campaign-card { min-height: 230px; padding: 12px; }
 .campaign-card h2 { font-size: 27px; }
 .campaign-card p { font-size: 14px; }
 .condition-main h2 { font-size: 27px; }
 .condition-main > p { font-size: 12px; }
 .condition-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
 .condition-card strong { font-size: 13px; }
 .condition-note h3 { font-size: 25px; }
 .condition-note small { font-size: 12px; }
 .condition-note p { font-size: 13px; max-width: 200px; }
 .section-heading { gap: 5px 10px; padding-bottom: 12px; }
 .section-heading h2 { font-size: 29px; }
 .section-heading > p { font-size: 14px; width: 100%; }
 .crown { width: 36px; height: 34px; }
 .section-english { font-size: 10px; }
 #voices .section-heading > p, #faq .section-heading > p { flex-basis: 100%; font-size: 13px; order: 2; }
 .more-link { font-size: 11px; }
 .section-heading .more-link { order: 3; margin-top: 5px; }
 .results-grid { gap: 8px; }
 .result-card h3 { font-size: 12px; }
 .price strong { font-size: 23px; }
 .items-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
 .item-card h3 { font-size: 15px; }
 .item-card p { font-size: 11px; }
 .methods-grid { grid-template-columns: 1fr; gap: 14px; }
 .method-card h3 { font-size: 27px; padding: 10px; gap: 10px; }
 .method-card h3 .icon { width: 34px; height: 34px; }
 .method-card > img { aspect-ratio: 2.7; max-height: 210px; }
 .method-body { padding: 12px; gap: 12px; }
 .method-body > p { font-size: 16px; }
 .method-badge { width: 95px; height: 95px; font-size: 20px; margin-top: -35px; }
 .method-badge strong { font-size: 45px; }
 .method-badge .estimate { font-size: 18px; }
 .flow-grid { gap: 12px; }
 .flow-card:not(:last-child):after { right: -10px; border-left-width: 7px; }
 .step-content h3 { font-size: 16px; }
 .step-content p { font-size: 13px; }
 .voices-grid { grid-template-columns: 1fr; gap: 10px; }
 .voice-card { padding: 16px; gap: 17px; }
 .voice-card > img { width: 74px; }
 .voice-card blockquote { font-size: 16px; }
 .voice-meta { font-size: 13px; }
 .contact-section { padding: 28px 16px; display: flex; flex-direction: column; gap: 18px; }
 .contact-art { width: 44%; opacity: .8; }
 .contact-art-right { width: 34%; opacity: .65; }
 .contact-copy { padding-left: 13%; }
 .contact-copy h2 { font-size: 34px; white-space: normal; }
 .contact-copy p { font-size: 15px; text-shadow: 0 1px 5px #000; }
 .contact-benefits { margin: 0; width: 100%; align-self: auto; }
 .contact-benefits .benefits { justify-content: center; }
 .contact-benefits .benefit { max-width: 100px; }
 .contact-actions { width: 100%; align-items: center; }
 .area-seal { width: 130px; margin: 0 0 7px; }
 .contact-actions .button { min-height: 58px; font-size: 17px; }
 .footer-inner { padding: 20px 15px; justify-content: center; gap: 18px; }
 .footer-inner .brand { width: 280px; max-width: 90%; }
 .footer-inner .header-phone { margin: 0; }
 .footer-inner .header-phone > a { font-size: 29px; }
 .footer-inner nav { font-size: 11px; gap: 12px; }
 .footer-bottom { display: block; text-align: center; padding: 22px 15px; }
 .footer-bottom nav { justify-content: center; margin-bottom: 15px; }
 .mobile-contact { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; border-top: 1px solid var(--gold); box-shadow: 0 -3px 15px #0007; background: #080808; padding-bottom: env(safe-area-inset-bottom); }
 .mobile-contact a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; font-size: 13px; font-weight: 700; }
 .mobile-contact .icon { width: 19px; height: 19px; }
 .mobile-line { background: #009f18; }
 .mobile-form { background: #d00900; }
 .detail-page h1 { font-size: 29px; }
 .detail-panel { padding: 18px; }
 .company-info { grid-template-columns: 100px 1fr; font-size: 14px; }
 .contact-phone { font-size: 26px; }
}
@media (max-width: 440px) {
 .hero-eyebrow { font-size: 30px; }
 .hero-eyebrow .crown { width: 40px; height: 38px; }
 .hero-message { font-size: 12px; }
 .hero h1 { font-size: 79px; }
 .hero-art { width: 83%; height: 330px; opacity: .66; }
 .hero-catch { font-size: 21px; }
 .mobile-only { display: block; }
 .hero-description { font-size: 11px; margin-bottom: 15px; }
 .hero .benefits { margin-top: 22px; }
 .benefits { gap: 5px; }
 .benefit { padding: 4px; }
 .benefit .icon { width: 26px; height: 26px; }
 .benefit strong { font-size: 9px; margin-top: 4px; }
 .hero > .cta-buttons { flex-direction: column; gap: 8px; }
 .hero > .cta-buttons .button { font-size: 17px; min-height: 54px; }
 .campaign-card { min-height: 210px; padding: 10px; }
 .campaign-card h2 { font-size: 22px; }
 .campaign-card p { font-size: 12px; }
 .condition-main h2 { font-size: 22px; }
 .condition-main > p { font-size: 11px; }
 .condition-note { gap: 10px; padding: 10px 6px; }
 .condition-note h3 { font-size: 23px; }
 .condition-note small { font-size: 10px; }
 .condition-note p { font-size: 12px; }
 .section-heading h2 { font-size: 26px; }
 .section-english { font-size: 9px; }
 .results-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .price strong { font-size: 25px; }
 .item-card h3 { font-size: 13px; }
 .item-card p { font-size: 10px; }
 .flow-grid { grid-template-columns: 1fr; }
 .flow-card:not(:last-child):after { display: none; }
 .step-number { flex-basis: 63px; font-size: 19px; }
 .step-content h3 { font-size: 18px; }
 .step-content p { font-size: 14px; }
 .faq-list summary { font-size: 13px; gap: 8px; padding-left: 10px; }
 .faq-answer { font-size: 13px; gap: 12px; padding-left: 18px; }
 .q-mark { font-size: 23px; padding-inline: 6px; }
 .contact-copy { padding-left: 6%; }
 .contact-copy h2 { font-size: 29px; }
 .contact-copy p { font-size: 13px; }
 .sitemap-list { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
 .header-inner .brand { max-width: 68%; }
 .header-inner { gap: 8px; padding-inline: 10px; }
 .js .menu-toggle { padding: 7px 5px; font-size: 10px; }
 .hero-eyebrow { font-size: 27px; }
 .hero h1 { font-size: 72px; }
 .hero-catch { font-size: 19px; }
 .section-heading h2 { font-size: 23px; }
 .section-heading .crown { width: 30px; height: 29px; }
 .condition-card strong { font-size: 11px; }
 .contact-copy h2 { font-size: 26px; }
 .contact-phone { font-size: 23px; }
 .method-body > p { font-size: 14px; }
 .method-badge { width: 82px; height: 82px; font-size: 18px; }
 .method-badge .estimate { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *:before, *:after { transition: none !important; }
}
/* Stack the hero on phones so the supplied seal never obscures live text. */
@media (max-width: 760px) {
 .hero { display: flex; flex-direction: column; }
 .hero-content { display: contents; }
 .hero-eyebrow { order: 0; }
 .hero h1 { order: 1; line-height: 1.15; }
 .hero-art { position: relative; order: 2; width: 100%; height: 330px; top: auto; right: auto; opacity: 1; object-fit: contain; object-position: center; z-index: 0; margin-top: -12px; }
 .hero-message { top: 182px; right: 18px; z-index: 1; font-size: 16px; }
 .hero-catch { order: 3; text-align: center; white-space: normal; margin-top: 14px; }
 .hero-description { order: 4; max-width: none; text-align: center; margin: 10px 0 15px; font-size: 13px; }
 .hero .benefits { order: 5; width: 100%; max-width: none; margin-top: 0; }
 .hero > .cta-buttons { order: 6; }
}
@media (max-width: 440px) {
 .hero-art { height: 290px; }
 .hero-message { top: 160px; font-size: 13px; }
 .hero-description { font-size: 11px; }
}
/* Supplied artwork: main wordmark and section crowns. */
.hero h1.hero-logo { width: 100%; margin: 0 0 12px; padding: 0; font-size: inherit; line-height: 1; letter-spacing: normal; background: none; filter: none; }
.hero-logo img { width: 100%; height: auto; }
.section-heading .crown, .detail-page .crown { mix-blend-mode: normal; }
.hero { background-image: linear-gradient(100deg,#0000,#0003),var(--texture); }
.hero:after { background: radial-gradient(ellipse at 25% 50%,#0003,transparent 65%); }
.hero:before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 55px 2px at 5% 8%,#fff7d5,transparent),radial-gradient(ellipse 2px 50px at 5% 8%,#fff7d5,transparent),radial-gradient(circle 24px at 5% 8%,#ffe281b3,transparent),radial-gradient(ellipse 50px 2px at 46% 15%,#fff8d4,transparent),radial-gradient(ellipse 2px 48px at 46% 15%,#fff8d4,transparent),radial-gradient(circle 28px at 46% 15%,#ffc8429c,transparent),radial-gradient(ellipse 45px 2px at 22% 89%,#fff2b5,transparent),radial-gradient(ellipse 2px 45px at 22% 89%,#fff2b5,transparent),radial-gradient(circle 25px at 22% 89%,#ffc64299,transparent); }
@media (min-width: 761px) { .hero-content { width: 47%; } .hero-logo img { mix-blend-mode: lighten; } }
@media (max-width: 760px) { .hero h1.hero-logo { order: 0; width: min(100%,540px); align-self: center; margin-bottom: 16px; } .hero-logo img { mix-blend-mode: lighten; } .hero-message { top: clamp(195px,43vw,275px); } }
@media (max-width: 440px) { .hero-message { top: 195px; } }

/* FAQ: static Q/A on desktop; native, initially closed disclosures on mobile. */
.faq-mobile { display: none; }
.faq-static-item + .faq-static-item { border-top: 1px solid #bcbcbc; }
.faq-static-item:nth-child(even) { background: #f0f0f0; }
.faq-question { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 18px; font-size: 16px; font-weight: 700; }
.faq-list .faq-answer { position: static; min-height: 0; padding: 0 20px 18px 26px; display: flex; align-items: flex-start; gap: 16px; font-size: 15px; pointer-events: auto; }
.faq-answer strong { flex-shrink: 0; }
.faq-mobile summary { padding: 12px 45px 12px 14px; font-size: 14px; }
.faq-mobile .faq-chevron { transform: rotate(45deg); }
.faq-mobile details[open] .faq-chevron { transform: rotate(-135deg); }
@media (max-width: 760px) {
 .faq-desktop { display: none; }
 .faq-mobile { display: block; }
 .faq-list .faq-answer { padding: 0 16px 16px 21px; font-size: 14px; gap: 14px; }
}
@media (max-width: 440px) {
 .faq-mobile summary { font-size: 13px; gap: 8px; padding-left: 10px; }
 .faq-list .faq-answer { padding-left: 18px; font-size: 13px; }
}