/* ============================================================ XERF Landing Page (TH) — BEHAP Wellness Uses tokens from colors_and_type.css ============================================================ */ *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Reduced-motion safety net (Sprint 0) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--ivory-white); color: var(--graphite-ink); font-family: var(--font-thai); line-height: 1.7; } img { display: block; max-width: 100%; } /* ============================================================ English variant — swap Thai font for brand serif + sans. Applied via . Big titles use the display serif (Cormorant Garamond); UI/sub-heads use the geometric sans (Jost), matching the BEHAP brand system. ============================================================ */ body.en { font-family: var(--font-sans); line-height: 1.65; } body.en .hero h1, body.en .sec-title, body.en .cta-band h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } body.en .hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.16; } body.en .sec-title { line-height: 1.22; } body.en .btn, body.en .ph-nav a, body.en .faq-q, body.en .benefit-card h3, body.en .bf-cell h3, body.en .freq-card h3, body.en .mode h4, body.en .phase h3, body.en .why-item h3, body.en .proc-result h3, body.en .cta-contact h3, body.en .price-card p, body.en .hero .sub, body.en .sec-lead { font-family: var(--font-sans); } body.en .hero .sub, body.en .sec-lead { line-height: 1.65; } button { font-family: var(--font-thai); cursor: pointer; } [data-lucide] { width: 20px; height: 20px; stroke-width: 1.6; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .section { padding: clamp(56px, 8vw, 104px) 0; } .section.alt { background: var(--soft-champagne); } .section.mist { background: var(--green-mist); } /* shared heads */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: var(--deep-green); } .eyebrow::before { content:""; width: 26px; height: 1.5px; background: var(--sand-line); } .eyebrow.center { justify-content: center; } .sec-title { font-family: var(--font-thai); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.35; color: var(--deep-green); margin: 16px 0 0; letter-spacing: 0; text-wrap: balance; } .sec-lead { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--cocoa-taupe); line-height: 1.85; margin: 18px 0 0; max-width: 62ch; } .disc { font-size: 13px; color: var(--cocoa-taupe); font-style: italic; line-height: 1.7; margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--sand-line); max-width: 60ch; } .head-center { text-align: center; max-width: 720px; margin: 0 auto; } .head-center .sec-lead { margin-left: auto; margin-right: auto; } /* ============================================================ HEADER */ .page-header { position: sticky; top: 0; z-index: 60; background: rgba(250,247,240,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-hair); } .ph-in { display: flex; align-items: center; justify-content: space-between; height: 82px; } .ph-logo img { height: 54px; } .ph-nav { display: flex; align-items: center; gap: 28px; } .ph-nav a { font-size: 14.5px; color: var(--graphite-ink); transition: color var(--dur-fast) var(--ease-soft); } .ph-nav a:hover { color: var(--deep-green); } .ph-right { display: flex; align-items: center; gap: 16px; } .lang-link { font-family: var(--font-sans); font-size: 13px; letter-spacing: .04em; color: var(--cocoa-taupe); } .lang-link b { color: var(--deep-green); } .btn { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; border-radius: var(--radius-pill); padding: 12px 22px; border: 1px solid transparent; transition: all var(--dur-base) var(--ease-soft); white-space: nowrap; line-height: 1; } .btn svg, .btn [data-lucide] { width: 17px; height: 17px; } .btn-primary { background: var(--deep-green); color: var(--text-on-green); box-shadow: var(--shadow-green); } .btn-primary:hover { background: var(--deep-green-90); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(15,63,54,0.26); } .btn-primary:active { background: var(--deep-green-80); transform: translateY(0); } .btn-secondary { background: transparent; color: var(--deep-green); border-color: var(--deep-green); } .btn-secondary:hover { background: var(--deep-green-08); } .btn-light { background: var(--ivory-white); color: var(--deep-green); } .btn-light:hover { background: #fff; transform: translateY(-2px); } .ph-menu { display: none; background: none; border: 0; color: var(--deep-green); padding: 6px; } @media (max-width: 880px) { .ph-nav, .ph-right .btn-secondary { display: none; } } /* ============================================================ HERO */ .hero { position: relative; overflow: hidden; } .hero::after { content:""; position: absolute; right: -160px; top: -140px; width: 520px; height: 520px; opacity: .045; pointer-events: none; background: url(assets/behap-emblem.png) no-repeat center/contain; } .hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); } .hero h1 { font-family: var(--font-thai); font-weight: 600; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.3; color: var(--deep-green); margin: 18px 0 0; text-wrap: balance; } .hero .sub { font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--cocoa-taupe); line-height: 1.8; margin: 22px 0 0; max-width: 48ch; } .hero .support { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 36px 0 0; font-size: 14.5px; color: var(--cocoa-taupe); } .hero .support .pin, .hero .support > span { white-space: nowrap; } .hero .support .pin { display: inline-flex; align-items: center; gap: 7px; } .hero .support svg { width: 16px; height: 16px; color: var(--deep-green); } .hero .support .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sand-line); } .hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 32px 0 0; } .hero .footer-line { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--cocoa-taupe); } .hero .footer-line svg { width: 16px; height: 16px; color: var(--deep-green); } .hero-disc { margin: 28px 0 0; font-size: 12.5px; color: var(--cocoa-taupe); line-height: 1.6; padding-left: 14px; border-left: 2px solid var(--sand-line); max-width: 52ch; } .hero-invite { margin: 18px 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--deep-green); font-weight: 500; max-width: 44ch; } .hero-invite b { font-weight: 600; } .hero-visual { position: relative; justify-self: center; width: 100%; max-width: 460px; } .portrait { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: var(--green-mist); box-shadow: var(--shadow-lg); } .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } .hero-visual::before { content:""; position: absolute; inset: 22px -22px -22px 22px; border-radius: var(--radius-lg); background: var(--green-mist); z-index: -1; } .freq-chip { position: absolute; right: 16px; top: 16px; background: rgba(250,247,240,0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--radius-pill); padding: 8px 14px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--deep-green); letter-spacing: .04em; box-shadow: var(--shadow-xs); display: inline-flex; align-items: center; gap: 7px; } .freq-chip .ring { width: 8px; height: 8px; border-radius: 50%; background: var(--deep-green); box-shadow: 0 0 0 3px var(--deep-green-08); } .depth-badge { position: absolute; left: -26px; bottom: 32px; width: 198px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 12px; display: flex; gap: 12px; align-items: center; } .depth-badge .thumb { width: 50px; height: 58px; border-radius: 8px; overflow: hidden; flex: none; } .depth-badge .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; } .depth-badge .thumb.mini-depth { display: flex; flex-direction: column; gap: 3px; } .depth-badge .thumb.mini-depth span { flex: 1; border-radius: 3px; } .depth-badge .thumb.mini-depth span:nth-child(1) { background: var(--soft-champagne); } .depth-badge .thumb.mini-depth span:nth-child(2) { background: var(--green-mist); } .depth-badge .thumb.mini-depth span:nth-child(3) { background: var(--deep-green); } .depth-badge .t { font-size: 12.5px; font-weight: 500; color: var(--deep-green); line-height: 1.35; } .depth-badge .s { font-family: var(--font-sans); font-size: 11px; color: var(--cocoa-taupe); margin-top: 3px; } /* ============================================================ SPLIT (what is XERF) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .split.reverse .split-media { order: -1; } .split-media { position: relative; } .media-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; } .media-card.ratio-portrait { aspect-ratio: 4/5; } .media-card img { width: 100%; height: 100%; object-fit: cover; } .media-card.device { background: #ECECEC; aspect-ratio: 16 / 9; } .media-card.device img { object-fit: contain; } /* ============================================================ BENEFIT CARDS */ .benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: clamp(32px, 4vw, 48px); } .benefit-card { background: var(--ivory-white); border: 1px solid rgba(15,63,54,0.07); border-radius: var(--radius-lg); padding: 28px 28px 30px; transition: all var(--dur-base) var(--ease-soft); } .benefit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .benefit-card .ic { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--green-mist); display: flex; align-items: center; justify-content: center; color: var(--deep-green); margin-bottom: 18px; } .benefit-card h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.2rem; color: var(--deep-green); margin: 0 0 8px; line-height: 1.4; } .benefit-card p { margin: 0; font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.75; } /* ---- editorial feature grid (Benefits, "more interesting" form) ---- */ .bf-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(32px, 4vw, 48px); background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line-hair); } .bf-cell { position: relative; padding: clamp(28px, 3vw, 42px); overflow: hidden; border-top: 1px solid var(--line-hair); border-left: 1px solid var(--line-hair); transition: background var(--dur-base) var(--ease-soft); } .bf-cell:nth-child(-n+2) { border-top: 0; } .bf-cell:nth-child(odd) { border-left: 0; } .bf-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--deep-green); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-base) var(--ease-soft); } .bf-cell:hover { background: var(--green-mist); } .bf-cell:hover::before { transform: scaleY(1); } .bf-num { position: absolute; top: clamp(18px, 2vw, 28px); right: clamp(20px, 2.5vw, 34px); font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--deep-green); opacity: .14; pointer-events: none; } .bf-cell:hover .bf-num { opacity: .26; } .bf-ic { width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--green-mist); display: flex; align-items: center; justify-content: center; color: var(--deep-green); margin-bottom: 20px; } .bf-cell:hover .bf-ic { background: var(--deep-green); color: var(--text-on-green); } .bf-ic svg { width: 25px; height: 25px; stroke-width: 1.6; } .bf-cell h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.22rem; color: var(--deep-green); margin: 0 0 9px; line-height: 1.4; max-width: 22ch; } .bf-cell p { margin: 0; font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.75; max-width: 38ch; } .bf-cell .bf-tag { display: inline-block; margin-top: 16px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-green); background: var(--deep-green-08); border-radius: var(--radius-pill); padding: 5px 12px; } @media (max-width: 680px){ .bf-grid { grid-template-columns: 1fr; } .bf-cell { border-left: 0 !important; border-top: 1px solid var(--line-hair) !important; } .bf-cell:first-child { border-top: 0 !important; } } /* ============================================================ FREQUENCY CARDS */ .freq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(32px, 4vw, 48px); } .freq-card { background: #fff; border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); border: 1px solid var(--line-hair); } .freq-card .mhz { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; color: var(--deep-green); line-height: 1; } .freq-card .mhz span { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: .04em; } .freq-card h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.15rem; color: var(--graphite-ink); margin: 14px 0 8px; } .freq-card p { margin: 0; font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.8; } .freq-card .depthbar { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--font-sans); font-size: 12px; color: var(--cocoa-taupe); } .freq-card .depthbar .track { flex: 1; height: 6px; border-radius: 4px; background: var(--green-mist); overflow: hidden; } .freq-card .depthbar .fill { height: 100%; background: var(--deep-green); border-radius: 4px; } .freq-note { margin-top: 24px; font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.8; max-width: 70ch; } /* ---- skin-layer depth diagram (replaces lifted screenshot) ---- */ .skin-diagram { position: relative; aspect-ratio: 4/5; width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; display: flex; flex-direction: column; font-family: var(--font-thai); } .sd-layer { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 22px; border-bottom: 1px dashed rgba(15,63,54,0.16); } .sd-layer:last-child { border-bottom: 0; } .sd-layer .nm { font-weight: 600; color: var(--deep-green); font-size: 15px; line-height: 1.2; position: relative; z-index: 3; } .sd-layer .en { font-family: var(--font-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cocoa-taupe); margin-top: 2px; position: relative; z-index: 3; } .sd-epi { flex: 0.7; background: var(--soft-champagne); } .sd-derm { flex: 1.5; background: var(--green-mist); } .sd-smas { flex: 1.25; background: #DCE7E0; } .sd-fat { flex: 1.1; background: var(--ivory-deep); } /* depth scale on the right */ .sd-scale { position: absolute; top: 0; right: 0; bottom: 0; width: 64px; z-index: 4; border-left: 1px solid var(--line-hair); background: rgba(250,247,240,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0; } .sd-scale span { font-family: var(--font-sans); font-size: 10px; letter-spacing: .06em; color: var(--cocoa-taupe); } /* energy beams */ .sd-beam { position: absolute; top: 0; width: 30px; border-radius: 0 0 16px 16px; z-index: 2; display: flex; justify-content: center; } .sd-beam .tag { position: absolute; top: 12px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text-on-green); background: var(--deep-green); padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: var(--shadow-xs); } .sd-beam.shallow { left: 38%; height: 44%; background: linear-gradient(180deg, rgba(15,63,54,0.42), rgba(15,63,54,0.04)); } .sd-beam.deep { left: 60%; height: 88%; background: linear-gradient(180deg, rgba(15,63,54,0.55), rgba(15,63,54,0.06)); } .sd-beam .arrow { position: absolute; bottom: 6px; width: 12px; height: 12px; border-right: 2px solid var(--deep-green); border-bottom: 2px solid var(--deep-green); transform: rotate(45deg); } .sd-cap { font-family: var(--font-sans); font-size: 12px; color: var(--cocoa-taupe); text-align: center; margin-top: 12px; line-height: 1.5; } @media (max-width: 880px){ .skin-diagram { aspect-ratio: 3/2; max-width: 460px; margin: 0 auto; } } /* ============================================================ CHECKLIST */ .checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; margin-top: clamp(28px, 4vw, 40px); } .check-item { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: var(--graphite-ink); line-height: 1.6; } .check-item .ck { width: 26px; height: 26px; border-radius: 50%; background: var(--deep-green); color: var(--text-on-green); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; } .check-item .ck svg { width: 15px; height: 15px; } /* ============================================================ COMPARISON TABLE */ .cmp { margin-top: clamp(32px, 4vw, 48px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line-hair); background: #fff; } .cmp table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .cmp th, .cmp td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line-hair); vertical-align: middle; } .cmp thead th { font-family: var(--font-sans); font-weight: 600; color: var(--cocoa-taupe); font-size: 13px; background: var(--ivory-deep); } .cmp thead th.xerf { color: var(--text-on-green); background: var(--deep-green); } .cmp tbody th { font-weight: 500; color: var(--graphite-ink); } .cmp td.xerf { background: var(--deep-green-04); color: var(--deep-green); font-weight: 500; } .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; } .cmp-wrap { overflow-x: auto; } /* ============================================================ WHY BEHAP */ .why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(32px, 4vw, 48px); } .why-item { display: flex; gap: 18px; align-items: flex-start; } .why-item .ic { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--green-mist); color: var(--deep-green); display: flex; align-items: center; justify-content: center; flex: none; } .why-item h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.1rem; color: var(--deep-green); margin: 2px 0 7px; line-height: 1.4; } .why-item p { margin: 0; font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.8; } .why-item p .loc { display: block; margin-top: 4px; } /* ============================================================ PROCEDURE */ .proc-spec { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 44px); } .proc-stat { background: #fff; border-radius: var(--radius-md); padding: 22px 20px; text-align: center; box-shadow: var(--shadow-xs); border: 1px solid var(--line-hair); } .proc-stat .v { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; color: var(--deep-green); line-height: 1.1; } .proc-stat .v.sm { font-family: var(--font-thai); font-size: 1.15rem; } .proc-stat .k { font-size: 12.5px; color: var(--cocoa-taupe); margin-top: 7px; } .proc-result { margin-top: 26px; background: var(--ivory-white); border-radius: var(--radius-lg); padding: 26px 30px; border: 1px solid rgba(15,63,54,0.07); } .proc-result h3 { font-family: var(--font-thai); font-weight: 600; color: var(--deep-green); font-size: 1.15rem; margin: 0 0 8px; } .proc-result p { margin: 0; font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.8; } /* ============================================================ PRICING */ .price-card { max-width: 760px; margin: clamp(32px, 4vw, 44px) auto 0; background: var(--soft-champagne); border-radius: var(--radius-lg); padding: clamp(32px, 4vw, 48px); text-align: center; } .price-card .price-line { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--deep-green); line-height: 1.3; } .price-card p { font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.8; margin: 14px auto 0; max-width: 56ch; } .price-card .note { font-size: 12.5px; font-style: italic; opacity: .9; } .price-card .btn { margin-top: 26px; } /* ============================================================ FAQ */ .faq-list { max-width: 820px; margin: clamp(28px, 4vw, 40px) auto 0; } .faq-item { border-bottom: 1px solid var(--line-fine); } .faq-q { width: 100%; background: none; border: 0; padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; font-family: var(--font-thai); font-size: 1.05rem; font-weight: 500; color: var(--deep-green); } .faq-q .chev { flex: none; color: var(--cocoa-taupe); transition: transform var(--dur-base) var(--ease-soft); } .faq-item.open .faq-q .chev { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-soft); } .faq-a-inner { padding: 0 4px 22px; font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.85; max-width: 70ch; } /* ============================================================ CTA BAND */ .cta-band { background: var(--deep-green); color: var(--text-on-green); position: relative; overflow: hidden; } .cta-band::after { content:""; position: absolute; left: -120px; bottom: -160px; width: 520px; height: 520px; background: url(assets/behap-emblem.png) no-repeat center/contain; opacity: .06; pointer-events: none; } .cta-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .cta-band .eyebrow { color: var(--text-on-green-mut); } .cta-band .eyebrow::before { background: var(--line-on-green); } .cta-band h2 { font-family: var(--font-thai); font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--text-on-green); margin: 16px 0 0; line-height: 1.4; } .cta-band p { color: var(--text-on-green-mut); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.85; margin: 18px 0 0; max-width: 54ch; } .cta-incl { margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; } .cta-incl .c { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text-on-green); } .cta-incl .c svg { width: 18px; height: 18px; color: var(--text-on-green-mut); flex: none; } .cta-contact { background: var(--ivory-white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); } .cta-contact h3 { font-family: var(--font-thai); font-weight: 600; color: var(--deep-green); margin: 0 0 18px; font-size: 1.2rem; } .cta-contact .row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line-hair); font-size: 14.5px; color: var(--graphite-ink); } .cta-contact .row:last-of-type { border-bottom: 0; } .cta-contact .row svg { width: 19px; height: 19px; color: var(--deep-green); flex: none; } .cta-contact .btn { margin-top: 20px; } .cta-band .disc { color: var(--text-on-green-mut); border-color: var(--line-on-green); margin-top: 24px; } /* ============================================================ CREDIBILITY + SPECS */ .cred-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .cred { display: inline-flex; align-items: center; gap: 8px; background: var(--green-mist); color: var(--deep-green); border-radius: var(--radius-pill); padding: 8px 15px; font-size: 13px; font-weight: 500; } .cred svg { width: 16px; height: 16px; } .spec-mini { display: flex; gap: 0; margin-top: 26px; border: 1px solid var(--line-hair); border-radius: var(--radius-md); overflow: hidden; background: #fff; max-width: 520px; } .spec-mini .s { flex: 1; padding: 16px 14px; text-align: center; border-right: 1px solid var(--line-hair); } .spec-mini .s:last-child { border-right: 0; } .spec-mini .n { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--deep-green); line-height: 1; } .spec-mini .l { font-size: 11.5px; color: var(--cocoa-taupe); margin-top: 6px; line-height: 1.4; } /* depth modes */ .mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .mode { background: var(--ivory-white); border: 1px solid rgba(15,63,54,0.08); border-radius: var(--radius-md); padding: 20px 22px; } .mode .top { display: flex; align-items: center; justify-content: space-between; } .mode h4 { font-family: var(--font-thai); font-weight: 600; color: var(--deep-green); margin: 0; font-size: 1.05rem; } .mode .lvl { font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cocoa-taupe); } .mode .dots { display: flex; gap: 5px; margin: 14px 0 10px; } .mode .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sand-line); } .mode .dots i.on { background: var(--deep-green); } .mode p { margin: 0; font-size: 13px; color: var(--cocoa-taupe); line-height: 1.6; } @media (max-width: 720px){ .mode-grid { grid-template-columns: 1fr; } } /* 2-phase mechanism */ .phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(28px, 4vw, 44px); } /* before/after histology comparison */ .histo { margin-top: clamp(28px, 4vw, 44px); background: #fff; border: 1px solid var(--line-hair); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .histo-grid { display: grid; grid-template-columns: 1fr 1fr; } .histo-panel { position: relative; padding: 22px 24px 24px; } .histo-panel + .histo-panel { border-left: 1px solid var(--line-hair); } .histo-panel .ba-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 13px; border-radius: var(--radius-pill); white-space: nowrap; } .histo-panel.before .ba-label { background: var(--ivory-deep); color: var(--cocoa-taupe); } .histo-panel.after .ba-label { background: var(--deep-green); color: var(--text-on-green); } .histo-panel .ba-label .th { font-family: var(--font-thai); } .histo-img { position: relative; margin-top: 16px; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; background: var(--green-mist); } .histo-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* layer ticks down the inner edge of each image */ .histo-points { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .histo-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--cocoa-taupe); line-height: 1.55; } .histo-points li .mk { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px; display: flex; align-items: center; justify-content: center; } .histo-panel.before .mk { background: var(--ivory-deep); } .histo-panel.after .mk { background: var(--green-mist); } .histo-panel.after .mk svg { width: 12px; height: 12px; color: var(--deep-green); } .histo-panel.before .mk i { width: 6px; height: 2px; background: var(--cocoa-taupe); border-radius: 2px; } .histo-caption { padding: 16px 24px; background: var(--ivory-deep); border-top: 1px solid var(--line-hair); font-size: 12.5px; color: var(--cocoa-taupe); line-height: 1.7; text-align: center; } @media (max-width: 720px){ .histo-grid { grid-template-columns: 1fr; } .histo-panel + .histo-panel { border-left: 0; border-top: 1px solid var(--line-hair); } } .phase { background: #fff; border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); border: 1px solid var(--line-hair); position: relative; } .phase .ph-num { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text-on-green); background: var(--deep-green); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .phase .when { font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--deep-green); font-weight: 600; } .phase h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.2rem; color: var(--graphite-ink); margin: 6px 0 8px; } .phase p { margin: 0; font-size: 14.5px; color: var(--cocoa-taupe); line-height: 1.8; } @media (max-width: 720px){ .phase-grid { grid-template-columns: 1fr; } } /* ============================================================ THE BEHAP METHOD */ .method { background: var(--deep-green); color: var(--text-on-green); position: relative; overflow: hidden; } .method::after { content:""; position: absolute; right: -160px; top: -120px; width: 480px; height: 480px; background: url(assets/behap-emblem.png) no-repeat center/contain; opacity: .05; pointer-events: none; } .method .eyebrow { color: var(--text-on-green-mut); } .method .eyebrow::before { background: var(--line-on-green); } .method .sec-title { color: var(--text-on-green); } .method .sec-lead { color: var(--text-on-green-mut); } .method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: clamp(32px, 4vw, 48px); position: relative; z-index: 1; } .method-card { background: rgba(244,239,230,0.05); border: 1px solid var(--line-on-green); border-radius: var(--radius-lg); padding: 26px 26px 28px; transition: all var(--dur-base) var(--ease-soft); } .method-card:hover { background: rgba(244,239,230,0.09); } .method-card .ic { width: 46px; height: 46px; border-radius: var(--radius-md); background: rgba(244,239,230,0.1); display: flex; align-items: center; justify-content: center; color: var(--text-on-green); margin-bottom: 18px; } .method-card .ic svg { width: 22px; height: 22px; } .method-card h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.18rem; color: var(--text-on-green); margin: 0 0 9px; line-height: 1.4; } .method-card p { margin: 0; font-size: 14.5px; color: var(--text-on-green-mut); line-height: 1.8; } .method-card .quote { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--text-on-green); margin: 0 0 9px; line-height: 1.4; } .method-foot { margin-top: clamp(28px, 4vw, 40px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: relative; z-index: 1; } .method .disc { color: var(--text-on-green-mut); border-color: var(--line-on-green); margin-top: 0; } @media (max-width: 720px){ .method-grid { grid-template-columns: 1fr; } } /* ---- availability badge (hero) ---- */ .avail-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 4px; background: var(--green-mist); color: var(--deep-green); border-radius: var(--radius-pill); padding: 7px 15px 7px 13px; font-family: var(--font-thai); font-size: 13.5px; font-weight: 600; } .avail-badge .ping { position: relative; width: 9px; height: 9px; flex: none; } .avail-badge .ping i { position: absolute; inset: 0; border-radius: 50%; background: var(--deep-green); } .avail-badge .ping i.pulse { animation: availPulse 2s var(--ease-soft) infinite; } @keyframes availPulse { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(2.6); opacity: 0; } } /* ---- case counter ticker (about section) ---- */ .case-ticker { display: flex; align-items: stretch; gap: 0; margin-top: 26px; background: var(--deep-green); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-green); } .case-ticker .ct-main { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; } .case-ticker .ct-num { font-family: var(--font-display); font-weight: 600; line-height: 1; color: var(--text-on-green); font-size: clamp(2.6rem, 6vw, 3.6rem); display: flex; align-items: baseline; gap: 4px; } .case-ticker .ct-num .plus { font-size: .55em; font-weight: 600; } .case-ticker .ct-label { font-family: var(--font-thai); color: var(--text-on-green); font-size: 14.5px; font-weight: 500; margin-top: 6px; } .case-ticker .ct-label small { display: block; font-family: var(--font-sans); color: var(--text-on-green-mut); font-size: 12px; letter-spacing: .04em; margin-top: 3px; } .case-ticker .ct-slot { flex: 1; min-width: 0; border-left: 1px solid var(--line-on-green); display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--deep-green-90); } .case-ticker .ct-slot image-slot { width: 100%; height: 100%; min-height: 96px; display: block; border-radius: var(--radius-md); overflow: hidden; } @media (max-width: 560px){ .case-ticker { flex-direction: column; } .case-ticker .ct-slot { border-left: 0; border-top: 1px solid var(--line-on-green); min-height: 120px; } } /* ---- figure source / reference line ---- */ .fig-ref { margin: 10px 0 0; font-family: var(--font-sans); font-size: 11.5px; color: var(--cocoa-taupe); line-height: 1.6; text-align: center; } .fig-ref a { color: var(--deep-green); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--sand-line); } .fig-ref a:hover { text-decoration-color: var(--deep-green); } /* ---- comfort section: real photo + feature list ---- */ .comfort-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: clamp(32px, 4vw, 48px); } .comfort-photo { position: relative; } .comfort-photo .media-card { border-radius: var(--radius-lg); overflow: visible; box-shadow: none; aspect-ratio: 4/5; background: var(--green-mist); } .comfort-photo .media-card image-slot { width: 100%; height: 100%; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .comfort-photo .media-card img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; } .comfort-photo .photo-tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; background: rgba(250,247,240,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--deep-green); font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); display: inline-flex; align-items: center; gap: 7px; } .comfort-photo .photo-tag [data-lucide] { width: 14px; height: 14px; } .comfort-features { display: flex; flex-direction: column; gap: 22px; } @media (max-width: 860px){ .comfort-grid { grid-template-columns: 1fr; gap: 32px; } .comfort-photo { max-width: 420px; margin: 0 auto; } } /* ============================================================ DOCTOR / TEAM */ .doctor-card { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(32px, 4vw, 48px); background: #fff; border: 1px solid var(--line-hair); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .doctor-photo { position: relative; align-self: stretch; min-height: 100%; background: var(--green-mist); } .doctor-photo image-slot { width: 100%; height: 100%; min-height: 360px; display: block; } .doctor-body { padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px) clamp(28px, 4vw, 44px) 0; } .doctor-body .eyebrow { margin-bottom: 14px; } .doctor-body h3 { font-family: var(--font-thai); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--deep-green); margin: 0 0 4px; line-height: 1.3; } .doctor-body .role { font-family: var(--font-sans); font-size: 13.5px; letter-spacing: .04em; color: var(--cocoa-taupe); margin: 0 0 18px; } .doctor-body .quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--deep-green); margin: 0 0 20px; } .doctor-creds { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 11px; } .doctor-creds li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--graphite-ink); line-height: 1.6; } .doctor-creds li svg { width: 18px; height: 18px; color: var(--deep-green); flex: none; margin-top: 3px; } @media (max-width: 760px){ .doctor-card { grid-template-columns: 1fr; } .doctor-photo image-slot { min-height: 320px; aspect-ratio: 4/3; } .doctor-body { padding: clamp(24px,5vw,32px); } } /* ============================================================ PATIENT REVIEWS */ .rev-summary { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 36px); flex-wrap: wrap; margin: clamp(28px, 4vw, 40px) auto clamp(28px,4vw,40px); max-width: 640px; background: #fff; border: 1px solid var(--line-hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(20px, 3vw, 26px) clamp(24px, 4vw, 40px); } .rev-summary .rs-num { font-family: var(--font-display); font-weight: 600; font-size: 3rem; line-height: 1; color: var(--deep-green); } .rev-summary .rs-stars { display: inline-flex; gap: 2px; } .rev-summary .rs-stars svg { width: 17px; height: 17px; fill: #E8B33D; } .rev-summary .rs-score { display: flex; flex-direction: column; align-items: center; gap: 5px; } .rev-summary .rs-divider { width: 1px; align-self: stretch; background: var(--line-hair); } .rev-summary .rs-meta { display: flex; flex-direction: column; gap: 5px; } .rev-summary .rs-google { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--graphite-ink); } .rev-summary .rs-google svg { width: 20px; height: 20px; } .rev-summary .rs-sub { font-family: var(--font-thai); font-size: 13px; color: var(--cocoa-taupe); } .rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .rev-card { background: #fff; border: 1px solid var(--line-hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 26px 26px 24px; display: flex; flex-direction: column; position: relative; transition: all var(--dur-base) var(--ease-soft); } .rev-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .rev-gmark { position: absolute; top: 22px; right: 22px; width: 18px; height: 18px; opacity: .9; } .rev-top { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; } .rev-av { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 18px; } .rev-name { font-family: var(--font-thai); font-weight: 600; font-size: 15px; color: var(--graphite-ink); line-height: 1.2; } .rev-date { font-family: var(--font-sans); font-size: 12px; color: var(--cocoa-taupe); margin-top: 3px; } .rev-stars { display: inline-flex; gap: 1px; margin-bottom: 11px; } .rev-stars svg { width: 15px; height: 15px; fill: #E8B33D; } .rev-text { font-family: var(--font-thai); font-size: 14px; color: var(--graphite-ink); line-height: 1.75; margin: 0; flex: 1; } @media (max-width: 900px){ .rev-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .rev-summary .rs-divider { display: none; } } /* ============================================================ STICKY MOBILE CTA */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(250,247,240,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line-hair); box-shadow: 0 -6px 24px rgba(15,63,54,0.08); } .mobile-cta a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-thai); font-size: 15px; font-weight: 600; border-radius: var(--radius-pill); padding: 14px 10px; text-decoration: none; line-height: 1; } .mobile-cta a svg { width: 18px; height: 18px; } .mobile-cta .mc-line { background: var(--deep-green); color: var(--text-on-green); box-shadow: var(--shadow-green); } .mobile-cta .mc-call { background: transparent; color: var(--deep-green); border: 1px solid var(--deep-green); } @media (max-width: 760px){ .mobile-cta { display: flex; } body { padding-bottom: 74px; } } /* ============================================================ RF DEPTH / "not all RF is the same" */ .rf-myth { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-top: clamp(28px, 4vw, 40px); background: var(--deep-green); color: var(--text-on-green); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px) clamp(26px, 4vw, 38px); box-shadow: var(--shadow-green); } .rf-myth .q { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: .9; color: var(--text-on-green); opacity: .9; } .rf-myth h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.2rem; color: var(--text-on-green); margin: 0 0 8px; line-height: 1.4; } .rf-myth p { margin: 0; font-size: 14.5px; color: var(--text-on-green-mut); line-height: 1.8; max-width: 70ch; } .rf-myth p b { color: var(--text-on-green); } @media (max-width: 560px){ .rf-myth { grid-template-columns: 1fr; gap: 10px; } } .rf-note { margin-top: 22px; } .research-note { display: flex; gap: 13px; align-items: flex-start; max-width: 760px; margin: clamp(28px, 4vw, 40px) auto 0; background: var(--green-mist); border-radius: var(--radius-md); padding: 18px 22px; } .research-note svg { width: 20px; height: 20px; color: var(--deep-green); flex: none; margin-top: 2px; } .research-note p { margin: 0; font-size: 13.5px; color: var(--deep-green); line-height: 1.7; } .evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(28px, 4vw, 44px); } .ev-card { background: var(--ivory-white); border: 1px solid var(--line-hair); border-radius: var(--radius-lg); padding: 38px 30px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: var(--shadow-sm); transition: all var(--dur-base) var(--ease-soft); } .ev-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } /* luxury circular gauge medallion */ .ev-gauge { position: relative; width: 146px; height: 146px; margin-bottom: 24px; } .ev-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .ev-gauge .halo { fill: var(--green-mist); opacity: .5; } .ev-gauge .track { fill: none; stroke: var(--sand-line); stroke-opacity: .55; stroke-width: 6; } .ev-gauge .prog { fill: none; stroke: var(--deep-green); stroke-width: 6; stroke-linecap: round; stroke-dashoffset: 0; } .ev-gauge .tick { stroke: var(--deep-green); stroke-opacity: .22; stroke-width: 1.4; } .ev-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .g-num { font-family: var(--font-display); font-weight: 600; font-size: 2.55rem; color: var(--deep-green); line-height: 1; letter-spacing: -.01em; } .g-num small { font-family: var(--font-thai); font-size: .82rem; font-weight: 500; color: var(--cocoa-taupe); } .g-num.dual { font-size: 2.55rem; } .g-num.dual sup { font-family: var(--font-sans); font-size: .9rem; font-weight: 600; vertical-align: top; } .g-unit { font-family: var(--font-thai); font-size: .9rem; font-weight: 500; color: var(--cocoa-taupe); margin-top: 4px; } .g-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--deep-green); color: var(--text-on-green); display: flex; align-items: center; justify-content: center; } .g-ic svg { width: 26px; height: 26px; transform: none; } .ev-card h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.1rem; color: var(--graphite-ink); margin: 0 0 9px; line-height: 1.45; } .ev-card p { margin: 0 0 18px; font-size: 14px; color: var(--cocoa-taupe); line-height: 1.75; flex: 1; } .ev-card p b { color: var(--deep-green); } .ev-card .src { font-family: var(--font-sans); font-size: 11.5px; color: var(--cocoa-taupe); padding-top: 16px; border-top: 1px solid var(--line-hair); line-height: 1.5; width: 100%; } .ev-card .src b { color: var(--deep-green); font-weight: 600; } @media (max-width: 900px){ .evidence-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } } /* ============================================================ JOURNAL CARDS (landing teaser + hub) */ .jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(28px, 4vw, 44px); } .jr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-hair); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); text-decoration: none; transition: all var(--dur-base) var(--ease-soft); } .jr-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .jr-card .jr-top { padding: 22px 24px; background: var(--green-mist); position: relative; min-height: 116px; display: flex; flex-direction: column; justify-content: flex-end; } .jr-card.feat .jr-top { background: var(--deep-green); } .jr-card .jr-cat { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--deep-green); } .jr-card.feat .jr-cat { color: var(--text-on-green-mut); } .jr-card .jr-emblem { position: absolute; right: 16px; top: 14px; width: 38px; height: 38px; opacity: .16; } .jr-card.feat .jr-emblem { opacity: .22; filter: brightness(0) invert(1); } .jr-card .jr-body { padding: 20px 24px 22px; display: flex; flex-direction: column; flex: 1; } .jr-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--deep-green); margin: 0; line-height: 1.22; } .jr-card .jr-th { font-family: var(--font-thai); font-size: 13.5px; color: var(--cocoa-taupe); margin: 7px 0 0; line-height: 1.5; } .jr-card p { margin: 12px 0 18px; font-size: 14px; color: var(--cocoa-taupe); line-height: 1.7; flex: 1; } .jr-card .jr-go { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--deep-green); display: inline-flex; align-items: center; gap: 7px; } .jr-card .jr-go svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-soft); } .jr-card:hover .jr-go svg { transform: translateX(3px); } @media (max-width: 900px){ .jr-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px){ .jr-grid { grid-template-columns: 1fr; } } /* journal hub featured row */ .jr-feature { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px,4vw,56px); align-items: center; background: var(--deep-green); border-radius: var(--radius-lg); overflow: hidden; margin-top: clamp(28px,4vw,44px); } .jr-feature .jf-copy { padding: clamp(32px, 4vw, 56px); } .jr-feature .jr-cat { color: var(--text-on-green-mut); } .jr-feature h2 { font-family: var(--font-display); font-weight: 600; color: var(--text-on-green); font-size: clamp(1.8rem,3vw,2.5rem); margin: 14px 0 0; line-height: 1.16; } .jr-feature .jf-th { font-family: var(--font-thai); color: var(--text-on-green-mut); margin: 10px 0 0; font-size: 15px; line-height: 1.6; } .jr-feature p { color: var(--text-on-green-mut); font-size: 15px; line-height: 1.8; margin: 18px 0 26px; max-width: 48ch; } .jr-feature .jf-media { align-self: stretch; background: var(--green-mist); position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center; } .jr-feature .jf-media img { width: 46%; opacity: .2; } @media (max-width: 820px){ .jr-feature { grid-template-columns: 1fr; } .jr-feature .jf-media { min-height: 180px; order: -1; } } /* ============================================================ FOOTER */ .footer { background: var(--ivory-deep); border-top: 1px solid var(--line-fine); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding: clamp(48px, 6vw, 72px) 0 40px; } .footer-logo img { height: 30px; margin-bottom: 16px; } .footer-grid p { font-size: 13.5px; color: var(--cocoa-taupe); line-height: 1.7; max-width: 34ch; } .footer h5 { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--deep-green); margin: 0 0 16px; font-weight: 600; } .footer .branch { font-size: 13.5px; color: var(--cocoa-taupe); line-height: 1.7; margin-bottom: 14px; } .footer .branch strong { display: block; color: var(--deep-green); font-weight: 600; } .footer-bottom { border-top: 1px solid var(--line-fine); padding: 22px 0; font-size: 12.5px; color: var(--cocoa-taupe); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ============================================================ RESPONSIVE */ @media (max-width: 880px) { .hero-in { grid-template-columns: 1fr; gap: 40px; } .hero-visual { order: -1; max-width: 340px; } .split, .split.reverse { grid-template-columns: 1fr; gap: 32px; } .split.reverse .split-media { order: -1; } .benefit-grid, .freq-grid, .checklist, .why-list, .cta-in { grid-template-columns: 1fr; } .proc-spec { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .proc-spec { grid-template-columns: 1fr; } .depth-badge { left: 6px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } } /* ---- mobile slide-down nav ---- */ .mnav { display: none; flex-direction: column; padding: 6px 24px 22px; background: var(--ivory-white); border-bottom: 1px solid var(--line-hair); } .mnav.open { display: flex; } .mnav a { padding: 13px 0; font-size: 16px; color: var(--deep-green); border-bottom: 1px solid var(--line-hair); } .mnav .btn { margin-top: 16px; } @media (max-width: 880px) { .ph-menu { display: inline-flex; } }