/* ===================================================================
   MOCK-UP BOARDS — every page body is generated from its canvas board
   (board2php.py). These rules are the board's own helmet CSS, scoped.
   =================================================================== */
.mk{position:relative;isolation:isolate;overflow:hidden;font-family:var(--text);line-height:normal}
/* the boards are drawn with the browser's default box model */
.mk *,.mk *::before,.mk *::after{box-sizing:content-box}
.mk input,.mk textarea,.mk button,.mk form{box-sizing:border-box}
.mk h1,.mk h2,.mk h3{margin:0;text-wrap:wrap}
.mk a{color:inherit}
.mk-pill{cursor:pointer;text-decoration:none;transition:filter var(--t-fast)}
a.mk-pill:hover,button.mk-pill:hover{filter:brightness(1.12)}
.mk-band > [style^="position:relative"]{max-width:1328px;margin-left:auto;margin-right:auto}
.mk-band > [style^="position:relative;padding"]{max-width:1328px}
/* real form fields inside a board, styled exactly like the board's drawn fields */
.mk input,.mk textarea{font:inherit;width:100%;box-sizing:border-box;outline:none}
.mk input::placeholder,.mk textarea::placeholder{color:var(--ph,inherit);opacity:1}
.mk input:focus,.mk textarea:focus{border-color:#19c3e6!important;box-shadow:0 0 0 3px rgba(25,195,230,.28)}
.mk .field.bad input,.mk .field.bad textarea{border-color:#ff9d84!important}
.mk button.mk-pill{border:0;font-size:16px}
.mk .done{margin-top:12px}
/* one left edge for the whole site: the hero text's edge, (viewport - 1328px)/2, never under 56px (24 Oct 2026) */
@media (min-width:901px){
  .mk [style*="padding:"][style*=" 60px"]:not([style*="56px"]){padding-left:max(56px,calc((100% - 1328px)/2))!important;padding-right:max(56px,calc((100% - 1328px)/2))!important}
  /* the article: body and rail centred on the same 1440 frame as the header */
  .mk [style*="grid-template-columns:1fr 330px"]{max-width:1440px;margin-left:auto;margin-right:auto}
  .mk [style*="padding:46px 56px 46px 60px"]{padding-left:56px!important}
}
/* pages built on the theme's own .wrap (privacy policy, 404) use the same frame */
.band > .wrap{max-width:1440px;padding-left:56px;padding-right:56px}
@media (max-width:900px){.band > .wrap{padding-left:20px;padding-right:20px}}
@media (max-width:1100px){
  .mk-instrument{opacity:.35}
}
@media (max-width:900px){
  .mk [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .mk [style*="padding:"][style*=" 56px"],.mk [style*="padding:"][style*=" 60px"],.mk-band{padding-left:20px!important;padding-right:20px!important}
  /* a band whose inner block already carries the gutter adds none of its own, so the text sits 20px in, under the logo */
  .mk-band:has(> [style*="padding:"][style*=" 56px"]),.mk-band:has(> [style*="padding:"][style*=" 60px"]){padding-left:0!important;padding-right:0!important}
  .mk [style*="display:flex"]{flex-wrap:wrap}
  .mk [style*="white-space:nowrap"]{white-space:normal!important}
  .mk-band[style*="height:"]{height:auto!important}
  .mk-band [style*="position:absolute"][style*="bottom:0"]{position:relative!important;margin-top:40px}
  .mk-instrument{display:none}
  .mk [style*="border-right:1px solid"]{border-right:0!important}
  .mk [style*="min-height:"]{min-height:0!important}
}

/* ---------- header bar + menu panels, from the Menus board ---------- */
/* the logo sits on the same left edge as the hero text at every width (24 Oct 2026) */
.site-head .bar{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(56px,calc((100% - 1328px)/2));max-width:none}
.site-head .nav{gap:24px}
.site-head .nav > li{position:static}
.site-head .nav-link{font:600 14px/1 "Instrument Sans",system-ui,sans-serif;color:rgba(234,245,250,.8);padding:0;min-height:44px;border-radius:0;border-bottom:2px solid transparent}
.site-head .nav-link:hover,.site-head .nav-link[aria-expanded="true"]{color:#eaf5fa}
.site-head .nav-link[aria-expanded="true"],.site-head .nav-link.is-section,.site-head .nav-link[aria-current="page"]{color:#eaf5fa}
.site-head .nav-link[aria-expanded="true"]{box-shadow:inset 0 -2px 0 #19c3e6;color:#eaf5fa}
.site-head .nav-link .tri{font-size:.7em;opacity:.7}
.hbtn{display:inline-flex;align-items:center;background:#19c3e6;color:#04121c;padding:10px 20px;border-radius:7px;font:600 14px/1.2 "Instrument Sans",system-ui,sans-serif;text-decoration:none;transition:background-color var(--t-fast)}
.hbtn:hover{background:#eaf5fa}
.mega{position:fixed;left:0;right:0;top:var(--head-h);z-index:99;background:rgba(8,40,96,.97);border-bottom:2px solid #19c3e6;box-shadow:0 24px 60px rgba(2,8,26,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t-fast) ease-out,transform var(--t-fast) var(--ease-out),visibility 0s linear var(--t-fast)}
.mega.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega__in{max-width:1440px;margin:0 auto;padding:30px 56px 26px;box-sizing:border-box}
.mega__grid{display:grid;gap:34px}
.mega__h{display:block;font:900 25px/1 "Big Shoulders Display",sans-serif;text-transform:uppercase;color:#19c3e6;text-decoration:none}
.mega__d{font:400 12.5px/1.45 "Instrument Sans",system-ui,sans-serif;color:rgba(234,245,250,.62);margin:6px 0 10px;min-height:36px}
.mega__i{display:block;font:600 14.5px/1.35 "Instrument Sans",system-ui,sans-serif;padding:8px 0;border-top:1px solid rgba(234,245,250,.16);color:#eaf5fa;text-decoration:none}
.mega__i:hover,.mega__h:hover{color:#9fe8f8}
.mega__foot{display:flex;gap:26px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(234,245,250,.24)}
.mega__foot a{font:600 13.5px/1.2 "Instrument Sans",system-ui,sans-serif;color:#19c3e6;text-decoration:none}
.mnav__h{font:900 15px/1 "Big Shoulders Display",sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#19c3e6;margin:14px 0 2px}
@media (max-width:900px){.site-head .bar{padding:0 20px}}

/* ---------- footer, from the board ---------- */
.site-foot{padding:40px 0 30px}
.site-foot > .wrap{max-width:1440px;padding:0 56px}
.site-foot .grid{grid-template-columns:1.1fr 1.5fr;gap:48px}
.site-foot .brand{gap:10px}
.site-foot .wordmark{font-size:24px}
.foot-meta{font:400 13.5px/1.7 "Instrument Sans",system-ui,sans-serif;color:rgba(234,245,250,.72);margin-top:14px}
.foot-meta a{font-weight:400;color:rgba(234,245,250,.72)}
.foot-meta a[href^="tel:"]{font-weight:600;color:#eaf5fa}
.fam-h{font:600 10.5px/1 "Instrument Sans",sans-serif;letter-spacing:.14em;color:rgba(234,245,250,.5);margin:0 0 12px}
.fam{gap:14px}
.fam a{gap:9px;min-height:0;align-items:center}
.fam b{font-size:13px}
.fam span span{font-size:11.5px;color:rgba(234,245,250,.55)}
.legal{margin-top:30px;padding-top:16px;font-size:12px}
@media (max-width:900px){.site-foot > .wrap{padding:0 20px}}
html{overflow-x:clip}
.site-head .nav-link.is-section,.site-head .nav-link[aria-current="page"]{color:#19c3e6;box-shadow:inset 0 -2px 0 #19c3e6}
.mk label.mk-lbl{display:block;margin:0;font:600 10.5px/normal "Instrument Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.mk .field input,.mk .field textarea{min-height:0;line-height:1.4}
@media (max-width:900px){.site-foot .grid{grid-template-columns:1fr;gap:28px}.fam{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .mk-band > [style^="position:relative"]:has(> [style*="position:absolute;right:56px"]){display:flex;flex-direction:column}
  .mk [style*="position:absolute;right:56px"]{position:relative!important;right:auto!important;top:auto!important;width:auto!important;order:2;margin-top:28px}
}