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

:root {
  --bg:       #F4F5F7;
  --bg-card:  #FFFFFF;
  --bg-dark:  #1B2D6E;
  --sand:     #E85E00;
  --sand-l:   #F47830;
  --sand-d:   #C24C00;
  --text:     #111827;
  --t2:       #4B5563;
  --t3:       #9CA3AF;
  --border:   rgba(17,24,39,.09);
  --shadow-s: rgba(17,24,39,.04);
  --shadow-m: rgba(17,24,39,.08);
  --shadow-l: rgba(17,24,39,.12);
  --r:        20px;
  --g:        clamp(24px,5vw,64px);
}

html { font-size:16px; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  line-height:1.75;
  overflow:hidden;
  height:100dvh;
  cursor:none;
}

::selection { background:rgba(232,94,0,.12); color:var(--sand-d); }
h1,h2,h3,h4 { font-family:'DM Sans',sans-serif; font-weight:600; line-height:1.08; }

@media (pointer:coarse) {
  body { cursor:auto; }
  #cur,#cur-ring { display:none !important; }
  .f-sub { cursor:pointer; }
}

/* ── GRAIN ── */
.grain {
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.038; pointer-events:none; z-index:9500; mix-blend-mode:multiply;
}

/* ── PROGRESS BAR ── */
#progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--sand); z-index:9999;
  border-radius:0 2px 2px 0;
}

/* ── CURSOR ── */
#cur {
  width:7px; height:7px; background:var(--sand); border-radius:50%;
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
}
#cur-ring {
  width:34px; height:34px; border:1.5px solid rgba(232,94,0,.28);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:9997; transition:opacity .25s;
}

/* ── NAV ── */
nav {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  z-index:200; transition:opacity .35s, transform .35s;
}
nav.nav-hidden {
  opacity:0; transform:translateX(-50%) translateY(-14px); pointer-events:none;
}

