/* Shared header + Designer mobile spec, round 2 (Oct 2026). Loaded after site.css / pages.css. */
:root{--mo-ink:#1C2A3A;--mo-ink-85:rgba(28,42,58,.85);--mo-sand:#D9B86A;--mo-sand-100:#F5ECD6;--mo-paper:#FAFAF7;--mo-navy:#1C2A3A;--mo-on-navy:#FAFAF7;--mo-on-navy-muted:#9AA9B8;--mo-hair:rgba(28,42,58,.15);--mo-syne:"Syne","Arial Black",sans-serif;--mo-text:"Manrope",sans-serif;--mo-pad:24px}

/* Sub-page header nav (desktop) */
.subtop{position:relative;z-index:20}
.subtop .wrap{gap:24px}
.subtop nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.subtop nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-weight:700}
.subtop nav a{color:var(--mo-ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;opacity:1}
.subtop nav a:hover{text-decoration:underline;text-underline-offset:5px}
/* Header "Contact us" link to the contact section: shown when nav is hidden */
.mcta{display:none}
.m-intro,.m-lede{display:none}
@media(max-width:900px){
 .top nav,.subtop nav,.top .hdr-cta,.subtop .hdr-cta{display:none!important}
 .mcta{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border:1.5px solid var(--mo-ink);color:var(--mo-ink);background:transparent;font:600 15px/1 var(--mo-text);text-decoration:none;white-space:nowrap;margin-left:auto}
 .subtop .mcta{border-radius:2px}
 .mcta:hover{background:var(--mo-ink);color:var(--mo-sand)}
}

@media(max-width:640px){
 /* HEADER */
 .top,.subtop{position:sticky;top:0;z-index:50;background:var(--mo-sand);border-bottom:1px solid transparent;transition:border-color .2s}
 .top.scrolled,.subtop.scrolled{border-bottom-color:var(--mo-hair)}
 .top .wrap,.subtop .wrap{height:64px;min-height:0;padding:0 var(--mo-pad);flex-wrap:nowrap;gap:12px}
 .top .brand,.subtop .brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 16px/1 var(--mo-text);color:var(--mo-ink);white-space:nowrap}
 .top .brand img,.subtop .brand img{width:32px;height:32px}

 /* BASE RHYTHM */
 body{font-size:17px;line-height:1.65}
 img,svg,video,iframe{max-width:100%}
 .wrap{padding-inline:var(--mo-pad)}
 main p,main li,main dd,main td,main th,main summary,main label{font-size:17px;line-height:1.65}
 main p{max-width:34ch}
 main p+p{margin-top:20px}
 main ul li+li,main ol li+li{margin-top:12px}
 main section{padding-block:88px}
 h1,h2,h3,h4{overflow-wrap:break-word;hyphens:none;text-wrap:balance;max-width:100%}
 main h2+p,main h2+.shead,main .shead h2+p,main h1+p,main h3+p{margin-top:24px!important}
 .shead{display:block!important;margin-bottom:40px!important}
 .shead p{margin-top:24px;color:inherit}
 h2.big,.contact .display,main h2{font:800 clamp(30px,8.5vw,36px)/1.05 var(--mo-syne)!important;letter-spacing:-.02em}
 main h3,.tier b{font:700 20px/1.3 var(--mo-text)!important;letter-spacing:0}
 .meta,.tag,.ff,.lang,.k,.note,.from,.more,small,.legal p,.pr small{font-size:14px!important;line-height:1.45;letter-spacing:.02em;text-transform:none!important}
 .muted{color:inherit}
 main a{overflow-wrap:anywhere}
 a[href^="mailto:"]{overflow-wrap:anywhere}

 /* LAYOUT: single column, no nested boxes */
 .grid,.cards,.cols,.posts,.tiers,.pair,.tool,.toolcards,.about,.row,.also,.pain,footer .wrap{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:24px}
 .grid>*,.cards>*,.cols>*,.about>*,footer .wrap>*,.row>*{grid-column:1/-1!important;justify-self:stretch}
 .card,.tcard{align-self:start!important;transform:none!important;margin:0}

 /* BUTTONS */
 main .btn{width:100%;min-height:56px;justify-content:center;text-align:center;display:inline-flex;align-items:center;font:600 16px/1.2 var(--mo-text)}
 .act,.backrow,.svc-foot,.opts{display:flex;flex-direction:column;align-items:stretch;gap:12px}

 /* HERO */
 .hero{padding-top:56px!important;padding-bottom:72px!important}
 .hero h1,.hero .display{font:800 clamp(36px,10vw,48px)/1 var(--mo-syne);letter-spacing:-.02em;text-transform:lowercase;margin:0}
 .hero .display span,.hero .display .r{display:block;text-align:left;margin:0;transform:none;white-space:normal}
 .hero .m-lede{display:block;margin-top:28px;font:500 19px/1.55 var(--mo-text);max-width:32ch;color:var(--mo-ink-85)}
 .hero .row{margin-top:0!important;border-top:0!important;padding-top:0!important;display:block!important}
 .hero .pains,.hero .offer,.hero .btn.line{display:none!important}
 .hero .act{margin-top:36px}
 .hero .act .btn{min-height:56px}

 /* WHAT WE FIX (moved from hero) */
 .m-intro{display:block;background:var(--mo-sand)}
 .m-intro .pains .lede{font-size:17px;line-height:1.65;max-width:34ch}
 .m-intro .pains .lede+.lede{margin-top:20px}
 .m-intro .offer{display:block;margin-top:40px;padding:24px;background:var(--mo-navy);color:var(--mo-on-navy)}
 .m-intro .offer h2{font:700 20px/1.3 var(--mo-text)!important;letter-spacing:0;color:var(--mo-sand)}
 .m-intro .offer ul{margin-top:16px}
 .m-intro .offer li{padding-block:16px;border-top:1px solid rgba(250,250,247,.15)}
 .m-intro .offer li+li{margin-top:0}
 .m-intro .offer li b{display:block;font-size:17px}
 .m-intro .offer li span{display:block;margin-top:4px;color:var(--mo-on-navy-muted);font-size:17px;line-height:1.55}
 .m-intro .offer .from{margin-top:16px;padding-top:16px;color:var(--mo-on-navy-muted)}

 /* SERVICES: packages as rows with hairlines, one bordered container (.also) */
 #services{background:var(--mo-paper)}
 .pain{padding-block:0!important;border-top:0!important;gap:24px;margin-top:40px}
 .pain .q .k{display:block;margin-bottom:12px}
 .tiers{gap:0!important}
 .tier{display:flex!important;flex-direction:column;gap:6px;padding:16px 0!important;border-top:1px solid var(--mo-hair)!important;border-bottom:0!important}
 .tier:last-child{border-bottom:1px solid var(--mo-hair)!important}
 .tier .pr,.pr{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font:800 28px/1.1 var(--mo-text);font-variant-numeric:tabular-nums lining-nums}
 .tier .pr small{white-space:nowrap;font-weight:600}
 .also{margin-top:40px;padding:24px!important;gap:0!important;background:transparent!important;border:1px solid var(--mo-hair)}
 .also h3{margin-bottom:8px}
 .also .svc{padding-top:24px}
 .also .svc+.svc{margin-top:8px;border-top:1px solid var(--mo-hair)}
 .also .svc p{max-width:none}
 .also,.also p,.also span,.also .line2,.also .num{font-size:16px!important;line-height:1.5}
 .svc .line2{display:flex!important;justify-content:space-between;align-items:baseline;gap:16px;padding-block:16px;border-top:1px solid var(--mo-hair)}
 .svc .line2 .num{flex:none;font-weight:800}
 .svc-foot{margin-top:40px}

 /* STYLES (navy) + HOW (navy): one colour band of two sections */
 .cards{gap:40px!important}
 .card .fr img,.card img{aspect-ratio:16/10;width:100%;height:auto;object-fit:cover}
 .card .meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}
 .card h3{margin-top:12px}
 .card p{margin-top:8px!important}
 .tcard{margin-top:16px;padding:24px!important}
 .pair{gap:0!important;margin-top:24px}
 .pair>*{padding:20px 0!important;background:transparent!important;border:0!important;border-top:1px solid currentColor!important}
 .tcard .note{margin-top:20px}
 .steps{background:var(--mo-navy)!important;color:var(--mo-on-navy)!important}
 .steps h2,.steps h3,.steps p,.steps .shead p{color:inherit!important}
 .steps ol li{border-color:rgba(250,250,247,.2)!important;padding-top:24px}
 .steps ol li+li{margin-top:24px}

 /* TERMS + ABOUT/FAQ (paper) */
 .terms{background:var(--mo-paper)!important}
 .cols{gap:40px!important}
 .cols .col{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
 .cols .col li{padding-block:12px;border-top:1px solid var(--mo-hair)}
 .cols .col li+li{margin-top:0}
 .about{gap:56px!important}
 .faq details{padding-block:4px}
 .faq details summary{min-height:44px;display:flex;align-items:center}
 .faq details p{margin-top:12px}

 /* BLOG + CONTACT (sand) */
 .blogs{background:var(--mo-sand)!important}
 .blogs .posts{border-top:1px solid var(--mo-ink)}
 .posts{gap:0!important}
 .posts li+li{margin-top:0;border-top:1px solid var(--mo-hair)}
 .posts a{padding:24px 0!important;color:var(--mo-ink)}
 .posts p{color:var(--mo-ink)!important;margin-top:12px!important}
 .posts .more{margin-top:16px;display:block}
 .contact .row{margin-top:40px!important}
 .contact .act{margin-top:24px}

 /* SUB-PAGES */
 .sample-h{margin-bottom:40px;padding-top:24px}
 .sample-h:has(time) h1{font:800 clamp(28px,7.5vw,32px)/1.15 var(--mo-text)!important;letter-spacing:-.01em;max-width:none}
 .sample-h:not(:has(time)) h1{font:800 clamp(30px,8.5vw,40px)/1.05 var(--mo-syne)!important;letter-spacing:-.02em;max-width:none}
 .sample-h .lede{margin-top:24px;font-size:19px;line-height:1.55}
 main .post h2{font:800 24px/1.2 var(--mo-text)!important;letter-spacing:-.01em;margin-top:48px}
 main .post h3{margin-top:32px}
 main .post h2+p,main .post h3+p{margin-top:24px!important}
 main .post p{max-width:34ch}
 main>.wrap+article,article.wrap{margin-top:0;padding-top:0}
 main .toolcards h2,main .toolcards h3{font:800 22px/1.2 var(--mo-text)!important;letter-spacing:0}
 .toolcards{gap:24px!important}
 .toolcards>*{padding:24px!important}
 .tool .note,.tool small,.opts small{font-size:16px!important;line-height:1.5}
 table{display:block;max-width:100%;overflow-x:auto}

 /* FOOTER: links stay visible, tap targets */
 footer{padding-block:56px}
 footer a{display:inline-block;padding-block:10px}
 footer .brand{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:640px){
 .hero .display span,.hero .display .r{white-space:nowrap}
 .pair{background:transparent!important}
 .pair div{padding:20px 0!important}
 .pair div+div{border-top:1px solid currentColor!important}
 .pair p b{font-size:18px;margin-bottom:8px}
 .blogs .posts p{font-size:17px!important;line-height:1.65}
 .m-intro{padding-top:0!important}
}
@media(max-width:640px){.pair .lang{color:var(--mo-ink)!important;font-weight:700}}
/* round 3 */
@media(max-width:640px){
 .hero h1,.hero .display{font-size:clamp(34px,9.4vw,46px)!important;letter-spacing:-.03em}
 .tier .pr small,.pr small{font-size:14px!important;color:rgba(28,42,58,.7)!important;font-weight:600}
 .also .svc .line2 span,.also .svc .line2 .num,.also .svc p{font-size:16px!important}
 .card .ff{font-size:14px!important}
 .m-intro{padding-bottom:88px!important}
 #services{padding-top:88px!important}
 .steps .shead p{max-width:30ch}
 .steps li::before{margin-bottom:24px!important}
}