/* =====================================================================
   Travels JK — site styles (home + destination pages)
   The home hero is a 1440 × 810 design canvas (390 × 844 in portrait),
   pinned while the destination tiles turn; site.js sets --u = one design px.
   ===================================================================== */

/* ---------- 0. Fonts (self-hosted) ---------- */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- 1. Tokens ---------- */
:root {
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Roboto Condensed", "Arial Narrow", sans-serif;
  --deep: #063936;
  --green: #0b4f4a;
  --teal: #127e76;
  --mint: #e3f1ee;
  --sand: #f3f6f6;
  --ink: #0e1a19;
  --gold: #ffa800;
  --grad: linear-gradient(120deg, #127e76, #0b4f4a);
  --u: 1px;
  --gutter: clamp(20px, 6vw, 138px);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1164px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1240px) { .wrap { padding: 0; } }
.center { text-align: center; }
.eyebrow { font: 600 15px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.eyebrow--light { color: #9fe3d8; }
.h2 { margin-top: 10px; font: 700 clamp(36px, 4.4vw, 58px)/1.12 var(--serif); letter-spacing: .002em; }
.h2--light { color: #fff; }
.btn-grad, .btn-line, .btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 6px; font: 700 14px/1 var(--sans); white-space: nowrap; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s, background .3s; }
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(11, 79, 74, .8); }
.btn-grad:hover, .btn-white:hover, .btn-line:hover { transform: translateY(-2px); }
.btn-grad svg, .dcard__go svg { width: 20px; height: 20px; }
.btn-line { border: 1.5px solid rgba(255, 255, 255, .75); color: #fff; }
.btn-line:hover { background: rgba(255, 255, 255, .12); }
.btn-white { background: #fff; color: var(--green); }
.btn-grad--lg, .btn-line--lg, .btn-white { height: 58px; padding: 0 26px; font-size: 18px; }

/* ---------- 3. Nav ---------- */
.nav { position: absolute; left: calc(138 * var(--u)); top: calc(22 * var(--u)); width: calc(1164 * var(--u)); display: flex; align-items: center; justify-content: space-between; z-index: 8; color: #fff; font-size: calc(14 * var(--u)); }
.nav__logo img { width: calc(118 * var(--u)); height: auto; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35)); }
.nav__links { display: flex; gap: calc(44 * var(--u)); }
.nav__links a { opacity: .88; transition: opacity .3s; }
.nav__links a:first-child { font-weight: 700; opacity: 1; }
.nav__links a:hover { opacity: 1; }
.nav__end { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.nav .btn-line, .nav .btn-grad { height: calc(38 * var(--u)); padding: 0 calc(18 * var(--u)); font-size: calc(14 * var(--u)); border-radius: calc(5 * var(--u)); }
.nav__menu { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav__menu i { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; border-radius: 2px; }
.nav__menu i:first-child { top: 17px; } .nav__menu i:last-child { top: 25px; }

/* ---------- 4. Home hero ---------- */
.hero { position: relative; height: calc(100vh + 340vh); height: calc(100svh + 340vh); background: var(--deep); }   /* 280vh of scroll = one turn of the tiles */
.hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: -3%; z-index: 0; }
.hero__video, .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bg { opacity: 0; will-change: opacity, transform; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 25, 23, .5), transparent 24%), linear-gradient(90deg, rgba(3, 25, 23, .72), rgba(3, 25, 23, .25) 55%, rgba(3, 25, 23, .1)), linear-gradient(0deg, rgba(3, 25, 23, .55), transparent 40%); pointer-events: none; }
.route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.flyer { position: absolute; left: 0; top: 0; width: 46px; height: 46px; z-index: 2; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); will-change: transform; }
.cv { position: absolute; left: 50%; top: 50%; width: calc(1440 * var(--u)); height: calc(810 * var(--u)); margin: calc(-405 * var(--u)) 0 0 calc(-720 * var(--u)); z-index: 3; }
.cv > * { position: absolute; }
.hero [data-k], .tile, .title .ch { will-change: transform, opacity; }
.title { left: calc(138 * var(--u)); top: calc(250 * var(--u)); width: calc(560 * var(--u)); color: #fff; }
.title__h { font: 700 calc(112 * var(--u)) / .95 var(--cond); letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.title__h > span { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.title__h .ch { display: inline-block; }
.title__p { margin-top: calc(22 * var(--u)); width: calc(523 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.5; color: rgba(255, 255, 255, .9); }
.title__cta { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(36 * var(--u)); }
.title .btn-grad--lg, .title .btn-line--lg { height: calc(60 * var(--u)); padding: 0 calc(25 * var(--u)); font-size: calc(19 * var(--u)); }
.float { color: #fff; pointer-events: none; }
.float--compass { left: calc(600 * var(--u)); top: calc(150 * var(--u)); width: calc(88 * var(--u)); height: calc(88 * var(--u)); opacity: .75; }

.tiles { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.tile { position: absolute; left: 0; top: 0; width: calc(273 * var(--u)); height: calc(493 * var(--u)); transform-origin: 0 0; pointer-events: auto; color: #fff; }
.tile__shadow { position: absolute; left: calc(16 * var(--u)); top: calc(28 * var(--u)); right: calc(-16 * var(--u)); bottom: calc(-28 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(3, 15, 34, .45); filter: blur(calc(20 * var(--u))); }
.tile__img { position: absolute; inset: 0; border-radius: calc(10 * var(--u)); overflow: hidden; background: var(--green); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.tile:hover .tile__img img { transform: scale(1.08); }
.tile__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 25, 23, .75), transparent 50%); }
.tile__txt { position: absolute; left: calc(20 * var(--u)); bottom: calc(22 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
.tile__txt small { font-size: calc(14 * var(--u)); opacity: .9; }
.tile__txt b { font: 700 calc(26 * var(--u)) / 1.1 var(--sans); }
.counter { left: calc(758 * var(--u)); top: calc(742 * var(--u)); width: calc(544 * var(--u)); display: flex; align-items: center; gap: calc(24 * var(--u)); color: #fff; }
.counter button { display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: 0; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%; background: none; cursor: pointer; transition: background .3s; }
.counter button:hover { background: rgba(255, 255, 255, .2); }
.counter button svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.counter button:first-child svg { transform: scaleX(-1); }
.counter__line { flex: 1; height: 2px; background: rgba(255, 255, 255, .3); }
.counter__line i { display: block; height: 100%; background: #fff; transform-origin: 0 0; transform: scaleX(var(--p, 0)); }
.counter b { font: 500 calc(36 * var(--u)) / 1 var(--sans); }

/* portrait hero (390 × 844) */
.is-portrait .cv { width: calc(390 * var(--u)); height: calc(844 * var(--u)); margin: calc(-422 * var(--u)) 0 0 calc(-195 * var(--u)); }
.is-portrait .home .nav, .home.is-portrait .nav { left: calc(18 * var(--u)); top: calc(14 * var(--u)); width: calc(354 * var(--u)); }
.is-portrait .nav__links, .is-portrait .nav .btn-line, .is-portrait .nav .btn-grad { display: none; }
.is-portrait .nav__menu { display: block; }
.is-portrait .nav__logo img { width: calc(76 * var(--u)); }
.is-portrait .title { left: calc(20 * var(--u)); top: calc(120 * var(--u)); width: calc(350 * var(--u)); }
.is-portrait .title__h { font-size: calc(72 * var(--u)); }
.is-portrait .title__p { width: calc(340 * var(--u)); font-size: calc(15 * var(--u)); }
.is-portrait .title__cta { margin-top: calc(22 * var(--u)); }
.is-portrait .title .btn-grad--lg, .is-portrait .title .btn-line--lg { height: calc(48 * var(--u)); padding: 0 calc(18 * var(--u)); font-size: calc(15 * var(--u)); }
.is-portrait .float--compass { left: calc(300 * var(--u)); top: calc(100 * var(--u)); width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.is-portrait .counter { left: calc(20 * var(--u)); top: calc(476 * var(--u)); width: calc(350 * var(--u)); gap: calc(14 * var(--u)); }
.is-portrait .counter b { font-size: calc(26 * var(--u)); }

/* ---------- 5. Home sections ---------- */
.about { position: relative; overflow: hidden; padding: clamp(60px, 6vw, 90px) 0 clamp(40px, 4vw, 56px); }
.dots { position: absolute; left: 98px; top: 340px; width: 130px; height: 230px; background: radial-gradient(circle, rgba(3, 15, 34, .2) 2.5px, transparent 3px) 0 0 / 25px 25px; }
.about__stamp { position: absolute; left: calc(50% - 170px); top: 50px; width: 150px; color: var(--teal); opacity: .5; }
.about__head { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 120px; align-items: end; }
.about__text { display: grid; gap: 28px; justify-items: start; color: rgba(0, 0, 0, .6); font-size: 19px; }
.about__pics { position: relative; display: grid; grid-template-columns: 1fr 1.02fr 1fr; gap: 24px; align-items: start; margin-top: 50px; }
.about__pics::before { content: ""; position: absolute; left: 50%; top: -110px; width: 56%; height: 90%; border-radius: 10px; background: rgba(11, 79, 74, .08); z-index: -1; }
.pic { border-radius: 10px; overflow: hidden; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic--a, .pic--c { aspect-ratio: 471 / 340; margin-top: 0; }
.pic--card { position: relative; padding: 0 0 28px; border-radius: 10px; background: #fcfcfc; box-shadow: 0 30px 60px -20px rgba(6, 23, 48, .25); overflow: visible; }
.pic--card img { aspect-ratio: 471 / 260; border-radius: 10px 10px 0 0; }
.pic__badge { position: absolute; left: 24px; top: calc(100% - 290px); display: grid; place-items: center; width: 65px; height: 65px; border-radius: 50%; background: #fcfcfc; color: var(--teal); box-shadow: 0 10px 20px rgba(6, 23, 48, .15); }
.pic__badge svg { width: 38px; height: 26px; }
.pic--card h3 { margin: 42px 24px 10px; font: 700 20px/1.2 var(--sans); }
.pic--card p { margin: 0 24px; color: rgba(0, 0, 0, .55); font-size: 15px; }

.dest { padding: clamp(40px, 4vw, 56px) 0 clamp(60px, 6vw, 84px); background: #fff; }
.dcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 44px; }
.dcards > .dcard { flex: 0 0 calc((100% - 66px) / 4); }
.dcards--3 { margin-top: 24px; }
.dcards--3 > .dcard { flex-basis: calc((100% - 44px) / 3); }
.dcard { position: relative; display: block; aspect-ratio: 372 / 596; border-radius: 10px; overflow: hidden; color: #fff; box-shadow: 0 30px 50px -30px rgba(15, 52, 87, .6); }
.dcard__img, .dcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dcard__img img { object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.dcard:hover .dcard__img img { transform: scale(1.08); }
.dcard__box { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 22px 24px 24px; background: linear-gradient(0deg, rgba(6, 57, 54, .95), rgba(6, 57, 54, .55) 65%, transparent); transform: translateY(calc(100% - 118px)); transition: transform .6s cubic-bezier(.2, .8, .2, 1), background .5s; }
.dcard:hover .dcard__box, .dcard:focus-visible .dcard__box { transform: none; background: var(--green); }
.dcard__n { font-size: 13px; letter-spacing: .12em; opacity: .7; }
.dcard__box b { font: 600 24px/1.15 var(--sans); }
.dcard__box > span:nth-of-type(2) { font-size: 14px; opacity: .85; }
.dcard__box em { font-style: normal; font-size: 14px; line-height: 1.45; opacity: .85; margin-top: 8px; }
.dcard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; font-size: 14px; }
.dcards > .dcard:first-child { grid-row: span 1; }

.services { position: relative; overflow: hidden; padding: clamp(60px, 6vw, 84px) 0; background: var(--sand); }
.float--pin { position: absolute; right: 8%; top: 70px; width: 46px; height: 60px; color: var(--teal); opacity: .8; }
.services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 120px; align-items: end; }
.services__lead { color: rgba(0, 0, 0, .6); font-size: 19px; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.serv { display: grid; gap: 14px; align-content: start; padding: 34px 30px; border-radius: 10px; background: #fff; box-shadow: 0 20px 50px -30px rgba(6, 23, 48, .35); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.serv:hover { transform: translateY(-6px); }
.serv svg { width: 58px; height: 46px; color: var(--teal); }
.serv h3 { font: 700 26px/1.2 var(--serif); }
.serv p { color: rgba(0, 0, 0, .6); font-size: 16px; }
.serv a { font-weight: 700; color: var(--teal); }

.band { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 70vh; padding: 90px 20px; color: #fff; text-align: center; }
.band__img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; object-position: 62% 50%; will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 57, 54, .7), rgba(6, 57, 54, .15)); }
.band__in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; max-width: 720px; }
.band h2 { font: 700 clamp(44px, 6vw, 84px)/1.05 var(--serif); text-shadow: 0 6px 40px rgba(0, 0, 0, .3); }
.band p { font-size: 19px; opacity: .92; }
.band__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.band__stamp { position: absolute; right: 8%; bottom: 10%; z-index: 1; width: 160px; color: rgba(255, 255, 255, .8); }

.gal { padding: clamp(60px, 6vw, 84px) 0; }
.gal__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 16vw, 230px); grid-auto-flow: dense; gap: 18px; margin-top: 40px; }
.gal__item { border-radius: 10px; overflow: hidden; background: var(--mint); }
.gal__item--tall { grid-row: span 2; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.gal__item:hover img { transform: scale(1.06); }

.contact { padding: 0 0 clamp(56px, 6vw, 84px); }
.contact__card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px 60px; padding: clamp(36px, 5vw, 70px) !important; border-radius: 16px; background: radial-gradient(80% 90% at 100% 0%, rgba(18, 126, 118, .8), transparent 70%), var(--deep); color: rgba(255, 255, 255, .85); }
.contact__copy { display: grid; gap: 18px; align-content: start; }
.contact__mail { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.contact__mail svg { width: 22px; height: 22px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .75); }
.form input, .form select, .form textarea { width: 100%; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 16px; outline: none; transition: border-color .3s, background .3s; }
.form select option { color: #000; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: #9fe3d8; background: rgba(255, 255, 255, .12); }
.form__wide { grid-column: 1 / -1; }
.form__note { font-size: 13px; opacity: .6; }
.contact--slim .contact__card { grid-template-columns: 1fr auto; align-items: center; }
.contact__btns { display: flex; flex-wrap: wrap; gap: 12px; }

.foot { padding: 70px 0 30px; background: var(--deep); color: rgba(255, 255, 255, .75); font-size: 15px; }
.foot__in { width: 100%; max-width: 1164px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
@media (min-width: 1240px) { .foot__in { padding: 0; } }
.foot__brand img { width: 110px; height: auto; margin-bottom: 16px; }
.foot h4 { margin-bottom: 14px; font: 600 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9fe3d8; }
.foot__list { display: grid; gap: 8px; }
.foot__list a:hover { color: #fff; }
.foot__copy { max-width: 1164px; margin: 50px auto 0; padding: 20px 20px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; opacity: .6; }

.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: auto; padding: 40px 20px; background: rgba(6, 57, 54, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sheet[hidden] { display: none; }
.sheet nav { display: grid; gap: 12px; text-align: center; font: 700 30px/1.15 var(--serif); color: #fff; }
.stamp { overflow: visible; }

/* ---------- 6. Destination pages ---------- */
.dpage .nav { position: absolute; left: var(--gutter); right: var(--gutter); width: auto; top: 22px; --u: 1px; }
.dhero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--deep); }
.dhero__media { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.dhero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 25, 23, .85), rgba(3, 25, 23, .15) 60%), linear-gradient(90deg, rgba(3, 25, 23, .5), transparent 60%); }
.dhero__in { position: relative; z-index: 2; padding-top: 180px !important; padding-bottom: 90px !important; }
.dhero__crumb { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.dhero__crumb a { text-decoration: underline; text-underline-offset: 4px; }
.dhero__title { margin-top: 14px; font: 700 clamp(64px, 11vw, 168px)/.9 var(--cond); letter-spacing: -.01em; text-transform: uppercase; }
.dhero__title > span { display: inline-block; overflow: hidden; padding-bottom: .04em; }
.dhero__title .ch { display: inline-block; }
.dhero__place { margin-top: 10px; font: 600 italic clamp(24px, 3vw, 36px)/1.2 var(--serif); color: #bff0e6; }
.dhero__tag { max-width: 560px; margin-top: 16px; font-size: 19px; opacity: .92; }
.dhero .title__cta { margin-top: 28px; }
.dhero__stamp { position: absolute; right: 7%; top: 22%; z-index: 2; width: 150px; color: rgba(255, 255, 255, .85); }
.dintro { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px 80px; padding-top: clamp(56px, 6vw, 84px) !important; padding-bottom: 36px !important; }
.dintro__text { display: grid; gap: 18px; font-size: 19px; color: rgba(0, 0, 0, .72); }
.dintro__text .eyebrow + p::first-letter { float: left; margin: 6px 12px 0 0; font: 700 74px/.8 var(--serif); color: var(--teal); }
.dfacts { align-self: start; padding: 30px; border-radius: 12px; background: var(--mint); }
.dfacts h3 { margin-bottom: 14px; font: 700 24px/1.2 var(--serif); color: var(--green); }
.dfacts li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(11, 79, 74, .15); }
.dfacts span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.dfacts b { font-weight: 600; }
.dhigh { padding: 36px 0 24px; }
.dhigh__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.dhigh__list li { display: grid; gap: 10px; align-content: start; padding: 30px; border-radius: 12px; border: 1px solid rgba(11, 79, 74, .15); }
.dhigh__list b { font: 700 40px/1 var(--cond); color: var(--teal); }
.dhigh__list h3 { font: 700 22px/1.25 var(--serif); }
.dhigh__list p { color: rgba(0, 0, 0, .62); font-size: 16px; }
.dgal { display: grid; gap: 18px; padding-top: 24px !important; padding-bottom: 24px !important; }
.dgal--1 { grid-template-columns: 1fr; }
.dgal--2 { grid-template-columns: 1.6fr 1fr; }
.dgal--3 { grid-template-columns: 1.5fr 1fr 1fr; }
.dgal figure { border-radius: 12px; overflow: hidden; height: clamp(320px, 42vw, 540px); }
.dgal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.dgal figure:hover img { transform: scale(1.05); }
.dhow { padding: 40px 0 70px; }
.dhow__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dhow article { display: grid; gap: 12px; align-content: start; padding: 34px; border-radius: 12px; background: var(--sand); }
.dhow svg { width: 58px; height: 44px; color: var(--teal); }
.dhow h3 { font: 700 26px/1.2 var(--serif); }
.dhow p { color: rgba(0, 0, 0, .65); }
.dhow a { font-weight: 700; color: var(--teal); }
.dnext { padding: 20px 0 56px; }
.dnext__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 40px; }
.dnext__link { display: grid; gap: 6px; padding: 26px 30px; border-radius: 12px; border: 1px solid rgba(11, 79, 74, .2); transition: background .3s, color .3s; }
.dnext__link:hover { background: var(--green); color: #fff; }
.dnext__link small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.dnext__link b { font: 700 30px/1.1 var(--serif); }
.dnext__link--r { text-align: right; }

/* ---------- 7. Responsive ---------- */
@media (max-width: 1100px) { .dcards > .dcard { flex-basis: calc((100% - 44px) / 3); } }
@media (max-width: 900px) {
  .dpage .nav__links, .dpage .nav .btn-line, .dpage .nav .btn-grad { display: none; }
  .dpage .nav__menu { display: block; }
  .dpage .nav__logo img { width: 80px; }
  .about__head, .services__head, .dintro, .contact__card, .contact--slim .contact__card, .foot__in { grid-template-columns: 1fr; }
  .about__pics { grid-template-columns: 1fr 1fr; }
  .about__pics .pic--card { grid-column: 1 / -1; order: -1; }
  .dcards > .dcard, .dcards--3 > .dcard { flex-basis: calc((100% - 22px) / 2); }
  .gal__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 12px; }
  .services__grid, .dhigh__list, .dhow__grid, .dgal--2, .dgal--3 { grid-template-columns: 1fr; }
  .dgal figure { height: 300px; }
  .dots, .about__stamp { display: none; }
  .dhero__stamp { width: 96px; top: 16%; }
}
@media (max-width: 560px) {
  .dcards { gap: 12px; }
  .dcards > .dcard, .dcards--3 > .dcard { flex-basis: calc((100% - 12px) / 2); }
  .dcard { aspect-ratio: 3 / 4.4; }
  .dcard__box { padding: 14px 14px 16px; transform: none; }
  .dcard__box b { font-size: 19px; }
  .dcard__box em, .dcard__go { display: none; }
  .dcard__box > span:nth-of-type(2) { font-size: 12px; }
  .form { grid-template-columns: 1fr; }
  .dnext__row { grid-template-columns: 1fr; }
  .dnext__link--r { text-align: left; }
  .band__stamp { width: 100px; right: 5%; bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 8. Motion states (site.js) ---------- */
.js.is-loading .hero [data-k], .js .is-loading .hero [data-k], .js .is-loading .tile, .js .is-loading [data-split] { opacity: 0; }
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.ch { display: inline-block; will-change: transform; }
.cloud { position: absolute; left: 0; top: 0; z-index: 1; width: 150px; height: 70px; color: rgba(255, 255, 255, .5); pointer-events: none; filter: blur(.5px); will-change: transform; }
.cloud[data-cloud="1"] { width: 96px; height: 45px; color: rgba(255, 255, 255, .35); }
.cloud[data-cloud="2"] { width: 210px; height: 98px; color: rgba(255, 255, 255, .22); filter: blur(2px); }
.now { left: calc(138 * var(--u)); top: calc(196 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); color: #fff; font-size: calc(15 * var(--u)); white-space: nowrap; }
.now span { font: 700 calc(15 * var(--u)) / 1 var(--cond); letter-spacing: .1em; color: #9fe3d8; }
.now i { width: calc(34 * var(--u)); height: 1.5px; background: rgba(255, 255, 255, .6); }
.now b { font-weight: 700; letter-spacing: .02em; }
.now small { font-size: calc(14 * var(--u)); opacity: .75; }
.now svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); transition: transform .35s; }
.now:hover svg { transform: translateX(4px); }
.now.is-swap b, .now.is-swap small, .now.is-swap span { animation: nowIn .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes nowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.is-portrait .now { left: calc(20 * var(--u)); top: calc(104 * var(--u)); font-size: calc(13 * var(--u)); }
.is-portrait .now small { display: none; }
.is-portrait .title { top: calc(134 * var(--u)); }
.sheet__close { position: absolute; right: 18px; top: 16px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }
.is-portrait .hero__shade { background: linear-gradient(180deg, rgba(3, 25, 23, .72), rgba(3, 25, 23, .45) 45%, rgba(3, 25, 23, .1) 62%, rgba(3, 25, 23, .5)); }
.is-portrait .now span, .is-portrait .now b { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }

/* ---------- 9. Cruise search (home section + book.html) ---------- */
.book { position: relative; overflow: hidden; padding: clamp(56px, 6vw, 80px) 0; background: radial-gradient(60% 80% at 100% 0%, rgba(18, 126, 118, .12), transparent 70%), var(--sand); }
.book__head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 120px; align-items: end; }
.book__head > p { color: rgba(0, 0, 0, .6); font-size: 19px; }
.float--ship { position: absolute; right: 7%; top: 64px; width: 90px; height: 56px; color: var(--teal); opacity: .5; }
.csearch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.book .csearch { margin-top: 32px; padding: 22px; border-radius: 16px; background: #fff; box-shadow: 0 40px 80px -40px rgba(6, 57, 54, .45); }
.csearch__f { display: grid; gap: 6px; min-width: 0; }
.csearch__f span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.csearch select { width: 100%; height: 52px; padding: 0 38px 0 14px; border: 1px solid rgba(11, 79, 74, .2); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23127e76' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.csearch select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18, 126, 118, .18); }
.csearch__go { height: 52px; gap: 10px; padding: 0 24px; font-size: 16px; border: 0; cursor: pointer; }
.csearch__go svg { width: 30px; height: 20px; }
.book__pop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: rgba(0, 0, 0, .55); }
.book__pop a { padding: 8px 14px; border-radius: 30px; border: 1px solid rgba(11, 79, 74, .2); background: #fff; color: var(--green); font-weight: 600; transition: background .3s, color .3s; }
.book__pop a:hover { background: var(--green); color: #fff; }

.bookpage { height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--deep); }
.bhead { flex: none; position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 60px; padding: 0 clamp(14px, 3vw, 40px); background: var(--deep); color: #fff; font-size: 14px; }
.bhead__logo { display: flex; align-items: center; gap: 12px; }
.bhead__logo img { width: 54px; height: auto; }
.bhead__logo span { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .25); font: 600 11px/1.25 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9fe3d8; }
.bhead__logo small { font: 500 11px/1.3 var(--sans); letter-spacing: .12em; color: #9fe3d8; }
.bhead__links { display: flex; gap: clamp(18px, 2.6vw, 40px); }
.bhead__links a { opacity: .85; transition: opacity .3s; } .bhead__links a:hover { opacity: 1; }
.bhead__end { display: flex; align-items: center; gap: 10px; }
.bhead__mail { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 6px; background: var(--grad); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.bhead__mail svg { width: 18px; height: 18px; }
.bhead .nav__menu { width: 40px; height: 40px; }
.bhead .nav__menu i { left: 11px; right: 11px; } .bhead .nav__menu i:first-child { top: 15px; } .bhead .nav__menu i:last-child { top: 23px; }
.bsearch { flex: none; position: relative; z-index: 4; padding: 10px clamp(14px, 3vw, 40px) 12px; background: linear-gradient(180deg, var(--deep), #0a4a45); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.bsearch .csearch { gap: 10px; }
.bsearch .csearch__f span { color: #9fe3d8; font-size: 11px; }
.bsearch select { height: 42px; border-color: rgba(255, 255, 255, .18); background-color: rgba(255, 255, 255, .08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E"); color: #fff; font-size: 14px; }
.bsearch select option { color: #000; }
.bsearch .csearch__go { height: 42px; font-size: 14px; background: #fff; color: var(--green); box-shadow: none; }
.bsearch__toggle { display: none; }
.bframe { position: relative; flex: 1; min-height: 0; background: #fff; }
.bframe iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }
.bframe__wait { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 8px; background: #fff; color: var(--green); text-align: center; transition: opacity .5s, visibility .5s; }
.bframe__wait svg { width: 90px; height: 56px; color: var(--teal); animation: sail 2.4s ease-in-out infinite; }
.bframe__wait b { font: 700 26px/1.2 var(--serif); }
.bframe__wait span { font-size: 14px; color: rgba(0, 0, 0, .5); }
.bframe__wait.is-done { opacity: 0; visibility: hidden; }
.bframe__nojs { padding: 40px; }
@keyframes sail { 50% { transform: translateY(-6px) rotate(-3deg); } }
@media (max-width: 1000px) { .bhead__links { display: none; } .bhead .nav__menu { display: block; } }
@media (max-width: 900px) {
  .book__head { grid-template-columns: 1fr; }
  .book .csearch { grid-template-columns: 1fr 1fr; }
  .book .csearch__go { grid-column: 1 / -1; }
  .float--ship { display: none; }
  .bsearch { padding: 8px 14px; }
  .bsearch__toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px; text-align: left; cursor: pointer; }
  .bsearch__toggle svg { flex: none; width: 26px; height: 17px; color: #9fe3d8; }
  .bsearch__toggle span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .bsearch__toggle b { color: #9fe3d8; font-size: 13px; }
  .bsearch .csearch { display: none; grid-template-columns: 1fr 1fr; padding-top: 10px; }
  .bsearch.is-open .csearch { display: grid; }
  .bsearch .csearch__go { grid-column: 1 / -1; }
  .bhead__mail span { display: none; } .bhead__mail { padding: 0 11px; }
}
@media (max-width: 560px) { .book .csearch { grid-template-columns: 1fr; padding: 16px; } }

@media (max-width: 1200px) and (min-width: 901px) { .csearch { grid-template-columns: repeat(3, minmax(0, 1fr)); } .csearch__go { grid-column: span 1; } }
.form__other[hidden] { display: none; }
.form__other input { border-color: #9fe3d8; }

/* ---------- 10. Destination pages: mosaic, hotels, cruise band ---------- */
.dgal { grid-auto-rows: clamp(150px, 17vw, 250px); }
.dgal figure { height: auto; }
.dgal--5 { grid-template-columns: repeat(4, 1fr); }
.dgal--6 { grid-template-columns: repeat(3, 1fr); }
.dgal--5 figure:first-child, .dgal--6 figure:first-child { grid-row: span 2; grid-column: span 2; }
.dgal--1 figure, .dgal--2 figure, .dgal--3 figure { height: clamp(320px, 42vw, 540px); }
.dgal--1, .dgal--2, .dgal--3 { grid-auto-rows: auto; }
.dstay { position: relative; overflow: hidden; margin-top: 36px; padding: clamp(56px, 6vw, 84px) 0; color: rgba(255, 255, 255, .85); background: var(--deep); }
.dstay__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: saturate(.8); }
.dstay::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 57, 54, .96), rgba(6, 57, 54, .7)); }
.dstay__in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; align-items: start; }
.dstay__head { display: grid; gap: 16px; }
.dstay__head > p:last-child { font-size: 18px; max-width: 480px; }
.dstay__grid { grid-column: 1; display: grid; gap: 14px; }
.stay { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding: 20px 22px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: background .3s; }
.stay:hover { background: rgba(255, 255, 255, .12); }
.stay b { grid-row: span 3; font: 700 30px/1 var(--cond); color: #9fe3d8; }
.stay h3 { font: 700 21px/1.25 var(--serif); color: #fff; }
.stay p { font-size: 15px; }
.stay a { font-weight: 700; font-size: 14px; color: #9fe3d8; }
.hform { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 30px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.hform h3 { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font: 700 26px/1.2 var(--serif); color: var(--green); }
.hform h3 svg { width: 34px; height: 34px; color: var(--teal); }
.hform label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.hform input, .hform select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(11, 79, 74, .2); border-radius: 8px; background: #fff; font-size: 16px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400; }
.hform input:focus, .hform select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18, 126, 118, .18); }
.hform__wide { grid-column: 1 / -1; }
.hform .btn-grad { height: 54px; border: 0; cursor: pointer; font-size: 16px; }
.hform .btn-grad svg { width: 20px; height: 20px; }
.hform__note { font-size: 13px; color: rgba(0, 0, 0, .5); }
.dcruise { padding: clamp(44px, 5vw, 64px) 0 20px; }
.dcruise__in { display: grid; grid-template-columns: auto 1fr auto; gap: 30px 44px; align-items: center; padding: clamp(28px, 4vw, 48px) !important; border-radius: 16px; background: var(--mint); }
.dcruise__ship { width: 110px; height: 70px; color: var(--teal); }
.dcruise .h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 10px; }
.dcruise p:not(.eyebrow) { color: rgba(0, 0, 0, .65); max-width: 560px; }
@media (max-width: 900px) {
  .dgal--5, .dgal--6 { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .dgal--6 figure:first-child { grid-column: span 2; }
  .dgal--5 figure:first-child { grid-column: span 2; grid-row: span 2; }
  .dstay__in { grid-template-columns: 1fr; }
  .dstay__grid, .hform { grid-column: 1; grid-row: auto; }
  .dcruise__in { grid-template-columns: 1fr; }
  .dcruise__ship { width: 80px; height: 50px; }
}
@media (max-width: 560px) { .hform { grid-template-columns: 1fr 1fr; padding: 22px; } }
@media (max-width: 900px) { .dgal--6 figure:last-child { grid-column: span 2; } }

/* home gallery: fixed mosaic (items 1, 3, 5, 6 are tall) */
.gal__grid { grid-auto-flow: row; }
.gal__item:nth-child(1) { grid-area: 1 / 1 / 3 / 2; } .gal__item:nth-child(2) { grid-area: 1 / 2; }
.gal__item:nth-child(3) { grid-area: 1 / 3 / 3 / 4; } .gal__item:nth-child(4) { grid-area: 1 / 4; }
.gal__item:nth-child(5) { grid-area: 2 / 2 / 4 / 3; } .gal__item:nth-child(6) { grid-area: 2 / 4 / 4 / 5; }
.gal__item:nth-child(7) { grid-area: 3 / 1; } .gal__item:nth-child(8) { grid-area: 3 / 3; }
@media (max-width: 900px) { .gal__item:nth-child(n) { grid-area: auto; grid-row: auto; } .gal__item--tall { grid-row: span 2; } }
/* 9 destination cards: 5 + 4 on wide screens */
@media (min-width: 1101px) { .dcards:not(.dcards--3) > .dcard { flex-basis: calc((100% - 88px) / 5); } }
.float--ship { right: 1.5%; top: 18px; width: 64px; height: 40px; opacity: .35; }
.dcard__box > span:nth-of-type(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 11. Live weather widget inside the hero tiles ---------- */
.wx { position: absolute; z-index: 2; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(14 * var(--u)); display: grid; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(8, 40, 38, .38); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: #fff; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.wx__top { display: flex; align-items: center; justify-content: space-between; font-size: calc(11 * var(--u)); letter-spacing: .14em; text-transform: uppercase; }
.wx__top i { font-style: normal; font-weight: 700; color: #bff0e6; }
.wx__time { font-weight: 600; letter-spacing: .04em; opacity: .9; }
.wx__row { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.wx__ico { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)); animation: wxBob 3.6s ease-in-out infinite; }
.wx__t { font: 700 calc(24 * var(--u)) / 1 var(--sans); letter-spacing: -.01em; }
.wx__c { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(12.5 * var(--u)); opacity: .9; }
.wx.is-off .wx__row { display: none; }
@keyframes wxBob { 50% { transform: translateY(-2px) rotate(-4deg); } }
.is-portrait .wx { left: calc(10 * var(--u)); right: calc(10 * var(--u)); top: calc(10 * var(--u)); }
@media (prefers-reduced-motion: reduce) { .wx__ico { animation: none; } }

/* ---------- 12. Offers: carousels, specials page, offer detail ---------- */
.nav__links a.nav__hot { position: relative; opacity: 1; }
.nav__links a.nav__hot::after { content: ""; position: absolute; right: -9px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 168, 0, .25); animation: hotPulse 2s ease-in-out infinite; }
@keyframes hotPulse { 50% { box-shadow: 0 0 0 7px rgba(255, 168, 0, 0); } }

.picks { padding: clamp(56px, 6vw, 84px) 0 clamp(24px, 3vw, 40px); }
.picks__head, .osec__head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 80px; align-items: end; margin-bottom: 30px; }
.picks__side { display: grid; gap: 16px; justify-items: start; color: rgba(0, 0, 0, .6); font-size: 18px; }
.osec__head > p { color: rgba(0, 0, 0, .6); font-size: 18px; }
.osec { padding: clamp(56px, 6vw, 84px) 0; }
.osec--mint { background: linear-gradient(180deg, var(--mint), #fff); }

.ocar { position: relative; }
.ocar__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 6px 4px 26px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ocar__track::-webkit-scrollbar { display: none; }
.ocar__empty { padding: 40px 0; color: rgba(0, 0, 0, .5); }
.ocar__empty a { color: var(--teal); font-weight: 700; }
.ocar__nav { position: absolute; top: calc(50% - 36px); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: var(--green); box-shadow: 0 10px 24px -8px rgba(6, 57, 54, .45); cursor: pointer; transition: transform .3s, background .3s, color .3s; }
.ocar__nav:hover { background: var(--green); color: #fff; transform: scale(1.06); }
.ocar__nav svg { width: 22px; height: 22px; }
.ocar__nav--prev { left: -22px; } .ocar__nav--prev svg { transform: scaleX(-1); }
.ocar__nav--next { right: -22px; }
.ocar__dots { display: flex; justify-content: center; gap: 8px; }
.ocar__dots i { width: 8px; height: 8px; border-radius: 8px; background: rgba(11, 79, 74, .2); transition: width .35s, background .35s; }
.ocar__dots i.on { width: 26px; background: var(--teal); }

.ocard { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -24px rgba(6, 57, 54, .55), 0 0 0 1px rgba(11, 79, 74, .08); color: var(--ink); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.ocard:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -24px rgba(6, 57, 54, .6), 0 0 0 1px rgba(11, 79, 74, .12); }
.ocard__img { display: block; aspect-ratio: 6 / 5; overflow: hidden; background: var(--mint); }
.ocard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.ocard:hover .ocard__img img { transform: scale(1.05); }
.ocard__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.ocard__body small { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.ocard__body > b { font: 700 18px/1.3 var(--sans); }
.ocard__price { font: 700 24px/1.15 var(--serif) !important; color: var(--green); }
.ocard__row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .72); }
.ocard__row svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--teal); }
.ocard__row em { font-style: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ocard__meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(0, 0, 0, .6); }
.ocard__meta svg { width: 16px; height: 16px; color: var(--teal); }
.ocard__btn { margin-top: auto; width: 100%; height: 44px; font-size: 15px; }
.ocard__btn svg { width: 18px; height: 18px; }
.ocard--promo .ocard__body > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.shero { position: relative; min-height: 64vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--deep); }
.shero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.12) translate(-2%, -2%); } }
.shero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 25, 23, .85), rgba(3, 25, 23, .25) 70%), linear-gradient(90deg, rgba(3, 25, 23, .55), transparent 65%); }
.spage .nav { position: absolute; left: var(--gutter); right: var(--gutter); width: auto; top: 22px; --u: 1px; }
.shero__in { position: relative; z-index: 2; padding-top: 170px !important; padding-bottom: 64px !important; }
.shero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 30px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.shero__badge svg { width: 16px; height: 16px; color: var(--gold); }
.shero__title { margin-top: 18px; font: 700 clamp(58px, 9vw, 130px)/.9 var(--cond); text-transform: uppercase; }
.shero__title > span { display: inline-block; overflow: hidden; padding-bottom: .04em; vertical-align: bottom; }
.shero__title em { font: 600 italic clamp(34px, 4.6vw, 64px)/1 var(--serif); text-transform: none; color: #bff0e6; }
.shero__tag { max-width: 600px; margin-top: 18px; font-size: 19px; opacity: .92; }
.shero .title__cta { margin-top: 28px; }
.shero__compass { position: absolute; right: 8%; top: 28%; width: 110px; height: 110px; opacity: .6; animation: spinSlow 30s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.book--tight { padding-top: clamp(48px, 5vw, 70px); }

.perks { padding: 10px 0 clamp(56px, 6vw, 84px); }
.perks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.perks article { display: grid; gap: 8px; padding: 26px; border-radius: 14px; border: 1px solid rgba(11, 79, 74, .14); }
.perks svg { width: 34px; height: 34px; color: var(--teal); }
.perks h3 { font: 700 21px/1.25 var(--serif); }
.perks p { color: rgba(0, 0, 0, .6); font-size: 15px; }

.offerpage { background: #fff; }
.bhead--sticky { position: sticky; top: 0; z-index: 20; }
.odetail { padding: 28px 0 60px; }
.odetail__crumb a { font-weight: 700; font-size: 14px; color: var(--teal); }
.odetail__grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; margin-top: 18px; }
.odetail__main { display: grid; gap: 18px; min-width: 0; }
.odetail__img { border-radius: 16px; overflow: hidden; background: var(--mint); box-shadow: 0 30px 60px -30px rgba(6, 57, 54, .5); }
.odetail__img img { width: 100%; max-height: 460px; object-fit: contain; background: var(--mint); }
.odetail__title { font: 700 clamp(32px, 4vw, 52px)/1.1 var(--serif); }
.odetail__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.odetail__facts li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--mint); }
.odetail__facts svg { grid-row: span 2; width: 24px; height: 24px; color: var(--teal); }
.odetail__facts span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.odetail__facts b { font-weight: 700; }
.odetail__text h2, .odetail__sail h2 { margin-bottom: 8px; font: 700 24px/1.2 var(--serif); }
.odetail__text p { color: rgba(0, 0, 0, .7); font-size: 17px; }
.odetail__sail ul { display: grid; gap: 10px; }
.odetail__sail li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(11, 79, 74, .14); font-size: 15px; }
.odetail__sail svg { flex: none; width: 26px; height: 18px; margin-top: 2px; color: var(--teal); }
.odetail__fine { font-size: 13px; color: rgba(0, 0, 0, .45); }
.odetail__card { position: sticky; top: 84px; display: grid; gap: 12px; padding: 26px; border-radius: 16px; background: var(--deep); color: rgba(255, 255, 255, .8); box-shadow: 0 30px 60px -30px rgba(6, 57, 54, .7); }
.odetail__card small { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9fe3d8; }
.odetail__price { font: 700 34px/1.1 var(--serif); color: #fff; }
.odetail__card .btn-grad { width: 100%; background: linear-gradient(120deg, #1fa296, #127e76); }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 20px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; font-weight: 700; font-size: 15px; transition: background .3s; }
.btn-outline:hover { background: rgba(255, 255, 255, .1); }
.btn-outline svg { width: 20px; height: 20px; }
.odetail__card p { font-size: 14px; }

@media (max-width: 1100px) { .ocard { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 900px) {
  .picks__head, .osec__head, .odetail__grid { grid-template-columns: 1fr; }
  .ocard { flex-basis: calc((100% - 20px) / 2); }
  .ocar__nav { display: none; }
  .perks__grid { grid-template-columns: 1fr; }
  .odetail__card { position: static; }
  .spage .nav__links, .spage .nav .btn-line, .spage .nav .btn-grad { display: none; }
  .spage .nav__menu { display: block; }
  .spage .nav__logo img { width: 80px; }
  .shero__compass { width: 70px; height: 70px; top: 16%; }
}
@media (max-width: 560px) { .ocard { flex-basis: 78%; } }
.shero__compass { left: auto; }
.bsearch__full { position: absolute; right: clamp(14px, 3vw, 40px); top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #9fe3d8; }
.bsearch__full:hover { color: #fff; }
.bframe__safari { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 12px; padding: 30px; text-align: center; background: radial-gradient(60% 60% at 50% 40%, var(--mint), #fff); color: var(--ink); }
.bframe__safari[hidden] { display: none; }
.bframe__safari svg { width: 96px; height: 60px; color: var(--teal); animation: sail 2.4s ease-in-out infinite; }
.bframe__safari b { font: 700 32px/1.2 var(--serif); color: var(--green); }
.bframe__safari p { max-width: 460px; color: rgba(0, 0, 0, .6); }
.odetail__cb { font-size: 14px; font-weight: 600; color: #9fe3d8; text-align: center; }
.odetail__cb:hover { color: #fff; }
@media (max-width: 900px) { .bsearch__full { display: none; } }

/* ---------- 13. Specials: split cards + extras (links open Cruise Brothers / partners in a new tab) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 1164px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1240px) { .split { padding: 0; } }
.split__card { position: relative; display: flex; align-items: flex-end; min-height: 340px; border-radius: 18px; overflow: hidden; color: #fff; isolation: isolate; box-shadow: 0 30px 60px -30px rgba(6, 57, 54, .6); }
.split__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.split__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6, 57, 54, .92), rgba(6, 57, 54, .3) 72%); }
.split__card:hover img { transform: scale(1.06); }
.split__in { display: grid; gap: 10px; justify-items: start; padding: 30px; }
.split__in small { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9fe3d8; }
.split__in b { font: 700 clamp(28px, 3vw, 38px)/1.1 var(--serif); }
.split__in em { font-style: normal; max-width: 420px; opacity: .9; }
.split__in .btn-white { height: 48px; margin-top: 6px; font-size: 15px; }
.extras { padding: clamp(56px, 6vw, 84px) 0; }
.extras__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.extra { display: grid; gap: 8px; align-content: start; padding: 26px; border-radius: 14px; background: #fff; border: 1px solid rgba(11, 79, 74, .14); box-shadow: 0 20px 40px -32px rgba(6, 57, 54, .5); transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.extra:hover { transform: translateY(-5px); border-color: var(--teal); }
.extra svg { width: 36px; height: 36px; color: var(--teal); }
.extra b { font: 700 22px/1.2 var(--serif); }
.extra span { color: rgba(0, 0, 0, .6); font-size: 15px; }
.extra em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--teal); }
.inline-link { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.odetail__text p + p { margin-top: 10px; }
.odetail__text b { color: var(--green); }
@media (max-width: 900px) { .split, .extras__grid { grid-template-columns: 1fr; } .split__card { min-height: 280px; } }

/* ---------- 14. Specials mega menu ---------- */
.mm { position: relative; display: inline-flex; }
.mm__btn { display: inline-flex; align-items: center; gap: 6px; }
.mm__caret { width: 10px; height: 7px; transition: transform .3s; }
.mm__panel { position: absolute; left: 50%; top: 100%; z-index: 40; padding-top: 16px; width: 820px; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1), visibility .25s; font-size: 14px; letter-spacing: 0; text-transform: none; }
.mm:hover .mm__panel, .mm:focus-within .mm__panel, .mm.is-open .mm__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mm:hover .mm__caret, .mm.is-open .mm__caret { transform: rotate(180deg); }
.mm__in { display: grid; grid-template-columns: 230px 1fr 1.25fr; gap: 22px; padding: 20px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(3, 25, 23, .6), 0 0 0 1px rgba(11, 79, 74, .1); text-align: left; }
.mm__in::before { content: ""; position: absolute; left: 50%; top: 10px; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.mm__feature { position: relative; display: flex; align-items: flex-end; min-height: 260px; border-radius: 12px; overflow: hidden; color: #fff; isolation: isolate; }
.mm__feature img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.mm__feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6, 57, 54, .92), rgba(6, 57, 54, .1) 70%); }
.mm__feature:hover img { transform: scale(1.06); }
.mm__feature span { display: grid; gap: 4px; padding: 16px; }
.mm__feature small { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9fe3d8; }
.mm__feature b { font: 700 24px/1.1 var(--serif); }
.mm__feature em { font-style: normal; font-size: 13px; opacity: .9; }
.mm__col { display: grid; gap: 2px; align-content: start; }
.mm__h { margin: 2px 0 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.mm__link { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; opacity: 1 !important; font-weight: 400 !important; transition: background .25s; }
.mm__link:hover, .mm__link:focus-visible { background: var(--mint); }
.mm__link svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--teal); }
.mm__link span { display: grid; gap: 1px; }
.mm__link b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.mm__link b i { font-style: normal; color: var(--teal); font-size: 12px; }
.mm__link small { font-size: 12.5px; color: rgba(0, 0, 0, .55); }
.nav__links a.nav__hot::after { right: -2px; }
.bhead .mm__panel { width: 780px; }
.sheet__sub { display: grid; gap: 6px; margin: -2px 0 8px; font: 600 16px/1.3 var(--sans); }
.sheet__sub a { opacity: .8; }
.nav { z-index: 30; }

/* ---------- 15. Footer: powered by Cruise Brothers + legal pages ---------- */
.foot__cb { max-width: 1164px; margin: 44px auto 0; padding: 26px 20px 0; display: flex; align-items: center; gap: 26px; border-top: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 1240px) { .foot__cb { padding-left: 0; padding-right: 0; } }
.foot__cb img { flex: none; width: 96px; height: auto; border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.foot__cbtext { display: grid; gap: 6px; font-size: 14px; }
.foot__cbh { font: 600 italic 22px/1.2 var(--serif); color: #fff; }
.foot__cbh b { font-style: normal; color: #9fe3d8; }
.foot__lic { font-size: 13px; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
.foot__copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; opacity: 1; }
.foot__copy p { opacity: .6; }
.foot__copy b { font-weight: 600; }
.foot__copy nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot__copy nav a { color: #9fe3d8; font-weight: 600; }
.foot__copy nav a:hover { color: #fff; }
.legal { padding: 50px 0 80px; }
.legal__in { max-width: 860px !important; }
.legal__h1 { margin-top: 10px; font: 700 clamp(36px, 5vw, 60px)/1.1 var(--serif); }
.legal__agent { display: grid; gap: 4px; margin-top: 24px; padding: 18px 22px; border-radius: 12px; background: var(--mint); }
.legal__agent b { font: 700 19px/1.2 var(--serif); color: var(--green); }
.legal__agent a, .legal__body a, .legal__src a { color: var(--teal); font-weight: 600; }
.legal__body { margin-top: 26px; color: rgba(0, 0, 0, .75); font-size: 17px; }
.legal__body h2 { margin: 30px 0 8px; font: 700 26px/1.2 var(--serif); color: var(--ink); }
.legal__body h3 { margin: 22px 0 6px; font: 700 20px/1.25 var(--serif); color: var(--green); }
.legal__body h4 { margin: 20px 0 4px; font: 700 16px/1.3 var(--sans); color: var(--ink); }
.legal__body p { margin-bottom: 12px; }
.legal__body ul { margin: 6px 0 14px 22px; list-style: disc; }
.legal__src { margin-top: 36px; padding-top: 16px; border-top: 1px solid rgba(11, 79, 74, .15); font-size: 13px; color: rgba(0, 0, 0, .5); }
@media (max-width: 700px) { .foot__cb { flex-direction: column; align-items: flex-start; } }
.foot__in { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* ---------- 16. Cruise lines ---------- */
.lines { padding: 50px 0 80px; }
.lines__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lcard { display: grid; gap: 10px; justify-items: center; padding: 18px 18px 20px; border-radius: 14px; background: #fff; border: 1px solid rgba(11, 79, 74, .14); box-shadow: 0 20px 40px -32px rgba(6, 57, 54, .55); text-align: center; transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.lcard:hover { transform: translateY(-5px); border-color: var(--teal); }
.lcard__logo { display: grid; place-items: center; width: 100%; aspect-ratio: 389 / 265; border-radius: 10px; background: #fff; overflow: hidden; }
.lcard__logo img { width: 100%; height: 100%; object-fit: contain; }
.lcard b { font: 700 18px/1.25 var(--serif); }
.lcard em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--teal); }
.lhero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 380px; color: #fff; background: var(--deep); }
.lhero__in { position: relative; display: flex; align-items: flex-end; gap: 34px; padding-top: 60px !important; padding-bottom: 44px !important; }
.lhero__logo { flex: none; display: grid; place-items: center; width: 250px; aspect-ratio: 389 / 265; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); overflow: hidden; }
.lhero__logo img { width: 100%; height: 100%; object-fit: contain; }
.lhero .phero__title { font-size: clamp(40px, 5.6vw, 80px); }
.lhero .odetail__crumb a { color: #9fe3d8; }
.lhero .title__cta { margin-top: 20px; }
.lpage { padding: 50px 0 0; }
.lpage__grid { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; }
.lpage__text { margin-top: 0; }
.lpage__text .eyebrow { margin-bottom: 12px; }
.lpage__side { position: sticky; top: 84px; display: grid; gap: 16px; }
.lpage__box { display: grid; gap: 10px; padding: 22px; border-radius: 14px; background: var(--mint); }
.lpage__box h3 { font: 700 21px/1.2 var(--serif); color: var(--green); }
.lpage__box p { font-size: 15px; color: rgba(0, 0, 0, .65); }
.lpage__box .btn-grad { width: 100%; }
.lspecial { display: flex; gap: 12px; padding: 12px; border-radius: 10px; background: #fff; transition: transform .3s; }
.lspecial:hover { transform: translateX(3px); }
.lspecial svg { flex: none; width: 22px; height: 22px; color: var(--teal); }
.lspecial span { display: grid; gap: 2px; }
.lspecial b { font-size: 14.5px; }
.lspecial small { font-size: 12.5px; color: var(--teal); font-weight: 600; }
.contact--line { margin-top: 60px; }
.lines__grid--4 .lcard b { font-size: 16px; }
@media (max-width: 1000px) { .lines__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .lpage__grid { grid-template-columns: 1fr; } .lpage__side { position: static; } .lhero__in { flex-direction: column; align-items: flex-start; } .lhero__logo { width: 180px; } }
@media (max-width: 560px) { .lines__grid { grid-template-columns: 1fr 1fr; } }
.phero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 340px; color: #fff; background: var(--deep); }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
.phero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 25, 23, .88), rgba(3, 25, 23, .3) 80%); }
.phero__in { position: relative; display: grid; gap: 12px; justify-items: start; padding-top: 70px !important; padding-bottom: 44px !important; }
.phero__title { font: 700 clamp(44px, 7vw, 96px)/.95 var(--cond); text-transform: uppercase; }
.phero__title > span { display: inline-block; overflow: hidden; padding-bottom: .04em; }
.phero__tag { max-width: 640px; font-size: 18px; opacity: .92; }

/* ---------- request forms: sent confirmation ---------- */
.form__thanks { grid-column: 1 / -1; padding: 22px 0; }
.form__thanks h3 { font: 700 28px/1.2 var(--serif); margin-bottom: 8px; }
.form__thanks p { font-size: 17px; opacity: .85; }
.form label small, .hform label small { font-size: 12px; opacity: .7; letter-spacing: 0; text-transform: none; }
.form button:disabled, .hform button:disabled { opacity: .6; cursor: progress; }