/* Compact layouts, in one place. Desktop compositions remain in styles.css. */
@media (max-width: 960px) {
  :root { --gutter: clamp(20px, 4vw, 36px); }
  .wrap > *, .page-split > *, .contact-layout > *, .health-panel > *,
  .care-layout > *, .field-row > *, .plan { min-width: 0; }
  .button { white-space: normal; text-align: left; }
  .button svg, .text-link svg { flex-shrink: 0; }
  .audience-nav a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .main-nav { top: 100%; max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; padding-block: 16px 24px; }
  .main-nav > a:not(.button) { font-size: 19px; min-height: 48px; }
  .main-nav .button { margin-top: 8px; }
  .menu-button[aria-expanded=true] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-button[aria-expanded=true] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  input, select, textarea { font-size: 16px; min-width: 0; }
  .pause-partners { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; }
  .section { padding-block: 64px; }
  .section-sm { padding-block: 48px; }
  .section-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .section-intro .lead { padding: 0; }
  .services-layout { grid-template-columns: 1fr 1fr; gap: 32px; }
  .service-trigger { font-size: 20px; gap: 16px; }
  .care-layout { grid-template-columns: 1fr; gap: 28px; padding-block: 60px; }
  .care-copy p { max-width: 54ch; font-size: 16px; }
  .local-layout { grid-template-columns: 1fr; gap: 32px; }
  .local-photo { height: auto; aspect-ratio: 3 / 2; max-height: 440px; }
  .local-copy .lead { max-width: 58ch; }
  .health-panel { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
  .health-action { justify-self: start; }
  .health-panel h2 { max-width: none; }
  .health-panel p { max-width: 58ch; }
  .page-split, .internet-hero .page-split { grid-template-columns: 1fr; gap: 32px; }
  .page-split > img { height: auto; aspect-ratio: 3 / 2; max-height: 420px; }
  .page-hero h1 { max-width: 18ch; }
  .page-hero .lead { max-width: 56ch; }
  .service-table article { grid-template-columns: .8fr 1.2fr; gap: 16px 32px; }
  .service-table .text-link { grid-column: 2; white-space: normal; }
  .process { gap: 28px; }
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .faq-layout h2 { max-width: 22ch; }
  .checker { max-width: 650px; width: 100%; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans .plan { padding: 28px; border: 0; border-bottom: 1px solid #cbdce4; }
  .plans .plan:nth-child(odd) { padding-left: 0; border-right: 1px solid #cbdce4; }
  .plans .plan:nth-child(even) { padding-right: 0; }
  .plans .plan:nth-last-child(-n+2) { border-bottom: 0; }
  .plan-speed { font-size: 40px; }
  .contact-layout { grid-template-columns: 1fr; gap: 28px; }
  .contact-aside { padding: 40px 36px; }
  .contact-aside .lead { max-width: 52ch; }
  .contact-methods { margin-top: 24px; }
  .contact-methods a { min-height: 44px; font-size: 17px; }
  .field-row { grid-template-columns: 1fr 1fr; gap: 20px; }
  .quiz-controls { gap: 16px; flex-wrap: wrap; }




}

@media (max-width: 600px) {
  :root { --gutter: 20px; }
  html { scroll-padding-top: 135px; }
  h1, h2, h3 { text-wrap: pretty; }
  h2 { font-size: clamp(30px, 8vw, 38px); line-height: 1.13; }
  h2 br { display: none; }
  h2 br::after { content: ' '; }
  .lead { font-size: 16px; line-height: 1.6; }
  .preview-bar { height: 28px; font-size: 10px; gap: 8px; }
  .preview-status { display: none; }
  .preview-bar a { min-height: 28px; display: flex; align-items: center; }
  .nav-wrap { height: auto; min-height: 0; padding-block: 14px 12px; gap: 12px 4px; flex-wrap: wrap; }
  .brand { min-height: 44px; display: flex; align-items: center; }
  .brand img { width: 88px; height: 34px; }
  .menu-button { width: 44px; height: 44px; }
  .audience-nav { order: 3; width: 100%; }
  .audience-nav a { flex: 1; padding: 6px 12px; }
  .main-nav { max-height: calc(100dvh - 145px); }
  .hero, .hero[data-direction] { display: flex; flex-direction: column; }
  .hero .wrap { order: 1; min-height: 0; padding-top: 36px; padding-bottom: 20px; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 50px); line-height: 1.1; letter-spacing: -.045em; max-width: none; }
  .hero .lead { margin-top: 20px; font-size: 16px; max-width: 40ch; }
  /* Phones read as three tiers: headline and promise, then ONE primary action, then supporting
     detail. An 8px gap between a filled 52px button and a 44px text link collapsed the first two
     into one crammed block — the action and the phone number stopped being separate offers. The
     action group is an explicit column here rather than a wrapping row, which is what it was
     relying on once the button went full-width. */
  .hero .actions { margin-top: 28px; gap: 18px; flex-direction: column; align-items: flex-start; }
  .hero .actions .button { width: 100%; justify-content: space-between; }
  /* The 44px touch target used to be min-height, which made the box 44px tall around 16px of ink
     and left 14px of invisible padding on each side — so a 16px "gap" rendered as a 29px optical
     one, and the number floated in dead space. The hit area is now a centred pseudo-element, so
     the box is the size of the text and every gap here is the gap you actually see. */
  .hero .actions .text-link { font-size: 15px; min-height: 0; position: relative; }
  .hero .actions .text-link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
  /* 34px of real air below the action cluster, so the button-plus-phone group reads as one thing
     and the location/since line reads as the next. */
  .hero-foot { margin-top: 34px; max-width: none; font-size: 13px; gap: 6px; display: flex; flex-wrap: wrap; }
  .hero-foot span+span:before { margin-right: 6px; }
  .hero .hero-photo, .hero[data-direction] .hero-photo { order: 2; position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1.7; min-height: 0; border-radius: 0; opacity: 1; z-index: 0; }
  .hero-photo img { object-position: 57% 40%; }
  .hero:after, .hero[data-direction]:after { display: none; }
  .hero-photo:after { content: ''; position: absolute; inset: 0; background: linear-gradient(#f4f9fb, transparent 30%); pointer-events: none; }


  .photo-caption { display: flex; position: static; width: fit-content; margin-top: 12px; padding: 0; min-height: 44px; font-size: 13px; background: none; color: inherit; }
  .partner-strip { padding-block: 20px; }
  .partner-layout { display: grid; grid-template-columns: 1fr 44px; gap: 12px; }
  .partner-label { width: auto; font-size: 12px; }
  .partner-label br { display: none; }
  .partner-window { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .pause-partners { grid-column: 2; grid-row: 1; }
  .partner-track img { max-width: 135px; }
  .section { padding-block: 64px; }
  .section-sm { padding-block: 48px; }
  .section-intro { margin-bottom: 28px; gap: 20px; }
  .section-intro .lead { font-size: 16px; }
  .section-intro .text-link { margin-top: 8px; }
  .services-layout { grid-template-columns: 1fr; gap: 40px; }
  .services-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 8px; }
  .service-trigger { padding: 20px 0; font-size: 20px; }
  .service-content { padding-right: 12px; font-size: 15px; }
  .image-label { font-size: 13px; left: 14px; right: 14px; bottom: 14px; gap: 8px; flex-wrap: wrap; }
  .care-layout { padding-block: 48px; gap: 24px; }
  .care-copy h2, .local-copy h2 { font-size: clamp(30px, 8vw, 38px); max-width: none; }
  .care-copy p, .local-copy .lead { font-size: 16px; margin-top: 20px; }
  .care-copy .text-link { margin-top: 14px; }
  .local-layout { gap: 40px; }
  .local-photo { aspect-ratio: 1.2; border-radius: 8px; }
  .location-mini { flex-wrap: wrap; gap: 20px; }
  .local-copy .location-mini { gap: 24px; margin-top: 24px; }
  .quote-row { display: block; margin-top: 48px; padding-top: 32px; }
  /* A 13px floor for text people actually read on a phone. The site's desktop scale drops to
     11-12px for captions, meta and footnotes, which is comfortable at arm's length on a monitor
     and genuinely hard work held in one hand — 89 separate instances of it were on these pages.
     Text drawn INSIDE the Managed IT laptop illustration is deliberately exempt: it is a picture
     of a screen, not something to read. Desktop keeps its own scale untouched. */
  .location-mini small, .quote-row cite, .plans-note { font-size: 13px; }
  .quote-row > div { margin-bottom: 16px; font-size: 13px; }
  .quote-row > div br { display: none; }
  .quote-row blockquote p { font-size: 23px; }
  /* One card family on phones: same 20px inner gutter and 8px radius for the checker,
     the health panel, the contact aside and the form card, so stacked cards align. */
  .health-panel { padding: 36px 20px; gap: 28px; border-radius: 8px; }
  .health-panel h2 { font-size: clamp(28px, 7.5vw, 36px); }
  .health-panel p { font-size: 15px; margin-top: 16px; }
  .health-action { width: 100%; }
  .health-panel .health-action p { font-size: 12px; margin-top: 16px; }
  .health-panel .button { width: 100%; padding-inline: 14px; gap: 12px; justify-content: space-between; font-size: 14px; }
  .next-doors { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .next-door { gap: 16px; padding-top: 24px; }
  .next-door h3 { font-size: 20px; }
  .footer { padding-top: 40px; }
  .footer-top { display: block; padding-bottom: 28px; }
  .footer-top h2 { font-size: 28px; max-width: 18ch; }
  .footer-top .actions { margin-top: 24px; gap: 16px; align-items: flex-start; }
  .footer-top .button { justify-content: space-between; }
  .footer-top .text-link { font-size: 14px; }
  .footer-details { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; font-size: 14px; }
  .footer-brand { display: block; }
  .footer-brand p { font-size: 13px; margin-top: 12px; max-width: none; }
  .footer-details h3 { font-size: 16px; margin-bottom: 8px; }
  .footer-details small { font-size: 13px; }
  .footer-details a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom { display: block; font-size: 13px; padding-block: 20px; }
  .footer-bottom span { display: block; margin-top: 8px; }
  /* Keep the shallow hero exit; the next section supplies the main breathing space. */
  .page-hero { padding-block: 32px 16px; }
  .breadcrumb { margin-bottom: 24px; font-size: 13px; min-height: 24px; }
  /* .demo-note's base sets 11px !important, so matching it is the only way to lift it here. */
  .demo-note { font-size: 13px !important; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
  .page-hero h1, .contact-aside h1 { font-size: clamp(36px, 9.5vw, 48px); max-width: 19ch; line-height: 1.1; }
  .page-hero .lead { font-size: 16px; margin-top: 20px; }
  .page-hero .actions { margin-top: 28px; gap: 16px; align-items: flex-start; }
  .page-hero .actions .button { width: 100%; justify-content: space-between; }
  .page-split > img { aspect-ratio: 1.3; border-radius: 8px; }
  .page-hero .location-status { font-size: 13px; margin-top: 20px; }
  .service-table { margin-top: 28px; }
  .service-table article { display: block; padding-block: 24px; }
  .service-table h3 { font-size: 24px; }
  .service-table p { margin-top: 12px; font-size: 16px; }
  .service-table .text-link { margin-top: 12px; font-size: 14px; }
  .process { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  .process li { padding-top: 20px; }
  .process li:before { margin-bottom: 10px; }
  .process p { margin-top: 12px; }
  .faq-list summary { font-size: 17px; min-height: 44px; align-items: center; }
  .faq-list details { padding-block: 12px; }
  .faq-list details p { font-size: 15px; }
  .checker { padding: 24px 20px; box-shadow: none; border-radius: 8px; }
  .checker h2 { font-size: 26px; }
  .checker p, .checker > .text-link { font-size: 14px; }
  .checker .button { width: 100%; justify-content: space-between; }
  .checker input { padding-left: 40px; }
  .checker input::placeholder { font-size: 14px; }
  .address-options button { font-size: 14px; padding: 14px 12px; }
  .availability-plans li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .availability-plans .ap-name { grid-column: 1 / -1; font-size: 15px; }
  .availability-plans .text-link { grid-column: 1 / -1; margin-top: 4px; }
  .plans { grid-template-columns: 1fr; margin-top: 28px; }
  .plans .plan, .plans .plan:nth-child(n) { padding: 24px 0; border: 0; border-bottom: 1px solid #cbdce4; }
  .plans .plan:last-child { border-bottom: 0; }
  .plan { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
  .plan h3 { grid-column: 1 / -1; font-size: 24px; }
  .plan-speed { grid-column: 1; grid-row: 2; font-size: 36px; margin-top: 20px; }
  .plan-speed span { display: block; margin: 4px 0 0; font-size: 12px; }
  .plan-price { grid-column: 2; grid-row: 2; text-align: right; font-size: 27px; margin-top: 20px; }
  .plan-price span { display: block; font-size: 12px; }
  .plan-upload { grid-column: 1; grid-row: 3; font-size: 12px; }
  .plan .small { grid-column: 2; grid-row: 3; text-align: right; font-size: 12px; margin-top: 8px; }
  .plan .text-link { grid-column: 1 / -1; margin-top: 14px; font-size: 14px; }
  .plans-note { font-size: 12px; }
  .contact-aside { padding: 28px 20px; border-radius: 8px; }
  .contact-aside .lead { font-size: 16px; margin-top: 16px; }
  .form-shell { padding: 24px 20px; border-radius: 8px; }
  .form-shell h2 { font-size: 26px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  label { font-size: 14px; }
  .quiz-intro { padding: 36px var(--gutter) 48px; text-align: left; }
  .quiz-intro h1, .quiz-contact h1 { font-size: clamp(34px, 9vw, 44px); max-width: none; line-height: 1.12; }
  .quiz-intro h1 br { display: none; }
  .quiz-intro > .lead { font-size: 16px; margin-top: 20px; }
  .quiz-intro > .actions { margin-top: 24px; }
  .quiz-intro .button { width: 100%; justify-content: space-between; }
  .quiz-intro .small { font-size: 12px; margin-inline: 0; }
  .quiz-intro > .demo-note { justify-content: flex-start; }
  .quiz-intro ul { justify-content: start; flex-wrap: wrap; gap: 16px 24px; margin-top: 28px; padding-top: 24px; }
  .quiz-wrap { padding: 32px var(--gutter) 48px; }
  .quiz-question { font-size: 28px; margin-top: 24px; line-height: 1.18; }
  .quiz-help { font-size: 15px; margin-top: 16px; }
  .quiz-choices { margin-top: 24px; gap: 10px; min-width: 0; margin-inline: 0; }
  .quiz-option { padding: 16px 12px; gap: 12px; align-items: start; }
  .quiz-option input { margin-top: 3px; }
  .quiz-option span { font-size: 15px; }
  .quiz-option small { font-size: 13px; }
  .quiz-controls { margin-top: 24px; gap: 12px; }
  .quiz-controls .button { font-size: 14px; gap: 12px; padding-inline: 16px; }
  .quiz-controls > .actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; }
  .quiz-controls > .actions .button { justify-content: space-between; }
  .quiz-contact .form-shell { margin-top: 24px; padding: 0; border: 0; }
  .result-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .score-block { padding: 24px; }
  .score-block strong { font-size: 68px; }
  .recommendations li small { font-size: 14px; }













  /* Reading floor, applied last so it wins over the per-component sizes set earlier in this block.
     Everything here is text a customer actually reads on a phone — plan details, hours, form help,
     footnotes — and 11-12px is uncomfortable held in one hand. Deliberately NOT covered: text drawn
     inside the Managed IT laptop, which is a picture of a screen rather than text to read. */
  .plan-upload, .plan .small, .plan-speed span, .plan-price span, .plans-note,
  .contact-hours, .form-note, .store-hours-note, .quiz-intro .small,
  .footer-details h3 small, .footer-details h3 span, .location-mini small,
  .recommendations li small, .quiz-option small, .quiz-meta, .quiz-controls > span { font-size: 13px; }
  .plan-fibre, label span { font-size: 12px; }

  /* Full-width buttons break the text column. Their box sits on the 20px gutter like everything
     else, but the base 22px inner padding pushes the LABEL to 43px — so reading down the left edge
     the line jumps in for the button and back out for the phone number under it. Trimming the left
     padding brings the label back to ~28px. The right side keeps its inset so the trailing arrow
     is not pinned to the edge. */
  .hero .actions .button, .page-hero .actions .button, .footer-top .actions .button,
  .quiz-intro .button, .checker .button, .form-shell .button, .msp-health .button,
  .msp-start-copy .button, .msp-story-copy .actions .button, .quiz-controls > .actions .button { padding-left: 8px; }
}

/* Short landscape screens need room for content below the navigation. */
@media (max-width: 960px) and (max-height: 500px) {
  .site-header { position: relative; }
  .main-nav { position: fixed; top: 0; bottom: 0; max-height: 100dvh; padding-top: 56px; }
  .menu-button { z-index: 1; }
  .menu-open .menu-button { position: fixed; top: 8px; right: var(--gutter); }
}

@media (max-width: 600px) {
  .legal h2 { font-size: 22px; margin-top: 40px; }
  .legal h3 { font-size: 17px; }
  .legal p, .legal-list li { font-size: 16px; }
  .legal-updated { margin-top: 14px; }
}