/* Contact page (/{lang}/contact).
   The header is sticky (68px on phones, 76px on desktop, up to 91px in Arabic, more with the
   large-text setting). Anything the browser scrolls to the top of the window would sit under it:
   the hero "Send a message" button and the "On this page" links (#ct-form, #ct-details, #ct-map,
   #ct-other), the no-JavaScript form result (the server redirects to #f-contact or #ct-done), and
   a focused control when someone tabs backwards (WCAG 2.4.11, focus not obscured). Reserve the
   header's height for every scroll on this page, in rem so it grows with the large-text setting. */
html { scroll-padding-top: 6.5rem; }
/* Section links: the sections have deep top padding, so let the section edge tuck under the
   header (3.5rem from the top) instead of showing a strip of the section above. */
#ct-details,
#ct-map,
#ct-other { scroll-margin-top: -3rem; }
/* The no-JavaScript result after a failed send lands on the form: keep the panel heading
   ("Send us a message") and the "All fields are required" line in view above the first field. */
#f-contact { scroll-margin-top: 9rem; }
/* The thank-you message is a grid, so its widest unbreakable run sets the width of everything in
   it: at 320px, or with large text, the email address pushed the heading, text and button out of
   the box. Let the address break, as the board's email card does, and keep the phone number in
   one piece (in Arabic a wrapped number reads "+20" at the end of one line, the rest on the next). */
#ct-done { grid-template-columns: minmax(0, 1fr); }
#ct-done .ltr { overflow-wrap: anywhere; }
#ct-done a[href^="tel:"] .ltr { white-space: nowrap; }
/* "Shared with HAiCapita" may wrap inside its pill rather than stick out of the office card at
   320px with large text (it stays on one line at the board's sizes). */
#ct-details .pill { white-space: normal; }