/*
Theme Name: Manova Tech
Theme URI: https://manovatech.com
Author: Manova Tech
Author URI: https://manovatech.com
Description: A premium, cinematic one-page WordPress theme for Manova Tech — a modern software studio. Features a particle-canvas hero, custom cursor, scroll-reveal animations, sticky-scroll process timeline, and a full set of sections (services, projects, process, tech stack, about, testimonials, blog, contact).
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: manova-tech
*/

/*──────────────────────────────────────────────────────────
  RESET & ROOT
──────────────────────────────────────────────────────────*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#050505;--white:#FFFFFF;--blue:#00afc1;
  --blue-light:#67e8ed;--blue-bright:#29d3df;
  --purple:#007f93;--purple-glow:rgba(0,127,147,.25);
  --cyan:#29d3df;--cyan-glow:rgba(41,211,223,.2);
  --emerald:#00a8a1;--rose:#22c7d6;
  --blue-glow:rgba(0,175,193,.35);--blue-dim:rgba(0,175,193,.08);
  --gray-50:#0D0D0D;--gray-100:#141414;--gray-200:#1E1E1E;
  --gray-300:#2A2A2A;--gray-400:#666;--gray-500:#999;--gray-600:#CCC;
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.175,.885,.32,1.275);
  /*
    Typography update: single premium sans (Inter) across display and
    body — the same approach Linear and (pre-Geist) Vercel use — instead
    of pairing it with a decorative display face. Cleaner, more
    consistent weight/spacing across every heading and paragraph, and
    one fewer font family to load.
  */
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
/*
  Global size refinement: every font-size, and most padding/gap values,
  in this stylesheet are written in rem, so a single root font-size
  change scales the whole site consistently — text, card padding,
  button height, badge size — while preserving every existing ratio
  (nothing about the visual hierarchy changes, only the scale). 15px
  instead of the browser default 16px is a deliberate, moderate
  reduction; large clamp()-based headings are additionally tuned
  directly since their viewport-relative middle value isn't affected by
  this alone.
*/
html{font-size:15px}
html{background:var(--black);color:var(--white);overflow-x:hidden;scroll-behavior:auto}
body{font-family:var(--font-body);line-height:1.65;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
::selection{background:var(--blue);color:var(--white)}
canvas{display:block}

/*──────────────────────────────────────────────────────────
  NOISE OVERLAY
──────────────────────────────────────────────────────────*/
body::after{
  content:'';position:fixed;inset:0;z-index:9998;
  pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:128px 128px;
}

/*──────────────────────────────────────────────────────────
  SCROLL PROGRESS BAR
──────────────────────────────────────────────────────────*/
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--purple),var(--rose),var(--blue));
  background-size:300% 100%;animation:progGrad 4s linear infinite;
  z-index:10001;width:0;transition:none;
}
@keyframes progGrad{0%{background-position:0% 0}100%{background-position:300% 0}}

/*──────────────────────────────────────────────────────────
  PREMIUM LOADER
──────────────────────────────────────────────────────────*/
.loader{
  position:fixed;inset:0;z-index:10000;
  /* Keep the cinematic dark surface in the Manova palette without ever
     exposing a pure-black frame. The restrained teal bloom is part of the
     existing brand system and also gives the hero something to dissolve
     through instead of cutting from one flat colour to another. */
  background-color:var(--palette-black-soft,#0a0f0f);
  background-image:radial-gradient(circle at 50% 46%,rgba(53,213,200,.075),transparent 54%);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  opacity:1;transform:translate3d(0,0,0) scale(1);
  isolation:isolate;contain:paint;
  backface-visibility:hidden;
  transition:opacity .72s var(--ease-expo),transform .72s var(--ease-expo),visibility 0s .72s;
  animation:loaderInteractionFailsafe .72s 5s var(--ease-expo) forwards;
}
.loader.done{
  opacity:0;transform:translate3d(0,0,0) scale(1.012);
  pointer-events:none;visibility:hidden;animation:none;
}
@keyframes loaderInteractionFailsafe{
  to{opacity:0;transform:translate3d(0,0,0) scale(1.012);pointer-events:none;visibility:hidden}
}
.loader-logo{
  font-family:var(--font-display);font-size:clamp(1.76rem,4.68vw,3.69rem);
  font-weight:800;letter-spacing:-.04em;
  position:relative;overflow:hidden;
  opacity:0;
  transition:opacity .62s var(--ease-expo);
}
.loader.is-running .loader-logo{opacity:1}
.loader-logo .char{
  display:inline-block;opacity:0;
  transform:translateY(100%) rotateX(-80deg);
  animation:loaderChar .8s var(--ease-expo) forwards;
}
@keyframes loaderChar{to{opacity:1;transform:translateY(0) rotateX(0)}}

.loader-bar-wrap{
  width:200px;height:1px;background:rgba(53,213,200,.16);
  margin-top:2rem;border-radius:1px;overflow:hidden;
  opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .5s .12s var(--ease-expo),transform .6s .12s var(--ease-expo);
}
.loader.is-running .loader-bar-wrap{opacity:1;transform:translate3d(0,0,0)}
.loader-bar{
  height:100%;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--purple));
  transform:translate3d(0,0,0) scaleX(0);transform-origin:left center;
  transition:none;will-change:transform;backface-visibility:hidden;
  border-radius:1px;
}
.loader-percent{
  margin-top:1rem;font-size:.8rem;font-weight:500;
  color:var(--gray-500);letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translate3d(0,6px,0);
  transition:opacity .5s .18s var(--ease-expo),transform .6s .18s var(--ease-expo);
}
.loader.is-running .loader-percent{opacity:1;transform:translate3d(0,0,0)}
.loader.is-complete .loader-bar{will-change:auto}

