/* ============================================================
   BLACK SAND HOTEL · skissur september 2026
   Ljós grunnur (sandur) · svartur sandur sem accent
   Letur: DM Serif Display + DM Sans (sömu skrár og spegillinn)
   Slóð: /skissur-2026-09/css/main.css  ->  fonts í /fonts/
   ============================================================ */

@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dmserifdisplay-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dmserifdisplay-400-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Serif Text"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/dmseriftext-400i.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Text"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/dmseriftext-400i-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/dmsans-var.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/dmsans-var-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --sand-0: #F6F3ED;
  --sand-1: #EDE7DC;
  --sand-2: #E3DCCB;
  --ink: #14130E;
  --ink-soft: #2B2A24;
  --stone: #7E7668;
  --sage: #808C78;
  --navy: #3A516B;
  --line: rgba(20,19,14,.14);
  --serif: "DM Serif Display", Georgia, serif;
  --serif-i: "DM Serif Text", Georgia, serif;
  --sans: "DM Sans", -apple-system, "Helvetica Neue", sans-serif;
  --max: 1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--sand-0); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
em { font-family: var(--serif-i); font-style: italic; }

/* ---------- Skissu-merki ---------- */
.sketch-tag { position: fixed; right: 16px; bottom: 16px; z-index: 200; background: var(--ink); color: var(--sand-0); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; opacity: .85; }
.sketch-tag a { border-bottom: 1px solid rgba(246,243,237,.5); margin-left: 8px; }

/* ---------- Haus + bókunarstika ---------- */
.nav { position: sticky; top: 0; z-index: 100; background: var(--sand-0); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.wordmark { display: flex; align-items: center; }
.wordmark img { height: 16px; width: auto; }
.nav-links { display: flex; gap: 32px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.nav-links a { opacity: .72; transition: opacity .2s; }
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.lang { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.lang b { font-weight: 600; opacity: 1; }

.btn { display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 14px 30px; border: 1px solid var(--ink); transition: background .25s, color .25s; cursor: pointer; }
.btn-solid { background: var(--ink); color: var(--sand-0); }
.btn-solid:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--sand-0); }
.btn-light { border-color: var(--sand-0); color: var(--sand-0); }
.btn-light:hover { background: var(--sand-0); color: var(--ink); }
.nav .btn { padding: 11px 22px; }

.bookbar { background: var(--sand-1); border-bottom: 1px solid var(--line); }
.bookbar-inner { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: stretch; height: 58px; }
.bookbar label { display: flex; flex-direction: column; justify-content: center; padding: 0 20px; border-right: 1px solid var(--line); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.bookbar label:first-child { padding-left: 0; }
.bookbar input, .bookbar select { border: 0; background: transparent; font-family: var(--sans); font-size: 15px; color: var(--ink); outline: none; padding: 0; margin-top: 1px; }
.bookbar .btn { align-self: center; margin-left: 20px; padding: 12px 28px; }

/* ---------- Hetja, forsíða ---------- */
.hero { padding: 72px 0 0; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--stone); margin-bottom: 22px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6.6vw, 88px); line-height: 1.04; letter-spacing: -.01em; max-width: 14ch; }
.hero-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin: 36px 0 52px; flex-wrap: wrap; }
.hero-sub p { max-width: 44ch; font-size: 17px; color: var(--ink-soft); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-media { position: relative; height: min(70vh, 660px); overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { position: absolute; inset: 0; }
.hero-caption { position: absolute; left: 24px; bottom: 20px; background: rgba(246,243,237,.92); padding: 10px 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Hetja, undirsíður (mynd með texta) ---------- */
.hero-img { padding: 0; position: relative; height: min(78vh, 720px); overflow: hidden; background: var(--ink); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.hero-img .hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 72px; color: var(--sand-0); background: linear-gradient(180deg, rgba(20,19,14,.08) 0%, rgba(20,19,14,.15) 30%, rgba(20,19,14,.7) 100%); }
.hero-img .hero-text .wrap { width: 100%; }
.hero-img .kicker { color: rgba(246,243,237,.75); }
.hero-img h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 80px); line-height: 1.04; max-width: 16ch; }
.hero-img p { max-width: 50ch; font-size: 18px; margin-top: 20px; color: rgba(246,243,237,.88); }
.hero-img .hero-cta { margin-top: 30px; }

/* ---------- Tonight at Black Sand (utility-pilla) ---------- */
.tonight { margin: -34px auto 0; position: relative; z-index: 5; }
.tonight-inner { background: var(--sand-0); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(20,19,14,.08); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 18px 28px; }
.tonight-title { font-family: var(--serif); font-size: 20px; white-space: nowrap; }
.tonight-title small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.tonight-items { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.tonight-items span { color: var(--stone); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: block; }
.tonight-links { display: flex; gap: 18px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tonight-links a { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ---------- Almennar blokkir ---------- */
section { padding: 100px 0; }
section.tight { padding: 64px 0; }
.alt { background: var(--sand-1); }
h2.section-title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; margin: 12px 0 22px; max-width: 20ch; }
.lead { color: var(--ink-soft); font-size: 17px; max-width: 52ch; }
.two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: start; }
.two.center { align-items: center; }
.two.rev > :first-child { order: 2; }
.two img { width: 100%; height: 560px; object-fit: cover; }
.two img.tall { height: 680px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }

.stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.stat { padding: 24px 8px 24px 0; border-bottom: 1px solid var(--line); }
.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1; margin-bottom: 8px; }
.stat b small { font-size: 18px; }
.stat span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }

