/* Cerberus Blue Systems — shared site chrome (header, footer, base reset)
   Loaded on every page via <link rel="stylesheet" href="/assets/css/site.css">.
   Keep this file the single source of truth for nav/footer styling —
   never duplicate these rules inside a page's own <style> block. */

:root{
  --cb-green:#15e49a;
  --cb-teal:#11394b;
  --cb-dark:#0d2e3d;
  --cb-darkest:#0a2535;
  --cb-white:#ffffff;
  --cb-mint:#65f2c6;
  --cb-header-h:80px;
}

/* Self-hosted, matches the live site's own font file for these three
   footer headings - not a Google Fonts weight. */
@font-face{
  font-family:'Montserrat Alternates Bold';
  src:url('/assets/fonts/montserrat-alternates-bold.woff2') format('woff2');
  font-display:swap;
}

/* Montserrat and Montserrat Alternates, self-hosted (latin subset: covers
   German umlauts and ß). Used to be loaded from fonts.googleapis.com, which
   sent every visitor's IP to Google — not compatible with "hosted in the EU". */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/assets/fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat Alternates';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/montserrat-alternates-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat Alternates';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/montserrat-alternates-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat Alternates';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/montserrat-alternates-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat Alternates';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/montserrat-alternates-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ── Announcement bar ────────────────────────────────────────────────
   Global chrome on every page; scrolls away with the page. */
.announce-bar{
  background:var(--cb-green);color:var(--cb-dark);
  text-align:center;padding:10px 20px;
  font-family:'Montserrat Alternates',sans-serif;font-weight:500;font-size:14px;
  line-height:1.4;
}
.announce-bar span{white-space:nowrap;}
@media(max-width:600px){
  .announce-bar{font-size:12px;padding:8px 16px;}
}

