/* Shared visual system for the PresenceOS marketing pages. */
:root{--paper:#f7f6f2;--ink:#202820;--muted:#5b645b;--line:#d9ddd5;--orange:#bd4025}
body{line-height:1.65}
.wrap{width:min(1240px,calc(100% - 80px))}
.siteheader{background:var(--paper);backdrop-filter:none}
.siteheader .nav{height:80px;min-height:80px;padding-block:0;gap:24px}
.brand{font-size:29px;letter-spacing:-1.5px}
.nav nav{gap:30px}.nav nav a{font-size:14px}
.button,.navcta{border-radius:6px;font-size:15px;min-height:48px;padding:14px 22px;justify-content:center;gap:12px;font-weight:500;line-height:1.4}
.button:hover{transform:none}.button span[aria-hidden],.navcta>span{display:none}
.eyebrow{font-size:13px;letter-spacing:.1em;line-height:1.5;color:var(--muted)}
h1,h2{letter-spacing:-.025em;line-height:1.08}h3{letter-spacing:-.02em}
.textlink{font-size:14px;min-height:40px}
.section,.calm-work{padding-block:80px}.belowhead{padding-bottom:80px}
.pagehead{padding-block:64px 48px}.pagehead .eyebrow{margin-bottom:20px}
.pagehead h1{font-size:clamp(44px,5.7vw,76px);line-height:1.08;max-width:960px}
.pagehead .intro{font-size:18px;max-width:660px;margin-top:24px;line-height:1.7}
/* Give the words and photography their own space. */
.brand-hero.calm-hero{min-height:620px;padding:76px 0;overflow:hidden;background:var(--paper);display:flex;justify-content:center}
.calm-hero:after{display:none}
.calm-hero .brand-backdrop{inset:32px 32px 32px auto;width:43%;height:calc(100% - 64px);object-fit:cover;object-position:70% center;border-radius:10px;z-index:-1}
.calm-hero .brand-hero-inner{margin-block:0;padding-block:0}
.calm-hero h1{font-size:clamp(48px,4.65vw,70px);line-height:1.06;letter-spacing:-.03em;max-width:54%;margin:22px 0 24px;text-wrap:balance}
.calm-hero h1 em{color:var(--orange)}
.calm-hero .hero-description{max-width:43%;font-size:17px;line-height:1.75;margin:0 0 26px}
.calm-hero .hero-actions{margin:0;max-width:52%}
.calm-hero .hero-actions .button{background:var(--orange);padding:16px 24px}
.calm-hero .hero-actions .button:hover{background:#9c301a}
.calm-hero .hero-reassurance{font-size:14px;margin-top:16px;max-width:45%;color:var(--muted);padding:0;background:none}
.work-heading{gap:48px;margin-bottom:32px;align-items:end}
.work-heading h2,.section h2,.darksection h2,.aboutpanel h2{font-size:clamp(38px,4.2vw,56px);line-height:1.1}
.work-heading h2{margin-top:16px}.work-heading>p{max-width:360px;font-size:16px;line-height:1.7}
.calm-work .work-grid{gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.calm-work .work-image{height:auto;aspect-ratio:5/4;border-radius:8px}
.calm-work .work-title{font-size:58px;top:28px;left:28px}
.calm-work .voltage-title{font-size:40px;letter-spacing:-1px}
.work-meta{font-size:14px;padding-top:16px}.work-open{font-size:14px;left:28px;right:28px}
.calm-work .work-note{font-size:13px;margin-top:22px}
.process-cards{gap:36px;margin-block:36px 24px}
.process-cards article{border-top:1px solid var(--line);padding-top:24px}
.process-cards article>span{font-size:14px;color:var(--orange)}
.process-cards h3{font-size:30px;margin:18px 0 12px;line-height:1.2}
.process-cards p{font-size:16px;line-height:1.75}
.calm-pricing{background:#ecefe8}
.price-summaries{gap:0;margin-top:32px;border-block:1px solid #c9d0c3}
.price-summary{border:0;padding:28px 32px}.price-summary:first-child{padding-left:0}
.price-summary+.price-summary{border-left:1px solid #c9d0c3}
.price-summary h3{font-size:20px;margin-bottom:16px}
.price-summary strong{font-size:52px}.price-summary span{font-size:14px}
.calm-pricing .terms{margin:24px 0 16px;font-size:14px}
.plangrid{gap:20px}.plan{padding:28px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:none}
.plan.featured{background:#eaf0e4;border-color:#aebca3;color:var(--ink)}
.planlabel{font-size:14px;margin-bottom:22px;gap:10px}.planlabel b{font-size:12px}
.plan h3{font-size:30px;min-height:72px;line-height:1.15}
.plan .price{margin-top:20px;gap:8px}.price strong{font-size:64px}.plan-note{font-size:14px}
.plan .button{width:100%;margin-top:22px}.plan li{font-size:15px;line-height:1.6}
.segments{border-radius:7px;padding:4px;background:#e9ece5}.segments button{border-radius:4px;font-size:14px;min-height:44px}
.terms,.price-toolbar>span{font-size:14px;line-height:1.7}
.sectionheading{max-width:none}.sectionheading.compact{gap:36px}
.servicegrid h3{font-size:30px;line-height:1.2}.servicegrid p{font-size:16px;line-height:1.75}
.featuregrid{gap:36px}.featuregrid article h2{font-size:32px}
.processfull .steps h3{font-size:36px}.processfull .steps article>span{font-size:36px;letter-spacing:-1px;color:var(--muted)}
.aboutpanel img{border-radius:8px}.aboutpanel p{line-height:1.75}
.closing.wrap{background:none;padding:72px 0;margin-block:0;min-height:0;border-radius:0;border-top:1px solid var(--line)}
.closing>div:last-child{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:60px;margin:0}
.closing h2{font-size:clamp(40px,4.5vw,60px);line-height:1.08;overflow-wrap:normal}
.closing aside{margin:0;max-width:380px;justify-self:end}.closing aside p{font-size:17px}
.closing .button{margin:20px 0 14px}.closing small{font-size:14px;color:var(--muted)}
footer{padding:0 0 24px;background:#eceee8}.footergrid{padding-block:48px;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.footergrid b{font-size:14px;margin-bottom:18px}.footergrid a:not(.brand){font-size:14px;margin-bottom:8px;line-height:1.6}
.footergrid p{font-size:14px;margin:18px 0}.footergrid>div:last-child{display:block}
.footbottom{margin-top:0;padding-top:22px;font-size:13px}
.contactgrid{gap:8%}.contactgrid form{border-radius:8px}.formnote{font-size:14px}
.brief-intro{padding-top:48px}.brief-intro h1{font-size:clamp(40px,4.6vw,60px);line-height:1.1}
body .brief-layout .brief-step{border-radius:8px;padding:32px}.brief-layout .stepheading h2{font-size:32px}
.brief-layout input,.brief-layout textarea,.brief-layout select{background:#fff;border-radius:5px}
.essentials-actions>p,.brief-layout .brief-footnote{font-size:14px}
@media(max-width:1000px){
 .wrap{width:calc(100% - 56px)}.nav nav{gap:18px}.navcta{padding-inline:16px}
 .brand-hero.calm-hero{min-height:580px;padding-block:60px}.calm-hero .brand-backdrop{right:20px;width:40%}
 .calm-hero h1{max-width:57%;font-size:clamp(48px,5.6vw,60px)}.calm-hero .hero-description{max-width:51%}
 .plan{padding:24px 20px}.plan h3{font-size:27px}.price strong{font-size:54px}
 .footergrid{grid-template-columns:repeat(2,minmax(0,1fr))}.footergrid>div:first-child{grid-column:auto}
}
@media(max-width:780px){
 .wrap{width:calc(100% - 40px)}.siteheader .nav{height:auto;min-height:72px;flex-wrap:nowrap;gap:18px;padding-block:12px}
 .brand{font-size:26px}.menutoggle{font-size:14px;min-height:44px}.navcta{font-size:14px}
 .brand-hero.calm-hero{min-height:0;padding:40px 0 0;display:flex;overflow:hidden}
 .calm-hero .brand-hero-inner{order:0;padding-bottom:32px}
 .calm-hero .brand-backdrop{position:relative;inset:auto;order:1;width:calc(100% - 40px);height:280px;align-self:center;object-position:65% 56%;border-radius:8px;z-index:auto}
 .calm-hero h1{font-size:clamp(42px,8vw,60px);max-width:620px;margin:18px 0 20px}
 .calm-hero .hero-description{max-width:560px;font-size:16px;line-height:1.75;margin-bottom:24px}
 .calm-hero .hero-actions,.calm-hero .hero-reassurance{max-width:100%}.calm-hero .hero-reassurance{font-size:13px;margin-top:14px}
 .section,.calm-work{padding-block:56px}.belowhead{padding-bottom:56px}.pagehead{padding-block:40px 32px}
 .pagehead h1{font-size:clamp(40px,8.5vw,60px)}.pagehead .intro{font-size:16px;margin-top:20px}
 .work-heading{display:block;margin-bottom:28px}.work-heading h2,.section h2,.darksection h2,.aboutpanel h2{font-size:clamp(36px,7.5vw,48px)}
 .work-heading>p{max-width:560px;margin-top:20px}.work-heading>.textlink{margin-top:18px}
 .calm-work .work-grid{grid-template-columns:1fr;gap:30px}.calm-work .work-image{height:auto;aspect-ratio:5/4}
 .calm-work .work-title{font-size:52px;top:24px;left:24px}.calm-work .voltage-title{font-size:36px}
 .process-cards{grid-template-columns:1fr;gap:26px;margin-block:30px 22px}.process-cards h3{font-size:28px}
 .price-summaries{grid-template-columns:1fr}.price-summary,.price-summary:first-child{padding:24px 0;gap:8px;display:grid;grid-template-columns:1fr auto}
 .price-summary+.price-summary{border-left:0;border-top:1px solid #c9d0c3}.price-summary h3,.price-summary p{margin:0}.price-summary strong{font-size:42px}
 .price-summary>span{grid-column:1/-1}.plan{padding:28px}.plan h3{min-height:0;font-size:30px}
 .price strong{font-size:60px}.plan ul{grid-template-columns:1fr}.featuregrid{gap:24px}
 .processfull .steps h3{font-size:28px}.processfull .steps article>span{font-size:28px}
 .closing.wrap{padding-block:48px}.closing>div:last-child{grid-template-columns:1fr;gap:24px}.closing h2{font-size:clamp(38px,8vw,52px)}.closing aside{justify-self:start;margin:0}
 .footergrid{padding-block:40px;gap:30px}.footergrid>div:first-child{grid-column:1/-1}.footbottom{font-size:13px}
 body .brief-layout .brief-step{padding:24px}.brief-intro{padding-top:36px}.brief-intro h1{font-size:42px}
}
@media(max-width:420px){
 .calm-hero h1{font-size:42px}.calm-hero .brand-backdrop{height:235px}.hero-actions .button{width:100%}
 .calm-hero .hero-actions{display:block}.calm-hero .hero-reassurance{max-width:290px}
 .footergrid{column-gap:22px}.footergrid a:not(.brand){font-size:14px}
 .plan{padding:24px}.brief-intro h1{font-size:38px}body .brief-layout .brief-step{padding:20px}
}
/* Gallery uses the same scale and image proportions as the homepage. */
body .examples-intro{padding-block:64px 36px}
body .examples-intro h1{font-size:clamp(44px,5.7vw,76px);line-height:1.08;margin:20px 0 28px}
body .examples-intro>div{gap:8%;max-width:1080px}
body .examples-intro p{font-size:17px}
body .examples-intro .example-disclosure{font-size:14px}
body .example-filters{padding:16px 0 24px;gap:8px;border-top:0}
body .example-filters button{border-radius:5px;padding:10px 16px;border-color:var(--line);font-size:14px}
body .example-grid{gap:40px 28px}
body .example-visual{height:auto;aspect-ratio:5/4;border-radius:8px}
body .example-caption h3{font-size:22px}
body .example-caption>span{font-size:13px;letter-spacing:.04em}
body .example-bottom{padding-block:64px}
body .example-bottom h2{font-size:clamp(38px,4.2vw,56px);line-height:1.1}
@media(max-width:780px){body .examples-intro{padding-block:40px 28px}body .examples-intro h1{font-size:clamp(40px,8vw,58px)}body .example-grid{grid-template-columns:1fr}body .example-caption{flex-wrap:wrap}body .example-caption>span{padding-top:0}body .example-bottom{padding-block:48px}}