/*──────────────────────────────────────────────────────────
  CUSTOM CURSOR
──────────────────────────────────────────────────────────*/
.cursor{
  position:fixed;top:0;left:0;z-index:9999;
  pointer-events:none;mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0);
  will-change:transform;
  backface-visibility:hidden;
}
.cursor-dot{
  width:8px;height:8px;background:var(--white);border-radius:50%;
  position:absolute;transform:translate(-50%,-50%);
  transition:width .3s var(--ease-spring),height .3s var(--ease-spring),
    background .3s;
}
.cursor-ring{
  width:44px;height:44px;
  border:1.5px solid rgba(255,255,255,.4);border-radius:50%;
  position:absolute;transform:translate(-50%,-50%);
  transition:width .4s var(--ease-spring),height .4s var(--ease-spring),
    border-color .3s,background .3s;
}
.cursor-text{
  position:absolute;transform:translate(-50%,-50%);
  font-size:.65rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--white);
  opacity:0;transition:opacity .3s;white-space:nowrap;
}
.cursor.hovering .cursor-ring{
  width:80px;height:80px;
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
}
.cursor.hovering .cursor-text{opacity:1}
.cursor.link-hover .cursor-ring{
  width:70px;height:70px;border-color:var(--blue);
  background:rgba(0,175,193,.08);
}
@media(max-width:768px){.cursor{display:none}}
@media(pointer:coarse){.cursor{display:none}}

/*──────────────────────────────────────────────────────────
  NAVIGATION
──────────────────────────────────────────────────────────*/
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:.45rem clamp(1.25rem,3vw,2.75rem);
  display:flex;align-items:center;justify-content:space-between;
  transition:transform .38s var(--ease-expo),background-color .28s ease,
    border-color .28s ease,box-shadow .28s ease,padding .28s ease;
}
.nav.scrolled{
  padding:.35rem clamp(1.25rem,3vw,2.75rem);
  background:rgba(5,5,5,.8);backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.nav-logo{
  font-family:var(--font-display);font-weight:800;
  font-size:1.3rem;letter-spacing:-.03em;
  color:var(--white);text-decoration:none;
}
.nav-logo span{color:var(--blue)}
.nav-links{display:flex;gap:2.2rem;list-style:none}
.nav-links a{
  color:var(--gray-500);text-decoration:none;
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
  position:relative;transition:color .3s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;
  width:0;height:1.5px;background:var(--blue);
  transition:width .4s var(--ease-expo);
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{width:100%}
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:2.25rem;padding:.48rem 1.1rem;border:1px solid rgba(255,255,255,.15);
  border-radius:100px;color:var(--white);text-decoration:none;
  font-size:.75rem;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,
    box-shadow .25s ease;position:relative;overflow:hidden;
}
.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  transform:scaleX(0);
  transform-origin:right;transition:transform .5s var(--ease-expo);
  border-radius:inherit;
}
.nav-cta:hover::before{transform:scaleX(1);transform-origin:left}
.nav-cta span{position:relative;z-index:1}
.nav-cta .arrow{display:inline-block;font-size:.9rem;line-height:1;transition:transform .25s ease}
.nav-cta:is(:hover,:focus-visible) .arrow{transform:translateX(2px)}
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  width:40px;height:40px;padding:0;position:relative;
  touch-action:manipulation;
}
.hamburger i{
  position:absolute;left:6px;right:6px;width:auto;height:1.5px;
  background:var(--white);transition:all .4s var(--ease-expo);
}
.hamburger i:nth-child(1){top:10px}
.hamburger i:nth-child(2){top:50%;transform:translateY(-50%)}
.hamburger i:nth-child(3){bottom:10px;left:17px}
.hamburger.active i:nth-child(1){top:50%;transform:rotate(45deg)}
.hamburger.active i:nth-child(2){opacity:0;transform:translateX(20px)}
.hamburger.active i:nth-child(3){bottom:50%;left:6px;transform:rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:999;
  background:var(--black);
  display:flex;flex-direction:column;
  justify-content:center;padding:3rem;
  clip-path:circle(0% at calc(100% - 2.5rem) 2.5rem);
  transition:clip-path .8s var(--ease-expo);
}
.mobile-nav.open{clip-path:circle(150% at calc(100% - 2.5rem) 2.5rem)}
.mobile-nav a{
  font-family:var(--font-display);
  font-size:clamp(1.76rem,5.46vw,3.28rem);font-weight:700;
  color:var(--white);text-decoration:none;
  letter-spacing:-.03em;display:block;
  padding:.3rem 0;opacity:.4;
  transition:all .4s var(--ease-expo);
  transform:translateX(-30px);
}
.mobile-nav.open a{transform:translateX(0)}
.mobile-nav a:hover{opacity:1;transform:translateX(1.5rem)!important;color:var(--blue)}

@media(max-width:900px){
  .nav-links,.nav-cta{display:none!important}
  .hamburger{display:block}
}

/*──────────────────────────────────────────────────────────
  HERO
──────────────────────────────────────────────────────────*/
.hero{
  min-height:100vh;display:flex;
  align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:6rem clamp(1.5rem,5vw,4rem) 3rem;
}
#heroCanvas{
  position:absolute;inset:0;z-index:0;
  display:block;width:100%;height:100%;
  pointer-events:none;
}
.hero-aurora{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 80% 60% at 15% 40%, rgba(0,175,193,.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 30%, rgba(0,127,147,.1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 70% 70%, rgba(41,211,223,.07) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 40% 80%, rgba(0,175,193,.06) 0%, transparent 50%);
  animation:auroraShift 15s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{opacity:.8;transform:scale(1) rotate(0deg)}
  100%{opacity:1;transform:scale(1.05) rotate(2deg)}
}
.hero-grid-bg{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black,transparent);
}
.hero-radial{
  position:absolute;width:700px;height:700px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(0,175,193,.18),rgba(0,127,147,.08) 40%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1;animation:breathe 8s ease-in-out infinite;
  filter:blur(50px);
}
@keyframes breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}
  50%{transform:translate(-50%,-50%) scale(1.15);opacity:.9}
}