.nav-pill {
  display:flex; align-items:center; gap:26px;
  background:rgba(242,239,233,.88);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(26,23,20,.11); border-radius:100px;
  padding:10px 10px 10px 26px;
  box-shadow:0 2px 8px var(--shadow-s),0 8px 28px var(--shadow-m);
  white-space:nowrap;
}
.nav-logo {
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:14px;
  letter-spacing:.05em; color:var(--text); text-decoration:none;
}
.nav-logo em { font-style:normal; color:var(--sand); }
.nav-links { display:flex; gap:20px; list-style:none; }
.nav-links a {
  font-size:13px; color:var(--t2); text-decoration:none; transition:color .25s;
}
.nav-links a:hover { color:var(--text); }
.nav-links a.active { color:var(--text); font-weight:500; }
.nav-cta {
  background:var(--text); color:var(--bg-card); padding:10px 20px;
  border-radius:100px; font-size:13px; text-decoration:none;
  transition:background .25s, transform .25s;
}
.nav-cta:hover { background:#2E2A26; transform:scale(1.02); }

/* ── MOBILE BURGER + MENU ── */
.nav-burger {
  display:none; width:32px; height:32px; border:none; background:transparent;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:0; flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.nav-burger span {
  width:17px; height:1.5px; background:var(--text); border-radius:2px;
  transition:transform .38s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; transform:scale(.4); }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu-backdrop {
  position:fixed; inset:0; background:rgba(20,18,15,.22);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s;
  z-index:198;
}
.mobile-menu-backdrop.open { opacity:1; visibility:visible; pointer-events:auto; }

.mobile-menu {
  position:fixed; top:76px; left:50%;
  transform:translateX(-50%) translateY(-14px) scale(.94);
  width:min(300px,calc(100vw - 32px));
  background:rgba(242,239,233,.97);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(26,23,20,.11); border-radius:20px;
  box-shadow:0 8px 28px var(--shadow-m), 0 28px 56px var(--shadow-l);
  padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform-origin:top center;
  transition:opacity .32s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1), visibility .38s;
  z-index:199;
}
.mobile-menu.open {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.mobile-menu a {
  padding:13px 16px; border-radius:12px; font-size:14.5px; font-weight:400;
  color:var(--text); text-decoration:none;
  transition:background .2s, opacity .32s ease, transform .32s ease;
  opacity:0; transform:translateY(-6px);
}
.mobile-menu.open a { opacity:1; transform:translateY(0); }
.mobile-menu.open a:nth-child(1) { transition-delay:.05s; }
.mobile-menu.open a:nth-child(2) { transition-delay:.09s; }
.mobile-menu.open a:nth-child(3) { transition-delay:.13s; }
.mobile-menu.open a:nth-child(4) { transition-delay:.17s; }
.mobile-menu.open a:nth-child(5) { transition-delay:.21s; }
.mobile-menu a:hover, .mobile-menu a:active { background:rgba(26,23,20,.05); }
.mobile-menu a.active { color:var(--sand); font-weight:500; }
.mobile-menu a.mm-cta { margin-top:4px; background:var(--text); color:var(--bg-card); text-align:center; font-weight:500; }
.mobile-menu a.mm-cta:hover { background:#2E2A26; }

@media (max-width:820px) {
  .nav-burger { display:flex; }
}
@media (min-width:821px) {
  .mobile-menu, .mobile-menu-backdrop { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .nav-burger span, .mobile-menu, .mobile-menu a, .mobile-menu-backdrop { transition-duration:.01ms !important; }
}

/* ── SNAP WRAPPER ── */
#snap-wrap {
  height:100dvh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
}
#snap-wrap::-webkit-scrollbar { display:none; }

.snap-sec {
  height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  padding-top: 84px;
}

/* ── SHARED COMPONENTS ── */
.kicker {
  font-size:12px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sand); margin-bottom:12px; display:block;
}
.sec-h {
  font-size:clamp(26px,3vw,46px); font-weight:300;
  letter-spacing:-.02em; line-height:1.07; margin-bottom:12px;
}
.sec-h em { font-style:normal; color:var(--sand); }
.sec-p {
  font-size:clamp(15px,1.25vw,16px); color:var(--t2);
  max-width:420px; line-height:1.75; font-weight:300;
}

.depth {
  background:var(--bg-card);
  border-radius:var(--r);
  border:1px solid rgba(26,23,20,.072);
  box-shadow:0 0 0 1px rgba(255,255,255,.65) inset,
             0 2px 4px var(--shadow-s),
             0 8px 24px var(--shadow-m),
             0 28px 56px var(--shadow-l);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease;
}
.depth:hover {
  transform:translateY(-7px);
  box-shadow:0 0 0 1px rgba(255,255,255,.75) inset,
             0 4px 8px var(--shadow-s),
             0 16px 40px var(--shadow-m),
             0 44px 88px var(--shadow-l);
}

/* ── BUTTONS ── */
.btn-dark {
  background:var(--text); color:var(--bg-card); padding:12px 30px;
  border-radius:100px; font-size:13px; text-decoration:none;
  transition:background .3s, transform .3s; display:inline-block;
}
.btn-dark:hover { background:#2E2A26; transform:translateY(-2px); }

.btn-ghost {
  color:var(--text); padding:12px 24px; border-radius:100px; font-size:13px;
  text-decoration:none; border:1px solid var(--border);
  transition:border-color .3s, background .3s; display:inline-block;
}
.btn-ghost:hover { border-color:var(--text); background:rgba(26,23,20,.04); }

.btn-orange {
  background:var(--sand); color:#fff; padding:12px 30px;
  border-radius:100px; font-size:13px; text-decoration:none;
  transition:background .3s, transform .3s; display:inline-block;
}
.btn-orange:hover { background:var(--sand-l); transform:translateY(-2px); }

.btn-outline-light {
  color:#EEF0F5; padding:12px 24px; border-radius:100px; font-size:13px;
  text-decoration:none; border:1px solid rgba(255,255,255,.2);
  transition:border-color .3s, background .3s; display:inline-block;
}
.btn-outline-light:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); }

/* ── STATEMENT ── */
.stmt-label {
  position:absolute; top:clamp(110px,14vh,136px); left:50%;
  transform:translateX(-50%); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--t3); white-space:nowrap;
}
.stmt-body {
  max-width:800px; width:100%; text-align:center;
  font-size:clamp(17px,2.8vw,36px); font-weight:300; line-height:1.65;
}
.sw { display:inline; opacity:.13; }
.sw.hi { color:var(--sand); font-weight:600; }

/* ── LOADER ── */
#loader {
  position:fixed; inset:0;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:9800; touch-action:none;
  will-change:opacity;
}
#ld-logo {
  font-family:'DM Sans',sans-serif; font-weight:500;
  font-size:14px; letter-spacing:.05em;
  color:var(--text); display:block;
  will-change:transform;
  opacity:0;
}
#ld-logo em { font-style:normal; color:var(--sand); }

/* ── ANIMATION HELPERS ── */
.reveal { opacity:0; transform:translateY(20px); }

