/* Shared device adaptations, loaded after each page's presentation styles. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
main,section,form,.layout>*,.two>*,.pricing-plan,.blog-card{min-width:0}
@media(max-width:480px){.floating header{padding-inline-start:max(16px,env(safe-area-inset-left));padding-inline-end:max(16px,env(safe-area-inset-right))}}
.floating .links.open{max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain}
.topic-menu{max-height:min(300px,45dvh);overflow-y:auto;overscroll-behavior:contain}
.topic-menu button{min-height:44px}
@media(max-width:940px){
  .contact-page .layout{grid-template-columns:1fr;gap:30px;max-width:620px;margin-inline:auto}
  .contact-page main{padding-top:130px}
  .contact-page .layout>div{min-width:0}
}
@media(max-width:760px){
  [data-hero="centre"] .zoom-track .visual{padding-top:185px}
  [data-hero="centre"] .connector-group{top:30px}
  [data-hero="centre"] .connector-group h2{font-size:clamp(17px,4.8vw,21px)}
  .contact-page input,.contact-page textarea,.contact-page .topic-trigger{font-size:16px}
}
@media(max-width:680px){
  [data-footer="directory"] .footer-directory{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-footer="directory"] .directory-download{justify-self:center;align-items:center}
  [data-footer="directory"] .footer-directory a,[data-footer="directory"] .footer-directory button:not(.directory-download button){min-height:44px;display:flex;align-items:center}
  .pricing-pair .pricing-plan{padding:26px 22px}
  .pricing-pair .pricing-plan>p{overflow-wrap:break-word}
  .story-note{transform:none}
}
@media(max-width:420px){
  /* Keep every navigation action reachable without squeezing their labels. */
  .floating .wordmark{display:none}
  .floating header,.floating.scrolled header{grid-template-columns:auto 1fr;gap:12px}
  .floating .actions{gap:6px}
  .floating .menu{min-width:38px;min-height:44px}
  .floating .actions .secondary,.floating .actions .cta{min-height:44px;font-size:14px;padding-inline:10px}
  .connector-logos{gap:14px}
  .connector{max-width:80px;line-height:1.4}
  [data-hero="centre"] .connector-group h2{letter-spacing:-.4px}
  .story-note{padding:30px 22px}
  .story-note h2{font-size:32px}
  .pricing-price{font-size:46px}
}
@media(hover:none){
  .send:hover{color:white;box-shadow:none}
  .send:hover:before{transform:translateY(60%) rotate(-9deg)}
}

