/* ===== PageMold — Ultra-Min Home (Plus Jakarta Sans, snap + smooth reveals) ===== */
:root{
  --paper:#ffffff; --ink:#0f172a; --muted:#475569;
  --brand:#00A0B0; --brand-2:#00B010;
  --border:#e5e7eb; --max:1100px;

  /* Type scale */
  --body-size: clamp(16px, 2.2vw, 20px);
  --headline-compact: clamp(26px, 4.5vw, 44px);

  /* Motion */
  --dur: 700ms;
  --easing: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 Manrope, system-ui, -apple-system, Inter, Arial, sans-serif;
  scroll-behavior:smooth;
  overscroll-behavior-y: contain; /* prevent rubber-band chaining on mobile */
}

/* ========== Snap Scroller ========== */
main.snap{
  height:100svh;
  overflow-y:auto;
  scroll-snap-type:y proximity;          /* smooth feel */
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  touch-action:manipulation;
}
.snap section{ scroll-snap-align:start; scroll-snap-stop:normal; }
@media (pointer: coarse){ .snap section{ scroll-snap-stop:always; } }

/* Global frame */
.container{width:min(var(--max),92%); margin-inline:auto}

/* ===== Splash (Logo only) ===== */
.splash{
  min-height:100svh;
  display:grid; place-items:center;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:relative;
}
.splash .logo img{
  height:104px; width:auto; display:block;
  opacity:0; transform:translateY(8px) scale(.98);
  animation: logoIn var(--dur) var(--easing) .2s forwards;
}
@keyframes logoIn{ to{opacity:1; transform:translateY(0) scale(1)} }

/* Scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  color:#94a3b8; font-size:14px;
  opacity:0; animation: cueFade var(--dur) ease .9s forwards;
}
.scroll-cue svg{ width:18px; height:18px; animation: cueBounce 1.6s ease-in-out .9s infinite; }
@keyframes cueFade{ to{opacity:1} }
@keyframes cueBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ===== Section 1: Hero ===== */
.hero{
  min-height:100svh; display:grid; place-items:center;
  padding:8vh 0; background:#fff;
}
.stack{max-width:820px; text-align:center; margin-inline:auto; padding-inline:clamp(12px,4vw,40px)}
.kicker{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#475569; margin-bottom:10px}
h1,h2,h3{
  font-family:"Plus Jakarta Sans", Manrope, system-ui, -apple-system, Inter, Arial, sans-serif;
  font-weight:800; letter-spacing:-.015em; margin:0;
}
.hero h1{
  font-size:var(--headline-compact);
  line-height:1.15;
  margin-bottom:12px;
}
.sub{
  color:var(--muted);
  font-family:Manrope, system-ui, -apple-system, Inter, Arial, sans-serif;
  font-weight:500;
  font-size:var(--body-size);
  margin:0 auto 22px; max-width:56ch;
}
.rule{
  height:2px; width:min(360px,60%);
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:2px; margin:18px auto 0;
}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:14px;
  border:0; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff;
  font-weight:700; text-decoration:none;
  transition:transform .2s var(--easing), box-shadow .2s var(--easing);
  margin-top:6px;
}
.cta:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(2,6,23,.10) }