/* ---------- Svarti sandurinn (dökk accent-blokk) ---------- */
.blacksand { background: var(--ink); color: var(--sand-0); overflow: hidden; padding: 0; }
.blacksand-grid { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 600px; }
.blacksand-text { display: flex; flex-direction: column; justify-content: center; padding: 90px 72px 90px 32px; max-width: 640px; margin-left: auto; }
.blacksand .kicker { color: rgba(246,243,237,.55); }
.blacksand h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.1; margin-bottom: 24px; }
.blacksand p { color: rgba(246,243,237,.78); font-size: 17px; max-width: 46ch; margin-bottom: 36px; }
.blacksand-media { position: relative; min-height: 420px; }
.blacksand-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Herbergi ---------- */
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.card-img { height: 260px; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-img img { transform: scale(1.03); }
.card-body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 8px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin-bottom: 18px; }
.card-body p { color: var(--ink-soft); font-size: 15px; margin-bottom: 20px; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price { font-size: 13px; color: var(--stone); }
.price b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); }
.card-body .btn { padding: 11px 22px; }

/* ---------- Pakkar / þjónusta (þrír dálkar á lituðum grunni) ---------- */
.packs { background: var(--sage); color: var(--sand-0); }
.packs .kicker { color: rgba(246,243,237,.65); }
.packs h2.section-title { color: var(--sand-0); }
.packs .lead { color: rgba(246,243,237,.85); }
.packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
.pack { border-top: 1px solid rgba(246,243,237,.35); padding-top: 22px; }
.pack .n { font-size: 12px; letter-spacing: .2em; color: rgba(246,243,237,.65); }
.pack h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 10px 0 12px; }
.pack p { font-size: 15px; color: rgba(246,243,237,.85); margin-bottom: 18px; max-width: 34ch; }
.pack a { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--sand-0); padding-bottom: 3px; }

/* ---------- Ljósmyndarist (myndir + spjöld) ---------- */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.strip img { width: 100%; height: 440px; object-fit: cover; }
.strip .panel { background: var(--sand-1); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; min-height: 440px; }
.strip .panel.dark { background: var(--ink); color: var(--sand-0); }
.strip .panel h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; margin-bottom: 10px; }
.strip .panel p { font-size: 15px; opacity: .85; }

/* ---------- Umsagnir ---------- */
.quote { text-align: center; max-width: 820px; margin: 0 auto; }
.quote blockquote { font-family: var(--serif); font-size: clamp(24px, 3vw, 36px); line-height: 1.3; }
.quote cite { display: block; font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-top: 22px; }
.quote .stars { letter-spacing: .3em; font-size: 14px; margin-bottom: 16px; }

/* ---------- Blogg-listi ---------- */
.list { border-top: 1px solid var(--line); }
.list-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 32px; padding: 24px 4px; border-bottom: 1px solid var(--line); transition: background .2s; }
.list-row:hover { background: var(--sand-1); }
.list-date { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.list-row h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; }

/* ---------- ÓMUR: matseðill ---------- */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
.menu-group { margin-bottom: 40px; }
.menu-group h3 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.dish { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 10px 0; border-bottom: 1px dotted var(--line); }
.dish b { font-weight: 500; font-size: 16px; }
.dish span { color: var(--stone); font-size: 14px; grid-column: 1; }
.dish i { font-style: normal; font-size: 14px; color: var(--ink-soft); grid-row: 1; grid-column: 2; white-space: nowrap; }
.hours { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; font-size: 15px; max-width: 320px; border-top: 1px solid var(--line); padding-top: 14px; }
.hours span:nth-child(odd) { color: var(--stone); }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 300px; gap: 16px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .span2 { grid-column: span 2; grid-row: span 2; }