/* Keep the full app introduction readable without a narrow desktop column. */
.app-about{max-width:1000px;padding-inline:16px}
.app-about p{max-width:940px;text-wrap:balance}
.mobile-navigation{position:fixed;inset:0;z-index:1000;background:linear-gradient(135deg,#fff,#faf8fb);padding:24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateY(-14px);transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s .5s;overflow-y:auto;overscroll-behavior:contain}
.mobile-navigation.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mobile-navigation-top{display:flex;align-items:center;justify-content:space-between}
.mobile-navigation .brand{font:30px ui-serif,Georgia,serif;letter-spacing:-1px}
.mobile-navigation .brand img{width:32px;height:34px}
.mobile-navigation nav{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,3vh,24px);padding:clamp(30px,7vh,70px) 8px}
.mobile-navigation nav a{font:400 clamp(27px,7vw,40px)/1.15 ui-serif,Georgia,serif;letter-spacing:-.7px;min-height:44px;opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.mobile-navigation.is-open nav a{opacity:1;transform:none;transition-delay:calc(60ms + var(--i)*35ms)}
.mobile-navigation nav a:hover{text-decoration:underline;text-underline-offset:7px}
.mobile-menu-button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:48px;height:48px;border:1px solid #ffffff22;border-radius:13px;background:linear-gradient(135deg,#383838,#191919);color:white;box-shadow:inset 0 1px 0 #ffffff25,0 4px 10px #0000000c;cursor:pointer}
.mobile-menu-button span{display:block;width:20px;height:1.5px;background:currentColor;border-radius:2px}
.mobile-menu-close{font:30px/1 Arial,sans-serif}
html.mobile-menu-open,html.mobile-menu-open body{overflow:hidden}
@media(max-width:940px){
 .floating header,.floating.scrolled header{display:flex;justify-content:space-between;align-items:center}
 .floating header .actions>:not(.menu){display:none!important}
 .floating header .links{display:none!important}
 .floating header .wordmark{display:block}
 .floating header .menu{display:flex;width:48px;height:48px;min-width:48px;background:linear-gradient(135deg,#383838,#191919);color:#fff;border-color:#ffffff22;border-radius:13px}
 [data-footer="directory"] .directory-download{display:none!important}
 [data-footer="directory"] .footer-directory{grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-footer="directory"] .footer-bottom{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:6px;font-size:clamp(10px,2.7vw,13px);white-space:nowrap}
 [data-footer="directory"] .footer-bottom>*{width:auto;min-width:0;grid-area:auto;font-size:inherit}
 .agency-credit{letter-spacing:-.15px}
}
@media(prefers-reduced-motion:reduce){.mobile-navigation,.mobile-navigation nav a{transition:none;transform:none}}
@media(min-width:941px){.floating header .menu{display:none}}

/* Explicit ordering keeps all three footer credits on the same compact row. */
@media(max-width:940px){
 [data-footer="directory"] .footer-bottom>*{order:0;flex:0 1 auto}
 .mobile-navigation .wordmark{display:block}
}

/* Keep the original masthead mounted above the panel: no duplicate logo or close control. */
@media(max-width:940px){
 .floating header{z-index:1001}
 .mobile-navigation{padding-top:110px}
 .mobile-navigation nav{padding-top:24px}
 .mobile-menu-button span{transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 180ms ease;transform-origin:center}
 .mobile-menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
 .mobile-menu-button[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
 .mobile-menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media(prefers-reduced-motion:reduce){.mobile-menu-button span{transition:none}}

/* A shorter rise and gentle fade keep the handset entrance calm on small screens. */
@media(max-width:940px) and (prefers-reduced-motion:no-preference){
 [data-hero="centre"] .visual.device-pending .phone-continue{translate:0 28px;scale:.985}
 [data-hero="centre"] .visual .phone-continue{transition:opacity 1.2s cubic-bezier(.2,.65,.3,1),translate 1.5s cubic-bezier(.16,1,.3,1),scale 1.5s cubic-bezier(.16,1,.3,1)}
 [data-hero="centre"] .visual.device-pending:before,[data-hero="centre"] .visual.device-pending:after{scale:.94;translate:0 18px}
 [data-hero="centre"] .visual:before,[data-hero="centre"] .visual:after{translate:0 0;transition:opacity 1.5s ease,scale 1.7s cubic-bezier(.16,1,.3,1),translate 1.7s cubic-bezier(.16,1,.3,1);transition-delay:80ms}
 [data-hero="centre"] .visual:after{transition-delay:160ms}
}

/* Wide screens share generous outer gutters; prose keeps a readable measure. */
@media(min-width:941px){
 .floating{--desktop-gutter:clamp(24px,2.5vw,80px)}
 .floating header{padding-inline:var(--desktop-gutter)}
 .floating.scrolled header{width:calc(100% - var(--desktop-gutter)*2);padding-inline:28px}
 .floating .site-footer[data-footer="directory"]{width:auto;max-width:none;margin-inline:var(--desktop-gutter);padding-inline:clamp(32px,4vw,120px)}
}
@media(min-width:1600px){
 .floating .hero{max-width:1440px}
 .floating .story-section{max-width:1440px}
 .floating .story-note{max-width:1280px;padding:72px 80px}
 .floating .story-note .story-body{max-width:720px}
 .floating .pricing-section{max-width:1320px}
 .floating .pricing-pair{max-width:1120px;gap:36px}
 .floating .pricing-plan{padding:44px}
 .floating[data-blog] main{max-width:1500px;padding-inline:48px}
 .floating[data-blog] .blog-grid{gap:32px}
 .floating[data-blog] .blog-art{height:240px}
 .floating.contact-page main{max-width:1320px}
 .floating.contact-page .layout{gap:72px}
 .floating main:has(.page-heading){max-width:1320px;padding-inline:48px}
 .floating .history-content{max-width:850px}
}