.hero-content{position:relative;z-index:3;text-align:center;max-width:1100px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.55rem 1.4rem;
  border:1px solid rgba(0,175,193,.25);border-radius:100px;
  font-size:.75rem;font-weight:600;color:var(--blue);
  background:rgba(0,175,193,.04);
  backdrop-filter:blur(12px);margin-bottom:2.5rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.hero-eyebrow-dot{
  width:6px;height:6px;background:var(--blue);border-radius:50%;
  animation:dotPulse 2.5s ease-in-out infinite;
  box-shadow:0 0 12px var(--blue-glow);
}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.8)}}

.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.82rem,7.41vw,6.97rem);
  font-weight:800;line-height:.92;
  letter-spacing:-.05em;margin-bottom:2rem;
}
.hero-line{display:block;overflow:hidden;position:relative}
.hero-line-inner{
  display:inline-block;
}
/* The off-screen start state applies ONLY when JS is confirmed running
   (html.js is set before first paint in header.php). Previously this
   transform was unconditional, so any failure to run the reveal left
   the headline permanently parked below its own overflow:hidden line
   box — invisible, with no recovery. */
.js .hero-line-inner:not(.revealed){
  transform:translateY(115%);
  will-change:transform;
}
.hero-line-inner.revealed{
  transform:translateY(0);
  transition:transform .95s var(--ease-expo);
  will-change:auto;
}
.gradient-text{
  background:linear-gradient(135deg,var(--blue),var(--cyan) 30%,var(--purple) 60%,var(--blue-light) 80%,var(--blue));
  background-size:300% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradFlow 6s ease-in-out infinite;
}
@keyframes gradFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.hero-sub{
  font-size:clamp(0.88rem,1.56vw,1.07rem);color:var(--gray-500);
  max-width:520px;margin:0 auto 3rem;line-height:1.75;font-weight:400;
}
.js .hero-sub:not(.revealed){opacity:0;transform:translateY(24px)}
.hero-sub.revealed{
  opacity:1;transform:translateY(0);
  /* Opacity + transform only — never `all`, which would also animate
     unrelated inherited properties and cost paint work for nothing. */
  transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo);
}
.hero-btns{
  display:flex;gap:clamp(.8rem,2vw,1.35rem);justify-content:center;align-items:center;flex-wrap:wrap;
}
.js .hero-btns:not(.revealed){opacity:0;transform:translateY(24px)}
.hero-btns.revealed{
  opacity:1;transform:translateY(0);
  transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo);
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:.85rem 2rem;border-radius:100px;
  font-size:.85rem;font-weight:600;cursor:pointer;
  text-decoration:none;position:relative;overflow:hidden;
  transition:all .5s var(--ease-expo);border:none;
  font-family:'Inter',sans-serif;
  min-height:48px;
  white-space:nowrap;
}
.btn-fill{
  background:var(--blue);color:var(--white);
  box-shadow:0 0 0 0 var(--blue-glow);
}
.btn-fill:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 40px var(--blue-glow),0 0 80px rgba(0,175,193,.15);
}
.btn-fill .btn-bg{
  position:absolute;inset:0;background:linear-gradient(135deg,#29d3df,var(--purple) 80%,var(--blue));
  opacity:0;transition:opacity .4s;border-radius:inherit;
}
.btn-fill:hover .btn-bg{opacity:1}
.btn-outline{
  background:transparent;color:var(--white);
  border:1px solid rgba(255,255,255,.15);
}
.btn-outline:hover{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.03);
  transform:translateY(-2px);
}
.btn span{position:relative;z-index:1}
.btn .arrow{
  transition:transform .3s var(--ease-expo);
  position:relative;z-index:1;
}
.btn:hover .arrow{transform:translateX(5px)}

/* SCROLL INDICATOR */
.scroll-hint{
  position:absolute;bottom:2.5rem;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  opacity:0;animation:fadeUp 1s 2s var(--ease-expo) forwards;
}
@keyframes fadeUp{to{opacity:1}}
.scroll-mouse{
  width:22px;height:36px;border:1.5px solid rgba(255,255,255,.25);
  border-radius:11px;position:relative;
}
.scroll-mouse::after{
  content:'';position:absolute;top:6px;left:50%;
  width:3px;height:8px;background:var(--blue);border-radius:2px;
  transform:translateX(-50%);
  animation:scrollWheel 2s ease-in-out infinite;
}
@keyframes scrollWheel{
  0%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(14px)}
}
.scroll-hint span{
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray-500);
}

