/* ============================================================
   STUDIO BEEKMAN — Artist impressions & 3D visuals
   Aesthetic: refined editorial / architectural gallery
   ============================================================ */

:root {
  /* Accent — warm architectural amber/clay against deep ink */
  --accent:        #C8865A;
  --accent-hover:  #B5754A;
  --accent-deep:   #9A5F38;
  --accent-tint:   #F6EDE4;
  --accent-tint-2: #EFE0D2;

  --ink:           #14110E;   /* near-black warm */
  --ink-2:         #211C17;
  --ink-soft:      #2B251F;
  --text:          #2C2620;
  --text-soft:     #6B6259;
  --text-muted:    #9A8F84;

  --white:         #FFFFFF;
  --bg:            #FBF8F4;   /* warm paper */
  --bg-alt:        #F3EDE5;
  --bg-dark:       #14110E;
  --bg-darker:     #0D0B09;

  --line:          #E4DBD0;
  --line-soft:     #EFE9E1;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1280px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-size: 17px;
  overflow-x: hidden;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; color: var(--ink); letter-spacing: -0.01em; }
.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-deep);
  display: inline-block; margin-bottom: 18px;
}
.eyebrow.light { color: var(--accent); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 15px 30px; border-radius: 100px; cursor: pointer;
  border: 1.5px solid transparent; transition: all .35s var(--ease);
  letter-spacing: 0.01em;
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(154,95,56,.55); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-outline.light { color: var(--white); border-color: rgba(255,255,255,.4); }
.btn-outline.light:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ============================================================
   NAVIGATION — wit boven, ink bij scroll
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(251,248,244,0.0);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding: 22px 0;
}
.nav.at-top { background: var(--bg); }
.nav.is-scrolled { background: var(--ink); padding: 14px 0; box-shadow: 0 10px 40px -18px rgba(0,0,0,.6); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }

.brand { display: flex; align-items: baseline; gap: 3px; font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; color: var(--ink); transition: color .35s var(--ease), opacity .35s var(--ease); }
.brand b { font-weight: 600; }
.brand .dot { color: var(--accent); }
.nav.is-scrolled .brand { color: var(--white); }

