/* ============================================================ PostScript — design system ("clinical authority") Palette, type, and structure per the brand & design brief. Fonts are self-hosted from app/assets/fonts (Propshaft rewrites the url()s to digested paths). ============================================================ */ /* ---------- Fonts ---------- */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/inter-latin-400-normal-7c9140a2.woff2") format("woff2")} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/inter-latin-500-normal-79af5d1f.woff2") format("woff2")} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/inter-latin-600-normal-943cdcc5.woff2") format("woff2")} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/inter-latin-700-normal-48e5a320.woff2") format("woff2")} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/ibm-plex-mono-latin-400-normal-a258e185.woff2") format("woff2")} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/ibm-plex-mono-latin-500-normal-62c969c7.woff2") format("woff2")} /* ---------- Tokens ---------- */ :root{ --bg:#F7F8F7; --panel:#FFFFFF; --line:#DCE3E2; --ink:#0D2321; --dim:#4E6360; --teal:#0B4F53; --teal-mid:#116E73; --teal-soft:#E3EEEE; --amber:#C98B2D; /* graphic marks only — the outcome color */ --amber-ink:#9A6412; /* amber for small text on light (AA) */ --amber-btn:#A06B14; /* amber for interactive fills w/ white text (AA) */ --error:#B3401F; /* Affirmative green. Reserved for two things only: the primary submit action, and the confirmation that follows it. Amber marks a measured outcome (the chart endpoint); green means "this worked." Keeping them apart is what stops either from becoming decoration. */ --go:#1B6B4A; /* fills with white text — 6.5:1 */ --go-dk:#155539; /* hover */ --go-soft:#EAF4EE; /* confirmation panel fill */ --go-line:#C2DFCE; /* confirmation panel border */ --go-ink:#14563B; /* confirmation heading — 7.7:1 on --go-soft */ } /* ---------- Base ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;font-size:16.5px} h1,h2,h3{font-family:'Inter',sans-serif;line-height:1.08;letter-spacing:-.028em;font-weight:600} img{max-width:100%} section{scroll-margin-top:92px} .mono{font-family:'IBM Plex Mono',monospace} .wrap{max-width:1150px;margin:0 auto;padding:0 32px} a,button,input,textarea,[tabindex]{outline-offset:2px} :focus-visible{outline:3px solid var(--amber-btn)} .btn{display:inline-block;background:var(--teal);color:#fff;padding:14px 28px;border-radius:8px;text-decoration:none; font-weight:600;font-size:15.5px;font-family:'Inter',sans-serif;border:0;cursor:pointer;transition:background .15s} .btn:hover{background:var(--teal-mid)} .btn.amber{background:var(--amber-btn)} .btn.amber:hover{background:#8A5B0F} .btn.go{background:var(--go)} .btn.go:hover{background:var(--go-dk)} .btn.line{background:transparent;color:var(--teal);border:1.5px solid var(--teal)} .btn.line:hover{background:var(--teal-soft)} .btn.wide{width:100%;text-align:center} .kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-mid);font-weight:500} .kicker-light{color:#8FD4D2} /* ---------- Top utility bar + nav ---------- */ .util{background:var(--teal);color:#CFE3E2;font-size:13px;padding:9px 0} .util .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .util b{color:#fff} .util a{color:#fff;text-decoration:none} .util a:hover{text-decoration:underline} nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;position:relative} .logo{font-family:'Inter',sans-serif;font-size:24px;font-weight:700;color:var(--ink);text-decoration:none} .logo span{color:var(--teal-mid)} .logo small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--dim);font-weight:400;text-transform:uppercase} .links{display:flex;gap:30px;align-items:center} .links a{color:var(--dim);text-decoration:none;font-weight:600;font-size:15px} .links a:hover{color:var(--teal)} /* Current page (server-set) or current section (scrollspy). Colour + a short offset underline — deliberately NOT bold: a weight change reflows the row as the active item moves. Same colour as hover, so the underline is what says "you are here". */ .links a.active{color:var(--teal);text-decoration:underline; text-decoration-color:var(--teal-mid);text-decoration-thickness:2px; text-underline-offset:7px} .links .btn{padding:11px 20px;font-size:14px;color:#fff} .links .btn:hover{color:#fff} /* Compact booking CTA that lives in the nav BAR on mobile, not inside the hamburger menu. On a 5,800px page, burying the only booking control behind a tap is the single most expensive thing the layout can do. */ .navcta{display:none} .navtoggle{display:none;background:none;border:0;cursor:pointer;padding:10px;border-radius:8px} .navtoggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s} .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{background:#fff;border-bottom:1px solid var(--line);padding:84px 0} .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center} /* 56px -> 44px, 21 Aug 2026. Sarah's headline is two full sentences where the old one was a single clause; at 56px each sentence wrapped and the call-and-response ("Insight is the beginning. / Change is the goal.") turned into four ragged lines. 44px puts one sentence on one line at the hero's column width, which is the whole point of the line. */ .hero h1{font-size:44px;margin:22px 0 22px} /* The emphasis takes its own line. Sarah's headline is two sentences and they are a call-and-response — letting "Change is the goal." wrap mid-phrase splits the amber underline into two ragged segments and loses the beat. width:fit-content keeps the underline hugging the words rather than running the width of the block. */ .hero h1 em{font-style:normal;color:var(--teal-mid);border-bottom:4px solid var(--amber); display:block;width:fit-content} .hero p.lead{font-size:18.5px;color:var(--dim);max-width:32em;margin-bottom:34px} .cta-row{display:flex;gap:14px;flex-wrap:wrap} .hero .fine{margin-top:20px;font-size:13.5px;color:var(--dim)} .hero .fine b{color:var(--ink)} .hport{position:relative;justify-self:end;width:100%;max-width:430px} .hport .frame{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--teal-soft); box-shadow:0 30px 64px rgba(13,35,33,.16)} .hport img{width:100%;height:100%;object-fit:cover;display:block} /* Hero measurement panel — the visual argument for "measured from day one". */ .hchart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 30px; box-shadow:0 30px 64px rgba(13,35,33,.14)} .hchart .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--teal-mid);display:block;margin-bottom:16px} .hchart svg{width:100%;height:auto;display:block} .hchart .hcap{font-size:12.5px;line-height:1.6;color:var(--dim);margin-top:14px; padding-top:14px;border-top:1px solid var(--line)} .hport .cred{position:absolute;bottom:22px;left:-30px;background:var(--teal);color:#fff;border-radius:12px; padding:16px 20px;box-shadow:0 16px 40px rgba(13,35,33,.22);font-size:13px;line-height:1.5;max-width:270px} /* When the hero carries the chart rather than a portrait, the credential card sits under it as a band instead of floating over an image. */ .hport .hchart + .cred{position:static;max-width:none;margin-top:16px; box-shadow:0 18px 44px rgba(13,35,33,.16)} .hport .cred strong{display:block;font-family:'Inter',sans-serif;font-size:15.5px;margin-bottom:2px} .hport .cred span{color:#BEDCDB} /* ---------- Modality strip — clinical authority signature ---------- */ .modnav{background:var(--teal);color:#fff;padding:0 0 18px} .modnav .wrap:first-child{display:grid;grid-template-columns:repeat(5,1fr);padding-top:0} .modnav [role="listitem"]{padding:24px 18px 18px;border-left:1px solid rgba(255,255,255,.14)} .modnav [role="listitem"]:first-child{border-left:none} /* One tile links out. The whole tile is the target, not just the headline. */ .modnav [role="listitem"] a{display:block;color:inherit;text-decoration:none} .modnav [role="listitem"] a:hover b{color:#8FD4D2} .modnav [role="listitem"] a:hover span{color:#CFE3E2} /* Tighter leading than the body default — these are labels, and several run to two or three lines now that the tiles carry real service names. */ .modnav b{display:block;font-family:'Inter',sans-serif;font-size:15.5px; line-height:1.25;margin-bottom:6px} .modnav [role="listitem"] span{display:block;font-size:12.5px;line-height:1.5;color:#B5D6D5} .modnav-foot{text-align:right} .modnav-foot a{color:#8FD4D2;font-size:13px;text-decoration:none;font-family:'IBM Plex Mono',monospace} .modnav-foot a:hover{color:#fff} /* ---------- Fit / not fit ---------- */ .fit{padding:110px 0} .fit .head{text-align:center;margin-bottom:56px} .fit h2{font-size:42px;margin-top:18px} .fit .head p{color:var(--dim);max-width:42em;margin:14px auto 0} .fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .fcol{border-radius:16px;padding:42px 40px} .fcol.yes{background:var(--teal);color:#fff} .fcol.no{background:#fff;border:1px solid var(--line)} .fcol h3{font-size:22px;margin-bottom:24px} .fcol.yes h3{color:#fff} .fcol ul{list-style:none;display:grid;gap:16px} .fcol li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:15.5px;align-items:start} .fcol.yes li{color:#D7E8E7} .fcol.no li{color:var(--dim)} .mk{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;margin-top:1px} .yes .mk{background:rgba(255,255,255,.18);color:#fff} /* Neutral, not amber. Amber is the outcome colour — it belongs on the success flash, not on the column that refers people away. */ .no .mk{background:var(--teal-soft);color:var(--teal)} .fcol .note{margin-top:26px;font-size:13.5px;padding-top:20px} .fcol.yes .note{border-top:1px solid rgba(255,255,255,.2);color:#B5D6D5} .fcol.no .note{border-top:1px solid var(--line);color:var(--dim)} /* ---------- Method — numbered spine ---------- */ .method{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:110px 0} .method .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start} .method h2{font-size:42px;margin:18px 0 18px} .method .left p{color:var(--dim);margin-bottom:14px} .method .left .btn{margin-top:20px} .spine{border-left:2px solid var(--teal-soft);display:grid;gap:38px;padding-left:38px;position:relative} .snode{position:relative} .snode::before{content:"";position:absolute;left:-49px;top:4px;width:20px;height:20px;border-radius:50%; background:#fff;border:5px solid var(--teal-mid)} .snode .sn{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;color:var(--amber-ink);text-transform:uppercase} .snode h3{font-size:21px;margin:8px 0 8px} .snode p{font-size:15px;color:var(--dim)} /* ---------- Evidence / measure ---------- */ .measure{padding:110px 0} .measure .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .measure h2{font-size:40px;margin:18px 0 18px} .measure p{color:var(--dim);margin-bottom:14px} .mpanel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:0 16px 44px rgba(13,35,33,.07)} .mpanel .tag{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-mid);display:block;margin-bottom:22px} .mpanel svg{width:100%;height:auto} .mpanel .cap{color:var(--dim);font-size:13px;margin-top:16px} .chart-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:#7A918E} /* ---------- Research teaser ---------- */ .research{background:#fff;border-top:1px solid var(--line);padding:100px 0} .research .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:20px;flex-wrap:wrap} .research h2{font-size:38px;margin-top:18px} .research .rsub{color:var(--dim);font-size:15.5px;margin-top:12px;max-width:38em} .soon-note{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim); border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--bg)} .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .rcard{border:1px solid var(--line);border-radius:14px;padding:30px 28px;background:var(--bg);color:var(--ink)} .rcard .rt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink)} .rcard h3{font-size:18.5px;margin:12px 0 10px;line-height:1.35} .rcard p{font-size:14px;color:var(--dim)} /* Explainers open in place (24 Aug 2026). align-items:start keeps an open card from stretching its neighbours; the toggle is a quiet text control with a +/– glyph, like the footer disclosures, not a button. */ .rgrid{align-items:start} .rcard .rx{margin-top:16px;border-top:1px solid var(--line);padding-top:12px} .rcard .rx summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px; font-size:13.5px;font-weight:600;color:var(--teal)} .rcard .rx summary::-webkit-details-marker{display:none} .rcard .rx summary::before{content:"+";font-family:'IBM Plex Mono',monospace;font-size:15px; width:20px;height:20px;border:1px solid var(--line);border-radius:6px;display:inline-flex; align-items:center;justify-content:center;color:var(--teal-mid);background:#fff;flex:none} .rcard .rx[open] summary::before{content:"–"} .rcard .rx[open] summary{color:var(--teal-mid)} .rxbody{margin-top:14px;font-size:14px;line-height:1.6;color:var(--ink)} .rxbody p{font-size:14px;color:var(--ink);margin:0 0 10px} .rxbody ul{margin:0 0 12px;padding-left:18px} .rxbody li{margin-bottom:7px} .rxbody li:last-child{margin-bottom:0} .rxbody .rxlead{font-weight:600;color:var(--teal);margin:14px 0 6px} .rxbody .rxgoal{border-left:2px solid var(--amber);padding-left:12px;color:var(--dim);margin-top:14px} .rxbody .rxgoal b{color:var(--amber-ink)} .rxbody .rxlink{margin:4px 0 0} .rxbody .rxlink .arrowlink{margin-top:8px;font-size:14px} /* Selected reading. Deliberately quiet — a reference list, not a third argument. It sits under the card grid and reads as apparatus. */ .rrefs{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)} .rrefs h3{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);font-weight:500;margin-bottom:14px} .rrefs ul{list-style:none;padding:0;margin:0} .rrefs li{font-size:14.5px;color:var(--dim);line-height:1.6;padding-left:18px;position:relative;margin-bottom:10px} .rrefs li::before{content:"—";position:absolute;left:0;color:var(--line)} .rrefs li a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px} .rrefs li a:hover{color:var(--teal-mid)} .rrefs .fine{margin-top:14px;font-size:12.5px;color:var(--dim)} /* ---------- About ---------- */ .about{padding:110px 0;border-top:1px solid var(--line)} .about .wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:center} .about .photo{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--teal-soft);border:1px solid var(--line)} .about img{width:100%;height:100%;object-fit:cover;display:block} .about h2{font-size:38px;margin:18px 0 18px} .about p{color:var(--dim);margin-bottom:14px} .credgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px} .cred2{border:1px solid var(--line);background:#fff;border-radius:10px;padding:14px 18px;font-size:14px;font-weight:600} .cred2 small{display:block;font-weight:500;color:var(--dim);font-size:12.5px;margin-top:2px} /* Lifeline info adjacent to the page's only mention of suicide care. */ /* The label above the specialized-training tiles. Mono + uppercase so it reads as a column header for the grid beneath it, not as a new heading competing with .psub above. */ .credlabel{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500} .credlabel + .credgrid{margin-top:10px} .credcrisis{margin-top:16px;font-size:13px;color:var(--dim)} .credcrisis a{color:var(--ink);font-weight:600} /* Home-page preview of the credentials; the full grid lives on /about. */ .credline{margin-top:22px;padding-top:20px;border-top:1px solid var(--line); font-size:14px;color:var(--dim);line-height:1.7} .arrowlink{display:inline-block;margin-top:18px;font-family:'Inter',sans-serif; font-weight:600;font-size:15.5px;color:var(--teal);text-decoration:none; border-bottom:2px solid var(--teal-soft);padding-bottom:2px} .arrowlink::after{content:" →"} .arrowlink:hover{border-bottom-color:var(--teal)} /* ---------- Interior pages (/about) ---------- */ .pagehead{background:#fff;border-bottom:1px solid var(--line);padding:76px 0 66px} .pagehead h1{font-size:46px;margin:18px 0 18px} .pagehead .lead{font-size:18px;color:var(--dim);max-width:52em} .pagebody{padding:80px 0} .pgrid{display:grid;grid-template-columns:.62fr 1.38fr;gap:70px;align-items:start} .pphoto{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--teal-soft); border:1px solid var(--line);position:sticky;top:108px} .pphoto img{width:100%;height:100%;object-fit:cover;display:block} .pbody h2{font-size:32px;margin-bottom:20px} .pbody p{color:var(--dim);margin-bottom:16px} .pbody .psub{font-size:13px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase; letter-spacing:.16em;color:var(--teal-mid);font-weight:500;margin:44px 0 18px} .pbody .pnote{font-size:13.5px;padding-left:16px;border-left:2px solid var(--line)} .pbody p a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px} .pbody p a:hover{color:var(--teal-mid)} /* ---------- The team (/about#team) ---------- */ /* A second person on the page, laid out as the mirror of .pgrid — portrait on the left, prose on the right — but on the panel background and with a rule above it, so it reads as a distinct part of the practice rather than as more of Sarah's bio. The photo is NOT sticky here: it belongs to one block, not to a page-length column. */ .team{background:#fff;border-top:1px solid var(--line);padding:80px 0} .thead{max-width:640px;margin-bottom:44px} .thead h2{font-size:32px;margin:16px 0 14px} .thead p{color:var(--dim);font-size:16px} .tgrid{display:grid;grid-template-columns:.62fr 1.38fr;gap:70px;align-items:start} .tphoto{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--teal-soft); border:1px solid var(--line)} .tphoto img{width:100%;height:100%;object-fit:cover;display:block} .tbody h3{font-size:24px;margin-bottom:4px} .tbody .trole{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em; text-transform:uppercase;color:var(--teal-mid);font-weight:500;margin-bottom:20px} .tbody p{color:var(--dim);margin-bottom:16px} /* One-column prose body, for interior pages that carry no portrait. It is constrained INSIDE .wrap rather than by narrowing .wrap, so its left edge lines up with the h1 in the .pagehead above it. */ .pnarrow{max-width:940px} /* Package cards on /psilocybin-intensives — full wrap width, three across, modeled on .rcard. The price is display, not a headline: whole-arc package figures only (see docs/COMPLIANCE.md pricing overrule). */ .pkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0 8px} /* Dark teal gradient cards (Nate, 18 Aug 2026) — same palette family as the modality strip, so they read as one system while standing off the page. */ .pkcard{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:28px 26px; background:linear-gradient(165deg,#12666C,#0A3F45);color:#fff; display:flex;flex-direction:column} .pkcard .pkt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:#8FD4D2} .pkcard h3{font-size:21px;margin:10px 0 2px;color:#fff} .pkcard .pkprice{font-family:'IBM Plex Mono',monospace;font-size:22px;color:#E7C079; margin:2px 0 10px} .pkcard p{font-size:14px;color:#CFE3E2} /* Session lists: no browser bullets or indent — a positioned dot with a true hanging indent, so wrapped lines align cleanly under the first word. */ .pkcard ul{list-style:none;margin:12px 0 18px;padding:0} .pkcard li{position:relative;padding:7px 0 7px 20px; font-size:13.5px;line-height:1.6;color:#B5D6D5} .pkcard li::before{content:"";position:absolute;left:4px;top:15px; width:5px;height:5px;border-radius:50%;background:#8FD4D2;opacity:.7} /* Best-for: pinned to the card foot so the three line up across the row. .pagebody .fine turns this into a boxed callout by default — reset it to a quiet rule-topped note. Specificity (3 classes) beats .pagebody .fine regardless of source order. */ .pagebody .pkcard .fine{margin:auto 0 0;padding:14px 0 0;font-size:12.5px; line-height:1.65;color:#B5D6D5;background:none;border:0; border-top:1px solid rgba(255,255,255,.16);border-radius:0} .pnarrow h2{margin-top:52px} .pnarrow .spine{margin:30px 0 6px} .pnarrow .snode p{margin-bottom:0} /* Regulatory fine print. Quiet, but set apart from the prose so it reads as a statement of scope rather than as more marketing copy. */ .pagebody .fine{margin-top:34px;padding:16px 20px;font-size:13px;line-height:1.75; color:var(--dim);background:#fff;border:1px solid var(--line); border-left:3px solid var(--teal-soft);border-radius:0 10px 10px 0} .pagecta{background:var(--teal);color:#fff;padding:56px 0} .pagecta .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap} .pagecta h2{font-size:28px;color:#fff;margin-bottom:8px} .pagecta p{color:#B5D6D5;font-size:15.5px;max-width:40em} /* ---------- CTA + contact form ---------- */ /* margin-top:0 — the About section's 110px bottom padding already supplies the section rhythm; the old margin stacked on top of it and opened a ~220px dead zone right before the page's only conversion point. */ .cta{padding:0 0 120px;margin-top:0} .cta .inner{background:var(--teal);border-radius:22px;padding:70px 60px;color:#fff;position:relative;overflow:hidden; display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center} .cta .inner::before{content:"";position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;border:2px solid rgba(255,255,255,.12);pointer-events:none} .cta .inner > *{min-width:0} /* keep intrinsic widths (textarea cols) from inflating grid tracks */ .cta h2{font-size:38px;margin:14px 0 16px;color:#fff} .cta .cta-copy p{color:#B5D6D5;max-width:36em} .cta .cta-alt{margin-top:18px;font-size:14.5px} .cta .cta-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px} .formcard{background:#fff;border-radius:16px;padding:34px 32px;color:var(--ink);box-shadow:0 24px 60px rgba(13,35,33,.28);position:relative} .formcard h3{font-size:21px;margin-bottom:20px} .formhint{text-align:center;font-size:12.5px;color:var(--dim);margin-top:12px} /* The home page's CTA card. It used to hold the form behind a
toggle; the form is on /contact now, so what is left is the single control that takes you there. One filled button, one reassurance, one alternative for people who would rather write an email. */ .ctacard{text-align:center} .ctacard .cardalt{margin-top:16px;padding-top:16px;border-top:1px solid var(--line); font-size:13.5px;color:var(--dim)} .ctacard .cardalt a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px} .field{margin-bottom:16px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink)} .field input,.field textarea{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:#fff; border:1.5px solid var(--line);border-radius:8px;padding:11px 13px;transition:border-color .15s,box-shadow .15s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--teal-mid);box-shadow:0 0 0 3px var(--teal-soft)} .field textarea{resize:vertical;min-height:80px} .hint{font-size:12.5px;color:var(--dim);margin-top:6px} .hint.center{text-align:center;margin-top:12px} .formcard .btn{margin-top:6px} .form-errors{background:#FBF1ED;border:1px solid #E5C4B8;border-radius:10px;padding:14px 18px;margin-bottom:18px;font-size:14px;color:var(--error)} .form-errors p{font-weight:600;margin-bottom:6px} .form-errors ul{margin-left:18px} /* Confirmation. Green, not amber: amber is the measured-outcome mark (the chart endpoint, the strike-under on "fine.") and reads as caution when it carries a whole panel. This is the one moment on the page that is simply good news, so it gets the affirmative color and a check. */ .flash-success{background:var(--go-soft);border:1px solid var(--go-line);border-radius:12px; padding:26px 24px;color:var(--ink)} .flash-success strong{display:flex;align-items:center;gap:9px;font-family:'Inter',sans-serif; font-size:19px;margin-bottom:8px;color:var(--go-ink)} .flash-success strong::before{content:"";flex:0 0 22px;width:22px;height:22px;border-radius:50%; background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px 13px no-repeat} .flash-success p{color:var(--dim);font-size:15px} /* Honeypot — visually removed, still in the DOM for bots. */ .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* Crisis notice on the form. Deliberately quiet in weight but never hidden. It sits BELOW the submit button, closing the card. It used to sit directly above Send, which put a red-flagged warning block between the fields and the action and read as an obstacle. It is still inside the form, still above the fold whenever the form is open, and its wording is unchanged — see docs/COMPLIANCE.md before touching either. */ .crisis{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--error); border-radius:8px;background:var(--bg);font-size:12.5px;line-height:1.6;color:var(--dim)} .crisis strong{color:var(--ink);display:block;margin-bottom:2px} .crisis a{color:var(--ink);font-weight:600} /* ---------- /contact — the request page ---------- The focused layout's chrome: a wordmark, and a crisis line above the copyright bar. No nav in either place, on purpose — see app/views/layouts/focused.html.erb. .focfoot is a