/* ============================================================
   PASTEL DAWN — website UI kit styles
   Depends on colors_and_type.css (tokens). Vanilla CSS only.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:auto;} /* native scroll only, no smooth-scroll hijack */
body{
  margin:0;
  background:var(--plum-800);
  color:var(--fg-1);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}

/* ---- Grain overlay (prevents gradient banding) ---- */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV — floating glass bar
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med), backdrop-filter var(--dur-med);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(20,11,38,0.72);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;}
.brand{display:flex;align-items:center;gap:0;}
.brand img{height:34px;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:15px;font-weight:500;color:var(--fg-2);transition:color var(--dur-fast) var(--ease-out);}
.nav-links a:hover{color:var(--fg-1);}
.nav-cta{display:flex;align-items:center;gap:16px;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--font-body);font-weight:600;font-size:15px;
  border-radius:var(--r-pill);padding:14px 28px;border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn svg{width:18px;height:18px;}
.btn:active{transform:scale(0.975);}
.btn-primary{background:var(--grad-dawn);color:#28183B;box-shadow:var(--sh-glow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(248,151,141,0.42);}
.btn-primary:active{background:linear-gradient(135deg,#F0746C 0%,#FCC9A2 100%);transform:scale(0.975);}
.btn-ghost{background:transparent;color:var(--fg-1);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--on-glass);border-color:rgba(248,151,141,0.6);transform:translateY(-2px);}
.btn-sm{padding:11px 20px;font-size:14px;}
.btn-arrow{transition:transform var(--dur-fast) var(--ease-out);}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#140B26;}

/* ---- Cinematic dawn media layer ---- */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 46%;
  transform:scale(1.08);transform-origin:62% 50%;
  animation:kenburns 32s var(--ease-in-out) infinite alternate;will-change:transform;
}
@keyframes kenburns{
  0%{transform:scale(1.08) translate(0,0);}
  100%{transform:scale(1.16) translate(-1.6%,-1.2%);}
}
/* Plum scrim: dark-left + bottom so big type stays legible, arch glows on the right */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,11,38,0.62) 0%, rgba(20,11,38,0) 20%),
    linear-gradient(180deg, rgba(20,11,38,0) 46%, rgba(20,11,38,0.55) 74%, rgba(20,11,38,0.97) 100%),
    linear-gradient(102deg, rgba(20,11,38,0.94) 0%, rgba(26,16,48,0.74) 30%, rgba(26,16,48,0.2) 56%, rgba(26,16,48,0) 76%);
}
/* Additive bloom over the sun, breathing */
.hero-bloom{position:absolute;z-index:1;left:30%;top:50%;width:46vw;height:46vw;max-width:620px;max-height:620px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(252,201,162,0.40) 0%, rgba(248,151,141,0.16) 38%, rgba(40,24,59,0) 68%);
  animation:bloom 9s var(--ease-in-out) infinite;}
@keyframes bloom{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.78}50%{transform:translate(-50%,-50%) scale(1.16);opacity:1}}
@keyframes breathe{0%,100%{transform:translateX(-50%) scale(1);opacity:.82}50%{transform:translateX(-50%) scale(1.14);opacity:1}}

/* ---- Animated film grain (movement) ---- */
.grain-anim{position:absolute;inset:-140%;z-index:2;pointer-events:none;opacity:0.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;animation:grain 0.55s steps(6) infinite;will-change:transform;}
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-6%,-4%)} 33%{transform:translate(5%,-7%)}
  50%{transform:translate(-5%,6%)} 66%{transform:translate(7%,3%)} 83%{transform:translate(-4%,-6%)}
  100%{transform:translate(0,0)}
}
/* faint horizon line removed at client request (read as a stray horizontal line) */
.hero-horizon{display:none;}

/* ---- Hero content ---- */
.hero-content{position:relative;z-index:3;flex:1;display:flex;align-items:center;padding-top:140px;padding-bottom:34px;width:100%;}
.hero-copy{max-width:780px;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--cream);margin-bottom:26px;}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 14px var(--coral),0 0 4px var(--cream);}
.hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.85rem,1.0rem + 6.0vw,5.75rem);
  line-height:1.0;letter-spacing:-0.025em;color:var(--fg-1);margin:0 0 28px;text-wrap:balance;
  text-shadow:0 2px 40px rgba(20,11,38,0.55);
}
.hero h1 .em{
  background:linear-gradient(100deg,#FCD9CB 0%,#FCC9A2 40%,#F8978D 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.hero-sub{font-size:clamp(1.0625rem,0.95rem + 0.45vw,1.3rem);line-height:1.6;color:var(--fg-1);max-width:600px;margin:0 0 38px;text-shadow:0 1px 20px rgba(20,11,38,0.6);}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

/* ---- "What we build" — horizontal glass strip pinned to the hero base ---- */
.build-strip-wrap{position:relative;z-index:3;width:100%;padding-bottom:40px;}
.build-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border-strong);border-radius:var(--r-lg);
  overflow:hidden;backdrop-filter:blur(18px) saturate(1.1);box-shadow:var(--sh-lg);
}
.build-cell{display:flex;align-items:center;gap:16px;padding:22px 24px;background:rgba(20,11,38,0.52);text-decoration:none;
  transition:background var(--dur-med) var(--ease-out);position:relative;}