/*──────────────────────────────────────────────────────────
  SECTION COMMONS
──────────────────────────────────────────────────────────*/
section{padding:clamp(5rem,12vw,10rem) clamp(1.5rem,5vw,4rem)}
.container{max-width:1400px;margin:0 auto}
.section-label{
  font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin-bottom:1.2rem;
  display:flex;align-items:center;gap:.8rem;
}
.section-label::before{
  content:'';width:24px;height:1px;background:var(--blue);
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(2.11rem,4.29vw,3.69rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.05;
  background:linear-gradient(180deg,var(--white) 40%,var(--gray-500));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.section-sub{
  font-size:clamp(0.84rem,1.09vw,0.94rem);color:var(--gray-500);
  line-height:1.75;max-width:480px;margin-top:1.2rem;
}

/* REVEAL SYSTEM */
.r{opacity:0;transform:translateY(70px);transition:all 1s var(--ease-expo)}
.r.v{opacity:1;transform:translateY(0)}
.r-l{opacity:0;transform:translateX(-70px);transition:all 1s var(--ease-expo)}
.r-l.v{opacity:1;transform:translateX(0)}
.r-r{opacity:0;transform:translateX(70px);transition:all 1s var(--ease-expo)}
.r-r.v{opacity:1;transform:translateX(0)}
.r-s{opacity:0;transform:scale(.85);transition:all 1s var(--ease-expo)}
.r-s.v{opacity:1;transform:scale(1)}

.stg .r:nth-child(1){transition-delay:0s}
.stg .r:nth-child(2){transition-delay:.08s}
.stg .r:nth-child(3){transition-delay:.16s}
.stg .r:nth-child(4){transition-delay:.24s}
.stg .r:nth-child(5){transition-delay:.32s}
.stg .r:nth-child(6){transition-delay:.40s}
.stg .r:nth-child(7){transition-delay:.48s}
.stg .r:nth-child(8){transition-delay:.56s}
.stg .r:nth-child(9){transition-delay:.64s}
.stg .r:nth-child(10){transition-delay:.72s}
.stg .r:nth-child(11){transition-delay:.80s}
.stg .r:nth-child(12){transition-delay:.88s}

/*──────────────────────────────────────────────────────────
  MARQUEE BANNER
──────────────────────────────────────────────────────────*/
.marquee{
  overflow:hidden;border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
  padding:1.8rem 0;
}
.marquee-track{
  display:flex;gap:3rem;
  animation:marquee 30s linear infinite;
  width:max-content;
}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{
  font-family:var(--font-display);
  font-size:clamp(1.06rem,2.34vw,1.64rem);font-weight:700;
  letter-spacing:-.02em;white-space:nowrap;color:var(--gray-400);
  display:flex;align-items:center;gap:2rem;
}
.marquee-item .dot{
  width:8px;height:8px;border-radius:50%;background:var(--blue);
  flex-shrink:0;
}

/*──────────────────────────────────────────────────────────
  SERVICES
──────────────────────────────────────────────────────────*/
.services .container{position:relative}
.services-header{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;
  margin-bottom:5rem;align-items:end;
}
@media(max-width:768px){.services-header{grid-template-columns:1fr}}
.svc-row{
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:clamp(1rem,3vw,3rem);
  padding:1.6rem 0;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.05);
  transition:all .5s var(--ease-expo);
  position:relative;
}
.svc-row:last-child{border-bottom:1px solid rgba(255,255,255,.05)}
.svc-row::before{
  content:'';position:absolute;inset:0 -2rem;
  background:linear-gradient(90deg,transparent,var(--row-glow,var(--blue-dim)),transparent);
  opacity:0;transition:opacity .5s;border-radius:4px;
}
.svc-row:hover::before{opacity:1}
.svc-row:nth-child(1){--row-glow:rgba(0,175,193,.06)}
.svc-row:nth-child(2){--row-glow:rgba(0,127,147,.06)}
.svc-row:nth-child(3){--row-glow:rgba(41,211,223,.06)}
.svc-row:nth-child(4){--row-glow:rgba(0,168,161,.06)}
.svc-row:nth-child(5){--row-glow:rgba(103,232,237,.06)}
.svc-row:nth-child(6){--row-glow:rgba(41,211,223,.06)}
.svc-row:nth-child(7){--row-glow:rgba(34,199,214,.06)}
.svc-row:nth-child(8){--row-glow:rgba(0,127,147,.06)}
.svc-row:hover{padding-left:1rem}
.svc-num{
  font-size:.75rem;color:var(--gray-400);font-weight:600;
  font-variant-numeric:tabular-nums;min-width:1.8rem;
  position:relative;z-index:1;
}
.svc-name{
  font-family:var(--font-display);
  font-size:clamp(1.23rem,2.73vw,2.05rem);font-weight:700;
  letter-spacing:-.03em;position:relative;z-index:1;
  transition:color .4s;
}
.svc-row:nth-child(1):hover .svc-name{color:var(--blue)}
.svc-row:nth-child(2):hover .svc-name{color:var(--purple)}
.svc-row:nth-child(3):hover .svc-name{color:var(--cyan)}
.svc-row:nth-child(4):hover .svc-name{color:var(--emerald)}
.svc-row:nth-child(5):hover .svc-name{color:var(--blue-light)}
.svc-row:nth-child(6):hover .svc-name{color:var(--cyan)}
.svc-row:nth-child(7):hover .svc-name{color:var(--rose)}
.svc-row:nth-child(8):hover .svc-name{color:var(--purple)}
.svc-desc{
  color:var(--gray-400);font-size:.88rem;max-width:320px;
  position:relative;z-index:1;
  opacity:0;transform:translateX(10px);
  transition:all .5s var(--ease-expo);
}
.svc-row:hover .svc-desc{opacity:1;transform:translateX(0)}
.svc-arrow{
  font-size:1.5rem;color:var(--gray-400);
  position:relative;z-index:1;
  transition:all .4s var(--ease-expo);
}
.svc-row:hover .svc-arrow{transform:translateX(10px) rotate(-45deg)}
.svc-row:nth-child(1):hover .svc-arrow{color:var(--blue)}
.svc-row:nth-child(2):hover .svc-arrow{color:var(--purple)}
.svc-row:nth-child(3):hover .svc-arrow{color:var(--cyan)}
.svc-row:nth-child(4):hover .svc-arrow{color:var(--emerald)}
.svc-row:nth-child(5):hover .svc-arrow{color:var(--blue-light)}
.svc-row:nth-child(6):hover .svc-arrow{color:var(--cyan)}
.svc-row:nth-child(7):hover .svc-arrow{color:var(--rose)}
.svc-row:nth-child(8):hover .svc-arrow{color:var(--purple)}
/* Hover preview image */
.svc-preview{
  position:fixed;width:min(360px,calc(100vw - 32px));height:230px;
  border-radius:18px;overflow:hidden;
  pointer-events:none;z-index:100;
  opacity:0;transform:scale(.9);
  transition:opacity .3s,transform .4s var(--ease-expo);
  box-shadow:0 24px 70px rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.14);
  background:#08090d;
}
.svc-preview.show{opacity:1;transform:scale(1)}
.svc-preview-inner{
  width:100%;height:100%;
  display:flex;align-items:flex-end;justify-content:flex-start;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  transition:transform .65s var(--ease-expo);
}
.svc-preview.show .svc-preview-inner{transform:scale(1)}
.svc-preview-inner::after{
  content:"Service preview";
  margin:1rem;
  padding:.5rem .7rem;
  border-radius:999px;
  background:rgba(5,6,9,.76);
  color:#fff;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

@media(max-width:768px){
  .hero-btns{flex-direction:column;align-items:stretch;width:min(100%,320px);margin-inline:auto}
  .hero-btns .btn{width:100%;padding-inline:1.25rem}
  .svc-row{grid-template-columns:auto 1fr auto;gap:1rem}
  .svc-desc{display:none}
}

/*──────────────────────────────────────────────────────────
  PROJECTS
──────────────────────────────────────────────────────────*/
.projects .container{}
.projects-header{margin-bottom:5rem}
.proj{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
  margin-bottom:clamp(6rem,12vw,10rem);
}
.proj:nth-child(even){direction:rtl}
.proj:nth-child(even) > *{direction:ltr}
.proj-img{
  position:relative;overflow:hidden;border-radius:16px;
  aspect-ratio:16/11;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.proj-img::after{
  content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,transparent 50%,rgba(5,5,5,.4));
  pointer-events:none;border-radius:inherit;
}
.proj-img-inner{
  width:100%;height:100%;position:relative;
  transition:transform .8s var(--ease-expo);
}
.proj-img:hover .proj-img-inner{transform:scale(1.05)}
/* Image reveal mask */
.proj-img-mask{
  position:absolute;inset:0;background:var(--black);
  transform-origin:left;z-index:2;
  transition:transform 1.2s var(--ease-expo);
}
.proj-img.v .proj-img-mask{transform:scaleX(0)}
/* Abstract visual inside */
.proj-visual{
  width:100%;height:100%;position:relative;
  overflow:hidden;
}
.proj-visual-bg{
  position:absolute;inset:0;
}
.proj-visual .shape{
  position:absolute;border-radius:8px;
  transition:transform .6s var(--ease-expo);
}
.proj-img:hover .shape{transform:translate(-8px,-8px)}

.proj-info{}
.proj-cat{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin-bottom:.8rem;
  display:flex;align-items:center;gap:.6rem;
}
.proj-cat::before{content:'';width:16px;height:1px;background:var(--blue)}
.proj-title{
  font-family:var(--font-display);
  font-size:clamp(1.41rem,2.73vw,2.3rem);font-weight:700;
  letter-spacing:-.03em;margin-bottom:1rem;line-height:1.15;
}
.proj-text{color:var(--gray-500);line-height:1.75;margin-bottom:1.8rem}
.proj-link{
  color:var(--blue);text-decoration:none;font-weight:700;
  font-size:.9rem;display:inline-flex;align-items:center;gap:.6rem;
  position:relative;
}
.proj-link::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:0;height:1.5px;background:var(--blue);
  transition:width .4s var(--ease-expo);
}
.proj-link:hover::after{width:100%}
.proj-link .arr{transition:transform .3s}
.proj-link:hover .arr{transform:translateX(6px)}

