:root {
  --ink:#081c2b; --ink-soft:#163549; --blue:#176477; --sea:#a0e0de;
  --sun:#e6c28d; --terracotta:#996548; --sand:#eef2f1; --cream:#f8f9f6;
  --white:#f9fcfc; --line:#d7e0e1;
  --display:"Marcellus",Georgia,serif; --sans:"DM Sans",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:7rem; }
body { margin:0; color:var(--ink); background:var(--cream); font:400 1rem/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { display:block; max-width:100%; }
h1,h2,h3,p { overflow-wrap:break-word; }
h2,h3 { text-wrap:balance; }
em { font-family:var(--display); font-weight:400; font-style:normal; }
::selection { color:var(--ink); background:var(--sea); }
:focus-visible { outline:3px solid #3d9cae; outline-offset:5px; }
.skip-link { position:fixed; left:1rem; top:-5rem; padding:.7rem 1rem; z-index:100; color:var(--ink); background:white; border-radius:.6rem; }
.skip-link:focus { top:1rem; }

/* Floating navigation */
.site-header { position:fixed; inset:1.1rem clamp(1rem,3vw,3rem) auto; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; padding:.75rem 1.1rem .75rem 1.4rem; border:1px solid #ffffff20; border-radius:1rem; color:var(--white); background:#0b2334b8; backdrop-filter:blur(22px); transition:background .25s,box-shadow .25s; }
.site-header.scrolled { background:#0b2334f2; box-shadow:0 8px 35px #04131b18; }
.brand { display:inline-flex; align-items:center; gap:.65rem; width:max-content; text-decoration:none; font-weight:600; letter-spacing:-.025em; }
.brand-mark { display:grid; place-items:center; width:2.15rem; aspect-ratio:1; border:1px solid #a0e0de70; border-radius:.65rem; color:var(--sea); font:400 1.25rem var(--display); }
.main-nav { display:flex; gap:1.8rem; }
.main-nav a { padding:.4rem 0; color:#cedadd; font-size:.875rem; text-decoration:none; transition:color .2s; }
.main-nav a:hover { color:white; }
.header-action { justify-self:end; padding:.5rem .95rem; border:1px solid #a0e0de50; border-radius:.55rem; font-size:.875rem; font-weight:600; text-decoration:none; background:#a0e0de0e; }
.header-action:hover { background:#a0e0de25; }

/* Mediterranean photography and a quieter product introduction */
.hero { position:relative; min-height:min(900px,max(760px,100svh)); display:flex; align-items:center; overflow:hidden; color:var(--white); background:var(--ink); }
.hero-image { position:absolute; top:7.1rem; right:2.1%; bottom:2rem; width:43%; height:calc(100% - 9.1rem); object-fit:cover; object-position:74% center; border-radius:1.6rem; animation:revealImage .8s ease both; }
.hero-shade { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 6% 90%,#15617b22,transparent 60%); }
.hero-glow { position:absolute; right:2.1%; bottom:2rem; width:43%; height:45%; border-radius:0 0 1.6rem 1.6rem; background:linear-gradient(transparent,#041b29ac); pointer-events:none; }
.hero-content { position:relative; z-index:2; width:55%; padding:9rem 3.2vw 5rem 6vw; }
.eyebrow,.section-kicker { margin:0 0 1.6rem; color:var(--blue); font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow.light { color:var(--sea); }
.hero .eyebrow { display:flex; align-items:center; gap:.8rem; max-width:30rem; }
.hero .eyebrow::before { content:""; flex:0 0 1.8rem; height:1px; background:var(--sea); }
.hero h1 { max-width:720px; margin:0; font:500 clamp(2.7rem,4.4vw,5rem)/1.08 var(--sans); letter-spacing:-.055em; text-wrap:balance; }
.hero h1 em { color:var(--sea); letter-spacing:-.045em; }
.hero-copy { max-width:540px; margin:1.7rem 0 0; color:#bbcbd2; font-size:1.04rem; line-height:1.75; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:3.25rem; padding:.8rem 1.25rem; border:1px solid transparent; border-radius:.65rem; text-decoration:none; font-size:.9rem; font-weight:600; transition:background .2s,box-shadow .2s,transform .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 6px 25px #a0e0de20; }
.button-sun { color:var(--ink); background:var(--sea); }
.button-sun:hover { background:#c4eeeb; }
.text-link { color:#e1e9ec; font-size:.875rem; text-decoration:none; }
.text-link span { margin-left:.4rem; }
.text-link:hover { text-decoration:underline; text-underline-offset:.35rem; }
.hero-note { position:absolute; right:4%; bottom:3.7rem; width:39%; display:flex; align-items:center; gap:.85rem; padding:1.1rem; border:1px solid #ffffff4a; border-radius:.85rem; color:white; background:#092634b5; backdrop-filter:blur(16px); }
.note-symbol { flex-shrink:0; display:grid; place-items:center; width:2.8rem; aspect-ratio:1; border:1px solid #a0e0de60; border-radius:.7rem; color:var(--sea); font:1.6rem var(--display); }
.hero-note small { display:block; font-size:.94rem; font-weight:500; }
.hero-note div > span { display:block; margin-top:.2rem; color:#d2dfe2; font-size:.8rem; }

.section { padding:clamp(4.5rem,7.5vw,8rem) max(6vw,calc((100vw - 1380px) / 2)); }
.section-kicker { margin-bottom:3rem; }
.manifesto-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:7vw; align-items:start; }
.display,.manifesto h2 { margin:0; font:500 clamp(2.2rem,3.55vw,4rem)/1.16 var(--sans); letter-spacing:-.045em; }
.manifesto h2 em,.closing h2 em { color:var(--blue); }
.manifesto-copy p { margin:0 0 1.1rem; color:#4c626d; }
.manifesto-copy .premium-note { margin-top:1.8rem; padding:0 0 0 1.25rem; border-left:2px solid var(--sun); color:var(--ink); font:400 1.28rem/1.5 var(--display); }
.principles { display:grid; grid-template-columns:.85fr 1.35fr; gap:6vw; border-block:1px solid var(--line); background:var(--sand); }
.principles-intro { align-self:center; }
.principles-intro h2 { margin:0; font:500 clamp(2.2rem,3vw,3.5rem)/1.15 var(--sans); letter-spacing:-.045em; }
.principle-list { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.principle { padding:1.8rem; border:1px solid #d5dfe0; border-radius:.9rem; background:#ffffff80; }
.principle > span { display:block; margin-bottom:1.5rem; color:var(--blue); font:.8rem ui-monospace,monospace; }
.principle h3 { margin:0 0 .65rem; font-size:1.15rem; font-weight:600; line-height:1.35; letter-spacing:-.025em; text-wrap:initial; }
.principle p { margin:0; color:#4c626d; font-size:.94rem; }

.experience { position:relative; color:var(--white); background:radial-gradient(ellipse at 12% 48%,#15425788,transparent 55%),var(--ink); }
.experience-heading { max-width:900px; }
.experience-heading h2,.demo-copy h2 { margin:0; font:500 clamp(2.4rem,4vw,4.5rem)/1.12 var(--sans); letter-spacing:-.045em; }
.experience-heading h2 em { color:var(--sea); }
.experience-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:7vw; margin-top:4rem; align-items:center; }
.phone-scene { position:relative; min-height:680px; display:grid; place-items:center; }
.preview-label { position:absolute; top:0; color:#b3c6d0; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.sun-disc { position:absolute; width:100%; max-width:480px; aspect-ratio:1; border:1px solid #a0e0de26; border-radius:50%; background:radial-gradient(circle,#3b91a31c,transparent 70%); box-shadow:0 0 0 2rem #a0e0de05,0 0 0 2.05rem #a0e0de0e; }
.phone { position:relative; width:min(310px,100%); padding:9px; border:1px solid #abc8d472; border-radius:2.5rem; background:linear-gradient(150deg,#324c5b,#071927 60%); box-shadow:0 35px 75px #0006,inset 0 0 0 3px #ffffff09; }
.phone-top { display:flex; justify-content:space-between; align-items:center; padding:.5rem 1rem .7rem; color:#d2e3e8; font-size:.75rem; }
.phone-top i { width:4rem; height:.4rem; border-radius:1rem; background:#030b0e; }
.phone-photo { position:relative; height:315px; border-radius:1.85rem 1.85rem .6rem .6rem; overflow:hidden; background:linear-gradient(150deg,#081c2b00,#081c2bcf),url("assets/hero-hospitality.png") 73% center / cover; }
.phone-brand { padding:1rem; color:white; font-size:.875rem; font-weight:600; }
.welcome-card { position:absolute; inset:auto .75rem .75rem; padding:1rem; border:1px solid #ffffff40; border-radius:.8rem; background:#082732c9; backdrop-filter:blur(12px); }
.welcome-card small,.welcome-card span { display:block; color:#d1e1e7; font-size:.75rem; }
.welcome-card strong { display:block; margin:.3rem 0 .5rem; font:400 1.35rem/1.25 var(--display); }
.phone-body { padding:1rem .5rem .7rem; }
.phone-body p { margin:0 0 .7rem; font-size:.875rem; font-weight:500; }
.phone-actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.phone-actions span { padding:.65rem; border:1px solid #ffffff22; border-radius:.6rem; color:#dae6eb; background:#ffffff0a; font-size:.75rem; }
.phone-actions span:last-child { grid-column:1 / -1; color:var(--ink); background:var(--sea); }
.experience-point { display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; padding:1.7rem 0; border-top:1px solid #ffffff22; }
.point-number { padding-top:.3rem; color:var(--sea); font:.8rem ui-monospace,monospace; }
.experience-point h3 { margin:0 0 .5rem; font-size:1.4rem; font-weight:500; letter-spacing:-.025em; text-wrap:initial; }
.experience-point p { margin:0; color:#bfced5; }
.contact-bridge { margin-top:1.5rem; padding:1.6rem; border:1px solid #a0e0de55; border-radius:.9rem; background:linear-gradient(130deg,#a0e0de12,#a0e0de04); }
.contact-label { margin:0 0 .8rem; color:var(--sea); font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.contact-bridge h3 { margin:0; font:400 1.8rem/1.2 var(--display); text-wrap:initial; }
.contact-bridge-copy > p:last-child { margin:.9rem 0 0; color:#bfced5; }
.contact-flow { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.5rem; font-size:.75rem; }
.contact-flow span { padding:.45rem .6rem; border-radius:.45rem; }
.contact-flow > span:first-child { padding-left:0; color:#dae5e9; }
.contact-flow i { color:var(--sea); font-style:normal; }
.contact-choice { border:1px solid #ffffff30; color:#e1ecee; }
.contact-host { color:var(--ink); background:var(--sea); }

.demo-callout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:6vw; align-items:center; border-top:1px solid #ffffff24; color:var(--white); background:radial-gradient(ellipse at 90% 60%,#27799144,transparent 70%),#102d40; }
.demo-copy > p:not(.eyebrow) { margin:1.5rem 0 2rem; color:#c4d4dc; }
.demo-preview { min-width:0; padding:.65rem; border:1px solid #a0e0de55; border-radius:1.15rem; background:#ffffff09; box-shadow:0 30px 70px #0419234d; }
.demo-browser-bar { display:flex; align-items:center; gap:.35rem; padding:.5rem .55rem .9rem; color:#c2d4dc; font-size:.75rem; }
.demo-browser-bar i { width:.4rem; aspect-ratio:1; flex-shrink:0; border-radius:50%; background:#85a8b8; }
.demo-browser-bar span { margin-left:.55rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-screen { padding:clamp(1.25rem,3vw,2.5rem); border-radius:.75rem; color:var(--ink); background:linear-gradient(140deg,#fbf5e9,#f8fcfa 65%,#e7f0ee); }
.demo-screen-top { display:flex; flex-direction:column; }
.demo-screen-top small,.demo-gennarino small { color:var(--blue); font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.demo-screen-top strong { margin:.65rem 0; font:400 clamp(2rem,3vw,3.3rem)/1.1 var(--display); }
.demo-screen-top span { color:#506674; font-size:.875rem; }
.demo-shortcuts { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:2rem 0; }
.demo-shortcuts span { display:grid; place-items:center; padding:.9rem .4rem; border:1px solid var(--line); border-radius:.6rem; background:#ffffffaa; font-size:.75rem; text-align:center; }
.demo-gennarino { padding:1.3rem; border:1px solid #476379; border-radius:.7rem; color:white; background:linear-gradient(110deg,var(--ink),#184153); }
.demo-gennarino small { color:var(--sea); }
.demo-gennarino strong { display:block; margin-top:.4rem; font-size:1.4rem; font-weight:500; line-height:1.3; }

.territory { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7vw; align-items:center; }
.territory-copy h2 { margin:0 0 1.5rem; font:500 clamp(2.2rem,3.5vw,4rem)/1.15 var(--sans); letter-spacing:-.045em; }
.territory-copy > p:last-child { color:#4c626d; }
.territory-journey { padding:1.5rem; border:1px solid var(--line); border-radius:1rem; background:white; box-shadow:0 20px 55px #122e4210; }
.journey-step { display:grid; grid-template-columns:2.4rem 1fr; gap:1rem; padding:1.15rem; border-radius:.65rem; }
.journey-number { display:grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid var(--line); border-radius:.5rem; color:var(--blue); font:.75rem ui-monospace,monospace; }
.journey-step small { color:var(--blue); font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.journey-step h3 { margin:.2rem 0 .4rem; font-size:1.15rem; font-weight:600; line-height:1.3; text-wrap:initial; }
.journey-step p { margin:0; color:#4c626d; font-size:.9rem; }
.journey-brand { color:white; background:linear-gradient(120deg,var(--ink),#184153); }
.journey-brand .journey-number { border-color:#ffffff40; color:var(--sea); }
.journey-brand small { color:var(--sea); }
.journey-brand p { color:#c6d6dc; }
.journey-arrow { width:2.4rem; margin:.2rem 0 .2rem 1.15rem; color:var(--blue); text-align:center; line-height:1.2; }
.journey-result { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin-top:1rem; padding:1rem 1.15rem; border:1px solid #d6e6e6; border-radius:.6rem; background:#e9f4f3; }
.journey-result span { color:var(--blue); font-size:.75rem; }
.journey-result strong { font-size:.95rem; font-weight:500; }

.pilot { position:relative; display:grid; grid-template-columns:.6fr 1fr; gap:3rem; align-items:center; color:white; background:#153c49; overflow:hidden; }
.pilot::after { content:""; position:absolute; width:35vw; aspect-ratio:1; right:-15vw; bottom:-25vw; border:1px solid #a0e0de38; border-radius:50%; box-shadow:0 0 0 6vw #a0e0de05,0 0 0 12vw #a0e0de04; pointer-events:none; }
.pilot-index { color:#dcc5a2; font:400 clamp(8rem,19vw,19rem)/1 var(--display); letter-spacing:-.1em; }
.pilot-content { position:relative; z-index:1; }
.pilot-content h2 { margin:0; font:500 clamp(2.4rem,3.8vw,4.2rem)/1.12 var(--sans); letter-spacing:-.04em; }
.pilot-content > p:last-child { max-width:620px; margin:1.5rem 0 0; color:#c9d9df; }
.closing { text-align:center; background:var(--cream); }
.closing h2 { margin:0 auto; max-width:1060px; font:500 clamp(2.2rem,3.7vw,4.3rem)/1.15 var(--sans); letter-spacing:-.04em; }
.closing-copy { max-width:650px; margin:1.8rem auto; color:#4c626d; }
.closing-invitation { display:inline-block; margin:0; padding-bottom:.25rem; border-bottom:1px solid var(--blue); color:var(--blue); font-weight:500; }
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:2rem 6vw; color:#b7cad4; background:var(--ink); font-size:.875rem; }
footer p:last-child { justify-self:end; }
.footer-brand { color:white; }

/* Content remains visible without JavaScript and throughout transitions. */
.reveal { opacity:1; }
.reveal.visible { animation:settle .5s ease both; }
@keyframes settle { from { transform:translateY(12px); } to { transform:translateY(0); } }
@keyframes revealImage { from { opacity:.4; } to { opacity:1; } }

@media (min-width:1800px) {
  .hero-content { padding-left:max(6vw,calc((100vw - 1580px) / 2)); }
}
@media (max-width:1050px) {
  .main-nav { gap:1.1rem; }
  .hero-content { padding-left:4vw; padding-right:2vw; }
  .hero h1 { font-size:clamp(2.6rem,4.6vw,3.5rem); }
  .section { padding-inline:4vw; }
  .principles { grid-template-columns:1fr; gap:2.5rem; }
  .principles-intro { max-width:680px; }
  .experience-layout { gap:4vw; }
  .contact-flow { gap:.35rem; }
  .demo-callout,.territory { gap:4vw; }
}
@media (max-width:760px) {
  html { scroll-padding-top:6rem; }
  .site-header { grid-template-columns:1fr auto; inset:.75rem .8rem auto; padding:.65rem .8rem; gap:.5rem; }
  .main-nav { display:none; }
  .hero { min-height:auto; flex-direction:column; align-items:stretch; padding-bottom:1rem; }
  .hero-content { width:100%; padding:8rem 6vw 2.5rem; }
  .hero h1 { max-width:640px; font-size:clamp(2.7rem,7.4vw,4.2rem); line-height:1.1; }
  .hero .eyebrow { font-size:.7rem; }
  .hero-copy { max-width:600px; font-size:1rem; }
  .hero-image { position:relative; order:2; inset:auto; width:calc(100% - 2rem); height:370px; margin:0 1rem; border-radius:1rem; object-position:70% center; }
  .hero-glow { display:none; }
  .hero-note { z-index:3; right:2rem; left:2rem; bottom:2rem; width:auto; padding:.9rem; }
  .section { padding:4.5rem 6vw; }
  .manifesto-grid,.experience-layout,.demo-callout,.territory { grid-template-columns:1fr; gap:2.5rem; }
  .manifesto h2 { max-width:630px; }
  .section-kicker { margin-bottom:2rem; }
  .experience-layout { margin-top:3rem; }
  .phone-scene { min-height:640px; }
  .phone-scene .sun-disc { width:78%; }
  .demo-preview { width:100%; max-width:620px; justify-self:center; }
  .pilot { grid-template-columns:.3fr 1fr; gap:2rem; }
  .pilot-index { font-size:18vw; }
  footer { grid-template-columns:1fr auto; }
  footer > p:nth-child(2) { display:none; }
}
@media (max-width:440px) {
  .brand { font-size:.94rem; }
  .brand-mark { width:1.9rem; }
  .header-action { font-size:.8rem; padding:.45rem .7rem; }
  .hero-content { padding-top:7rem; }
  .hero-actions { gap:1rem; }
  .hero-actions .button { width:100%; }
  .hero h1 { font-size:2.65rem; }
  .hero-image { height:310px; }
  .hero-note small { font-size:.82rem; }
  .hero-note div > span { font-size:.75rem; }
  .principle-list { grid-template-columns:1fr; }
  .principle { padding:1.5rem; }
  .principle > span { margin-bottom:1rem; }
  .contact-bridge { padding:1.25rem; }
  .contact-flow { flex-direction:column; align-items:stretch; text-align:center; }
  .contact-flow i { transform:rotate(90deg); }
  .contact-flow > span:first-child { padding-left:.6rem; }
  .territory-journey { padding:.75rem; }
  .journey-step { padding:1rem .65rem; gap:.7rem; }
  .journey-arrow { margin-left:.65rem; }
  .pilot { grid-template-columns:1fr; gap:2rem; }
  .pilot-index { font-size:5rem; }
  .closing h2 br { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}