/* ============================================================
   Dubaiceberg — Editorial Cinema · Aurora Iceberg (override layer)
   Loaded AFTER style.min.css. Reversible: remove the <link>.
   Strategy: remap brand tokens so the site-wide 4-stop rainbow
   gradient collapses to a single cool "ice" accent, then refine
   typography, buttons, cards, hero contrast. No image files touched.
   2026-07 · see _notes/B2B-REPOSITIONING-AUDIT.md
   ============================================================ */

/* ---- 0. Inter — the font the theme always intended (--font-primary: "Inter")
   but never loaded; browsers silently fell back to Helvetica/Arial.
   Self-hosted variable font, latin subset, 48 KB, weights 100-900. ---- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
}

/* ---- 1. Token remap: Aurora Iceberg — polar depth, luminous cyan, gold micro-accent ---- */
:root{
  /* single accent (luminous ice-cyan) */
  --color-primary:#54C8C4;
  --color-primary-rgba:rgb(84,200,196);
  --color-primary-rgba-2:rgba(84,200,196,0.14);
  --color-primary-alt:#8AE6E0;
  --color-primary-light:#8AE6E0;
  --color-primary-lightest:#AFF2ED;
  --color-secondary:#3B9E9A;
  --color-tertiary:#54C8C4;
  --color-tertiary-alt:#54C8C4;
  --color-pink:#8AE6E0;
  --color-light-green:#AFF2ED;

  /* grounds & ink — polar night */
  --color-dark:#0A121B;
  --color-darker:rgba(10,18,27,0.72);
  --color-blackest:#101C28;
  --color-lessdark:#142434;
  --color-heading:#F2F5F8;
  --color-body:#C3C9D1;
  --color-border:rgba(140,220,214,0.12);

  /* editorial extras */
  --ec-accent:#54C8C4;
  --ec-accent-bright:#8AE6E0;
  --ec-gold:#D4AF5E;
  --ec-panel:#101C28;
  --ec-panel-2:#142434;
  --ec-hairline:rgba(140,220,214,0.12);
}