/* ---------- Pakkar ---------- */
.pkg-list { display: grid; gap: 28px; }
.pkg { display: grid; grid-template-columns: 1fr 1.5fr; background: #fff; border: 1px solid var(--line); }
.pkg:nth-child(even) .pkg-img { order: 2; }
.pkg-img { min-height: 420px; }
.pkg-img img { width: 100%; height: 100%; object-fit: cover; }
.pkg-body { padding: 40px 44px 36px; }
.pkg-body .kicker { margin-bottom: 10px; }
.pkg-body h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; margin-bottom: 10px; }
.pkg-lead { color: var(--ink-soft); font-size: 15px; max-width: 56ch; margin-bottom: 16px; }
.pkg-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin-bottom: 22px; }
.incl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; margin-bottom: 22px; }
.incl h4 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; }
.incl li { font-size: 14px; line-height: 1.45; padding: 3px 0 3px 14px; position: relative; }
.incl li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; background: var(--ink); border-radius: 50%; }
.pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp th { font-family: var(--serif); font-weight: 400; font-size: 18px; }
.cmp td:first-child { color: var(--stone); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cmp tr:last-child td { font-family: var(--serif); font-size: 20px; }
.cmp tr:last-child td:first-child { font-family: var(--sans); font-size: 12px; }
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 28px; border-top: 1px solid var(--line); }
.addons div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.addons span { color: var(--stone); white-space: nowrap; }

/* ---------- Skref / ferli ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step { border-top: 1px solid var(--ink); padding-top: 22px; }
.step .n { font-family: var(--serif); font-size: 34px; line-height: 1; margin-bottom: 14px; }
.step h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-soft); }

/* ---------- Þjónustuspjöld (fyrirtæki) ---------- */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service { display: grid; grid-template-columns: 220px 1fr; background: #fff; border: 1px solid var(--line); }
.service img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.service div { padding: 28px 30px; }
.service h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 8px; }
.service p { font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; }
.service ul { font-size: 13px; color: var(--stone); display: grid; gap: 4px; margin-bottom: 18px; }
.service ul li::before { content: "· "; }
.service a.more { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }

/* ---------- Fyrirspurnarform ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; max-width: 720px; }
.form label { display: grid; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.form input, .form select, .form textarea { font-family: var(--sans); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 13px 14px; outline: none; }
.form input:focus, .form textarea:focus { border-color: var(--ink); }
.form .full { grid-column: 1 / -1; }
.form .note { font-size: 13px; color: var(--stone); }

/* ---------- Lokakall ---------- */
.cta { background: var(--ink); color: var(--sand-0); text-align: center; }
.cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 52px); max-width: 22ch; margin: 12px auto 20px; }
.cta p { color: rgba(246,243,237,.75); max-width: 50ch; margin: 0 auto 32px; }
.cta .kicker { color: rgba(246,243,237,.55); }

/* ---------- Fótur ---------- */
.footer { background: var(--ink); color: var(--sand-0); padding: 80px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.footer img.logo { height: 18px; width: auto; margin-bottom: 26px; }
.footer p, .footer li, .footer a { color: rgba(246,243,237,.72); font-size: 15px; }
.footer a:hover { color: var(--sand-0); }
.footer h4 { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; color: var(--sand-0); }
.footer ul { display: grid; gap: 10px; }
.footer-bottom { border-top: 1px solid rgba(246,243,237,.18); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: rgba(246,243,237,.5); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .bookbar-inner { grid-template-columns: 1fr 1fr 1fr auto; }
}
@media (max-width: 900px) {
  section { padding: 72px 0; }
  .bookbar { display: none; }
  .two, .two.rev, .blacksand-grid, .menu, .services, .form { grid-template-columns: 1fr; }
  .two.rev > :first-child { order: 0; }
  .two img, .two img.tall { height: 380px; }
  .blacksand-text { padding: 56px 32px; }
  .rooms-grid, .packs-grid, .strip, .steps { grid-template-columns: 1fr; }
  .strip img, .strip .panel { height: 320px; min-height: 0; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .tonight { margin-top: 24px; }
  .tonight-inner { grid-template-columns: 1fr; gap: 14px; }
  .service { grid-template-columns: 1fr; }
  .pkg { grid-template-columns: 1fr; }
  .pkg:nth-child(even) .pkg-img { order: 0; }
  .pkg-img { min-height: 260px; }
  .pkg-body { padding: 28px 24px; }
  .incl, .addons { grid-template-columns: 1fr; }
  .service img { height: 220px; min-height: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-img { height: 70vh; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .list-row { grid-template-columns: 1fr auto; }
  .list-date { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .span2 { grid-column: span 1; grid-row: span 1; }
}