/* ============================================================
   glass.css — liquid-glass theme for vector service pages
   Loaded AFTER site.css. Restyles shared components onto a
   glass surface and adds the floating nav + glass footer.
   ============================================================ */
:root{
  --glass:rgba(255,255,255,.46);
  --glass-2:rgba(255,255,255,.62);
  --glass-brd:rgba(255,255,255,.7);
  --glass-blur:saturate(165%) blur(22px);
  --glass-sh:0 18px 50px -22px rgba(33,67,90,.5), inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(255,255,255,.18);
  --glass-ink:#13343f;
  --nav-h:90px;
}
body{background:#dfeef3; color:var(--glass-ink)}

/* tighter rhythm between blocks */
.section{padding-block:clamp(40px,5.5vw,78px)}
.section-sm{padding-block:clamp(30px,4vw,54px)}
.head-row{margin-bottom:clamp(26px,3vw,40px)}

/* colour field */
.gbg{position:fixed; inset:0; z-index:-2; overflow:hidden; background:linear-gradient(160deg,#eaf6f9 0%,#dfeef3 40%,#e7eef6 100%)}
.gbg span{position:absolute; border-radius:50%; filter:blur(60px); opacity:.6; mix-blend-mode:multiply}
.gbg .b1{width:46vw;height:46vw;left:-8vw;top:-6vw;background:radial-gradient(circle at 40% 40%,#5ba6c6,transparent 66%); animation:orb1 22s ease-in-out infinite}
.gbg .b2{width:42vw;height:42vw;right:-6vw;top:2vw;background:radial-gradient(circle at 50% 50%,#f7a88f,transparent 64%); animation:orb2 26s ease-in-out infinite}
.gbg .b3{width:38vw;height:38vw;left:24vw;bottom:-12vw;background:radial-gradient(circle at 50% 50%,#7fbfd6,transparent 64%); animation:orb3 30s ease-in-out infinite}
.gbg .b4{width:30vw;height:30vw;right:14vw;bottom:-8vw;background:radial-gradient(circle at 50% 50%,#ef7e5e,transparent 66%); opacity:.4; animation:orb1 28s ease-in-out infinite reverse}
.gbg .grain{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.32) 1px,transparent 1px); background-size:72px 72px; -webkit-mask:radial-gradient(120% 100% at 50% 0,#000,transparent 80%); mask:radial-gradient(120% 100% at 50% 0,#000,transparent 80%); opacity:.5}
@keyframes orb1{50%{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes orb2{50%{transform:translate(-7vw,7vh) scale(1.08)}}
@keyframes orb3{50%{transform:translate(6vw,-6vh) scale(1.14)}}
@media (prefers-reduced-motion:reduce){.gbg span{animation:none}}

/* ---- generic glass surfaces ---- */
.glassmode .card,.glassmode .form-card,.glassmode .mock,.glassmode .tmpl,.glassmode .doc{
  background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); border-radius:20px; box-shadow:var(--glass-sh);
}
.glassmode .card:hover,.glassmode .tmpl:hover{box-shadow:0 26px 60px -22px rgba(33,67,90,.6), inset 0 1px 0 rgba(255,255,255,.7); border-color:rgba(255,255,255,.85)}
.glassmode .card{position:relative; overflow:hidden}
.glassmode .card::before{content:''; position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); transition:left .8s var(--ease); pointer-events:none; z-index:3}
.glassmode .card:hover::before{left:130%}

/* ---- floating glass nav ---- */
.gnav{position:sticky; top:14px; z-index:60; max-width:1320px; margin:14px auto 0; padding-inline:var(--gut)}
.gnav-in{display:flex; align-items:center; gap:22px; height:62px; padding:0 14px 0 22px; background:var(--glass-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); border-radius:999px; box-shadow:var(--glass-sh)}
.gnav-logo{height:20px; flex:0 0 auto}
.gnav-menu{display:flex; gap:4px; margin-left:4px}
.gnav-menu a{font-family:var(--font-d); font-size:14.5px; color:#2c4651; padding:8px 12px; border-radius:999px; transition:.2s; white-space:nowrap}
.gnav-menu a:hover{background:rgba(255,255,255,.5); color:var(--teal-d)}
.gnav-menu a.is-active{color:var(--teal-d); font-weight:600; background:rgba(255,255,255,.5)}
.gnav-cta{margin-left:auto}
.gnav-burger{display:none; width:42px;height:42px; border:1px solid var(--glass-brd); border-radius:50%; background:rgba(255,255,255,.4); flex-direction:column; gap:4px; align-items:center; justify-content:center; margin-left:auto}
.gnav-burger span{width:17px;height:2px;background:#2c4651;border-radius:2px; transition:.3s var(--ease)}
.gnav.open .gnav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.gnav.open .gnav-burger span:nth-child(2){opacity:0}
.gnav.open .gnav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.gnav-drawer{position:absolute; left:var(--gut); right:var(--gut); top:72px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); border-radius:20px; box-shadow:var(--glass-sh); padding:10px; transform-origin:top; transform:scaleY(0); opacity:0; transition:.3s var(--ease); display:none}
.gnav.open .gnav-drawer{transform:scaleY(1); opacity:1}
.gnav-drawer a{display:block; font-family:var(--font-d); font-size:16px; color:#2c4651; padding:12px 14px; border-radius:12px}
.gnav-drawer a:hover{background:rgba(255,255,255,.5)}
@media (max-width:1080px){.gnav-menu,.gnav-cta{display:none} .gnav-burger{display:flex} .gnav-drawer{display:block}}

/* ---- buttons / chips / tags ---- */
.glassmode .btn{border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -14px rgba(33,67,90,.55)}
.glassmode .btn--ink{background:rgba(19,52,63,.82); border-color:rgba(19,52,63,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#eaf6f9}
.glassmode .btn--coral{background:linear-gradient(135deg,#f59e84,#ef6e4c); border-color:rgba(206,58,17,.25); color:#fff}
.glassmode .btn--ghost{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--glass-brd); color:#234652}
.glassmode .btn--ghost.on-dark{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4)}
.glassmode .pill-row{background:var(--glass-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--glass-brd); box-shadow:var(--glass-sh)}
.glassmode .pill-row b{background:rgba(53,117,151,.16)}
.glassmode .chip{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--glass-brd)}
.glassmode .chip.is-active{background:var(--teal); border-color:var(--teal); color:#fff}
.glassmode .tag{background:rgba(53,117,151,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.glassmode .tag.coral{background:rgba(243,142,114,.22)}

/* ---- icon tiles ---- */
.glassmode .itile{background:rgba(255,255,255,.4); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-color:rgba(255,255,255,.6); color:var(--teal-d)}
.glassmode .itile.coral{background:rgba(243,142,114,.2); color:var(--red)}
.glassmode .itile.ink{background:rgba(19,52,63,.82); color:var(--coral-l); border-color:rgba(19,52,63,.4)}

/* ---- direction rows ---- */
.glassmode .dir{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); border-radius:20px; box-shadow:var(--glass-sh)}
.glassmode .dir-go{background:rgba(255,255,255,.4); border-color:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}

/* ---- surfaces ---- */
.glassmode .surface-ink{background:linear-gradient(135deg,rgba(19,52,63,.84),rgba(30,52,63,.72)); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); color:var(--paper)}
.glassmode .surface-paper2{background:transparent}
.glassmode .phero-grid-bg{opacity:.4}

/* ---- stats ---- */
.glassmode .stat-num{color:var(--teal-d)} .glassmode .stat-num.coral{color:var(--red)} .glassmode .stat-label{color:#4a6671}
.glassmode .surface-ink .stat-num{color:#bfe2ef} .glassmode .surface-ink .stat-num.coral{color:var(--coral-l)} .glassmode .surface-ink .stat-label{color:rgba(234,246,249,.62)}
.glassmode .kpi b{color:var(--glass-ink)}

/* ---- mock / dashboards ---- */
.glassmode .mock-bar{background:rgba(255,255,255,.4); border-bottom-color:rgba(255,255,255,.5)}
.glassmode .mock-bar .mock-url{background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.6)}
.glassmode .gauge::before{background:rgba(255,255,255,.7)}
.glassmode .barchart .bar{background:rgba(53,117,151,.18)}

/* ---- comparison table ---- */
.glassmode .ctable{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--glass-brd)}
.glassmode .ctable thead th{background:rgba(255,255,255,.35)}
.glassmode .ctable th,.glassmode .ctable td{border-bottom-color:rgba(255,255,255,.45)}
.glassmode .ctable .col-us{background:rgba(53,117,151,.08)}

/* ---- tech badges ---- */
.glassmode .tech{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--glass-brd)}
.glassmode .surface-ink .tech{background:rgba(243,250,252,.08); border-color:rgba(243,250,252,.16)}

/* ---- pricing ---- */
.glassmode .price{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--glass-brd); box-shadow:var(--glass-sh)}
.glassmode .price.featured{background:linear-gradient(135deg,rgba(19,52,63,.86),rgba(30,52,63,.74)); border-color:rgba(255,255,255,.2)}

/* ---- process ---- */
.glassmode .pstep .dot{background:var(--glass-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--glass-brd); color:var(--teal-d)}
.glassmode .pstep.in .dot{border-color:var(--teal)}
.glassmode .surface-ink .pstep .dot{background:rgba(19,52,63,.6); border-color:rgba(243,250,252,.3); color:var(--coral-l)}

/* ---- networks object cards & docs & demo ---- */
.glassmode .objcard{box-shadow:var(--glass-sh)}
.glassmode .doc .doc-thumb{background:rgba(53,117,151,.16)}
.glassmode .demo-prompt{background:linear-gradient(135deg,rgba(19,52,63,.88),rgba(30,52,63,.78)); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid rgba(255,255,255,.18); border-radius:20px}
.glassmode .demo-out{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); border-radius:20px; box-shadow:var(--glass-sh)}

/* ---- CTA band & form ---- */
.glassmode .leadform{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
@media (max-width:880px){.glassmode .leadform{grid-template-columns:1fr}}
.glassmode .form-card{padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:16px; border-radius:22px}
.glassmode .cta-band .lede{color:rgba(255,255,255,.85)}
.glassmode .cta-band{background:linear-gradient(135deg,rgba(19,52,63,.78),rgba(40,79,104,.62)); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid rgba(255,255,255,.22); box-shadow:0 30px 80px -30px rgba(13,33,42,.7), inset 0 1px 0 rgba(255,255,255,.3)}
.glassmode .form-card{background:var(--glass-2)}
.glassmode .field input,.glassmode .field textarea,.glassmode .field select{background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-color:rgba(255,255,255,.7)}

/* phero headline tint */
.glassmode .phero h1{color:#10303b}

/* ---- glass footer ---- */
.gfoot{margin-top:clamp(40px,6vw,80px); background:linear-gradient(135deg,rgba(19,52,63,.85),rgba(30,46,55,.8)); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-top:1px solid rgba(255,255,255,.18); color:#eaf6f9; padding:clamp(40px,5vw,64px) 0 28px}
.gfoot a{color:rgba(234,246,249,.66)} .gfoot a:hover{color:#fff}
.gfoot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.14)}
.gfoot h4{font-family:var(--font-d); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(234,246,249,.5); margin-bottom:16px; font-weight:600}
.gfoot ul{display:flex; flex-direction:column; gap:10px; font-size:15px}
.gfoot-bottom{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px; font-family:var(--font-d); font-size:13.5px; color:rgba(234,246,249,.45)}
@media (max-width:820px){.gfoot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.gfoot-grid{grid-template-columns:1fr}}

/* ---- form validation states ---- */
.field-err{color:var(--red); font-size:13px; font-family:var(--font-d); font-weight:500; margin-top:2px}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--red); box-shadow:0 0 0 3px rgba(206,58,17,.14)}
.consent.has-error{border-radius:12px; outline:2px solid rgba(206,58,17,.5); outline-offset:6px}
.consent-err{color:var(--red); font-size:13px; font-family:var(--font-d); font-weight:500; margin-top:8px}
button[type="submit"]:disabled{opacity:.7; cursor:default}
.form-sent{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:14px 8px}
.form-sent-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(53,117,151,.16);color:var(--teal-d)}
.form-sent-ic svg{width:28px;height:28px}
.form-sent h4{font-family:var(--font-d); font-size:20px; color:var(--glass-ink)}
.form-sent p{color:#4a6671; font-size:15px; max-width:30ch}
.fos-modal .form-sent h4,.cta-band .form-sent h4{color:#13343f}

/* ---- FOS modal ---- */
.fos-overlay{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(13,33,42,.45); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px)}
.fos-overlay.open{display:flex}
.fos-modal{width:100%; max-width:470px; max-height:92vh; overflow:auto; background:var(--glass-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); border-radius:24px; box-shadow:0 40px 100px -28px rgba(13,33,42,.7), inset 0 1px 0 rgba(255,255,255,.6); padding:clamp(26px,4vw,40px); position:relative; animation:fosIn .42s var(--ease)}
@keyframes fosIn{from{opacity:0; transform:translateY(22px) scale(.97)}}
.fos-close{position:absolute; top:15px; right:15px; width:40px; height:40px; border-radius:50%; border:1px solid var(--glass-brd); background:rgba(255,255,255,.55); display:grid; place-items:center; cursor:pointer; color:var(--glass-ink); transition:.25s var(--ease)}
.fos-close:hover{background:#fff; transform:rotate(90deg)}
.fos-close svg{width:18px; height:18px}
.fos-modal .form-card{background:rgba(255,255,255,.34); border:1px solid var(--glass-brd); box-shadow:none; padding:clamp(18px,3vw,24px); margin-top:18px; border-radius:18px}
.fos-modal h3{font-size:clamp(22px,3vw,28px)}

/* ============================================================
   RESPONSIVE — glass chrome (nav pill, landing hero, footer)
   ============================================================ */
@media (max-width:768px){
  /* floating nav: logo + burger only */
  .gnav{top:10px; margin-top:10px}
  .gnav-in{height:58px; padding:0 10px 0 18px}
  /* landing hero directions: 2-up */
  .hero-dirs{grid-template-columns:1fr 1fr!important}
  /* timeline already collapses at 820 in landing.html */
}
@media (max-width:480px){
  .hero-dirs{grid-template-columns:1fr!important}
  .gnav-drawer{left:12px; right:12px}
}
@media (max-width:370px){
  .gnav-in{height:54px; padding:0 8px 0 14px}
  .gnav-logo img{height:18px!important}
  .gnav-burger{width:40px;height:40px}
  /* modal fills small screens comfortably */
  .fos-overlay{padding:12px}
  .fos-modal{border-radius:20px; padding:22px 18px; max-height:94vh}
  .fos-modal .form-card{padding:16px}
  .fos-close{top:12px; right:12px; width:36px;height:36px}
  /* glass footer single column */
  .gfoot-grid{grid-template-columns:1fr; gap:26px}
  .gfoot-bottom{flex-direction:column; align-items:flex-start; gap:8px}
  /* consent rows readable */
  .consent .consent-item{font-size:13px}
}

/* Breadcrumbs (service + case pages) — sits above page content inside <main> */
.crumbs{padding:100px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal-d)}
.crumbs .crumbs-sep{opacity:.5}
.crumbs [aria-current="page"]{color:var(--ink)}

/* Cookie notice bar — floating glass strip, bottom-centered, dismiss stored in localStorage */
.cookie-bar{position:fixed; left:var(--gut,16px); right:var(--gut,16px); bottom:16px; z-index:1200;
  transform:translateY(140%); opacity:0; transition:transform .45s var(--ease), opacity .45s var(--ease);
  pointer-events:none}
.cookie-bar.is-in{transform:translateY(0); opacity:1; pointer-events:auto}
.cookie-bar__in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:16px;
  padding:14px 18px; background:var(--glass-2); -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); border-radius:20px;
  box-shadow:var(--glass-sh); color:var(--glass-ink)}
.cookie-bar__icon{font-size:26px; line-height:1; flex:0 0 auto}
.cookie-bar__text{margin:0; font-size:14.5px; line-height:1.5; color:var(--glass-ink)}
.cookie-bar__text a{color:var(--teal-d,#0d6c7e); text-decoration:underline; text-underline-offset:2px}
.cookie-bar__actions{margin-left:auto; flex:0 0 auto; display:flex; gap:10px; flex-wrap:wrap}
.cookie-bar__actions .btn{white-space:nowrap}
@media (max-width:760px){
  .cookie-bar__in{flex-wrap:wrap; gap:12px; padding:14px}
  .cookie-bar__icon{display:none}
  .cookie-bar__actions{margin-left:0; width:100%}
  .cookie-bar__actions .btn{flex:1 1 auto}
}

/* Structured content blocks: hero / features / cta / gallery */
.section-title{font-size:clamp(24px,3vw,34px); margin-bottom:16px}
.hero-in{display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center}
.hero-copy h1{font-size:clamp(30px,4.4vw,52px); margin-bottom:16px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.hero-media{margin:0}
.hero-media img{width:100%; height:auto; border-radius:22px; box-shadow:var(--glass-sh)}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:22px}
.cards-grid .card{padding:22px}
.card-icon{font-size:30px; line-height:1; margin-bottom:10px}
.cta-block{text-align:center; padding:40px 24px; background:var(--glass-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); border-radius:24px; box-shadow:var(--glass-sh)}
.cta-block .lede{margin:12px auto 22px; max-width:640px}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:20px}
.gallery-item{margin:0}
.gallery-item img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; display:block}
.gallery-item figcaption{font-size:13px; color:var(--glass-ink); opacity:.75; margin-top:6px}
@media (max-width:860px){ .hero-in{grid-template-columns:1fr} }