/* kyanite-rwd.css — v55 responsive & accessibility layer (13 Oct 2026)
   Loaded on every page AFTER the page's own styles. Desktop appearance is
   unchanged except where noted. Breakpoints are chosen by fit:
     phone   ≤ 699px   (one column)
     tablet  700–1024px (two columns where content stays comfortable)
     desktop ≥ 1025px
   --kyn-header-h is measured from the real header by kyanite-rwd.js, so
   menus and anchor jumps line up after rotation, text resizing, etc. */

:root{--kyn-header-h:64px}

/* ---------- Anchors land below the sticky header ---------- */
html{scroll-padding-top:calc(var(--kyn-header-h) + 12px)}

/* ---------- Content stays visible if animation or JS fails ---------- */
html:not(.js) .reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto!important}
  .marquee-track{animation:none!important}
}

/* ---------- Visible keyboard focus (works on light and dark backgrounds) ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-within>input[type=checkbox]:focus-visible{
  outline:2px solid #C8960E!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(13,36,56,.55)!important;border-radius:4px}

/* ---------- Headers: grow with text instead of overlapping ---------- */
/* (header height: kyanite-rwd.js keeps each header's own height as a minimum and lets it grow with large text) */
@media(max-width:1024px){.brand,.kn-brand{min-width:0}}
/* menu buttons: 44×44 touch target, always on top of brand text */
#ham,#knHam,#whatHam{min-width:44px!important;min-height:44px!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;position:relative;z-index:3}

/* ---------- Mobile menus: start exactly under the header, scroll, respect safe areas ---------- */
.mobile-menu,.kn-mob,.what-mobile-menu{
  top:var(--kyn-header-h)!important;bottom:0!important;max-height:none!important;
  overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
  padding-left:max(20px,env(safe-area-inset-left))!important;padding-right:max(20px,env(safe-area-inset-right))!important}
.mobile-menu a,.kn-mob a,.what-mobile-menu a{min-height:44px;display:flex!important;align-items:center}
html.kyn-menu-open,html.kyn-menu-open body{overflow:hidden!important}

/* ---------- Touch targets ≈44px on touch screens ---------- */
@media (pointer:coarse),(max-width:1024px){
  .back-link,.exec-crumb,.six-nav a,.exec-more,.kn-link,.hero-quiet-link,.exec-band-link,
  .recog-quiet-link,.kx-back,a.action,.s-learn-link,.f-legal a,.cta-secondary-mobile a{
    display:inline-flex!important;align-items:center;min-height:44px}
  footer ul li a,footer .f-col a,.kn-foot a,.exec-footer-links a{display:inline-flex;align-items:center;min-height:44px}
  footer ul{row-gap:0!important}
  summary{min-height:44px;display:flex;align-items:center}
  details>summary{list-style:none}
  input[type=checkbox],input[type=radio]{width:22px;height:22px;flex-shrink:0}
  /* form text: 16px+ stops iPhone auto-zoom; fields scroll clear of the header */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea{font-size:max(16px,1em)!important;min-height:44px}
  input,select,textarea,button[type=submit]{scroll-margin-top:calc(var(--kyn-header-h) + 24px);scroll-margin-bottom:24px}
}

/* ---------- Never let a long word or URL push the page sideways ---------- */
main p,main li,main h1,main h2,main h3,footer p,footer a{overflow-wrap:break-word}
img,video,iframe{max-width:100%}

/* ---------- Keep "Book a call" in the header on phones & tablets (compact, readable) ---------- */
@media(max-width:1024px){
  .kn-right .kn-book,.nav-right>a.btn{display:inline-flex!important;padding:9px 14px!important;font-size:.8rem!important;min-height:40px;white-space:nowrap}
  .kn-right,.nav-right{gap:6px!important}
}
@media(max-width:359px){
  .kn-right .kn-book,.nav-right>a.btn{padding:8px 10px!important;font-size:.74rem!important}
}

/* ---------- Large text (e.g. 200%): header and footer rows wrap instead of widening the page ---------- */
@media(max-width:1024px){
  .nav-inner,.kn-inner{flex-wrap:wrap;row-gap:6px}
  .nav-right,.kn-right{margin-left:auto;flex-wrap:nowrap}
  footer .f-bottom,footer .f-legal,.exec-footer-inner,.exec-footer-links{flex-wrap:wrap}
  footer .f-bottom>*,footer .f-legal>*{min-width:0;max-width:100%}
}
.btn{max-width:100%;white-space:normal;text-align:center}
.exec-signal-inner>*,.exec-about-inner>*,.exec-contact-inner>*,.exec-hero-inner>*,.exec-split-inner>*{min-width:0}
h1,h2{overflow-wrap:break-word}
@media(max-width:1024px){
  h1,h2,h3,summary,.signal-text{overflow-wrap:anywhere}
  a[href^="mailto:"]{overflow-wrap:anywhere}
}
.kn-routes{grid-template-columns:minmax(0,1fr)}

/* ---------- More 44px targets (logo links, booking back link, assessment home link) ---------- */
@media (pointer:coarse),(max-width:1024px){
  .kn-brand,.nav-inner>.brand,#brandBarLink{min-height:44px;display:flex!important;align-items:center}
  .step>p>a[href="index.html"]:only-child,.header-home-link{min-height:44px;min-width:44px;display:inline-flex!important;align-items:center;justify-content:center}
  .six-nav a{font-size:.8rem!important}
}