@media(max-width:768px){
  .proj{grid-template-columns:1fr}
  .proj:nth-child(even){direction:ltr}
}

/*──────────────────────────────────────────────────────────
  PROCESS – STICKY TIMELINE
──────────────────────────────────────────────────────────*/
.process .container{
  display:grid;grid-template-columns:.4fr .6fr;
  gap:clamp(2rem,5vw,6rem);
}
.process-left{position:sticky;top:30vh;align-self:start}
.process-steps{
  --process-rail-gap:clamp(1.15rem,2vw,1.7rem);
  padding:1.6rem 0 1.6rem var(--process-rail-gap);
}
.step{
  position:relative;
  padding:2.05rem 0 2.15rem;
  border-top:1px solid rgba(255,255,255,.05);
  opacity:.3;transition:all .6s var(--ease-expo);
}
.step::before{
  content:'';
  position:absolute;
  left:calc(var(--process-rail-gap) * -1);
  top:2.45rem;
  width:var(--process-rail-gap);
  height:1px;
  background:linear-gradient(90deg,var(--blue),rgba(0,175,193,.18));
  opacity:.42;
  transform-origin:left;
  transform:scaleX(.65);
  transition:opacity .45s var(--ease-expo),transform .45s var(--ease-expo);
}
.step::after{
  content:'';
  position:absolute;
  left:calc((var(--process-rail-gap) + 5px) * -1);
  top:calc(2.45rem - 5px);
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--black);
  border:2px solid rgba(0,175,193,.52);
  box-shadow:0 0 0 5px rgba(0,175,193,.04);
  opacity:.8;
  transition:border-color .45s var(--ease-expo),box-shadow .45s var(--ease-expo),background .45s var(--ease-expo);
}
.step.active{opacity:1}
.step.active::before{opacity:1;transform:scaleX(1)}
.step.active::after{
  background:var(--blue);
  border-color:var(--blue);
  box-shadow:0 0 0 5px rgba(0,175,193,.11),0 0 16px var(--blue-glow);
}
.step-label{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin-bottom:.5rem;
}
.step-title{
  font-family:var(--font-display);
  font-size:clamp(1.06rem,1.56vw,1.39rem);font-weight:700;
  letter-spacing:-.02em;margin-bottom:.7rem;
  transition:transform .4s var(--ease-expo);
}
.step.active .step-title{transform:translateX(.25rem)}
.step-text{color:var(--gray-500);line-height:1.7;max-width:420px;font-size:.92rem}
.process-progress{
  width:2px;height:0;background:var(--blue);
  position:absolute;left:0;top:0;
  transition:height .05s linear;
  box-shadow:0 0 12px var(--blue-glow);
}
.process-track{
  position:absolute;left:0;top:0;width:2px;height:100%;
  background:rgba(255,255,255,.05);
}

@media(max-width:900px){
  .process .container{grid-template-columns:1fr}
  .process-left{position:relative;top:0}
  .process-steps{--process-rail-gap:clamp(1rem,4vw,1.35rem)}
}

@media(max-width:520px){
  .process-steps{--process-rail-gap:1rem}
  .step{padding:1.7rem 0 1.85rem}
  .step::before{top:2.08rem}
  .step::after{top:calc(2.08rem - 5px)}
}

