﻿:root{
  --ink: #1a1a1a;
  --paper: #ffffff;
  --ivory: #F6F0E1;
  --mist: #F0EAD8;
  --sage: #DDB960;
  --night: #0a2e38;
  --night2: #0d3642;
  --bg0: #0a2e38;
  --bg1: #0d3642;
  --text: rgba(26,26,26,.92);
  --muted: rgba(26,26,26,.72);
  --faint: rgba(26,26,26,.54);
  --onDark: rgba(255,255,255,.92);
  --onDarkMuted: rgba(255,255,255,.74);
  --onDarkFaint: rgba(255,255,255,.54);
  --hairline: rgba(26,26,26,.10);
  --hairline2: rgba(255,255,255,.14);
  --emerald: #104d5e;
  --emerald2: #14657a;
  --emerald-rgb: 16, 77, 94;
  --emerald2-rgb: 20, 101, 122;
  --emerald3: #DDB960;
  --emerald3-rgb: 221, 185, 96;
  --gold: var(--emerald3);
  --green: var(--emerald);
  --radius: 16px;
  --radius2: 24px;
  --shadow: 0 22px 70px rgba(16,19,24,.12);
  --shadow2: 0 36px 120px rgba(0,0,0,.45);
  --max: 1180px;
  --serif: "Bodoni Moda", "IvyMode", ui-serif, Georgia, serif;
  --sans: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --step-0: clamp(1.0rem, .95rem + .25vw, 1.125rem);
  --step-1: clamp(1.22rem, 1.06rem + .6vw, 1.62rem);
  --step-2: clamp(1.62rem, 1.22rem + 1.25vw, 2.35rem);
  --step-3: clamp(2.35rem, 1.60rem + 2.65vw, 3.55rem);
  --step-4: clamp(3.1rem, 2.0rem + 4.0vw, 4.9rem);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:
    radial-gradient(1200px 900px at 14% 0%, rgba(var(--emerald-rgb),.12), transparent 62%),
    radial-gradient(1000px 760px at 96% 8%, rgba(var(--emerald2-rgb),.10), transparent 58%),
    radial-gradient(900px 700px at 90% 92%, rgba(var(--emerald3-rgb),.08), transparent 62%),
    linear-gradient(180deg, #F6F0E1, #F0EAD8);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
a.link{ text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--emerald-rgb),.55); }
a.link:hover{ opacity: .92; text-decoration-color: rgba(var(--emerald-rgb),.90); }

button, input, select, textarea{ font: inherit; color: inherit; }

.container{ max-width: var(--max); margin: 0 auto; padding: 0 22px; }
@media (max-width: 520px){ .container{ padding: 0 16px; } }

.skip-link{ position:absolute; left:-999px; top: 12px; background: var(--paper); color: var(--ink); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hairline); z-index: 999; }
.skip-link:focus{ left: 12px; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; border-radius: 999px; padding: 12px 18px; border: 1px solid var(--hairline); background: transparent; cursor:pointer; font-weight: 750; letter-spacing: .02em; transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: 3px solid rgba(var(--emerald-rgb),.45); outline-offset: 3px; }
.btn--lg{ padding: 14px 20px; }

.btn--primary{ border-color: rgba(var(--emerald-rgb),.38); color: rgba(255,255,255,.96); background: linear-gradient(135deg, rgba(var(--emerald-rgb),.30), rgba(var(--emerald2-rgb),.18)); box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.btn--primarySoft{ background: rgba(var(--emerald-rgb),.14); border-color: rgba(var(--emerald-rgb),.35); color: var(--ink); }
.btn--subtle{ background: rgba(16,19,24,.04); border-color: rgba(16,19,24,.12); color: var(--ink); }
.btn--ghost{ border-color: rgba(255,255,255,.26); color: rgba(255,255,255,.92); background: rgba(255,255,255,.05); }
.btn--ghost:hover{ background: rgba(255,255,255,.08); }
.btn--onDark{ border-color: rgba(var(--emerald-rgb),.38); color: rgba(255,255,255,.96); background: linear-gradient(135deg, rgba(var(--emerald-rgb),.30), rgba(var(--emerald2-rgb),.18)); }
.btn--ghostOnDark{ border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.92); background: rgba(255,255,255,.06); }

.header{ position: fixed; left:0; right:0; top:0; z-index: 60; color: rgba(255,255,255,.92); background: linear-gradient(180deg, rgba(5,8,14,.70) 0%, rgba(5,8,14,.86) 100%), linear-gradient(180deg, var(--emerald) 0%, var(--emerald2) 100%); border-bottom: 1px solid rgba(255,255,255,.14); transition: background .25s ease, border-color .25s ease, color .25s ease; }
.header.is-on-hero{ background: linear-gradient(180deg, rgba(5,8,14,.70) 0%, rgba(5,8,14,.86) 100%), linear-gradient(180deg, var(--emerald) 0%, var(--emerald2) 100%); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.92); }
.header__inner{ height: 74px; display:flex; align-items:center; justify-content: space-between; gap: 16px; }

