:root {
  color-scheme: light;
  --ink: #172321;
  --paper: #f3f4f0;
  --white: #fbfcf9;
  --green: #d47751;
  --green-deep: #245348;
  --ocean: #66878a;
  --ocean-deep: #315b60;
  --coral: #d47751;
  --muted: #596462;
  --line: #d4dad4;
  --line-dark: #3b4a48;
  --max: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
  --font-jp: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}


@view-transition {
  navigation: auto;
}


::view-transition-group(root) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(.22, .8, .25, 1);
}


::view-transition-old(root) {
  animation: reframe-page-out 180ms ease both;
}


::view-transition-new(root) {
  animation: reframe-page-in 400ms cubic-bezier(.22, .8, .25, 1) both;
}


@keyframes reframe-page-out {
  to { opacity: 0; transform: translateY(-4px); }
}


@keyframes reframe-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-jp); font-size: 1rem; line-height: 1.75; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--ocean-deep); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
::selection { background: var(--green); color: var(--ink); }


.skip-link { position: fixed; z-index: 100; left: 1rem; top: .75rem; padding: .7rem 1rem; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.scroll-progress { position: fixed; z-index: 100; inset: 0 auto auto 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left center; background: var(--coral); pointer-events: none; }
@keyframes reframe-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.site-header { position: relative; z-index: 20; border-bottom: 1px solid rgba(16,22,25,.12); background: rgba(246,247,243,.96); }
.header-inner { width: min(100%, var(--max)); min-height: 5.5rem; margin-inline: auto; padding: .7rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.wordmark-logo { display: block; width: 13.25rem; height: auto; }
.primary-nav { display: flex; align-items: center; gap: clamp(.8rem,1.7vw,1.5rem); }
.primary-nav a { color: #344144; font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--green-deep); }
.primary-nav .nav-contact { border: 1px solid var(--ink); padding: .6rem .9rem; color: var(--ink); }
.primary-nav .nav-contact:hover, .primary-nav .nav-contact[aria-current="page"] { background: var(--ink); color: white; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { display: flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer; border: 1px solid var(--ink); padding: .55rem .7rem; font-size: .8rem; font-weight: 700; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font-size: 1rem; }
.mobile-nav[open] summary::after { content: "−"; }
.mobile-nav-panel { position: absolute; right: 0; top: calc(100% + .6rem); display: grid; min-width: min(18rem, calc(100vw - 2rem)); padding: .55rem; border: 1px solid var(--line); background: var(--white); box-shadow: 0 14px 35px rgba(16,22,25,.12); }
.mobile-nav-panel a { padding: .7rem .75rem; text-decoration: none; font-size: .95rem; }
.mobile-nav-panel a + a { border-top: 1px solid #edf0ed; }
.mobile-nav-panel a:hover { background: #e8f4ee; }
.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--gutter); }
.hero { display: grid; grid-template-columns: minmax(0,.88fr) minmax(20rem,1.12fr); align-items: center; gap: clamp(2rem,5vw,5rem); min-height: min(46rem, calc(100svh - 5.5rem)); padding-block: clamp(3.5rem,7vw,6.5rem); }
.eyebrow, .section-index { margin: 0 0 1.2rem; color: var(--green-deep); font-size: .74rem; font-weight: 800; letter-spacing: .13em; line-height: 1.5; }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: #36524a; }
.eyebrow-mark { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(41,194,138,.16); }
.eyebrow-divider { color: var(--ocean-deep); }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { line-height: 1.16; }
.hero h1 { max-width: 10ch; margin-bottom: 1.4rem; font-size: clamp(2.75rem,5.3vw,5.15rem); font-weight: 780; letter-spacing: -.065em; }
.hero h1 .hero-h1-highlight { position: relative; z-index: 0; white-space: nowrap; }
.hero h1 .hero-h1-highlight::after { position: absolute; z-index: -1; right: -.08em; bottom: .02em; left: -.04em; height: .36em; background: var(--green); content: ""; }
.hero-lede { max-width: 34rem; margin-bottom: .75rem; font-size: clamp(1.12rem,1.6vw,1.35rem); font-weight: 650; line-height: 1.65; }
.hero-note { max-width: 34rem; margin-bottom: 1.7rem; color: var(--muted); font-size: .97rem; }
.quick-url { max-width: 42rem; }
.quick-url label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .65rem; margin-bottom: .5rem; font-size: .88rem; font-weight: 750; }
.quick-url label span, label > span { color: var(--muted); font-size: .8rem; font-weight: 500; }
.quick-url-control { display: flex; gap: .55rem; align-items: stretch; }
.quick-url-control input { min-width: 8rem; flex: 1; min-height: 3.35rem; border: 1px solid #aebbb5; border-radius: 0; padding: .65rem .9rem; background: var(--white); color: var(--ink); }
.quick-url-control input::placeholder { color: #6e7a7b; }
.form-help { margin: .55rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.form-error { margin: .45rem 0 0; color: #a33b22; font-size: .88rem; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .8rem; min-height: 3.15rem; border: 1px solid transparent; border-radius: 0; padding: .75rem 1.15rem; font-size: .91rem; font-weight: 750; line-height: 1.35; text-align: center; text-decoration: none; transition: background-color .18s ease, color .18s ease, transform .18s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--coral); color: var(--ink); }
.button-primary:hover { background: #f29a72; }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: var(--green); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--green-deep); }
.hero-visual { position: relative; align-self: center; display: flex; width: 100%; aspect-ratio: 1.38; min-height: 25rem; margin: 1rem 0 0; background: #dbe2dc; overflow: hidden; }
.hero-visual::before { position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(16,22,25,.1); pointer-events: none; content: ""; }
.hero-visual img { width: 100%; height: 100%; min-height: 25rem; object-fit: cover; object-position: 54% center; }
.hero-visual figcaption { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; left: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .75rem .9rem; background: rgba(246,247,243,.94); color: #293438; font-size: .76rem; }
.hero-visual figcaption span:first-child { color: var(--green-deep); font-weight: 800; letter-spacing: .09em; }
.visual-index { position: absolute; z-index: 2; top: .6rem; right: .8rem; color: rgba(16,22,25,.45); font-size: clamp(3rem,8vw,6rem); font-weight: 800; line-height: 1; }
.section { padding-block: clamp(4.5rem,9vw,8rem); }
.section-paper { background: var(--white); }
.split-intro { display: grid; grid-template-columns: minmax(10rem,.6fr) minmax(0,1.4fr); gap: clamp(2rem,8vw,9rem); }
.split-intro .section-index { margin-top: .35rem; }
.split-intro h2, .section-heading-row h2, .demo-section h2, .faq-section h2 { margin-bottom: 1.25rem; font-size: clamp(2rem,4.2vw,3.65rem); font-weight: 730; letter-spacing: -.05em; }
.large-copy { max-width: 47rem; margin-bottom: 1.1rem; font-size: clamp(1.15rem,2vw,1.5rem); font-weight: 620; line-height: 1.65; }
.split-intro div > p:not(.large-copy) { max-width: 48rem; color: #465356; }
.text-link { display: inline-flex; align-items: center; gap: .8rem; margin-top: .9rem; padding-bottom: .25rem; border-bottom: 1px solid var(--ink); color: var(--ink); font-size: .93rem; font-weight: 750; text-decoration: none; }
.text-link span { color: var(--green-deep); transition: transform .18s ease; }
.text-link:hover span { transform: translateX(.25rem); }
.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.6rem; }
.section-heading-row h2 { margin-bottom: 0; }
.section-side-copy { max-width: 19rem; margin-bottom: .2rem; color: var(--muted); font-size: .94rem; }
.principle-list { border-top: 1px solid var(--line); }
.principle-row { display: grid; grid-template-columns: 5rem minmax(0,1fr) 3rem; gap: clamp(1rem,3vw,2.5rem); align-items: start; padding: 1.8rem 0 1.95rem; border-bottom: 1px solid var(--line); }
.principle-number { color: var(--ocean-deep); font-size: .83rem; font-weight: 800; letter-spacing: .08em; }
.principle-row h3 { margin-bottom: .5rem; font-size: 1.45rem; }
.principle-row p { max-width: 50rem; margin-bottom: 0; color: #4e5a5d; }
.principle-symbol { color: var(--green-deep); font-size: 1.8rem; line-height: 1; text-align: right; }
.demo-section { background: #eaf0eb; }
.before-after { display: grid; grid-template-columns: minmax(0,1fr) 4rem minmax(0,1.12fr); align-items: center; gap: 1rem; }
.demo-window { min-width: 0; }
.demo-window-top { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem .8rem; background: var(--ink); color: white; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.demo-dots { color: #bbc3be; letter-spacing: .15em; }
.old-site-preview { min-height: 17rem; padding: 1.25rem; background: #e4e1da; border: 1px solid #c5c1b8; color: #525554; }
.old-site-banner { margin-bottom: 1rem; padding: .45rem .55rem; border: 1px solid #aaa69e; font-size: .75rem; }
.old-site-title { padding-bottom: .6rem; border-bottom: 3px solid #aaa69e; font-family: Georgia,serif; font-size: 1.35rem; font-weight: 700; }
.old-site-columns { display: flex; gap: .45rem; margin: .8rem 0; }
.old-site-columns span { height: 2.3rem; flex: 1; background: #bab8b0; }
.old-site-lines { display: grid; gap: .5rem; }
.old-site-lines i { display: block; height: .4rem; background: #c2c0b9; }
.old-site-lines i:nth-child(2) { width: 83%; }
.old-site-lines i:nth-child(3) { width: 67%; }
.old-site-foot { margin-top: 1rem; color: #5d6564; font-size: .68rem; }
.demo-transition { display: grid; justify-items: center; gap: .2rem; color: var(--green-deep); font-size: .75rem; font-weight: 800; }
.demo-transition b { font-size: 2rem; font-weight: 500; }
.new-site-preview { min-height: 17rem; padding: .8rem; background: white; border: 1px solid #d5dfd9; box-shadow: 0 16px 32px rgba(16,22,25,.09); }
.new-site-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem .6rem; border-bottom: 1px solid #e2e9e4; font-size: .68rem; }
.new-site-nav span { color: #5c6969; font-size: .61rem; }
.new-site-main { position: relative; display: grid; align-content: center; gap: .55rem; min-height: 9.2rem; margin-top: .55rem; padding: 1rem; background: linear-gradient(115deg,#173e4d,#287fa8 60%,#29c28a); color: white; }
.new-site-main small { font-size: .61rem; }
.new-site-main strong { font-size: clamp(1rem,2vw,1.5rem); line-height: 1.35; }
.new-site-cta { justify-self: start; padding: .3rem .45rem; background: var(--coral); color: var(--ink); font-size: .61rem; font-weight: 700; }
.new-site-cta b { margin-left: .4rem; }
.new-site-items { display: flex; justify-content: space-between; gap: .3rem; padding-top: .6rem; color: #445155; font-size: .62rem; }
.demo-caption { margin: .9rem 0 0; color: #394548; font-size: .87rem; font-weight: 650; }
.demo-disclaimer { margin: 1.2rem 0 0; color: #4e5a5d; font-size: .8rem; }
.center-link { text-align: center; }
.service-list { border-top: 1px solid var(--line); }
.service-row { position: relative; display: grid; grid-template-columns: 3rem minmax(0,1fr) 2.5rem; gap: 1.4rem; align-items: center; margin-inline: -.8rem; padding: 1.6rem .8rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.service-row > span { color: var(--ocean-deep); font-size: .8rem; font-weight: 800; }
.service-row small { color: var(--green-deep); font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.service-row h3 { margin: .32rem 0; font-size: clamp(1.2rem,2.2vw,1.7rem); }
.service-row p { max-width: 44rem; margin: 0; color: var(--muted); font-size: .93rem; }
.service-row > b { color: var(--green-deep); font-size: 1.45rem; font-weight: 500; text-align: right; transition: transform .18s ease; }
.service-row:hover > b { transform: translate(3px,-3px); }
.ai-band { background: var(--ink); color: var(--paper); }
.ai-band .section-index { color: #76dcad; }
.ai-band-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,.85fr); gap: clamp(2rem,8vw,8rem); align-items: center; }
.ai-band h2 { margin-bottom: 1.2rem; font-size: clamp(2.3rem,4.9vw,4.5rem); letter-spacing: -.055em; }
.ai-band p:not(.section-index) { max-width: 38rem; color: #d4ded8; }
.ai-band .button { margin-top: .7rem; }
.ai-flow { padding: clamp(1.3rem,3vw,2.2rem); border: 1px solid #3a4b4d; background: #182124; }
.ai-flow > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: .15rem .75rem; align-items: baseline; }
.ai-flow > div > span { grid-row: span 2; color: #72d6a6; font-size: .75rem; font-weight: 800; }
.ai-flow > div > b { font-size: 1rem; }
.ai-flow > div > small { color: #b3c0b9; font-size: .82rem; }
.ai-flow > i { display: block; margin: .55rem 0 .55rem .6rem; color: var(--coral); font-size: 1.1rem; font-style: normal; }
.ai-flow > p { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid #3a4b4d; color: #bdcbc3; font-size: .83rem; }
.ai-flow-large { padding: clamp(1.25rem,3vw,2rem); }
.ai-flow-large > div > b { font-size: .96rem; }
.region-section { display: grid; grid-template-columns: minmax(10rem,.65fr) minmax(0,1.35fr); gap: clamp(2rem,8vw,8rem); align-items: center; }
.region-section h2 { margin-bottom: 1.15rem; font-size: clamp(2rem,4.2vw,3.6rem); letter-spacing: -.05em; }
.region-section p { max-width: 48rem; }
.region-section .muted { color: var(--muted); font-size: .92rem; }
.region-mark { position: relative; display: grid; grid-template-columns: repeat(2,minmax(3rem,7rem)); gap: .5rem; width: fit-content; margin: auto; transform: rotate(-8deg); }
.region-mark span { display: grid; place-items: center; width: clamp(4.5rem,10vw,7rem); aspect-ratio: 1; border: 1px solid var(--ink); font-size: clamp(2rem,5vw,3.8rem); font-weight: 700; }
.region-mark span:nth-child(2) { background: var(--green); }
.region-mark i { position: absolute; right: -1.5rem; bottom: -1.2rem; width: 2.4rem; height: 2.4rem; border: .4rem solid var(--coral); border-radius: 50%; }
.about-strip { background: #e5efea; }
.about-strip-inner { display: grid; grid-template-columns: minmax(10rem,.65fr) minmax(0,1.35fr); gap: clamp(2rem,8vw,8rem); align-items: center; }
.about-strip h2 { margin-bottom: 1rem; font-size: clamp(2rem,4.2vw,3.6rem); letter-spacing: -.05em; }
.about-strip p:not(.section-index) { max-width: 44rem; color: #3f4d4f; }
.about-portrait { position: relative; display: grid; place-items: center; width: min(100%,19rem); aspect-ratio: 1 / .9; margin-inline: auto; overflow: hidden; background: #d3e5dc; border: 1px solid #bdd0c6; }
.about-portrait::before, .about-portrait::after { position: absolute; width: 48%; aspect-ratio: 1; border: 1px solid rgba(16,22,25,.5); content: ""; transform: rotate(18deg); }
.about-portrait::after { width: 36%; border-color: var(--ocean-deep); transform: rotate(-19deg); }
.about-portrait span { position: relative; z-index: 1; color: var(--ink); font-size: clamp(4rem,9vw,7rem); font-weight: 650; line-height: 1; }
.about-portrait small { position: absolute; z-index: 1; bottom: 1rem; left: 1rem; color: #284139; font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.final-cta { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "index index" "title action" "copy action"; column-gap: clamp(2rem,6vw,6rem); row-gap: .8rem; align-items: end; padding-block: clamp(5rem,9vw,8rem); border-top: 1px solid var(--line); text-align: left; }
.final-cta .section-index { grid-area: index; margin-bottom: .25rem; }
.final-cta h2 { grid-area: title; max-width: 15ch; margin: 0; font-size: clamp(2.5rem,5vw,4.5rem); letter-spacing: -.055em; }
.final-cta > p:not(.section-index) { grid-area: copy; max-width: 48rem; margin: 0; color: var(--muted); }
.final-cta .button { grid-area: action; min-width: 12rem; align-self: end; justify-self: end; }
.site-footer { padding-top: 3.7rem; background: var(--ink); color: var(--paper); }
.footer-main { display: grid; grid-template-columns: minmax(12rem,.7fr) minmax(0,1.3fr); gap: 3rem; padding-bottom: 3rem; }
.footer-main .wordmark { align-self: start; }
.footer-main .wordmark-logo { width: 13.5rem; }
.wordmark-logo-inverse { filter: none; opacity: 1; }
.footer-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem 1.4rem; }
.footer-links a { color: #e4ece7; font-size: .88rem; text-decoration: none; }
.footer-links a:hover { color: #72d6a6; }
.footer-note { max-width: 48rem; margin: 0; padding-bottom: 1.5rem; color: #b9c5bf; font-size: .8rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-top: 1px solid #344145; color: #b9c5bf; font-size: .76rem; }
.page-hero { padding-block: clamp(4.5rem,9vw,8rem) clamp(3rem,6vw,5rem); }
.page-hero h1 { max-width: 15ch; margin-bottom: 1.2rem; font-size: clamp(2.8rem,5.7vw,5rem); font-weight: 750; letter-spacing: -.06em; }
.page-hero h1 em { font-style: normal; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: .12em; text-underline-offset: .12em; }
.page-lede { max-width: 47rem; margin-bottom: 1.55rem; color: #465356; font-size: clamp(1.1rem,1.8vw,1.35rem); font-weight: 560; line-height: 1.75; }
.process-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 3rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.process-list li > span { color: var(--ocean-deep); font-size: .8rem; font-weight: 800; }
.process-list h3 { margin-bottom: .45rem; font-size: 1.2rem; }
.process-list p { margin: 0; color: var(--muted); font-size: .93rem; }
.review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 2rem; margin-top: 2rem; border-top: 1px solid var(--line); }
.review-grid article { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.review-grid b { display: block; margin-bottom: .45rem; font-size: 1.12rem; }
.review-grid p { margin: 0; color: var(--muted); }
.faq-section { max-width: 940px; }
.faq-section h2 { margin-bottom: 2rem; }
.faq-section details { border-top: 1px solid var(--line); }
.faq-section details:last-child { border-bottom: 1px solid var(--line); }
.faq-section summary { position: relative; padding: 1.1rem 2.5rem 1.1rem 0; cursor: pointer; font-weight: 700; list-style: none; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary::after { position: absolute; right: .15rem; content: "+"; color: var(--green-deep); font-size: 1.25rem; }
.faq-section details[open] summary::after { content: "−"; }
.faq-section details p { max-width: 53rem; padding: 0 2rem 1rem 0; color: var(--muted); }
.foundation-list { border-top: 1px solid var(--line); }
.foundation-list article { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.foundation-list article > span { color: var(--ocean-deep); font-size: .8rem; font-weight: 800; }
.foundation-list h3 { margin-bottom: .4rem; font-size: 1.2rem; }
.foundation-list p { max-width: 47rem; margin: 0; color: var(--muted); }
.text-panel { padding: clamp(1.4rem,3vw,2.25rem); border: 1px solid #48575a; }
.text-panel .panel-kicker { color: #72d6a6; font-size: .74rem; font-weight: 800; letter-spacing: .1em; }
.text-panel h3 { margin-bottom: .7rem; font-size: 1.55rem; }
.prompt-examples { display: grid; gap: .5rem; margin-top: 1.7rem; }
.prompt-examples p { display: grid; gap: .15rem; margin: 0; padding: .65rem .75rem; border-left: 2px solid #72d6a6; background: #1a2629; }
.prompt-examples span { color: #b5c4bc; font-size: .74rem; }
.prompt-examples b { color: white; font-size: .88rem; font-weight: 620; }
.template-list { margin-top: 2.2rem; border-top: 1px solid var(--line); }
.template-list article { display: grid; grid-template-columns: 3rem minmax(0,1fr) auto; gap: 1.25rem; align-items: center; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.template-number { align-self: start; color: var(--ocean-deep); font-size: .8rem; font-weight: 800; }
.template-list small { color: var(--green-deep); font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.template-list h3 { margin: .25rem 0 .35rem; font-size: 1.22rem; }
.template-list p { max-width: 38rem; margin: 0; color: var(--muted); font-size: .92rem; }
.template-list article > b { padding: .35rem .6rem; border: 1px solid #a4bdb0; color: #245c42; font-size: .76rem; white-space: nowrap; }
.demo-case-label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: 1.5rem; color: var(--green-deep); font-size: .77rem; font-weight: 800; }
.demo-case-label span { padding: .25rem .45rem; border: 1px solid var(--green-deep); letter-spacing: .08em; }
.demo-case-label b { color: var(--muted); font-weight: 600; }
.case-lede { max-width: 45rem; color: var(--muted); }
.case-story { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 2rem; margin-top: 2rem; border-top: 1px solid var(--line); }
.case-story article { padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.case-story article:last-child { grid-column: 1 / -1; }
.case-story span { color: var(--green-deep); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.case-story h3 { margin: .4rem 0; font-size: 1.16rem; }
.case-story p { margin-bottom: 0; color: #4e5a5d; }
.about-profile { display: grid; grid-template-columns: minmax(12rem,.65fr) minmax(0,1.35fr); gap: clamp(2rem,7vw,7rem); align-items: center; }
.about-profile h2 { margin-bottom: .5rem; font-size: clamp(2rem,4vw,3.3rem); }
.about-profile .large-copy { color: #3f4d4f; }
.about-profile p:not(.section-index) { max-width: 46rem; }
.about-portrait-large { width: min(100%,22rem); }
.contact-layout { display: grid; grid-template-columns: minmax(12rem,.72fr) minmax(0,1.28fr); gap: clamp(2rem,7vw,7rem); align-items: start; }
.contact-intro h2 { margin-bottom: .9rem; font-size: clamp(2rem,4vw,3.2rem); letter-spacing: -.05em; }
.contact-intro > p:not(.section-index) { color: var(--muted); }


/* Human-centered refinement: warmth is expressed through clarity, restraint and intentional next steps. */
.care-section { background: #152522; color: var(--paper); }
.care-shell { display: grid; grid-template-columns: minmax(15rem,.72fr) minmax(0,1.28fr); gap: clamp(2.5rem,8vw,8rem); align-items: start; }
.care-intro { position: sticky; top: 7rem; }
.care-intro .section-index { color: #d7a083; }
.care-intro h2 { max-width: 8ch; margin-bottom: 1.25rem; font-size: clamp(2.6rem,5.1vw,4.8rem); letter-spacing: -.065em; }
.care-intro > p:not(.section-index) { max-width: 26rem; margin: 0; color: #c7d1cc; }
.care-principles { border-top: 1px solid #40504c; }
.care-principles article { display: grid; grid-template-columns: 7.25rem minmax(0,1fr); column-gap: 1.5rem; padding: 1.8rem 0 2rem; border-bottom: 1px solid #40504c; }
.care-principles span { grid-row: 1 / span 2; color: #d7a083; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.care-principles h3 { margin: 0 0 .55rem; font-size: clamp(1.35rem,2.1vw,1.85rem); color: white; }
.care-principles p { max-width: 42rem; margin: 0; color: #c7d1cc; }


.contact-presence { background: var(--white); }
.contact-presence-shell { display: grid; grid-template-columns: minmax(17rem,.68fr) minmax(0,1.32fr); gap: clamp(2.5rem,7vw,7rem); align-items: start; }
.contact-presence-intro { position: sticky; top: 7rem; align-self: start; }
.contact-presence-intro h2 { max-width: 9ch; margin-bottom: 1.15rem; font-size: clamp(2.45rem,4.6vw,4.3rem); letter-spacing: -.06em; }
.contact-presence-lede { max-width: 28rem; margin-bottom: 1.4rem; color: #465356; font-size: 1.03rem; }
.contact-appointment { display: grid; grid-template-columns: .75rem minmax(0,1fr); gap: .7rem; max-width: 27rem; margin: 0; padding-top: 1.15rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.contact-appointment > span { width: .58rem; height: .58rem; margin-top: .45rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 .25rem rgba(212,119,81,.12); }
.contact-presence-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); }
.contact-channel { min-width: 0; padding: clamp(1.3rem,2.4vw,2rem); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.contact-channel:nth-child(odd):not(.contact-channel-wide) { border-right: 1px solid var(--line); }
.contact-channel-index { display: block; margin-bottom: 1rem; color: var(--ocean-deep); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.contact-channel strong { display: block; overflow-wrap: anywhere; margin-bottom: .55rem; font-size: clamp(1.45rem,2.6vw,2.35rem); font-weight: 720; letter-spacing: -.04em; line-height: 1.18; }
.contact-channel h3 { margin: 0; font-size: clamp(1.4rem,2.2vw,1.9rem); }
.contact-channel p { margin: 0; color: var(--muted); }
.contact-channel-action { position: relative; min-height: 15rem; display: flex; flex-direction: column; }
.contact-channel-action b { display: inline-flex; align-items: center; gap: .55rem; margin-top: auto; padding-top: 1.5rem; color: var(--green-deep); font-size: .84rem; font-weight: 800; }
.contact-channel-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(10rem,.55fr) minmax(0,1fr) auto; gap: 1.5rem 2rem; align-items: end; }
.contact-channel-wide address { display: grid; gap: .15rem; margin: 0; color: #465356; font-style: normal; }
.contact-channel-wide address span:first-child { color: var(--muted); font-size: .85rem; }
.contact-map-link { align-self: end; padding-bottom: .18rem; border-bottom: 1px solid currentColor; color: var(--green-deep); font-size: .85rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.contact-channel-hours { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(11rem,.55fr) minmax(0,1fr); gap: 1.5rem 2rem; align-items: start; }
.contact-channel-hours > p { grid-column: 2; font-size: .85rem; }
.contact-hours { margin: 0; }
.contact-hours > div { display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: 1rem; padding: .35rem 0; border-bottom: 1px solid rgba(212,218,212,.75); }
.contact-hours > div:last-child { border-bottom: 0; }
.contact-hours dt { color: var(--muted); font-size: .85rem; }
.contact-hours dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }


@media (hover:hover) {
  a.service-row:hover, button.service-row:hover { background: rgba(255,255,255,.58); }
  .contact-channel-action:hover { background: #f1f3ef; }
  .contact-channel-action:hover b span, .contact-map-link:hover span { transform: translate(2px,-2px); }
}
.contact-channel-action b span, .contact-map-link span { display: inline-block; transition: transform .18s ease; }


@container (max-width: 700px) {
  .contact-channel-wide, .contact-channel-hours { grid-template-columns: 1fr; }
  .contact-channel-wide .contact-map-link, .contact-channel-hours > p { grid-column: 1; }
  .contact-channel-wide .contact-map-link { justify-self: start; }
}


.legal-copy { max-width: 880px; }
.legal-copy h2 { margin: 2.6rem 0 .8rem; font-size: 1.45rem; }
.legal-copy p, .legal-copy li { color: #465356; }
.legal-copy ul { padding-left: 1.35rem; }
.legal-copy li + li { margin-top: .45rem; }
.legal-date { margin-top: 2.8rem; font-size: .88rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.2rem; }
.hero-actions .text-link { margin-top: 0; }
.editorial-section { display: grid; grid-template-columns: minmax(15rem,.76fr) minmax(0,1.24fr); align-items: center; gap: clamp(2rem,8vw,8rem); }
.editorial-photo { width: min(100%,25rem); margin: 0 auto; }
.editorial-photo img { width: 100%; max-height: 39rem; object-fit: cover; aspect-ratio: 4 / 5; }
.editorial-photo figcaption { margin-top: .75rem; color: var(--muted); font-size: .84rem; }
.editorial-copy h2 { max-width: 12ch; margin-bottom: 1.1rem; font-size: clamp(2.1rem,4.2vw,3.8rem); letter-spacing: -.055em; }
.editorial-copy p:not(.section-index) { max-width: 42rem; }
.guide-list { border-top: 1px solid var(--line); }
.guide-list article { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.guide-list article > span { color: var(--ocean-deep); font-size: .82rem; font-weight: 800; }
.guide-list h3 { margin: 0 0 .45rem; font-size: 1.2rem; }
.guide-list p { margin: 0; color: var(--muted); }
.service-row { border-bottom-color: var(--line); }
.service-row > b { color: var(--green-deep); }
.demo-section { background: #e9ece7; }
.ai-band { background: #1a302c; }
.final-cta { max-width: 1040px; }
.pricing-intro { max-width: 46rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-top: 2.6rem; }
.pricing-card { display: flex; flex-direction: column; padding: clamp(1.25rem,2.4vw,2rem); border: 1px solid var(--line); background: var(--white); }
.pricing-card-featured { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pricing-label { margin: 0 0 .65rem; color: var(--green-deep); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.pricing-card-featured .pricing-label { color: #d49a7e; }
.pricing-card h3, .pricing-support-card h3 { margin: 0; font-size: 1.25rem; }
.pricing-description { min-height: 4.7em; margin: .65rem 0 0; color: var(--muted); }
.pricing-card-featured .pricing-description { color: #d4ded9; }
.price-amount { margin: 1rem 0 0; font-size: clamp(2rem,3vw,2.8rem); font-weight: 750; letter-spacing: -.055em; line-height: 1.25; }
.price-amount span { margin-left: .15rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.price-caption { margin: .15rem 0 .85rem; color: var(--muted); font-size: .8rem; }
.pricing-card-featured .price-caption { color: #d4ded9; }
.pricing-includes { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: .9rem; }
.pricing-card-featured .pricing-includes { color: #e7edea; }
.pricing-includes li + li { margin-top: .32rem; }
.pricing-support-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.pricing-support-card { padding: 1.5rem; border-top: 1px solid var(--line); }
.support-price { margin: .85rem 0 .55rem; font-size: 1.75rem; font-weight: 750; letter-spacing: -.035em; }
.support-price small { font-size: .82rem; font-weight: 550; letter-spacing: 0; }
.pricing-support-card > p:last-child { color: var(--muted); }
.pricing-details { display: grid; grid-template-columns: minmax(14rem,.8fr) minmax(0,1.2fr); gap: 3rem; }
.pricing-options { margin: 0 0 1.35rem; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.pricing-options li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.pricing-options strong { text-align: right; font-weight: 700; }
.pricing-details > div:last-child > p { color: var(--muted); }
.scripture-inner { display: grid; grid-template-columns: minmax(14rem,.75fr) minmax(0,1.25fr); gap: 3rem; align-items: start; }
.scripture-copy { max-width: 47rem; }
.scripture-copy p { margin: 0; }
.scripture-copy p + p { margin-top: 1rem; }
.scripture-reference { margin-bottom: 1rem !important; color: var(--green-deep); font-size: .92rem; font-weight: 650; }








/* Project team */
.team-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.team-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.team-avatar { width: 100%; aspect-ratio: 1; object-fit: cover; background: #efe8df; border-bottom: 1px solid var(--line); }
.team-card-meta { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .8rem; align-items: start; padding: 1rem 1.1rem 1.15rem; }
.team-card-meta > span { align-self: start; color: var(--ocean-deep); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.team-member-label { margin: 0 0 .2rem; color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .12em; }
.team-card h3 { margin: 0; font-size: clamp(1.55rem,2.5vw,2.25rem); letter-spacing: -.045em; }
.team-member-role { margin: .55rem 0 .35rem; color: var(--green-deep); font-size: .7rem; font-weight: 800; letter-spacing: .08em; line-height: 1.45; }
.team-member-note { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.about-values-band { border-top: 1px solid #3a4b4d; }


/* Contact topic shortcuts */
.contact-topic-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.contact-topic-row:hover { background: rgba(255,255,255,.4); }
.contact-topic-row:focus-visible { outline: 3px solid var(--ocean-deep); outline-offset: 3px; }
.contact-topic-row:hover > b, .contact-topic-row:focus-visible > b { transform: translate(3px,-3px); }




/* Contact form */
.contact-form-section { background: #e9ece7; }
.contact-form-layout { display: grid; grid-template-columns: minmax(14rem,.7fr) minmax(0,1.3fr); gap: clamp(2rem,7vw,7rem); align-items: start; }
.contact-form-intro { position: sticky; top: 2rem; }
.contact-form-intro h2 { margin-bottom: 1rem; font-size: clamp(2rem,4.2vw,3.6rem); letter-spacing: -.05em; }
.contact-form-intro > p:not(.section-index) { max-width: 34rem; color: #465356; }
.contact-mail-fallback { margin-top: 1.4rem; font-size: .86rem; }
.contact-mail-fallback a { font-weight: 700; }
.contact-form-card { padding: clamp(1.25rem,3vw,2.4rem); border: 1px solid var(--line); background: var(--white); box-shadow: 0 22px 50px rgba(23,35,33,.07); }
.contact-form fieldset { min-width: 0; margin: 0 0 1.9rem; padding: 0; border: 0; }
.contact-form legend { margin-bottom: .35rem; padding: 0; font-size: 1.2rem; font-weight: 750; }
.contact-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-top: 1rem; }
.contact-choice { position: relative; display: block; cursor: pointer; }
.contact-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact-choice span { display: grid; gap: .18rem; min-height: 5.4rem; padding: .95rem 1rem; border: 1px solid #bcc6c0; background: #fff; transition: border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.contact-choice b { font-size: .94rem; line-height: 1.45; }
.contact-choice small { color: var(--muted); font-size: .74rem; }
.contact-choice:hover span { transform: translateY(-1px); border-color: var(--ocean-deep); }
.contact-choice input:focus-visible + span { outline: 3px solid var(--ocean-deep); outline-offset: 3px; }
.contact-choice input:checked + span { border-color: var(--ink); background: #edf2ed; box-shadow: inset 4px 0 0 var(--coral); }
.contact-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.contact-field { display: grid; gap: .45rem; margin-bottom: 1rem; }
.contact-field > span { color: #33413f; font-size: .86rem; font-weight: 700; }
.contact-field > span b { margin-left: .3rem; color: #8d351f; font-size: .68rem; }
.contact-field > span small { margin-left: .3rem; color: var(--muted); font-size: .72rem; font-weight: 500; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; min-height: 3.3rem; border: 1px solid #aebbb5; border-radius: 0; padding: .72rem .85rem; background: #fff; color: var(--ink); }
.contact-field textarea { min-height: 10rem; resize: vertical; line-height: 1.7; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: #75807e; }
.contact-consent { display: grid; grid-template-columns: 1.25rem minmax(0,1fr); gap: .7rem; align-items: start; margin: 1.1rem 0 1.4rem; color: #465356; font-size: .84rem; cursor: pointer; }
.contact-consent input { width: 1.1rem; height: 1.1rem; margin-top: .24rem; accent-color: var(--coral); }
.contact-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.contact-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.contact-form-actions .form-help { max-width: 24rem; margin: 0; }
.contact-form-status { min-height: 1.6rem; margin: .85rem 0 0; color: #36524a; font-size: .88rem; }
.contact-form-status.is-error { color: #a33b22; }
.contact-form button[disabled] { cursor: wait; opacity: .66; transform: none; }
.contact-success { padding-block: clamp(2rem,4vw,3.8rem); }
.contact-success-mark { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; margin-bottom: 1.2rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--coral); font-size: 1.35rem; font-weight: 800; }
.contact-success h3 { margin-bottom: .7rem; font-size: clamp(1.7rem,3vw,2.5rem); }
.contact-success p { max-width: 36rem; color: var(--muted); }


@keyframes reframe-stage-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


@keyframes reframe-media-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}


.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > .eyebrow,
.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > h1,
.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > .hero-lede,
.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > .hero-note,
.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > .hero-actions,
.site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero > .eyebrow,
.site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero > h1,
.site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero > .page-lede,
.site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero > .button {
  animation: reframe-stage-in 420ms cubic-bezier(.22, .8, .25, 1) both;
}


.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > h1,
.site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero > h1 { animation-delay: 60ms; }
.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > .hero-lede,
.site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero > .page-lede { animation-delay: 120ms; }
.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > .hero-note { animation-delay: 160ms; }
.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > .hero-actions,
.site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero > .button { animation-delay: 210ms; }
.site-page:not(.site-page-privacy):not(.site-page-terms) .hero-visual { animation: reframe-media-in 560ms cubic-bezier(.22, .8, .25, 1) both; animation-delay: 120ms; }


@supports (animation-timeline: view()) {
  .site-page:not(.site-page-privacy):not(.site-page-terms) .section:not(.hero),
  .site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero + .section,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .principle-row,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .service-row,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .process-list li,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .review-grid article,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .works-grid article,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .final-cta {
    animation-name: reframe-reveal;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 8% cover 28%;
  }


  .scroll-progress {
    animation: reframe-progress linear both;
    animation-timeline: scroll(root block);
  }
}


@keyframes reframe-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}


@supports (content-visibility: auto) {
  .site-page:not(.site-page-privacy):not(.site-page-terms) .works-grid,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .review-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}


.text-link:focus-visible span,
.service-row:focus-visible > b { transform: translate(3px, -3px); }


@media (max-width: 960px) {
  .primary-nav { gap: .85rem; }
  .primary-nav a { font-size: .8rem; }
  .header-inner { gap: .8rem; }
  .hero { min-height: auto; grid-template-columns: minmax(0,.9fr) minmax(17rem,1.1fr); gap: 2rem; }
  .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}


@media (max-width: 760px) {
  html { scroll-padding-top: 1rem; }
  .header-inner { min-height: 4.65rem; }
  .primary-nav { display: none; }
  .mobile-nav { display: block; }
  .hero { grid-template-columns: 1fr; padding-block: 3rem 4rem; gap: 2rem; }
  .hero h1 { max-width: none; font-size: clamp(1.7rem,9.5vw,3.3rem); text-wrap: balance; }
  .hero h1 .hero-h1-line { white-space: nowrap; }
  .hero-visual { width: calc(100% - .75rem); min-height: 0; margin: .4rem 0 0 auto; aspect-ratio: 1.2; }
  .hero-visual img { min-height: 0; }
  .split-intro, .region-section, .about-strip-inner, .about-profile, .contact-layout { grid-template-columns: 1fr; gap: 1.4rem; }
  .editorial-section { grid-template-columns: 1fr; gap: 2rem; }
  .editorial-photo { width: min(80%,24rem); margin-inline: 0; }
  .split-intro .section-index { margin-bottom: -.3rem; }
  .section-heading-row { display: block; }
  .section-side-copy { margin-top: 1rem; }
  .before-after { grid-template-columns: 1fr; gap: .8rem; }
  .demo-transition { grid-template-columns: auto auto; align-items: center; justify-content: center; gap: .6rem; }
  .demo-transition b { transform: rotate(90deg); }
  .ai-band-inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .pricing-grid, .pricing-support-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; gap: .85rem; }
  .team-card { display: grid; grid-template-columns: minmax(8.5rem,38%) minmax(0,1fr); align-items: stretch; }
  .team-avatar { height: 100%; min-height: 9.5rem; aspect-ratio: 1; border-right: 1px solid var(--line); border-bottom: 0; }
  .team-card-meta { align-content: center; padding: 1rem 1.1rem; }
  .pricing-card:last-child { grid-column: auto; }
  .scripture-inner, .pricing-details, .contact-form-layout { grid-template-columns: 1fr; gap: 1.4rem; }
  .contact-form-intro { position: static; }
  .contact-choice-grid, .contact-field-grid { grid-template-columns: 1fr; }
  .pricing-description { min-height: 0; }
  .region-mark { margin: .4rem auto 1rem; }
  .about-portrait { width: min(100%,16rem); margin-inline: 0; }
  .footer-main { grid-template-columns: 1fr; gap: 2rem; }
  .process-list { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .case-story { grid-template-columns: 1fr; }
  .case-story article:last-child { grid-column: auto; }


  /* Mobile WebView performance: avoid scroll-linked paint work in LINE and similar in-app browsers. */
  .scroll-progress { display: none; }
  .site-page:not(.site-page-privacy):not(.site-page-terms) .section:not(.hero),
  .site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero + .section,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .principle-row,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .service-row,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .process-list li,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .review-grid article,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .works-grid article,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .final-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .site-page:not(.site-page-privacy):not(.site-page-terms) .works-grid,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .review-grid { content-visibility: visible; }
}


@media (max-width: 480px) {
  /* The logo mark has a small built-in left inset; balance it at the other edge. */
  .header-inner { padding-right: calc(var(--gutter) + .4rem); }
  .wordmark-logo { width: clamp(9.25rem,46vw,10.75rem); }
  .eyebrow { flex-wrap: wrap; font-size: .67rem; }
  .principle-row { grid-template-columns: 2.4rem minmax(0,1fr); gap: .75rem; }
  .principle-symbol { display: none; }
  .service-row { grid-template-columns: 2rem minmax(0,1fr) 1.5rem; gap: .7rem; }
  .template-list article { grid-template-columns: 2rem minmax(0,1fr); gap: .75rem; }
  .template-list article > b { grid-column: 2; justify-self: start; }
  .footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-grid { grid-template-columns: 1fr; gap: .75rem; }
  .team-card { grid-template-columns: minmax(7.5rem,40%) minmax(0,1fr); }
  .team-avatar { min-height: 8.5rem; }
  .team-card-meta { grid-template-columns: 1.5rem minmax(0,1fr); gap: .55rem; padding: .8rem .85rem; }
  .team-card h3 { font-size: 1.45rem; }
  .team-member-role { margin-top: .4rem; font-size: .64rem; }
  .team-member-note { font-size: .76rem; line-height: 1.5; }
  .footer-bottom { flex-direction: column; }
  .new-site-items { font-size: .58rem; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .scroll-progress { transform: scaleX(1); animation: none !important; opacity: .58; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms !important; }
  .site-page:not(.site-page-privacy):not(.site-page-terms) .hero-copy > *,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .page-hero > *,
  .site-page:not(.site-page-privacy):not(.site-page-terms) .hero-visual { animation: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
}






/* RE:FRAME TEMPLATE EDITIONS — art-directed v2 */
.site-page-standalone { background:#fff; }
.tx-demo { min-height:38px; display:flex; align-items:center; gap:.8rem; padding:.45rem clamp(.9rem,2vw,1.4rem); background:#f4f0e8; color:#25332f; border-bottom:1px solid rgba(20,30,27,.12); font:600 .68rem/1.3 system-ui,sans-serif; letter-spacing:.02em; }
.tx-demo > span { padding:.2rem .45rem; border:1px solid currentColor; font-size:.58rem; font-weight:900; letter-spacing:.12em; }
.tx-demo p { margin:0; opacity:.72; }
.tx-demo a { margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; color:inherit; font-size:.62rem; font-weight:850; letter-spacing:.08em; text-decoration:none; }
.tx-demo a img { width:5rem; height:auto; }
.tx-demo-dark a img,.tx-demo-cafe a img,.tx-demo-social a img { filter:brightness(0) invert(1); }
.tx-demo-dark { background:#0c0e0e; color:#f4f2e8; border-color:#282c2b; }
.tx-demo-cafe { background:#241914; color:#fff8e7; border-color:#5c463a; }
.tx-demo-social { background:#111216; color:#f7f3ff; border-color:#272932; }
.tx-demo-personal { background:#eeece4; color:#171717; border-color:#d4d0c4; }


/* home / catalog */
.htx-gallery { padding:clamp(4.5rem,8vw,7rem) 0; overflow:hidden; background:#161b1a; color:#f4f5ef; }
.htx-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.6fr); gap:3rem; align-items:end; margin-bottom:2.4rem; }
.htx-head h2 { margin:0; max-width:10ch; font-size:clamp(2.5rem,5vw,5.2rem); line-height:.98; letter-spacing:-.065em; }
.htx-head > div:last-child { max-width:28rem; justify-self:end; }
.htx-head > div:last-child p { color:#bcc6c2; }
.htx-head .text-link { color:#fff; border-color:#65716c; }
.htx-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(22rem,38vw); gap:1rem; width:max-content; padding-inline:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))); overflow:visible; }
.htx-card { position:relative; display:grid; grid-template-rows:minmax(18rem,28vw) auto auto; min-height:32rem; padding-bottom:1rem; color:#f4f5ef; text-decoration:none; border-bottom:1px solid #4f5a56; }
.htx-card img { width:100%; height:100%; object-fit:cover; filter:saturate(.88); transition:transform .55s cubic-bezier(.18,.75,.18,1),filter .3s ease; }
.htx-card::before { position:absolute; inset:0 0 auto; height:min(28vw,24rem); border:1px solid #39423f; content:""; pointer-events:none; z-index:1; }
.htx-card:hover img { transform:scale(1.018); filter:saturate(1); }
.htx-card span { margin-top:1rem; color:#95a39d; font-size:.66rem; font-weight:850; letter-spacing:.13em; }
.htx-card b { margin-top:.35rem; font-size:clamp(1.15rem,1.6vw,1.5rem); font-weight:650; }
.tcx-hero { min-height:62vh; display:grid; align-content:end; }
.tcx-hero h1 { max-width:11ch; }
.tcx-hero-actions { display:flex; flex-wrap:wrap; gap:1rem 1.2rem; align-items:center; }
.tcx-manifesto { padding:clamp(3rem,6vw,6rem) 0; background:#18201e; color:#f6f5ef; }
.tcx-manifesto .wrap { display:grid; grid-template-columns:12rem 1fr; gap:clamp(2rem,6vw,7rem); align-items:start; }
.tcx-manifesto span { color:#8fa098; font-size:.67rem; font-weight:850; letter-spacing:.15em; }
.tcx-manifesto p { max-width:23ch; margin:0; font-size:clamp(1.8rem,3.8vw,4.2rem); line-height:1.05; letter-spacing:-.05em; }
.tcx-manifesto strong { color:#e28b67; font-weight:700; }
.tcx-editions { padding-block:clamp(5rem,9vw,9rem); }
.tcx-heading { display:grid; grid-template-columns:1fr 1.2fr .8fr; gap:2rem; align-items:end; padding-bottom:2.4rem; border-bottom:1px solid var(--line); }
.tcx-heading > p:first-child { align-self:start; color:var(--green-deep); font-size:.68rem; font-weight:850; letter-spacing:.13em; }
.tcx-heading h2 { margin:0; font-size:clamp(2.4rem,4.7vw,4.8rem); line-height:1; letter-spacing:-.06em; }
.tcx-heading > p:last-child { margin:0; color:var(--muted); font-size:.92rem; }
.tcx-list { display:grid; }
.tcx-item { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(2.6rem,5vw,5rem); border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.tcx-item:nth-child(even) figure { order:2; }
.tcx-item figure { position:relative; margin:0; aspect-ratio:3/2; overflow:hidden; background:#ddd; box-shadow:0 20px 55px rgba(20,30,27,.08); }
.tcx-item figure img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .55s cubic-bezier(.2,.75,.2,1); }
.tcx-item:hover figure img { transform:scale(1.02); }
.tcx-item figure span { position:absolute; top:1rem; left:1rem; display:grid; place-items:center; width:2.65rem; aspect-ratio:1; background:#fff; color:#111; font-size:.72rem; font-weight:900; }
.tcx-item > div > p { margin:0 0 .7rem; color:var(--green-deep); font-size:.66rem; font-weight:850; letter-spacing:.13em; }
.tcx-item h3 { margin:0 0 1rem; font-size:clamp(1.75rem,3.2vw,3rem); letter-spacing:-.055em; }
.tcx-item strong { display:block; margin-bottom:.8rem; font-size:1.08rem; line-height:1.65; }
.tcx-item small { display:block; margin-bottom:2rem; color:var(--muted); font-size:.9rem; line-height:1.7; }
.tcx-item > div > b { display:inline-block; padding-bottom:.2rem; border-bottom:1px solid currentColor; font-size:.74rem; letter-spacing:.09em; }
.tcx-compare { background:#eeeae1; }
.tcx-compare .wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(3rem,8vw,8rem); align-items:start; }
.tcx-compare h2 { max-width:12ch; margin:0; font-size:clamp(2.2rem,4.1vw,4rem); letter-spacing:-.055em; }
.tcx-rules { border-top:1px solid #bfc4be; }
.tcx-rules p { display:grid; grid-template-columns:3rem 1fr; gap:1rem; margin:0; padding:1.2rem 0; border-bottom:1px solid #bfc4be; }
.tcx-rules b { color:var(--ocean-deep); font-size:.72rem; }
.tcx-rules span { font-weight:650; }


/* CHURCH BASIC 01 — warm visitor-first editorial */
.site-page-church-template { background:#f3efe6; color:#17312c; }
.cbx-shell { --ink:#17312c; --forest:#123b32; --paper:#f3efe6; --cream:#fffaf1; --rust:#b65e3e; --line:#cfc8ba; min-height:100vh; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; line-height:1.75; }
.cbx-shell h1,.cbx-shell h2,.cbx-shell h3 { font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif; font-weight:600; text-wrap:balance; }
.cbx-shell a { color:inherit; }
.cbx-shell a:focus-visible { outline:3px solid #ce795a; outline-offset:4px; }
.cbx-header { position:sticky; z-index:40; top:0; min-height:78px; display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:.7rem clamp(1.1rem,4vw,4.5rem); border-bottom:1px solid rgba(23,49,44,.14); background:rgba(243,239,230,.94); backdrop-filter:blur(14px); }
.cbx-brand { display:flex; gap:.7rem; align-items:center; text-decoration:none; }
.cbx-brand i { position:relative; display:block; width:2.05rem; aspect-ratio:1; border:1px solid var(--ink); border-radius:50%; }
.cbx-brand i::before,.cbx-brand i::after { position:absolute; top:50%; left:50%; background:var(--rust); content:""; transform:translate(-50%,-50%); }
.cbx-brand i::before { width:1px; height:1.12rem; }
.cbx-brand i::after { width:.72rem; height:1px; }
.cbx-brand span { display:grid; line-height:1.05; }
.cbx-brand b { font-family:Georgia,serif; font-size:.88rem; letter-spacing:.06em; }
.cbx-brand small { margin-top:.25rem; color:#64736e; font-size:.55rem; font-weight:800; letter-spacing:.16em; }
.cbx-header nav { display:flex; justify-content:center; gap:clamp(.9rem,2vw,1.8rem); }
.cbx-header nav a,.cbx-ask { min-height:48px; display:inline-flex; align-items:center; font-size:.78rem; font-weight:750; text-decoration:none; }
.cbx-header nav a:hover { color:var(--rust); }
.cbx-ask { padding-inline:1rem; border:1px solid var(--ink); }
.cbx-hero { position:relative; min-height:calc(100svh - 116px); display:grid; align-items:end; overflow:hidden; background:#819d94; color:#fff; }
.cbx-hero > figure { position:absolute; inset:0; margin:0; }
.cbx-hero > figure img { width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.cbx-hero > figure figcaption { position:absolute; z-index:2; right:2rem; bottom:1.3rem; font-size:.58rem; font-weight:800; letter-spacing:.15em; opacity:.72; }
.cbx-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,38,32,.78) 0%,rgba(10,38,32,.42) 45%,rgba(10,38,32,.08) 72%),linear-gradient(0deg,rgba(10,32,28,.45),transparent 35%); }
.cbx-hero-copy { position:relative; z-index:3; width:min(100%,82rem); margin:0 auto; padding:clamp(5rem,10vw,9rem) clamp(1.2rem,5vw,5rem) clamp(4rem,8vw,7rem); }
.cbx-hero-copy > p { margin:0 0 1.2rem; color:#f3d4c6; font-size:.7rem; font-weight:900; letter-spacing:.16em; }
.cbx-hero-copy h1 { max-width:8.2ch; margin:0 0 1.2rem; font-size:clamp(3.1rem,7vw,7.1rem); line-height:.92; letter-spacing:-.065em; }
.cbx-hero-copy > span { display:block; max-width:33rem; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.9; }
.cbx-hero-copy > div { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.cbx-hero-copy a { min-height:52px; display:inline-flex; align-items:center; padding:.75rem 1.15rem; background:var(--cream); color:var(--ink); font-size:.82rem; font-weight:800; text-decoration:none; }
.cbx-hero-copy a + a { background:transparent; border:1px solid rgba(255,255,255,.65); color:#fff; }
.cbx-sunday-card { position:absolute; z-index:4; right:clamp(1.2rem,5vw,5rem); bottom:clamp(3rem,8vw,6.5rem); width:min(15rem,28vw); display:grid; padding:1.3rem; background:var(--cream); color:var(--ink); box-shadow:0 16px 55px rgba(0,0,0,.18); }
.cbx-sunday-card small { font-size:.58rem; font-weight:850; letter-spacing:.13em; }
.cbx-sunday-card strong { margin:.5rem 0; max-width:100%; font:400 clamp(3.1rem,6vw,5.8rem)/.9 Georgia,serif; font-variant-numeric:tabular-nums; letter-spacing:-.08em; white-space:nowrap; }
.cbx-sunday-card span { color:var(--rust); font-size:.66rem; font-weight:850; letter-spacing:.09em; }
.cbx-sunday-card b { margin-top:.85rem; padding-top:.8rem; border-top:1px solid var(--line); font-size:.78rem; }
.cbx-first { width:min(100%,82rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1.2rem,5vw,5rem); display:grid; grid-template-columns:.9fr 1.3fr; gap:clamp(3rem,7vw,7rem); }
.cbx-first-lead > p,.cbx-inside > div > p,.cbx-sunday-copy > p,.cbx-community-copy > p,.cbx-access > div > p,.cbx-contact > p { color:var(--rust); font-size:.66rem; font-weight:900; letter-spacing:.15em; }
.cbx-first h2,.cbx-inside h2,.cbx-sunday h2,.cbx-community h2,.cbx-access h2,.cbx-contact h2 { margin:.6rem 0 1.3rem; font-size:clamp(2.1rem,4.3vw,4.5rem); line-height:1.03; letter-spacing:-.055em; }
.cbx-first-lead > span,.cbx-inside > div > p:last-of-type,.cbx-sunday-copy > p:last-of-type,.cbx-community-copy > p:nth-of-type(2) { display:block; max-width:36rem; color:#56645f; }
.cbx-first ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.cbx-first li { display:grid; grid-template-columns:3rem 1fr; gap:.4rem 1rem; padding:1.3rem 0; border-bottom:1px solid var(--line); }
.cbx-first li > b { grid-row:span 2; color:var(--rust); font-size:.7rem; }
.cbx-first li h3 { margin:0; font-size:1.2rem; }
.cbx-first li p { margin:0; color:#60706a; font-size:.9rem; }
.cbx-inside { display:grid; grid-template-columns:1.2fr .8fr; background:#e0ddd2; }
.cbx-inside figure { position:relative; min-height:42rem; margin:0; overflow:hidden; }
.cbx-inside figure img { width:100%; height:100%; object-fit:cover; }
.cbx-inside figure span { position:absolute; bottom:1rem; left:1rem; padding:.45rem .6rem; background:rgba(255,250,241,.9); font-size:.6rem; font-weight:850; letter-spacing:.13em; }
.cbx-inside > div { display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,7vw,7rem); }
.cbx-inside dl,.cbx-access dl { margin:1.5rem 0 0; border-top:1px solid #b7b4aa; }
.cbx-inside dl div,.cbx-access dl div { display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid #b7b4aa; }
.cbx-inside dt,.cbx-access dt { color:var(--rust); font-size:.62rem; font-weight:850; letter-spacing:.1em; }
.cbx-inside dd,.cbx-access dd { margin:0; font-size:.9rem; }
.cbx-sunday { display:grid; grid-template-columns:.9fr 1.1fr; width:min(100%,82rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1.2rem,5vw,5rem); gap:clamp(3rem,8vw,8rem); align-items:center; }
.cbx-bigtime { display:grid; align-content:center; min-height:25rem; padding:2rem; border:1px solid var(--line); background:var(--cream); text-align:center; }
.cbx-bigtime small { font-size:.62rem; font-weight:850; letter-spacing:.16em; }
.cbx-bigtime strong { font:400 clamp(5rem,12vw,10rem)/.8 Georgia,serif; letter-spacing:-.09em; }
.cbx-bigtime span { margin-top:1rem; color:var(--rust); font-size:.68rem; font-weight:850; letter-spacing:.09em; }
.cbx-flow { display:grid; margin-top:2rem; border-top:1px solid var(--line); }
.cbx-flow span { display:grid; grid-template-columns:5rem 1fr; padding:.85rem 0; border-bottom:1px solid var(--line); }
.cbx-flow b { color:var(--rust); }
.cbx-community { display:grid; grid-template-columns:.82fr 1.18fr; background:var(--forest); color:#f9f4e9; }
.cbx-community-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,7vw,7rem); }
.cbx-community-copy > p:nth-of-type(2) { color:#c8d2ce; }
.cbx-community blockquote { margin:2rem 0 0; padding-top:1.5rem; border-top:1px solid #547068; font-family:"Yu Mincho",Georgia,serif; font-size:clamp(1.4rem,2.4vw,2.2rem); line-height:1.5; }
.cbx-community blockquote small { display:block; margin-top:.8rem; color:#98aaa4; font:700 .58rem system-ui,sans-serif; letter-spacing:.14em; }
.cbx-community figure { min-height:38rem; margin:0; overflow:hidden; }
.cbx-community figure img { width:100%; height:100%; object-fit:cover; }
.cbx-message { position:relative; min-height:45rem; display:grid; place-items:center; overflow:hidden; background:#0e2923; color:#fff; }
.cbx-message-bg { position:absolute; inset:0; }
.cbx-message-bg img { width:100%; height:100%; object-fit:cover; filter:grayscale(.35) brightness(.42) saturate(.7); transform:scale(1.02); }
.cbx-message-bg::after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,34,29,.88),rgba(11,34,29,.35)); content:""; }
.cbx-message-copy { position:relative; z-index:2; width:min(100%,82rem); padding:5rem clamp(1.2rem,5vw,5rem); }
.cbx-message-copy > p { color:#e9aa91; font-size:.66rem; font-weight:900; letter-spacing:.14em; }
.cbx-message-copy > span { display:block; margin-top:4rem; color:#d9e0dc; font-size:.62rem; letter-spacing:.11em; }
.cbx-message-copy h2 { max-width:8ch; margin:.5rem 0 1rem; font-size:clamp(3rem,7vw,7rem); line-height:.92; letter-spacing:-.06em; }
.cbx-message-copy small { display:block; max-width:27rem; color:#d1d9d5; font-size:.88rem; }
.cbx-message-copy a { display:inline-flex; align-items:center; gap:.8rem; margin-top:1.7rem; color:#fff; font-weight:800; text-decoration:none; }
.cbx-message-copy a i { display:grid; place-items:center; width:3rem; aspect-ratio:1; border:1px solid #fff; border-radius:50%; font-style:normal; }
.cbx-access { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(3rem,7vw,7rem); width:min(100%,82rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1.2rem,5vw,5rem); align-items:center; }
.cbx-access > div:first-child > a { display:inline-block; margin-top:1.6rem; font-size:.82rem; font-weight:800; text-decoration:none; border-bottom:1px solid; }
.cbx-map { position:relative; min-height:30rem; display:grid; place-items:center; overflow:hidden; background:#d7ddd6; border:1px solid #bcc6bf; }
.cbx-map::before,.cbx-map::after { position:absolute; inset:-20%; background:repeating-linear-gradient(27deg,transparent 0 48px,rgba(23,49,44,.1) 49px 50px); content:""; transform:rotate(8deg); }
.cbx-map::after { transform:rotate(93deg); }
.cbx-map span,.cbx-map small { position:absolute; z-index:2; left:1rem; font-size:.6rem; font-weight:850; letter-spacing:.12em; }
.cbx-map span { top:1rem; }
.cbx-map small { bottom:1rem; }
.cbx-map i { position:relative; z-index:2; width:1.3rem; aspect-ratio:1; background:var(--rust); border:5px solid var(--cream); border-radius:50%; box-shadow:0 0 0 1px var(--rust); }
.cbx-map b { position:relative; z-index:2; margin-top:-11rem; font:700 .68rem system-ui,sans-serif; letter-spacing:.1em; }
.cbx-contact { padding:clamp(5rem,10vw,9rem) clamp(1.2rem,5vw,5rem); background:#cfddd8; text-align:center; }
.cbx-contact h2 { max-width:15ch; margin-inline:auto; }
.cbx-contact a { min-height:56px; display:inline-flex; align-items:center; margin-top:1rem; padding:.85rem 1.25rem; background:var(--forest); color:#fff; font-size:.82rem; font-weight:800; text-decoration:none; }
.cbx-mobile { display:none; }
.cbx-footer { min-height:82px; display:grid; grid-template-columns:1fr 1fr auto; gap:1rem; align-items:center; padding:1rem clamp(1.2rem,4vw,4rem); background:#102d27; color:#dfe7e3; font-size:.58rem; letter-spacing:.09em; }
.cbx-footer a { color:#fff; text-decoration:none; }


/* CHURCH MEDIA 02 — broadcast/editorial */
.site-page-church-media { background:#0b0d0d; color:#f2f0e9; }
.cmx-shell { --bg:#0b0d0d; --fg:#f3f1e8; --acid:#d7ff3f; --line:#333737; min-height:100vh; background:var(--bg); color:var(--fg); font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
.cmx-shell a { color:inherit; }
.cmx-shell a:focus-visible { outline:3px solid var(--acid); outline-offset:4px; }
.cmx-header { position:sticky; z-index:40; top:0; min-height:74px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:.7rem clamp(1rem,4vw,4rem); background:rgba(11,13,13,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.cmx-brand { display:grid; color:#fff; text-decoration:none; line-height:.9; }
.cmx-brand b { font-size:1.25rem; letter-spacing:-.04em; }
.cmx-brand span { margin-top:.25rem; color:#8d9592; font-size:.53rem; letter-spacing:.16em; }
.cmx-header nav { display:flex; justify-content:center; gap:2rem; }
.cmx-header nav a,.cmx-live { min-height:48px; display:inline-flex; align-items:center; font-size:.67rem; font-weight:850; letter-spacing:.08em; text-decoration:none; }
.cmx-live { gap:.4rem; color:var(--acid); }
.cmx-live i { width:.45rem; aspect-ratio:1; border-radius:50%; background:var(--acid); box-shadow:0 0 0 .25rem rgba(215,255,63,.12); }
.cmx-hero { position:relative; min-height:calc(100svh - 112px); display:grid; align-items:end; overflow:hidden; }
.cmx-hero-media { position:absolute; inset:0; }
.cmx-hero-media img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(.42); }
.cmx-hero-media::after { position:absolute; inset:0; background:linear-gradient(90deg,#080a0a 0%,rgba(8,10,10,.42) 55%,rgba(8,10,10,.65)); content:""; }
.cmx-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:10vw 10vw; opacity:.45; }
.cmx-hero-copy { position:relative; z-index:2; width:min(100%,86rem); margin:auto; padding:clamp(5rem,10vw,9rem) clamp(1rem,4vw,4rem); }
.cmx-hero-copy > p { margin:0 0 1rem; color:var(--acid); font-size:.66rem; font-weight:900; letter-spacing:.16em; }
.cmx-hero-copy h1 { margin:0; font-size:clamp(4.8rem,13vw,12.5rem); line-height:.72; letter-spacing:-.095em; font-weight:900; }
.cmx-hero-copy h1 em { display:block; color:var(--acid); font-style:normal; }
.cmx-hero-copy > span { display:block; max-width:31rem; margin-top:2rem; color:#d5d9d6; font-size:clamp(.95rem,1.4vw,1.14rem); line-height:1.8; }
.cmx-hero-copy > a { display:inline-flex; gap:.7rem; align-items:center; margin-top:1.8rem; color:#fff; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-decoration:none; }
.cmx-hero-copy > a i { display:grid; place-items:center; width:3.2rem; aspect-ratio:1; border:1px solid #fff; border-radius:50%; font-style:normal; }
.cmx-hero > aside { position:absolute; z-index:3; right:clamp(1rem,4vw,4rem); bottom:clamp(3rem,6vw,5rem); display:grid; min-width:10rem; padding:1rem; background:var(--acid); color:#0a0c0c; }
.cmx-hero > aside span { font-size:.56rem; font-weight:900; letter-spacing:.16em; }
.cmx-hero > aside b { font-size:2.8rem; letter-spacing:-.08em; }
.cmx-hero > aside small { font-size:.56rem; font-weight:800; }
.cmx-watch { width:min(100%,86rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem); }
.cmx-section-head { display:grid; grid-template-columns:10rem 1fr auto; gap:2rem; align-items:end; margin-bottom:2rem; }
.cmx-section-head > p { margin:0; color:var(--acid); font-size:.63rem; font-weight:900; letter-spacing:.15em; }
.cmx-section-head h2 { margin:0; font-size:clamp(2.8rem,6vw,6.2rem); line-height:.88; letter-spacing:-.075em; }
.cmx-section-head a { color:#bfc5c1; font-size:.62rem; font-weight:850; text-decoration:none; letter-spacing:.1em; }
.cmx-feature { display:grid; grid-template-columns:1.25fr .75fr; min-height:34rem; border:1px solid var(--line); }
.cmx-feature figure { position:relative; margin:0; overflow:hidden; }
.cmx-feature figure img { width:100%; height:100%; object-fit:cover; filter:grayscale(.65) contrast(1.08) brightness(.72); }
.cmx-feature figure::after { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%); content:""; }
.cmx-feature figure span { position:absolute; z-index:2; top:1rem; right:1rem; padding:.3rem .45rem; background:#0b0d0d; font-size:.58rem; }
.cmx-feature figure i { position:absolute; z-index:2; left:50%; top:50%; display:grid; place-items:center; width:5.3rem; aspect-ratio:1; border:1px solid #fff; border-radius:50%; font-style:normal; transform:translate(-50%,-50%); }
.cmx-feature > div { display:flex; flex-direction:column; justify-content:end; padding:clamp(2rem,5vw,4.5rem); background:#151818; }
.cmx-feature > div > p:first-child { color:var(--acid); font-size:.61rem; font-weight:900; letter-spacing:.13em; }
.cmx-feature h3 { margin:.5rem 0 1rem; font-size:clamp(2.2rem,4vw,4.2rem); line-height:1; letter-spacing:-.06em; }
.cmx-feature small { color:#8e9893; font-size:.62rem; letter-spacing:.1em; }
.cmx-feature > div > p:last-child { margin-top:2rem; color:#bec5c1; line-height:1.8; }
.cmx-archive { margin-top:1rem; border-top:1px solid var(--line); }
.cmx-archive a { display:grid; grid-template-columns:4rem 1fr auto; gap:1rem; align-items:center; min-height:82px; border-bottom:1px solid var(--line); text-decoration:none; }
.cmx-archive a > span { color:var(--acid); font-size:.65rem; }
.cmx-archive a div { display:grid; gap:.15rem; }
.cmx-archive a b { font-size:1rem; }
.cmx-archive a small { color:#7f8985; font-size:.62rem; }
.cmx-archive a i { font-style:normal; }
.cmx-events { padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem); background:var(--acid); color:#0a0c0c; }
.cmx-events .cmx-section-head { width:min(100%,78rem); margin:0 auto 2rem; }
.cmx-section-head-light > p { color:#0a0c0c; }
.cmx-event-grid { width:min(100%,78rem); margin:auto; display:grid; grid-template-columns:1.5fr 1fr 1fr; border-top:1px solid #0a0c0c; border-left:1px solid #0a0c0c; }
.cmx-event-grid article { min-height:24rem; display:flex; flex-direction:column; padding:1.5rem; border-right:1px solid #0a0c0c; border-bottom:1px solid #0a0c0c; }
.cmx-event-grid time { display:grid; align-content:start; width:min-content; font-size:3rem; font-weight:900; line-height:.75; }
.cmx-event-grid time small { margin-top:.45rem; font-size:.54rem; letter-spacing:.12em; }
.cmx-event-grid article > span { margin-top:auto; font-size:.6rem; font-weight:900; letter-spacing:.1em; }
.cmx-event-grid h3 { margin:.5rem 0; font-size:clamp(1.5rem,2.5vw,2.4rem); letter-spacing:-.04em; }
.cmx-event-grid p { margin:0; font-size:.68rem; }
.cmx-event-grid a { margin-top:1.2rem; font-size:.62rem; font-weight:900; text-decoration:none; }
.cmx-join { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); width:min(100%,86rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem); align-items:center; }
.cmx-join > div:first-child > p { color:var(--acid); font-size:.62rem; font-weight:900; letter-spacing:.14em; }
.cmx-join h2 { margin:.6rem 0 1rem; font-size:clamp(2.5rem,5vw,5rem); line-height:.94; letter-spacing:-.06em; }
.cmx-join > div:first-child > p:last-child { color:#acb5b0; line-height:1.85; }
.cmx-tags { display:flex; flex-wrap:wrap; gap:.6rem; align-content:center; }
.cmx-tags span { padding:.8rem 1rem; border:1px solid #525a57; border-radius:999px; color:#d8ddda; font-size:.67rem; font-weight:850; letter-spacing:.08em; }
.cmx-tags span:nth-child(2) { background:var(--acid); color:#0a0c0c; border-color:var(--acid); }
.cmx-visit { display:grid; grid-template-columns:1.2fr .8fr; min-height:39rem; background:#eee9dd; color:#111; }
.cmx-visit figure { margin:0; overflow:hidden; }
.cmx-visit figure img { width:100%; height:100%; object-fit:cover; filter:grayscale(.75) contrast(1.08); }
.cmx-visit > div { display:flex; flex-direction:column; justify-content:center; padding:clamp(2rem,6vw,5rem); }
.cmx-visit > div > p { font-size:.62rem; font-weight:900; letter-spacing:.14em; }
.cmx-visit h2 { margin:.6rem 0 1.5rem; font-size:clamp(2.5rem,5vw,5rem); line-height:.94; letter-spacing:-.06em; }
.cmx-visit dl { margin:0; border-top:1px solid #a7a69e; }
.cmx-visit dl div { display:grid; grid-template-columns:6rem 1fr; padding:.8rem 0; border-bottom:1px solid #a7a69e; }
.cmx-visit dt { font-size:.6rem; font-weight:900; }
.cmx-visit dd { margin:0; font-size:.82rem; }
.cmx-visit a { display:inline-flex; align-self:start; margin-top:1.5rem; padding-bottom:.2rem; border-bottom:1px solid; font-size:.72rem; font-weight:900; text-decoration:none; }
.cmx-mobile { display:none; }
.cmx-footer { min-height:78px; display:grid; grid-template-columns:1fr 1fr auto; gap:1rem; align-items:center; padding:1rem clamp(1rem,4vw,4rem); border-top:1px solid var(--line); color:#89918e; font-size:.56rem; letter-spacing:.1em; }
.cmx-footer a { color:#fff; text-decoration:none; }


/* CAFE FLOW 01 — tactile order-first */
.site-page-cafe-template { background:#f2e9d6; color:#241914; }
.cfx-shell { --ink:#241914; --paper:#f2e9d6; --milk:#fff8e9; --red:#d85239; --green:#244f3f; --gold:#e5b650; --line:#cdbfa5; min-height:100vh; background:var(--paper); color:var(--ink); font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
.cfx-shell a { color:inherit; }
.cfx-shell a:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.cfx-header { position:sticky; z-index:40; top:0; min-height:72px; display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:.6rem clamp(1rem,4vw,4rem); background:rgba(242,233,214,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.cfx-brand { display:flex; align-items:baseline; gap:.55rem; text-decoration:none; }
.cfx-brand b { font-family:Georgia,serif; font-size:1.45rem; letter-spacing:-.06em; }
.cfx-brand span { color:#6d5a4d; font-size:.52rem; font-weight:900; letter-spacing:.12em; }
.cfx-header nav { display:flex; justify-content:center; gap:1.8rem; }
.cfx-header nav a,.cfx-order-link { min-height:48px; display:inline-flex; align-items:center; font-size:.66rem; font-weight:900; letter-spacing:.08em; text-decoration:none; }
.cfx-order-link { padding-inline:1rem; background:var(--ink); color:#fff; }
.cfx-hero { min-height:calc(100svh - 110px); display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:clamp(2rem,6vw,7rem); padding:clamp(3rem,7vw,6rem) clamp(1rem,5vw,5rem); overflow:hidden; }
.cfx-copy > p { margin:0 0 1rem; color:var(--green); font-size:.64rem; font-weight:900; letter-spacing:.14em; }
.cfx-copy h1 { margin:0; font-size:clamp(4.5rem,9.5vw,9.5rem); line-height:.7; letter-spacing:-.095em; }
.cfx-copy h1 em { color:var(--red); font-style:normal; }
.cfx-copy > span { display:block; max-width:31rem; margin-top:2rem; font-size:1rem; line-height:1.8; }
.cfx-copy > div { display:flex; gap:1rem; align-items:center; margin-top:1.8rem; }
.cfx-copy a { min-height:52px; display:inline-flex; align-items:center; padding:.75rem 1rem; background:var(--ink); color:#fff; font-size:.74rem; font-weight:900; text-decoration:none; }
.cfx-copy a + a { padding:.75rem 0; background:transparent; color:var(--ink); border-bottom:1px solid; }
.cfx-still { position:relative; aspect-ratio:1.16; min-height:31rem; overflow:hidden; background:#dba744; transform:rotate(-2deg); box-shadow:0 30px 60px rgba(85,53,33,.1); }
.cfx-table { position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.18),transparent 22%),linear-gradient(130deg,#e9be62,#d79d37); }
.cfx-saucer { position:absolute; left:17%; top:23%; width:46%; aspect-ratio:1; border-radius:50%; background:#f2dfbc; box-shadow:0 14px 28px rgba(74,44,27,.16); }
.cfx-saucer i { position:absolute; inset:10%; border:1px solid rgba(80,45,30,.2); border-radius:50%; }
.cfx-cup { position:absolute; left:23%; top:29%; display:grid; place-items:center; width:34%; aspect-ratio:1; border-radius:50%; background:#40271d; border:11px solid var(--milk); box-shadow:0 10px 24px rgba(54,30,20,.22); }
.cfx-cup::after { position:absolute; right:-22%; width:25%; height:35%; border:9px solid var(--milk); border-left:0; border-radius:0 30px 30px 0; content:""; }
.cfx-cup span { color:#fff; font:italic 1.5rem Georgia,serif; }
.cfx-receipt { position:absolute; right:8%; top:12%; display:grid; width:28%; min-height:44%; padding:1rem; background:#fff8e8; box-shadow:0 10px 28px rgba(70,42,25,.15); transform:rotate(3deg); }
.cfx-receipt small { font-size:.5rem; letter-spacing:.12em; }
.cfx-receipt b { margin-top:auto; font-size:.72rem; }
.cfx-receipt span { color:var(--red); font-size:1.25rem; font-weight:900; }
.cfx-receipt i { margin-top:.5rem; padding-top:.5rem; border-top:1px dashed #a89578; font-size:.58rem; font-style:normal; }
.cfx-bean { position:absolute; width:1.05rem; height:.62rem; border-radius:50%; background:#40271d; transform:rotate(35deg); }
.cfx-bean::after { position:absolute; top:50%; left:20%; right:20%; height:1px; background:#c1905a; content:""; transform:rotate(-18deg); }
.cfx-bean.b1 { left:9%; top:14%; }.cfx-bean.b2 { right:7%; bottom:8%; transform:rotate(-18deg); }
.cfx-now { min-height:70px; display:grid; grid-template-columns:auto auto 1fr auto; gap:1rem; align-items:center; padding:.7rem clamp(1rem,4vw,4rem); background:var(--green); color:#fff; }
.cfx-now b { color:#ffe8a8; font-size:.62rem; letter-spacing:.13em; }
.cfx-now > span { font-size:.92rem; font-weight:850; }
.cfx-now small { color:#b7d0c6; font-size:.58rem; }
.cfx-now > div { display:flex; border:1px solid #668475; }
.cfx-now a { min-height:44px; display:grid; place-items:center; padding:.5rem .8rem; border-right:1px solid #668475; font-size:.58rem; font-weight:850; text-decoration:none; }
.cfx-now a:last-child { border-right:0; }
.cfx-menu { width:min(100%,86rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem); }
.cfx-menu-head { display:grid; grid-template-columns:11rem 1fr .7fr; gap:2rem; align-items:end; margin-bottom:2rem; }
.cfx-menu-head > p,.cfx-order-title > p,.cfx-place > div:last-child > p,.cfx-final > p { color:var(--green); font-size:.62rem; font-weight:900; letter-spacing:.14em; }
.cfx-menu-head h2,.cfx-order h2,.cfx-place h2,.cfx-final h2 { margin:0; font-size:clamp(2.8rem,5.8vw,5.8rem); line-height:.9; letter-spacing:-.075em; }
.cfx-menu-head > span { color:#76665b; font-size:.9rem; line-height:1.7; }
.cfx-menu-list { border-top:2px solid var(--ink); }
.cfx-menu-list article { display:grid; grid-template-columns:3rem 6rem 1fr auto; gap:1rem; align-items:center; min-height:9rem; border-bottom:1px solid var(--line); }
.cfx-menu-list article > span { align-self:start; padding-top:1.1rem; color:#88715f; font-size:.6rem; font-weight:900; }
.cfx-menu-list h3 { margin:0; font-size:1.4rem; letter-spacing:-.03em; }
.cfx-menu-list p { margin:.2rem 0 0; color:#8c796a; font-size:.58rem; font-weight:800; letter-spacing:.08em; }
.cfx-menu-list strong { font-size:1.2rem; }
.cfx-menu-list strong::before { content:"¥"; font-size:.7em; }
.cfx-drink { position:relative; width:5.2rem; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#e4d2ae; }
.cfx-drink i { width:62%; aspect-ratio:1; border-radius:50%; background:#4a2a1f; box-shadow:0 0 0 .55rem #f4ead5; }
.cfx-drink.tonic { background:#efce74; }.cfx-drink.tonic i { background:linear-gradient(145deg,#d65c37 0 45%,#f0d26e 45%); box-shadow:none; }
.cfx-drink.cake { background:#d0ae77; }.cfx-drink.cake i { width:65%; height:45%; border-radius:50% 50% 25% 25%; background:#f4e7c8; box-shadow:none; }
.cfx-all { display:inline-block; margin-top:1.5rem; padding-bottom:.2rem; border-bottom:1px solid; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-decoration:none; }
.cfx-order { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); padding:clamp(5rem,9vw,9rem) max(clamp(1rem,4vw,4rem),calc((100vw - 78rem)/2)); background:var(--gold); }
.cfx-order-title > p { color:var(--ink); }
.cfx-order-title > span { display:block; max-width:34rem; margin-top:1.5rem; line-height:1.8; }
.cfx-badges { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.5rem; }
.cfx-badges b { padding:.5rem .65rem; border:1px solid rgba(36,25,20,.5); border-radius:999px; font-size:.55rem; letter-spacing:.08em; }
.cfx-order ol { margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.cfx-order li { display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1.2rem 0; border-bottom:1px solid rgba(36,25,20,.45); }
.cfx-order li > b { font-size:.7rem; }
.cfx-order h3 { margin:0; font-size:1.2rem; letter-spacing:-.03em; }
.cfx-order li p { margin:.25rem 0 0; font-size:.85rem; }
.cfx-demo-note { grid-column:2; margin:0; color:#5c4737; font-size:.68rem; }
.cfx-place { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(3rem,8vw,8rem); align-items:center; width:min(100%,78rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem); }
.cfx-place-art { position:relative; min-height:28rem; display:grid; place-items:center; overflow:hidden; background:var(--green); color:#fff; }
.cfx-place-art span { font:400 clamp(8rem,18vw,15rem)/1 Georgia,serif; }
.cfx-place-art i { position:absolute; width:54%; aspect-ratio:1; border:1px solid #c4a556; border-radius:50%; }
.cfx-place-art i::before,.cfx-place-art i::after { position:absolute; background:#c4a556; content:""; }
.cfx-place-art i::before { width:1px; height:120%; top:-10%; left:50%; }.cfx-place-art i::after { height:1px; width:120%; left:-10%; top:50%; }
.cfx-place-art small { position:absolute; bottom:1rem; left:1rem; font-size:.58rem; letter-spacing:.1em; }
.cfx-place > div:last-child > p { margin:0 0 .6rem; }
.cfx-place > div:last-child > p:nth-of-type(2) { color:#77675c; line-height:1.8; }
.cfx-place dl { margin:1.5rem 0 0; border-top:1px solid var(--line); }
.cfx-place dl div { display:grid; grid-template-columns:6rem 1fr; padding:.8rem 0; border-bottom:1px solid var(--line); }
.cfx-place dt { font-size:.58rem; font-weight:900; }.cfx-place dd { margin:0; font-size:.82rem; }
.cfx-final { padding:clamp(5rem,9vw,9rem) clamp(1rem,5vw,5rem); background:var(--red); color:#fff8e9; }
.cfx-final > p { color:#ffe0b7; }
.cfx-final h2 { max-width:9ch; }
.cfx-final a { min-height:54px; display:inline-flex; align-items:center; margin-top:2rem; padding:.75rem 1rem; background:#fff8e9; color:var(--ink); font-size:.72rem; font-weight:900; text-decoration:none; }
.cfx-mobile { display:none; }
.cfx-footer { min-height:74px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:1rem; padding:1rem clamp(1rem,4vw,4rem); background:var(--ink); color:#c9bbae; font-size:.55rem; letter-spacing:.1em; }
.cfx-footer a { color:#fff; text-decoration:none; }


/* SOCIAL PROFILE 01 — mobile-native creator home */
.site-page-social-template { background:#d9d4df; }
.spx-shell { --black:#111216; --paper:#ece7ef; --pink:#ff7f87; --blue:#8eb9ff; --acid:#baff88; --line:#b8b1bf; min-height:100vh; background:var(--paper); color:var(--black); font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
.spx-shell a { color:inherit; }
.spx-shell a:focus-visible { outline:3px solid #5d46ff; outline-offset:4px; }
.spx-main { width:min(100%,86rem); margin:auto; display:grid; grid-template-columns:minmax(19rem,.62fr) minmax(0,1.38fr); gap:1.2rem; padding:1.2rem; }
.spx-profile { position:sticky; top:1.2rem; align-self:start; min-height:calc(100svh - 2.4rem); display:flex; flex-direction:column; padding:clamp(1.5rem,3vw,2.5rem); background:var(--black); color:#f7f4fa; }
.spx-avatar { position:relative; width:5.2rem; aspect-ratio:1; display:grid; place-items:center; margin-bottom:1.4rem; border-radius:50%; background:var(--acid); color:#111; box-shadow:8px 8px 0 #7257ff; }
.spx-avatar span { font-size:2.7rem; font-weight:950; }.spx-avatar i { position:absolute; right:-.1rem; bottom:.4rem; width:.8rem; aspect-ratio:1; background:var(--pink); border:2px solid #111; border-radius:50%; }
.spx-profile > p:first-of-type { margin:0; color:#9ea5a1; font-size:.62rem; font-weight:900; letter-spacing:.12em; }
.spx-profile h1 { margin:.25rem 0 0; font-size:clamp(4rem,8vw,7.5rem); line-height:.8; letter-spacing:-.09em; }
.spx-profile > span { margin-top:.7rem; color:var(--pink); font-size:.6rem; font-weight:900; letter-spacing:.12em; }
.spx-bio { max-width:22rem; margin:1.5rem 0 0; color:#c9cecb; line-height:1.7; }
.spx-online { display:flex; align-items:center; gap:.5rem; margin-top:1.3rem; color:#b8c0bc; font-size:.58rem; font-weight:850; letter-spacing:.09em; }
.spx-online i { width:.5rem; aspect-ratio:1; background:var(--acid); border-radius:50%; box-shadow:0 0 0 .25rem rgba(186,255,136,.1); }
.spx-profile nav { display:grid; margin-top:auto; border-top:1px solid #33363b; }
.spx-profile nav a { min-height:54px; display:flex; align-items:center; border-bottom:1px solid #33363b; font-size:.66rem; font-weight:850; letter-spacing:.08em; text-decoration:none; }
.spx-profile nav a:hover { color:var(--acid); }
.spx-stream { display:grid; gap:1.2rem; }
.spx-feature { display:grid; grid-template-columns:1.15fr .85fr; min-height:42rem; background:#15161a; color:#fff; }
.spx-poster { position:relative; min-height:42rem; display:flex; flex-direction:column; justify-content:space-between; padding:1.2rem; overflow:hidden; background:linear-gradient(150deg,#6d4dff 0%,#ff7f87 62%,#ffbd75 100%); }
.spx-poster::before,.spx-poster::after { position:absolute; border:1px solid rgba(255,255,255,.5); border-radius:50%; content:""; }
.spx-poster::before { width:65%; aspect-ratio:1; left:17%; top:18%; }.spx-poster::after { width:42%; aspect-ratio:1; left:29%; top:29%; }
.spx-poster > span,.spx-poster > small { position:relative; z-index:2; font-size:.56rem; font-weight:850; letter-spacing:.1em; }
.spx-orbit { position:absolute; z-index:2; top:50%; left:50%; display:grid; place-items:center; width:7rem; aspect-ratio:1; border-radius:50%; background:#f8f5fb; color:#111; transform:translate(-50%,-50%); }
.spx-orbit i { position:absolute; right:-1.2rem; width:.75rem; aspect-ratio:1; background:var(--acid); border-radius:50%; }
.spx-orbit b { font-size:.75rem; }
.spx-feature-copy { display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.5rem,4vw,3rem); }
.spx-feature-copy > p { color:var(--acid); font-size:.58rem; font-weight:900; letter-spacing:.13em; }
.spx-feature-copy h2 { margin:.6rem 0 .8rem; font-size:clamp(2.5rem,5vw,5rem); line-height:.9; letter-spacing:-.07em; }
.spx-feature-copy > span { color:#8f9692; font-size:.58rem; letter-spacing:.1em; }
.spx-feature-copy a { align-self:start; margin-top:2rem; padding-bottom:.2rem; border-bottom:1px solid; font-size:.66rem; font-weight:900; text-decoration:none; }
.spx-notes { padding:clamp(2rem,5vw,4rem); background:#f6f2f7; }
.spx-title { display:grid; grid-template-columns:8rem 1fr; align-items:end; margin-bottom:1.5rem; }
.spx-title p,.spx-about > p,.spx-contact > p { color:#6a6170; font-size:.58rem; font-weight:900; letter-spacing:.13em; }
.spx-title h2,.spx-about h2,.spx-contact h2 { margin:0; font-size:clamp(2.2rem,4vw,4.2rem); line-height:.95; letter-spacing:-.065em; }
.spx-note-list { border-top:1px solid var(--line); }
.spx-note-list article { position:relative; display:grid; grid-template-columns:7rem 6rem 1fr 2rem; gap:1rem; align-items:center; min-height:6rem; border-bottom:1px solid var(--line); }
.spx-note-list article > span,.spx-note-list time { font-size:.58rem; font-weight:850; letter-spacing:.08em; }
.spx-note-list time { color:#7c7380; }
.spx-note-list h3 { margin:0; font-size:1.12rem; letter-spacing:-.02em; }
.spx-note-list i { font-style:normal; color:#8b818f; }
.spx-about { padding:clamp(3rem,6vw,6rem); background:var(--acid); }
.spx-about h2 { max-width:12ch; margin:.6rem 0 1rem; }
.spx-about > p:nth-of-type(2) { max-width:42rem; line-height:1.9; }
.spx-about > div { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.5rem; }
.spx-about > div span { padding:.6rem .75rem; border:1px solid #111; border-radius:999px; font-size:.57rem; font-weight:850; letter-spacing:.08em; }
.spx-contact { padding:clamp(3rem,6vw,6rem); background:var(--blue); }
.spx-contact h2 { max-width:10ch; margin:.6rem 0 1.5rem; }.spx-contact a { min-height:54px; display:inline-flex; align-items:center; padding:.75rem 1rem; background:var(--black); color:#fff; font-size:.68rem; font-weight:900; text-decoration:none; }
.spx-mobile { display:none; }
.spx-footer { min-height:74px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:1rem; padding:1rem clamp(1rem,4vw,4rem); background:var(--black); color:#a9afac; font-size:.55rem; letter-spacing:.09em; }
.spx-footer a { color:#fff; text-decoration:none; }


/* PERSONAL 01 — editorial official site */
.site-page-personal-template { background:#ece9e0; color:#151515; }
.psx-shell { --ink:#161616; --paper:#ece9e0; --white:#faf8f2; --blue:#274d78; --red:#a94734; --line:#c8c3b6; min-height:100vh; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
.psx-shell h1,.psx-shell h2,.psx-shell h3,.psx-shell blockquote { font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif; font-weight:500; }
.psx-shell a { color:inherit; }
.psx-shell a:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.psx-header { position:sticky; z-index:40; top:0; min-height:76px; display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:.6rem clamp(1rem,4vw,4rem); background:rgba(236,233,224,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.psx-brand { display:flex; gap:.6rem; align-items:baseline; text-decoration:none; }
.psx-brand b { font:600 1rem Georgia,serif; }.psx-brand span { color:#655f56; font-size:.52rem; font-weight:850; letter-spacing:.12em; }
.psx-header nav { display:flex; justify-content:center; gap:2rem; }
.psx-header nav a,.psx-header > a:last-child { min-height:48px; display:inline-flex; align-items:center; font-size:.62rem; font-weight:850; letter-spacing:.09em; text-decoration:none; }
.psx-hero { min-height:calc(100svh - 114px); display:grid; grid-template-columns:.8fr .9fr .55fr; gap:clamp(2rem,5vw,5rem); align-items:center; width:min(100%,86rem); margin:auto; padding:clamp(3rem,6vw,6rem) clamp(1rem,4vw,4rem); }
.psx-hero-name > p { color:#5e5a52; font-size:.6rem; font-weight:850; letter-spacing:.13em; }
.psx-hero-name h1 { margin:1rem 0; font-size:clamp(5rem,10vw,10.5rem); line-height:.66; letter-spacing:-.1em; }
.psx-hero-name h1 em { color:var(--blue); font-style:italic; }
.psx-hero-name > span { display:block; max-width:19rem; font-size:1rem; line-height:1.8; }
.psx-hero figure { position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; }
.psx-hero figure img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.72) contrast(.96); }
.psx-hero figcaption { position:absolute; right:.8rem; bottom:.7rem; padding:.35rem .45rem; background:rgba(250,248,242,.9); font-size:.52rem; font-weight:850; letter-spacing:.1em; }
.psx-hero-note { align-self:end; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.psx-hero-note > p { color:var(--red); font-size:.55rem; font-weight:900; letter-spacing:.12em; }
.psx-hero-note > span { display:block; color:#5d5951; font-size:.88rem; line-height:1.7; }
.psx-hero-note a { display:inline-block; margin-top:1.5rem; font-size:.6rem; font-weight:900; letter-spacing:.08em; text-decoration:none; }
.psx-intro { display:grid; grid-template-columns:10rem 1fr .7fr; gap:2rem; align-items:start; width:min(100%,78rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem); }
.psx-intro > p,.psx-work-head > p,.psx-service > div:first-child > p,.psx-about > div > p,.psx-contact > p { color:var(--red); font-size:.6rem; font-weight:900; letter-spacing:.14em; }
.psx-intro h2,.psx-work-head h2,.psx-service h2,.psx-about h2,.psx-contact h2 { margin:0; font-size:clamp(2.8rem,5.8vw,5.8rem); line-height:.93; letter-spacing:-.065em; }
.psx-intro > span { color:#69645b; line-height:1.85; }
.psx-work { padding:clamp(5rem,9vw,9rem) max(clamp(1rem,4vw,4rem),calc((100vw - 82rem)/2)); background:#181818; color:#f5f2e9; }
.psx-work-head { display:grid; grid-template-columns:10rem 1fr .7fr; gap:2rem; align-items:end; margin-bottom:3rem; }
.psx-work-head > p { color:#d78d7a; }.psx-work-head > span { color:#94918a; font-size:.88rem; line-height:1.7; }
.psx-projects { display:grid; gap:1rem; }
.psx-project { display:grid; grid-template-columns:.7fr 1.3fr; min-height:29rem; border-top:1px solid #454545; padding-top:1rem; }
.psx-project > div { display:flex; flex-direction:column; justify-content:flex-end; padding:0 2rem 1.5rem 0; }
.psx-project > div > span { color:#9f9c95; font-size:.56rem; font-weight:850; letter-spacing:.12em; }
.psx-project h3 { margin:.65rem 0 .4rem; font-size:clamp(1.7rem,3vw,3rem); letter-spacing:-.04em; }
.psx-project p { margin:0; color:#a8a49c; font-size:.68rem; }
.psx-project figure { position:relative; min-height:28rem; display:grid; place-items:center; margin:0; overflow:hidden; background:#cba58e; }
.psx-project figure b { position:relative; z-index:2; font:400 clamp(8rem,18vw,15rem)/1 Georgia,serif; }
.psx-project figure i { position:absolute; width:55%; height:55%; border:1px solid rgba(0,0,0,.5); }
.psx-project figure i::after { position:absolute; top:50%; left:50%; width:35%; aspect-ratio:1.8; border-radius:50%; background:rgba(255,255,255,.45); content:""; transform:translate(-50%,-50%); }
.psx-project figure small { position:absolute; right:1rem; bottom:1rem; font-size:.55rem; font-weight:850; letter-spacing:.1em; }
.psx-project.p2 { grid-template-columns:1.25fr .75fr; }.psx-project.p2 > div { order:2; padding:0 0 1.5rem 2rem; }.psx-project.p2 figure { background:#9eb4ba; }.psx-project.p3 figure { background:#d9d197; }
.psx-service { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,8rem); width:min(100%,78rem); margin:auto; padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem); }
.psx-service-list { border-top:1px solid var(--line); }
.psx-service-list article { display:grid; grid-template-columns:3rem 1fr 1fr auto; gap:1rem; align-items:start; padding:1.3rem 0; border-bottom:1px solid var(--line); }
.psx-service-list article > b { color:var(--red); font-size:.6rem; }.psx-service-list h3 { margin:0; font-size:1.15rem; }.psx-service-list p { margin:0; color:#676158; font-size:.84rem; }.psx-service-list span { color:#888176; font-size:.54rem; font-weight:850; letter-spacing:.09em; }
.psx-about { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,7vw,7rem); padding:clamp(5rem,9vw,9rem) max(clamp(1rem,4vw,4rem),calc((100vw - 78rem)/2)); background:#dbe0df; }
.psx-about blockquote { position:relative; margin:0; padding-top:4rem; font-size:clamp(2.3rem,5vw,5rem); line-height:1.04; letter-spacing:-.055em; }
.psx-about blockquote > span { position:absolute; top:-1rem; left:0; color:var(--blue); font-size:7rem; line-height:1; }
.psx-about > div > p:nth-of-type(2) { color:#5c6361; line-height:1.85; }
.psx-about dl { margin-top:2rem; border-top:1px solid #a6afad; }
.psx-about dl div { display:grid; grid-template-columns:6rem 1fr; padding:.8rem 0; border-bottom:1px solid #a6afad; }
.psx-about dt { font-size:.55rem; font-weight:900; letter-spacing:.09em; }.psx-about dd { margin:0; font-size:.78rem; }
.psx-contact { padding:clamp(5rem,10vw,9rem) max(clamp(1rem,4vw,4rem),calc((100vw - 78rem)/2)); background:var(--blue); color:#fff; }
.psx-contact > p { color:#b8d3ef; }.psx-contact h2 { max-width:12ch; }.psx-contact > span { display:block; max-width:32rem; margin-top:1.5rem; color:#d8e4ef; }
.psx-contact a { min-height:54px; display:inline-flex; align-items:center; margin-top:2rem; padding:.75rem 1rem; background:#fff; color:#1c3552; font-size:.66rem; font-weight:900; text-decoration:none; }
.psx-footer { min-height:76px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:1rem; padding:1rem clamp(1rem,4vw,4rem); background:#181818; color:#a8a8a3; font-size:.55rem; letter-spacing:.09em; }
.psx-footer a { color:#fff; text-decoration:none; }


@media (min-width: 901px) and (max-width: 1150px) {
  /* Intermediate desktop/tablet width: avoid clipped side columns before the mobile breakpoint. */
  .cfx-hero { width:min(100%,72rem); grid-template-columns:minmax(22rem,.88fr) minmax(0,1.12fr); gap:2rem; padding-inline:2rem; }
  .cfx-still { min-width:0; }
  .cfx-receipt { right:1rem; width:min(11rem,34%); }
  .psx-hero { grid-template-columns:minmax(0,.9fr) minmax(19rem,1fr); padding-inline:2rem; }
  .psx-hero-note { grid-column:1 / -1; width:min(100%,44rem); justify-self:end; }
  .psx-project figure img { max-width:100%; }
}


@media (max-width: 900px) {
  .htx-head,.tcx-manifesto .wrap,.tcx-heading,.tcx-compare .wrap { grid-template-columns:1fr; }
  .htx-head > div:last-child { justify-self:start; }
  .htx-track { grid-auto-columns:min(80vw,28rem); }
  .tcx-item,.tcx-item:nth-child(even) { grid-template-columns:1fr; }
  .tcx-item:nth-child(even) figure { order:0; }
  .cbx-header nav,.cmx-header nav,.cfx-header nav,.psx-header nav { display:none; }
  .cbx-sunday-card { right:1rem; bottom:1rem; width:12rem; }
  .cbx-first,.cbx-sunday,.cbx-access,.cmx-join,.cfx-order,.cfx-place,.psx-service,.psx-about { grid-template-columns:1fr; }
  .cbx-inside,.cbx-community,.cmx-feature,.cmx-visit,.cfx-hero,.spx-main,.spx-feature,.psx-hero { grid-template-columns:1fr; }
  .cbx-inside figure,.cbx-community figure { min-height:28rem; }
  .cbx-community figure { order:-1; }
  .cmx-event-grid { grid-template-columns:1fr; }
  .cmx-event-grid article { min-height:15rem; }
  .cfx-hero { min-height:auto; }
  .cfx-still { min-height:24rem; }
  .cfx-demo-note { grid-column:1; }
  .spx-main { padding:.75rem; }
  .spx-profile { position:relative; top:auto; min-height:auto; }
  .spx-profile nav { margin-top:2rem; }
  .psx-hero { min-height:auto; grid-template-columns:1fr 1fr; }
  .psx-hero-note { grid-column:1/-1; }
  .psx-intro,.psx-work-head { grid-template-columns:1fr; }
}


@media (max-width: 640px) {
  .tx-demo { gap:.5rem; min-height:42px; padding:.45rem .7rem; }
  .tx-demo p { display:none; }
  .tx-demo a { font-size:.56rem; }
  .htx-gallery { padding-block:4rem; }
  .htx-head h2 { font-size:2.75rem; }
  .htx-track { grid-auto-columns:84vw; padding-inline:1rem; }
  .htx-card { grid-template-rows:15rem auto auto; min-height:0; }
  .tcx-hero { min-height:55vh; }.tcx-manifesto p { font-size:2.2rem; }.tcx-editions { padding-top:4rem; }
  .tcx-heading h2 { font-size:2.75rem; }.tcx-item { gap:1.5rem; padding-block:2.8rem; }.tcx-item h3 { font-size:2rem; }
  .cbx-shell,.cmx-shell,.cfx-shell,.spx-shell,.psx-shell { padding-bottom:4.7rem; }
  .cbx-header,.cmx-header,.cfx-header,.psx-header { min-height:64px; grid-template-columns:1fr auto; padding:.5rem .8rem; }
  .cbx-ask,.cmx-live,.cfx-order-link,.psx-header > a:last-child { min-height:44px; padding-inline:.7rem; }
  .cbx-hero { min-height:76svh; align-items:end; }
  .cbx-hero-shade { background:linear-gradient(0deg,rgba(8,33,28,.88) 0%,rgba(8,33,28,.35) 68%,rgba(8,33,28,.1)); }
  .cbx-hero-copy { padding:8rem 1rem 8rem; }.cbx-hero-copy h1 { font-size:3.35rem; max-width:8ch; }.cbx-hero-copy > span { font-size:.95rem; line-height:1.7; }.cbx-hero-copy > div { margin-top:1.4rem; }.cbx-hero-copy a { min-height:50px; }
  .cbx-sunday-card { right:1rem; bottom:1rem; width:9.2rem; padding:.8rem; }.cbx-sunday-card strong { font-size:2.4rem; }.cbx-sunday-card b { display:none; }
  .cbx-first { padding:4rem 1rem; gap:2rem; }.cbx-first h2,.cbx-inside h2,.cbx-sunday h2,.cbx-community h2,.cbx-access h2,.cbx-contact h2 { font-size:2.55rem; }
  .cbx-inside figure { min-height:21rem; }.cbx-inside > div,.cbx-community-copy { padding:3.5rem 1rem; }.cbx-sunday { padding:4rem 1rem; gap:2rem; }.cbx-bigtime { min-height:18rem; }.cbx-bigtime strong { font-size:5.5rem; }.cbx-community figure { min-height:22rem; }
  .cbx-message { min-height:36rem; }.cbx-message-copy { padding:4rem 1rem; }.cbx-message-copy > span { margin-top:2rem; }.cbx-message-copy h2 { font-size:3.7rem; }.cbx-access { padding:4rem 1rem; }.cbx-map { min-height:20rem; }.cbx-contact { padding:4.5rem 1rem; }
  .cbx-mobile,.cmx-mobile,.cfx-mobile { position:fixed; z-index:80; right:.65rem; bottom:.65rem; left:.65rem; display:grid; grid-template-columns:repeat(3,1fr); min-height:58px; background:#fff; border:1px solid rgba(0,0,0,.25); box-shadow:0 12px 34px rgba(0,0,0,.18); }
  .cbx-mobile a,.cmx-mobile a,.cfx-mobile a { display:grid; place-items:center; align-content:center; border-right:1px solid rgba(0,0,0,.18); text-align:center; text-decoration:none; }
  .cbx-mobile a:last-child,.cmx-mobile a:last-child,.cfx-mobile a:last-child { border-right:0; }.cbx-mobile span { font-size:.55rem; }.cbx-mobile b { font-size:.74rem; }.cbx-footer,.cmx-footer,.cfx-footer,.spx-footer,.psx-footer { grid-template-columns:1fr; padding-bottom:6rem; }
  .cmx-hero { min-height:78svh; }.cmx-hero-copy { padding:6rem 1rem 8rem; }.cmx-hero-copy h1 { font-size:4.9rem; line-height:.76; }.cmx-hero > aside { right:1rem; bottom:1rem; min-width:8rem; }.cmx-watch { padding:4rem 1rem; }.cmx-section-head { grid-template-columns:1fr; gap:.7rem; }.cmx-section-head h2 { font-size:3.1rem; }.cmx-feature { min-height:0; }.cmx-feature figure { min-height:20rem; }.cmx-feature > div { padding:2rem 1rem; }.cmx-feature h3 { font-size:2.5rem; }.cmx-archive a { grid-template-columns:2.5rem 1fr auto; }.cmx-events { padding:4rem 1rem; }.cmx-event-grid article { min-height:12rem; }.cmx-join { padding:4rem 1rem; }.cmx-join h2,.cmx-visit h2 { font-size:3rem; }.cmx-visit figure { min-height:22rem; }.cmx-visit > div { padding:3.5rem 1rem; }.cmx-mobile { background:var(--acid); color:#0a0c0c; }.cmx-mobile a { font-size:.6rem; font-weight:900; }
  .cfx-hero { padding:3rem 1rem 4rem; gap:2rem; }.cfx-copy h1 { font-size:4.85rem; }.cfx-copy > span { margin-top:1.4rem; }.cfx-still { min-height:20rem; }.cfx-now { grid-template-columns:auto auto 1fr; padding:.55rem .8rem; }.cfx-now > div { grid-column:1/-1; }.cfx-menu { padding:4rem 1rem; }.cfx-menu-head { grid-template-columns:1fr; gap:.7rem; }.cfx-menu-head h2,.cfx-order h2,.cfx-place h2,.cfx-final h2 { font-size:3rem; }.cfx-menu-list article { grid-template-columns:2rem 4rem 1fr auto; gap:.65rem; min-height:7rem; }.cfx-drink { width:3.6rem; }.cfx-menu-list h3 { font-size:1rem; }.cfx-order { padding:4rem 1rem; gap:2rem; }.cfx-place { padding:4rem 1rem; }.cfx-place-art { min-height:19rem; }.cfx-final { padding:4.5rem 1rem; }.cfx-mobile { background:var(--ink); color:#fff; }.cfx-mobile a { font-size:.6rem; font-weight:900; }
  .spx-main { padding:0; gap:0; }.spx-profile { min-height:auto; padding:2.2rem 1rem 1.5rem; }.spx-profile h1 { font-size:5rem; }.spx-profile nav { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #33363b; }.spx-profile nav a { min-height:50px; border-right:1px solid #33363b; padding-right:.5rem; }.spx-feature { min-height:0; }.spx-poster { min-height:28rem; }.spx-feature-copy { padding:2rem 1rem; }.spx-feature-copy h2 { font-size:3rem; }.spx-notes { padding:3.5rem 1rem; }.spx-title { grid-template-columns:1fr; gap:.5rem; }.spx-title h2,.spx-about h2,.spx-contact h2 { font-size:2.8rem; }.spx-note-list article { grid-template-columns:4rem 1fr 1.5rem; gap:.5rem; padding:.7rem 0; }.spx-note-list time { display:none; }.spx-note-list h3 { font-size:.95rem; }.spx-about,.spx-contact { padding:3.5rem 1rem; }.spx-mobile { position:fixed; z-index:80; right:.65rem; bottom:.65rem; left:.65rem; display:grid; grid-template-columns:repeat(4,1fr); min-height:58px; background:#111216; color:#fff; border:1px solid #383b43; box-shadow:0 12px 34px rgba(0,0,0,.22); }.spx-mobile a { display:grid; place-items:center; font-size:.55rem; font-weight:900; text-decoration:none; border-right:1px solid #383b43; }.spx-mobile a:last-child { border-right:0; }
  .psx-header { grid-template-columns:1fr auto; }.psx-hero { grid-template-columns:1fr; padding:3rem 1rem 4rem; gap:2rem; }.psx-hero-name h1 { font-size:6.5rem; }.psx-hero figure { aspect-ratio:4/4.5; }.psx-hero-note { grid-column:auto; }.psx-intro { grid-template-columns:1fr; padding:4rem 1rem; gap:.7rem; }.psx-intro h2,.psx-work-head h2,.psx-service h2,.psx-about h2,.psx-contact h2 { font-size:3rem; }.psx-work { padding:4rem 1rem; }.psx-work-head { grid-template-columns:1fr; gap:.7rem; }.psx-project,.psx-project.p2 { grid-template-columns:1fr; min-height:0; }.psx-project.p2 > div { order:0; padding:0 0 1.3rem; }.psx-project > div { padding:0 0 1.3rem; }.psx-project figure { min-height:19rem; }.psx-service { padding:4rem 1rem; }.psx-service-list article { grid-template-columns:2rem 1fr; }.psx-service-list p,.psx-service-list span { grid-column:2; }.psx-about { padding:4rem 1rem; }.psx-about blockquote { padding-top:3rem; font-size:2.7rem; }.psx-contact { padding:4.5rem 1rem 6rem; }.psx-footer { padding-bottom:1rem; }
}


@media (prefers-reduced-motion: reduce) {
  .htx-card img,.tcx-item figure img { transition:none!important; transform:none!important; }
  .cbx-shell *,.cmx-shell *,.cfx-shell *,.spx-shell *,.psx-shell * { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}


/* 2026-10-03 template photography + brand asset integration */
.cbx-brand img { width:10.8rem; height:auto; }
.cbx-entry-photo { position:relative; width:min(100%,21rem); margin:2.2rem 0 0; overflow:hidden; aspect-ratio:4/5; background:#ddd6c8; }
.cbx-entry-photo img { width:100%; height:100%; object-fit:cover; }
.cbx-entry-photo figcaption { position:absolute; right:.8rem; bottom:.7rem; padding:.35rem .45rem; background:rgba(255,250,241,.92); color:var(--ink); font-size:.54rem; font-weight:850; letter-spacing:.1em; }
.cbx-footer,.cmx-footer,.cfx-footer,.psx-footer { grid-template-columns:auto 1fr 1fr auto; }
.cbx-footer > img,.cmx-footer > img,.cfx-footer > img,.psx-footer > img { width:2rem; height:2rem; object-fit:contain; }


.cmx-brand img { width:9.6rem; height:auto; }
.cmx-production { display:grid; grid-template-columns:1.05fr .95fr; min-height:24rem; margin-top:1rem; border:1px solid var(--line); background:#111414; }
.cmx-production figure { margin:0; min-height:24rem; overflow:hidden; }
.cmx-production figure img { width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.05) brightness(.78); }
.cmx-production > div { display:flex; flex-direction:column; justify-content:center; padding:clamp(2rem,4vw,3.5rem); }
.cmx-production p,.cmx-join > div > p:first-child { margin:0; color:var(--acid); font-size:.61rem; font-weight:900; letter-spacing:.13em; }
.cmx-production h3 { margin:.55rem 0 1rem; font-size:clamp(2rem,3.6vw,3.7rem); line-height:.95; letter-spacing:-.055em; }
.cmx-production span { max-width:34rem; color:#bfc6c2; line-height:1.85; }
.cmx-events { position:relative; isolation:isolate; overflow:hidden; }
.cmx-events::before { position:absolute; z-index:-1; inset:0; background:linear-gradient(rgba(215,255,63,.88),rgba(215,255,63,.88)),url('/assets/church-media-background-texture.png') center/cover; content:""; mix-blend-mode:normal; }
.cmx-join { grid-template-columns:.95fr 1.05fr; }
.cmx-join > figure { margin:0; min-height:31rem; overflow:hidden; }
.cmx-join > figure img { width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.04) brightness(.82); }
.cmx-join > div > p:last-of-type { color:#acb5b0; line-height:1.85; }
.cmx-tags { margin-top:1.5rem; }


.cfx-brand img { width:9.5rem; height:auto; }
.cfx-still { background:#8c6d45; }
.cfx-hero-photo { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.01); }
.cfx-still::after { position:absolute; z-index:1; inset:0; background:linear-gradient(145deg,rgba(36,25,20,.04),rgba(36,25,20,.25)); content:""; pointer-events:none; }
.cfx-receipt,.cfx-bean { z-index:2; }
.cfx-menu { position:relative; }
.cfx-menu::before { position:absolute; z-index:-1; inset:0; background:linear-gradient(rgba(242,233,214,.94),rgba(242,233,214,.94)),url('/assets/cafe-texture-background.png') center/cover; content:""; }
.cfx-menu-photo { width:5.2rem; aspect-ratio:1; margin:0; overflow:hidden; border-radius:50%; background:#dfd1b5; }
.cfx-menu-photo img { width:100%; height:100%; object-fit:cover; }
.cfx-order { grid-template-columns:minmax(18rem,.9fr) minmax(0,1.1fr); grid-template-areas:"photo title" "photo steps" "photo note"; gap:1.5rem clamp(3rem,7vw,7rem); }
.cfx-order-photo { grid-area:photo; margin:0; min-height:36rem; overflow:hidden; transform:rotate(-1.25deg); box-shadow:0 22px 50px rgba(76,47,27,.16); }
.cfx-order-photo img { width:100%; height:100%; object-fit:cover; }
.cfx-order-title { grid-area:title; align-self:end; }
.cfx-order ol { grid-area:steps; }
.cfx-demo-note { grid-area:note; }
.cfx-place-art { margin:0; }
.cfx-place-art img { width:100%; height:100%; min-height:28rem; object-fit:cover; }
.cfx-place-art::after { position:absolute; inset:0; background:linear-gradient(0deg,rgba(36,25,20,.34),transparent 45%); content:""; }
.cfx-place-art small { z-index:2; padding:.35rem .5rem; background:rgba(36,25,20,.78); color:#fff; }


.spx-profile { background-image:linear-gradient(rgba(17,18,22,.92),rgba(17,18,22,.97)),url('/assets/social-profile-header-background.png'); background-position:center; background-size:cover; }
.spx-logo { width:9.5rem; height:auto; margin-bottom:1.4rem; }
.spx-avatar { width:6.5rem; overflow:hidden; background:#2e3036; box-shadow:8px 8px 0 #7257ff; }
.spx-avatar img { width:100%; height:100%; object-fit:cover; }
.spx-poster { background:#222; }
.spx-poster > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.spx-poster::before { z-index:1; inset:0; width:auto; aspect-ratio:auto; left:0; top:0; border:0; border-radius:0; background:linear-gradient(180deg,rgba(17,18,22,.08),rgba(17,18,22,.62)); }
.spx-poster::after { display:none; }
.spx-note-list article { grid-template-columns:5rem 5rem 5rem 1fr 2rem; min-height:7.2rem; }
.spx-note-list article > img { width:4.2rem; height:4.2rem; object-fit:cover; border-radius:.35rem; }
.spx-about { display:grid; grid-template-columns:minmax(0,.9fr) minmax(18rem,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.spx-about > .spx-about-copy { display:block; margin:0; }
.spx-about-copy > p:first-child { color:#564b59; font-size:.58rem; font-weight:900; letter-spacing:.13em; }
.spx-about-copy > p:nth-of-type(2) { max-width:42rem; line-height:1.9; }
.spx-about-copy > div { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.5rem; }
.spx-about-copy > div span { padding:.6rem .75rem; border:1px solid #111; border-radius:999px; font-size:.57rem; font-weight:850; letter-spacing:.08em; }
.spx-about-photos { display:grid; grid-template-columns:.78fr 1.22fr; gap:.75rem; align-items:end; }
.spx-about-photos img { width:100%; height:100%; min-height:18rem; object-fit:cover; }
.spx-about-photos img:first-child { aspect-ratio:4/5; }
.spx-about-photos img:last-child { aspect-ratio:4/3; }


.psx-brand img { width:8.2rem; height:auto; }
.psx-hero figure img { filter:saturate(.9) contrast(.98); object-position:center 30%; }
.psx-project figure { background:#242424; }
.psx-project figure img { width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.22,.8,.25,1); }
.psx-project:hover figure img { transform:scale(1.018); }
.psx-project figure small { z-index:2; padding:.35rem .45rem; background:rgba(24,24,24,.76); }
.psx-case-art { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.psx-case-art figure { margin:0; min-height:18rem; overflow:hidden; border-top:1px solid #454545; }
.psx-case-art img { width:100%; height:100%; object-fit:cover; opacity:.9; }
.psx-about { grid-template-columns:1fr 1fr; }
.psx-about > figure { grid-column:1/-1; margin:0; height:clamp(20rem,42vw,37rem); overflow:hidden; }
.psx-about > figure img { width:100%; height:100%; object-fit:cover; object-position:center 52%; }


@media (max-width:900px) {
  .cmx-production { grid-template-columns:1fr; }
  .cmx-production figure { min-height:24rem; }
  .cmx-join { grid-template-columns:1fr; }
  .cmx-join > figure { min-height:24rem; }
  .cfx-order { grid-template-columns:1fr; grid-template-areas:"photo" "title" "steps" "note"; }
  .cfx-order-photo { min-height:28rem; }
  .spx-about { grid-template-columns:1fr; }
  .psx-about { grid-template-columns:1fr 1fr; }
}


@media (max-width:640px) {
  .cbx-brand img { width:8.2rem; }
  .cbx-entry-photo { width:100%; max-height:25rem; aspect-ratio:4/5; }
  .cbx-footer > img,.cmx-footer > img,.cfx-footer > img,.psx-footer > img { width:2.25rem; height:2.25rem; }
  .cbx-footer,.cmx-footer,.cfx-footer,.psx-footer { grid-template-columns:1fr; }
  .cmx-brand img { width:7.4rem; }
  .cmx-production figure { min-height:19rem; }
  .cmx-production > div { padding:2rem 1rem; }
  .cmx-join > figure { min-height:20rem; }
  .cfx-brand img { width:7.4rem; }
  .cfx-menu-photo { width:3.6rem; }
  .cfx-order-photo { min-height:21rem; transform:none; }
  .cfx-place-art img { min-height:19rem; }
  .spx-logo { width:7.8rem; }
  .spx-avatar { width:6rem; }
  .spx-note-list article { grid-template-columns:4.5rem 4rem 1fr 1.5rem; }
  .spx-note-list article > img { width:3.8rem; height:3.8rem; }
  .spx-note-list time { display:none; }
  .spx-about-photos { grid-template-columns:1fr 1fr; }
  .spx-about-photos img { min-height:13rem; }
  .psx-brand img { width:6.7rem; }
  .psx-case-art { grid-template-columns:1fr; }
  .psx-case-art figure { min-height:14rem; }
  .psx-about { grid-template-columns:1fr; }
  .psx-about > figure { height:20rem; }
}


/* 2026-10-03 template overflow hardening after live visual QA */
.cbx-sunday-card,.cmx-hero > aside,.cfx-ticket { min-width:0; }
.cbx-sunday-card strong,.cmx-hero > aside b,.cfx-ticket strong { max-width:100%; }


/* 2026-10-03 desktop proportion refinement after visual review */
@media (min-width: 901px) {
  /* Shared desktop rhythm: keep display type expressive without letting it dominate the viewport. */
  .cbx-shell h1,.cbx-shell h2,.cmx-shell h1,.cmx-shell h2,.cfx-shell h1,.cfx-shell h2,.spx-shell h1,.spx-shell h2,.psx-shell h1,.psx-shell h2 {
    max-width:100%;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
  }


  /* CHURCH BASIC */
  .cbx-hero-copy { width:min(100%,76rem); padding:6rem 3rem 5.5rem; }
  .cbx-hero-copy h1 { max-width:9.5ch; font-size:clamp(3.5rem,5.1vw,5.6rem); line-height:.98; letter-spacing:-.055em; }
  /* Keep the Sunday time card typographically strong without letting 10:30 escape its box. */
  .cbx-sunday-card { right:max(3rem,calc((100vw - 76rem)/2 + 3rem)); bottom:4rem; width:clamp(13rem,15vw,15.25rem); }
  .cbx-sunday-card strong { font-size:clamp(3.45rem,4.1vw,4.65rem); line-height:.9; letter-spacing:-.095em; }
  .cbx-first,.cbx-sunday,.cbx-access { width:min(100%,76rem); }
  .cbx-first { grid-template-columns:minmax(0,.95fr) minmax(25rem,1.05fr); gap:clamp(3rem,5vw,5.5rem); }
  .cbx-first h2,.cbx-inside h2,.cbx-sunday h2,.cbx-community h2,.cbx-access h2,.cbx-contact h2 { font-size:clamp(2.35rem,3.1vw,3.45rem); line-height:1.08; letter-spacing:-.045em; }
  .cbx-inside { grid-template-columns:minmax(0,1.08fr) minmax(28rem,.92fr); }
  .cbx-inside > div,.cbx-community-copy { padding:clamp(3.5rem,5vw,5rem); }
  .cbx-sunday { grid-template-columns:minmax(20rem,.78fr) minmax(0,1.22fr); gap:clamp(3rem,5vw,5.5rem); }
  .cbx-bigtime { width:100%; max-width:26rem; min-height:22rem; justify-self:center; padding:2.25rem; }
  .cbx-bigtime strong { font-size:clamp(5.2rem,7vw,7.25rem); line-height:.86; }
  .cbx-sunday-copy { max-width:36rem; }
  .cbx-community { grid-template-columns:minmax(30rem,.92fr) minmax(0,1.08fr); }
  .cbx-message { min-height:40rem; }
  .cbx-message-copy { width:min(100%,70rem); margin-inline:auto; padding:5.5rem 3.5rem; }
  .cbx-message-copy > span { margin-top:2.75rem; }
  .cbx-message-copy h2 { max-width:11ch; font-size:clamp(3.25rem,4.3vw,4.8rem); line-height:1.02; letter-spacing:-.05em; }
  .cbx-access { grid-template-columns:minmax(24rem,.9fr) minmax(0,1.1fr); gap:clamp(3rem,5vw,5.5rem); }


  /* CHURCH MEDIA */
  .cmx-hero-copy { width:min(100%,78rem); padding:6.5rem 3rem 6rem; }
  .cmx-hero-copy h1 { max-width:10ch; font-size:clamp(5.3rem,8.1vw,8.6rem); line-height:.82; letter-spacing:-.08em; }
  .cmx-hero > aside { right:max(3rem,calc((100vw - 78rem)/2 + 3rem)); bottom:4rem; }
  .cmx-watch,.cmx-join { width:min(100%,78rem); }
  .cmx-section-head { grid-template-columns:7rem minmax(0,1fr) auto; gap:clamp(1.5rem,3vw,3rem); }
  .cmx-section-head h2 { max-width:13ch; font-size:clamp(2.7rem,3.8vw,4.3rem); line-height:.96; letter-spacing:-.055em; }
  .cmx-feature h3 { font-size:clamp(2rem,3vw,3.35rem); line-height:1.05; }
  .cmx-events .cmx-section-head,.cmx-event-grid { width:min(100%,72rem); }
  .cmx-join { gap:clamp(3rem,5vw,5rem); }
  .cmx-join h2,.cmx-visit h2 { max-width:13ch; font-size:clamp(2.5rem,3.4vw,3.8rem); line-height:1.02; }
  .cmx-visit { grid-template-columns:minmax(0,1.1fr) minmax(28rem,.9fr); }
  .cmx-visit > div { padding:clamp(3rem,5vw,4.5rem); }


  /* CAFE FLOW */
  .cfx-hero { width:min(100%,88rem); min-height:min(48rem,calc(100svh - 110px)); margin-inline:auto; grid-template-columns:minmax(27rem,.86fr) minmax(0,1.14fr); gap:clamp(3rem,5vw,5.5rem); padding:4.5rem 3rem 5rem; }
  .cfx-copy { max-width:34rem; }
  .cfx-copy h1 { font-size:clamp(4.8rem,6.5vw,7rem); line-height:.78; letter-spacing:-.08em; }
  .cfx-copy > span { max-width:28rem; margin-top:1.5rem; }
  .cfx-still { min-height:34rem; }
  .cfx-menu { width:min(100%,78rem); }
  .cfx-menu-head { grid-template-columns:7rem minmax(0,1fr) minmax(15rem,.65fr); gap:clamp(1.5rem,3vw,3rem); }
  .cfx-menu-head h2,.cfx-order h2,.cfx-place h2,.cfx-final h2 { max-width:14ch; font-size:clamp(2.55rem,3.7vw,4.1rem); line-height:1; letter-spacing:-.055em; }
  .cfx-order { grid-template-columns:minmax(22rem,.9fr) minmax(0,1.1fr); gap:1.75rem clamp(3rem,5vw,5.5rem); padding-block:6rem; }
  .cfx-order-photo { min-height:31rem; }
  .cfx-place { width:min(100%,74rem); grid-template-columns:minmax(22rem,.9fr) minmax(0,1.1fr); gap:clamp(3rem,5vw,5rem); }
  .cfx-final { padding-inline:max(3rem,calc((100vw - 74rem)/2)); }
  .cfx-final h2 { max-width:12ch; }


  /* SOCIAL PROFILE */
  .spx-main { width:min(100%,80rem); grid-template-columns:minmax(18rem,.58fr) minmax(0,1.42fr); gap:1.4rem; padding:1.4rem; }
  .spx-profile { min-height:calc(100svh - 2.8rem); padding:2rem; }
  .spx-profile h1 { font-size:clamp(4rem,5.3vw,5.8rem); line-height:.86; letter-spacing:-.07em; }
  .spx-feature { grid-template-columns:minmax(0,1.08fr) minmax(21rem,.92fr); min-height:38rem; }
  .spx-poster { min-height:38rem; }
  .spx-feature-copy h2 { max-width:9ch; font-size:clamp(2.5rem,3.7vw,4rem); line-height:.98; }
  .spx-title { grid-template-columns:6rem minmax(0,1fr); }
  .spx-title h2,.spx-about h2,.spx-contact h2 { font-size:clamp(2.25rem,3.1vw,3.4rem); line-height:1.02; letter-spacing:-.05em; }
  .spx-about { grid-template-columns:minmax(0,.9fr) minmax(24rem,1.1fr); gap:clamp(2.5rem,4vw,4rem); }


  /* PERSONAL 01 */
  .psx-hero { width:min(100%,78rem); min-height:min(47rem,calc(100svh - 114px)); grid-template-columns:minmax(20rem,.72fr) minmax(24rem,.9fr) minmax(17rem,.58fr); gap:clamp(2.5rem,4vw,4rem); padding:4.5rem 2.5rem 5rem; }
  .psx-hero-name h1 { font-size:clamp(5rem,6.8vw,7.2rem); line-height:.72; letter-spacing:-.075em; }
  .psx-hero-name > span { max-width:21rem; }
  .psx-intro { width:min(100%,72rem); grid-template-columns:7rem minmax(0,1.25fr) minmax(18rem,.75fr); gap:clamp(1.5rem,3vw,3rem); padding:6rem 2rem; align-items:start; }
  .psx-intro h2,.psx-work-head h2,.psx-service h2,.psx-about h2,.psx-contact h2 { max-width:14ch; font-size:clamp(2.45rem,3.5vw,3.9rem); line-height:1.06; letter-spacing:-.045em; }
  .psx-intro > span { max-width:23rem; padding-top:.3rem; }
  .psx-work { padding-block:6rem; padding-inline:max(2rem,calc((100vw - 76rem)/2)); }
  .psx-work-head { grid-template-columns:7rem minmax(0,1.15fr) minmax(18rem,.85fr); gap:clamp(1.5rem,3vw,3rem); }
  .psx-service { width:min(100%,72rem); grid-template-columns:minmax(20rem,.78fr) minmax(0,1.22fr); gap:clamp(3rem,5vw,5rem); padding:6rem 2rem; }
  .psx-about { gap:clamp(3rem,5vw,5rem); padding:6rem max(2rem,calc((100vw - 72rem)/2)); }
  .psx-about blockquote { max-width:15ch; padding-top:3rem; font-size:clamp(2.3rem,3.6vw,3.9rem); line-height:1.08; }
  .psx-contact { padding:6rem max(2rem,calc((100vw - 72rem)/2)); }
  .psx-contact h2 { max-width:15ch; }
}
@media (min-width: 901px) {
  .psx-intro { grid-template-columns:7rem minmax(0,1.45fr) minmax(18rem,.65fr); }
  .psx-intro h2 { max-width:19ch; font-size:clamp(2.35rem,3vw,3.4rem); }
}


/* 2026-10-03 intermediate-width overflow correction after cross-template QA */
@media (min-width: 901px) and (max-width: 1150px) {
  .psx-hero {
    width:min(100%,72rem);
    min-height:auto;
    grid-template-columns:minmax(0,.9fr) minmax(19rem,1.1fr);
    gap:2.25rem;
    padding:4rem 2rem 4.5rem;
  }
  .psx-hero-name h1 { font-size:clamp(5rem,9vw,6.4rem); }
  .psx-hero-note {
    grid-column:1 / -1;
    width:min(100%,44rem);
    justify-self:end;
  }
  .cfx-hero {
    width:min(100%,72rem);
    min-height:auto;
    grid-template-columns:minmax(22rem,.88fr) minmax(0,1.12fr);
    gap:2rem;
    padding:4rem 2rem 4.5rem;
  }
  .cfx-still { min-width:0; }
  .cfx-receipt { right:1rem; width:min(11rem,34%); }
}




@media (max-width: 760px) {
  .care-shell, .contact-presence-shell { grid-template-columns: 1fr; gap: 2rem; }
  .care-intro, .contact-presence-intro { position: static; }
  .care-intro h2, .contact-presence-intro h2 { max-width: 11ch; }
  .care-principles article { grid-template-columns: 1fr; gap: .55rem; }
  .care-principles span { grid-row: auto; }
  .contact-presence-grid { grid-template-columns: 1fr; }
  .contact-channel:nth-child(odd):not(.contact-channel-wide) { border-right: 0; }
  .contact-channel-action { min-height: 0; }
  .contact-channel-wide, .contact-channel-hours { grid-column: 1; grid-template-columns: 1fr; }
  .contact-channel-hours > p { grid-column: 1; }
  .final-cta { grid-template-columns: 1fr; grid-template-areas: "index" "title" "copy" "action"; gap: .85rem; }
  .final-cta .button { justify-self: start; margin-top: .65rem; }
  .final-cta h2 { max-width: 13ch; font-size: clamp(2.35rem,10vw,3.7rem); }
}


/* 2026-10-04 complete cross-page heading calibration after human visual review
   Purpose: expressive typography without billboard-scale headings. This block is intentionally
   last in the cascade so legacy per-page sizes cannot silently reappear. */
@media (min-width: 761px) {
  /* RE:FRAME core pages */
  .site-page:not(.site-page-standalone) .hero h1 {
    max-width: 12ch;
    font-size: clamp(2.7rem, 4.15vw, 4.25rem);
    line-height: 1.03;
    letter-spacing: -.052em;
  }
  .site-page:not(.site-page-standalone) .page-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.45rem, 3.85vw, 4rem);
    line-height: 1.06;
    letter-spacing: -.052em;
  }
  .site-page:not(.site-page-standalone) :is(.split-intro h2,.section-heading-row h2,.demo-section h2,.faq-section h2,.region-section h2,.about-strip h2,.about-profile h2,.contact-intro h2,.contact-form-intro h2,.editorial-copy h2) {
    font-size: clamp(1.9rem, 2.75vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.04em;
  }
  .site-page:not(.site-page-standalone) .ai-band h2 {
    font-size: clamp(2.05rem, 3vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.045em;
  }
  .site-page:not(.site-page-standalone) .care-intro h2 {
    max-width: 11ch;
    font-size: clamp(2.1rem, 3.2vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -.05em;
  }
  .site-page:not(.site-page-standalone) .contact-presence-intro h2 {
    max-width: 11ch;
    font-size: clamp(2.05rem, 3vw, 3.15rem);
    line-height: 1.08;
    letter-spacing: -.048em;
  }
  .site-page:not(.site-page-standalone) .final-cta h2 {
    max-width: 16ch;
    font-size: clamp(2.15rem, 3.15vw, 3.35rem);
    line-height: 1.07;
    letter-spacing: -.047em;
  }
  .site-page:not(.site-page-standalone) .htx-head h2 {
    max-width: 12ch;
    font-size: clamp(2.2rem, 3.35vw, 3.55rem);
    line-height: 1.02;
    letter-spacing: -.05em;
  }
  .site-page:not(.site-page-standalone) :is(.tcx-heading h2,.tcx-compare h2) {
    font-size: clamp(2.1rem, 3.15vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.05em;
  }
  .site-page:not(.site-page-standalone) .tcx-item h3 {
    font-size: clamp(1.65rem, 2.25vw, 2.35rem);
    line-height: 1.08;
  }
}


@media (min-width: 901px) {
  /* Public templates keep distinct art direction, but every display size is capped after visual QA. */
  .cbx-hero-copy h1 { font-size: clamp(3.35rem, 4.3vw, 4.75rem); line-height: 1; }
  .cbx-first h2,.cbx-inside h2,.cbx-sunday h2,.cbx-community h2,.cbx-access h2,.cbx-contact h2 { font-size: clamp(2.15rem, 2.55vw, 2.9rem); line-height: 1.1; }
  .cbx-message-copy h2 { font-size: clamp(2.75rem, 3.35vw, 3.65rem); line-height: 1.05; }


  .cmx-hero-copy h1 { font-size: clamp(4.5rem, 6vw, 6.4rem); line-height: .88; }
  .cmx-section-head h2 { font-size: clamp(2.35rem, 2.9vw, 3.25rem); line-height: 1; }
  .cmx-feature h3,.cmx-production h3 { font-size: clamp(1.9rem, 2.35vw, 2.7rem); line-height: 1.06; }
  .cmx-join h2,.cmx-visit h2 { font-size: clamp(2.3rem, 2.75vw, 3.05rem); line-height: 1.04; }


  .cfx-copy h1 { font-size: clamp(4.2rem, 5.2vw, 5.55rem); line-height: .82; }
  .cfx-menu-head h2,.cfx-order h2,.cfx-place h2,.cfx-final h2 { font-size: clamp(2.25rem, 2.95vw, 3.35rem); line-height: 1.03; }


  .spx-profile h1 { font-size: clamp(3.7rem, 4.4vw, 4.8rem); line-height: .9; }
  .spx-feature-copy h2 { font-size: clamp(2.25rem, 2.85vw, 3.15rem); line-height: 1.02; }
  .spx-title h2,.spx-about h2,.spx-contact h2 { font-size: clamp(2.05rem, 2.55vw, 2.8rem); line-height: 1.06; }


  .psx-hero-name h1 { font-size: clamp(4.6rem, 5.4vw, 5.85rem); line-height: .78; }
  .psx-intro h2,.psx-work-head h2,.psx-service h2,.psx-about h2,.psx-contact h2 { font-size: clamp(2.2rem, 2.75vw, 3.05rem); line-height: 1.08; }
  .psx-intro h2 { max-width: 20ch; font-size: clamp(2.15rem, 2.55vw, 2.8rem); }
  .psx-about blockquote { font-size: clamp(2.05rem, 2.8vw, 3.05rem); line-height: 1.12; }
}


@media (max-width: 760px) {
  /* Mobile: retain hierarchy without making the first screen mostly typography. */
  .site-page:not(.site-page-standalone) .hero h1 { font-size: clamp(2rem, 8.6vw, 2.85rem); line-height: 1.06; }
  .site-page:not(.site-page-standalone) .page-hero h1 { max-width: 15ch; font-size: clamp(2.15rem, 8.7vw, 3rem); line-height: 1.08; letter-spacing: -.045em; }
  .site-page:not(.site-page-standalone) :is(.split-intro h2,.section-heading-row h2,.demo-section h2,.faq-section h2,.region-section h2,.about-strip h2,.about-profile h2,.contact-intro h2,.contact-form-intro h2,.editorial-copy h2,.ai-band h2,.care-intro h2,.contact-presence-intro h2,.final-cta h2,.htx-head h2,.tcx-heading h2,.tcx-compare h2) {
    max-width: 15ch;
    font-size: clamp(1.8rem, 7.8vw, 2.45rem);
    line-height: 1.1;
    letter-spacing: -.04em;
  }
  .site-page:not(.site-page-standalone) .final-cta h2 { max-width: 15ch; }


  .cbx-hero-copy h1 { font-size: 2.9rem; line-height: 1; }
  .cbx-first h2,.cbx-inside h2,.cbx-sunday h2,.cbx-community h2,.cbx-access h2,.cbx-contact h2 { font-size: 2.2rem; line-height: 1.1; }
  .cbx-message-copy h2 { font-size: 2.85rem; line-height: 1.06; }


  .cmx-hero-copy h1 { font-size: 4rem; line-height: .82; }
  .cmx-section-head h2 { font-size: 2.55rem; line-height: 1; }
  .cmx-feature h3,.cmx-production h3 { font-size: 2.1rem; }
  .cmx-join h2,.cmx-visit h2 { font-size: 2.45rem; line-height: 1.03; }


  .cfx-copy h1 { font-size: 4rem; line-height: .8; }
  .cfx-menu-head h2,.cfx-order h2,.cfx-place h2,.cfx-final h2 { font-size: 2.5rem; line-height: 1; }


  .spx-profile h1 { font-size: 4rem; line-height: .86; }
  .spx-feature-copy h2 { font-size: 2.45rem; line-height: 1; }
  .spx-title h2,.spx-about h2,.spx-contact h2 { font-size: 2.3rem; line-height: 1.04; }


  .psx-hero-name h1 { font-size: 5rem; line-height: .74; }
  .psx-intro h2,.psx-work-head h2,.psx-service h2,.psx-about h2,.psx-contact h2 { font-size: 2.45rem; line-height: 1.08; }
  .psx-about blockquote { font-size: 2.35rem; line-height: 1.12; }
}


/* 2026-10-05 mobile hero intrinsic-width correction after live device QA */
@media (max-width: 760px) {
  .site-page:not(.site-page-standalone) .hero {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }
  .site-page:not(.site-page-standalone) .hero-copy {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .site-page:not(.site-page-standalone) .hero h1 {
    min-width: 0;
    max-width: 100%;
  }
  .site-page:not(.site-page-standalone) .hero h1 :is(.hero-h1-line, .hero-h1-highlight) {
    white-space: normal;
  }
  .site-page:not(.site-page-standalone) :is(.hero-lede, .hero-note, .hero-actions) {
    min-width: 0;
    max-width: 100%;
  }
  .site-page:not(.site-page-standalone) .hero-actions > * {
    max-width: 100%;
  }
}
/* RE:GENESIS public-template preview — procedural, no image asset */
.htx-card-game .rgx-card-preview,
.tcx-item-game .rgx-catalog-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(76,244,255,.23), transparent 28%),
    radial-gradient(circle at 80% 78%, rgba(255,79,216,.18), transparent 30%),
    #06070a;
  color: #f7f8f9;
}
.htx-card-game .rgx-card-preview::before,
.tcx-item-game .rgx-catalog-preview::before {
  position: absolute;
  inset: -20%;
  content: "";
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: perspective(460px) rotateX(59deg) translateY(17%);
  transform-origin: center bottom;
  mask-image: linear-gradient(transparent 4%, #000 52%, transparent 96%);
}
.htx-card-game .rgx-card-preview::after,
.tcx-item-game .rgx-catalog-preview::after {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(76,244,255,.42);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 50px rgba(76,244,255,.18), inset 0 0 50px rgba(255,79,216,.08);
}
.htx-card-game .rgx-card-preview > i {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 22%;
  background: #4cf4ff;
  box-shadow: 0 0 20px rgba(76,244,255,.55);
}
.htx-card-game .rgx-card-preview > i:nth-child(1) { left: 21%; top: 27%; background:#ff4fd8; }
.htx-card-game .rgx-card-preview > i:nth-child(2) { right: 20%; top: 31%; background:#ffc857; }
.htx-card-game .rgx-card-preview > i:nth-child(3) { left: 27%; bottom: 20%; background:#9878ff; }
.htx-card-game .rgx-card-preview > i:nth-child(4) { right: 28%; bottom: 24%; background:#76ffb7; }
.htx-card-game .rgx-card-preview strong,
.tcx-item-game .rgx-catalog-preview > strong {
  position: relative;
  z-index: 2;
  display: block;
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: .82;
  letter-spacing: -.09em;
}
.htx-card-game .rgx-card-preview em,
.tcx-item-game .rgx-catalog-preview > em {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  color: rgba(255,255,255,.78);
  font-size: .65rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .2em;
}
.htx-card-game .rgx-card-preview small,
.tcx-item-game .rgx-catalog-preview > small {
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: 1rem;
  color: rgba(255,255,255,.45);
  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .1em;
}
.tcx-item-game figure { background:#06070a; }
.tcx-item-game .rgx-catalog-preview { min-height: 100%; }
.tcx-item-game .rgx-catalog-grid {
  position: absolute;
  inset: 12% 18%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 1fr;
  gap: 4%;
  opacity: .56;
  transform: rotate(-8deg) scale(.94);
}
.tcx-item-game .rgx-catalog-grid i {
  border-radius: 16%;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.tcx-item-game .rgx-catalog-grid i:nth-child(3n+1) { background:#4cf4ff; box-shadow:0 0 18px rgba(76,244,255,.36); }
.tcx-item-game .rgx-catalog-grid i:nth-child(4n+2) { background:#ff4fd8; box-shadow:0 0 18px rgba(255,79,216,.30); }
.tcx-item-game .rgx-catalog-grid i:nth-child(5n+3) { background:#ffc857; box-shadow:0 0 18px rgba(255,200,87,.28); }
.tcx-item-game .rgx-catalog-grid i:nth-child(7n+4) { background:#9878ff; box-shadow:0 0 18px rgba(152,120,255,.30); }
@media (prefers-reduced-motion:no-preference) {
  .htx-card-game:hover .rgx-card-preview::after,
  .tcx-item-game:hover .rgx-catalog-preview::after { transform: scale(1.08); transition: transform .5s cubic-bezier(.18,.75,.18,1); }
  .tcx-item-game:hover .rgx-catalog-grid { transform: rotate(0deg) scale(1); transition: transform .55s cubic-bezier(.18,.75,.18,1); }
}