/*──────────────────────────────────────────────────────────
  TECHNOLOGIES – FLOATING ORBS
──────────────────────────────────────────────────────────*/
.tech{text-align:center}
.tech-orbit{
  position:relative;
  width:min(620px,88vw);height:min(620px,88vw);
  margin:3.5rem auto 0;
}
.tech-center{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:2;
}
.tech-center-orb{
  width:124px;height:124px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(0,175,193,.3),rgba(0,175,193,.05));
  border:1px solid rgba(0,175,193,.2);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
  box-shadow:0 0 60px rgba(0,175,193,.15);
}
.tech-center-orb span{
  font-family:var(--font-display);font-weight:800;
  font-size:.78rem;letter-spacing:.04em;
  text-align:center;line-height:1.15;
}
.tech-ring{
  position:absolute;inset:0;
  border:1px solid rgba(255,255,255,.04);border-radius:50%;
}
.tech-ring-2{
  position:absolute;inset:15%;
  border:1px solid rgba(0,175,193,.06);border-radius:50%;
}
.tech-node{
  position:absolute;
  transform:translate(-50%,-50%);
  transition:all .4s var(--ease-spring);
  cursor:default;z-index:3;
}
.tech-node:hover{transform:translate(-50%,-50%) scale(1.2)!important}
.tech-node-inner{
  width:clamp(58px,9vw,74px);height:clamp(58px,9vw,74px);
  border-radius:50%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.3rem;
  transition:all .4s var(--ease-spring);
}
.tech-node:hover .tech-node-inner{
  border-color:var(--tc,var(--blue));
  background:rgba(255,255,255,.04);
  box-shadow:0 0 30px rgba(0,175,193,.12);
}
.tech-node-logo{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tc) 45%,transparent))}
.tech-node-name{font-size:.55rem;color:var(--gray-500);font-weight:500}

/* Connection lines via SVG */
.tech-lines{position:absolute;inset:0;z-index:1}

/*──────────────────────────────────────────────────────────
  ABOUT
──────────────────────────────────────────────────────────*/
.about .container{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,7rem);align-items:center;
}
.about-text-wrap .section-title{margin-bottom:2rem}
.about-p{color:var(--gray-500);line-height:1.8;margin-bottom:1.2rem;font-size:.95rem}
.about-visual{
  position:relative;aspect-ratio:1;border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,var(--gray-100),var(--gray-50));
}
.about-orbs{position:absolute;inset:0}
.about-orbs .orb{
  position:absolute;border-radius:50%;
  border:1px solid rgba(0,175,193,.12);
  animation:orbSpin 25s linear infinite;
}
.about-orbs .orb:nth-child(1){inset:5%}
.about-orbs .orb:nth-child(2){inset:18%;animation-direction:reverse;animation-duration:20s}
.about-orbs .orb:nth-child(3){inset:32%;animation-duration:15s}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.about-orbs .core{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 50px var(--blue-glow),0 0 100px rgba(0,175,193,.15);
}

.stats{
  margin-top:5rem;display:grid;
  grid-template-columns:repeat(4,1fr);gap:2rem;
  padding-top:4rem;
  border-top:1px solid rgba(255,255,255,.05);
}
.stat{text-align:center}
.stat-val{
  font-family:var(--font-display);
  font-size:clamp(1.94rem,3.51vw,3.28rem);font-weight:800;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.stat-val .accent{
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-lbl{font-size:.78rem;color:var(--gray-400);margin-top:.3rem;font-weight:500}

@media(max-width:768px){
  .about .container{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/*──────────────────────────────────────────────────────────
  STORIES — premium editorial card grid (replaces the former
  glass-slider "Client Stories" section). Light cards float on
  the dark brand-soft surface, echoing the approved reference:
  a large decorative quote mark, plain (non-italic) editorial
  quote text, and a tinted footer band carrying the attribution.
──────────────────────────────────────────────────────────*/
.stories{overflow:hidden}
.stories .container{text-align:center}
.stories-track-wrap{
  margin-top:4rem;overflow:visible;
  position:relative;cursor:grab;
}
.stories-track{
  display:flex;gap:1.75rem;
  transition:transform .8s var(--ease-expo);
}
.story-card{
  flex:0 0 min(380px,85vw);
  width:min(380px,85vw);
  border-radius:22px;
  background:#F5F3FC;
  border:1px solid rgba(17,17,17,.05);
  text-align:left;flex-shrink:0;
  overflow:hidden;
  transition:transform .5s var(--ease-expo),box-shadow .5s var(--ease-expo);
}
.story-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(17,17,20,.28)}
.story-card-body{padding:clamp(1.7rem,3vw,2.2rem) clamp(1.7rem,3vw,2.2rem) 1.6rem}
.story-quote{
  display:block;width:2.6rem;height:auto;margin-bottom:1.1rem;
  color:var(--purple);opacity:.85;
}
.story-text{
  font-size:clamp(.92rem,1.2vw,1rem);
  color:#3B3B44;line-height:1.7;
  min-height:6.5em;
}
.story-foot{
  display:flex;align-items:center;gap:.7rem;
  padding:1.1rem clamp(1.7rem,3vw,2.2rem);
  background:rgba(0,175,193,.08);
  border-top:1px solid rgba(17,17,17,.05);
}
.story-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  color:#fff;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--av-a,var(--blue)),var(--av-b,var(--purple)));
}
.story-author{font-weight:700;color:#111;font-size:.9rem;line-height:1.3}
.story-role{font-size:.78rem;color:#6B6B76;margin-top:.1rem}

.stories-dots{
  display:flex;gap:.5rem;justify-content:center;margin-top:2.5rem;
}
.story-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--gray-300);border:none;cursor:pointer;
  transition:all .3s;padding:0;
}
.story-dot.active{background:var(--blue);width:28px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  .story-card{transition:none}
  .story-card:hover{transform:none}
}


/*──────────────────────────────────────────────────────────
  BLOG — three equal editorial cards.

  WHAT WAS ACTUALLY BROKEN
  The oversized first card was not in this file at all. This source
  already described three equal columns; the served style.min.css was
  six minutes older and still carried the previous layout —
  `grid-template-columns:1.2fr .8fr .8fr` with
  `.blog-card:first-child{grid-row:span 2}` and a 3/4 portrait image on
  that card only. So the browser rendered one card 50% wider, double
  height, and in a different aspect ratio to its neighbours. The min
  file is regenerated from this source now, which is the real fix.

  WHAT CHANGED HERE
  - The deliberate stagger on card 2 (`margin-top:clamp(0,3vw,2.25rem)`)
    is gone. It was intended as magazine asymmetry, but with three
    panelled cards it just reads as one card having slipped out of
    alignment — the opposite of the balance this section needs.
  - Cards stretch to equal height and their CTAs bottom-align, so the
    row terminates on one line regardless of title or excerpt length.
  - One image ratio (16/10) at every breakpoint. The old tablet rule
    promoted card 3 to full width at 21/9, which reintroduced exactly
    the inconsistency being fixed.
  - Cards are proper panels: hairline border, contained radius, and a
    lift with shadow on hover rather than a bare translate.

  Colour comes from section-rhythm.css — the section is
  data-surface="stone", so `.blog-card` picks up the light-surface panel
  background and hairline automatically. Nothing here hardcodes a
  surface colour.
──────────────────────────────────────────────────────────*/
.blog-header{
  display:flex;justify-content:space-between;
  align-items:flex-end;margin-bottom:clamp(2.5rem,4vw,3.5rem);
  flex-wrap:wrap;gap:1.25rem;
}
.blog-header .section-title{max-width:22ch;margin:0}

.blog-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.2vw,2rem);
  align-items:stretch;
}