.projectLogo{ display:flex; align-items:center; color: inherit; }
.projectLogo__img{ height: auto; width: 160px; display: block; }
.projectLogo__name{ font-weight: 850; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; }
.projectLogo__sub{ font-weight: 650; font-size: .72rem; opacity: .82; letter-spacing: .22em; text-transform: uppercase; }

.menuBtn{ border:0; background: transparent; color: inherit; cursor:pointer; display:flex; align-items:center; gap: 10px; padding: 10px 0; }
.menuBtn__label{ text-transform: uppercase; letter-spacing: .24em; font-weight: 850; font-size: .70rem; opacity: .88; }
.menuBtn__icon{ width: 34px; height: 34px; border-radius: 999px; border: 1px solid currentColor; position: relative; opacity: .9; }
.menuBtn__icon::before, .menuBtn__icon::after{ content:""; position:absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; transform: translate(-50%, -50%); border-radius: 999px; }
.menuBtn__icon::after{ transform: translate(-50%, calc(-50% + 5px)); width: 10px; opacity: .95; }

.menuOverlay{ position: fixed; inset: 0; z-index: 80; visibility: hidden; opacity: 0; }
.menuOverlay__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); backdrop-filter: blur(12px); }
.menuOverlay__panel{ position:absolute; right: 18px; top: 18px; bottom: 18px; width: min(440px, calc(100vw - 36px)); border-radius: 26px; background: radial-gradient(900px 650px at 18% 0%, rgba(var(--emerald-rgb),.18), transparent 60%), radial-gradient(900px 650px at 100% 10%, rgba(var(--emerald2-rgb),.12), transparent 60%), rgba(12,14,18,.96); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow2); color: rgba(255,255,255,.92); padding: 16px 16px; display:flex; flex-direction: column; }
.menuOverlay__top{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 6px 4px 10px; border-bottom: 1px solid rgba(255,255,255,.10); }
.menuOverlay__wordmark{ margin:0; font-family: var(--serif); font-size: 1.35rem; letter-spacing: .02em; }
.menuClose{ width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); font-size: 1.6rem; cursor:pointer; }
.menuOverlay__nav{ display:flex; flex-direction: column; padding: 14px 4px; gap: 10px; }
.menuOverlay__link{ padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); font-weight: 700; }
.menuOverlay__link:hover{ background: rgba(255,255,255,.07); }
.menuOverlay__actions{ margin-top: auto; display:flex; flex-direction: column; gap: 10px; padding: 10px 4px 6px; }
.menuOverlay__meta{ margin: 10px 4px 2px; color: rgba(255,255,255,.70); font-size: .95rem; }

.hero{ position: relative; min-height: 100vh; display:flex; align-items: stretch; color: rgba(255,255,255,.92); background: var(--night); overflow:hidden; }
.heroMedia{ position:absolute; inset:0; }
.heroMedia__video, .heroMedia__img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.heroMedia__img{ opacity: .9; }
.heroSlides{ position:absolute; inset:0; overflow:hidden; }
.heroSlide{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; filter: brightness(1.42) contrast(1.06) saturate(1.08); opacity:0; transform: scale(1.04); transition: opacity 900ms ease, transform 6800ms ease; will-change: opacity, transform; }
.heroSlide.is-active{ opacity:1; transform: scale(1.0); }

.heroMedia__overlay{ position:absolute; inset:0; background: radial-gradient(1000px 720px at 14% 0%, rgba(var(--emerald-rgb), .16), transparent 58%), radial-gradient(1200px 760px at 100% 0%, rgba(var(--emerald2-rgb), .12), transparent 62%), linear-gradient(to bottom, rgba(0,0,0,.02) 0%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.08) 100%); }

.heroCaption{ position:absolute; left: clamp(18px, 4vw, 64px); bottom: clamp(74px, 6vw, 120px); z-index: 2; max-width: min(560px, calc(100vw - 36px)); padding: 18px 18px; border-radius: 22px; color: rgba(255,255,255,.94); background: radial-gradient(650px 420px at 18% 0%, rgba(var(--emerald-rgb),.18), transparent 60%), rgba(16,19,24,.28); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 28px 90px rgba(0,0,0,.40); }
.heroCaption__kicker{ margin: 0 0 10px; font-size: .78rem; font-weight: 850; letter-spacing: .26em; text-transform: uppercase; opacity: .86; }
.heroCaption__title{ margin: 0 0 10px; font-family: var(--serif); font-weight: 650; font-size: clamp(1.55rem, 2.6vw, 2.2rem); line-height: 1.05; }
.heroCaption__meta{ margin: 0 0 16px; color: rgba(255,255,255,.82); font-size: 1.02rem; line-height: 1.35; }
.heroCaption__actions{ display:flex; gap: 12px; flex-wrap: wrap; }

