/* creoMinimal – theme look: layout, header, hero, menu, footer, typography, forms, blog.
   Mobile-first: the rules without a media query are the phone layout; min-width queries add the tablet (600px) and
   desktop (901px) layout. Tap targets are at least 44px high, form fields 16px (so phones don't zoom in on them). */
:root{--accent:#0b6b83;--muted:#666;--bg:#f7f9fa;--maxw:1100px;--gutter:16px}
*{box-sizing:border-box}
/* min-height, not height: a body capped at the window height would let the sticky header scroll away with it */
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100%;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;line-height:1.5;color:#222;margin:0;background:var(--bg)}
.container{max-width:var(--maxw);margin:0 auto;padding:var(--gutter)}
img,video{max-width:100%;height:auto}
@media (min-width:600px){:root{--gutter:24px}}


/* Header – sticky-smart / sticky-always / sticky-off come from masterControl → Pages → Navigation */
header{background:#fff;position:sticky;top:0;z-index:10;transition:transform .25s ease,box-shadow .25s ease}
.sticky-off header{position:relative}
.is-scrolled header{box-shadow:0 2px 14px rgba(0,0,0,.08)}
.sticky-off.is-scrolled header{box-shadow:none}
.header-hidden header{transform:translateY(-100%);box-shadow:none}
/* Links to #comments, #poll-… etc. land below the header (--header-h is measured by js/site.js) */
html:has(body.sticky-always),html:has(body.sticky-smart){scroll-padding-top:calc(var(--header-h,0px) + 12px)}
@media (prefers-reduced-motion:reduce){header{transition:none}}
/* Only top/bottom padding here: the sides come from .container */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.logo{flex:none;width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#7fc1cc);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.brand-text{min-width:0}
.brand-text .brand-name{font-weight:800;color:#000}
.brand-text .brand-sub{font-size:13px;color:var(--muted)}
@media (min-width:600px){.logo{width:56px;height:56px}.brand{gap:14px}}
@media (min-width:901px){.topbar{flex-wrap:nowrap;padding-top:18px;padding-bottom:18px}}

/* Menu: on phones and tablets a full-width list behind the ☰ button, from 901px a row */
.nav-toggle{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:2px solid var(--accent);color:var(--accent);border-radius:8px;font-size:20px;line-height:1;padding:0;cursor:pointer}
nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:6px 0 4px}
nav.open{display:flex}
nav ul{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}
nav a{color:var(--muted);text-decoration:none;font-weight:600}
nav a{transition:color .16s,background-color .16s}
nav a:hover{color:var(--accent)}
nav a.active{color:var(--accent)}
nav li a{display:flex;align-items:center;min-height:44px;padding:0 8px;border-top:1px solid #eef2f3;border-radius:6px}
nav li a:hover,nav li a:active{background:#f1f6f7}
nav.open{animation:creo-menu .2s cubic-bezier(.2,.7,.2,1) both}
/* A long open menu (many products) scrolls inside itself: the sticky header can be taller than the screen otherwise */
nav.open{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
@keyframes creo-menu{from{opacity:0;transform:translateY(-6px)}}
.nav-toggle[aria-expanded="true"]{background:var(--accent);color:#fff}
.nav-toggle:active{transform:scale(.94)}

/* Menu groups (masterControl → Menu): a button that opens a submenu.
   Phones / tablets: a full-width row with ▾ that expands its links inside the ☰ menu. */
.sub-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0 8px;border:0;border-top:1px solid #eef2f3;border-radius:6px;background:none;color:var(--muted);font:inherit;font-weight:600;text-align:left;cursor:pointer;transition:color .16s,background-color .16s}
.sub-toggle:hover{color:var(--accent);background:#f1f6f7}
.has-sub.is-active > .sub-toggle{color:var(--accent)}
.sub-caret{width:8px;height:8px;margin:0 4px 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.2,.7,.2,1);flex:none}
.has-sub.is-open > .sub-toggle .sub-caret{transform:translateY(3px) rotate(-135deg)}
.submenu{display:none;list-style:none;margin:0 0 6px 10px;padding:0 0 0 10px;border-left:2px solid #e3eef1}
.has-sub.is-open > .submenu{display:block;animation:creo-menu .2s cubic-bezier(.2,.7,.2,1) both}
.submenu li a{border-top:0}
.language-select{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:14px;border-top:1px solid #eef2f3}
.language-select a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--muted);text-decoration:none;font-weight:600}
.language-select a.active{color:var(--accent)}
@media (min-width:901px){
.nav-toggle{display:none}
nav,nav.open{display:flex;width:auto;flex-direction:row;align-items:center;gap:24px;padding:0}
nav ul{flex-direction:row;gap:18px}
nav li a{display:inline;min-height:0;padding:0;border-top:0;position:relative;border-radius:0}
nav li a:hover{background:none}
nav.open{animation:none;max-height:none;overflow:visible}
/* Desktop menu: an underline grows from the middle on hover and stays under the current page */
nav li a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
nav li a:hover::after,nav li a.active::after{transform:scaleX(1)}

/* Desktop: the submenu drops down on hover or click; long lists use 2 or 3 columns. Only opacity / transform animate
   (no layout shift); a short delay before closing forgives a pointer slipping off the edge. */
.has-sub{position:relative}
.sub-toggle{display:inline-flex;width:auto;min-height:0;padding:0;border:0;border-radius:0;background:none}
.sub-toggle:hover{background:none}
/* Bridge over the gap between the button and the panel, so moving the pointer down does not close it */
.has-sub::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:18px}
.submenu{display:block;position:absolute;left:-14px;top:calc(100% + 16px);z-index:30;min-width:230px;max-width:min(680px,90vw);max-height:70vh;overflow:auto;margin:0;padding:8px;border:0;border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease .12s,transform .18s ease .12s,visibility 0s linear .32s}
.has-sub:nth-last-child(-n+2) > .submenu{left:auto;right:-14px}
.has-sub:hover > .submenu,.has-sub.is-open > .submenu{opacity:1;visibility:visible;transform:none;transition-delay:0s;animation:none}
.submenu.cols-2{columns:2;column-gap:4px;min-width:460px}
.submenu.cols-3{columns:3;column-gap:4px;min-width:640px}
.submenu li{break-inside:avoid}
nav .submenu li a{display:block;padding:9px 12px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;font-weight:500}
nav .submenu li a:hover,nav .submenu li a:focus-visible{background:#f1f6f7;color:var(--accent)}
nav .submenu li a.active{color:var(--accent);font-weight:700}
nav .submenu li a::after{display:none}
.has-sub > .sub-toggle{position:relative}
.has-sub > .sub-toggle::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.has-sub:hover > .sub-toggle::after,.has-sub.is-active > .sub-toggle::after,.has-sub.is-open > .sub-toggle::after{transform:scaleX(1)}
.sub-caret{margin:0 0 4px 2px}
.language-select{border-top:0;gap:6px}
.language-select a{min-width:0;min-height:0}
}


/* Hero with constrained background: content height on phones, fixed height from tablets up */
.hero-wrapper{background:#fff}
.hero{position:relative;max-width:var(--maxw);margin:0 auto;background:linear-gradient(135deg,#0b6b83 0%,#2a8ac7 55%,#7fc1cc 100%);min-height:320px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45)}
.hero .container{position:relative;z-index:2;width:100%;padding-top:28px;padding-bottom:28px}
.hero-inner{background:rgba(255,255,255,0.9);padding:22px;border-radius:12px;color:#222}
@media (min-width:600px){.hero{min-height:400px;border-radius:8px}.hero-inner{padding:36px}}
@media (min-width:901px){.hero{height:480px}}


/* Hero text */
.eyebrow{color:var(--accent);font-weight:700;margin-bottom:8px}
h1{font-size:24px;line-height:1.25;margin:0 0 10px;overflow-wrap:break-word}
@media (min-width:600px){h1{font-size:28px}}
p.lead{margin:0;color:#333}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:0;border-radius:8px;text-decoration:none;font-weight:700;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{border:2px solid var(--accent);color:var(--accent);background:transparent}
.btn-ghost:hover{background:var(--accent);color:#fff}
.btn-primary:hover{background:#09596d}


/* Services */
.grid{display:grid;grid-template-columns:1fr;gap:18px;margin:36px 0}
.card{background:#fff;padding:20px;border-radius:10px;min-height:120px}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
@media (min-width:521px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:901px){.grid{grid-template-columns:repeat(3,1fr)}}


/* About / Footer */
.split{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:36px}
@media (min-width:901px){.split{grid-template-columns:1fr 360px}}
footer .foot-grid{display:flex;justify-content:space-between;align-items:center}
.muted-link{color:var(--muted);text-decoration:none;margin-right:12px}

footer{text-align:center;font-size:.9em;background:#fff;border-top:1px solid #e6eef0;margin:3em auto 0 auto;max-width:var(--maxw);padding:20px var(--gutter)}
footer p{margin:10px 0}
footer a{display:inline-block;padding:10px 4px;color:#333;font-weight:normal;text-decoration:underline}
footer a{transition:color .16s}
footer a:hover{color:var(--accent)}
footer .footer-credit{font-size:.85em;color:#666}
footer .footer-credit a{padding:6px 2px}
@media (min-width:600px){footer{border-radius:8px}}

/* Footer links: privacy policy and cookie settings side by side */
.footer-privacy{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}

/* --- Content --- */
.content-area{background:#fff;border-radius:10px;padding:20px 18px;overflow-wrap:break-word}
.content-area img{max-width:100%;height:auto}
/* Wide content (tables, code) scrolls inside itself instead of widening the page */
.content-area table{display:block;max-width:100%;overflow-x:auto}
.content-area iframe{max-width:100%}
@media (min-width:600px){.content-area{padding:28px}}
.sections{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:901px){.sections{grid-template-columns:repeat(3,1fr)}}
.section-number{display:inline-block;font-weight:800;font-size:14px;color:#fff;background:var(--accent);border-radius:6px;padding:2px 8px;margin-bottom:8px}

.note,.error{padding:12px 16px;border-radius:8px}
.note{background:#e6f4ea;color:#1e5b2f}
.error{background:#fdecea;color:#8a1f11}

.contact-form fieldset{border:1px solid #e6eef0;border-radius:8px;margin:0 0 18px;padding:14px}
.contact-form label{display:block;margin-bottom:12px;font-weight:600}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid #7a949d;border-radius:6px;font:inherit;font-size:16px}
.form-actions{display:flex;flex-wrap:wrap;gap:12px}
.form-actions .btn{border:0;cursor:pointer;font:inherit;font-weight:700}
.form-actions .btn-ghost{border:2px solid var(--accent)}
@media (min-width:600px){.contact-form fieldset{padding:16px}}

.post-card{padding:18px 0;border-bottom:1px solid #e6eef0}
.post-card:last-of-type{border-bottom:0}
.post-card h2{margin:4px 0 8px}
.post-card h2 a{color:#222;text-decoration:none;transition:color .16s}
.post-card h2 a:hover{color:var(--accent)}
.read-more{transition:transform .16s cubic-bezier(.2,.7,.2,1)}
.read-more:hover{transform:translateX(3px)}
.post-card time,.post-meta{color:var(--muted);font-size:14px}
.post-meta a,.read-more{color:var(--accent);font-weight:600;text-decoration:none}
.read-more,.post-meta a{display:inline-block;padding:10px 0}
.post-body{font-size:17px}
.post-body pre{background:#f4f6f7;padding:14px;border-radius:6px;overflow:auto}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.pager a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;text-decoration:none}

.error-page{text-align:center;padding:40px 0}
.error-code{font-size:64px;font-weight:800;color:var(--accent);margin:0}


/* Background video inside this theme's hero / behind its pages (the video layer itself is in css/core.css) */
body.has-bg-full{background:#16323a}
body.has-bg-full main{position:relative}
main:focus{outline:none}
.hero.has-video{background:#16323a}