/* SP Family GUI v1.0 — clean proposal-inspired layout */
:root {
    --green: #123b30;
    --green-deep: #0b2b23;
    --green-soft: #1d4d3f;
    --gold: #c9a45c;
    --gold-light: #e5c77f;
    --cream: #f7f6f0;
    --paper: #fffefa;
    --ink: #172b25;
    --muted: #68736d;
    --line: #e5e4dc;
    --shadow: 0 18px 45px rgba(16, 43, 34, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }

.hero-shell {
    width: min(1480px, calc(100% - 28px));
    min-height: 570px;
    margin: 14px auto 0;
    position: relative;
    overflow: hidden;
    color: white;
    border-radius: 26px;
    background: radial-gradient(ellipse at 82% 54%, rgba(39, 91, 72, .9) 0%, transparent 35%), linear-gradient(115deg, #0b2b23, #123b30 62%, #174636);
}
.site-header { position: relative; z-index: 10; border-bottom: 1px solid rgba(255,255,255,.11); }
.nav-wrap { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); background: rgba(255,255,255,.04); font-family: "Playfair Display", Georgia, serif; font-size: 18px; font-weight: 700; }
.brand-copy { display: grid; gap: 4px; }
.brand-copy strong { color: #f7f2e6; letter-spacing: .14em; font-size: 13px; }
.brand-copy small { color: rgba(255,255,255,.58); letter-spacing: .13em; font-size: 8px; }
.main-nav { display: flex; align-items: center; gap: 28px; color: rgba(255,255,255,.82); font-size: 13px; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover { color: var(--gold-light); }
.main-nav .nav-cta { padding: 11px 16px; border: 1px solid rgba(229,199,127,.65); border-radius: 30px; color: var(--gold-light); }
.menu-toggle { display: none; border: 0; background: transparent; color: white; font-size: 26px; cursor: pointer; }
.hero-content { position: relative; z-index: 2; padding-top: 82px; padding-bottom: 72px; }
.eyebrow { margin: 0 0 20px; color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: .24em; }
.hero h1, h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; letter-spacing: -.035em; }
.hero-content h1 { max-width: 760px; font-size: clamp(52px, 7vw, 82px); line-height: 1.06; }
.hero-content h1 em, h2 em { color: var(--gold-light); font-weight: 500; }
.hero-lead { max-width: 610px; margin: 22px 0 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 22px; border-radius: 30px; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-gold { color: #172b25; background: var(--gold-light); }
.text-link { color: #f1e8d3; font-size: 13px; }
.hero-footnote { display: flex; align-items: center; gap: 9px; margin-top: 42px; color: rgba(255,255,255,.65); font-size: 11px; }
.gold-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); }
.hero-orb { position: absolute; border: 1px solid rgba(229,199,127,.15); border-radius: 50%; pointer-events: none; }
.orb-one { width: 440px; height: 440px; right: 8%; top: 53%; transform: translateY(-50%); box-shadow: 0 0 0 30px rgba(229,199,127,.035), 0 0 0 65px rgba(229,199,127,.025); }
.orb-two { width: 290px; height: 290px; right: calc(8% + 75px); top: 53%; transform: translateY(-50%); }
.hero-seal { position: absolute; z-index: 1; right: calc(8% + 115px); top: 54%; transform: translateY(-50%); width: 190px; height: 220px; display: grid; place-items: center; border: 1px solid rgba(229,199,127,.65); border-radius: 105px 105px 28px 28px; background: linear-gradient(160deg, rgba(201,164,92,.16), rgba(5,33,26,.58)); }
.seal-ring { width: 142px; height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(229,199,127,.5); border-radius: 50%; color: var(--gold-light); }
.seal-ring span { font-family: "Playfair Display", Georgia, serif; font-size: 58px; }
.seal-ring small { margin-top: 6px; font-size: 7px; letter-spacing: .13em; }
.version-pill { position: absolute; right: 28px; bottom: 22px; z-index: 3; padding: 7px 12px; border: 1px solid rgba(229,199,127,.6); border-radius: 20px; color: var(--gold-light); font-size: 9px; letter-spacing: .1em; background: rgba(7,31,25,.35); }

.intro-section { padding: 86px 0; background: var(--cream); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.eyebrow-dark { color: #a27c36; }
h2 { color: var(--green); font-size: clamp(38px, 5vw, 54px); line-height: 1.12; }
h2 em { color: #a9823e; }
.intro-copy { max-width: 550px; color: #69736c; font-size: 15px; line-height: 1.9; }
.intro-copy p { margin: 0 0 13px; }

.family-section { padding: 88px 0 100px; background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 38px; }
.section-heading .eyebrow { margin-bottom: 15px; }
.section-side-note { margin: 0 0 6px; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: right; }
.website-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.website-card { min-height: 310px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 5px 20px rgba(16,43,34,.025); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.website-card:hover { transform: translateY(-4px); border-color: #d7c18f; box-shadow: var(--shadow); }
.card-topline { display: flex; justify-content: space-between; align-items: center; }
.site-monogram { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--gold-light); background: var(--green); font-family: "Playfair Display", Georgia, serif; font-size: 14px; font-weight: 700; }
.card-arrow { color: #b18c49; font-size: 22px; }
.card-category { margin: 20px 0 8px; color: #a27c36; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.website-card h3 { margin: 0; color: var(--green); font-family: "Playfair Display", Georgia, serif; font-size: 23px; }
.card-description { margin: 11px 0 15px; color: #69736c; font-size: 13px; line-height: 1.75; }
.highlight-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; }
.highlight-list li { padding: 6px 9px; border-radius: 20px; color: #526258; background: #f2f4ef; font-size: 10px; }
.card-link { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid #eeeee8; color: var(--green); font-size: 12px; font-weight: 700; }
.card-link span { color: #a27c36; font-size: 17px; }

.closing-section { padding: 72px 0; color: white; background: var(--green); text-align: center; }
.closing-inner .eyebrow { margin-bottom: 17px; }
.closing-section h2 { color: white; font-size: clamp(38px, 5vw, 56px); }
.closing-section h2 em { color: var(--gold-light); }
.button-outline { margin-top: 26px; border: 1px solid rgba(229,199,127,.7); color: white; }
.site-footer { color: #d9e1da; background: #09251e; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; padding-top: 45px; padding-bottom: 35px; }
.footer-brand .brand-copy strong { color: white; }
.footer-brand .brand-copy small { color: #aab9ae; }
.footer-note { max-width: 390px; margin: 15px 0 0; color: #aab9ae; font-size: 12px; line-height: 1.8; }
.footer-links { display: flex; flex-direction: column; gap: 13px; color: #d9e1da; font-size: 12px; }
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; padding-bottom: 19px; border-top: 1px solid rgba(255,255,255,.12); color: #91a49a; font-size: 10px; }

@media (max-width: 900px) {
    .hero-seal, .orb-one, .orb-two { opacity: .22; right: -90px; }
    .intro-grid { gap: 40px; }
}
@media (max-width: 640px) {
    .hero-shell { width: calc(100% - 16px); min-height: 590px; margin-top: 8px; border-radius: 19px; }
    .container { width: calc(100% - 36px); }
    .nav-wrap { min-height: 72px; }
    .menu-toggle { display: block; }
    .main-nav { position: absolute; top: 72px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 18px; border-bottom: 1px solid rgba(255,255,255,.12); background: #10372d; }
    .main-nav.is-open { display: flex; }
    .main-nav a { padding: 13px 4px; }
    .main-nav .nav-cta { margin-top: 7px; text-align: center; }
    .hero-content { padding-top: 70px; padding-bottom: 60px; }
    .hero-content h1 { font-size: clamp(43px, 12vw, 62px); }
    .hero-lead { max-width: 470px; font-size: 14px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
    .hero-footnote { margin-top: 34px; }
    .hero-seal { width: 140px; height: 165px; right: -72px; top: 76%; opacity: .18; }
    .seal-ring { width: 105px; height: 105px; }
    .seal-ring span { font-size: 40px; }
    .version-pill { right: 16px; bottom: 15px; }
    .intro-section, .family-section { padding: 62px 0; }
    .intro-grid { grid-template-columns: 1fr; gap: 20px; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .section-side-note { text-align: left; }
    .website-grid { grid-template-columns: 1fr; gap: 16px; }
    .website-card { min-height: 0; padding: 24px; }
    .footer-top, .footer-bottom { flex-direction: column; }
    .footer-top { gap: 25px; }
}


/* SPGv1.0 multi-page layout */
.page-shell { width: min(1480px, calc(100% - 28px)); margin: 14px auto 0; overflow: hidden; border-radius: 26px 26px 0 0; background: var(--paper); box-shadow: 0 8px 30px rgba(16,43,34,.04); }
.page-shell .site-header { color: white; background: var(--green-deep); }
.main-nav a[aria-current="page"] { color: var(--gold-light); }
.subpage-hero { padding: 100px 0 105px; color: white; background: radial-gradient(ellipse at 82% 50%, rgba(39,91,72,.75), transparent 36%), linear-gradient(115deg, #0b2b23, #174636); }
.subpage-hero h1 { max-width: 900px; margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(46px, 6vw, 76px); line-height: 1.1; letter-spacing: -.035em; }
.subpage-hero h1 em { color: var(--gold-light); font-weight: 500; }
.subpage-lead { max-width: 680px; margin: 24px 0 30px; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.85; }
.subpage-hero-compact { padding: 78px 0 72px; }
.subpage-hero-compact .subpage-lead { margin-bottom: 0; }
.page-shell .family-section { padding-top: 58px; }
.footer-links a:first-child { color: var(--gold-light); font-weight: 700; }
@media (max-width: 640px) {
    .page-shell { width: calc(100% - 16px); margin-top: 8px; border-radius: 19px 19px 0 0; }
    .subpage-hero { padding: 72px 0 76px; }
    .subpage-hero-compact { padding: 58px 0 52px; }
    .subpage-lead { font-size: 14px; }
}