/* ========================================================== Claire Counselling — shared stylesheet ========================================================== */ :root{ --navy:#26467A; --navy-deep:#1D3762; --ink:#1C2C4C; --body:#4A5568; --crimson:#A82C36; --cream:#FAF6F0; --sand:#F1EDE5; --border:#E6E0D6; --grey:#6B7280; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} } body{ margin:0; background:var(--cream); color:var(--ink); font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:19px; line-height:1.65; -webkit-font-smoothing:antialiased; } /* ---------- type ---------- */ h1,h2,h3{font-family:"Jost",system-ui,sans-serif;font-weight:400;color:var(--navy)} h1{font-size:clamp(2.05rem,4.2vw,3.4rem);line-height:1.15;letter-spacing:-.005em;margin:0 0 1.3rem} h2{font-size:clamp(1.45rem,3.2vw,2rem);line-height:1.25;margin:0 0 1.1rem} h3{font-size:1.2rem;margin:0 0 .45rem;color:var(--ink)} p{margin:0 0 1.1rem;max-width:34rem;color:var(--body)} a{color:var(--navy)} a:focus-visible,button:focus-visible{outline:2px solid var(--crimson);outline-offset:3px} strong{color:var(--ink);font-weight:600} .lede{font-size:1.18rem;color:var(--body);max-width:34rem} .narrow{max-width:36rem} .tbc{background:rgba(168,44,54,.09);color:#7E3B41;font-style:italic;padding:.05em .3em;border-radius:2px} /* ---------- layout ---------- */ .wrap{width:min(100% - 3rem, 72rem);margin-inline:auto} .band{padding:5.5rem 0} .band--sand{background:var(--sand)} .band--navy{background:var(--navy);color:#EEF1F6} .band--navy h2,.band--navy h3{color:#fff} .band--navy p{color:#D6DDEA} .band--navy a{color:#fff} .band--navy .btn--light{color:var(--navy)} .band--navy .btn--light:hover{color:var(--navy-deep)} .band--navy strong{color:#fff} .band--navy .tbc{background:rgba(255,255,255,.14);color:#FBE3E5} section[id]{scroll-margin-top:6rem} /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:40; background:rgba(250,246,240,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 0;transition:padding .25s ease} header.shrunk .bar{padding:.45rem 0} .mark{display:flex;align-items:center;text-decoration:none;flex:none} .mark .logo{height:118px;width:auto;display:block;mix-blend-mode:multiply} nav{display:flex;align-items:center;gap:1.7rem;margin-left:auto} nav a.navlink{ font-family:"Jost",sans-serif;font-size:.95rem;color:var(--body); text-decoration:none;padding:.2rem 0;border-bottom:1px solid transparent;white-space:nowrap; } nav a.navlink:hover,nav a.navlink[aria-current="page"]{color:var(--navy);border-bottom-color:var(--crimson)} /* ---------- buttons ---------- */ .btn{ display:inline-block;font-family:"Jost",sans-serif;font-size:.98rem;letter-spacing:.02em; background:var(--navy);color:#fff;text-decoration:none; padding:.72rem 1.35rem;border:1px solid var(--navy);border-radius:2px;cursor:pointer; transition:background .18s ease,color .18s ease; } .btn:hover{background:var(--navy-deep);border-color:var(--navy-deep)} .btn--ghost{background:transparent;color:var(--navy)} .btn--ghost:hover{background:rgba(38,70,122,.08)} .btn--light{background:#fff;color:var(--navy);border-color:#fff} .bar .btn{font-size:.88rem;padding:.55rem 1.05rem} .btnrow{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem} /* ---------- hero ---------- */ .hero{padding:3.2rem 0 4.2rem} .herogrid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center} .hero .where{margin-top:2rem;font-size:.95rem;color:var(--grey);max-width:34rem} .portrait{width:100%;aspect-ratio:5/6;object-fit:cover;object-position:50% 26%;display:block;border-radius:2px} .portrait-name{font-size:.9rem;color:var(--grey);margin:.8rem 0 0;max-width:none} .alt{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:start} .alt--rev .alt-text{order:2} .alt--rev .alt-media{order:1} .alt-media img{width:100%;height:auto;display:block;border-radius:2px} .alt-media .ph{aspect-ratio:4/5} .alt-text p,.alt-text ul{max-width:none} .alt-text p:last-child{margin-bottom:0} /* ---------- recognition ---------- */ .recog{list-style:none;padding:0;margin:2.2rem 0 0; display:grid;grid-template-columns:1fr 1fr;gap:0 5rem;max-width:none} .recog li{ font-family:"Jost",sans-serif;font-weight:300; font-size:1.32rem;line-height:1.45;color:var(--navy); padding:1.25rem 0 1.25rem 1.6rem;border-bottom:1px solid var(--border);position:relative; } .recog li::before{content:"";position:absolute;left:0;top:1.95rem;width:7px;height:9px; background:var(--crimson);border-radius:60% 0 60% 0;transform:rotate(-12deg);opacity:.75} .recog-intro{font-size:1.1rem;max-width:38rem} /* ---------- themes ---------- */ .themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.2rem 3rem;margin-top:2rem} .themes p{font-size:.98rem;margin:0;max-width:none;line-height:1.55} .themes h3{font-size:1.06rem;color:var(--navy);border-bottom:1px solid var(--border);padding-bottom:.45rem;margin-bottom:.6rem} .twocol{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin:1.8rem 0} .twocol p{max-width:none;margin:0} .twocol h3{margin-bottom:.4rem} .band--navy .yp-intro{max-width:42rem;font-size:1.12rem} .yp-lower{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.4rem;align-items:start} .yp-lower .pull{margin:0;max-width:none} /* ---------- ways + fees ---------- */ .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.2rem} .way{border-top:2px solid var(--navy);padding-top:1.4rem;display:flex;flex-direction:column} .way h3{font-size:1.2rem;margin-bottom:.5rem} .way p{font-size:.97rem;margin:0 0 1.4rem;max-width:none;line-height:1.55} .waylink{margin:0 0 1.4rem;font-size:.95rem} .waylink a{border-bottom:1px solid rgba(38,70,122,.35);text-decoration:none;padding-bottom:1px} .waylink a:hover{border-bottom-color:var(--navy)} .way .price{ margin-top:auto;font-family:"Jost",sans-serif;font-size:1.9rem; color:var(--navy);line-height:1;max-width:none; } .way .price small{display:block;font-size:.82rem;color:var(--grey);margin-top:.5rem;letter-spacing:.02em} .feesnote{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--border);font-size:.97rem;color:var(--grey);max-width:44rem} /* ---------- steps ---------- */ .steps{counter-reset:s;margin:2rem 0 0;padding:0;list-style:none;max-width:38rem} .steps li{counter-increment:s;position:relative;padding:1.05rem 0 1.05rem 2.6rem; border-bottom:1px solid var(--border);max-width:none;color:var(--body)} .steps li:last-child{border-bottom:none} .steps li::before{ content:counter(s);position:absolute;left:0;top:1.05rem; font-family:"Jost",sans-serif;font-size:1.05rem;line-height:1.65;color:var(--crimson); } .steps .steptext{display:block} .steps strong{color:var(--ink);font-weight:600} /* ---------- quote ---------- */ .pull{ font-family:"Jost",sans-serif;font-size:1.3rem;line-height:1.5;font-weight:300; border-left:2px solid var(--crimson);padding-left:1.5rem;margin:2.2rem 0;max-width:36rem;color:#3d4a5f; } .band--navy .pull{color:#E6EBF3;border-left-color:#F2B8BC} /* ---------- credentials ---------- */ .credentials{margin:1.6rem 0 0;padding:0;list-style:none;border-top:1px solid var(--border);max-width:34rem} .credentials li{border-bottom:1px solid var(--border);padding:.7rem 0;font-size:.97rem;color:var(--body)} .reg{margin:0;font-size:.92rem;color:var(--grey);max-width:36rem} .regblock{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--border); display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start} .bacp{height:64px;width:auto;display:block;mix-blend-mode:multiply} .bacp--footer{margin-top:1.2rem;height:58px} /* ---------- qa ---------- */ .qa{border-top:1px solid var(--border);max-width:38rem;margin-top:1.6rem} .qa > div{border-bottom:1px solid var(--border);padding:1.4rem 0} .qa h3{font-size:1.1rem;margin-bottom:.3rem} .qa p{margin:0;font-size:.99rem;max-width:none} /* ---------- form ---------- */ .contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start} .form{max-width:34rem} .field{margin-bottom:1.15rem} label{display:block;font-family:"Jost",sans-serif;font-size:.9rem;letter-spacing:.03em;color:var(--navy);margin-bottom:.35rem} input,textarea{ width:100%;font-family:inherit;font-size:1rem;padding:.7rem .8rem; border:1px solid #cfc7b8;border-radius:2px;background:#fff;color:var(--ink); } input:focus,textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(38,70,122,.12)} textarea{min-height:7rem;resize:vertical} .choices{display:flex;gap:1.4rem;flex-wrap:wrap} .choices label{font-family:"Inter",sans-serif;font-size:1rem;letter-spacing:0;color:var(--ink); display:flex;align-items:center;gap:.45rem;margin:0;cursor:pointer} .choices input{width:auto} .consent{font-size:.88rem;color:var(--grey);margin-top:1rem} .direct{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:1.02rem} .direct .lbl{display:block;font-family:"Jost",sans-serif;font-size:.85rem;letter-spacing:.06em;color:var(--grey);margin-bottom:.6rem} .direct a{display:block;margin-bottom:.3rem} /* ---------- inner page head ---------- */ .pagehead{background:var(--sand);padding:3.5rem 0 3.2rem;border-bottom:1px solid var(--border)} .back{font-size:.9rem;color:var(--grey);text-decoration:none;display:block;margin-bottom:1.4rem} .back:hover{color:var(--navy)} /* ---------- prose ---------- */ .prose{max-width:38rem} .prose h2{margin:3rem 0 .8rem} .prose h2:first-child{margin-top:0} .prose h3{font-size:1.05rem;font-family:"Inter",sans-serif;font-weight:600;margin:1.7rem 0 .4rem;color:var(--ink)} .prose ul{padding-left:1.3rem;margin:0 0 1.15rem} .prose li{margin-bottom:.5rem;max-width:34rem;color:var(--body)} .keypoint{background:var(--sand);border-left:3px solid var(--crimson);padding:1.5rem 1.7rem;margin:1.7rem 0;max-width:38rem} .keypoint p:last-child{margin-bottom:0} table{border-collapse:collapse;margin:1.3rem 0 1.7rem;max-width:40rem;width:100%;font-size:.97rem} th{text-align:left;font-family:"Jost",sans-serif;font-weight:400;color:var(--navy); border-bottom:1.5px solid var(--navy);padding:0 1.1rem .55rem 0;font-size:.95rem} td{padding:.85rem 1.1rem .85rem 0;border-bottom:1px solid var(--border);vertical-align:top;color:var(--body)} td:last-child,th:last-child{padding-right:0} .updated{margin-top:3.2rem;padding-top:1.4rem;border-top:1px solid var(--border);font-size:.9rem;color:var(--grey)} /* ---------- placeholder ---------- */ .ph{ border:1px dashed #c4bcae; background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(38,70,122,.045) 9px,rgba(38,70,122,.045) 18px); display:flex;align-items:center;justify-content:center;text-align:center; font-family:"Jost",sans-serif;font-size:.82rem;color:#9b9282;letter-spacing:.04em;padding:1rem; } .ph--room{aspect-ratio:16/9;margin-top:2.5rem} .ph--wide{aspect-ratio:21/9;margin-top:2.5rem} /* ---------- footer ---------- */ footer{background:#EDE7DD;padding:3.5rem 0 2.5rem;font-size:.93rem;color:#5a6472} .fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem} footer a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(38,70,122,.3)} footer h4{font-family:"Jost",sans-serif;font-size:.95rem;font-weight:400;color:var(--navy);margin:0 0 .8rem} .flogo{height:88px;width:auto;display:block;margin-bottom:1rem;mix-blend-mode:multiply} .fstack a{display:block;margin-bottom:.5rem} .crisis{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid #ddd4c6;font-size:.9rem;max-width:44rem} .smallprint{margin-top:1.5rem;font-size:.82rem;color:#8a8f99} .switcher{background:#2f3d55;color:#D6DDEA;font-family:"Inter",sans-serif;font-size:.8rem;text-align:center;padding:.45rem} .switcher a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);text-decoration:none} .preview-flag{background:var(--crimson);color:#fff;font-family:"Jost",sans-serif;font-size:.8rem;letter-spacing:.06em;text-align:center;padding:.5rem} /* ========================================================== Responsive ========================================================== */ @media(max-width:1024px){ .mark .logo{height:100px} nav{gap:1.1rem} nav a.navlink{font-size:.88rem} .herogrid{gap:2.5rem} .contact-grid{gap:2.5rem} } @media(max-width:880px){ nav a.navlink{display:none} .mark .logo{height:84px} .band{padding:4.2rem 0} .herogrid{grid-template-columns:1fr;gap:2rem} .alt{grid-template-columns:1fr;gap:2rem} .twocol{grid-template-columns:1fr;gap:1.4rem} .yp-lower{grid-template-columns:1fr;gap:1.8rem} .recog{grid-template-columns:1fr;gap:0} .alt--rev .alt-text{order:1} .alt--rev .alt-media{order:2} .alt-media{max-width:22rem} .alt-media .ph{aspect-ratio:4/3} .hero{padding:2.6rem 0 3rem} .hero .portraitwrap{order:2;max-width:21rem} .ways{grid-template-columns:1fr;gap:1.8rem} .contact-grid{grid-template-columns:1fr;gap:2.5rem} .fcols{grid-template-columns:1fr 1fr} } @media(max-width:600px){ body{font-size:17.5px} .wrap{width:calc(100% - 2rem)} .band{padding:3.3rem 0} .mark .logo{height:70px} .themes{gap:1.6rem} .regblock{grid-template-columns:1fr;gap:1rem} .recog li{font-size:1.12rem;padding-top:1rem;padding-bottom:1rem} .recog li::before{top:1.6rem} .pull{margin:1.8rem 0;font-size:1.15rem;padding-left:1.1rem} .steps li{padding:.8rem 0} .fcols{grid-template-columns:1fr;gap:2rem} .pagehead{padding:2.4rem 0 2.2rem} .keypoint{padding:1.2rem 1.3rem} section[id]{scroll-margin-top:4.5rem} footer{padding:2.5rem 0 2rem} } /* ========================================================== Additions for the rebuilt home page ========================================================== */ .herolink{margin:1.1rem 0 0;font-size:1rem} .herolink a{border-bottom:1px solid rgba(38,70,122,.35);text-decoration:none;padding-bottom:1px} .herolink a:hover{border-bottom-color:var(--navy)} /* collapsible qualifications */ .quals{margin-top:1.6rem} .quals summary{ cursor:pointer;font-family:"Jost",sans-serif;font-size:1rem;color:var(--navy); padding:.6rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border); list-style:none;display:flex;align-items:center;justify-content:space-between; } .quals summary::-webkit-details-marker{display:none} .quals summary::after{content:"+";font-size:1.2rem;color:var(--crimson);line-height:1} .quals[open] summary::after{content:"–"} .quals .credentials{border-top:none;margin-top:1rem} .quals .reg{margin-top:1rem} .regblock{margin-top:1.6rem;padding-top:0;border-top:none;display:block} /* fees detail */ .feesdetail{margin-top:2rem;max-width:38rem} .feesdetail p{margin-bottom:.85rem;font-size:1rem} .noobligation{ margin-top:2rem;padding:1.2rem 1.4rem;background:var(--sand); border-left:3px solid var(--crimson);max-width:38rem; } .band--sand .noobligation{background:#fff} /* mobile call-to-action bar */ .mobile-cta{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:50; background:var(--navy);color:#fff;text-decoration:none;text-align:center; font-family:"Jost",sans-serif;font-size:1rem;padding:1rem; box-shadow:0 -2px 14px rgba(28,44,76,.18); transform:translateY(100%);transition:transform .25s ease; } body.scrolled .mobile-cta{transform:translateY(0)} @media(max-width:880px){ .mobile-cta{display:block} body{padding-bottom:3.6rem} } /* mobile: fit the essentials on the first screen */ @media(max-width:600px){ .hero{padding:1.6rem 0 2.4rem} .herogrid{gap:1.4rem} .hero .portraitwrap{order:-1;max-width:none} .portrait{aspect-ratio:16/10;object-position:50% 22%} .portrait-name{margin-top:.5rem;font-size:.85rem} h1{font-size:2.1rem;line-height:1.12} .hero .lede{font-size:1.06rem} .hero .btnrow{margin-top:1.4rem} .hero .btnrow .btn{width:100%;text-align:center} .hero .where{margin-top:1.2rem} .quals summary{font-size:.98rem} .feesdetail p{font-size:.97rem} .noobligation{padding:1rem 1.1rem} } /* hero portrait: keep it in proportion on larger screens */ @media(min-width:881px){ .herogrid{grid-template-columns:1.25fr .8fr;align-items:center} .portraitwrap{max-width:24rem;justify-self:end} .portrait{aspect-ratio:4/5} } /* ========================================================== Logo-led hero, fee cards, step cards ========================================================== */ /* header hidden at the top, slides in on scroll */ header.floating{ transform:translateY(-100%);opacity:0;pointer-events:none; transition:transform .3s ease,opacity .3s ease; } header.floating.shrunk{transform:translateY(0);opacity:1;pointer-events:auto} header.floating .mark .logo{height:52px} @media (prefers-reduced-motion:reduce){header.floating{transition:none}} .hero--logo{padding:3.5rem 0 4.5rem;text-align:center} .hero--logo .wrap{display:flex;flex-direction:column;align-items:center} .hero-logo{width:min(300px,58vw);height:auto;display:block;margin:0 0 2rem;mix-blend-mode:multiply} .hero--logo h1{margin-bottom:1.3rem} .hero--logo .lede{max-width:40rem;margin-bottom:0} .hero--logo .btnrow{justify-content:center;margin-top:2rem} .hero--logo .herolink{margin-top:1.2rem} .hero--logo .where{margin-top:1.8rem;max-width:40rem} .media-cap{font-size:.88rem;color:var(--grey);margin:.7rem 0 0;text-align:left} .waymeta{ font-family:"Jost",sans-serif;font-size:.85rem;letter-spacing:.06em; text-transform:uppercase;color:var(--crimson);margin:0 0 .8rem; } /* fees */ .feecards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:2.2rem 0 0} .feecard{background:#fff;border:1px solid var(--border);padding:1.8rem 1.6rem;text-align:center} .band--sand .feecard{background:#FBF8F3} .feecard h3{font-size:1.05rem;color:var(--navy);margin-bottom:1rem} .feecard .amt{font-family:"Jost",sans-serif;font-size:2.6rem;color:var(--navy);line-height:1;margin:0 0 .6rem;max-width:none} .feecard .per{font-size:.9rem;color:var(--grey);margin:0;max-width:none} .feesdetail{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:3rem;max-width:none; padding-top:2.2rem;border-top:1px solid var(--border)} .feesdetail h3{font-size:1.02rem;color:var(--navy);margin-bottom:.4rem} .feesdetail p{font-size:.97rem;margin:0;max-width:none;line-height:1.55} /* steps as cards */ .stepcards{list-style:none;padding:0;margin:2.4rem 0 0; display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem} .stepcards li{padding-top:1.3rem;border-top:2px solid var(--navy);max-width:none} .stepcards .n{ display:block;font-family:"Jost",sans-serif;font-size:1.6rem; color:var(--crimson);line-height:1;margin-bottom:.7rem; } .stepcards h3{font-size:1.08rem;margin-bottom:.35rem} .stepcards p{font-size:.96rem;margin:0;max-width:none;line-height:1.55} @media(max-width:980px){ .feecards{grid-template-columns:repeat(3,1fr);gap:1rem} .feecard{padding:1.4rem 1rem} .feecard .amt{font-size:2.1rem} .feesdetail{grid-template-columns:1fr;gap:1.6rem} .stepcards{grid-template-columns:1fr 1fr;gap:1.6rem} } @media(max-width:600px){ .hero--logo{padding:2rem 0 2.8rem} .hero-logo{width:min(220px,62vw);margin-bottom:1.4rem} .hero--logo .btnrow .btn{width:100%;text-align:center} .feecards{grid-template-columns:1fr;gap:.9rem} .feecard{display:flex;align-items:baseline;justify-content:space-between;text-align:left;padding:1.1rem 1.2rem} .feecard h3{margin:0;font-size:1rem} .feecard .amt{font-size:1.7rem;margin:0} .feecard .per{display:none} .stepcards{grid-template-columns:1fr;gap:1.3rem} .media-cap{text-align:center} } /* ---------- hero card link ---------- */ .herocard{ display:block;margin-top:1.4rem;padding:1.1rem 1.4rem; background:#fff;border:1px solid var(--border);border-left:3px solid var(--crimson); text-decoration:none;text-align:left;max-width:26rem;width:100%; transition:border-color .18s ease,transform .18s ease; } .herocard:hover{border-color:var(--navy);border-left-color:var(--crimson);transform:translateY(-1px)} .herocard-title{display:block;font-family:"Jost",sans-serif;font-size:1.06rem;color:var(--navy);margin-bottom:.2rem} .herocard-sub{display:block;font-size:.9rem;color:var(--grey);line-height:1.45} /* ---------- quieter way labels ---------- */ .waymeta{ font-family:"Jost",sans-serif;font-size:.85rem;letter-spacing:.05em; text-transform:none;color:var(--grey);margin:0; padding-top:.7rem;border-top:1px solid var(--border); } /* ---------- contact section ---------- */ .contact-grid{grid-template-columns:.9fr 1.1fr;gap:3.5rem} .contact-intro{background:#fff;border:1px solid var(--border);padding:2rem 1.9rem} .band--sand .contact-intro{background:#FBF8F3} .contact-intro h2{margin-bottom:.8rem} .contact-intro p{margin-bottom:0} .direct{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--border)} .direct .lbl{display:block;font-family:"Jost",sans-serif;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:.7rem} .direct a{display:block;margin-bottom:.35rem;font-size:1.05rem} .direct .aside{display:block;margin-top:.6rem;color:var(--grey);font-size:.9rem;line-height:1.5} .form{background:#fff;border:1px solid var(--border);padding:2rem 1.9rem;max-width:none} .band--sand .form{background:#FBF8F3} .form .field:first-child{margin-top:0} .form button{width:100%;margin-top:.4rem} /* ---------- terms / privacy with contents ---------- */ .prose-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:4rem;align-items:start} .toc{position:sticky;top:7rem} .toc h4{font-family:"Jost",sans-serif;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase; color:var(--grey);margin:0 0 .9rem;font-weight:400} .toc a{display:block;font-size:.95rem;color:var(--body);text-decoration:none; padding:.42rem 0 .42rem .9rem;border-left:2px solid var(--border);line-height:1.35} .toc a:hover{color:var(--navy);border-left-color:var(--crimson)} .prose{max-width:40rem} .prose h2{scroll-margin-top:7rem} @media(max-width:980px){ .prose-layout{grid-template-columns:1fr;gap:2rem} .toc{position:static;padding-bottom:1.4rem;border-bottom:1px solid var(--border); display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.5rem} .toc h4{grid-column:1/-1} } @media(max-width:600px){ .contact-grid{gap:1.4rem} .contact-intro,.form{padding:1.4rem 1.2rem} .toc{grid-template-columns:1fr} .herocard{max-width:none} } /* the contents list is a