/* CLG completion pages — one scoped shared stylesheet for the 12 remaining routes (Our Approach, Estate Planning, Health Coverage, Business Protection, Insights, Contact, and the six editorial guides). Reuses shared style.css tokens/typography/header/footer and pages.css. Palette: navy #141D2E, ivory #F6F3ED, stone #EAE6DD, sage text #526459, brass #B09568, rule #D9D5CB. Desktop content capped at 1280 (margins 88 at >=1200); mobile gutters 24. Scoped to body.completion so no flagship route is affected. Natural heights only — never a fixed row height. */ .completion{background:var(--ivory);--cp-sage:#526459;--cp-rule:#d9d5cb;--cp-rule-soft:rgba(217,213,203,.34)} /* ---- layout container ---- */ .completion .cp-section{padding-block:clamp(52px,6.5vw,88px);padding-inline:24px} .completion .cp-inner{width:100%;max-width:1280px;margin-inline:auto} .completion .cp-inner-narrow{width:100%;max-width:850px;margin-inline:auto} .completion .cp-reading{width:100%;max-width:760px;margin-inline:auto} @media(min-width:768px){.completion .cp-section{padding-inline:48px}} @media(min-width:1200px){.completion .cp-section{padding-inline:88px}} /* ---- shared type ---- */ .completion .eyebrow{margin-bottom:16px;font-weight:600} .completion .cp-h2{font-size:clamp(39px,3.8vw,54px);line-height:1.1;margin:0 0 22px;max-width:22ch} .completion .cp-h3{font-size:clamp(22px,1.9vw,28px);line-height:1.2;margin:0 0 10px} .completion .cp-intro{font-size:17px;line-height:1.6;max-width:850px;margin:0 0 20px;color:var(--ink)} .completion .cp-deck{font-size:clamp(17px,1.25vw,18px);line-height:1.6;color:var(--navy);max-width:760px} .completion .cp-rule{border:0;border-top:1px solid var(--cp-rule);margin:24px 0} .completion .text-link{font-size:13.5px;font-weight:600} /* ---- 01 hero — ivory default, navy variant for Estate / Business ---- */ .completion .cp-hero{background:var(--ivory);padding-block:clamp(40px,5.5vw,80px)} .completion .cp-hero-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(32px,4vw,56px);align-items:start} .completion .cp-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0} .completion .cp-hero-copy>*{margin:0} .completion .cp-hero h1{font-size:clamp(40px,5.3vw,76px);line-height:1.08;margin:0;max-width:16ch} .completion .cp-hero .cp-deck{max-width:48ch} .completion .cp-hero-copy .button{max-width:100%;text-align:left} .completion .cp-hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:24px} .completion .cp-hero-figure{margin:0;min-width:0} .completion .cp-hero-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;background:var(--stone)} .completion .cp-hero.cp-hero-navy{background:var(--navy);color:var(--ivory)} .completion .cp-hero.cp-hero-navy .cp-h2,.completion .cp-hero.cp-hero-navy h1{color:var(--ivory)} .completion .cp-hero.cp-hero-navy .eyebrow{color:var(--brass)} .completion .cp-hero.cp-hero-navy .cp-deck{color:#e8e5dd} .completion .cp-hero.cp-hero-navy .text-link{color:var(--ivory)} .completion .cp-hero.cp-hero-navy .cp-hero-figure img{background:#202c3d} /* business hero: keep the whole head in frame */ .completion .cp-hero-figure img.cp-crop-top{object-position:center top} /* ---- navy hero needs a visible primary action (Figma: ivory fill, navy text). Scoped to completion pages only; flagship buttons are untouched. ---- */ .completion .cp-hero-navy .button{background:var(--ivory);color:var(--navy);border:1px solid var(--ivory)} .completion .cp-hero-navy .button:hover{background:var(--stone);color:var(--navy);border-color:var(--stone);box-shadow:0 3px 0 var(--brass)} .completion .cp-hero-navy .button:focus-visible{outline:2px solid var(--brass);outline-offset:3px} /* any dark primary action keeps the same visible treatment */ .completion .cp-cta .button:not(.light-button){background:var(--ivory);color:var(--navy);border:1px solid var(--ivory)} .completion .cp-cta .button:not(.light-button):hover{background:var(--stone);color:var(--navy);box-shadow:0 3px 0 var(--brass)} /* ---- 02 priority panels — three aligned, equal bottoms ---- */ .completion .cp-panels-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);margin-top:30px;align-items:stretch} .completion .cp-panel{display:flex;flex-direction:column;background:var(--stone);border-top:2px solid var(--brass);padding:clamp(24px,2.8vw,40px)} .completion .cp-panel-index{font-size:12px;letter-spacing:.1em;color:var(--cp-sage);margin:0 0 14px} .completion .cp-panel h3{font-size:clamp(24px,2.3vw,32px);line-height:1.12;margin:0 0 14px} .completion .cp-panel p{font-size:16px;line-height:1.6;margin:0;color:var(--ink)} .completion .cp-panel .text-link{margin-top:auto;padding-top:20px} .completion .cp-panels.cp-on-navy{background:var(--navy);color:var(--ivory)} .completion .cp-panels.cp-on-navy .cp-h2{color:var(--ivory)} .completion .cp-panels.cp-on-navy .eyebrow{color:var(--brass)} .completion .cp-panels.cp-on-navy .cp-intro{color:#d9d5cb} .completion .cp-panels.cp-on-navy .cp-panel{background:#202c3d;border-top-color:var(--brass)} .completion .cp-panels.cp-on-navy .cp-panel h3{color:var(--ivory)} .completion .cp-panels.cp-on-navy .cp-panel p{color:#d9d5cb} .completion .cp-panels.cp-on-navy .cp-panel-index{color:var(--brass)} .completion .cp-panels.cp-on-navy .text-link{color:var(--ivory)} /* ---- 03 connected perspective — stone editorial (may carry portrait) ---- */ .completion .cp-feature{background:var(--stone)} .completion .cp-feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:center} .completion .cp-feature h2{font-size:clamp(34px,3.4vw,50px);line-height:1.1;margin:0 0 20px} .completion .cp-feature p{font-size:17px;line-height:1.65;margin:0 0 18px;color:var(--ink);max-width:600px} .completion .cp-feature-quiet{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px} .completion .cp-portrait{margin:0;display:flex;flex-direction:column;align-items:flex-start} .completion .cp-portrait img:not(.cp-autograph){width:100%;max-width:440px;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;background:#ded9cc} /* the approved autograph is a WIDE handwritten image: keep its natural aspect, no cover-cropping and a transparent background (specificity independent of the portrait) */ .completion .cp-autograph{display:block;width:280px;max-width:70%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;background:transparent;margin:18px 0 0} .completion .cp-portrait figcaption{font-size:13px;color:var(--cp-sage);margin-top:10px;letter-spacing:.04em} /* ---- 04 FAQ — narrow 850, native details ---- */ .completion .cp-faq{background:var(--ivory)} .completion .cp-faq-list{margin-top:10px} .completion .cp-faq-item{border-top:1px solid #c9c4b8} .completion .cp-faq-item:last-child{border-bottom:1px solid #c9c4b8} .completion .cp-faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(21px,1.9vw,27px);line-height:1.25} .completion .cp-faq-item summary::-webkit-details-marker{display:none} .completion .cp-faq-item summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px} .completion .cp-plus{font-family:'Libre Franklin',Arial,sans-serif;font-size:22px;line-height:1;color:var(--cp-sage);transition:transform .2s} .completion .cp-faq-item[open] .cp-plus{transform:rotate(45deg)} .completion .cp-faq-item p{font-size:16px;line-height:1.7;max-width:760px;margin:0 0 24px;padding-right:24px} .completion .cp-faq-item p a{text-decoration:underline;text-underline-offset:3px} /* ---- 05 conversion band — navy ---- */ .completion .cp-cta{background:var(--navy);color:var(--ivory)} .completion .cp-cta h2{color:var(--ivory);font-size:clamp(39px,4vw,54px);line-height:1.08;margin:0 0 22px;max-width:20ch} .completion .cp-cta .eyebrow{color:var(--brass)} .completion .cp-cta p{font-size:17px;line-height:1.6;max-width:750px;margin:0 0 28px;color:#d9d5cb} .completion .cp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px} .completion .cp-actions .button{max-width:100%;text-align:left} .completion .cp-cta .text-link{color:var(--ivory)} .completion .cp-fine{font-size:12px;line-height:1.8;margin-top:26px} .completion .cp-cta .cp-fine{color:#b6b6b4} /* ---- Approach: keep the real portrait + approved autograph ---- */ .completion .approach-feature .cp-feature-grid{align-items:center} .completion .approach-feature .cp-portrait img:not(.cp-autograph){object-position:center 12%} .completion .approach-signature-note{font-size:13px;color:var(--cp-sage);margin-top:6px} /* ---- Contact choices ---- */ .completion .cp-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,28px);margin-top:26px} .completion .cp-contact-card{display:flex;flex-direction:column;padding:clamp(26px,3vw,44px);border-top:2px solid var(--brass)} .completion .cp-contact-card.navy{background:var(--navy);color:var(--ivory)} .completion .cp-contact-card.navy h2,.completion .cp-contact-card.navy h3{color:var(--ivory)} .completion .cp-contact-card.navy .eyebrow{color:var(--brass)} .completion .cp-contact-card.navy p{color:#d9d5cb} .completion .cp-contact-card.stone{background:var(--stone)} .completion .cp-contact-card h3{font-size:clamp(26px,2.4vw,34px);line-height:1.1;margin:0 0 14px} .completion .cp-contact-card p{font-size:16px;line-height:1.6;margin:0 0 18px;color:var(--ink)} .completion .cp-contact-card .button,.completion .cp-contact-card .text-link{margin-top:auto;align-self:flex-start} .completion .cp-contact-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start} .completion .cp-contact-detail h2{font-size:clamp(30px,3vw,44px);line-height:1.1;margin:0} /* ---- Insights library: functional six-article grid, 3:2 art, equal bottoms ---- */ .completion .cp-featured{background:var(--ivory)} .completion .cp-featured-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center} .completion .cp-featured h2{font-size:clamp(32px,3.4vw,48px);line-height:1.1;margin:0 0 16px} .completion .cp-featured p{font-size:17px;line-height:1.6;margin:0 0 18px;color:var(--ink)} .completion .cp-art-slot{position:relative;aspect-ratio:3/2;background:var(--stone);overflow:hidden} .completion .cp-art-slot img,.completion .cp-art-slot svg{width:100%;height:100%;object-fit:cover;display:block} .completion .cp-tools{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px} .completion .cp-tools label{display:block;font-size:11px;min-width:240px;color:var(--cp-sage)} .completion .cp-tools input{display:block;border:0;border-bottom:1px solid #8b928c;background:transparent;padding:12px 0;width:100%;font:inherit;font-size:15px;color:var(--navy);border-radius:0} .completion .cp-tools input:focus-visible{outline:2px solid var(--brass);outline-offset:5px} .completion .cp-filter-buttons{display:flex;flex-wrap:wrap;gap:10px} .completion .cp-filter-buttons button{border:1px solid #a7aa9f;padding:13px 18px;font-size:13px;min-height:46px;transition:background 180ms,color 180ms,border-color 180ms} .completion .cp-filter-buttons button[aria-pressed=true]{background:var(--navy);color:var(--ivory);border-color:var(--navy)} .completion .cp-filter-buttons button:hover{border-color:var(--navy)} .completion .completion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:28px;align-items:stretch} .completion .library-card{display:flex;flex-direction:column;min-width:0} .completion .library-card[hidden]{display:none} .completion .library-card .cp-art-slot{margin-bottom:6px} .completion .library-card .cp-art-slot svg,.completion .library-card .cp-art-slot img{transition:transform .35s var(--ease),filter .28s} .completion .library-card a:hover .cp-art-slot svg,.completion .library-card a:hover .cp-art-slot img{transform:scale(1.03);filter:brightness(.96)} .completion .library-card .eyebrow{margin:20px 0 12px} .completion .library-card h3{font-size:clamp(22px,2vw,28px);line-height:1.18;margin:0 0 14px} .completion .library-card h3 a{text-decoration:none} .completion .library-card p{font-size:15px;line-height:1.6;margin:0 0 18px;color:var(--ink)} .completion .library-card .text-link{margin-top:auto} .completion .cp-empty{font-size:15px;color:var(--ink);margin-top:28px;border-top:1px solid #c9c4b8;padding-top:20px} .completion .cp-empty[hidden]{display:none} /* ---- Guide article template ---- */ .completion .article-hero{padding-bottom:clamp(24px,3vw,40px)} .completion .article-hero h1{font-size:clamp(38px,4.6vw,64px);line-height:1.1;max-width:24ch} .completion .cp-byline{padding:0 24px 26px;font-size:12px;color:var(--cp-sage)} .completion .article-cover{padding:0 24px} .completion .article-cover .cp-art-slot{max-width:1280px;margin-inline:auto;background:var(--stone)} .completion .cp-article-body{font-size:18px;line-height:1.85} .completion .cp-article-body h2{font-size:clamp(30px,2.8vw,42px);line-height:1.14;margin:52px 0 20px} .completion .cp-article-body h2:first-child{margin-top:0} /* TOC/fragment targets must clear the fixed header (offset = header position + height + breathing room) */ .completion .cp-article-body h2[id]{scroll-margin-top:calc(var(--header-space) + 44px)} .completion .cp-article-body h3{font-size:clamp(22px,1.9vw,27px);line-height:1.2;margin:34px 0 14px} .completion .cp-article-body p{margin:0 0 22px} .completion .cp-article-body a{text-decoration:underline;text-underline-offset:4px} .completion .cp-article-body ul,.completion .cp-article-body ol{margin:0 0 22px;padding-left:22px} .completion .cp-article-body li{margin-bottom:12px} .completion .cp-toc{border:1px solid var(--cp-rule);background:var(--stone);padding:clamp(22px,2.6vw,34px);margin:0 0 44px} /* The guide TOC is a