.build-cell:hover{background:rgba(52,32,75,0.62);}
.build-ic{width:46px;height:46px;flex:none;border-radius:13px;background:rgba(248,151,141,0.16);display:flex;align-items:center;justify-content:center;color:var(--coral);transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-out);}
.build-ic svg{width:22px;height:22px;}
.build-cell:hover .build-ic{background:rgba(248,151,141,0.28);transform:scale(1.07);}
.build-txt{flex:1;min-width:0;}
.build-name{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--fg-1);line-height:1.2;}
.build-name .build-arr{color:var(--fg-3);display:inline-flex;transition:color var(--dur-fast),transform var(--dur-fast) var(--ease-out);}
.build-name .build-arr svg{width:16px;height:16px;}
.build-cell:hover .build-arr{color:var(--coral);transform:translate(3px,-3px);}
.build-desc{font-size:13px;line-height:1.45;color:var(--fg-2);margin-top:5px;}

/* ============================================================
   SECTIONS (page treatment)
   ============================================================ */
.section{position:relative;z-index:2;padding:104px 0;}
.section-head{max-width:720px;margin-bottom:56px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,1.3rem + 2.2vw,3rem);line-height:1.1;letter-spacing:-0.015em;margin:0 0 16px;color:var(--fg-1);text-wrap:balance;}
.section-head p{font-size:1.125rem;line-height:1.6;color:var(--fg-2);margin:0;}

/* Promise band */
.promise{background:linear-gradient(180deg,#1A1030 0%,#241636 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.promise-step{padding-top:26px;border-top:2px solid rgba(248,151,141,0.4);}
.promise-step .num{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--coral);letter-spacing:0.1em;}
.promise-step h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;margin:14px 0 8px;color:var(--fg-1);}
.promise-step p{font-size:0.95rem;line-height:1.55;color:var(--fg-2);margin:0;}

/* Services cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.svc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-md);transition:transform var(--dur-med) var(--ease-out),border-color var(--dur-med),box-shadow var(--dur-med);position:relative;overflow:hidden;}
.svc-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(248,151,141,0.10),transparent 60%);opacity:0;transition:opacity var(--dur-med);}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(248,151,141,0.4);box-shadow:var(--sh-lg);}
.svc-card:hover::before{opacity:1;}
.svc-ic{width:50px;height:50px;border-radius:14px;background:rgba(248,151,141,0.14);display:flex;align-items:center;justify-content:center;color:var(--coral);margin-bottom:22px;}
.svc-ic svg{width:24px;height:24px;}
.svc-card h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;margin:0 0 12px;color:var(--fg-1);}
.svc-card p{font-size:0.975rem;line-height:1.6;color:var(--fg-2);margin:0 0 20px;}
.svc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.svc-list li{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:var(--fg-2);}
.svc-list svg{width:15px;height:15px;color:var(--coral);flex:none;}

/* Final CTA */
.cta-band{position:relative;z-index:2;padding:0 0 104px;}
.cta-card{position:relative;overflow:hidden;background:linear-gradient(160deg,#34204B 0%,#1A1030 100%);border:1px solid var(--border-strong);border-radius:var(--r-xl);padding:72px 56px;text-align:center;box-shadow:var(--sh-lg);}
.cta-card .glowspot{position:absolute;left:50%;bottom:-180px;width:560px;height:560px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(248,151,141,0.4),rgba(40,24,59,0) 65%);animation:breathe 10s var(--ease-in-out) infinite;pointer-events:none;}
.cta-card h2{position:relative;font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1.08;letter-spacing:-0.015em;margin:0 0 18px;}
.cta-card p{position:relative;font-size:1.125rem;color:var(--fg-2);max-width:540px;margin:0 auto 32px;line-height:1.6;}
.cta-actions{position:relative;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* Footer */
.footer{position:relative;z-index:2;border-top:1px solid var(--border);padding:54px 0 64px;}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.footer img{height:30px;margin-bottom:16px;}
.footer .tag{font-size:0.95rem;color:var(--fg-3);max-width:300px;line-height:1.6;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h4{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-3);margin:0 0 16px;font-weight:600;}
.footer-col a{display:block;font-size:0.95rem;color:var(--fg-2);margin-bottom:11px;transition:color var(--dur-fast);}
.footer-col a:hover{color:var(--coral);}
.footer-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.85rem;color:var(--fg-3);}

/* ============================================================
   ENTRANCE + ON-SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:0.08s;}
.reveal.d2{transition-delay:0.16s;}
.reveal.d3{transition-delay:0.24s;}
.reveal.d4{transition-delay:0.32s;}

@media (prefers-reduced-motion:reduce){
  .hero-img,.hero-bloom,.grain-anim,.cta-card .glowspot{animation:none;}
  .hero-img{transform:scale(1.04);}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn,.svc-card,.build-cell,.build-ic,.build-arr{transition:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-img{object-position:70% 46%;}
  .hero-bloom{left:36%;top:42%;}
  .build-strip{grid-template-columns:1fr;}
  .promise-grid{grid-template-columns:1fr 1fr;gap:32px 26px;}
  .svc-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
}
@media (max-width:560px){
  .wrap{padding:0 22px;}
  .hero-scrim{background:
    linear-gradient(180deg, rgba(20,11,38,0.6) 0%, rgba(20,11,38,0) 24%),
    linear-gradient(180deg, rgba(20,11,38,0) 38%, rgba(20,11,38,0.7) 70%, rgba(20,11,38,0.98) 100%);}
  .promise-grid{grid-template-columns:1fr;}
  .cta-card{padding:48px 26px;}
  .hero-actions .btn{flex:1;justify-content:center;}
}