/* ============================================================ G3 GEO supplement — education library, articles, state pages Extends G3 Design System v2.0 tokens (cream/espresso/gold/terra) Ships in the G3 Design System plugin + static preview. ============================================================ */ .prose{font-size:1.05rem;color:rgba(31,25,21,.86);max-width:none} .prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;margin:0 0 .5em;color:var(--espresso)} .prose h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:1.4em 0 .4em;color:var(--espresso)} .prose p{margin:0 0 1.1em} .prose a{color:var(--terra);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .25s} .prose a:hover{color:var(--gold)} .prose ul,.prose ol{margin:0 0 1.2em 1.2em} .prose li{margin:.4em 0} .prose strong,.prose b{font-weight:500;color:var(--espresso)} .prose blockquote{margin:1.4em 0;padding:18px 26px;border-left:3px solid var(--gold);background:var(--parchment);font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--espresso);border-radius:0 12px 12px 0} /* breadcrumbs */ .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-bottom:22px;color:rgba(31,25,21,.55)} .crumbs a{color:var(--terra)}.crumbs a:hover{color:var(--gold)}.crumbs .sep{opacity:.4} .arthero .crumbs,.page-hero .crumbs{color:rgba(247,241,230,.6)} .arthero .crumbs a,.page-hero .crumbs a{color:var(--gold)} /* article hero + body */ .artwrap{padding-top:0} .arthero{background:var(--espresso);color:var(--cream);padding:130px 0 54px;position:relative;overflow:hidden} .arthero::after{content:'';position:absolute;right:-80px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(212,162,76,.28),transparent 70%);pointer-events:none} .arthero .eyebrow{color:var(--gold)} .arthero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.05;margin:.1em 0 .35em;max-width:18ch} .arthero h1 em{font-style:italic;color:var(--gold)} .arthero .lede{color:rgba(247,241,230,.8);max-width:40em} .artbody{padding:52px 0 10px;max-width:820px} .asec{margin:0 0 1.6em} .asec h2{scroll-margin-top:100px} /* byline */ .byline{display:flex;flex-direction:column;gap:3px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(247,241,230,.16);font-size:.9rem} .byl-w{font-weight:500;color:var(--cream)} .byl-r{color:rgba(247,241,230,.66)} .byl-r a{color:var(--gold);text-decoration:underline;text-underline-offset:2px} .prose .byline{border-top-color:rgba(31,25,21,.12)} .prose .byl-w{color:var(--espresso)}.prose .byl-r{color:rgba(31,25,21,.6)}.prose .byl-r a{color:var(--terra)} /* answer box (GEO quotable) */ .answerbox{background:var(--sage);border-radius:16px;padding:24px 28px;margin:0 0 30px;border:1px solid rgba(125,155,107,.4);position:relative} .answerbox .ab-tag{display:inline-block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--terra);margin-bottom:8px} .answerbox p{margin:0;font-size:1.12rem;line-height:1.55;color:var(--espresso);font-weight:400} /* TOC */ .toc{background:var(--parchment);border-radius:14px;padding:20px 26px;margin:0 0 32px} .toc-t{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--terra);margin-bottom:10px} .toclist{list-style:none;margin:0;padding:0;columns:2;column-gap:28px} @media(max-width:640px){.toclist{columns:1}} .toclist li{margin:0;padding:5px 0} .toclist li::before{display:none} .toclist a{color:var(--espresso);font-size:.96rem;text-decoration:none;border-bottom:1px solid transparent;transition:.2s} .toclist a:hover{color:var(--terra);border-bottom-color:var(--gold)} /* figures / infographics */ figure.g3fig{margin:1.8em 0;background:#fff;border:1px solid rgba(31,25,21,.1);border-radius:16px;padding:22px 24px;box-shadow:0 18px 44px rgba(31,25,21,.06)} figure.g3fig svg{width:100%;height:auto;display:block} figure.g3fig figcaption{margin-top:12px;font-size:.82rem;color:rgba(31,25,21,.6);text-align:center;line-height:1.5} figure.g3fig figcaption a{color:var(--terra)} .bar-row{display:flex;align-items:center;gap:12px;margin:10px 0} .bar-row .bl{flex:0 0 34%;font-size:.9rem;color:var(--espresso)} .bar-track{flex:1;background:var(--parchment);border-radius:999px;height:26px;overflow:hidden;position:relative} .bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--terra),var(--gold));display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-size:.8rem;font-weight:600;min-width:38px} /* FAQ */ details.faq{border-bottom:1px solid rgba(31,25,21,.14);padding:6px 0} details.faq summary{cursor:pointer;list-style:none;padding:16px 40px 16px 0;font-family:var(--serif);font-size:1.2rem;color:var(--espresso);position:relative} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:1.4rem;color:var(--terra);transition:transform .3s} details.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)} details.faq .faq-a{padding:0 0 18px;color:rgba(31,25,21,.82);line-height:1.65} details.faq .faq-a a{color:var(--terra);text-decoration:underline} /* references */ .reflist{margin:0 0 0 1.2em;color:rgba(31,25,21,.8)} .reflist li{margin:.5em 0;font-size:.95rem} .reflist a{color:var(--terra);text-decoration:underline;text-underline-offset:2px} /* related cards */ .rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:14px} .rcard{display:flex;flex-direction:column;justify-content:space-between;gap:16px;background:#fff;border:1px solid rgba(31,25,21,.1);border-radius:16px;padding:22px;transition:.3s} .rcard:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(31,25,21,.1);border-color:var(--gold)} .rcard h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--espresso);margin:0} .rcard .go{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);font-weight:600} /* generic blocks */ .blk{padding:56px 0} .blk.alt{background:var(--parchment)} /* library hub */ .libhero{background:var(--espresso);color:var(--cream);padding:140px 0 64px;position:relative;overflow:hidden} .libhero::after{content:'';position:absolute;left:50%;bottom:-160px;transform:translateX(-50%);width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(212,162,76,.22),transparent 68%);pointer-events:none} .libhero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,5.5vw,4rem);line-height:1.04;margin:.15em 0 .4em;max-width:20ch} .libhero h1 em{font-style:italic;color:var(--gold)} .libhero .lsub{color:rgba(247,241,230,.82);max-width:46em;font-size:1.1rem} .libhero .lstat{margin-top:22px;font-size:.82rem;letter-spacing:.04em;color:rgba(247,241,230,.62)} .pillargrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .pillar{background:#fff;border:1px solid rgba(31,25,21,.1);border-radius:20px;padding:28px 26px;transition:.3s} .pillar:hover{box-shadow:0 24px 54px rgba(31,25,21,.09);border-color:var(--gold)} .pillar .pkick{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--terra)} .pillar h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:8px 0 6px;line-height:1.1} .pillar h3 a{color:var(--espresso)}.pillar h3 a:hover{color:var(--terra)} .pillar>p{color:rgba(31,25,21,.72);font-size:.97rem;margin-bottom:16px} .plist{list-style:none;margin:0;padding:0;border-top:1px solid rgba(31,25,21,.1)} .plist li{border-bottom:1px solid rgba(31,25,21,.08)} .plist a{display:block;padding:11px 0;font-size:.98rem;color:var(--espresso);transition:.2s} .plist a:hover{color:var(--terra);padding-left:6px} /* process flow (service pages) */ .pflow{display:grid;gap:14px;max-width:820px} .pstep{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid rgba(31,25,21,.1);border-radius:16px;padding:22px 24px} .pstep .pnum{flex:none;width:40px;height:40px;border-radius:50%;background:var(--espresso);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.2rem} .pstep h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin:0 0 4px;color:var(--espresso)} .pstep p{margin:0;color:rgba(31,25,21,.78)} /* page-hero breadcrumb spacing on dark heroes handled by v4 */ /* areas-we-serve state grid */ .stategrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .statecard{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid rgba(31,25,21,.1);border-radius:12px;padding:16px 18px;transition:.25s} .statecard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 34px rgba(31,25,21,.09)} .statecard .stn{font-family:var(--serif);font-size:1.15rem;color:var(--espresso)} .statecard .go{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);font-weight:600;opacity:0;transition:.25s} .statecard:hover .go{opacity:1} /* article hero image (blogs) */ .arthero.has-img{padding-bottom:34px} .arthero-img{max-width:1140px;margin:-30px auto 0;padding:0 20px} .arthero-img img{width:100%;border-radius:18px;box-shadow:0 30px 70px rgba(31,25,21,.18);display:block} @media(min-width:768px){.arthero-img{padding:0 5vw}} /* blog index */ .bloggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px} .bcard{background:#fff;border:1px solid rgba(31,25,21,.1);border-radius:18px;overflow:hidden;transition:.3s;display:flex;flex-direction:column} .bcard:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(31,25,21,.12);border-color:var(--gold)} .bcard .bimg{aspect-ratio:1200/630;background:var(--parchment);overflow:hidden} .bcard .bimg img{width:100%;height:100%;object-fit:cover} .bcard .bbody{padding:22px 24px;display:flex;flex-direction:column;gap:8px} .bcard .bcat{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--terra)} .bcard h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--espresso);line-height:1.15} .bcard h3 em{font-style:italic;color:var(--terra)} .bcard p{color:rgba(31,25,21,.72);font-size:.95rem} .bcard .go{margin-top:auto;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);font-weight:600} /* ===== state / city LANDING pages (not blogs) ===== */ .state-hero{display:block;padding-top:132px;padding-bottom:48px} .state-hero .sh-crumbs{margin-bottom:20px} .state-hero .sh-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center} @media(max-width:900px){.state-hero .sh-grid{grid-template-columns:1fr;gap:8px}.state-hero{padding-top:110px}} .state-hero .sh-copy{position:relative;z-index:2} .state-hero h1{margin-top:.1em} .sh-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px} .sh-map{width:100%;max-width:460px;color:var(--espresso);filter:drop-shadow(0 24px 50px rgba(31,25,21,.18))} .sh-map img{width:100%;height:auto;display:block} .sh-abbr{position:absolute;font-family:var(--serif);font-weight:600;font-size:clamp(4rem,10vw,7rem);color:rgba(212,162,76,.16);letter-spacing:.02em;pointer-events:none} @media(max-width:900px){.sh-visual{min-height:200px;margin-top:6px}.sh-map{max-width:280px}} .sh-intro{max-width:820px;font-size:1.12rem} .sh-intro p{margin:0 0 1em} /* local content sections as a page, two-column, no essay feel */ .lsec .lsec-grid{display:grid;grid-template-columns:.42fr .58fr;gap:36px;align-items:start} @media(max-width:820px){.lsec .lsec-grid{grid-template-columns:1fr;gap:10px}} .lsec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.08;color:var(--espresso);position:sticky;top:96px} @media(max-width:820px){.lsec-head h2{position:static}} /* photo band */ .photoband{background-size:cover;background-position:center;padding:88px 0;color:var(--cream)} .photoband .pb-copy{max-width:600px} .photoband .eyebrow{color:var(--gold)} .photoband h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,3rem);line-height:1.06;margin:.1em 0 .4em} .photoband h2 em{font-style:italic;color:var(--gold)} .photoband .lede{color:rgba(247,241,230,.9);margin-bottom:24px} /* service cards (nearby) */ .svc-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .svc-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid rgba(31,25,21,.1);border-radius:14px;padding:18px 20px;transition:.25s} .svc-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 16px 38px rgba(31,25,21,.1)} .svc-card h3{font-family:var(--serif);font-weight:500;font-size:1.08rem;color:var(--espresso);margin:0;line-height:1.15} .svc-card .go{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);font-weight:600;white-space:nowrap} /* ========================================================================== LANDING PAGE MODULES (state + city pages) Prefixed .lp- to avoid collisions with design-system component classes. NOTE: modules render inside `.section` so `.section .wrap` constrains them. The defensive rule below covers any `.lp` block that is not a `.section`. ========================================================================== */ .lp > .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,40px)} .lp.section > .wrap{padding:0 clamp(22px,5vw,40px)} /* ---- HERO ---- */ .lp-hero{position:relative;display:flex;align-items:flex-end;min-height:min(86vh,740px); padding:clamp(140px,20vh,190px) 0 clamp(52px,7vh,72px); background-size:cover;background-position:center;background-repeat:no-repeat; color:var(--cream);overflow:hidden} .lp-hero::after{content:'';position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(31,25,21,.62) 0%,rgba(31,25,21,.34) 38%,rgba(31,25,21,.94) 100%)} .lp-hero > .wrap{position:relative;z-index:1} .lp-hero .eyebrow{color:var(--gold)} .lp-hero .eyebrow::before{background:var(--gold)} .lp-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.6vw,4.5rem); line-height:1.02;letter-spacing:-.015em;margin:.2em 0 .38em;max-width:23ch;color:var(--cream)} .lp-hero h1 em{font-style:italic;font-weight:300;color:var(--gold)} .lp-lede{font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.62;max-width:40em;color:rgba(247,241,230,.87)} .lp-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .lp-hero .btn{border-color:rgba(247,241,230,.5);color:var(--cream)} .lp-hero .btn::before{background:var(--cream)} .lp-hero .btn:hover{color:var(--espresso)} .lp-hero .btn.solid{background:var(--gold);border-color:var(--gold);color:var(--espresso)} .lp-hero .btn.solid::before{background:var(--cream)} .lp-hero .btn.solid:hover{color:var(--espresso);border-color:var(--cream)} .lp-hero-trust{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:34px;padding-top:24px; border-top:1px solid rgba(247,241,230,.22)} .lp-hero-trust span{display:flex;align-items:center;gap:9px;font-family:var(--sans); font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:rgba(247,241,230,.84)} .lp-hero-trust span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none} /* ---- TRUST STRIP ---- */ .lp-trust{background:var(--espresso);color:var(--cream)} .lp-trustgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .lp-tcell{padding:clamp(28px,4vh,40px) clamp(20px,3vw,34px);border-right:1px solid rgba(247,241,230,.14)} .lp-tcell:last-child{border-right:0} .lp-tcell .big{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3vw,2.7rem); line-height:1;color:var(--gold)} .lp-tcell .lbl{margin-top:9px;font-family:var(--sans);font-size:.8rem;line-height:1.45;color:rgba(247,241,230,.72)} /* ---- OPENER ---- */ .lp-opengrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,72px);align-items:start} .lp-answer{font-family:var(--serif);font-weight:400;font-size:clamp(1.28rem,2.2vw,1.8rem); line-height:1.42;color:var(--espresso)} .lp-answer p{margin:0 0 .7em} .lp-answer p:last-child{margin-bottom:0} .lp-answer em{font-style:italic;color:var(--terra)} .lp-answer strong{font-weight:500;color:var(--espresso)} .lp-answer a{color:var(--terra);text-decoration:underline;text-underline-offset:3px} .lp-aside{background:var(--parchment);border-radius:18px;padding:28px 30px} .lp-aside h3,.lp-aside .lp-asideh{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.2em; text-transform:uppercase;color:var(--terra);margin:0 0 15px} .lp-chips{display:flex;flex-wrap:wrap;gap:8px} .lp-chip{display:inline-block;padding:8px 15px;border-radius:999px;background:#fff; border:1px solid rgba(31,25,21,.12);font-family:var(--sans);font-size:.84rem;color:var(--espresso)} .lp-aside .lp-note{margin:16px 0 0;font-size:.9rem;line-height:1.55;color:rgba(31,25,21,.66)} /* ---- SECTION HEADS ---- */ .lp-head{margin-bottom:clamp(28px,4vh,40px);max-width:30ch} .lp-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.5vw,2.95rem); line-height:1.06;letter-spacing:-.01em;margin:.12em 0 0} .lp-head h2 em{font-style:italic;font-weight:300;color:var(--gold)} .section--cream .lp-head h2 em,.section--paper .lp-head h2 em{color:var(--terra)} .lp-head.ctr{margin-left:auto;margin-right:auto;text-align:center;max-width:34ch} .lp-head.ctr .eyebrow{justify-content:center} .lp-head.ctr .eyebrow::after{content:'';width:34px;height:1px;background:var(--gold);flex:none} /* ---- SERVICE CARDS ---- */ .lp-svcgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .lp-svc{display:flex;flex-direction:column;gap:13px;background:#fff;border:1px solid rgba(31,25,21,.1); border-radius:18px;padding:32px 28px;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s} .lp-svc:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(31,25,21,.12);border-color:var(--gold)} .lp-svc .n{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;font-weight:600;color:var(--terra)} .lp-svc h3{font-family:var(--serif);font-weight:500;font-size:1.48rem;line-height:1.15;color:var(--espresso);margin:0} .lp-svc p{font-size:.96rem;line-height:1.6;color:rgba(31,25,21,.72);margin:0;flex:1} .lp-svc .go{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; font-weight:600;color:var(--terra)} /* ---- STEPS ---- */ .lp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,26px)} .lp-step{padding-top:24px;border-top:2px solid rgba(212,162,76,.55)} .lp-step .sn{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.2em; text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:11px} .lp-step h3{font-family:var(--serif);font-weight:500;font-size:1.26rem;line-height:1.2;margin:0 0 9px} .lp-step p{font-size:.94rem;line-height:1.62;margin:0;opacity:.8} .section--paper .lp-step .sn{color:var(--terra)} /* ---- SPLIT / COLUMN SECTIONS ---- */ .lp-split > .wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(30px,5vw,68px);align-items:start} .lp-shead h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.1vw,2.6rem); line-height:1.08;letter-spacing:-.01em;margin:0} .lp-shead .lp-rule{width:52px;height:2px;background:var(--gold);margin-top:22px} .lp-flip > .wrap > .prose{order:2} .lp-flip > .wrap > .lp-shead{order:1} .lp-wide .lp-whead{max-width:26ch;margin-bottom:28px} .lp-wide .lp-whead h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.3vw,2.85rem); line-height:1.07;letter-spacing:-.01em;margin:0} .lp-cols{columns:2;column-gap:clamp(30px,4vw,54px)} .lp-cols p:first-child{margin-top:0} .lp-pull{margin:28px 0 0;padding:26px 30px;background:var(--sage);border-radius:16px; border-left:3px solid var(--gold)} .lp-pull p{font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.4;color:var(--espresso);margin:0;max-width:none} /* ---- PHOTO CTA BAND ---- */ .lp-band{position:relative;padding:clamp(84px,13vh,150px) 0;background-size:cover; background-position:center 32%;background-repeat:no-repeat;color:var(--cream);overflow:hidden} .lp-band::after{content:'';position:absolute;inset:0;z-index:0; background:linear-gradient(94deg,rgba(31,25,21,.92) 0%,rgba(31,25,21,.74) 44%,rgba(31,25,21,.3) 100%)} .lp-band > .wrap{position:relative;z-index:1} .lp-band .eyebrow{color:var(--gold)} .lp-band .eyebrow::before{background:var(--gold)} .lp-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.3rem); line-height:1.06;letter-spacing:-.01em;margin:.15em 0 .32em;max-width:25ch;color:var(--cream)} .lp-band h2 em{font-style:italic;font-weight:300;color:var(--gold)} /* ---- NEARBY ---- */ .lp-neargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:12px} .lp-near{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff; border:1px solid rgba(31,25,21,.1);border-radius:14px;padding:17px 20px;text-decoration:none; transition:transform .3s var(--ease),box-shadow .3s,border-color .3s} .lp-near:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 16px 36px rgba(31,25,21,.09)} .lp-near .t{font-family:var(--serif);font-size:1.02rem;line-height:1.25;color:var(--espresso)} .lp-near .a{font-size:1rem;color:var(--terra);flex:none} /* ---- FAQ on landing pages (design-system .faq markup) ---- */ .lp.faq .wrap{max-width:1180px} .lp.faq details{max-width:920px;margin:0 auto} /* ---- RESPONSIVE ---- */ @media(max-width:1024px){ .lp-svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:900px){ .lp-trustgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .lp-tcell{border-bottom:1px solid rgba(247,241,230,.14)} .lp-tcell:nth-child(2n){border-right:0} .lp-opengrid{grid-template-columns:1fr} .lp-split > .wrap{grid-template-columns:1fr;gap:26px} .lp-flip > .wrap > .prose{order:2} .lp-flip > .wrap > .lp-shead{order:1} .lp-cols{columns:1} } @media(max-width:620px){ .lp-svcgrid,.lp-steps{grid-template-columns:1fr} .lp-hero{min-height:auto;padding:126px 0 48px} .lp-hero h1{font-size:clamp(2.1rem,9vw,2.9rem)} .lp-trustgrid{grid-template-columns:1fr} .lp-tcell{border-right:0} } /* ========================================================================== FIX: fixed-nav backdrop on article pages The design system pushes any first child that is not a recognised hero below the fixed nav: main > *:first-child:not(.vhero):not(.page-hero):not(.tn-hero) { padding-top: clamp(120px,16vh,180px) } `.artwrap` is transparent, so that padding exposed the cream page background behind the nav, and the nav links are cream (rgba(247,241,230,.85)) by design for dark heroes. Result: the header visually disappeared on all 46 article pages. These heroes supply their own top padding and must sit UNDER the nav. Scoped with main#g3-content (1,2,1) to beat the design-system rule (0,3,1). ========================================================================== */ main#g3-content > .artwrap:first-child{padding-top:0} main#g3-content > .lp-hero:first-child{padding-top:clamp(140px,20vh,190px)} main#g3-content > .libhero:first-child{padding-top:clamp(140px,20vh,180px)} main#g3-content > .page-hero:first-child{padding-top:132px} /* the article hero already reserves room for the nav; guarantee it clears it */ .arthero{padding-top:max(130px,calc(101px + 34px))} /* ========================================================================== FIX: containers on article, hub and blog templates The design system only defines .wrap when scoped to a parent it knows about (.section .wrap, .faq .wrap, .cta-band .wrap, .stage .wrap, ...). Any other parent leaves .wrap with no max-width, no auto margins and no gutter, so the content sits flush against the browser edge at x=0. That was the original defect on the state pages via `.blk`; the article, education-hub and blog templates still used `.blk` and `.arthero`, so they had it too. ========================================================================== */ .blk > .wrap, .arthero > .wrap, .libhero > .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,40px)} .blk > .wrap.prose{max-width:820px;margin:0 auto;padding:0 clamp(22px,5vw,40px)} /* .artbody carries its own vertical rhythm (.artbody{padding:52px 0 10px}). Adding the horizontal gutter with a `padding:0 ...` shorthand silently zeroed that, so the sage "short answer" box butted straight up against the hero on every article page. Keep the vertical values explicitly. */ .wrap.artbody{max-width:820px;margin:0 auto; padding:clamp(38px,6vh,56px) clamp(22px,5vw,40px) 10px} /* ========================================================================== FIX: breadcrumb nav was being styled as the fixed site header breadcrumb_html() emits