.blog-card{
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;isolation:isolate;
  text-decoration:none;color:inherit;cursor:pointer;
  border-radius:16px;
  border:1px solid var(--s-panel-brd,rgba(255,255,255,.08));
  transition:transform .5s var(--ease-expo),box-shadow .5s var(--ease-expo),border-color .4s ease;
}
.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 50px -26px rgba(8,12,20,.35);
}

/* Media — one ratio everywhere, so the three tops always line up. */
.blog-card-img{
  aspect-ratio:16/10;overflow:hidden;position:relative;
  background:var(--gray-100);flex:none;
}
.blog-card-img-bg{width:100%;height:100%;transition:transform .8s var(--ease-expo)}
.blog-card-img-bg img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card:hover .blog-card-img-bg{transform:scale(1.05)}
/* Hairline between media and body, drawn inside the media box so it
   follows the card radius instead of cutting across it. */
.blog-card-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -1px 0 var(--s-panel-brd,rgba(255,255,255,.08));
}

/* Body — flex column so the CTA can bottom-align across all cards. */
.blog-card-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1.1rem,1.6vw,1.45rem);
}
.blog-card-tag{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-light);font-weight:700;margin-bottom:.6rem;
}
.blog-card-title{
  font-family:var(--font-display);
  font-size:clamp(1rem,1.25vw,1.14rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.3;margin:0 0 .55rem;
  transition:color .35s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card:hover .blog-card-title{color:var(--blue-light)}
.blog-card-excerpt{
  font-size:.82rem;line-height:1.6;color:var(--gray-500);
  margin:0 0 1.1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Meta sits directly above the CTA and both are pushed down together,
   which is what keeps the three cards' footers on one line. */
.blog-card-meta{
  display:flex;align-items:center;gap:.55rem;
  margin-top:auto;padding-top:.9rem;
  font-size:.7rem;color:var(--gray-400);
  border-top:1px solid var(--s-panel-brd,rgba(255,255,255,.07));
}
.blog-card-meta .blog-card-reading::before{content:'·';margin-right:.55rem;color:var(--gray-300)}
.blog-card-read{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:.85rem;
  font-size:.71rem;font-weight:700;letter-spacing:.04em;
  color:var(--gray-500);
  transition:color .35s,gap .35s var(--ease-expo);
}
.blog-card-read .arrow{transition:transform .35s var(--ease-expo)}
.blog-card:hover .blog-card-read{color:var(--blue-light);gap:.65rem}
.blog-card:hover .blog-card-read .arrow{transform:translateX(3px)}

@media(max-width:1000px){
  /* Two up. Card 3 stays a normal card — it is NOT promoted to full
     width, which is what used to break ratio consistency here. */
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
}
@media(max-width:640px){
  .blog-header{margin-bottom:2.25rem}
  .blog-grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .blog-card:hover{transform:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .blog-card,.blog-card-img-bg,.blog-card-read,.blog-card-read .arrow{transition:none!important}
  .blog-card:hover{transform:none}
  .blog-card:hover .blog-card-img-bg{transform:none}
}
/* The /blog/ archive's curated section reuses .resource-section, which
   (like every .resource-section on the site) zeroes the horizontal
   padding a plain <section> would otherwise get from the global
   section{} rule, and .container carries none of its own — so without
   this, the grid runs edge-to-edge on any viewport under 1400px wide.
   Scoped to just this section rather than fixed sitewide. */
#latest.resource-section .container{padding-inline:clamp(1.25rem,5vw,4rem)}

/*──────────────────────────────────────────────────────────
  CONTACT
──────────────────────────────────────────────────────────*/
.contact .container{}
.contact-cta{
  text-align:center;padding:clamp(4rem,10vw,8rem) 2rem;
  border-radius:28px;
  background:linear-gradient(160deg,rgba(0,175,193,.06) 0%,rgba(0,127,147,.04) 40%,transparent 70%);
  border:1px solid rgba(255,255,255,.06);
  position:relative;overflow:hidden;margin-bottom:5rem;
}
.contact-cta::before{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:var(--blue);filter:blur(200px);opacity:.06;
  top:-200px;right:-200px;
}
.contact-cta .section-title{margin:0 auto .8rem;background:linear-gradient(180deg,#fff 30%,var(--blue-light));-webkit-background-clip:text;background-clip:text}
.contact-cta .section-sub{margin:0 auto 2.5rem;text-align:center}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact-form{display:flex;flex-direction:column;gap:1.8rem}
.contact-form h3{
  font-family:var(--font-display);font-size:1.6rem;
  font-weight:700;letter-spacing:-.02em;
}
.contact-form p{color:var(--gray-400);font-size:.88rem;margin-top:-.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.field{display:flex;flex-direction:column;gap:.4rem;position:relative}
.field label{
  font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-500);
}
.field input,.field textarea{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:1rem 1.2rem;
  color:var(--white);font-family:'Inter',sans-serif;font-size:.92rem;
  outline:none;transition:all .4s var(--ease-expo);
}
.field input:focus,.field textarea:focus{
  border-color:var(--blue);
  background:rgba(0,175,193,.03);
  box-shadow:0 0 0 3px rgba(0,175,193,.08);
}
.field textarea{resize:vertical;min-height:130px}
.contact-map{
  border-radius:20px;overflow:hidden;
  background:var(--gray-100);min-height:400px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  border:1px solid rgba(255,255,255,.04);
}
.map-content{text-align:center;color:var(--gray-400)}
.map-content .map-icon{
  width:60px;height:60px;margin:0 auto 1rem;
  border-radius:50%;border:1px solid rgba(0,175,193,.2);
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,175,193,.04);
}
.map-content .map-icon svg{width:24px;height:24px}
.map-content h4{color:var(--white);font-weight:600;margin-bottom:.3rem}
.map-content p{font-size:.85rem}
@media(max-width:768px){
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/*──────────────────────────────────────────────────────────
  FOOTER
──────────────────────────────────────────────────────────*/
.footer-marquee{
  overflow:hidden;padding:3rem 0;
  border-top:1px solid rgba(255,255,255,.04);
}
.footer-marquee-track{
  display:flex;gap:4rem;
  animation:marquee 20s linear infinite;
  width:max-content;
}
.footer-marquee-text{
  font-family:var(--font-display);
  font-size:clamp(2.64rem,6.24vw,4.92rem);font-weight:800;
  letter-spacing:-.04em;white-space:nowrap;
  color:#0b1112;
  -webkit-text-fill-color:#0b1112;
  -webkit-text-stroke:1.5px transparent;
}
.footer-marquee-text span{
  color:#008b96;
  -webkit-text-fill-color:#008b96;
  -webkit-text-stroke-color:transparent;
  filter:drop-shadow(0 0 8px rgba(0,175,193,.2));
}

body > footer{
  padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,4rem) 2rem;
  border-top:1px solid rgba(255,255,255,.04);
}
.footer-inner{max-width:1400px;margin:0 auto}
.footer-top{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:3rem;margin-bottom:4rem;
}
.footer-brand .nav-logo{font-size:1.5rem;display:inline-block;margin-bottom:1rem}
.footer-brand>p{color:var(--gray-400);font-size:.88rem;line-height:1.7;max-width:280px}
.footer-col h4{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray-500);font-weight:600;margin-bottom:1.2rem;
}
.footer-col a{
  display:block;color:var(--gray-400);text-decoration:none;
  font-size:.88rem;margin-bottom:.65rem;transition:all .3s;
}
.footer-col a:hover{color:var(--white);transform:translateX(4px)}
.footer-col a:focus-visible{color:var(--white);transform:translateX(4px);outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.footer-newsletter{display:flex;gap:.5rem;margin-top:1.5rem}
.footer-newsletter input{
  flex:1;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:.75rem 1rem;color:var(--white);
  font-family:'Inter',sans-serif;font-size:.85rem;outline:none;
  transition:border-color .3s;
}
.footer-newsletter input:focus{border-color:var(--blue)}
.footer-newsletter button{
  background:var(--blue);border:none;border-radius:10px;
  padding:.75rem 1.4rem;color:var(--white);font-weight:600;
  font-size:.85rem;cursor:pointer;transition:all .3s;
  font-family:'Inter',sans-serif;
}
.footer-newsletter button:hover{opacity:.85;transform:translateY(-1px)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:2rem;border-top:1px solid rgba(255,255,255,.04);
  flex-wrap:wrap;gap:1rem;
}
.footer-bottom p{font-size:.78rem;color:var(--gray-400)}
.footer-social{display:flex;gap:.8rem}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-400);text-decoration:none;
  font-size:.7rem;font-weight:800;transition:all .3s;
}
.footer-social a:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px)}
.back-top{
  position:fixed;bottom:2rem;right:2rem;z-index:999;
  width:48px;height:48px;border-radius:50%;
  background:rgba(0,175,193,.1);border:1px solid rgba(0,175,193,.2);
  color:var(--blue);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.2rem;
  opacity:0;transform:translateY(20px);
  transition:all .4s var(--ease-expo);
}
.back-top.show{opacity:1;transform:translateY(0)}
.back-top:hover{background:var(--blue);color:var(--white);transform:translateY(-3px)}

@media(max-width:768px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-top{grid-template-columns:1fr}}

/*──────────────────────────────────────────────────────────
  REDUCED MOTION
──────────────────────────────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.15s!important;
  }
}

/*──────────────────────────────────────────────────────────
  HOMEPAGE HERO — TRUST ROW
  Lands last in the entrance sequence. Hidden only when JS is confirmed
  running, same as the rest of the hero, so it can never be stranded.
──────────────────────────────────────────────────────────*/
.hero-trust{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 1.8rem;margin:2.6rem auto 0;padding-top:1.5rem;
  max-width:640px;list-style:none;
  border-top:1px solid rgba(255,255,255,.09);
}
.hero-trust li{
  position:relative;padding-left:1.05rem;
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#8b8c95;
}
.hero-trust li::before{
  content:'';position:absolute;left:0;top:.42em;
  width:6px;height:6px;border-radius:50%;background:var(--blue);
}
.js .hero-trust:not(.revealed){opacity:0;transform:translateY(20px)}
.hero-trust.revealed{
  opacity:1;transform:translateY(0);
  transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo);
}
@media(max-width:640px){
  .hero-trust{gap:.45rem 1rem;margin-top:2rem}
  .hero-trust li{font-size:.66rem}
}