/* =====================================================================
   Zone Graphix — static rebuild
   Divi width system (content 1080 / gutter 5.556%) + brand tokens
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --content: 1080px;
  --wide: 1280px;
  --gutter: 5.556%;

  --blue-1:#006799;
  --blue-2:#1c93d1;
  --blue-3:#2ea3f2;      /* "view more" link */
  --blue-brand:#006197;
  --blue-grad: linear-gradient(90deg,#006799 0%,#1c93d1 100%);
  --blue-grad-2: linear-gradient(96deg,#2b87da 0%,#006197 100%);

  --navy:#0b1c35;         /* footer */
  --paper:#f2f2f2;
  --mist:#f6f8f9;

  --orange:#ff5a00;
  --orange-grad: linear-gradient(135deg,#ff7a18 0%,#ff4d00 100%);
  --red:#e42d12;          /* active nav */

  --ink:#666666;          /* body text */
  --heading:#0b1c35;      /* dark headings */

  --radius:6px;
  --shadow-card: 0 18px 40px -18px rgba(11,28,53,.22);
  --ease: cubic-bezier(.22,.61,.36,1);

  --ff: "Poppins", Helvetica, Arial, sans-serif;
  --ff-title: "Schibsted Grotesk", "Poppins", Helvetica, Arial, sans-serif;
  --ff-mono: "Courier Prime", "Courier New", monospace;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff);
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4,h5,h6{ font-family:var(--ff-title); color:var(--heading); margin:0 0 .5em; line-height:1.15; }
.sec-head__ghost, .hero-list a{ font-family:var(--ff-title); }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- Layout ---------- */
.container{ width:80%; max-width:var(--content); margin:0 auto; }
.container--wide{ width:90%; max-width:var(--wide); margin:0 auto; }
.container--full{ width:100%; max-width:none; margin:0; padding:0 clamp(10px,1.2vw,20px); }
.container--xl{ width:92%; max-width:1524px; margin:0 auto; }
.section{ position:relative; padding:110px 0; overflow:hidden; }
.section--tight{ padding:80px 0; }
@media(max-width:980px){ .section{ padding:80px 0; } }
@media(max-width:767px){ .container,.container--wide{ width:90%; } }

.grid{ display:grid; gap:34px var(--gutter); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

/* ---------- Watermark + solid section title ---------- */
.sec-head{ text-align:center; position:relative; margin-bottom:56px; }
.sec-head__ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,calc(-50% - 12px)); width:100%; z-index:0;
  font-size:clamp(52px,9vw,100px); font-weight:800; line-height:1;
  text-align:center; text-transform:uppercase; color:rgba(93,93,93,.06); letter-spacing:.02em;
  pointer-events:none; user-select:none; white-space:nowrap;
}
.sec-head__title{
  position:relative; z-index:1; font-size:clamp(32px,6vw,56px); font-weight:800;
  text-transform:uppercase; color:var(--heading); margin:0;
}
.sec-head__rule{ position:relative; z-index:1; }
.sec-head__rule{ width:70px; height:3px; background:var(--blue-2); border-radius:2px; margin:20px auto 0; }
.sec-head__title .t-blue{ color:#1c93d1; }
.sec-head__title .t-dark{ color:#333333; }
.sec-head--light .sec-head__title{ color:#fff; }
.sec-head--light .sec-head__ghost{ color:rgba(255,255,255,.10); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  padding:14px 32px; border-radius:50px; border:2px solid transparent;
  cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  line-height:1; white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn--orange{ background:var(--orange-grad); color:#fff; box-shadow:0 12px 26px -12px rgba(255,90,0,.7); }
.btn--orange:hover{ box-shadow:0 18px 34px -12px rgba(255,90,0,.85); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.85); }
.btn--ghost:hover{ background:#fff; color:var(--blue-brand); }
.btn--white{ background:#fff; color:var(--blue-brand); }
.btn--white:hover{ box-shadow:0 16px 30px -14px rgba(0,0,0,.4); }
.btn--blue{ background:var(--blue-grad); color:#fff; box-shadow:0 12px 26px -12px rgba(0,103,153,.6); }

/* =====================================================================
   HEADER
   ===================================================================== */
.topbar{ background:linear-gradient(90deg,#1c93d1 0%,#0a4f7a 100%); color:#fff; font-size:14px; }
.topbar__inner{ display:flex; align-items:center; justify-content:flex-end; gap:26px; height:40px; }
.topbar a{ display:inline-flex; align-items:center; gap:9px; color:#fff; opacity:.95; transition:opacity .25s; }
.topbar a:hover{ opacity:1; }
.topbar img{ width:15px; height:15px; }
.topbar .sep{ width:1px; height:16px; background:rgba(255,255,255,.35); }
.topbar__social{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; }
.topbar__social svg{ width:16px; height:16px; fill:#fff; }
@media(max-width:767px){ .topbar__inner{ justify-content:center; gap:16px; } .topbar .contact-txt{ display:none; } }

.site-top{ position:sticky; top:0; z-index:900; }
.site-header{ position:relative; z-index:2; background:#fff; box-shadow:0 2px 18px rgba(11,28,53,.08); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:66px; transition:height .3s var(--ease); }
.site-header.is-stuck .header__inner{ height:60px; }
.brand{ position:relative; z-index:60; }
.brand img{ height:90px; width:auto; margin:-20px 0 -28px; display:block; transition:height .3s var(--ease), margin .3s var(--ease);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
.site-header.is-stuck .brand img{ height:78px; margin:-16px 0 -22px; }
@media(max-width:600px){
  .brand img{ height:72px; margin:-16px 0 -20px; }
  .site-header.is-stuck .brand img{ height:64px; margin:-13px 0 -16px; }
}

.nav{ display:flex; align-items:center; gap:30px; }
.nav > ul{ display:flex; align-items:center; gap:28px; }
.nav > ul > li{ position:relative; }
.nav > ul > li > a{
  display:flex; align-items:center; gap:6px; font-family:var(--ff-title); font-size:14px; font-weight:600; color:#006197;
  text-transform:uppercase; letter-spacing:.02em; padding:12px 0; transition:color .25s;
  white-space:nowrap;
}
.nav > ul > li > a:hover,
.nav > ul > li.current > a{ color:var(--red); }
.nav .has-sub > a::after{
  content:""; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px); transition:transform .25s;
}
.nav .has-sub:hover > a::after{ transform:rotate(225deg) translateY(2px); }
.submenu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,10px); min-width:230px;
  background:#fff; border-radius:10px; box-shadow:var(--shadow-card); padding:10px 0;
  opacity:0; visibility:hidden; transition:opacity .25s, transform .25s; border-top:3px solid var(--orange);
}
.nav .has-sub:hover .submenu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu a{ display:block; padding:10px 22px; font-family:var(--ff-title); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); transition:background .2s,color .2s,padding .2s; }
.submenu a:hover{ background:var(--mist); color:var(--blue-brand); padding-left:27px; }

/* Services mega-menu (desktop) */
.submenu--mega{ min-width:600px; padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.submenu--mega a{ display:flex; align-items:center; gap:13px; padding:11px 14px; border-radius:12px; text-transform:none; letter-spacing:normal; }
.submenu--mega a:hover{ background:var(--mist); padding-left:14px; }
.mega-ic{ flex:none; width:40px; height:40px; border-radius:11px; background:var(--mist); display:grid; place-items:center; color:var(--blue-brand); transition:background .25s, color .25s; }
.mega-ic svg{ width:21px; height:21px; fill:currentColor; }
.submenu--mega a:hover .mega-ic{ background:var(--orange-grad); color:#fff; }
.mega-txt{ display:flex; flex-direction:column; gap:2px; }
.mega-txt strong{ font-family:var(--ff-title); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--heading); line-height:1.2; }
.mega-txt small{ font-size:12px; color:var(--ink); font-weight:400; }
@media(max-width:1120px){ .submenu--mega{ min-width:440px; grid-template-columns:1fr; } }

/* mobile toggle + drawer */
.nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:26px; height:3px; background:var(--blue-brand); border-radius:2px; display:block; transition:.3s; }
.nav-toggle span:nth-child(1){ width:26px; }
.nav-toggle span:nth-child(2){ width:20px; }
.nav-toggle span:nth-child(3){ width:14px; }
.header-cta{ margin-left:6px; }
/* 1081–1240px: desktop menu still shown but short on room — tighten gaps/CTA so nothing wraps or overflows */
@media(max-width:1240px){
  /* shrink the logo (90 -> 72px, same proportions as the phone rule) to give the menu room;
     labels stay a readable 14px, only gaps/CTA tighten */
  .brand img{ height:72px; margin:-16px 0 -20px; }
  .site-header.is-stuck .brand img{ height:64px; margin:-13px 0 -16px; }
  .nav{ gap:16px; }
  .nav > ul{ gap:16px; }
  .header-cta{ margin-left:0; padding:12px 20px; font-size:13px; }
}
@media(max-width:1080px){
  .nav > ul{ display:none; }
  .nav-toggle{ display:flex; }
}
@media(max-width:560px){ .header-cta{ display:none; } }

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(340px,86vw); background:#fff; z-index:1000;
  transform:translateX(100%); transition:transform .35s var(--ease); box-shadow:-20px 0 50px rgba(0,0,0,.2);
  padding:26px 26px 40px; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer__close{ position:absolute; top:18px; right:20px; font-size:26px; background:none; border:0; cursor:pointer; color:var(--heading); line-height:1; }
.drawer ul{ margin-top:40px; }
.drawer li > a{ display:flex; align-items:center; gap:13px; padding:13px 4px; font-weight:600; text-transform:uppercase; font-size:15px; color:var(--heading); border-bottom:1px solid #eee; }
.drawer-ic{ width:20px; height:20px; flex:none; fill:var(--blue-brand); }
.drawer .submenu-m a{ display:block; }
.drawer .submenu-m{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.drawer .has-sub-m.open .submenu-m{ max-height:400px; }
.drawer .has-sub-m > a{ position:relative; }
.drawer .has-sub-m > a::after{ content:"+"; position:absolute; right:8px; font-weight:400; font-size:22px; color:var(--orange); transition:transform .3s; }
.drawer .has-sub-m.open > a::after{ transform:rotate(45deg); }
.drawer .submenu-m a{ text-transform:none; font-weight:500; color:var(--ink); padding-left:18px; font-size:14px; }
/* Services drawer submenu: icons + UPPERCASE + extra left margin */
.drawer .submenu-m--svc a{ display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.02em; font-weight:600; padding-left:38px; }
.drawer .submenu-m--svc a:hover, .drawer .submenu-m--svc a:focus-visible, .drawer .submenu-m--svc a:active{ padding-left:42px; }
.submenu-ic{ width:18px; height:18px; flex:none; fill:var(--blue-brand); transition:fill .2s var(--ease); }
.drawer .submenu-m--svc a:hover .submenu-ic, .drawer .submenu-m--svc a:focus-visible .submenu-ic, .drawer .submenu-m--svc a:active .submenu-ic{ fill:var(--orange); }
/* drawer hovers: top items and submenu items get a tint + brand color + slight indent; icons turn orange */
.drawer li > a{ border-radius:8px; transition:color .2s var(--ease), background .2s var(--ease), padding-left .2s var(--ease); }
.drawer-ic{ transition:fill .2s var(--ease); }
.drawer li > a:hover,
.drawer li > a:focus-visible,
.drawer li > a:active{ color:var(--blue-brand); background:var(--mist); padding-left:12px; outline:none; }
.drawer li > a:hover .drawer-ic,
.drawer li > a:focus-visible .drawer-ic,
.drawer li > a:active .drawer-ic{ fill:var(--orange); }
.drawer .submenu-m a{ border-radius:8px; transition:color .2s var(--ease), background .2s var(--ease), padding-left .2s var(--ease); }
.drawer .submenu-m a:hover,
.drawer .submenu-m a:focus-visible,
.drawer .submenu-m a:active{ color:var(--blue-brand); background:var(--mist); padding-left:26px; outline:none; }
.drawer .lang-switch--drawer{ transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.overlay{ position:fixed; inset:0; background:rgba(11,28,53,.5); opacity:0; visibility:hidden; transition:.3s; z-index:999; }
.overlay.show{ opacity:1; visibility:visible; }
body.no-scroll{ overflow:hidden; }

/* Original .btn1 — translucent orange gradient pill (hero CTAs) */
.btn1{
  display:inline-flex; align-items:center; justify-content:center;
  width:9em; color:#ffffff; text-shadow:0 0 5px black;
  padding:16px 0; border-radius:50px; font-size:16px; font-weight:500;
  background-color:#f0f0f0; /* native <button> backdrop in the original — keeps the translucent gradient light */
  background-image:linear-gradient(to right, rgba(255,144,0,0.7) 0%, rgba(255,66,0,0.7) 100%);
  font-family:inherit; border:1px solid #ffffff; position:relative; overflow:hidden; z-index:1;
  cursor:pointer; text-transform:uppercase; letter-spacing:.04em; line-height:1;
  box-shadow:6px 6px 12px #c5c5c575, -6px -6px 12px #ffffff59;
  transition:color .9s ease, border-color .9s ease;
}
.btn1::before{
  content:''; width:0; height:100%; position:absolute; top:0; left:0;
  background-image:linear-gradient(to right, #ff9000 0%, #ff4000 100%);
  transition:.5s ease; display:block; z-index:-1;
}
.btn1:hover::before{ width:100%; }
.btn1:hover{ color:#fff; border-color:rgba(253,253,253,0); }
@media only screen and (max-width:360px){
  .btn1{ padding:12px 0; font-size:15px; box-shadow:3px 3px 12px #c5c5c575, -3px -3px 12px #ffffff59; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; min-height:calc(100vh - 106px); min-height:calc(100dvh - 106px);
  display:flex; align-items:center;
  background:var(--blue-grad); color:#fff; text-align:center; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,40,70,.45),rgba(0,60,95,.55)); }
.hero__inner{ position:relative; z-index:2; width:90%; max-width:960px; margin:0 auto; padding:120px 0; }
.hero h1{
  color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(38px,6.4vw,80px); line-height:1.02; margin:0 0 26px;
  text-shadow:0 6px 30px rgba(0,0,0,.25);
}
.hero__type{ font-family:var(--ff-mono); font-size:clamp(18px,2.6vw,30px); letter-spacing:.14em; text-transform:uppercase; min-height:1.4em; }
.hero__type .caret{ display:inline-block; width:3px; margin-left:4px; background:#fff; animation:caret 1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
.hero__cta{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:44px; }
.hero__lead{ font-size:14.5px; font-weight:200; color:rgba(255,255,255,.92); max-width:480px; margin:20px 0 0; line-height:1.6; text-shadow:0 2px 10px rgba(0,20,40,.45); }
.hero__inner--split .hero__cta{ margin-top:32px; }

/* Split hero (Magnific-style): info left, rotating service list right */
.hero__inner--split{
  width:90%; max-width:1280px; display:grid; grid-template-columns:1.15fr .85fr;
  gap:70px; align-items:center; text-align:left; padding:40px 0;
}
.hero__inner--split h1{ font-size:clamp(34px,4.6vw,64px); }
.hero__inner--split .hero__cta{ justify-content:flex-start; }
.hero-roller{ position:relative; justify-self:end; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.hero-roller__arrow{
  position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:2;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-left:14px solid #ff9000;
}
.hero-list{ display:flex; flex-direction:column; gap:16px; transition:transform .6s var(--ease); }
.hero-list a{
  position:relative; display:inline-block; padding-left:36px; white-space:nowrap;
  font-size:clamp(19px,2.1vw,32px); font-weight:800; line-height:1.15;
  color:rgba(255,255,255,.30); text-shadow:0 2px 14px rgba(0,20,40,.35);
  transition:color .5s ease;
}
.hero-list a:hover{ color:rgba(255,255,255,.75); }
.hero-list li.is-active a{ color:#fff; }
@media(max-width:900px){
  .hero__inner--split{ grid-template-columns:1fr; gap:44px; text-align:center; }
  .hero__inner--split .hero__cta{ justify-content:center; }
  .hero-roller{ display:none; }
}
/* Phone: bring back the service roller, capped at 4 visible items */
@media(max-width:600px){
  .hero__inner--split{ gap:24px; }
  .hero-roller{
    display:block; justify-self:center; margin:2px auto 0;
    width:100%; max-width:340px; padding-right:40px; text-align:left;
  }
  .hero-list{ gap:14px; align-items:flex-start; }
  .hero-list a{ font-size:15px; padding-left:26px; }
  .hero-roller__arrow{ border-top-width:7px; border-bottom-width:7px; border-left-width:11px; }
  .hero-roller__nav{ right:0; gap:6px; }
  .hero-roller__btn{ width:30px; height:30px; }
  .hero-roller__btn svg{ width:20px; height:20px; }
}

/* =====================================================================
   SERVICES cards
   ===================================================================== */
.svc-card{
  background-color:#e8e8e8; background-image:linear-gradient(180deg,#f7f7f7 0%,#e8e8e8 100%);
  border-radius:8px; overflow:hidden; box-shadow:0px 0px 13px -6px rgba(0,0,0,0.2);
  display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 14px 26px -12px rgba(0,0,0,0.24); }
.svc-card__img{ margin:16px 16px 0; border-radius:8px; overflow:hidden; aspect-ratio:16/11; }
.svc-card__img img{ width:100%; height:100%; object-fit:cover; }
.svc-card__body{ padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.svc-card__body h3{ font-size:20px; font-weight:700; color:var(--heading); margin:0 0 10px; text-align:center; }
.svc-card__body p{ font-size:14.5px; margin:0 0 18px; text-align:center; }
.svc-more{ margin-top:auto; align-self:flex-start; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--blue-3); display:inline-flex; align-items:center; gap:7px; transition:gap .25s,color .25s; }
.svc-more::after{ content:"→"; transition:transform .25s; }
.svc-more:hover{ color:var(--blue-brand); }
.svc-more:hover::after{ transform:translateX(4px); }

/* Neumorphic "VIEW MORE" button for service cards */
.svc-btn{
  margin-top:auto; align-self:center;
  display:inline-flex; align-items:center; justify-content:center;
  width:9em; height:3em; color:#333333; font-size:14px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; font-family:inherit;
  background:#e8e8e8; border:1px solid #e8e8e8; border-radius:25px;
  position:relative; overflow:hidden; z-index:1; cursor:pointer;
  box-shadow:6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  transition:color .9s ease, border-color .9s ease;
}
.svc-btn::before{
  content:''; width:0; height:100%; border-radius:30em; position:absolute; top:0; left:0;
  background-image:linear-gradient(to right,#ff9000 0%,#ff4000 100%);
  transition:.5s ease; display:block; z-index:-1;
}
.svc-btn:hover::before{ width:100%; }
.svc-btn:hover{ color:#fff; border-color:rgba(253,253,253,0); }

/* =====================================================================
   PROCESS (how do we do it)
   ===================================================================== */
.process{ background:var(--paper); }
.process__pattern{ position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(-45deg, rgba(11,28,53,.045) 0 1px, transparent 1px 26px); }
.proc-grid{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:30px 26px; max-width:none; margin:0 auto; }
@media(max-width:1080px){ .proc-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:720px){ .proc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .proc-grid{ grid-template-columns:1fr; gap:26px; } }
.proc{ display:flex; gap:16px; align-items:flex-start; }
.proc__icon{
  flex:0 0 62px; width:62px; height:62px; border-radius:50%; background:var(--orange);
  border:3px solid #e0e0e0; display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 12px 24px -10px rgba(255,64,0,.6);
}
.proc__icon svg{ width:26px; height:26px; fill:#fff; }
.proc__body h4{ font-size:18px; font-weight:700; text-transform:uppercase; color:var(--heading); margin:4px 0 8px; }
.proc__body p{ font-size:14.5px; margin:0; }

/* =====================================================================
   ABOUT (blue gradient band)
   ===================================================================== */
.band-blue{ background:var(--blue-grad-2); color:#fff; text-align:center; }
.band-blue h2{ color:#fff; }
.band-blue .lead{ font-size:15.5px; color:rgba(255,255,255,.92); max-width:820px; margin:0 auto 22px; }
.band-blue .kicker{ font-size:20px; font-weight:700; margin:8px 0 26px; }

/* Home ABOUT band — photo pops above the blue band, text left-aligned right column */
.about-home{ position:relative; text-align:left; padding:70px 0 100px; margin-top:0; z-index:2;
  background:linear-gradient(90deg,#2b87da 0%,#006197 61%); }
/* top wave divider (rises from the white section above into the blue band) — same shape as the service bands, filled with the band gradient so the join is seamless. Parent-scoped so it beats the generic .band-curve rules that appear later in the file. */
.about-home > .about-home__curve{ top:-34px; z-index:1; }
.about-home > .about-home__curve svg{ display:block; width:100%; height:35px; transform:none; }
@media(max-width:767px){ .about-home > .about-home__curve{ top:-19px; } .about-home > .about-home__curve svg{ height:20px; } }
.about-home__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start; }
.about-home__media{ position:relative; z-index:3; align-self:center; }
.about-home__media img{
  position:relative; display:block; width:100%; max-width:500px; height:auto; margin:-70px 0;
  border-radius:6px; box-shadow:0 24px 60px -18px rgba(2,20,50,.45); background:#fff;
}
.about-home__body h2{ font-size:clamp(28px,3.4vw,50px); font-weight:800; text-transform:uppercase; margin:26px 0 30px; white-space:nowrap; }
@media(max-width:400px){ .about-home__body h2{ white-space:normal; } }
.about-home__text{ text-align:justify; color:rgba(255,255,255,.95); margin:0 0 22px; }
.about-home__cta-line{ margin:0 0 30px; }
@media(max-width:840px){
  .about-home{ margin-top:0; padding:60px 0 80px; }
  .about-home__grid{ grid-template-columns:1fr; gap:34px; }
  .about-home__media{ align-self:auto; }
  .about-home__media img{ position:static; height:auto; margin:-90px auto 0; }
  .about-home__body h2{ margin-top:0; }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact{ position:relative; background:var(--blue-2); color:#fff; }
.contact__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; }
/* About: map photo at full strength (no veil) — the glass row blurs it behind the form */
.contact--photo .contact__bg{ opacity:1; }
/* extra room above the CONTACT US heading (clears the band curve above) */
.contact--photo{ padding-top:180px; }
@media(max-width:767px){ .contact--photo{ padding-top:120px; } }
.contact__inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field input,.field textarea{
  width:100%; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.45); border-radius:6px;
  color:#fff; padding:16px 18px; font-family:inherit; font-size:14px; text-transform:uppercase;
  transition:border-color .25s, background .25s;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:.03em; }
.field input:focus,.field textarea:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,.18); }
.field--full{ grid-column:1/-1; }
/* fields with leading icon */
.field--ic{ position:relative; }
.field--ic input, .field--ic textarea{ padding-left:48px; }
.field-ic{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px;
  display:grid; place-items:center; pointer-events:none; opacity:.85; }
.field-ic svg{ width:19px; height:19px; fill:currentColor; }
.field-ic--top{ top:20px; transform:none; }
.contact .field-ic{ color:#fff; }
/* Contact form inside a single frosted-glass row (About): blurs the map behind it */
.contact-glass{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,0.15); border-radius:12px;
  padding:clamp(24px,4vw,44px); box-shadow:0 24px 60px -24px rgba(0,30,60,.45);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(5px); }
.contact-glass .contact-form{ margin:0; }
/* submit centered under every contact form (inline-flex button -> block-level, shrink-wrapped, auto margins) */
.contact-form > .btn{ display:flex; width:fit-content; margin:26px auto 0; }
@media(max-width:640px){ .contact-glass{ border-radius:12px; padding:20px 16px; } }
.form-light .field-ic{ color:var(--blue-brand); opacity:.7; }
.form-label{ display:block; font-weight:600; margin:22px 0 12px; }
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
@media(max-width:640px){ .checks{ grid-template-columns:1fr; } }
.check,.radio{ display:flex; align-items:center; gap:11px; text-transform:uppercase; font-size:13.5px; letter-spacing:.03em; cursor:pointer; }
.check input,.radio input{ width:18px; height:18px; accent-color:var(--orange); flex:0 0 auto; }
.radios{ display:flex; gap:28px; }
.contact .btn{ margin-top:28px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ position:relative; background:var(--navy); color:rgba(255,255,255,.75); overflow:hidden; }
.site-footer__pattern{ position:absolute; inset:0; opacity:.6;
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px); }

/* Footer rising dots (GO2-style particle field, Zone Graphix brand) — filled by main.js */
.footer-bubbles{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.footer-bubbles i{
  position:absolute; bottom:-14px; border-radius:50%;
  background:#4fc3dc; box-shadow:0 0 8px rgba(79,195,220,.65);
  animation:zgRise linear infinite; will-change:transform, opacity;
}
.footer-bubbles i.b2{ background:#1c93d1; box-shadow:0 0 8px rgba(28,147,209,.6); }
.footer-bubbles i.o{ background:#ff5a00; box-shadow:0 0 8px rgba(255,90,0,.55); }
@keyframes zgRise{
  0%{ transform:translate3d(0,0,0) scale(.2); opacity:0; }
  12%{ opacity:.9; }
  35%{ transform:translate3d(calc(var(--drift,20px) * .35), calc(-0.35 * var(--rise,460px)), 0) scale(1); }
  85%{ opacity:.9; }
  100%{ transform:translate3d(var(--drift,20px), calc(-1 * var(--rise,460px)), 0) scale(1); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .footer-bubbles{ display:none; } }
.footer-top, .footer-bottom{ position:relative; z-index:1; }
.footer-top{ position:relative; padding:70px 0 46px; }
.footer-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:40px; align-items:start; }
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; text-align:center; } }
.footer-logo img{ height:64px; width:auto; margin-bottom:18px; }
.footer h4{ color:#fff; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:0 0 20px; position:relative; padding-bottom:12px; }
.footer h4::after{ content:""; position:absolute; left:0; bottom:0; width:44px; height:3px; background:var(--orange); }
@media(max-width:560px){ .footer h4::after{ left:50%; transform:translateX(-50%); } }
.footer-links li a{ display:inline-block; padding:7px 0; color:rgba(255,255,255,.72); transition:color .25s, padding .25s; }
.footer-links li a:hover{ color:#fff; padding-left:5px; }
.foot-contact{ display:flex; gap:16px; align-items:center; margin-bottom:22px; }
.foot-contact .ic{ flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; }
.foot-contact .ic svg{ width:20px; height:20px; fill:#fff; }
.foot-contact .lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6); }
.foot-contact .val{ color:#fff; font-weight:700; font-size:16px; }
@media(max-width:560px){ .foot-contact{ justify-content:center; } }
.foot-social{ display:flex; gap:12px; }
@media(max-width:560px){ .foot-social{ justify-content:center; } }
.foot-social a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; transition:background .25s, border-color .25s, transform .25s; }
.foot-social a:hover{ background:var(--orange); border-color:var(--orange); transform:translateY(-3px); }
.foot-social svg{ width:18px; height:18px; fill:#fff; }
.footer-bottom{ position:relative; border-top:1px solid rgba(255,255,255,.10); padding:22px 0; text-align:center; font-size:14px; color:rgba(255,255,255,.6); }

/* =====================================================================
   Floating WhatsApp + back-to-top
   ===================================================================== */
/* WhatsApp floating chat pop-up (GO2-style) */
.wa{ position:fixed; z-index:800; left:22px; bottom:22px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; pointer-events:none; }
.wa__btn{ position:relative; align-self:flex-start; pointer-events:auto; width:58px; height:58px; border-radius:50%; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; background:#0dc152; color:#fff; box-shadow:0 12px 28px rgba(13,193,82,.4); transition:transform .25s ease; }
.wa__btn:hover{ transform:translateY(-3px) scale(1.03); }
.wa__btn svg{ width:26px; height:26px; position:relative; flex:none; transition:transform .25s ease; }
.wa__btn-text{ display:none; font-weight:600; font-size:.95rem; white-space:nowrap; }
@media(min-width:768px){
  .wa__btn{ width:auto; height:46px; border-radius:999px; padding:0 20px; gap:9px; }
  .wa__btn svg{ width:20px; height:20px; }
  .wa__btn-text{ display:inline; font-size:14px; }
  .wa__pulse{ display:none; }
}
.wa__pulse{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(13,193,82,.5); animation:waPulse 2.6s infinite; }
.wa.is-open .wa__pulse{ animation:none; }
@keyframes waPulse{ 70%{ box-shadow:0 0 0 16px rgba(13,193,82,0); } 100%{ box-shadow:0 0 0 0 rgba(13,193,82,0); } }
.wa__panel{ position:relative; width:min(320px,calc(100vw - 2rem)); background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 22px 50px rgba(2,20,60,.28); transform-origin:bottom left; opacity:0; transform:translateY(14px) scale(.9); visibility:hidden; pointer-events:none; transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s; }
.wa.is-open .wa__panel{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity .28s ease, transform .28s ease, visibility 0s; }
.wa__panel::after{ content:""; position:absolute; left:22px; bottom:-8px; width:16px; height:16px; background:#fff; transform:rotate(45deg); box-shadow:4px 4px 8px rgba(0,0,0,.06); }
.wa__head{ position:relative; background:#0dc152; color:#fff; padding:16px 42px 16px 16px; font-size:.9rem; line-height:1.45; }
.wa__head p{ margin:0; }
.wa__close{ position:absolute; top:10px; right:10px; width:26px; height:26px; border:0; cursor:pointer; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; transition:background .2s ease; }
.wa__close:hover{ background:rgba(255,255,255,.4); }
.wa__close svg{ width:14px; height:14px; }
.wa__body{ padding:10px; }
.wa__rep{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; transition:background .2s ease; }
.wa__rep:hover{ background:#eef6f1; }
.wa__rep-ava{ position:relative; width:46px; height:46px; border-radius:50%; background:#0dc152; color:#fff; display:grid; place-items:center; flex:none; }
.wa__rep-ava svg{ width:26px; height:26px; }
.wa__rep-ava::after{ content:""; position:absolute; right:1px; bottom:1px; width:11px; height:11px; border-radius:50%; background:#2fd15f; border:2px solid #fff; }
.wa__rep-name{ display:block; font-weight:700; color:var(--heading); font-size:.96rem; }
.wa__rep-sub{ display:block; font-size:.8rem; color:var(--ink); }
@media(prefers-reduced-motion:reduce){ .wa__pulse{ animation:none; } }

.to-top{ position:fixed; right:24px; bottom:24px; z-index:790; width:46px; height:46px; border-radius:4px;
  background:var(--blue-brand); color:#fff; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px); transition:.3s var(--ease); box-shadow:0 10px 24px -8px rgba(0,0,0,.4); }
.to-top.show{ opacity:.75; visibility:visible; transform:translateY(0); }
.to-top.show:hover{ opacity:1; }
.to-top svg{ width:20px; height:20px; fill:#fff; }

/* =====================================================================
   Cookie consent
   ===================================================================== */
/* Slim, light bar in the Kapital style: one quiet line of copy, Decline and Accept with
   equal visual weight (hiding the refusal is the dark pattern regulators cite), X to dismiss. */
.cookie{ position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:#fff; color:var(--ink);
  border-top:1px solid rgba(11,28,53,.10);
  box-shadow:0 -10px 40px rgba(11,28,53,.10);
  transform:translateY(110%); transition:transform .42s var(--ease); }
.cookie.show{ transform:none; }
.cookie__inner{ position:relative; width:90%; max-width:var(--wide); margin:0 auto;
  padding:14px 0; display:flex; align-items:center; gap:clamp(16px,3vw,40px); }
.cookie__text{ flex:1 1 auto; min-width:0; margin:0;
  font-size:13px; line-height:1.55; color:var(--ink); max-width:82ch; }
.cookie__text a{ color:var(--blue-brand); text-decoration:underline; text-underline-offset:2px; }
.cookie__text a:hover{ color:var(--heading); }
.cookie__actions{ flex:0 0 auto; display:flex; gap:10px; }
.cookie__btn{ font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.02em;
  white-space:nowrap; cursor:pointer; padding:9px 22px; border-radius:50px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.cookie__btn--solid{ background:var(--blue-brand); color:#fff; border:1px solid var(--blue-brand); }
.cookie__btn--solid:hover{ background:var(--blue-2); border-color:var(--blue-2); }
.cookie__btn--ghost{ background:transparent; color:var(--heading); border:1px solid rgba(11,28,53,.28); }
.cookie__btn--ghost:hover{ border-color:var(--heading); background:rgba(11,28,53,.05); }
.cookie__btn:focus-visible{ outline:2px solid var(--blue-brand); outline-offset:2px; }
.cookie__x{ flex:0 0 auto; display:grid; place-items:center;
  width:32px; height:32px; padding:0; border:0; border-radius:50%;
  background:transparent; color:#9aa5b1; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease); }
.cookie__x svg{ width:15px; height:15px; }
.cookie__x:hover{ background:rgba(11,28,53,.07); color:var(--heading); }
.cookie__x:focus-visible{ outline:2px solid var(--blue-brand); outline-offset:2px; }
@media(max-width:860px){
  .cookie__inner{ flex-direction:column; align-items:stretch; gap:10px; padding:34px 0 14px; }
  .cookie__actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  /* keep the tap target >= 44px tall even on the slim bar */
  .cookie__btn{ width:100%; text-align:center; padding:13px 12px; }
  .cookie__text{ font-size:12.5px; }
  .cookie__x{ position:absolute; top:4px; right:0; width:30px; height:30px; }
}
@media(prefers-reduced-motion:reduce){ .cookie{ transition:none; } }
/* Step over the bar while it is up, by its measured height (--ckc-h, set by main.js). */
.has-cookie .wa{ bottom:calc(22px + var(--ckc-h, 0px)); transition:bottom .42s var(--ease); }
.has-cookie .to-top{ bottom:calc(24px + var(--ckc-h, 0px)); }

/* =====================================================================
   Reveal on scroll
   ===================================================================== */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal:not(.in){ opacity:0; transform:translateY(34px); }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media(prefers-reduced-motion:reduce){ .reveal:not(.in){ opacity:1; transform:none; } }

/* =====================================================================
   Interior service pages
   ===================================================================== */
.svc-intro{ background:#f2f2f2; border-radius:16px; box-shadow:0px 2px 18px 0px rgba(0,0,0,0.3); padding:40px; }
@media(max-width:640px){ .svc-intro{ padding:24px; } }
.svc-intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media(max-width:840px){ .svc-intro__grid{ grid-template-columns:1fr; gap:34px; } }
.svc-intro__media img{ width:100%; border-radius:14px; box-shadow:var(--shadow-card); }
.svc-intro__body h2{ font-size:22px; font-weight:700; color:#006899; margin:0 0 14px; }
.svc-intro__body .lead{ margin-bottom:20px; }
.check-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
@media(max-width:520px){ .check-list{ grid-template-columns:1fr; } }
.check-list li{ position:relative; padding-left:32px; font-weight:500; color:var(--heading); }
.check-list li::before{
  content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:#3dbf56; box-shadow:0 4px 10px -3px rgba(61,191,86,.55);
}
.check-list li::after{
  content:""; position:absolute; left:6px; top:8px; width:7px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}

/* content prose blocks */
.prose h2{ font-size:clamp(22px,2.6vw,28px); font-weight:700; margin:0 0 16px; }
.prose h3{ font-size:26px; font-weight:700; color:#006899; margin:30px 0 12px; }
.prose p{ max-width:820px; }
.prose--center{ text-align:center; }
.prose--center p{ margin-left:auto; margin-right:auto; }

/* Pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media(max-width:980px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{ background:#fff; border-radius:16px; box-shadow:var(--shadow-card); padding:34px 26px; text-align:center; display:flex; flex-direction:column; border-top:4px solid var(--blue-2); transition:transform .35s var(--ease); }
.price-card:hover{ transform:translateY(-8px); }
.price-card--feature{ border-top-color:var(--orange); }
.price-card h3{ font-size:19px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:0 0 6px; }
.price-card .amount{ font-size:40px; font-weight:800; color:var(--blue-brand); line-height:1; margin:12px 0 4px; }
.price-card .amount small{ font-size:14px; font-weight:600; color:var(--ink); }
.price-card .per{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:18px; }
.price-card ul{ text-align:left; display:flex; flex-direction:column; gap:9px; margin:0 0 24px; font-size:14px; }
.price-card ul li{ position:relative; padding-left:24px; }
.price-card ul li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:800; }
.price-card .btn{ margin-top:auto; }
/* pricing fill hover: contrasting gradient wipes in from the left (svc-btn style) */
.price-card .btn{ position:relative; overflow:hidden; z-index:1; }
.price-card .btn::before{ content:""; position:absolute; top:0; left:0; width:0; height:100%; z-index:-1; transition:width .45s var(--ease); }
.price-card .btn--blue::before{ background:var(--orange-grad); }
.price-card .btn--orange::before{ background:var(--blue-grad); }
.price-card .btn:hover{ transform:translateY(-3px); color:#fff; }
.price-card .btn:hover::before{ width:100%; }

/* FAQ accordion */
.faq{ max-width:820px; margin:0 auto; }
.faq__item{ border:1px solid #e7eaee; border-radius:12px; margin-bottom:14px; overflow:hidden; background:#fff; }
.faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:20px 24px; font-size:16px; font-weight:600; color:var(--heading); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq__q::after{ content:"+"; font-size:24px; font-weight:400; color:var(--orange); transition:transform .3s; }
.faq__item.open .faq__q::after{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq__a p{ padding:0 24px 20px; margin:0; }
.faq__item.open .faq__a{ max-height:320px; }

/* CTA band (why work with us / whatsapp) */
.cta-band{ background:var(--blue-grad-2); color:#fff; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.92); max-width:760px; margin:0 auto 26px; }

.section--alt{ background:var(--mist); }

/* Contact page split */
.contact-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; align-items:start; }
@media(max-width:860px){ .contact-split{ grid-template-columns:1fr; gap:36px; } }
.info-card{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.info-card .ic{ flex:0 0 50px; width:50px; height:50px; border-radius:50%; background:var(--orange-grad); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -8px rgba(255,90,0,.6); }
.info-card .ic svg{ width:22px; height:22px; fill:#fff; }
.info-card h4{ margin:2px 0 3px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
.info-card .v{ font-size:17px; font-weight:600; color:var(--heading); }
.info-card a.v:hover{ color:var(--blue-brand); }
/* light contact form (on white) */
.form-light .field input,.form-light .field textarea{ background:#f4f6f8; border:1px solid #e2e6ea; color:var(--heading); text-transform:none; }
.form-light .field input::placeholder,.form-light .field textarea::placeholder{ color:#9aa4ae; text-transform:none; letter-spacing:normal; }
.form-light .field input:focus,.form-light .field textarea:focus{ border-color:var(--blue-2); background:#fff; }
.form-light .form-label{ color:var(--heading); }
.form-light .check,.form-light .radio{ color:var(--heading); text-transform:none; letter-spacing:normal; }

/* =====================================================================
   Portfolio galleries
   ===================================================================== */
/* Portfolio category filter */
.port-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 34px; }
.port-filter__btn{ font-family:var(--ff-title); font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--blue-brand); background:#fff; border:1.5px solid #dfe4e8; border-radius:40px; padding:9px 20px; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.port-filter__btn:hover{ border-color:var(--blue-brand); }
.port-filter__btn.is-active{ background:var(--blue-grad); color:#fff; border-color:transparent; box-shadow:0 10px 22px -12px rgba(0,103,153,.6); }
.port-filter__btn:focus-visible{ outline:2px solid var(--blue-brand); outline-offset:2px; }
/* filter: appearing cards fade/scale in */
.port-item.pf-in{ animation:pfIn .42s var(--ease) both; }
@keyframes pfIn{ from{ opacity:0; transform:scale(.95) translateY(8px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .port-item.pf-in{ animation:none; } }
@media(max-width:520px){ .port-filter__btn{ font-size:12px; padding:8px 15px; } }
.port-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
@media(max-width:1100px){ .port-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:820px){ .port-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .port-grid{ grid-template-columns:1fr; } }
.port-card{ position:relative; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-card); background:#fff; aspect-ratio:411/500; }
.port-card img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:object-position 3.5s var(--ease); }
.port-card:hover img{ object-position:center bottom; }
@media(prefers-reduced-motion:reduce){ .port-card img{ transition:none; } }
.port-card__cap{ position:absolute; left:0; right:0; bottom:0; padding:40px 18px 16px; color:#fff; font-weight:600;
  background:linear-gradient(transparent, rgba(11,28,53,.85)); opacity:0; transform:translateY(8px); transition:.3s; }
.port-card:hover .port-card__cap{ opacity:1; transform:none; }
.port-item{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.port-item[hidden]{ display:none; }  /* beats .port-item display:flex so filtered-out cards leave the grid flow */
.port-item .port-card{ width:100%; }
.port-live{
  display:inline-flex; align-items:center; justify-content:center;
  width:9em; height:3em; color:#333333; font-size:14px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; font-family:inherit;
  background:#e8e8e8; border:1px solid #e8e8e8; border-radius:25px;
  position:relative; overflow:hidden; z-index:1; cursor:pointer;
  box-shadow:6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  transition:color .9s ease, border-color .9s ease;
}
.port-live::before{
  content:""; width:0; height:100%; border-radius:30em; position:absolute; top:0; left:0;
  background-image:linear-gradient(to right,#ff9000 0%,#ff4000 100%);
  transition:.5s ease; display:block; z-index:-1;
}
.port-live:hover::before{ width:100%; }
.port-live:hover{ color:#fff; border-color:rgba(253,253,253,0); }


/* Logo grid */
.logo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media(max-width:820px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .logo-grid{ grid-template-columns:repeat(2,1fr); } }
.logo-card{ background:#fff; border:1px solid #eef1f4; border-radius:14px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:22px; box-shadow:0 10px 26px -18px rgba(11,28,53,.3); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.logo-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.logo-card img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }

/* Animated icons grid */
.aicon-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media(max-width:1100px){ .aicon-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){ .aicon-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .aicon-grid{ grid-template-columns:1fr; } }
.aicon-card{ background:#fff; border-radius:16px; box-shadow:var(--shadow-card); padding:clamp(40px,5vw,64px) 20px; text-align:center; }
.aicon-card img{ width:clamp(120px,14vw,190px); height:clamp(120px,14vw,190px); margin:0 auto 22px; }
.aicon-card span{ font-weight:600; color:var(--heading); font-size:clamp(15px,1.4vw,18px); }

/* About values */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:760px){ .values-grid{ grid-template-columns:1fr; } }
.value{ background:#fff; border-radius:16px; box-shadow:var(--shadow-card); padding:32px 26px; text-align:center; }
.value .vic{ width:64px; height:64px; border-radius:50%; background:var(--orange-grad); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 12px 24px -10px rgba(255,90,0,.6); }
.value .vic svg{ width:28px; height:28px; fill:#fff; }
.value h3{ font-size:18px; font-weight:700; margin:0 0 8px; }
.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
@media(max-width:840px){ .about-split{ grid-template-columns:1fr; gap:32px; } }
.about-split img{ width:100%; border-radius:16px; box-shadow:var(--shadow-card); }

/* About: blue "ZONE GRAPHIX" band with Divi-style curve dividers (35px desktop / 20px phone),
   arranged UNDER the section content so the photo overflows above and below the band. */
.about-band{ background:linear-gradient(90deg,#2b87da 0%,#006197 61%); color:#fff; margin-top:-1px; position:relative; z-index:3;
  overflow:visible; padding:96px 0; min-height:490px; }
.about-band .about-split{ position:relative; z-index:2; width:80%; max-width:var(--content); margin:0 auto; align-items:center; }
.about-band h2{ color:#fff; font-size:clamp(30px,3.8vw,48px); font-weight:800; text-transform:uppercase; margin:0 0 22px; }
.about-band p{ color:rgba(255,255,255,.95); text-align:justify; margin:0 0 18px; }
.about-band .lead-strong{ font-weight:700; color:#fff; text-align:left; }
/* photo overflows the band top and bottom (as in the original) without driving the band height:
   the column stretches to the text row and the img is absolutely positioned beyond it. */
.about-band__media{ position:relative; z-index:4; align-self:stretch; min-height:300px; }
.about-band__media img{ position:absolute; left:0; top:-120px; bottom:-170px; width:100%; max-width:440px; height:calc(100% + 290px);
  object-fit:cover; object-position:center; border-radius:16px; box-shadow:0 24px 60px -18px rgba(2,20,50,.5); background:#fff; }
/* curve dividers: the neighbouring section color bites into the band. One at the band top
   (white, from the hero) and one at the contact top (band gradient, into the contact). */
.band-curve{ position:absolute; left:0; right:0; top:-1px; z-index:1; line-height:0; pointer-events:none; }
.band-curve svg{ display:block; width:100%; height:35px; transform:scaleY(-1); }
/* top divider = vertical mirror of the bottom one: band gradient rising UP into the white hero.
   Unflipped (solid bottom meets the band, wavy edge on top) and hung above the band edge. */
.about-band > .band-curve{ top:-34px; }
.about-band > .band-curve svg{ transform:none; }
/* Service pages: empty decorative blue band right after the hero, exactly as the original —
   hero bottom divider = the brand wave in #006899 rising into the white hero (unflipped),
   band bottom divider = the mirrored wave in white biting up from the content (scaleY(-1)).
   Each divider carries the neighbouring section color, so both transitions are seamless. */
.page-hero.page-hero--band{ padding-bottom:230px; }
.svc-band{ position:relative; z-index:3; background:#006899; height:265px; }
.svc-band .band-curve--top{ top:-34px; }
.svc-band .band-curve--top svg{ height:35px; transform:none; }
.svc-band .band-curve--bottom{ top:auto; bottom:-1px; }
.svc-band .band-curve--bottom svg{ height:35px; transform:scaleY(-1); }
/* intro card floats OVER the blue band: pull the section up so the card top sits ~90px into the band
   (below the top wave), overlapping 175px of blue and continuing into the white area below */
.svc-band + .section{ position:relative; z-index:4; margin-top:-405px; padding-top:0; }
.svc-band + .section > .svc-intro{ width:75%; max-width:1440px; }
@media(max-width:767px){
  .band-curve svg{ height:20px; }
  .page-hero.page-hero--band{ padding-bottom:90px; }
  .svc-band{ height:150px; }
  .svc-band .band-curve--top{ top:-19px; }
  .svc-band .band-curve--top svg, .svc-band .band-curve--bottom svg{ height:20px; }
  .svc-band + .section{ margin-top:-100px; }
  .svc-band + .section > .svc-intro{ width:90%; max-width:none; }
  .about-band > .band-curve{ top:-19px; }
  .about-band{ min-height:0; padding:70px 0; }
  .about-band__media{ align-self:auto; min-height:0; }
  .about-band__media img{ position:static; height:auto; max-width:100%; }
}

/* Blog */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media(max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }
.post-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; transition:transform .35s var(--ease); }
.post-card:hover{ transform:translateY(-6px); }
.post-card__img{ aspect-ratio:16/9; overflow:hidden; }
.post-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.post-card:hover .post-card__img img{ transform:scale(1.05); }
.post-card__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.post-card .meta{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--blue-3); margin-bottom:8px; }
.post-card h3{ font-size:18px; font-weight:700; margin:0 0 10px; }
.article{ max-width:800px; margin:0 auto; }
.article img{ width:100%; border-radius:14px; margin:0 0 28px; box-shadow:var(--shadow-card); }
.article h2{ font-size:26px; margin:34px 0 12px; }
.article p{ margin:0 0 18px; }

/* Thank-you / 404 centered */
.center-page{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 0; }
.center-page .big{ font-size:clamp(70px,16vw,150px); font-weight:800; line-height:1; background:var(--orange-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.center-page h1{ font-size:clamp(24px,3vw,34px); margin:10px 0 14px; }
.center-page p{ max-width:520px; margin:0 auto 26px; }

/* Generic page hero (interior pages) — faithful white style */
.page-hero{ position:relative; background:#fff; color:var(--heading); text-align:center; padding:110px 0 70px; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgxMjcsMjAwLDIxNSwwLjA2KSIgdmlld0JveD0iMCAwIDE5MjAgMTQ0MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTY2NC4zOSw3MjAsMTM3NCwxNDQwSDExOTAuN2wyOTAuMzgtNzIwTDExOTAuNywwSDEzNzRabS04MDUuODEsMEw1NjguMiwwaC0yLjVMODU2LjA4LDcyMCw1NjUuNywxNDQwaDIuNUw4NTguNDEsNzIwLjQzWm0yMjMtNzIwaC03NS40OGwyOTAuMzksNzIwLTI5MC4zOSw3MjBoNzUuNDhMMTM3Miw3MjBabTI1LDcyMEw4MTYuMiwwSDc5NC42M0wxMDg1LDcyMCw3OTQuNjMsMTQ0MEg4MTYuMmwyODguODctNzE2LjI2Wm01ODkuMjMsMC0yOTAuMzksNzIwSDE5MjBWMEgxNDA1LjQyWiIvPjwvc3ZnPg==") no-repeat right center/cover;
  pointer-events:none;
}
.page-hero > .container{ position:relative; z-index:1; }
.page-hero h1{ color:#006899; font-size:clamp(36px,5.5vw,65px); font-weight:800; text-transform:uppercase; margin:0; line-height:1.08; }
.page-hero__kicker{ color:#1c93d1; font-size:clamp(18px,2.4vw,26px); font-weight:600; margin:0 0 4px; }
.page-hero__rule{ width:80px; height:3px; background:#b5dcf3; border-radius:2px; margin:22px auto 0; }
.page-hero__cta{ margin-top:30px; width:auto; min-width:9em; padding-left:44px; padding-right:44px; }

/* =====================================================================
   Language switcher (EN / ES) — flag pill, L&C-style
   ===================================================================== */
.lang-switch{ display:inline-flex; align-items:center; gap:7px; flex-shrink:0; line-height:1;
  font-family:var(--ff-title); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-brand); border:1.5px solid #dfe4e8; border-radius:40px; padding:7px 13px;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.lang-switch .flag{ width:22px; height:auto; border-radius:2px; display:block; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.lang-switch:hover{ background:var(--blue-brand); border-color:var(--blue-brand); color:#fff; }
.topbar .lang-switch{ padding:4px 10px; font-size:11px; gap:6px; color:#fff; border-color:rgba(255,255,255,.45); opacity:1; }
.topbar .lang-switch .flag{ width:19px; box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.topbar .lang-switch:hover{ background:rgba(255,255,255,.16); border-color:#fff; color:#fff; }
.lang-switch--drawer{ display:flex; width:100%; justify-content:center; margin:18px 0 0; padding:12px; border-radius:12px; font-size:13px; }

/* Hero roller: manual controls (desktop only — the roller is hidden <=900px) */
.hero-roller{ cursor:grab; user-select:none; padding-right:58px; }
.hero-roller.is-dragging{ cursor:grabbing; }
.hero-list a{ cursor:inherit; -webkit-user-drag:none; }
.hero-roller__nav{ position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; z-index:2; }
.hero-roller__btn{ width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent;
  color:rgba(255,255,255,.75); display:grid; place-items:center; cursor:pointer;
  transition:color .25s var(--ease), transform .25s var(--ease); }
.hero-roller__btn svg{ width:24px; height:24px; fill:currentColor; }
.hero-roller__btn:hover{ color:#fff; transform:scale(1.15); }
.hero-roller__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* =====================================================================
   Titles — per-letter entrance (Kapital "gradual" effect)
   ===================================================================== */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.gs-word{ display:inline-block; white-space:nowrap; }
.gs-char{
  display:inline-block;
  opacity:0; transform:translateX(-0.45em);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--ci,0) * .035s);
  will-change:opacity, transform;
}
.gradual.gs-ready .gs-char{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .gs-char{ opacity:1; transform:none; transition:none; }
}

/* =====================================================================
   Plan request modal (web development pricing)
   ===================================================================== */
.plan-modal{ position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center; padding:20px; }
.plan-modal[hidden]{ display:none; }
.plan-modal__overlay{ position:absolute; inset:0; background:rgba(6,20,40,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s var(--ease); }
.plan-modal__panel{ position:relative; z-index:1; width:100%; max-width:560px; max-height:calc(100dvh - 40px); overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 40px 90px -30px rgba(2,20,50,.6); padding:clamp(24px,4vw,40px);
  transform:translateY(24px) scale(.98); opacity:0; transition:transform .35s var(--ease), opacity .35s var(--ease); }
.plan-modal.is-open .plan-modal__overlay{ opacity:1; }
.plan-modal.is-open .plan-modal__panel{ transform:none; opacity:1; }
.plan-modal__close{ position:absolute; top:14px; right:14px; width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
  background:var(--mist); color:var(--heading); display:grid; place-items:center; transition:background .2s var(--ease), color .2s var(--ease); }
.plan-modal__close svg{ width:18px; height:18px; }
.plan-modal__close:hover{ background:var(--orange-grad); color:#fff; }
.plan-modal__kicker{ margin:0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-2); }
.plan-modal__title{ margin:2px 0 18px; font-size:clamp(22px,3vw,28px); }
.plan-modal__summary{ background:var(--mist); border:1px solid #e6ebef; border-radius:12px; padding:18px 20px; margin:0 0 22px; }
.plan-modal__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; }
.plan-modal__name{ font-family:var(--ff-title); font-weight:800; font-size:18px; color:var(--heading); text-transform:uppercase; }
.plan-modal__price{ font-family:var(--ff-title); font-weight:800; font-size:20px; color:var(--blue-brand); white-space:nowrap; }
.plan-modal__features{ display:grid; grid-template-columns:1fr 1fr; gap:8px 26px; margin:0; }
@media(max-width:480px){ .plan-modal__features{ grid-template-columns:1fr; } }
.plan-modal__features li{ position:relative; padding-left:24px; font-size:13.5px; color:var(--ink); }
.plan-modal__features li::before{ content:""; position:absolute; left:0; top:3px; width:15px; height:15px; border-radius:50%;
  background:var(--blue-grad); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan-modal .contact-form > .btn{ display:flex; width:fit-content; margin:22px auto 0; }
body.no-scroll{ overflow:hidden; }
@media(prefers-reduced-motion:reduce){ .plan-modal__overlay,.plan-modal__panel{ transition:none; } }

/* SEO page — numbered process steps */
.seo-step{ position:relative; background:#fff; border-radius:16px; box-shadow:var(--shadow-card); padding:34px 28px 30px; overflow:hidden; }
.seo-step__n{ position:absolute; top:2px; right:16px; font-family:var(--ff-title); font-weight:800; font-size:66px; line-height:1; color:rgba(28,147,209,.10); pointer-events:none; }
.seo-step h3{ position:relative; font-size:19px; margin:0 0 10px; color:var(--heading); }
.seo-step p{ position:relative; font-size:14.5px; margin:0; }