/* polar aurora depth: fixed gradient layer + film grain */
body{ background:#070C12; }
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1300px 700px at 75% -14%, rgba(64,170,164,0.38), transparent 62%),
    radial-gradient(1000px 620px at -8% 22%, rgba(72,116,190,0.30), transparent 60%),
    radial-gradient(1400px 900px at 50% 55%, rgba(52,110,140,0.14), transparent 65%),
    radial-gradient(800px 480px at 55% 115%, rgba(46,135,168,0.26), transparent 62%),
    radial-gradient(600px 400px at 100% 65%, rgba(58,150,145,0.16), transparent 60%),
    linear-gradient(180deg,#132436 0%, #0D1826 42%, #081018 100%);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---- 2. Neutralize residual gradients explicitly ---- */
.theme-gradient,
.counter-style-1 .count-number{
  background:linear-gradient(92deg,#AFF2ED, #54C8C4 60%, #3B9E9A) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.bg-primary-gradient,
.bg-theme-gradient{
  background:var(--ec-accent) !important;
}
/* hide decorative rainbow blobs */
.rainbow-gradient-circle,
.rainbow-gradient-circle.theme-pink{
  display:none !important;
}

/* ---- 3. Typography: scale, weight, rhythm ---- */
.title,
h1,h2,h3,h4{
  color:var(--color-heading);
  letter-spacing:-0.015em;
}
h2,h3{ text-wrap:balance; }
/* NOT h1: the hero headline uses a JS-measured word-rotation (cd-headline) —
   balance shrinks its box and breaks centering */
.title.display-one,
.title.display-two{
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.04;
}
.slider-style-1 .title.display-two{
  font-size:clamp(2.6rem, 6vw, 5rem);
}
.section-title .title{ letter-spacing:-0.02em; }
.section-title .subtitle{
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:12px;
  font-weight:600;
  color:var(--ec-gold);
  text-shadow:0 0 20px rgba(212,175,94,0.3);
}
p, .description{
  color:var(--color-body);
  line-height:1.7;
}
.slider-area .inner .description,
.slider-area .description{
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
  /* theme sets percentage side-paddings sized for a full-width block;
     with a narrowed box they'd eat the whole content width */
  padding-left:0;
  padding-right:0;
  color:#E4E8ED;
  font-size:19px;
  font-weight:450;
  line-height:1.6;
  letter-spacing:0.005em;
}
@media (max-width:767px){
  .slider-area .inner .description,
  .slider-area .description{
    font-size:16.5px;
    line-height:1.55;
    max-width:100%;
    padding:0 4px;
  }
  .slider-style-1 .inner .title.display-two,
  .slider-style-1 .title.display-two{
    font-size:clamp(2.1rem, 9vw, 2.9rem);
  }
}

/* ---- 4. Header / logo ---- */
.rainbow-header.header-sticky.sticky{
  background:rgba(8,9,12,0.82) !important;
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--ec-hairline);
}
.mainmenu-nav .mainmenu > li > a{
  letter-spacing:0.01em;
}

/* ---- 5. Buttons: solid accent + calm ghost ---- */
a.btn-default,
button.btn-default,
div.btn-default{
  background:linear-gradient(135deg,#63D2CD,#3FAAA5) !important;
  border-color:transparent;
  border-radius:6px;
  color:#05201E !important;
  font-weight:600;
  letter-spacing:0.01em;
  text-shadow:none;
  box-shadow:0 6px 24px -8px rgba(84,200,196,0.45);
}
a.btn-default:hover,
button.btn-default:hover,
div.btn-default:hover{
  background:linear-gradient(135deg,#8AE6E0,#54C8C4) !important;
  box-shadow:0 10px 34px -10px rgba(138,230,224,0.6);
  filter:none;
  color:#05201E !important;
  transform:translateY(-1px);
}
/* secondary / outline treatment for the AI-help & non-primary buttons */
a.btn-default[href*="chat.digitalkilogram"],
a.btn-default.btn-border,
a.btn-default.btn-default-alt{
  background:transparent !important;
  border:1px solid var(--ec-hairline);
  color:var(--color-heading) !important;
}
a.btn-default[href*="chat.digitalkilogram"]:hover{
  background:rgba(255,255,255,0.04) !important;
  border-color:var(--ec-accent);
  color:#fff !important;
}

/* ---- 6. Cards & service tiles: flat, hairline, subtle lift ---- */
.rainbow-card,
.service.service__style--1,
.rainbow-card.portfolio,
.rbt-card{
  background:linear-gradient(165deg,#12202E 0%, #0E1A26 70%) !important;
  border:1px solid var(--ec-hairline) !important;
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(180,240,235,0.05);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.rainbow-card:hover,
.service.service__style--1:hover,
.rbt-card:hover{
  transform:translateY(-4px);
  border-color:rgba(84,200,196,0.45) !important;
  box-shadow:inset 0 1px 0 rgba(180,240,235,0.05), 0 18px 40px -22px rgba(0,0,0,0.8);
}
.service.service__style--1 .icon i{ color:var(--ec-accent); }
.service.service__style--1 .content .title a:hover{ color:var(--ec-accent); }

/* section backgrounds that used blackest → align to ground */
.bg-color-blackest{ background:transparent !important; }

/* soft aurora glows behind key sections — visible tonal movement down the page */
.rainbow-service-area,
.rainbow-portfolio-area,
.about-area,
.rainbow-accordion-area,
.additional-service-area{
  position:relative;
}
.rainbow-service-area::before,
.about-area::before,
.additional-service-area::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(1100px 640px at 16% 6%, rgba(64,170,164,0.16), transparent 64%);
}
.rainbow-portfolio-area::after,
.rainbow-accordion-area::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(1100px 640px at 86% 12%, rgba(72,116,190,0.16), transparent 64%);
}
.rainbow-service-area > *,
.rainbow-portfolio-area > *,
.about-area > *,
.rainbow-accordion-area > *,
.additional-service-area > *{
  position:relative; z-index:1;
}

/* ---- 7. Hero overlay: cinematic scrim for legibility ---- */
.slider-area[data-black-overlay]::before,
.slider-area::before{
  background-color:transparent !important;
  background-image:linear-gradient(180deg, rgba(6,8,12,0.18) 0%, rgba(6,8,12,0.40) 55%, rgba(6,8,12,0.66) 100%) !important;
  opacity:1 !important;
}

/* ---- 8. Links & accents ---- */
a{ transition:color .25s ease; }
a:hover{ color:var(--ec-accent-bright); }
.color-primary, .text-primary{ color:var(--ec-accent) !important; }

/* badges that were rainbow → quiet accent chip */
.rainbow-badge-card{
  background:rgba(212,175,94,0.12) !important;
  color:#E5C883 !important;
  border:1px solid rgba(212,175,94,0.3);
}

/* ---- 8b. Scroll-reveal reliability (CRITICAL) ----
   The theme hides every [data-sal] element at opacity:0 and only reveals it
   when sal.js gets an IntersectionObserver "enter" event. On slow loads (prod:
   late hero image + webfont shift the layout after sal initializes), in-view
   elements never receive that event and stay blank — whole sections render
   empty. Fix: content is visible by default (never JS-timing-dependent) and
   gets a JS-independent fade-in. sal's own animation still plays when it fires. */
[data-sal]{ opacity:1; }
[data-sal]:not(.sal-animate){ animation:ec-reveal .7s ease-out both; }
@keyframes ec-reveal{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* ---- 9. Motion: respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}