/* ================================================================
   WEBTHINK STANDALONE v0.2 - EDITABLE SOURCE (NOT MINIFIED)
   Main brand: #083b66 | Dark: #071d30 | Accent: #19a7ce
   ================================================================ */
:root{--brand:#083b66;--dark:#071d30;--accent:#19a7ce;--ink:#17212b;--muted:#687581;--line:#e6ebef;--soft:#f5f8fa;--white:#fff;--max:1180px;--shadow:0 18px 55px rgba(7,29,48,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--white);line-height:1.6}img{max-width:100%}a{color:inherit}.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

/* HEADER */
.site-header{height:80px;position:fixed;inset:0 0 auto;z-index:50;transition:.3s;background:rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.16)}.site-header.scrolled{background:rgba(255,255,255,.96);box-shadow:0 8px 30px rgba(0,0,0,.08);backdrop-filter:blur(14px)}.header-inner{width:min(var(--max),calc(100% - 48px));height:100%;margin:auto;display:flex;align-items:center}.brand img{display:block;width:58px;height:58px;object-fit:contain}.main-nav{margin-left:auto;display:flex;align-items:center;gap:27px}.main-nav a{text-decoration:none;color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}.scrolled .main-nav a{color:var(--ink)}.main-nav a:hover{color:var(--accent)}.language{border:1px solid currentColor;padding:5px 9px;border-radius:20px}.nav-toggle{display:none;margin-left:auto;border:0;background:transparent;padding:8px}.nav-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px}.scrolled .nav-toggle span{background:var(--ink)}

