/* Phones, foldables and small tablets: everything below 1024 px. Loaded last; nothing here applies at 1024 px
   and wider, so the desktop page is untouched. Sizes: body text 15 px or more, secondary 13 px or more, every
   control at least 44 px to touch. Spacing scales with the viewport height as well as its width. The systems
   showcase's compact form lives in systems.css (same 1023 px line). */
@media(max-width:1023px){
 html:root{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
 /* Notches and home indicators: content keeps clear of the safe areas (viewport-fit=cover in the head). */
 html:root .site-header{padding-left:max(7vw,env(safe-area-inset-left));padding-right:max(7vw,env(safe-area-inset-right));padding-top:max(20px,env(safe-area-inset-top))}
 html:root .section{padding:clamp(56px,9svh,96px) max(7vw,env(safe-area-inset-right)) clamp(56px,9svh,96px) max(7vw,env(safe-area-inset-left))}
 html:root footer{padding:24px max(7vw,env(safe-area-inset-right)) max(28px,calc(env(safe-area-inset-bottom) + 18px)) max(7vw,env(safe-area-inset-left));font-size:13px;gap:4px 16px}
 html:root footer p{font-size:13px}
 html:root footer a,html:root .site-header .brand{display:inline-flex;align-items:center;min-height:44px}
 html:root footer>a:not(.brand){font-size:15px}
 html:root #motion-toggle{min-height:44px;padding:10px 12px;font-size:13px}
 /* Type. */
 html:root .eyebrow,html:root .hero-flow .hero-copy .hero-eyebrow{font-size:13px;letter-spacing:.13em}
 html:root .intro-copy{font-size:16px;line-height:1.7}
 html:root .hero-flow .hero-copy p.hero-support{font-size:16px;line-height:1.6}
 html:root .button{min-height:50px;font-size:15px}
 html:root .hero-actions .quiet-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
 html:root .hero-offers-label{font-size:13px}
 html:root .hero-offers .offer-panel p{font-size:15px;line-height:1.5}
 html:root .hero-offers-close{font-size:15px}
 html:root body .hero-offers .offers>li>span{font-size:13px}
 html:root .sys-tab-n{font-size:13px}
 html:root .about-direct{font-size:16px}
 html:root .about-build{font-size:15px}
 html:root .about-points{font-size:14px}
 html:root .draft-notice{font-size:13px;line-height:1.6}
 html:root form label{font-size:15px}
 /* 16 px inputs: phones do not zoom the page when a field is focused. */
 html:root input,html:root textarea{font-size:16px;min-height:48px}
 html:root #form-status{font-size:13px}
 html:root .text-button{min-height:44px;font-size:15px}
 html:root .systems .sys-caption-line{font-size:15px}
}
/* Desktop navigation still shows from 700 px: give its links a full touch height. */
@media(min-width:700px) and (max-width:1023px){
 html:root nav{gap:6px 22px;font-size:14px}
 html:root nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
}
/* Phones and closed foldables. */
@media(max-width:699px){
 /* The menu control: three lines that become a close mark, 44 px square. */
 html:root.js #menu{display:grid;place-items:center;width:44px;height:44px;margin:-4px -10px 0 0;padding:0;color:#dfe9da}
 #menu .menu-bars{position:relative;display:block;width:20px;height:14px}
 #menu .menu-bars i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s}
 #menu .menu-bars i:nth-child(1){top:0}#menu .menu-bars i:nth-child(2){top:6.25px}#menu .menu-bars i:nth-child(3){bottom:0}
 #menu[aria-expanded=true] .menu-bars i:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
 #menu[aria-expanded=true] .menu-bars i:nth-child(2){opacity:0}
 #menu[aria-expanded=true] .menu-bars i:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}
 html:root.js nav{top:70px;right:max(5vw,env(safe-area-inset-right));min-width:220px;max-width:calc(100vw - 10vw);padding:8px;gap:2px;font-size:16px;align-items:stretch;border-radius:12px;box-shadow:0 18px 40px -16px #000c}
 html:root.js nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:8px;color:#dfe9da}
 html:root.js nav a:not(.header-contact):active{background:#8a9d7124}
 /* The menu's Let's talk underline sits as far under the text as the hero button's (9 px). */
 html:root.js nav .header-contact{justify-content:center;margin-top:6px;min-height:52px;text-underline-offset:9px}
 /* Hero: headline, buttons and the start of How we start in the first screen; the closing line just after. */
 html:root .hero-flow{min-height:0}
 html:root .hero-layout{min-height:0;padding:clamp(96px,14svh,116px) 0 clamp(28px,5svh,48px)}
 html:root .hero-flow .hero-copy p.hero-support{margin-top:16px}
 html:root .hero-flow .hero-actions{margin-top:22px;gap:10px 22px}
 html:root .hero-offers{width:100%;margin-top:clamp(28px,5svh,40px)}
 html:root .hero-offers-label{margin-bottom:14px}
 html:root .hero-offers .offers{--gap:10px;--drop:12px}
 html:root .hero-offers .offer-panel{padding:12px 16px 13px}
 html:root .hero-offers .offer-panel h3{font-size:17px;margin-bottom:3px}
 html:root .hero-offers-close{margin-top:14px}
 /* About: the loop sized to the screen, its labels at a readable size. */
 html:root .about-side{margin-top:36px;align-items:center}
 /* The side labels stay on screen down to 320 px: the ring narrows with the width. */
 html:root .about-loop{--r:clamp(64px,calc(50vw - 96px),104px);--dot:40px}
 html:root h2,html:root .systems h2,html:root .about h2,html:root .enquiry h2{font-size:clamp(34px,10.4vw,44px)}
 html:root .enquiry form{margin-top:32px}
 html:root footer{justify-content:space-between}
 html:root footer p{order:3;width:100%;max-width:none;margin:0}
}
/* Open foldables and small tablets in portrait or near-square: their own layout. Hero in two columns where it
   fits, About text and loop side by side; the systems showcase uses its two-column compact form. */
@media(min-width:760px) and (max-width:1023px){
 html:root .hero-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;width:88%;max-width:none;min-height:0;padding:clamp(104px,15svh,140px) 0 clamp(40px,7svh,72px)}
 html:root .hero-flow{min-height:0}
 html:root .hero-flow h1{--h1:clamp(42px,6.4vw,60px);font-size:min(var(--h1),12.1cqw)}
 html:root .hero-offers{justify-self:end;width:100%;margin:0}
 html:root .hero-offers .offers{--coin:34px;--gap:12px}
 html:root .hero-offers .offer-panel{padding:14px 18px 15px}
 html:root .hero-offers .offer-panel h3{font-size:17px}
 html:root .hero-offers-close{margin-left:50px}
}
@media(min-width:640px) and (max-width:1023px){
 html:root .about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center}
 html:root .about-side{margin-top:0;align-items:center}
 html:root .about-loop{--r:clamp(88px,13vw,124px);--dot:42px;width:100%;height:calc(var(--r)*2 + 96px)}
 html:root .about-points{font-size:14px}
}
/* Open foldables at 640 to 759: the hero stays one column (two columns were tried at 653 and 690 and left a
   three-line headline, stacked buttons and three-line offer panels), set to fill the width: the headline sized
   to the column, the support line at reading width, How we start full width under the buttons. */
@media(min-width:640px) and (max-width:759px){
 html:root .hero-layout{width:86%}
 html:root .hero-flow .hero-copy{max-width:none;width:100%}
 html:root .hero-flow h1{--h1:84px;font-size:min(var(--h1),11.9cqw)}
 html:root .hero-flow .hero-copy p.hero-support{max-width:24em;font-size:18px;margin-top:20px}
 html:root .hero-flow .hero-actions{margin-top:28px}
 html:root .hero-offers{margin-top:44px}
 html:root .about{column-gap:40px}
 html:root .about-loop{--r:80px}
}
/* About, 640 to 1023: the heading spans both columns (two lines, as at every other size); the text and the loop
   sit side by side under it. The text column is a subgrid of the section so its lines stay in column one. */
@media(min-width:640px) and (max-width:1023px){
 html:root .about{grid-template-rows:auto auto repeat(4,auto) 1fr;align-items:start;row-gap:0}
 html:root .about>div:first-child{display:grid;grid-column:1/-1;grid-row:1/-1;grid-template-columns:subgrid;grid-template-rows:subgrid;container-type:normal}
 html:root .about>div:first-child>*{grid-column:1}
 html:root .about>div:first-child>.eyebrow{grid-row:1}
 html:root .about>div:first-child>h2{grid-row:2;grid-column:1/-1;font-size:clamp(40px,6.6vw,58px)}
 html:root .about-side{grid-column:2;grid-row:3/-1;align-self:center}
}
/* Short screens (phones on their side): type and spacing follow the height, the hero is never taller than it
   needs to be, and nothing sticks. */
@media(max-width:1023px) and (max-height:540px) and (orientation:landscape){
 html:root .hero-layout{min-height:0;padding:84px 0 36px;gap:36px}
 html:root .hero-flow h1{--h1:clamp(32px,9.5svh,46px);font-size:min(var(--h1),12.1cqw)}
 html:root .hero-flow .hero-copy p.hero-support{margin-top:12px}
 html:root .hero-flow .hero-actions{margin-top:16px}
 html:root h2,html:root .systems h2,html:root .about h2,html:root .enquiry h2{font-size:clamp(28px,8.5svh,38px);margin-bottom:18px}
 html:root .section{padding-top:48px;padding-bottom:48px;padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
 html:root .eyebrow{margin-bottom:14px}
 html:root .systems-tabs{margin-top:28px}
 html:root .about>div:first-child>h2{font-size:clamp(28px,8.5svh,38px)}
}