.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a { font-size: 15px; font-weight: 600; color: var(--ink); position: relative; transition: color .35s var(--ease); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background: var(--accent); transition: width .3s var(--ease); }
.nav-links a:hover::after { width: 100%; }
.nav.is-scrolled .nav-links a { color: rgba(255,255,255,.85); }
.nav.is-scrolled .nav-links a:hover { color: #fff; }

.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-phone { font-size: 15px; font-weight: 600; color: var(--ink); transition: color .35s var(--ease); white-space: nowrap; }
.nav.is-scrolled .nav-phone { color: rgba(255,255,255,.9); }
.nav-cta { padding: 11px 22px; font-size: 14px; }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { width: 26px; height: 2px; background: var(--ink); transition: all .35s var(--ease); }
.nav.is-scrolled .hamburger span { background: #fff; }

/* mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 1100; pointer-events: none; visibility: hidden; }
.mm-backdrop { position:absolute; inset:0; background: rgba(13,11,9,.5); backdrop-filter: blur(6px); opacity:0; transition: opacity .4s var(--ease); }
.mm-panel { position:absolute; top:0; right:0; height:100%; width: min(360px, 86vw); background: var(--ink); padding: 90px 32px 40px; transform: translateX(100%); transition: transform .45s var(--ease); display:flex; flex-direction:column; gap: 6px; }
.mobile-menu.open { pointer-events: auto; visibility: visible; }
.mobile-menu.open .mm-backdrop { opacity: 1; }
.mobile-menu.open .mm-panel { transform: translateX(0); }
.mm-panel a { color: #fff; font-family: var(--serif); font-size: 28px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mm-panel a.sub { font-family: var(--sans); font-size: 16px; color: rgba(255,255,255,.6); padding-left: 14px; border:none; }
.mm-close { position:absolute; top:26px; right:28px; background:none; border:none; color:#fff; font-size: 30px; cursor:pointer; line-height:1; }
.mm-cta { margin-top: auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.4s var(--ease), transform 7s linear; }
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,11,9,.55) 0%, rgba(13,11,9,.25) 40%, rgba(13,11,9,.88) 100%); }
.hero-inner { position: relative; z-index: 2; width:100%; padding-bottom: 86px; }
.hero h1 { color: #fff; font-size: clamp(44px, 8vw, 104px); line-height: 0.98; letter-spacing: -0.025em; max-width: 17ch; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-desc { color: rgba(255,255,255,.82); font-size: clamp(17px,2vw,20px); max-width: 56ch; margin: 26px 0 36px; line-height: 1.55; }
.hero-eyebrow { color: var(--accent); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; font-size: 13px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display:flex; gap: 54px; margin-top: 60px; flex-wrap: wrap; }
.hero-stat .num { font-family: var(--serif); font-size: 42px; color: #fff; line-height:1; }
.hero-stat .lbl { color: rgba(255,255,255,.6); font-size: 13.5px; margin-top: 8px; font-weight: 600; letter-spacing: .04em; }
.scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index:3; color: rgba(255,255,255,.6); font-size: 12px; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-cue .line { width:1px; height: 40px; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: cueMove 2s var(--ease) infinite; }
@keyframes cueMove { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ============================================================
   SECTION SHELL
   ============================================================ */
section { position: relative; }
.sec { padding: 110px 0; }
.sec-dark { background: var(--ink); color: #fff; }
.sec-alt { background: var(--bg-alt); }
.sec-head { max-width: 720px; margin-bottom: 60px; }
.sec-head h2 { font-size: clamp(34px, 5vw, 58px); }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.lead { font-size: 20px; color: var(--text-soft); margin-top: 22px; line-height: 1.6; }
.sec-dark .lead { color: rgba(255,255,255,.72); }

/* ---------- INTRO / OVER ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
/* image fallback: branded placeholder if a hot-linked image fails */
.img-ph { background: linear-gradient(135deg, var(--accent-tint) 0%, var(--bg-alt) 60%, var(--accent-tint-2) 100%); position: relative; }
.img-ph::after { content: "Studio Beekman"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-style: italic; color: var(--accent-deep); opacity:.55; font-size: 18px; letter-spacing:.02em; }
img.failed { display:none; }

.split-img { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow:hidden; background: var(--bg-alt); }
.split-img img { width:100%; height:100%; object-fit: cover; }
.split-img .tag { position:absolute; bottom: 20px; left: 20px; background: var(--white); padding: 12px 18px; border-radius: 100px; font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: 0 10px 30px -12px rgba(0,0,0,.3); }
.split-text h2 { font-size: clamp(30px,4vw,48px); margin-bottom: 22px; }
.split-text p { color: var(--text-soft); margin-bottom: 18px; }
.split-text .btn { margin-top: 12px; }

/* ---------- USP CARDS (flip) ---------- */
.cards-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.ucard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 32px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.ucard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(20,17,14,.28); }
.ucard .badge { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-size: 20px; margin-bottom: 24px; }
.ucard h3 { font-size: 24px; margin-bottom: 14px; }
.ucard p { color: var(--text-soft); font-size: 16px; }

.stats-row { display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 70px; text-align:center; }
.stat-big .num { font-family: var(--serif); font-size: clamp(46px,6vw,72px); color: var(--accent-deep); line-height:1; }
.stat-big .lbl { color: var(--text-soft); font-weight:600; margin-top: 10px; font-size: 15px; }

/* ---------- SERVICES ---------- */
.svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.svc { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.svc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(20,17,14,.32); }
.svc-img { aspect-ratio: 16/11; overflow:hidden; position:relative; background: var(--bg-alt); }
.svc-img img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.svc:hover .svc-img img { transform: scale(1.06); }
.svc-badge { position:absolute; top:16px; left:16px; background: var(--accent); color:#fff; font-size:12px; font-weight:700; padding:7px 14px; border-radius:100px; letter-spacing:.04em; }
.svc-body { padding: 30px 28px 32px; display:flex; flex-direction:column; flex:1; }
.svc-body h3 { font-size: 26px; margin-bottom: 16px; }
.svc-list { margin: 6px 0 24px; }
.svc-list li { display:flex; gap:10px; align-items:flex-start; color: var(--text-soft); font-size:15px; padding: 6px 0; }
.svc-list li::before { content:"—"; color: var(--accent); font-weight:700; }
.svc-body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- PROCES ---------- */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.step { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 34px 26px; }
.sec-alt .step { background: var(--white); }
.step .badge { width: 42px; height:42px; border-radius:50%; border: 1.5px solid var(--accent); color: var(--accent-deep); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:18px; margin-bottom: 20px; }
.step h3 { font-size: 21px; margin-bottom: 12px; }
.step p { color: var(--text-soft); font-size: 15px; }

/* ---------- PORTFOLIO BENTO ---------- */
.bento { display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 230px; gap: 16px; }
.tile { position:relative; border-radius: var(--radius); overflow:hidden; background: var(--bg-alt); cursor:pointer; }
.tile img { width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.07); }
.tile::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(13,11,9,.82)); }
.tile .meta { position:absolute; left:22px; bottom:20px; right:22px; z-index:2; color:#fff; transform: translateY(8px); opacity:.92; transition: transform .4s var(--ease); }
.tile:hover .meta { transform: translateY(0); }
.tile .meta .cat { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); }
.tile .meta h4 { color:#fff; font-size: 22px; margin-top: 6px; }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile.big .meta h4 { font-size: 30px; }

/* ---------- REVIEWS / PARTNERS MARQUEE ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; gap: 24px; width: max-content; animation: scrollX 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }

.rev { width: 380px; flex-shrink:0; background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.sec-dark .rev { background: var(--ink-2); border-color: rgba(255,255,255,.08); }
.rev-top { display:flex; align-items:center; gap: 14px; margin-bottom: 18px; }
.rev-av { width: 46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:18px; font-family:var(--serif); }
.rev-name { font-weight:700; font-size:15px; color: var(--ink); }
.sec-dark .rev-name { color:#fff; }
.rev-time { font-size:13px; color: var(--text-muted); }
.rev-stars { color:#E8A93C; letter-spacing:2px; margin-bottom: 12px; font-size:15px; }
.rev-text { font-size:15px; color: var(--text-soft); line-height:1.6; }
.sec-dark .rev-text { color: rgba(255,255,255,.72); }
.rev-badge { display:inline-block; margin-top:16px; background: var(--accent-tint); color: var(--accent-deep); font-size:12px; font-weight:700; padding:5px 12px; border-radius:100px; }
.sec-dark .rev-badge { background: rgba(200,134,90,.16); color: var(--accent); }

.partners { display:flex; flex-wrap:wrap; gap: 18px 50px; align-items:center; justify-content:center; }
.partners span { font-family:var(--serif); font-size: 22px; color: var(--text-muted); opacity:.8; transition: color .3s, opacity .3s; }
.partners span:hover { color: var(--ink); opacity:1; }

/* ---------- CTA / CONTACT ---------- */
.cta-band { background: var(--ink); color:#fff; border-radius: 8px; padding: 64px 56px; display:flex; align-items:center; justify-content:space-between; gap: 40px; flex-wrap:wrap; position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; top:-60%; right:-10%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(200,134,90,.3), transparent 65%); }
.cta-band h2 { color:#fff; font-size: clamp(28px,4vw,44px); position:relative; max-width: 18ch; }
.cta-band p { color: rgba(255,255,255,.7); margin-top: 14px; position:relative; }
.cta-band .btns { display:flex; gap:14px; flex-wrap:wrap; position:relative; }

/* contact / form */
.contact-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
.form-card { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 44px; }
.field { margin-bottom: 20px; }
.field label { display:block; font-size:14px; font-weight:600; margin-bottom: 8px; color: var(--ink); }
.field input, .field select, .field textarea {
  width:100%; padding: 14px 16px; border:1.5px solid var(--line); border-radius: var(--radius);
  font-family: var(--sans); font-size:15px; color: var(--text); background: var(--bg); transition: border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--accent); }
.field textarea { min-height: 130px; resize: vertical; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.info-aside { background: var(--ink); color:#fff; border-radius: var(--radius); padding: 44px; align-self:start; position: sticky; top: 100px; }
.info-aside h3 { color:#fff; font-size: 26px; margin-bottom: 24px; }
.info-item { display:flex; gap:14px; margin-bottom: 22px; align-items:flex-start; }
.info-item .ic { width:40px; height:40px; border-radius:50%; background: rgba(200,134,90,.18); color: var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-item .lbl { font-size:12.5px; color: rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.info-item .val { color:#fff; font-size:16px; font-weight:600; margin-top:2px; }
.info-item a.val:hover { color: var(--accent); }
.form-note { font-size:13px; color: var(--text-muted); margin-top: 14px; }
.form-ok { display:none; background: var(--accent-tint); color: var(--accent-deep); padding:16px; border-radius: var(--radius); font-weight:600; margin-top: 16px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow:hidden; }
.sec-alt .faq { background:#fff; }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 24px 28px; cursor:pointer; font-family: var(--serif); font-size: 21px; color: var(--ink); }
.faq-icon { width:32px; height:32px; border-radius:50%; background: var(--accent-tint); color: var(--accent-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; transition: transform .35s var(--ease), background .3s; }
.faq.open .faq-icon { transform: rotate(45deg); background: var(--accent); color:#fff; }
.faq-a { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-a-inner { padding: 0 28px 26px; color: var(--text-soft); }

/* ---------- FOOTER ---------- */
.footer { background: var(--bg-darker); color: rgba(255,255,255,.7); padding: 80px 0 30px; }
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-brand { font-family: var(--serif); font-size: 28px; color:#fff; margin-bottom: 18px; }
.foot-brand .dot { color: var(--accent); }
.footer p { font-size:15px; line-height:1.7; max-width: 34ch; }
.foot-social { display:flex; gap:12px; margin-top: 24px; }
.foot-social a { width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#fff; transition: all .3s var(--ease); }
.foot-social a:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
.foot-col h4 { color:#fff; font-family: var(--sans); font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom: 20px; }
.foot-col a { display:block; padding: 7px 0; font-size:15px; color: rgba(255,255,255,.65); transition: color .25s; }
.foot-col a:hover { color: var(--accent); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top: 56px; padding-top: 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13.5px; color: rgba(255,255,255,.45); }
.foot-bottom a:hover { color: var(--accent); }

/* ---------- WHATSAPP + STICKY ---------- */
.wa-bubble { position: fixed; right: 22px; bottom: 22px; width: 58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; z-index: 900; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); transition: transform .3s var(--ease); }
.wa-bubble:hover { transform: scale(1.08); }
.wa-bubble svg { width: 30px; height:30px; }
.sticky-cta { display:none; position:fixed; bottom:0; left:0; right:0; z-index:880; background: var(--ink); padding: 10px; gap:8px; }
.sticky-cta a { flex:1; text-align:center; padding: 13px; border-radius: var(--radius); font-weight:700; font-size:14px; }
.sticky-cta .bel { background: rgba(255,255,255,.12); color:#fff; }
.sticky-cta .wa { background:#25D366; color:#fff; }
.sticky-cta .off { background: var(--accent); color:#fff; }

/* ---------- LIGHTBOX ---------- */
.lightbox { position: fixed; inset:0; z-index: 2000; background: rgba(13,11,9,.94); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: opacity .4s var(--ease); padding: 30px; }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius); transform: scale(.96); transition: transform .4s var(--ease); box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); }
.lightbox.open img { transform: scale(1); }
.lb-close { position:absolute; top:24px; right:30px; background:none; border:none; color:#fff; font-size:38px; cursor:pointer; line-height:1; }
.lb-cap { position:absolute; bottom: 28px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.8); font-size:14px; letter-spacing:.05em; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal-up, .reveal-x, .reveal-x-r, .reveal-zoom, .reveal-flip {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-up { opacity:0; transform: translateY(56px); }
.reveal-x { opacity:0; transform: translateX(-80px); }
.reveal-x-r { opacity:0; transform: translateX(80px); }
.reveal-zoom { opacity:0; transform: scale(.86); }
.reveal-flip { opacity:0; transform: perspective(900px) rotateX(32deg) translateY(46px); transform-origin: center bottom; }
.is-visible { opacity:1 !important; transform: none !important; }

.stagger > *:nth-child(1){transition-delay:0s}
.stagger > *:nth-child(2){transition-delay:.1s}
.stagger > *:nth-child(3){transition-delay:.2s}
.stagger > *:nth-child(4){transition-delay:.3s}
.stagger > *:nth-child(5){transition-delay:.4s}
.stagger > *:nth-child(6){transition-delay:.5s}

@media (prefers-reduced-motion: reduce) {
  .reveal-up,.reveal-x,.reveal-x-r,.reveal-zoom,.reveal-flip { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-slide { transition: opacity 1s ease; }
  .marquee-track { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links, .nav-phone { display:none; }
  .nav-cta { display:none; }
  .hamburger { display:flex; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .cards-3, .svc-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .info-aside { position: static; }
  .bento { grid-auto-rows: 200px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .sec { padding: 72px 0; }
  .wrap { padding: 0 20px; }
  .cards-3, .svc-grid, .steps { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; gap: 36px; }
  .hero-stats { gap: 30px; }
  .hero-stat .num { font-size: 34px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile.big { grid-column: span 2; grid-row: span 1; }
  .tile.wide { grid-column: span 2; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 28px; }
  .form-card, .info-aside { padding: 30px; }
  .sticky-cta { display:flex; }
  .wa-bubble { bottom: 78px; }
  .scroll-cue { display:none; }
}