:root { --ink:#15352e; --paper:#f8f2e7; --cream:#fffaf1; --orange:#ff704c; --yellow:#f7cc4a; --mint:#b8dfc6; --line:rgba(21,53,46,.16); --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; --serif:"Playfair Display", serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); overflow-x:hidden; } a { color:inherit; text-decoration:none; } .noise { position:fixed; inset:0; pointer-events:none; opacity:.22; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }
.topbar { height:84px; max-width:1240px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; } .brand { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; letter-spacing:-.7px; } .brand > span:last-child span { color:var(--orange); } .brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50% 50% 50% 9px; transform:rotate(-18deg); background:var(--ink); color:var(--cream); font:500 17px var(--serif); } .brand-mark::first-letter { transform:rotate(18deg); } .desktop-nav { display:flex; gap:31px; margin-left:90px; font-size:12px; font-weight:700; } .desktop-nav a { position:relative; }.desktop-nav a::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--orange); transition:.25s; }.desktop-nav a:hover::after { width:100%; }.nav-cta { font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--ink); padding-bottom:4px; }.nav-cta span { color:var(--orange); font-size:15px; margin-left:5px; }.menu-toggle,.mobile-nav{display:none;}
.hero { max-width:1240px; min-height:620px; padding:79px 32px 68px; margin:auto; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:40px; }.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:#527169; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:1.15px; }.eyebrow span { width:27px; height:1px; background:var(--orange); }.hero h1,.section h2,.content-copy h2,.final-cta h2 { font-size:clamp(46px,5.3vw,78px); line-height:.98; letter-spacing:-4.5px; margin:0; font-weight:800; }.hero h1 em,.section h2 em,.content-copy h2 em,.final-cta h2 em { font:italic 700 1em var(--serif); letter-spacing:-4px; }.hero-text { max-width:440px; font-size:15px; line-height:1.8; margin:28px 0 27px; color:#4c665f; }.hero-actions { display:flex; align-items:center; gap:25px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:15px 18px 15px 21px; font-size:12px; font-weight:800; transition:transform .25s,box-shadow .25s; }.button:hover { transform:translateY(-3px); box-shadow:5px 6px 0 rgba(21,53,46,.22); }.button span { font-size:19px; line-height:12px; }.button-primary { color:var(--cream); background:var(--ink); }.text-link { font-size:11px; font-weight:800; }.text-link span { color:var(--orange); margin-left:5px; }.hero-proof { display:flex; align-items:center; gap:12px; margin-top:40px; }.hero-proof p { font-size:10px; line-height:1.55; color:#607871; margin:0; }.hero-proof strong { color:var(--ink); }.avatars { display:flex; }.avatars i { display:grid; place-items:center; width:25px; height:25px; margin-left:-6px; border:2px solid var(--paper); border-radius:50%; background:#d8a391; color:var(--ink); font:500 9px var(--mono); font-style:normal; }.avatars i:nth-child(2){background:#b8dcc9}.avatars i:nth-child(3){background:#f5ca58}.avatars i:last-child{background:var(--ink);color:white;}
.hero-visual { min-height:430px; position:relative; display:grid; place-items:center; }.sun { position:absolute; width:357px; aspect-ratio:1; border-radius:50%; background:var(--yellow); top:7px; right:41px; }.paper-map { width:360px; min-height:415px; padding:22px 25px 18px; position:relative; z-index:1; background:#fffdf7; transform:rotate(5deg); box-shadow:13px 19px 0 rgba(21,53,46,.12), 0 15px 29px rgba(21,53,46,.14); }.paper-map::after { content:""; position:absolute; inset:8px; border:1px solid rgba(21,53,46,.11); pointer-events:none; }.paper-top,.paper-bottom { display:flex; justify-content:space-between; position:relative; z-index:2; color:#658078; font:500 8px var(--mono); letter-spacing:1px; }.paper-map h2 { margin:31px 0 7px; font-size:33px; line-height:.95; letter-spacing:-2px; position:relative; z-index:2; }.paper-map h2 em { font:italic 700 1em var(--serif); }.mind-map { height:212px; position:relative; z-index:2; }.mind-map svg { inset:0; position:absolute; width:100%; height:100%; pointer-events:none; }.mind-map path { fill:none; stroke:#9ab5a9; stroke-width:1.3; stroke-dasharray:3 3; }.center-node,.map-node { position:absolute; z-index:1; display:grid; place-items:center; text-align:center; }.center-node { width:54px; aspect-ratio:1; left:calc(50% - 27px); top:83px; border-radius:50%; background:var(--orange); color:#fffaf1; font:500 12px var(--mono); }.map-node { padding:6px 8px; border:1px solid #b7d0c2; background:#f6fbf3; color:#40635a; font:500 8px/1.35 var(--mono); }.node-a{left:1px;top:26px;}.node-b{right:2px;top:13px;}.node-c{left:2px;bottom:19px;}.node-d{right:0;bottom:21px;}.paper-bottom { border-top:1px solid #d5e1d7; padding-top:12px; }.paper-bottom b { color:var(--orange); }.visual-label { position:absolute; z-index:2; padding:8px 11px; background:var(--ink); color:var(--cream); font:500 8px var(--mono); letter-spacing:.8px; text-transform:uppercase; }.label-top { top:39px; left:33px; transform:rotate(-8deg); }.label-bottom { right:6px; bottom:14px; background:var(--orange); transform:rotate(7deg); }
.ticker { overflow:hidden; white-space:nowrap; background:var(--ink); color:var(--cream); transform:rotate(-1.4deg) scale(1.03); padding:17px 0; }.ticker-track { display:inline-flex; gap:25px; align-items:center; animation:marquee 25s linear infinite; font:500 12px var(--mono); letter-spacing:1px; }.ticker b { color:var(--yellow); font-size:15px; } @keyframes marquee {to { transform:translateX(-38%);}}
.section { max-width:1120px; margin:auto; padding:142px 32px; }.method { display:grid; grid-template-columns:1fr 1fr; column-gap:110px; }.section h2,.content-copy h2 { font-size:clamp(40px,4.4vw,62px); }.section-intro { max-width:370px; align-self:end; margin:0 0 8px; color:#567069; font-size:15px; line-height:1.8; }.steps { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:70px; }.step-card { min-height:250px; position:relative; padding:25px; border:1px solid var(--line); background:rgba(255,250,241,.42); }.step-card:hover { border-color:var(--ink); }.step-number,.subject-card > span { color:#799087; font:500 10px var(--mono); }.step-icon { width:57px; height:57px; display:grid; place-items:center; margin:41px 0 19px; border-radius:50%; font-size:27px; }.icon-focus { background:var(--yellow); }.icon-link { background:var(--mint); }.icon-remember { background:#fac8b9; }.step-card h3,.subject-card h3 { margin:0 0 8px; font-size:17px; letter-spacing:-.8px; }.step-card p { margin:0; max-width:220px; color:#668077; font-size:12px; line-height:1.65; }
.content-block { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:104px max(32px,calc((100% - 1120px)/2)); background:#e7efe5; }.content-copy > p:not(.eyebrow) { color:#58726a; font-size:14px; line-height:1.8; max-width:465px; margin:25px 0; }.check-list { list-style:none; padding:0; margin:0 0 30px; display:grid; gap:12px; font-size:12px; font-weight:700; }.check-list span { color:var(--orange); margin-right:8px; }.button-dark { background:var(--ink); color:white; }.subject-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.subject-card { min-height:160px; padding:20px; position:relative; background:#fbf7ef; overflow:hidden; }.subject-card h3 { margin-top:32px; }.subject-card p { margin:0; color:#58716a; font-size:10px; line-height:1.55; }.subject-card i { position:absolute; font-style:normal; color:var(--orange); font-size:60px; opacity:.9; right:17px; bottom:8px; }.subject-large { grid-row:span 2; min-height:332px; background:var(--ink); color:var(--cream); }.subject-large > span { color:#a6c7b7; }.subject-large h3 { font-size:28px; margin-top:90px; }.subject-large p { color:#c0d7ca; }.subject-large i { font-size:84px; color:var(--yellow); }.coral { background:#f8c4b3; }.sky { background:#badce0; }.yellow { grid-column:span 2; min-height:130px; background:var(--yellow); }.yellow h3 { margin-top:21px; }.yellow i { font-size:48px; }
.testimonial { padding-top:145px; padding-bottom:145px; text-align:center; }.testimonial .eyebrow { justify-content:center; }.testimonial blockquote { max-width:910px; margin:23px auto 35px; font-size:clamp(34px,4.4vw,60px); letter-spacing:-3px; line-height:1.08; font-weight:800; }.testimonial em { font:italic 700 1em var(--serif); }.quote-line { display:flex; justify-content:center; align-items:center; gap:11px; color:#617a72; font-size:11px; }.quote-line span { width:26px; height:1px; background:var(--orange); }.quote-line p { margin:0; }.faq { display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; padding-top:0; }.faq-list { border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); padding:20px 0; }.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; font-size:14px; font-weight:800; }.faq summary::-webkit-details-marker {display:none}.faq summary span { font:400 20px var(--mono); color:var(--orange); transition:.2s; }.faq details[open] summary span { transform:rotate(45deg); }.faq details p { max-width:480px; margin:16px 30px 1px 0; color:#657e76; font-size:12px; line-height:1.7; }
.final-cta { min-height:450px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 28px; background:var(--orange); color:var(--ink); }.final-cta .eyebrow { color:var(--ink); }.final-cta .eyebrow span { background:var(--ink); }.final-cta h2 { font-size:clamp(42px,5vw,68px); position:relative; z-index:1; }.final-cta > p:not(.eyebrow) { margin:20px 0 27px; font-size:13px; position:relative; z-index:1; }.button-light { position:relative; z-index:1; background:var(--cream); }.final-cta small { position:relative; z-index:1; margin-top:18px; font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.6px; }.final-orb { position:absolute; border-radius:50%; border:1px solid rgba(21,53,46,.15); }.orb-one { width:490px; height:490px; left:-193px; bottom:-316px; }.orb-two { width:420px; height:420px; right:-130px; top:-300px; } footer { height:93px; max-width:1240px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; } footer p { color:#718880; font:500 9px var(--mono); }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1; transform:none; }
@media (max-width:760px) { .topbar { height:68px; padding:0 21px; }.desktop-nav,.nav-cta { display:none; }.menu-toggle { display:grid; gap:5px; padding:7px 0 7px 7px; border:0; background:transparent; }.menu-toggle span { display:block; width:23px; height:2px; background:var(--ink); transition:transform .2s; }.menu-toggle.active span:first-child { transform:translateY(3.5px) rotate(45deg); }.menu-toggle.active span:last-child { transform:translateY(-3.5px) rotate(-45deg); }.mobile-nav { position:absolute; top:61px; right:21px; left:21px; padding:18px; background:var(--ink); color:var(--cream); box-shadow:0 12px 25px rgba(21,53,46,.2); }.mobile-nav.open { display:grid; gap:2px; }.mobile-nav a { padding:11px 6px; border-bottom:1px solid rgba(255,255,255,.15); font-size:12px; font-weight:700; }.mobile-nav a:last-child { color:var(--yellow); border:0; }.hero { padding:55px 23px 65px; grid-template-columns:1fr; gap:35px; }.hero h1 { font-size:51px; letter-spacing:-3.5px; }.hero h1 em { letter-spacing:-3px; }.hero-text { font-size:14px; margin:23px 0; }.hero-actions { gap:19px; }.text-link { font-size:10px; }.hero-visual { min-height:368px; }.sun { width:290px; right:-8px; top:0; }.paper-map { width:285px; min-height:340px; padding:17px 19px 13px; }.paper-map h2 { font-size:27px; margin:25px 0 0; }.mind-map { height:178px; }.center-node { top:71px; }.node-a { top:19px; }.node-b { top:8px; }.node-c { bottom:10px; }.node-d { bottom:12px; }.visual-label { font-size:7px; }.label-top { left:4px; top:26px; }.label-bottom { right:0; }.ticker { padding:13px 0; }.method { display:block; padding:95px 23px; }.section-intro { margin:20px 0 0; }.steps { grid-template-columns:1fr; margin-top:40px; }.step-card { min-height:205px; }.step-icon { margin:25px 0 16px; }.content-block { grid-template-columns:1fr; gap:50px; padding:80px 23px; }.content-copy h2 { letter-spacing:-3px; }.subject-large h3 { margin-top:85px; }.testimonial { padding:90px 23px; }.testimonial blockquote { letter-spacing:-2px; }.faq { display:block; padding:0 23px 85px; }.faq .section-heading { margin-bottom:35px; }.final-cta { min-height:430px; }.final-cta h2 { letter-spacing:-3px; }.final-cta h2 em { letter-spacing:-3px; } footer { height:auto; padding:28px 23px; gap:18px; align-items:flex-start; flex-direction:column; } footer p { margin:0; } }

.desktop-nav { gap:24px; margin-left:54px; }
.coverage { display:grid; grid-template-columns:.82fr 1fr; column-gap:84px; padding-top:126px; padding-bottom:120px; }
.coverage-summary { align-self:end; display:flex; align-items:center; gap:22px; padding-top:22px; border-top:1px solid var(--line); }
.coverage-summary strong { font-size:clamp(72px,8vw,118px); line-height:.8; letter-spacing:-6px; }
.coverage-summary p { max-width:430px; margin:0; color:#567069; font-size:14px; line-height:1.75; }
.area-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:58px; }
.area-card { min-height:280px; display:flex; flex-direction:column; padding:20px; border:1px solid var(--line); background:rgba(255,250,241,.56); transition:transform .25s,border-color .25s,box-shadow .25s; }
.area-card:hover { transform:translateY(-4px); border-color:rgba(21,53,46,.45); box-shadow:6px 8px 0 rgba(21,53,46,.08); }
.area-card > span { color:#799087; font:500 10px var(--mono); }
.area-card div { min-height:70px; margin:30px 0 10px; }
.area-card h3 { margin:0 0 7px; font-size:18px; line-height:1.05; letter-spacing:-.8px; }
.area-card b { color:var(--orange); font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.7px; }
.area-card p { margin:0 0 18px; color:#5f786f; font-size:12px; line-height:1.65; }
.area-card-accent { background:var(--ink); color:var(--cream); }
.area-card-accent > span { color:#b8dfc6; }
.area-card-accent b { color:var(--yellow); }
.area-card-accent p { color:#c6d9d0; }
.topic-pills { list-style:none; padding:0; margin:auto 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.topic-pills li { padding:6px 8px; border:1px solid rgba(21,53,46,.14); background:rgba(255,255,255,.34); color:#496860; font:500 9px var(--mono); }
.area-card-accent .topic-pills li { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#ecf4ec; }
.samples { max-width:1180px; padding-top:112px; }
.samples-heading { display:grid; grid-template-columns:.92fr 1fr; gap:74px; align-items:end; }
.samples-heading h2 { font-size:clamp(40px,4.4vw,62px); line-height:.98; letter-spacing:-4px; margin:0; font-weight:800; }
.samples-heading h2 em { font:italic 700 1em var(--serif); letter-spacing:-4px; }
.samples-heading > p:not(.eyebrow) { max-width:440px; margin:0 0 8px; color:#567069; font-size:15px; line-height:1.8; }
.samples-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:start; gap:30px; margin-top:52px; }
.sample-preview { margin:0; }
.sample-sheet { display:grid; place-items:center; min-height:520px; max-height:760px; padding:14px; overflow:hidden; border:1px solid var(--line); background:#fffdf7; box-shadow:14px 18px 0 rgba(21,53,46,.1); }
.sample-sheet img { display:block; width:100%; max-height:732px; object-fit:contain; object-position:top center; }
.sample-preview figcaption { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; margin-top:22px; }
.sample-preview figcaption > span { display:grid; place-items:center; width:46px; height:46px; background:var(--orange); color:white; font:500 12px var(--mono); }
.sample-preview strong { display:block; font-size:15px; letter-spacing:-.4px; }
.sample-preview small { display:block; margin-top:4px; color:#657e76; font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.7px; }
.sample-expand { justify-self:end; min-height:42px; padding:0 16px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; font:800 11px var(--sans); text-transform:uppercase; letter-spacing:.7px; transition:background .2s,color .2s,transform .2s; }
.sample-expand:hover { background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.sample-list { position:sticky; top:96px; display:grid; gap:10px; }
.sample-thumb { min-height:98px; display:grid; grid-template-columns:62px 1fr; align-items:center; column-gap:13px; padding:9px; border:1px solid var(--line); background:rgba(255,250,241,.58); color:var(--ink); cursor:pointer; text-align:left; font-family:var(--sans); transition:transform .2s,border-color .2s,box-shadow .2s,background .2s; }
.sample-thumb:hover,.sample-thumb.active { transform:translateX(-4px); border-color:var(--orange); background:#fffaf1; box-shadow:5px 6px 0 rgba(255,112,76,.15); }
.sample-thumb img { grid-row:1/3; width:62px; height:80px; object-fit:cover; object-position:top center; background:white; }
.sample-thumb span { color:var(--orange); font:500 10px var(--mono); }
.sample-thumb strong { font-size:12px; line-height:1.2; letter-spacing:-.2px; }
.sample-modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:34px; background:rgba(21,53,46,.84); }
.sample-modal[hidden] { display:none; }
.sample-modal img { display:block; max-width:min(94vw,920px); max-height:92vh; object-fit:contain; background:white; box-shadow:0 26px 60px rgba(0,0,0,.35); }
.modal-close { position:fixed; top:18px; right:18px; width:44px; height:44px; border:0; background:var(--cream); color:var(--ink); cursor:pointer; font-size:30px; line-height:1; }
body.modal-open { overflow:hidden; }

@media (max-width:1060px) {
  .desktop-nav { margin-left:28px; gap:17px; }
  .area-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .area-card-accent { grid-column:span 2; }
  .samples-layout { grid-template-columns:1fr; }
  .sample-list { position:static; grid-template-columns:repeat(5,minmax(138px,1fr)); overflow-x:auto; padding-bottom:8px; }
  .sample-thumb { min-width:138px; grid-template-columns:1fr; align-items:start; row-gap:6px; }
  .sample-thumb:hover,.sample-thumb.active { transform:translateY(-3px); }
  .sample-thumb img { grid-row:auto; width:100%; height:92px; }
}

@media (max-width:760px) {
  .coverage { display:block; padding:86px 23px; }
  .coverage-summary { margin-top:25px; align-items:flex-start; flex-direction:column; gap:14px; }
  .coverage-summary strong { font-size:82px; letter-spacing:-4px; }
  .area-grid { grid-template-columns:1fr; margin-top:36px; }
  .area-card,.area-card-accent { grid-column:auto; min-height:235px; }
  .area-card div { min-height:auto; margin:24px 0 10px; }
  .samples { padding:88px 23px; }
  .samples-heading { display:block; }
  .samples-heading h2 { letter-spacing:-3px; }
  .samples-heading h2 em { letter-spacing:-3px; }
  .samples-heading > p:not(.eyebrow) { margin-top:20px; }
  .samples-layout { margin-top:38px; }
  .sample-sheet { min-height:430px; max-height:560px; padding:9px; box-shadow:8px 10px 0 rgba(21,53,46,.1); }
  .sample-sheet img { max-height:542px; }
  .sample-preview figcaption { grid-template-columns:auto 1fr; }
  .sample-expand { grid-column:1/-1; justify-self:stretch; }
  .sample-list { grid-template-columns:repeat(5,142px); margin-right:-23px; }
  .sample-modal { padding:18px; }
  .modal-close { top:12px; right:12px; }
}

@media (max-width:760px) {
  button.menu-toggle { display:grid; width:38px; height:38px; min-width:38px; place-items:center end; position:fixed; top:15px; right:21px; z-index:50; border:1px solid rgba(21,53,46,.16); border-radius:50%; background:#fffaf1; box-shadow:0 6px 16px rgba(21,53,46,.08); }
  button.menu-toggle span { display:none; }
  button.menu-toggle::before,
  button.menu-toggle::after { content:""; position:absolute; right:0; width:24px; height:2px; background:var(--ink); transition:transform .2s; }
  button.menu-toggle::before { top:14px; }
  button.menu-toggle::after { top:22px; }
  button.menu-toggle.active::before { transform:translateY(4px) rotate(45deg); }
  button.menu-toggle.active::after { transform:translateY(-4px) rotate(-45deg); }
  .hero h1 { max-width:330px; font-size:43px; line-height:1.04; letter-spacing:0; }
  .hero h1 em { letter-spacing:0; }
  .hero-text { max-width:325px; }
  .hero-actions { flex-wrap:wrap; }
  .hero-proof { align-items:flex-start; }
}

@media (max-width:360px) {
  .hero h1 { max-width:292px; font-size:39px; }
  .button { width:100%; }
}