/* ===== Section 2: Black Band ===== */
.band-dark{
  min-height:100svh; display:grid; place-items:center;
  background:#000; color:#fff; text-align:center;
}
.band-dark .stack{max-width:820px}
.band-dark h2{
  font-size:var(--headline-compact);
  line-height:1.15; margin-bottom:12px; color:#fff;
}
.band-dark .sub{ color:#cbd5e1; font-size:var(--body-size); max-width:56ch; }
.band-dark .kicker{ color:#cbd5e1; }
.band-dark .rule{ background:#fff; width:min(320px,60%); margin-top:16px; }

/* ===== Section 3: Light — What we do ===== */
.band-light{
  min-height:100svh; display:grid; place-items:center;
  background:#fff; color:var(--ink); text-align:center;
}
.band-light .stack{max-width:880px}
.band-light h2{ font-size:var(--headline-compact); line-height:1.15; margin-bottom:12px; }
.features{ display:grid; gap:10px; margin:18px auto 10px; }
.feature{ font-size:var(--body-size); color:var(--muted); }
.band-light .rule{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); width:min(320px,60%); margin-top:16px; }

/* ===== Section 4: Dark — How we work ===== */
.band-dark.alt{ background:#0b0b0b; }
.steps{ display:grid; gap:16px; margin:18px auto 6px; }
.step{ font-size:var(--body-size); color:#cbd5e1; }

/* ===== Section 5: Light — Contact ===== */
.band-contact{
  min-height:100svh; display:grid; place-items:center;
  background:#fff; color:var(--ink); text-align:center;
}
.band-contact .stack{ max-width:820px; }
.band-contact h2{ font-size:var(--headline-compact); line-height:1.15; margin-bottom:12px; }
.contact-links{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:10px;
}
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:14px; border:1px solid var(--border);
  color:var(--ink); text-decoration:none;
  transition:transform .2s var(--easing), background .2s var(--easing), box-shadow .2s var(--easing);
}
.btn-ghost:hover{ transform:translateY(-1px); background:#f8fafc; box-shadow:0 8px 18px rgba(2,6,23,.06); }

/* ===== Smooth reveal animations ===== */
.reveal, .reveal-slow{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.reveal.in, .reveal-slow.in{ opacity:1; transform:translateY(0); }

/* ===== Modals (stacking order + base styles) ===== */
.modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:saturate(140%) blur(6px);
  z-index:50; /* base modal */
}
#inquiry-modal{ z-index: 70; } /* on top of case modal when both open */
.modal.open{ display:grid; }
.modal__panel{
  width:min(720px,92%); background:#fff; color:var(--ink);
  border-radius:18px; box-shadow:0 30px 80px rgba(2,6,23,.25);
  padding:24px;
}
.modal__header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.modal__title{
  font-family:"Plus Jakarta Sans", Manrope, system-ui, -apple-system, Inter, Arial, sans-serif;
  font-weight:800; letter-spacing:-.015em; margin:0; font-size:clamp(22px,3.6vw,32px);
}
.modal__close{
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--ink);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700;
}
.modal__body{ margin-top:6px; }

/* ===== Inquiry form ===== */
.form{ display:grid; gap:12px; }
.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .row{ grid-template-columns:1fr; } }
.label{ text-align:left; font-size:13px; color:#64748b; margin-bottom:4px; display:block; }
.input, .select, .textarea{
  width:100%; border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; font:inherit; color:var(--ink); background:#fff;
}
.textarea{ min-height:120px; resize:vertical; }
.helper{ font-size:12px; color:#94a3b8; }
.modal__actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:6px; }
.btn{ appearance:none; border:0; border-radius:14px; padding:12px 18px; font-weight:700; cursor:pointer; }
.btn--primary{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; }
.btn--ghost{ background:#fff; color:#0f172a; border:1px solid var(--border); }

/* Inline status + honeypot */
.status{ margin-top:6px; font-size:13px; }
.status.ok{ color:#15803d; }
.status.err{ color:#b91c1c; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ===== Case Study modal — side-by-side, single image ===== */
.modal--case .modal__panel{
  width:min(1100px,94%);
  padding:0; overflow:hidden;
  border-radius:18px; background:#fff; color:var(--ink);
  box-shadow:0 30px 80px rgba(2,6,23,.25);
}
.case-wrap{
  display:flex; flex-direction:row; align-items:stretch; justify-content:center; flex-wrap:nowrap;
}
.case-media{
  flex:1 1 60%;
  background:#0b1220; display:flex; align-items:center; justify-content:center;
}
.case-media img{
  display:block; width:100%; height:auto; object-fit:cover; max-height:90vh; background:#0b1220;
}
.case-side{
  flex:1 1 40%;
  padding:30px 28px;
  display:flex; flex-direction:column; justify-content:center; background:#fff; color:var(--ink);
}
.case-side .kicker{ color:#64748b; margin-bottom:6px; }
.case-side h3{
  font-family:"Plus Jakarta Sans", Manrope, system-ui, -apple-system, Inter, Arial, sans-serif;
  font-weight:800; letter-spacing:-.015em; margin:0 0 10px; font-size:clamp(22px,3vw,36px);
}
.case-side p{ margin:0 0 14px; color:#475569; font-size:var(--body-size); }
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 12px; }
.tag{
  font-size:12px; color:#334155; background:#f1f5f9; border:1px solid var(--border);
  padding:6px 10px; border-radius:999px;
}
.case-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.case-actions .cta, .case-actions .btn-ghost{ margin-top:0; }
.modal--case .modal__header{ position:absolute; right:0; top:0; padding:12px; z-index:2; }
.modal--case .modal__close{
  background:rgba(255,255,255,.9); border:1px solid var(--border); backdrop-filter:blur(3px);
}

/* ===== Footer ===== */
footer{ border-top:1px solid var(--border); padding:18px 0; color:#64748b; font-size:14px; text-align:center; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .scroll-cue{display:none}
}

/* ===== Responsive tweaks ===== */
@media (max-width:960px){
  .splash .logo img{height:88px}
}
@media (max-width:880px){
  .case-wrap{ flex-direction:column; }
  .case-media img{ max-height:50vh; }
  .case-side{ padding:20px; }
}