/* ── Header v7 ─────────────────────────────────────────────────────────
   The announcement bar scrolls away; only the header stays. Desktop: logo
   left, the links in a quiet capsule in the centre, the current page as a
   filled green pill. On scroll the header gets a little flatter and a
   shadow. Phones: a full-screen menu with large links. */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(10,37,53,0.97);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:box-shadow 0.25s ease;
}
@supports (backdrop-filter:blur(10px)){
  .site-header{background:rgba(10,37,53,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
}
.site-header.is-scrolled{box-shadow:0 8px 28px rgba(0,0,0,0.28);}
/* 86px (not 76px): the mark's head-to-cap lift pulls its bubble accent above
   the wordmark's own top edge, so the row needs more headroom than the
   wordmark's height alone suggests — at 76px the bubble sat only 5-8px under
   the header's top edge. */
.site-header-inner{
  max-width:1280px;margin:0 auto;padding:0 40px;height:86px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  transition:height 0.25s ease;
}
.site-header.is-scrolled .site-header-inner{height:72px;}
/* Logo lockup: the supplied artwork, split into the mark and the two-line
   wordmark so the bar can carry a horizontal version of the stacked original
   (assets/img/logo-stacked*.svg keeps the original as delivered). Sizes are
   driven by legibility of the wordmark: its cap height is 0.37 x its box, so
   38px box = 14px caps in the header, 32px = 12px in the footer. */
.site-logo{justify-self:start;display:flex;align-items:flex-start;gap:12px;text-decoration:none;}
.site-logo-mark{
  --h:50px;height:var(--h);width:auto;display:block;transition:height 0.25s ease,margin-top 0.25s ease;
  margin-top:calc(var(--h) * -0.2154);
}
.site-logo-word{height:38px;width:auto;display:block;transition:height 0.25s ease;}
.site-header.is-scrolled .site-logo-mark{--h:43px;}
.site-header.is-scrolled .site-logo-word{height:33px;}
.site-nav{justify-self:center;}
.site-nav-list{
  list-style:none;display:flex;gap:4px;padding:5px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:100px;
}
.site-nav-list a{
  display:block;padding:9px 20px;border-radius:100px;
  font-family:'Montserrat Alternates',sans-serif;font-weight:500;font-size:15px;
  color:var(--cb-white);text-decoration:none;white-space:nowrap;
  transition:background 0.2s,color 0.2s;
}
.site-nav-list a:hover{background:rgba(255,255,255,0.1);}
.site-nav-list a.active{background:var(--cb-green);color:var(--cb-darkest);font-weight:600;}
.site-nav-extra{display:none;}
/* The quote is what earns revenue, so the action sits in the bar itself (header v18, 21 Oct 2026,
   owners: "the Get a quote button is too little visible and accessible"): a filled green pill at the
   right end of the sticky header from 1100px up, where the logo, the capsule and the pill fit side by
   side. Below that the floating button (.quote-fab) does the job on its own, and the phone menu
   carries a full-width button. Hidden on /quote (quote.html), the page it leads to. */
.site-cta{display:none;}
@media(min-width:1280px){
  .site-cta{display:inline-flex;grid-column:3;justify-self:end;align-items:center;gap:10px;min-height:46px;padding:0 26px 0 20px;border-radius:100px;
    background:var(--cb-green);color:var(--cb-darkest);font-family:'Montserrat Alternates',sans-serif;font-size:15px;font-weight:600;line-height:1;
    text-decoration:none;white-space:nowrap;box-shadow:0 8px 20px rgba(21,228,154,0.22);transition:background 0.2s,transform 0.2s,box-shadow 0.2s;}
  .site-cta svg{width:22px;height:22px;flex:none;}
  .site-cta:hover{background:#65f2c6;transform:translateY(-1px);box-shadow:0 12px 24px rgba(21,228,154,0.3);}
  .site-cta:focus-visible{outline:3px solid #fff;outline-offset:3px;}
}
/* 22 Oct 2026 (owners: "Get a quote is hardly seen, a friend did not see it differs from Contact"):
   from 1280px the green quote pill sits right next to the capsule (the pair is centred) and the floating
   button steps aside; "Contact" stays in the capsule (the owners: unsure whether people would look for it
   in the footer; the assistant: the nav is where B2B visitors look). Below 1280px the floating button
   does the job. */
@media(min-width:1280px){
  .site-header-inner{grid-template-columns:auto 1fr auto auto;gap:0;}
  .site-logo{grid-column:1;}
  .site-nav{grid-column:3;justify-self:end;}
  .site-cta{grid-column:4;justify-self:end;margin-left:12px;}
  .site-nav-list a{padding:9px 14px;}
  .site-cta{padding:0 22px 0 18px;margin-left:10px;}
}
/* between the menu button (860px) and the pill (1280px) the capsule keeps 40px from the logo */
@media(min-width:861px) and (max-width:1279px){.site-header-inner{gap:40px;}}
.site-social{display:flex;align-items:center;gap:16px;}
.site-social a{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;color:var(--cb-white);opacity:0.8;transition:opacity 0.2s,color 0.2s;
}
.site-social a:hover{opacity:1;color:var(--cb-green);}
.site-social svg{width:18px;height:18px;}
.site-menu-btn{
  display:none;justify-self:end;background:none;border:none;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;position:relative;
}
.site-menu-btn span,.site-menu-btn span::before,.site-menu-btn span::after{
  content:'';display:block;position:absolute;width:22px;height:2px;border-radius:2px;background:var(--cb-white);
  transition:transform 0.25s ease,background 0.2s;
}
.site-menu-btn span::before{top:-7px;}
.site-menu-btn span::after{top:7px;}
.site-menu-btn[aria-expanded="true"] span{background:transparent;}
.site-menu-btn[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);}
.site-menu-btn[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}

/* the one-line wordmark is wide: step it down before it crowds the nav */
@media(max-width:1150px){
  .site-logo{gap:10px;}
  .site-logo-mark,.site-header.is-scrolled .site-logo-mark{--h:45px;}
  .site-logo-word,.site-header.is-scrolled .site-logo-word{height:35px;}
  .site-nav-list a{padding:9px 16px;}
}
/* The menu button takes over at 860px, not 768px: the five-item capsule needs about
   830px beside the logo, so between 769 and 830px it used to run out of the header.
   nav.js uses the same number. */
@media(max-width:860px){
  /* backdrop-filter would make the header the containing block for the
     fixed menu below, squeezing it into the header's 64px */
  .site-header{background:rgba(10,37,53,0.98);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .site-header-inner{height:72px;padding:0 30px 0 40px;grid-template-columns:1fr auto;}
  .site-header.is-scrolled .site-header-inner{height:66px;}
  .site-logo{gap:10px;}
  .site-logo-mark,.site-header.is-scrolled .site-logo-mark{--h:45px;}
  .site-logo-word,.site-header.is-scrolled .site-logo-word{height:34px;}
  .site-menu-btn{display:flex;}
  /* full-screen menu under the header; --menu-top is set by nav.js */
  .site-nav{
    position:fixed;left:0;right:0;top:var(--menu-top,64px);bottom:0;z-index:999;justify-self:stretch;
    display:flex;flex-direction:column;justify-content:space-between;
    background:var(--cb-darkest);padding:16px 24px 32px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity 0.2s ease,transform 0.2s ease,visibility 0s linear 0.2s;
  }
  .site-nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity 0.2s ease,transform 0.2s ease;}
  .site-nav-list{flex-direction:column;gap:0;padding:0;background:none;border:none;border-radius:0;}
  .site-nav-list a{
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 4px;border-radius:0;font-size:26px;font-weight:600;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .site-nav-list a::after{content:'→';font-size:22px;color:var(--cb-green);transition:transform 0.2s;}
  .site-nav-list a:hover{background:none;}
  .site-nav-list a:hover::after{transform:translateX(4px);}
  .site-nav-list a.active{background:none;color:var(--cb-green);}
  .site-nav-extra{display:flex;flex-direction:column;gap:14px;padding-top:32px;}
  .site-nav-cta{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;margin-bottom:10px;border-radius:100px;background:var(--cb-green);color:var(--cb-darkest);
    font-family:'Montserrat Alternates',sans-serif;font-size:18px;font-weight:600;text-decoration:none;}
  .site-nav-cta svg{width:26px;height:26px;flex:none;}
  .site-nav-cta:focus-visible{outline:3px solid #fff;outline-offset:3px;}
  .site-nav-mail{display:inline-block;padding:6px 0;font-family:'Montserrat',sans-serif;font-size:16px;color:var(--cb-white);text-decoration:underline;}
  html.menu-open{overflow:hidden;}
}
/* phones: 20px from the edge, like every section (the menu button's bars sit 11px inside its box) */
@media(max-width:600px){
  .site-header-inner{padding:0 9px 0 20px;}
}
@media(max-width:380px){
  .site-logo{gap:9px;}
  .site-logo-mark,.site-header.is-scrolled .site-logo-mark{--h:43px;}
  .site-logo-word,.site-header.is-scrolled .site-logo-word{height:33px;}
  .site-nav-list a{font-size:23px;padding:18px 4px;}
}

/* ── Footer ───────────────────────────────────────────────────────────
   Rebuilt from direct measurement of the live site (getBoundingClientRect
   + getComputedStyle on every element, desktop and mobile): three columns
   side by side (brand+legal / contact+social / form), no divider line
   anywhere, copyright as its own final row below the columns. The three
   headings ("cerberus blue systems", "contact", "send a request.") use the
   live site's own self-hosted "Montserrat Alternates Bold" font file at
   24px (20px on mobile) - not a Google Fonts weight, and not the same
   font as the rest of the footer's body text. */
/* The footer is the #contact target on every page, so keep it clear of the
   sticky header when jumped to. The nav links to "#contact" on the current
   page — "/#contact" sent every page back to the homepage, which made the
   active pill jump to "Home". */
.site-footer{background:var(--cb-green);color:var(--cb-teal);scroll-margin-top:88px;}

/* Credibility band: "Funded by" is a static, named group; "Partners" is a
   slow marquee so six logos do not crowd the band. Logos are a little
   smaller than the funders' and sized by height, so a wide wordmark and a
   square mark carry the same weight. */
.site-credits{background:var(--cb-white);border-top:1px solid #e3e9ec;}
.site-credits-inner{
  max-width:1280px;margin:0 auto;padding:48px 40px 44px;
}
.credits-label{
  font-family:'Montserrat Alternates',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--cb-teal);margin-bottom:22px;
}
.credits-logos{display:flex;align-items:center;flex-wrap:wrap;gap:28px 80px;}
.credits-logos a,.credits-set a,.credits-set .credits-static{display:block;border-radius:6px;flex:none;}
.credits-logos a:focus-visible,.credits-set a:focus-visible{outline:3px solid #0a6b4a;outline-offset:4px;}
.credits-logos img,.credits-set img{display:block;height:60px;width:auto;}
.credits-logos img{height:64px;}
.credits-logos img[src*="htw"]{height:72px;}.credits-logos img.credits-logo--wide{height:34px;}
.credits-logos img.credits-logo--exist{height:52px;}
.credits-set img{height:54px;}
.credits-set img.credits-logo--wide{height:36px;}   /* single-line wordmark */
.credits-set img.credits-logo--stack{height:58px;}  /* stacked Interreg block */
.credits-set img.credits-logo--band{height:50px;}   /* logo on its own colour band */

.credits-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  cursor:grab;touch-action:pan-y;
}
.credits-marquee.is-dragging{cursor:grabbing;}
.credits-marquee:focus-visible{outline:3px solid #0a6b4a;outline-offset:4px;border-radius:8px;}
.credits-track{display:flex;width:max-content;}
.credits-set{display:flex;align-items:center;gap:84px;padding-right:84px;}
.credits-set a,.credits-set img{-webkit-user-drag:none;user-select:none;}
@media(prefers-reduced-motion:reduce){
  /* no movement: a plain row the visitor scrolls (native touch/trackpad),
     second set hidden — credits-marquee.js bails out entirely in this mode */
  .credits-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;cursor:auto;touch-action:auto;}
  .credits-set[aria-hidden="true"]{display:none;}
}
.site-footer-inner{
  max-width:1280px;margin:0 auto;padding:64px 40px 40px;
}
.site-footer-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
}
.site-footer-heading{
  font-family:'Montserrat Alternates Bold',sans-serif;font-weight:400;font-size:24px;
  color:var(--cb-teal);margin-bottom:12px;
}
/* Footer brand: same horizontal lockup as the header in teal, one step
   smaller, with the legal links underneath. */
/* Sized up from the header's lockup: in the footer the logo carries the same
   visual weight as the bold column headings beside it ("contact",
   "send a request.") instead of reading as a thin, quiet line next to them. */
.site-footer-brand{display:flex;align-items:flex-start;gap:14px;margin-bottom:26px;}
.site-footer-mark{--h:58px;height:var(--h);width:auto;display:block;margin-top:calc(var(--h) * -0.2154);}
.site-footer-word{height:44px;width:auto;display:block;}
.site-footer-legal{display:flex;flex-wrap:wrap;gap:16px;}
.site-footer-legal a{
  padding:7px 0;margin:-7px 0;
  font-family:'Montserrat Alternates',sans-serif;font-size:14px;font-weight:700;
  color:var(--cb-teal);text-decoration:underline;
}
.site-footer-address{
  font-family:'Montserrat',sans-serif;font-size:14px;font-style:normal;line-height:1.65;
  color:var(--cb-teal);margin-bottom:14px;
}
.site-footer-col--contact a.site-footer-email{
  display:inline-block;font-family:'Montserrat Alternates',sans-serif;font-size:14px;
  color:var(--cb-teal);text-decoration:none;padding:7px 0;margin:-7px 0 9px;
}
.site-footer-col--contact .site-social{display:flex;gap:16px;}
.site-footer-copy{
  font-family:'Montserrat Alternates',sans-serif;font-size:14px;color:var(--cb-teal);
  margin-top:40px;
}
.site-footer .site-social a{width:24px;height:24px;color:var(--cb-teal);opacity:0.85;}
.site-footer .site-social a:hover{opacity:1;}

/* narrower than this, the funders and the marquee stop fitting side by side */
@media(max-width:768px){
  .site-footer-cols{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:600px){
  .site-credits-inner{padding:38px 20px 34px;}
  .credits-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;align-items:center;justify-items:start;}
  .credits-logos img{height:54px;}
  .credits-logos img[src*="htw"]{height:62px;}
  .credits-logos img.credits-logo--wide{height:30px;}
  .credits-logos img.credits-logo--exist{height:44px;}
  .credits-set{gap:56px;padding-right:56px;}
  .credits-set img{height:48px;}
  .credits-set img.credits-logo--wide{height:32px;}
  .credits-set img.credits-logo--stack{height:52px;}
  .credits-set img.credits-logo--band{height:44px;}
  .site-footer-inner{padding:48px 20px 32px;}
  .site-footer-heading{font-size:20px;}
  .site-footer-brand{gap:12px;margin-bottom:20px;}
  .site-footer-mark{--h:47px;}
  .site-footer-word{height:35px;}
  .site-footer-copy{margin-top:28px;}
}

/* "Hosted in the EU" trust badge. HTML + CSS, not an SVG image, so the text
   uses the site fonts (an SVG loaded via <img> cannot see the page's
   webfonts). Selectors are prefixed with "body" so section resets such as
   ".home-fn *{padding:0}" on the homepage cannot flatten the badge. The round mark is German flag | EU flag, a location signal next
   to the text, not an official seal. Only true once the site and platform
   actually run on the netcup server — see CLAUDE.md before using it. */
body .eu-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:100px;
  background:#e5faff;border:1px solid #b9e6f0;color:#0d2e3d;text-align:left;font-family:'Montserrat',sans-serif;}
body .eu-badge-icon{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;
  border:1.5px solid #fff;box-sizing:border-box;display:block;}
body .eu-badge-icon svg{width:100%;height:100%;display:block;}
body .eu-badge-text{display:flex;flex-direction:column;line-height:1.25;}
body .eu-badge-text strong{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;}
body .eu-badge-text span{font-size:12px;font-weight:500;}
body .eu-badge--dark{background:#0a2535;border-color:#15e49a;color:#fff;}

/* Awards band: the same strip on the homepage (after "Our product") and on /hydra
   (under the hero). A design award is a claim about the product, not the company, so
   it is not on /company. Light surface because two of the three badges are near-white
   or transparent and disappear without one. The lead-in sentence does the persuading:
   "won three awards" means nothing on its own, "independent, not us saying it" is the
   reason to care. iF's category is the "Design Talent Award", a student/early-career
   award, not the flagship iF Design Award, so neither copy nor alt text shortens it. */
body .awards{background:#fff;padding:36px 40px;border-bottom:1px solid #e3ebee;}
body .awards-inner{max-width:var(--awards-w,1200px);margin:0 auto;display:flex;align-items:center;gap:40px;}
body .awards-copy{font-family:'Montserrat',sans-serif;font-size:16px;line-height:1.5;color:#11394b;max-width:560px;margin:0;}
body .awards-logos{display:flex;align-items:center;gap:56px;flex:1;justify-content:flex-end;}
body .awards-logos img{display:block;width:auto;}
body .awards-logos img:nth-child(1),body .awards-logos img:nth-child(2){height:58px;}
body .awards-logos img:nth-child(3){height:94px;}
@media(max-width:1100px){
  body .awards-copy{text-wrap:balance;}
  body .awards-copy br{display:none;}
}
@media(max-width:768px){
  body .awards{padding:24px 40px;}
  body .awards-inner{flex-direction:column;align-items:flex-start;gap:16px;}
  body .awards-copy{font-size:15px;max-width:none;text-wrap:balance;}
  body .awards-copy br{display:none;}
  body .awards-logos{gap:28px;flex-wrap:wrap;justify-content:flex-start;}
  body .awards-logos img:nth-child(1),body .awards-logos img:nth-child(2){height:44px;}
  body .awards-logos img:nth-child(3){height:70px;}
}
@media(max-width:600px){body .awards{padding:24px 20px;}}

/* Floating "Get a quote" button (see _partials/quote-fab.html), shown below 1280px (from there
   the header carries the action). Bottom right, brand green, a soft shadow and no ring (21 Oct 2026,
   owners: "prominent, but it must not disturb scrolling, and no strange border"). While the page is
   scrolled down it collapses to its icon (nav.js adds .is-compact), scrolling up or the top of the page
   brings the words back; nav.js adds .is-hidden while the footer (contact form, credits) or an in-page
   quote button is on screen. The entrance runs once; animation-fill-mode is "backwards" only, because
   "both" would keep the end keyframe and override .is-hidden afterwards. */
body .quote-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:900;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px 0 18px;border-radius:100px;
  background:#15e49a;color:#0a2535;font-family:'Montserrat Alternates',sans-serif;font-size:16px;font-weight:600;line-height:1;text-decoration:none;
  box-shadow:0 8px 22px rgba(10,37,53,0.34);
  transition:transform 0.2s,box-shadow 0.2s,opacity 0.25s,visibility 0.25s,padding 0.25s,gap 0.25s;animation:quoteFabIn 0.6s ease-out 0.8s backwards;}
body .quote-fab svg{width:24px;height:24px;flex:none;}
body .quote-fab span{display:block;max-width:150px;overflow:hidden;white-space:nowrap;transition:max-width 0.25s ease,opacity 0.2s ease;}
body .quote-fab.is-compact{gap:0;padding:0 14px;}
body .quote-fab.is-compact span{max-width:0;opacity:0;}
body .quote-fab:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,37,53,0.4);}
body .quote-fab:focus-visible{outline:3px solid #0a2535;outline-offset:4px;}
body .quote-fab.is-hidden{opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;}
@keyframes quoteFabIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@media(max-width:600px){
  body .quote-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));height:48px;padding:0 20px 0 15px;font-size:15px;}
  body .quote-fab.is-compact{padding:0 12px;}
}
@media(prefers-reduced-motion:reduce){body .quote-fab{animation:none;}body .quote-fab,body .quote-fab span{transition:none;}}
/* from 1100px the bar itself carries "Get a quote" (.site-cta), so the floating button steps aside */
@media(min-width:1280px){body .quote-fab{display:none;}}