/* HERO */
.hero{min-height:760px;height:100vh;position:relative;overflow:hidden;color:#fff}.hero video,.hero-overlay{position:absolute;inset:0;width:100%;height:100%}.hero video{object-fit:cover}.hero-overlay{background:linear-gradient(90deg,rgba(3,19,32,.78),rgba(3,19,32,.28) 62%,rgba(3,19,32,.12))}.hero-inner{height:100%;position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;padding-top:70px}.hero-copy{max-width:720px}.eyebrow,.section-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--accent);margin-bottom:13px}.hero h1{font-size:clamp(42px,5.5vw,72px);line-height:1.04;letter-spacing:-.035em;margin:0 0 24px}.hero p{font-size:21px;margin:0 0 20px;color:#e6edf2}.hero-mark{width:min(100%,450px);justify-self:end;filter:drop-shadow(0 20px 30px rgba(0,0,0,.18))}.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:13px 24px;border-radius:7px;font-weight:700;transition:.25s}.btn:hover{transform:translateY(-2px);background:#0a4b82}.scroll-cue{position:absolute;z-index:3;bottom:24px;left:50%;font-size:34px;text-decoration:none;color:#fff;animation:bob 1.8s infinite}@keyframes bob{50%{transform:translateY(7px)}}

/* GENERAL SECTIONS */
.section{padding:100px 0}.section h2{font-size:clamp(34px,4vw,48px);line-height:1.1;letter-spacing:-.025em;color:var(--brand);margin:0 0 24px}.section-heading{text-align:center;max-width:700px;margin:0 auto 48px}.section-heading h2{margin-bottom:10px}.section-heading p{color:var(--muted);margin:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.wide{display:block;width:100%;border-radius:12px}.lead{font-size:22px;color:#42505c}.alt{background:var(--soft)}

/* SERVICES */
.services{padding-top:30px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.service-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(7,29,48,.04);transition:.3s}.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.service-image{height:145px;background-size:cover;background-position:center}.service-copy{padding:22px}.service-card h3{font-size:18px;line-height:1.25;color:var(--brand);margin:0 0 10px}.service-card p{font-size:14px;color:var(--muted);margin:0}

/* PORTFOLIO */
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.portfolio-card{position:relative;height:260px;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(7,29,48,.06);text-decoration:none}.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s}.portfolio-card:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(3,19,32,.9))}.portfolio-card span{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;color:#fff;display:flex;flex-direction:column}.portfolio-card strong{font-size:17px}.portfolio-card small{opacity:.8;margin-top:5px}.portfolio-card:hover img{transform:scale(1.06)}

/* APPS */
.apps-section{background:#fff}.app-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.app-card{text-align:center;border:1px solid var(--line);border-radius:14px;padding:28px 18px;background:#fff;transition:.3s}.app-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.app-card img{width:100%;height:105px;object-fit:contain}.app-card h3{font-size:17px;line-height:1.3;color:var(--brand);min-height:44px}.app-card a{font-size:13px;color:var(--accent);font-weight:700;text-decoration:none}

/* CONTACT + FOOTER */
.contact{position:relative;text-align:center;color:#fff;background:url('../images/contactback.jpg') center/cover no-repeat}.contact-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(7,29,48,.94),rgba(8,59,102,.86))}.contact-inner{position:relative}.contact h2{color:#fff}.contact p{font-size:19px}.section-kicker.light{color:#8bdcf0}.btn-light{background:#fff;color:var(--brand)}.site-footer{background:#061521;color:#b8c3cc;text-align:center;padding:34px 20px;font-size:13px}.site-footer div{display:flex;justify-content:center;align-items:center;gap:10px;color:#fff}.site-footer img{width:35px;height:35px}.site-footer p{margin:8px 0 0}

/* SCROLL ANIMATION */
.reveal{opacity:1;transform:none}
.animations-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.animations-ready .reveal.visible{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:1050px){.service-grid,.portfolio-grid{grid-template-columns:repeat(2,1fr)}.app-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){html{scroll-padding-top:66px}.container,.header-inner{width:min(100% - 32px,var(--max))}.site-header{height:66px;background:rgba(7,29,48,.72)}.site-header.scrolled{background:rgba(255,255,255,.97)}.brand img{width:48px;height:48px}.nav-toggle{display:block}.main-nav{display:none;position:absolute;top:66px;left:0;right:0;margin:0;padding:18px 24px;background:#fff;flex-direction:column;align-items:flex-start;gap:14px;box-shadow:0 15px 25px rgba(0,0,0,.12)}.main-nav.open{display:flex}.main-nav a,.site-header:not(.scrolled) .main-nav a{color:var(--ink)}.hero{height:auto;min-height:760px}.hero-inner{grid-template-columns:1fr;text-align:center;gap:30px;padding:120px 0 65px}.hero h1{font-size:42px}.hero-mark{width:270px;justify-self:center;order:-1}.two{grid-template-columns:1fr;gap:35px}.section{padding:70px 0}.services{padding-top:10px}.app-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.hero h1{font-size:36px}.hero p{font-size:18px}.service-grid,.portfolio-grid,.app-grid{grid-template-columns:1fr}.portfolio-card{height:230px}.section h2{font-size:34px}.lead{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll-cue{animation:none}}

/* ================================================================
   WEBTHINK 2026 BRAND REFRESH - v0.3
   Logo + Manrope typography + refined header / hero / footer
   ================================================================ */

body {
  font-family: "Manrope", Arial, Helvetica, sans-serif;
}

.site-header {
  height: 88px;
  background: linear-gradient(180deg, rgba(3, 18, 31, 0.64), rgba(3, 18, 31, 0.18));
}

.header-inner {
  width: min(1240px, calc(100% - 48px));
}

.brand {
  display: flex;
  align-items: center;
  height: 100%;
}

.brand img {
  width: 205px;
  height: 70px;
  object-fit: contain;
  object-position: left center;
}

.main-nav a {
  font-family: "Manrope", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero-inner {
  grid-template-columns: 1.05fr 0.95fr;
}

.hero h1 {
  font-weight: 800;
  letter-spacing: -0.045em;
}

.hero p {
  font-weight: 500;
}

.hero-mark {
  width: min(100%, 590px);
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.25));
}

.section h2 {
  font-weight: 800;
  letter-spacing: -0.035em;
}

.btn {
  border-radius: 10px;
}

.service-card,
.app-card,
.portfolio-card {
  border-radius: 18px;
}

.site-footer {
  padding: 38px 20px 32px;
}

.site-footer .footer-brand {
  display: flex;
  justify-content: center;
}

.site-footer .footer-brand img {
  width: 230px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

.site-footer p {
  margin-top: 12px;
}

@media (max-width: 800px) {
  .site-header {
    height: 72px;
  }

  .brand img {
    width: 155px;
    height: 58px;
  }

  .main-nav {
    top: 72px;
  }

  .hero-mark {
    width: min(90vw, 420px);
  }
}

/* ================================================================
   WEBTHINK v0.4 — HORIZONTAL BRAND + CLEANER HERO
   Human-editable overrides. Keep these at the end of the stylesheet.
   ================================================================ */

/* Horizontal logo is assembled from the brand icon + live text.
   This keeps it sharp at every size and easy to edit. */
.brand-horizontal {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  line-height: 1;
}

.brand-horizontal .brand-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-wording {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-name {
  display: block;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -1.5px;
  white-space: nowrap;
}

.brand-name b { color: #ffffff; font-weight: 800; }
.brand-name strong { color: #1597f2; font-weight: 800; }
.brand-tagline {
  margin-top: 5px;
  color: rgba(255,255,255,.92);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .30em;
  white-space: nowrap;
}

.site-header.scrolled .brand-name b { color: #082f53; }
.site-header.scrolled .brand-tagline { color: #536372; }

/* Cleaner hero: the brand belongs in the header; the hero sells the service. */
.hero-inner.hero-single {
  display: flex;
  align-items: center;
  padding-top: 88px;
}
.hero-single .hero-copy { max-width: 850px; }
.hero-single .hero-copy::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 25px;
  border-radius: 10px;
  background: linear-gradient(90deg,#1597f2,#ffbf00);
}
.hero-single h1 { max-width: 900px; }
.hero-single p { max-width: 690px; }
.hero-actions { display:flex; gap:12px; align-items:center; margin-top:28px; }
.btn-ghost { background:transparent; border:1px solid rgba(255,255,255,.58); }
.btn-ghost:hover { background:rgba(255,255,255,.10); }

/* Header balance */
.site-header { height: 82px; }
.header-inner { width:min(1240px,calc(100% - 48px)); }
.main-nav { gap:25px; }

/* Footer uses the same horizontal identity. */
.site-footer .footer-brand { display:inline-flex; margin-bottom:8px; }
.site-footer .brand-icon { width:50px; height:50px; }
.site-footer .brand-name { font-size:27px; }

@media (max-width: 800px) {
  .site-header { height:70px; }
  .brand-horizontal { gap:8px; }
  .brand-horizontal .brand-icon { width:43px; height:43px; }
  .brand-name { font-size:23px; letter-spacing:-1.1px; }
  .brand-tagline { font-size:6px; letter-spacing:.24em; margin-top:4px; }
  .main-nav { top:70px; }
  .hero-inner.hero-single { padding-top:105px; text-align:left; }
  .hero-single .hero-copy::before { margin-left:0; }
  .hero-actions { flex-wrap:wrap; }
}

@media (max-width: 430px) {
  .brand-name { font-size:21px; }
  .brand-tagline { font-size:5.4px; }
  .brand-horizontal .brand-icon { width:40px; height:40px; }
  .hero-actions .btn { width:100%; text-align:center; }
}


/* ================================================================
   WEBTHINK v0.5 — HERO VERTICAL LOGO + LARGER NAVIGATION
   ================================================================ */

/* Slightly larger desktop navigation for easier reading. */
.main-nav a {
  font-size: 15px;
  font-weight: 700;
}

/* Restore a two-column hero: message left, vertical brand right. */
.hero-inner.hero-single {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 58px;
  align-items: center;
}

.hero-brand {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-brand img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 38px rgba(0,0,0,.28));
}

@media (max-width: 1000px) {
  .hero-inner.hero-single {
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
    gap: 30px;
  }
  .hero-brand img { width: min(100%, 390px); }
}

@media (max-width: 800px) {
  .main-nav a { font-size: 16px; }
  .hero-inner.hero-single {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding-top: 110px;
    text-align: center;
  }
  .hero-single .hero-copy::before { margin-inline: auto; }
  .hero-brand { justify-content: center; order: 2; }
  .hero-brand img { width: min(72vw, 300px); }
  .hero-actions { justify-content: center; }
}

/* v0.6.1 mobile navigation feedback */
.nav-toggle span { transition: transform .22s ease, opacity .22s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ================================================================
   WEBTHINK v0.6.2 — APPLICATION GRID HOTFIX
   App cards never depend on JavaScript/reveal animations.
   ================================================================ */
.apps-section .app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.apps-section .app-card {
  display: flex;
  min-width: 0;
  min-height: 320px;
  padding: 30px 24px 25px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  text-decoration: none;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
.apps-section .app-card img {
  width: 100%;
  height: 145px;
  object-fit: contain;
  margin-bottom: 18px;
}
.apps-section .app-card h3 {
  min-height: 0;
  margin: 0 0 18px;
  font-size: 19px;
}
.apps-section .app-more {
  margin-top: auto;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}
@media (max-width: 900px) {
  .apps-section .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .apps-section .app-grid { grid-template-columns: 1fr; }
  .apps-section .app-card { min-height: 285px; }
}


/* ================================================================
   WEBTHINK v0.6.3 — CACHE-INDEPENDENT / JS-INDEPENDENT NAV + APPS
   ================================================================ */
.nav-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Application section is intentionally independent from reveal/JS. */
#apps,
#apps .container,
#apps .section-heading,
#apps .app-grid,
#apps .app-card,
#apps .app-card * {
  opacity: 1 !important;
  visibility: visible !important;
}
#apps .section-heading,
#apps .app-card {
  transform: none !important;
}
#apps .app-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
#apps .app-card {
  display: flex !important;
}

@media (max-width: 900px) {
  #apps .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 800px) {
  .nav-toggle {
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 102;
  }
  .nav-checkbox:checked ~ .main-nav {
    display: flex !important;
  }
  .nav-checkbox:checked + .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-checkbox:checked + .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav-checkbox:checked + .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 540px) {
  #apps .app-grid { grid-template-columns: 1fr !important; }
}


/* v0.6.4 — PHP 7 compatibility build + robust CSS-only mobile menu */
@media (max-width:800px) {
  #nav-checkbox:checked ~ nav.main-nav { display:flex !important; }
  label.nav-toggle { display:block !important; }
}

/* ================================================================
   WEBTHINK v0.7 — COOKIE CONSENT
   ================================================================ */
.cookie-consent{position:fixed;left:20px;right:20px;bottom:20px;z-index:9999;display:none;max-width:1180px;margin:auto;padding:22px 24px;background:rgba(6,21,33,.98);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.28);backdrop-filter:blur(14px)}
.cookie-consent.is-visible{display:block}.cookie-consent-inner{display:flex;align-items:center;gap:28px}.cookie-copy{flex:1}.cookie-copy strong{display:block;font-size:18px;margin-bottom:5px}.cookie-copy p{margin:0;color:#d6e1e9;font-size:14px;line-height:1.6}.cookie-copy a{color:#56c9ee;font-weight:700}.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.cookie-btn{appearance:none;border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:11px 15px;background:transparent;color:#fff;font:700 13px/1 Manrope,sans-serif;cursor:pointer}.cookie-btn:hover{border-color:#56c9ee}.cookie-btn.primary{background:#078dd1;border-color:#078dd1}.cookie-settings{display:none;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}.cookie-settings.open{display:block}.cookie-setting{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:9px 0;font-size:14px}.cookie-setting small{display:block;color:#aebbc5;margin-top:3px}.cookie-setting input{width:19px;height:19px;accent-color:#078dd1}.cookie-setting input:disabled{opacity:.65}@media(max-width:760px){.cookie-consent{left:12px;right:12px;bottom:12px;padding:18px}.cookie-consent-inner{display:block}.cookie-actions{justify-content:flex-start;margin-top:15px}.cookie-btn{flex:1 1 auto}.cookie-setting{align-items:flex-start}}

/* QR Menu's new portrait brand artwork needs a little more visual room. */
.app-card img[src*="qrmenu-new"]{height:170px;max-width:210px}
/* v0.8 production additions */
.contact-inner{max-width:860px}.contact-form{margin:28px auto 0;text-align:left;display:grid;gap:14px;max-width:760px}.contact-form label{display:grid;gap:7px;font-weight:700}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.32);border-radius:12px;background:rgba(255,255,255,.1);color:#fff;padding:13px 14px;font:inherit}.contact-form textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.privacy-check{display:flex!important;align-items:flex-start;gap:9px!important;font-size:13px;font-weight:500!important}.privacy-check input{width:auto;margin-top:3px}.privacy-check a{color:#fff;text-decoration:underline}.hp-field{position:absolute!important;left:-9999px!important}.form-status{padding:12px 16px;border-radius:12px}.form-status.success{background:rgba(27,154,93,.25)}.form-status.error{background:rgba(194,50,50,.28)}.contact-direct{margin-top:18px}.legal-page{padding:140px 0 80px;min-height:70vh}.legal-page h1{color:#073d6b}.legal-page h2{margin-top:30px;color:#073d6b}.legal-page p,.legal-page li{line-height:1.75}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:10px 0}.footer-links a{color:inherit;text-decoration:none}.footer-links a:hover{text-decoration:underline}@media(max-width:700px){.form-row{grid-template-columns:1fr}}


/* v0.8.1 — Footer social links */
.footer-social{display:flex;justify-content:center;align-items:center;gap:12px;margin:15px 0 4px}
.footer-social a{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#fff;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.footer-social a:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08)}
.footer-social svg{width:20px;height:20px;fill:currentColor}