/* ── FOOTER ── */
.site-footer {
  flex-shrink:0; padding:13px var(--g);
  border-top:1px solid var(--border);
  background:var(--bg);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  width:100%; box-sizing:border-box;
}
.f-mark { display:block; line-height:0; }
.f-mark img { height:34px; width:auto; }
.f-logo { font-weight:500; font-size:13px; letter-spacing:.05em; color:var(--text); text-decoration:none; }
.f-logo em { font-style:normal; color:var(--sand); }
.f-copy { font-size:12px; color:var(--t3); }
.f-brand { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.f-right { display:flex; align-items:center; justify-content:flex-end; gap:22px; flex-wrap:wrap; }
.f-coords { display:flex; align-items:center; gap:16px; }
.f-coords a { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--t3); text-decoration:none; transition:color .25s; }
.f-coords a:hover { color:var(--sand); }
.f-coords svg { width:13px; height:13px; flex-shrink:0; }
.f-links { display:flex; gap:16px; }
.f-links a { font-size:12px; color:var(--t3); text-decoration:none; transition:color .25s; }
.f-links a:hover { color:var(--text); }

/* ── CONTACT / FORM SHARED ── */
.ci-lbl {
  font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sand); margin-bottom:2px;
}
.ci-val { font-size:clamp(14px,1.2vw,16px); color:var(--text); text-decoration:none; transition:color .25s; }
a.ci-val:hover { color:var(--sand); }

.form { display:flex; flex-direction:column; gap:clamp(12px,1.8vh,20px); }
.fg { display:flex; flex-direction:column; gap:5px; }
.f-lbl { font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--t3); }
.f-inp {
  background:transparent; border:none; border-bottom:1.5px solid rgba(26,23,20,.12);
  padding:9px 0; color:var(--text); font-family:'DM Sans',sans-serif;
  font-size:14px; font-weight:300; outline:none; transition:border-color .3s; width:100%;
}
.f-inp:focus { border-color:var(--sand); }
.f-inp::placeholder { color:var(--t3); }
.f-inp option { background:var(--bg); }
textarea.f-inp { resize:none; min-height:56px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.f-sub {
  background:var(--text); color:var(--bg-card); border:none;
  padding:12px 32px; border-radius:100px; font-family:'DM Sans',sans-serif;
  font-size:14px; cursor:none; align-self:flex-start;
  transition:background .3s, transform .3s;
}
.f-sub:hover { background:#2E2A26; transform:translateY(-2px); }
.f-sub.sent { background:#2D6A40; }

/* ── MOUSE SCROLL INDICATOR ── */
.hero-scroll { display:flex; flex-direction:column; align-items:center; gap:8px; }
.mouse {
  width:20px; height:30px; border:1.5px solid rgba(26,23,20,.22);
  border-radius:20px; display:flex; justify-content:center; padding-top:6px;
}
.mouse::after {
  content:''; width:3px; height:3px; background:var(--sand);
  border-radius:50%; animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform:translateY(0); opacity:1; }
  75%      { transform:translateY(9px); opacity:0; }
}
.mouse-lbl { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--t3); }

/* ── RESPONSIVE ── */
@media (max-width:1080px) {
  .nav-links li:nth-child(n+5) { display:none; }
}

@media (max-width:820px) {
  .nav-links { display:none; }
}

@media (max-width:700px) {
  body { overflow-x:hidden; }
  .site-footer { grid-template-columns:1fr; justify-items:center; text-align:center; padding:18px var(--g); gap:10px; }
  .f-brand { flex-direction:column; gap:6px; }
  .f-brand, .f-right { justify-content:center; }
  .f-links { justify-content:center; }
  .form-row { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .nav-pill { padding:8px 8px 8px 18px; gap:10px; }
  .nav-logo { font-size:13px; }
  .nav-cta  { padding:8px 14px; font-size:12px; }
  .mobile-menu { top:70px; }
}

/* ── MOBILE: free scroll instead of forced per-section snap ──
   On desktop each section is a deliberate full-screen "slide" (100dvh,
   scroll-snap). On mobile, content is often taller than one screen once
   grids stack to 1-2 columns, so trapping scroll per section either
   clips content or fights the user. Below this breakpoint we drop the
   snap entirely and let sections grow to their natural content height —
   the page just scrolls freely, like a normal site. */
@media (max-width:700px), (max-height:640px) {
  #snap-wrap { scroll-snap-type:none; }
  .snap-sec {
    scroll-snap-align:none;
    scroll-snap-stop:normal;
    height:auto;
    min-height:100dvh;
    overflow:visible;
    /* Some pages bottom/center-anchor hero content by design (fine on a
       fixed 100dvh desktop slide); on mobile that leaves a large empty
       gap above short content once the section can grow taller than the
       screen. Anchor to the top instead so content always starts right
       under the nav. */
    justify-content:flex-start !important;
  }
  .footer-more { min-height:0; }
  /* The kicker label above the statement text is normally absolutely
     positioned near the section's top edge while the body text is
     vertically centered below it. Now that content is top-anchored
     instead of centered, that absolute label would sit on top of the
     body text — put it back in normal flow so it just stacks above it. */
  .stmt-label { position:static; transform:none; display:block; margin-bottom:14px; text-align:center; }
}
@media (max-height:640px) {
  .hero-baseline { display:none; }
}