.heroScroll{ position:absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.06); display:grid; place-items:center; animation: scrollNudge 1.8s ease-in-out infinite; }
.heroScroll__icon{ width: 20px; height: 20px; }
@keyframes scrollNudge{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(5px); } }

.band{ padding: 92px 0; position: relative; overflow: hidden; isolation: isolate; }
.band::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: repeating-linear-gradient(0deg, var(--band-grid, rgba(16,19,24,.028)) 0, var(--band-grid, rgba(16,19,24,.028)) 1px, transparent 1px, transparent 64px), repeating-linear-gradient(90deg, var(--band-grid, rgba(16,19,24,.028)) 0, var(--band-grid, rgba(16,19,24,.028)) 1px, transparent 1px, transparent 64px); opacity: var(--band-grid-opacity, .28); }
.band::after{ content:""; position:absolute; left:0; right:0; top:0; height: 1px; pointer-events:none; z-index:0; background: linear-gradient(90deg, transparent 0%, rgba(var(--emerald-rgb),.16) 16%, rgba(var(--emerald-rgb),.36) 45%, rgba(var(--emerald2-rgb),.34) 55%, rgba(var(--emerald2-rgb),.18) 78%, rgba(var(--emerald3-rgb),.14) 88%, transparent 100%); opacity: .70; }
.band > .container{ position: relative; z-index: 1; }
.band--paper{ --band-grid: rgba(16,19,24,.018); background: radial-gradient(1200px 860px at 12% -12%, rgba(var(--emerald-rgb),.10), transparent 62%), radial-gradient(980px 700px at 96% 10%, rgba(var(--emerald2-rgb),.08), transparent 58%), radial-gradient(980px 700px at 70% 110%, rgba(var(--emerald3-rgb),.06), transparent 62%), linear-gradient(180deg, #ffffff 0%, #F6F0E1 100%); }
.band--mist{ --band-grid: rgba(255,255,255,.040); --band-grid-opacity: .44; background: radial-gradient(1100px 780px at 14% -10%, rgba(var(--emerald-rgb),.20), transparent 60%), radial-gradient(980px 700px at 96% 12%, rgba(var(--emerald2-rgb),.18), transparent 60%), radial-gradient(980px 700px at 88% 92%, rgba(var(--emerald3-rgb),.14), transparent 62%), linear-gradient(180deg, var(--bg0), var(--bg1)); color: var(--onDark); border-top: 1px solid rgba(255,255,255,.08); }
.band--slate{ --band-grid: rgba(255,255,255,.040); --band-grid-opacity: .44; background: radial-gradient(1100px 780px at 14% -10%, rgba(var(--emerald-rgb),.18), transparent 60%), radial-gradient(980px 700px at 96% 12%, rgba(var(--emerald2-rgb),.16), transparent 60%), radial-gradient(900px 650px at 90% 92%, rgba(var(--emerald3-rgb),.12), transparent 62%), linear-gradient(180deg, var(--bg0), var(--bg1)); color: var(--onDark); border-top: 1px solid rgba(255,255,255,.08); }
.band--night{ --band-grid: rgba(255,255,255,.040); --band-grid-opacity: .46; background: radial-gradient(1200px 680px at 12% -10%, rgba(var(--emerald-rgb),.22), transparent 60%), radial-gradient(900px 620px at 92% 4%, rgba(var(--emerald2-rgb),.18), transparent 58%), radial-gradient(900px 620px at 90% 92%, rgba(var(--emerald3-rgb),.14), transparent 62%), linear-gradient(180deg, var(--bg0), var(--bg1)); color: rgba(255,255,255,.92); }
.band + .band{ border-top: 1px solid rgba(16,19,24,.06); }
.band--night + .band{ border-top: 1px solid rgba(255,255,255,.08); }

.band--mist .eyebrow, .band--slate .eyebrow{ color: var(--onDarkFaint); }
.band--mist .lede, .band--slate .lede{ color: var(--onDarkMuted); }
.band--mist .inlineFact, .band--slate .inlineFact{ border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); }
.band--mist .inlineFact__k, .band--slate .inlineFact__k{ color: var(--onDarkFaint); }
.band--mist .inlineFact__v, .band--slate .inlineFact__v{ color: var(--onDark); }
.band--mist .proseActions .btn--subtle, .band--slate .proseActions .btn--subtle{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--onDark); }
.band--mist .proseActions .btn--primarySoft, .band--slate .proseActions .btn--primarySoft{ background: rgba(var(--emerald-rgb),.22); border-color: rgba(var(--emerald-rgb),.42); color: var(--onDark); }

