/* Fit Addaa: cinematic scroll "worlds". Each full-screen section sets data-world, the fixed background
   swaps between four radial gradients and every color token follows it. Orange #FF6A13 stays the brand accent.
   Display: Playfair Display. Body: Inter. */

/* Registered so the 0.2s world switch can animate the tokens themselves */
@property --fg { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --soft { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --dim { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --ghost { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --panel { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --deep { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --edge-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --edge-3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --line { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent-ink { syntax: '<color>'; inherits: true; initial-value: #FF6A13; }
@property --sheet { syntax: '<color>'; inherits: true; initial-value: #000000; }

:root {
  --accent: #FF6A13; --on-accent: #1A0E07;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 118px;
  /* Dark-world tokens are the default (cocoa, silk) */
  --fg: #FFFFFF; --soft: rgba(255,255,255,.9); --muted: rgba(255,255,255,.74); --dim: rgba(255,255,255,.56); --ghost: rgba(255,255,255,.42);
  --panel: rgba(255,255,255,.06); --tile: rgba(255,255,255,.05); --deep: rgba(0,0,0,.28); --bg: rgba(0,0,0,.26);
  --edge: rgba(255,255,255,.14); --edge-2: rgba(255,255,255,.22); --edge-3: rgba(255,255,255,.34); --line: rgba(255,255,255,.1);
  --accent-ink: #FF8A47; --sheet: rgba(18,9,5,.97);
  color-scheme: dark;
  transition: --fg .2s, --soft .2s, --muted .2s, --dim .2s, --ghost .2s, --panel .2s, --bg .2s, --deep .2s,
              --edge .2s, --edge-2 .2s, --edge-3 .2s, --line .2s, --accent-ink .2s, --sheet .2s;
}
/* Light worlds (cream, pista) switch text, buttons and navbar to dark brown */
:root[data-world="cream"], :root[data-world="pista"] {
  --fg: #2A1810; --soft: rgba(42,24,16,.9); --muted: rgba(42,24,16,.76); --dim: rgba(42,24,16,.62); --ghost: rgba(42,24,16,.46);
  --panel: rgba(255,255,255,.38); --tile: rgba(255,255,255,.3); --deep: rgba(42,24,16,.08); --bg: rgba(255,255,255,.46);
  --edge: rgba(42,24,16,.16); --edge-2: rgba(42,24,16,.26); --edge-3: rgba(42,24,16,.42); --line: rgba(42,24,16,.12);
  --accent-ink: #B4440A; --sheet: rgba(255,248,236,.98);
}

* { box-sizing: border-box; }
html { scroll-snap-type: y proximity; scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: #000; color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--accent); color: var(--on-accent); }
img { max-width: 100%; display: block; }
a { color: var(--fg); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }

/* Fixed background layers: four gradients cross-fade in 0.2s, particles drift above them */
.worlds { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.worlds i { position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease-in-out; }
.worlds .w-cream { background: radial-gradient(circle at center, #FFF8EC 0%, #F4E8D0 45%, #B89D6A 100%); }
.worlds .w-cocoa { background: radial-gradient(circle at center, #6B4423 0%, #2A1810 50%, #080403 100%); }
.worlds .w-silk  { background: radial-gradient(circle at center, #3B82F6 0%, #172554 45%, #020617 100%); }
.worlds .w-pista { background: radial-gradient(circle at center, #CDE8B5 0%, #A3CB80 50%, #6E9A48 100%); }
:root:not([data-world]) .w-cocoa, :root[data-world="cocoa"] .w-cocoa, :root[data-world="cream"] .w-cream,
:root[data-world="silk"] .w-silk, :root[data-world="pista"] .w-pista { opacity: 1; }
.particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }

.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }
.it { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; }
.acc-c { color: var(--accent-ink); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 4px; color: var(--accent-ink); text-transform: uppercase; }
.h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -1px; }
.lead { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--muted); }

/* Full-screen sections that snap and set the background world */
.world { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--nav-h) + 24px) 88px; scroll-snap-align: start; overflow-x: clip; isolation: isolate; }
.world > .wrap { position: relative; z-index: 1; }
.world.short { min-height: 70dvh; }
.wm { position: absolute; top: 50%; left: 50%; z-index: 0; pointer-events: none; white-space: nowrap; user-select: none;
  font-family: var(--serif); font-weight: 900; font-size: 25vw; line-height: 1; letter-spacing: -.08em; text-transform: uppercase;
  color: var(--fg); opacity: .08; transform: translate(-50%, -50%); }
@media (max-width: 767px) { .wm { font-size: 35vw; } }

/* Entrance motion: watermark scales up, images come from the left, text from the right. Re-runs on every visit. */
.js .world .wm { opacity: 0; transform: translate(-50%, calc(-50% + 50px)) scale(.9); transition: opacity 1.5s var(--ease) .2s, transform 1.5s var(--ease) .2s; }
.js .world.on .wm { opacity: .08; transform: translate(-50%, -50%) scale(1); }
.js .world .a-img { opacity: 0; transform: translateX(-100px); transition: opacity 1.5s var(--ease), transform 1.5s var(--ease); transition-delay: calc(.4s + var(--d, 0s)); }
.js .world .rv { opacity: 0; transform: translateX(60px); transition: opacity 1.5s var(--ease), transform 1.5s var(--ease); transition-delay: calc(.6s + var(--d, 0s)); }
.js .world.on .a-img, .js .world.on .rv { opacity: 1; transform: none; }

/* 3D mouse parallax (spring-driven --rx/--ry from site.js) and the infinite float */
.tilt { transform: perspective(1400px) rotateX(calc(var(--rx, 0deg) * var(--k, 1))) rotateY(calc(var(--ry, 0deg) * var(--k, 1))); transform-style: preserve-3d; will-change: transform; }
.float { animation: float 6s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.glow { filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: .3px; font-family: inherit; cursor: pointer; border: 0; transition: transform .3s var(--ease), background-color .2s, border-color .2s, color .2s; }
.btn:hover { transform: scale(1.05); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn-fill { background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 30px -10px rgba(255,106,19,.6); }
.btn-fill:hover { color: var(--on-accent); background: #FF7F33; }
.btn-line { background: transparent; border: 1px solid var(--edge-3); color: var(--fg); }
.btn-line:hover { border-color: var(--accent); color: var(--fg); }
.btn-white { background: transparent; border: 1px solid var(--fg); color: var(--fg); }
.btn-white:hover { border-color: var(--accent); color: var(--fg); }

/* Fixed, transparent header: utility line + navbar. Shrinks after 50px of scroll. */
.site-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); }
.strip-top { overflow: hidden; max-height: 40px; transition: max-height .4s var(--ease), opacity .3s; }
.strip-top .row { min-height: 38px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); }
.strip-top a { color: var(--fg); }
.strip-top a:hover { color: var(--accent-ink); }
.strip-top .u { text-decoration: underline; text-underline-offset: 3px; }
.icon-btn { width: 40px; height: 38px; display: flex; align-items: center; justify-content: center; }
.site-head { padding: 32px 0; transition: padding .4s var(--ease); position: relative; }
.scrolled .site-head { padding: 20px 0; }
.scrolled .strip-top { max-height: 0; opacity: 0; }
.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brand b { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: .2em; }
.brand .it { font-size: 17px; color: var(--muted); }
.menu { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.menu > a:not(.btn) { font-weight: 500; font-size: 14px; letter-spacing: .3px; }
.menu-btn { display: none; background: none; border: 1px solid var(--edge-3); color: var(--fg); border-radius: 999px; min-height: 44px; padding: 0 18px; font: 600 14px var(--sans); cursor: pointer; }

/* Photos and placeholders */
.ph { background: var(--tile); border: 1px dashed var(--edge-2); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--ghost); font-size: 13px; }
.photo { position: relative; overflow: hidden; background: var(--deep); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.photo:hover img { transform: scale(1.04); }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 18px; overflow: hidden; margin: 0; backdrop-filter: blur(6px); }
.specs > div { background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.specs dt { font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--dim); }
.specs dd { margin: 0; font-size: 16px; font-weight: 500; }

.pill { font-size: 11px; font-weight: 600; letter-spacing: 2px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--edge-3); }
.pill.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.band { background: transparent; }

/* Phone frame for app screens: always a dark bezel, whatever the world */
.phone { width: 100%; max-width: 260px; aspect-ratio: 9 / 19.5; border-radius: 38px; border: 8px solid #121212; background: #000; overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 70px -24px rgba(0,0,0,.75); }
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Footer */
.site-foot { position: relative; border-top: 1px solid var(--line); padding-block: 48px 40px; scroll-snap-align: end; }
.round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--edge-2); display: flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s, transform .3s var(--ease); }
.round:hover { border-color: var(--accent); transform: scale(1.08); }
.fab { position: fixed; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; z-index: 40; box-shadow: 0 10px 30px -8px rgba(255,106,19,.6); transition: transform .3s var(--ease); }
.fab:hover { color: var(--on-accent); transform: scale(1.08); }

/* New World Studio credit */
.studio { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.studio .wrap { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.studio img { height: 52px; width: auto; flex: none; }
.studio-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.studio-copy p { margin: 0; font-size: 15px; font-weight: 300; color: var(--muted); }
.studio-copy p b { color: var(--fg); font-weight: 600; }
.studio-links { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.studio-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.studio-links a:hover { color: var(--fg); }
.studio-tag { font-size: 11px; font-weight: 500; letter-spacing: 4px; color: var(--dim); }

/* Plain scroll reveal for pages without worlds (legal pages) */
.js .solo .rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .solo .rv.in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .menu-btn { display: inline-flex; align-items: center; flex: none; }
  .site-head .row { flex-wrap: nowrap; }
  .brand { min-width: 0; row-gap: 0; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--sheet); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(24px, env(safe-area-inset-right, 0px)) 20px max(24px, env(safe-area-inset-left, 0px)); }
  .menu.open { display: flex; }
  .menu > a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .menu .btn { margin-top: 14px; }
}
@media (max-width: 900px) { .site-foot { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 600px) {
  :root { --nav-h: 108px; }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .brand b { font-size: 20px; letter-spacing: .14em; }
  .brand .it { font-size: 15px; }
  .site-head { padding: 22px 0; }
  .scrolled .site-head { padding: 14px 0; }
  .strip-top .row { font-size: 12px; flex-wrap: nowrap; gap: 10px; }
  .strip-top .icon-btn { display: none; }   /* same links sit in the contact section and footer */
  .studio .wrap { justify-content: flex-start; }
  .studio img { height: 44px; }
  .world { padding-block: calc(var(--nav-h) + 16px) 72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html { scroll-snap-type: none; }
  .js .world .wm { opacity: .08; transform: translate(-50%, -50%); }
  .js .world .a-img, .js .world .rv, .js .solo .rv { opacity: 1; transform: none; }
  .tilt { transform: none; }
}