.sectionHead{ max-width: 78ch; margin-bottom: 26px; }
.eyebrow{ margin:0 0 10px; display:inline-flex; align-items:center; gap: 10px; text-transform: uppercase; letter-spacing: .26em; font-weight: 850; font-size: .72rem; color: rgba(16,19,24,.65); }
.eyebrow::before{ content:""; width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, rgba(var(--emerald-rgb),.30), rgba(var(--emerald2-rgb),.18)); box-shadow: 0 0 0 4px rgba(var(--emerald-rgb),.14); flex: 0 0 8px; }
.h2{ margin:0; font-family: var(--serif); font-weight: 600; font-size: var(--step-3); line-height: 1.02; letter-spacing: -.01em; }
.lede{ margin: 12px 0 0; color: rgba(16,19,24,.72); font-size: var(--step-1); }
.h3{ margin:0; font-family: var(--sans); font-weight: 850; letter-spacing: -.01em; font-size: 1.15rem; color: var(--ink); }

.prose p{ margin: 0 0 14px; }
.bigQuote{ font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.08; letter-spacing: -.01em; margin-bottom: 16px; }
.inlineFacts{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.inlineFact{ border-radius: 999px; padding: 10px 12px; border: 1px solid rgba(16,19,24,.10); background: rgba(16,19,24,.03); display:flex; gap: 10px; align-items: baseline; }
.inlineFact__k{ text-transform: uppercase; letter-spacing: .20em; font-weight: 850; font-size: .65rem; color: rgba(16,19,24,.55); }
.inlineFact__v{ font-weight: 800; font-size: .95rem; color: rgba(16,19,24,.86); }
.proseActions{ display:flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 980px){ .split{ grid-template-columns: 1fr; } }

.figure{ border-radius: var(--radius2); overflow:hidden; border: 1px solid rgba(16,19,24,.10); background: rgba(255,255,255,.72); box-shadow: var(--shadow); }
.figure img{ width:100%; height: 100%; object-fit: cover; }
.figure figcaption{ padding: 12px 14px; font-size: .9rem; color: rgba(16,19,24,.62); border-top: 1px solid rgba(16,19,24,.08); }

.glanceBar{ margin-top: 18px; border-radius: 26px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); padding: 14px 14px; box-shadow: 0 22px 90px rgba(0,0,0,.25); }
.glanceBar__head{ display:flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.glanceBar__label{ margin:0; text-transform: uppercase; letter-spacing: .24em; font-weight: 850; font-size: .70rem; color: rgba(255,255,255,.78); }
.glanceGrid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.glanceItem{ border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(15,19,24,.34); padding: 14px 14px 12px; color: rgba(255,255,255,.92); }
.glanceItem__k{ margin: 0 0 6px; font-family: var(--serif); font-weight: 650; letter-spacing: -0.01em; font-size: 1.25rem; color: rgba(255,255,255,.94); }
.glanceItem__v{ margin:0; color: rgba(255,255,255,.72); font-size: .92rem; }
.link--onDark{ color: rgba(255,255,255,.86); text-decoration: underline; text-underline-offset: 3px; }
.link--onDark:hover{ color: rgba(255,255,255,.96); }

.factsStrip{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.factItem{ border-radius: 22px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); padding: 16px 16px; box-shadow: 0 16px 60px rgba(0,0,0,.38); }
.factItem__k{ margin:0 0 8px; color: rgba(255,255,255,.70); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.factItem__v{ margin:0; font-family: var(--serif); font-weight: 650; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.01em; color: rgba(255,255,255,.92); }
@media (max-width: 980px){ .factsStrip{ grid-template-columns: 1fr 1fr; } }

.featureRows{ display:flex; flex-direction: column; gap: 16px; }
.featureRow{ display:grid; grid-template-columns: 70px 1fr 320px; gap: 18px; align-items:center; border-radius: 26px; border: 1px solid rgba(16,19,24,.10); background: rgba(255,255,255,.86); padding: 18px 18px; box-shadow: 0 18px 70px rgba(16,19,24,.08); }
.featureRow__num{ font-family: var(--serif); font-weight: 650; font-size: 2rem; color: rgba(16,19,24,.55); }
.featureRow__body p{ margin: 8px 0 0; color: rgba(16,19,24,.72); }
.featureRow__media{ height: 160px; }
.featureRow__img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

.mediaSlot{ height: 100%; border-radius: 20px; border: 1px dashed rgba(16,19,24,.18); background: linear-gradient(135deg, rgba(var(--emerald-rgb),.10), rgba(var(--emerald2-rgb),.06)), rgba(16,19,24,.02); display:flex; align-items:center; justify-content:center; color: rgba(16,19,24,.55); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; }
@media (max-width: 980px){ .featureRow{ grid-template-columns: 1fr; } .featureRow__media{ height: 150px; } }

.lusionGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px 40px; }
.lusionItem { display: flex; flex-direction: column; gap: 20px; will-change: transform; }
.lusionItem__media { width: 100%; aspect-ratio: 16 / 11; border-radius: 28px; overflow: hidden; border: 1px solid rgba(16,19,24,.06); background: rgba(16,19,24,.03); padding: 0; cursor: pointer; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.08); }
.lusionItem__media img, .lusionItem__media picture { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.lusionItem__info { display: flex; flex-direction: column; gap: 6px; padding-left: 4px; }
.lusionItem__meta { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(16,19,24,.6); }
.lusionItem__title { margin: 0; font-family: var(--sans); font-size: clamp(1.8rem, 2.5vw, 2.4rem); font-weight: 400; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; display: flex; align-items: center; }
.lusion-arrow { display: inline-block; margin-right: 12px; font-family: monospace; font-weight: 300; font-size: 0.9em; color: rgba(var(--emerald-rgb), 0.9); transition: transform 0.3s ease; }
.lusionItem:hover .lusion-arrow { transform: translateX(6px); }
@media (max-width: 980px) { .lusionGrid { grid-template-columns: 1fr; gap: 60px; } .lusionItem__title { font-size: 2rem; } }

.typesGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.typeCard { border-radius: 24px; border: 1px solid rgba(16,77,94,0.20); background: #ffffff; padding: 22px 22px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); box-shadow: 1px 1px 0px #104d5e, 2px 2px 0px #104d5e, 3px 3px 0px #104d5e, 4px 4px 0px #104d5e, 5px 5px 0px #104d5e, 6px 6px 0px #104d5e, 7px 7px 0px #104d5e, 8px 8px 0px #104d5e, 14px 14px 30px rgba(0,0,0,0.15); transform: translate(-8px, -8px); transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.typeCard:hover { transform: translate(0px, 0px); box-shadow: 0px 0px 0px #104d5e, 4px 4px 15px rgba(0,0,0,0.1); }
.typeCard--featured { border-color: var(--emerald); background: radial-gradient(900px 520px at 18% 0%, rgba(var(--emerald-rgb),.12), transparent 60%), #ffffff; box-shadow: 1px 1px 0px var(--emerald), 2px 2px 0px var(--emerald), 3px 3px 0px var(--emerald), 4px 4px 0px var(--emerald), 5px 5px 0px var(--emerald), 6px 6px 0px var(--emerald), 7px 7px 0px var(--emerald), 8px 8px 0px var(--emerald), 14px 14px 30px rgba(16, 77, 94, 0.2); }
.typeCard--featured:hover { transform: translate(0px, 0px); box-shadow: 0px 0px 0px var(--emerald), 4px 4px 15px rgba(16, 77, 94, 0.2); }
.typeCard__kicker{ margin:0; text-transform: uppercase; letter-spacing: .26em; font-weight: 850; font-size: .72rem; color: rgba(16,19,24,.66); }
.typeCard__text{ margin: 0; color: rgba(16,19,24,.72); }
.typeFacts{ margin: 0; padding-left: 18px; color: rgba(16,19,24,.72); display:grid; gap: 6px; }
.typeCard__actions{ margin-top: auto; display:flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; }

.moments{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.moment{ border-radius: 24px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); padding: 24px 24px; color: rgba(255,255,255,.94); box-shadow: 1px 1px 0px rgba(255,255,255,0.2), 2px 2px 0px rgba(255,255,255,0.2), 3px 3px 0px rgba(255,255,255,0.2), 4px 4px 0px rgba(255,255,255,0.2), 5px 5px 0px rgba(255,255,255,0.2), 6px 6px 0px rgba(255,255,255,0.2), 12px 12px 30px rgba(0,0,0,0.4); transform: translate(-6px, -6px); transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.moment:hover { transform: translate(0px, 0px); box-shadow: 0px 0px 0px rgba(255,255,255,0.2), 4px 4px 15px rgba(0,0,0,0.2); }
.moment p{ margin: 10px 0 0; color: rgba(255,255,255,.74); }
.moment .h3 { color: rgba(255,255,255,.94); }

.grid2{ display:grid; grid-template-columns: 1.08fr .92fr; gap: 20px; align-items: start; }

.panel{ border-radius: 26px; border: 1px solid rgba(16,19,24,.10); background: rgba(255,255,255,.90); box-shadow: 0 18px 70px rgba(16,19,24,.08); padding: 20px 20px; color: var(--ink); }
.panel__text{ margin:0 0 14px; max-width: 70ch; color: rgba(16,19,24,.72); }
.locFacts{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 14px; }
.locFact{ border-radius: 18px; border: 1px solid rgba(16,19,24,.10); background: rgba(255,255,255,.80); padding: 12px 12px; color: var(--ink); }
.locFact__value{ margin:0; font-family: var(--serif); font-size: var(--step-2); font-weight: 600; line-height: 1; }
.locFact__label{ margin: 6px 0 0; font-size: .9rem; color: rgba(16,19,24,.62); }
.bullets{ margin:0; padding-left: 18px; color: rgba(16,19,24,.72); display:grid; gap: 8px; }
.panel__actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.panel__fine{ margin: 14px 0 0; color: rgba(16,19,24,.54); font-size: .9rem; }

.mapCard{ border-radius: 26px; border: 1px solid rgba(16,19,24,.10); background: rgba(255,255,255,.86); box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction: column; }
.mapCard__top{ padding: 14px 16px; border-bottom: 1px solid rgba(16,19,24,.08); display:flex; align-items: center; justify-content: space-between; }
.mapCard__title{ margin:0; text-transform: uppercase; letter-spacing: .18em; font-weight: 850; font-size: .72rem; color: rgba(16,19,24,.66); }
.mapCard__frame{ position: relative; aspect-ratio: 16 / 10; }
.mapCard__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mapCard__note{ margin:0; padding: 12px 14px; font-size: .92rem; color: rgba(16,19,24,.54); border-top: 1px solid rgba(16,19,24,.08); background: rgba(255,255,255,.92); }

.contactBar{ border-radius: 28px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,12,15,.40); backdrop-filter: blur(12px); box-shadow: 0 26px 90px rgba(0,0,0,.35); padding: 22px 22px; display:flex; align-items: center; justify-content: space-between; gap: 18px; }
.contactBar__left{ min-width: 260px; }
.contactBar__eyebrow{ margin:0; text-transform: uppercase; letter-spacing: .26em; font-weight: 850; font-size: .72rem; color: rgba(255,255,255,.74); }
.contactBar__label{ margin: 10px 0 6px; font-family: var(--serif); font-size: var(--step-1); color: rgba(255,255,255,.86); }
.contactBar__phone{ margin:0; font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.05; }
.contactBar__phone a{ color: rgba(255,255,255,.92); text-decoration: none; }
.contactBar__phone a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.contactBar__fine{ margin: 10px 0 0; color: rgba(255,255,255,.54); font-size: .95rem; }
.contactBar__right{ display:flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.footer.footer--dark{ background: radial-gradient(900px 650px at 18% 0%, rgba(var(--emerald-rgb),.12), transparent 60%), radial-gradient(900px 650px at 100% 10%, rgba(var(--emerald2-rgb),.10), transparent 60%), var(--night); color: rgba(255,255,255,.92); border-top: 1px solid rgba(255,255,255,.10); }
.footer.footer--dark .footer__meta, .footer.footer--dark .footer__copy, .footer.footer--dark .footer__credits{ color: rgba(255,255,255,.60); }
.footer.footer--dark .footer__links a, .footer.footer--dark .footer__credits a{ color: rgba(255,255,255,.80); text-decoration: underline; text-underline-offset: 3px; }

.reveal{ opacity: 0; }

.modal{ position: fixed; inset: 0; display:none; z-index: 90; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.modal__dialog{ position: relative; width: min(560px, calc(100% - 24px)); margin: 8vh auto; border-radius: 26px; background: rgba(255,255,255,.96); border: 1px solid rgba(16,19,24,.10); box-shadow: var(--shadow); overflow:hidden; color: var(--ink); }
.modal__header{ padding: 16px 18px 12px; border-bottom: 1px solid rgba(16,19,24,.08); }
.modal__kicker{ margin:0 0 6px; text-transform: uppercase; letter-spacing: .24em; font-weight: 850; font-size: .70rem; color: rgba(16,19,24,.58); }
.modal__title{ margin:0; font-family: var(--serif); font-size: 1.9rem; font-weight: 600; }
.modal__subtitle{ margin: 8px 0 0; color: rgba(16,19,24,.72); }
.modal__close{ position:absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(16,19,24,.12); background: rgba(16,19,24,.03); cursor:pointer; font-size: 1.5rem; color: var(--ink); }

.formGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px){ .formGrid{ grid-template-columns: 1fr; } }
.label{ display:block; margin: 12px 0 6px; font-weight: 800; color: rgba(16,19,24,.78); }
.label__hint{ color: rgba(16,19,24,.55); font-weight: 650; font-size: .92em; }
.input{ width:100%; border-radius: 16px; border: 1px solid rgba(16,19,24,.12); background: rgba(255,255,255,.92); padding: 12px 12px; outline: none; color: var(--ink); }
.input:focus{ border-color: rgba(var(--emerald-rgb),.45); box-shadow: 0 0 0 4px rgba(var(--emerald-rgb),.18); }
.input--textarea{ min-height: 110px; resize: vertical; }
.fineprint{ margin: 12px 0 0; font-size: .86rem; color: rgba(16,19,24,.62); }

.plantModal{ position: fixed; inset: 0; display:none; z-index: 92; }
.plantModal[aria-hidden="false"]{ display:block; }
.plantModal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.plantModal__dialog{ position: relative; width: min(960px, calc(100% - 24px)); margin: 7vh auto; border-radius: 28px; background: rgba(255,255,255,.96); border: 1px solid rgba(16,19,24,.10); box-shadow: var(--shadow); overflow:hidden; color: var(--ink); }
.plantModal__close{ position:absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(16,19,24,.12); background: rgba(16,19,24,.03); cursor:pointer; font-size: 1.5rem; color: var(--ink); }
.plantModal__content{ display:grid; grid-template-columns: 1.1fr .9fr; }
.plantModal__media{ background: rgba(16,19,24,.04); padding: 18px; }
.plantModal__media img{ width:100%; height: 100%; max-height: 520px; object-fit: contain; border-radius: 18px; border: 1px solid rgba(16,19,24,.10); background: rgba(255,255,255,.92); }
@media (max-width: 980px){ .plantModal__content{ grid-template-columns: 1fr; } }

.lightbox{ position: fixed; inset: 0; display:none; z-index: 95; }
.lightbox.is-open{ display:block; }
.lightbox__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.68); backdrop-filter: blur(8px); }
.lightbox__dialog{ position: absolute; inset: 0; background: radial-gradient(900px 650px at 18% 0%, rgba(var(--emerald-rgb),.16), transparent 60%), radial-gradient(900px 650px at 100% 10%, rgba(var(--emerald2-rgb),.10), transparent 60%), rgba(12,14,18,.96); color: rgba(255,255,255,.92); }
.lightbox__media{ position:absolute; inset: 64px 18px 72px 18px; z-index: 0; }
.lightbox__picture{ width:100%; height:100%; display:block; }
.lightbox__img{ width:100%; height:100%; object-fit: contain; }
.lightbox__meta{ position:absolute; left: 18px; right: 18px; bottom: 14px; display:flex; align-items: baseline; justify-content: space-between; gap: 12px; z-index: 2; }
.lightbox__counter{ margin:0; letter-spacing: .22em; text-transform: uppercase; font-size: .78rem; color: rgba(255,255,255,.72); }
.lightbox__caption{ margin:0; text-align:right; color: rgba(255,255,255,.84); max-width: 70ch; }
.lightbox__close{ position:absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); cursor:pointer; font-size: 1.6rem; line-height: 1; z-index: 3; }
.lightbox__nav{ position:absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); cursor:pointer; display:grid; place-items:center; z-index: 3; }
.lightbox__nav--prev{ left: 14px; }
.lightbox__nav--next{ right: 14px; }
.lightbox__nav:hover, .lightbox__close:hover{ background: rgba(255,255,255,.10); }

.concierge{ position: fixed; right: 18px; bottom: 18px; z-index: 70; display:flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.concierge__btn{ width: 54px; height: 54px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(16,19,24,.78); backdrop-filter: blur(10px); color: rgba(255,255,255,.92); cursor:pointer; box-shadow: 0 18px 60px rgba(0,0,0,.35); display:grid; place-items:center; }
.concierge__panel{ width: min(360px, calc(100vw - 36px)); border-radius: 22px; border: 1px solid rgba(16,19,24,.12); background: radial-gradient(900px 650px at 18% 0%, rgba(var(--emerald-rgb),.14), transparent 60%), radial-gradient(900px 650px at 100% 10%, rgba(var(--emerald2-rgb),.10), transparent 60%), rgba(255,255,255,.94); box-shadow: 0 22px 80px rgba(16,19,24,.18); padding: 14px 14px; transform: translateY(8px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.concierge.is-open .concierge__panel{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.concierge__title{ margin: 0 0 4px; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.concierge__sub{ margin: 0 0 12px; color: rgba(16,19,24,.70); }
.concierge__actions{ display:flex; flex-direction: column; gap: 10px; }

.preloader { position: fixed; inset: 0; background: var(--night); z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.preloader__logo { width: 180px; height: auto; opacity: 0; animation: preloaderFadeIn .8s ease forwards; }
@keyframes preloaderFadeIn { to { opacity: 1; } }

/* ========================================================================
   MODIFICAÃ‡Ã•ES MOBILE (SOTD NATIVE APP LAYOUT)
   ======================================================================== */
@media (max-width: 720px){
  .preloader__logo { width: 140px; }

  .header__inner{ height: 64px; }
  .menuBtn__label{ display:none; }
  .projectLogo__img{ width: 130px; }
  .projectLogo__name{ font-size: .92rem; }
  .projectLogo__sub{ font-size: .68rem; }
  .hero{ min-height: 100svh; }
  
  .heroCaption{ left: 12px; right: 12px; max-width: none; bottom: 86px; padding: 16px 16px; border-radius: 16px; background: radial-gradient(560px 360px at 16% 0%, rgba(var(--emerald-rgb),.14), transparent 60%), rgba(10,12,14,.42); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .heroCaption__kicker{ margin: 0 0 8px; font-size: .66rem; letter-spacing: .24em; }
  .heroCaption__title{ margin: 0 0 12px; font-size: 1.45rem; line-height: 1.06; }
  .heroCaption__meta{ display:none; }
  .heroCaption__actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .heroCaption__actions .btn{ width: 100%; justify-content: center; min-height: 44px; padding: 12px 14px; font-size: .95rem; }
  .heroScroll{ bottom: 22px; }
  
  .band{ padding: 68px 0; }
  .split--manifesto .sideStack{ order: -1; }
  
  .bigQuote { font-size: 1.5rem; line-height: 1.1; }
  
  .inlineFacts { flex-direction: column; align-items: stretch; gap: 8px; }
  .inlineFact { justify-content: space-between; padding: 14px 16px; border-radius: 16px; }

  /* CORREÃ‡ÃƒO DOS BOTÃ•ES DESALINHADOS NO MOBILE (PRINTS) */
  .proseActions, .panel__actions {
    justify-content: center;
  }

  /* CORREÃ‡ÃƒO DA CAIXA DE LOCALIZAÃ‡ÃƒO VAZANDO A TELA */
  .locFacts { 
    grid-template-columns: 1fr 1fr !important; 
    gap: 12px;
  }
  .locFact { 
    text-align: center;
    padding: 14px 10px;
  }

  /* EMPILHAMENTO DOS BOTÃ•ES PARA NÃƒO VAZAR O CELULAR */
  .proseActions, .panel__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .proseActions .btn, .panel__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .typesGrid { grid-template-columns: 1fr !important; gap: 24px; padding-bottom: 0; overflow-x: visible; }
  .factsStrip { grid-template-columns: 1fr !important; gap: 12px; padding-bottom: 0; overflow-x: visible; }
  .glanceGrid { grid-template-columns: 1fr 1fr !important; gap: 12px; padding-bottom: 0; overflow-x: visible; }
  .moments { grid-template-columns: 1fr !important; gap: 16px; }
  
  .typeCard { 
    transform: translate(-4px, -4px); 
    box-shadow: 1px 1px 0px #104d5e, 2px 2px 0px #104d5e, 3px 3px 0px #104d5e, 4px 4px 0px #104d5e, 8px 8px 20px rgba(0,0,0,0.12); 
  }
  .typeCard:hover { transform: translate(0, 0); box-shadow: 0 0 0 #104d5e, 2px 2px 10px rgba(0,0,0,0.1); }
  
  .typeCard--featured { 
    transform: translate(-4px, -4px); 
    box-shadow: 1px 1px 0px var(--emerald), 2px 2px 0px var(--emerald), 3px 3px 0px var(--emerald), 4px 4px 0px var(--emerald), 8px 8px 20px rgba(16, 77, 94, 0.2); 
  }
  .typeCard--featured:hover { transform: translate(0, 0); box-shadow: 0 0 0 var(--emerald), 2px 2px 10px rgba(16, 77, 94, 0.2); }
  
  .moment { 
    transform: translate(-4px, -4px); 
    box-shadow: 1px 1px 0px rgba(255,255,255,0.2), 2px 2px 0px rgba(255,255,255,0.2), 3px 3px 0px rgba(255,255,255,0.2), 4px 4px 0px rgba(255,255,255,0.2), 8px 8px 20px rgba(0,0,0,0.3); 
  }
  .moment:hover { transform: translate(0, 0); box-shadow: 0 0 0 rgba(255,255,255,0.2), 2px 2px 10px rgba(0,0,0,0.2); }

  .grid2{ grid-template-columns: 1fr; gap: 14px; }
  .mapCard__frame{ height: 320px; }
  .contactBar{ flex-direction: column; align-items: stretch; gap: 14px; }
  .contactBar__right{ display:grid; grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 420px){
  .heroCaption__title{ font-size: 1.42rem; }
  .band{ padding: 60px 0; }
  .mapCard__frame{ height: 280px; }
}
